133 lines
3.7 KiB
JavaScript
133 lines
3.7 KiB
JavaScript
import './bootstrap';
|
|
import $ from 'jquery';
|
|
import select2 from 'select2/dist/js/select2.full.js';
|
|
import 'select2/dist/css/select2.css';
|
|
import flatpickr from 'flatpickr';
|
|
import 'flatpickr/dist/flatpickr.css';
|
|
|
|
window.$ = $;
|
|
window.jQuery = $;
|
|
|
|
select2(window, $);
|
|
|
|
function livewireComponentFor(element) {
|
|
const componentRoot = element.closest('[wire\\:id]');
|
|
|
|
if (!componentRoot || ! window.Livewire) {
|
|
return null;
|
|
}
|
|
|
|
return window.Livewire.find(componentRoot.getAttribute('wire:id'));
|
|
}
|
|
|
|
function setLivewireProperty(element, model, value) {
|
|
const component = livewireComponentFor(element);
|
|
|
|
if (!component || !model) {
|
|
return;
|
|
}
|
|
|
|
component.set(model, value === '' ? null : value);
|
|
}
|
|
|
|
function initialiseHelpdeskSelects() {
|
|
$('[data-helpdesk-select2]').each(function () {
|
|
const select = this;
|
|
const $select = $(select);
|
|
const placeholder = $select.data('placeholder') || $select.find('option[value=""]').first().text() || 'Select option';
|
|
|
|
if ($select.hasClass('select2-hidden-accessible')) {
|
|
return;
|
|
}
|
|
|
|
if (!$select.find('option[value=""]').length) {
|
|
$select.prepend(new Option('', '', false, false));
|
|
}
|
|
|
|
$select.select2({
|
|
width: '100%',
|
|
allowClear: true,
|
|
placeholder,
|
|
});
|
|
|
|
$select.on('change.helpdesk-select2', function () {
|
|
setLivewireProperty(select, $select.data('wire-model'), $select.val());
|
|
});
|
|
});
|
|
}
|
|
|
|
function clearHelpdeskSelects(root = document) {
|
|
$(root).find('[data-helpdesk-select2]').each(function () {
|
|
const $select = $(this);
|
|
|
|
$select.val(null);
|
|
$select.trigger('change.select2');
|
|
$select.trigger('change.helpdesk-select2');
|
|
$select.trigger('change');
|
|
});
|
|
}
|
|
|
|
function initialiseHelpdeskDatePickers() {
|
|
document.querySelectorAll('[data-helpdesk-flatpickr]').forEach((input) => {
|
|
if (input._helpdeskFlatpickr) {
|
|
return;
|
|
}
|
|
|
|
input._helpdeskFlatpickr = flatpickr(input, {
|
|
allowInput: true,
|
|
altInput: true,
|
|
altFormat: 'd M Y',
|
|
dateFormat: 'Y-m-d',
|
|
disableMobile: false,
|
|
onChange: (_selectedDates, dateText) => {
|
|
setLivewireProperty(input, input.dataset.wireModel, dateText || null);
|
|
},
|
|
onClose: (_selectedDates, dateText) => {
|
|
setLivewireProperty(input, input.dataset.wireModel, dateText || null);
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
function clearHelpdeskDatePickers(root = document) {
|
|
root.querySelectorAll('[data-helpdesk-flatpickr]').forEach((input) => {
|
|
if (input._helpdeskFlatpickr) {
|
|
input._helpdeskFlatpickr.clear();
|
|
}
|
|
|
|
input.value = '';
|
|
setLivewireProperty(input, input.dataset.wireModel, null);
|
|
});
|
|
}
|
|
|
|
function initialiseHelpdeskFormControls() {
|
|
initialiseHelpdeskSelects();
|
|
initialiseHelpdeskDatePickers();
|
|
}
|
|
|
|
function clearHelpdeskFormControls() {
|
|
clearHelpdeskSelects();
|
|
clearHelpdeskDatePickers();
|
|
}
|
|
|
|
window.initialiseHelpdeskFormControls = initialiseHelpdeskFormControls;
|
|
window.clearHelpdeskFormControls = clearHelpdeskFormControls;
|
|
|
|
document.addEventListener('DOMContentLoaded', initialiseHelpdeskFormControls);
|
|
document.addEventListener('livewire:navigated', initialiseHelpdeskFormControls);
|
|
document.addEventListener('helpdesk-form-cleared', clearHelpdeskFormControls);
|
|
|
|
document.addEventListener('livewire:init', () => {
|
|
initialiseHelpdeskFormControls();
|
|
|
|
Livewire.hook('morphed', () => {
|
|
initialiseHelpdeskFormControls();
|
|
});
|
|
|
|
Livewire.on('helpdesk-form-cleared', () => {
|
|
clearHelpdeskFormControls();
|
|
});
|
|
});
|
|
|
|
console.info('Helpdesk module assets loaded');
|