Skip to content

Commit 4907e95

Browse files
takieliastakielias
authored
Merge pull request #29 from takielias/11.x
11.x
2 parents 91fe0e2 + 5dce36a commit 4907e95

34 files changed

+300
-45
lines changed

‎.github/workflows/tests.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ name: Tablar Kit Tests
22

33
on:
44
push:
5-
branches: [ master ]
5+
branches: [ 11.x ]
66
pull_request:
7-
branches: [ master ]
7+
branches: [ 11.x ]
88

99
jobs:
1010
test:
11+
name: Run Tests
1112
runs-on: ubuntu-latest
1213

1314
steps:

‎composer.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,9 @@
2424
"takielias/tablar": "*"
2525
},
2626
"require-dev": {
27-
"phpunit/phpunit": "~10.0",
2827
"orchestra/testbench": "~9",
2928
"gajus/dindent": "^2.0",
30-
"league/commonmark": "^1.4|^2.0",
31-
"lorisleiva/cron-translator": "^0.1.1"
29+
"phpunit/phpunit": "^10.0"
3230
},
3331
"autoload": {
3432
"psr-4": {
@@ -40,7 +38,7 @@
4038
},
4139
"autoload-dev": {
4240
"psr-4": {
43-
"Takielias\\TablarKit\\Tests\\": "tests/"
41+
"TakiElias\\TablarKit\\Tests\\": "tests/"
4442
}
4543
},
4644
"extra": {

‎config/tablar-kit.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
'dependent-select' => Takielias\TablarKit\Components\Forms\Inputs\DependentSelect::class,
3030
'tom-select' => Takielias\TablarKit\Components\Forms\Inputs\TomSelect::class,
3131
'email' => Takielias\TablarKit\Components\Forms\Inputs\Email::class,
32+
'modal' => Takielias\TablarKit\Components\Modals\Modal::class,
33+
'modal-form' => Takielias\TablarKit\Components\Modals\ModalForm::class,
3234
'error' => Takielias\TablarKit\Components\Forms\Error::class,
3335
'lite-picker' => Takielias\TablarKit\Components\Forms\Inputs\LitePicker::class,
3436
'flat-picker' => Takielias\TablarKit\Components\Forms\Inputs\FlatPicker::class,

‎phpunit.xml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
<testsuites>
77
<testsuite name="Package">
88
<directory suffix=".php">./tests/Components</directory>
9-
<exclude>tests/Components/ComponentTestCase.php</exclude>
10-
119
</testsuite>
1210
</testsuites>
1311
<source>

‎resources/js/plugins/load.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ import './filepond.js'
66
import './tabulator.js'
77
import './xlsx.js'
88
import './jspdf.js'
9+
import './modal'
910
import './common.js'

‎resources/js/plugins/modal.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const TablarModal = {
2+
init() {
3+
this.bindModalTriggers();
4+
this.bindFormSubmissions();
5+
},
6+
7+
loadModal(url, containerId = 'modal-container') {
8+
fetch(url)
9+
.then(response => {
10+
if (!response.ok) {
11+
throw new Error(`HTTP error! status: ${response.status}`);
12+
}
13+
return response.text();
14+
})
15+
.then(html => {
16+
document.getElementById(containerId).innerHTML = html;
17+
// Initialize the new modal
18+
const modalElement = document.querySelector('.modal');
19+
const modal = new bootstrap.Modal(modalElement);
20+
modal.show();
21+
22+
// Rebind form submissions for the new modal
23+
this.bindFormSubmissions();
24+
})
25+
.catch(error => {
26+
console.error('Error loading modal:', error);
27+
// Optionally show error message to user
28+
alert('Error loading modal content. Please try again.');
29+
});
30+
},
31+
32+
bindModalTriggers() {
33+
// For buttons with data-modal-url
34+
document.querySelectorAll('[data-modal-url]').forEach(button => {
35+
button.addEventListener('click', (e) => {
36+
e.preventDefault();
37+
const url = button.dataset.modalUrl;
38+
this.loadModal(url);
39+
});
40+
});
41+
42+
// For links with data-modal-trigger
43+
document.querySelectorAll('[data-modal-trigger]').forEach(link => {
44+
link.addEventListener('click', (e) => {
45+
e.preventDefault();
46+
const url = link.href;
47+
this.loadModal(url);
48+
});
49+
});
50+
},
51+
52+
bindFormSubmissions() {
53+
document.querySelectorAll('.modal form').forEach(form => {
54+
form.addEventListener('submit', async (e) => {
55+
e.preventDefault();
56+
57+
try {
58+
const response = await fetch(form.action, {
59+
method: form.method,
60+
body: new FormData(form),
61+
headers: {
62+
'X-Requested-With': 'XMLHttpRequest'
63+
}
64+
});
65+
66+
const data = await response.json();
67+
68+
if (data.success) {
69+
// Close modal
70+
const modal = bootstrap.Modal.getInstance(form.closest('.modal'));
71+
modal.hide();
72+
73+
// Clear modal container
74+
document.getElementById('modal-container').innerHTML = '';
75+
76+
// Optional: Show success message
77+
if (data.message) {
78+
alert(data.message);
79+
}
80+
81+
// Optional: Refresh page or update specific content
82+
if (data.reload) {
83+
window.location.reload();
84+
}
85+
}
86+
} catch (error) {
87+
console.error('Error submitting form:', error);
88+
}
89+
});
90+
});
91+
}
92+
};
93+
94+
// Initialize TablarModal when DOM is ready
95+
document.addEventListener('DOMContentLoaded', () => {
96+
TablarModal.init();
97+
});
98+
99+
// Global function to open any modal
100+
window.openModal = (url) => {
101+
TablarModal.loadModal(url);
102+
}

‎resources/views/components/modals/form.blade.php‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@props([
2+
'id' => 'modal-form',
3+
'action' => '',
4+
'method' => 'POST'
5+
])
6+
7+
<form action="{{ $action }}" method="{{ $method === 'GET' ? 'GET' : 'POST' }}">
8+
@csrf
9+
@if(!in_array($method, ['GET', 'POST']))
10+
@method($method)
11+
@endif
12+
13+
<x-modal :id="$id" {{ $attributes }}>
14+
{{ $slot }}
15+
</x-modal>
16+
</form>

‎resources/views/components/modals/modal.blade.php‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@props([
2+
'id' => 'modal-default',
3+
'size' => '', // sm, lg, full-width
4+
'status' => '', // success, danger
5+
'title' => '',
6+
'scrollable' => false,
7+
'centered' => true,
8+
])
9+
10+
<div {{ $attributes->merge(['class' => 'modal modal-blur fade']) }}
11+
id="{{ $id }}"
12+
tabindex="-1"
13+
role="dialog"
14+
aria-hidden="true">
15+
<div class="modal-dialog modal-dialog-{{ $centered ? 'centered' : '' }}
16+
{{ $scrollable ? 'modal-dialog-scrollable' : '' }}
17+
{{ $size ? 'modal-'.$size : '' }}"
18+
role="document">
19+
<div class="modal-content">
20+
@if($status)
21+
<div class="modal-status bg-{{ $status }}"></div>
22+
@endif
23+
24+
@if($title || isset($header))
25+
<div class="modal-header">
26+
@if(isset($header))
27+
{{ $header }}
28+
@else
29+
<h5 class="modal-title">{{ $title }}</h5>
30+
@endif
31+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
32+
</div>
33+
@endif
34+
35+
<div class="modal-body" id="modal-container">
36+
{{ $slot }}
37+
</div>
38+
39+
@isset($footer)
40+
<div class="modal-footer">
41+
{{ $footer }}
42+
</div>
43+
@endisset
44+
</div>
45+
</div>
46+
</div>

‎src/Commands/InstallTablarKit.php‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ public function handle(): void
3131
self::updateTablarJs();
3232
self::scaffoldConfig();
3333
$this->newLine();
34-
$this->comment('Tablar kit is now installed 🚀');
34+
$this->comment('Tablar kit has been installed successfully. 🚀');
3535
$this->newLine();
3636
$this->comment('Run "npm install" first. Once the installation is done, run "npm run dev"');
3737
$this->newLine();
@@ -103,14 +103,24 @@ protected static function updateTablarJs(): void
103103

104104
// Array of lines to be added
105105
$linesToAdd = [
106-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/filepond.js';\n",
107-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/jodit-editor.js';\n",
108-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/tom-select.js';\n",
109-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/flat-picker.js';\n",
110-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/lite-picker.js';\n",
111-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/tabulator.js';\n",
112-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/xlsx.js';\n",
113-
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/jspdf.js';\n",
106+
"\n// Tablar Kit components' JavaScript dependencies.\n",
107+
"// Uncomment the required dependencies and run npm run build to include them. \n",
108+
"\n // Filepond components' JavaScript dependencies. \n",
109+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/filepond.js';\n",
110+
"\n // Editor components' JavaScript dependencies. \n",
111+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/jodit-editor.js';\n",
112+
"\n // Select/DropDown components' JavaScript dependencies. \n",
113+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/tom-select.js';\n",
114+
"\n // Date & Time Picker components' JavaScript dependencies. \n",
115+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/flat-picker.js';\n",
116+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/lite-picker.js';\n",
117+
"\n // Table components' JavaScript dependencies. \n",
118+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/tabulator.js';\n",
119+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/xlsx.js';\n",
120+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/jspdf.js';\n",
121+
"\n // Modal components' JavaScript dependencies. \n",
122+
"//import '../../vendor/takielias/tablar-kit/resources/js/plugins/modal.js';\n",
123+
"\n // Common JavaScript dependencies. \n",
114124
"import '../../vendor/takielias/tablar-kit/resources/js/plugins/common.js';\n",
115125
];
116126

‎src/Components/Modals/Modal.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php
2+
3+
namespace Takielias\TablarKit\Components\Modals;
4+
5+
use Illuminate\View\Component;
6+
7+
class Modal extends Component
8+
{
9+
public function render()
10+
{
11+
return view('tablar-kit::components.modals.modal');
12+
}
13+
}

0 commit comments

Comments
 (0)