17a815e5a9
* do not rely on node_modules path * bump eslint to v9, run eslint via npm task, remove from build task * loosen dependencies and update all packages * rebuild assets with latest frontend packages * bump webpack encore and dependencies * bump to latest stable yarn * explicitly mention dependencies
90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
/*
|
|
* This file is part of the Kimai time-tracking app.
|
|
*
|
|
* For the full copyright and license information, please view the LICENSE
|
|
* file that was distributed with this source code.
|
|
*/
|
|
|
|
/*!
|
|
* [KIMAI] KimaiMultiUpdateForm: handle the multi update checkbox list and form
|
|
*/
|
|
|
|
import KimaiPlugin from '../KimaiPlugin';
|
|
|
|
export default class KimaiMultiUpdateTable extends KimaiPlugin {
|
|
|
|
init()
|
|
{
|
|
if (document.getElementsByClassName('multi_update_all').length === 0) {
|
|
return;
|
|
}
|
|
|
|
// we have to attach it to the "page-body" div, because section.content can be replaced
|
|
// via KimaiDatable and everything inside will be removed, including event listeners
|
|
const element = document.querySelector('div.page-body');
|
|
element.addEventListener('change', (event) => {
|
|
if (event.target.matches('.multi_update_all')) {
|
|
// the "check all" checkbox in the upper start corner of the table
|
|
const checked = event.target.checked;
|
|
const table = event.target.closest('table');
|
|
for (const element of table.querySelectorAll('.multi_update_single')) {
|
|
element.checked = checked;
|
|
}
|
|
this._toggleForm(table);
|
|
event.stopPropagation();
|
|
} else if (event.target.matches('.multi_update_single')) {
|
|
// single checkboxes in front of each row
|
|
this._toggleForm(event.target.closest('table'));
|
|
event.stopPropagation();
|
|
}
|
|
});
|
|
|
|
element.addEventListener('click', (event) => {
|
|
if (event.target.matches('.multi_update_table_action')) {
|
|
const selectedButton = event.target;
|
|
const form = selectedButton.form;
|
|
const ids = form.querySelector('.multi_update_ids').value.split(',');
|
|
const question = form.dataset['question'].replace(/%action%/, selectedButton.textContent).replace(/%count%/, ids.length.toString());
|
|
|
|
/** @type {KimaiAlert} ALERT */
|
|
const ALERT = this.getPlugin('alert');
|
|
ALERT.question(question, function(value) {
|
|
if (value) {
|
|
form.action = selectedButton.dataset['href'];
|
|
form.submit();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLTableElement} table
|
|
* @private
|
|
*/
|
|
_toggleForm(table)
|
|
{
|
|
const card = table.closest('div.card.data_table');
|
|
|
|
let ids = [];
|
|
for (const box of table.querySelectorAll('input.multi_update_single:checked')) {
|
|
ids.push(box.value);
|
|
}
|
|
|
|
card.querySelector('.multi_update_ids').value = ids.join(',');
|
|
|
|
if (ids.length > 0) {
|
|
for (const element of card.querySelectorAll('.multi_update_form_hide')) {
|
|
element.style.setProperty('display', 'none', 'important');
|
|
}
|
|
card.querySelector('form.multi_update_form').style.display = null;//'block';
|
|
} else {
|
|
card.querySelector('form.multi_update_form').style.setProperty('display', 'none', 'important');
|
|
for (const element of card.querySelectorAll('.multi_update_form_hide')) {
|
|
element.style.display = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|