jjsm01/kimai2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Next major version 2 with PHP 8.1, Symfony 6, Tabler UI, 2FA ... (#2902)

Browse Source
This commit is contained in:
Kevin Papst
2022-12-31 21:19:55 +01:00
committed by GitHub
parent 95e06746bd
commit 90a0fd8a22
2164 changed files with 83700 additions and 86426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
assets/js/plugins/KimaiToolbar.js
View File

@@ -9,15 +9,14 @@
* [KIMAI] KimaiToolbar: some event listener to handle the toolbar/data-table filter, toolbar and navigation
*/
import jQuery from 'jquery';
import KimaiPlugin from "../KimaiPlugin";
export default class KimaiToolbar extends KimaiPlugin {
constructor(formSelector, formSubmitActionClass) {
super();
this.formSelector = formSelector;
this.actionClass = formSubmitActionClass;
this._formSelector = formSelector;
this._actionClass = formSubmitActionClass;
}
getId() {
@@ -26,50 +25,52 @@ export default class KimaiToolbar extends KimaiPlugin {
init() {
const formSelector = this.getSelector();
const self = this;
const EVENT = self.getContainer().getPlugin('event');
this._registerPagination(formSelector, EVENT);
this._registerSortableTables(formSelector, EVENT);
this._registerAlternativeSubmitActions(formSelector, this.actionClass);
this._registerPagination(formSelector);
this._registerSortableTables(formSelector);
this._registerAlternativeSubmitActions(formSelector, this._actionClass);
// Reset the page if filter values are changed, otherwise we might end up with a limited set of data,
// which does not support the given page - and it would be just wrong to stay in the same page
jQuery(formSelector +' input').change(function (event) {
switch (event.target.id) {
case 'order':
case 'orderBy':
case 'page':
break;
default:
jQuery(formSelector + ' input#page').val(1);
break;
}
self.triggerChange();
[].slice.call(document.querySelectorAll(formSelector + ' input')).map((element) => {
element.addEventListener('change', (event) => {
switch (event.target.id) {
case 'order':
case 'orderBy':
case 'page':
break;
default:
document.querySelector(formSelector + ' input#page').value = 1;
break;
}
});
this.triggerChange();
});
// when user selected a new customer or project, reset the pagination back to 1
// and then find out if the results should be reloaded
jQuery(formSelector + ' select').change(function (event) {
let reload = true;
switch (event.target.id) {
case 'customer':
if (jQuery(formSelector + ' select#project').length > 0) {
reload = false;
}
break;
[].slice.call(document.querySelectorAll(formSelector + ' select')).map((element) => {
element.addEventListener('change', (event) => {
let reload = true;
switch (event.target.id) {
case 'customer':
if (document.querySelector(formSelector + ' select#project') !== null) {
reload = false;
}
break;
case 'project':
if (jQuery(formSelector + ' select#activity').length > 0) {
reload = false;
}
break;
}
jQuery(formSelector + ' input#page').val(1);
case 'project':
if (document.querySelector(formSelector + ' select#activity') !== null) {
reload = false;
}
break;
}
document.querySelector(formSelector + ' input#page').value = 1;
if (reload) {
self.triggerChange();
}
if (reload) {
this.triggerChange();
}
});
});
}
@@ -80,15 +81,17 @@ export default class KimaiToolbar extends KimaiPlugin {
_registerAlternativeSubmitActions(toolbarSelector, actionBtnClass) {
document.addEventListener('click', function(event) {
let target = event.target;
while (target !== null && !target.matches('body')) {
while (target !== null && typeof target.matches === "function" && !target.matches('body')) {
if (target.classList.contains(actionBtnClass)) {
const form = document.querySelector(toolbarSelector);
if (form === null) {
return;
}
const prevAction = form.action;
const prevMethod = form.method;
form.target = '_blank';
const prevAction = form.getAttribute('action');
const prevMethod = form.getAttribute('method');
if (target.dataset.target !== undefined) {
form.target = target.dataset.target;
}
form.action = target.href;
if (target.dataset.method !== undefined) {
form.method = target.dataset.method;
@@ -104,51 +107,65 @@ export default class KimaiToolbar extends KimaiPlugin {
target = target.parentNode;
}
});
});
}
/**
* Sortable datatables use hidden fields in the toolbar filter/search form
* @private
*/
_registerSortableTables(formSelector, EVENT) {
jQuery('body').on('click', 'th.sortable', function(event){
var $header = jQuery(event.target);
var order = 'DESC';
var orderBy = $header.data('order');
if ($header.hasClass('sorting_desc')) {
_registerSortableTables(formSelector) {
document.body.addEventListener('click', (event) => {
if (!event.target.matches('th.sortable')) {
return;
}
let order = 'DESC';
let orderBy = event.target.dataset['order'];
if (event.target.classList.contains('sorting_desc')) {
order = 'ASC';
}
jQuery(formSelector + ' #orderBy').val(orderBy);
jQuery(formSelector + ' #order').val(order);
document.querySelector(formSelector + ' #orderBy').value = orderBy;
document.querySelector(formSelector + ' #order').value = order;
// re-render the selectboxes
jQuery(formSelector + ' #orderBy').trigger('change');
jQuery(formSelector + ' #order').trigger('change');
// re-render the selectbox
document.querySelector(formSelector + ' #orderBy').dispatchEvent(new Event('change'));
document.querySelector(formSelector + ' #order').dispatchEvent(new Event('change'));
// triggers the datatable reload - search for the event name
EVENT.trigger('filter-change');
document.dispatchEvent(new Event('filter-change'));
});
}
/**
* This catches all clicks on the pagination and prevents the default action, as we want to reload the page via JS
* This catches all clicks on the pagination and prevents the default action,
* as we want to reload the page via JS.
*
* @private
*/
_registerPagination(formSelector, EVENT) {
jQuery('body').on('click', 'div.navigation ul.pagination li a', function(event) {
let pager = jQuery(formSelector + " input#page");
if (pager.length === 0) {
_registerPagination(formSelector) {
document.body.addEventListener('click', (event) => {
if (!event.target.matches('ul.pagination li a') && (event.target.parentNode === null || !event.target.parentNode.matches('ul.pagination li a'))) {
return;
}
let pager = document.querySelector(formSelector + " input#page");
if (pager === null) {
return;
}
let target = event.target;
// this happens for the arrows, which can be an icon <i> element
if (!target.matches('a')) {
target = target.parentNode;
}
event.preventDefault();
event.stopPropagation();
let urlParts = jQuery(this).attr('href').split('/');
let page = urlParts[urlParts.length-1];
pager.val(page);
pager.trigger('change');
EVENT.trigger('pagination-change');
let urlParts = target.href.split('/');
pager.value = urlParts[urlParts.length-1];
pager.dispatchEvent(new Event('change'));
document.dispatchEvent(new Event('pagination-change'));
return false;
});
@@ -158,7 +175,7 @@ export default class KimaiToolbar extends KimaiPlugin {
* Triggers an event, that everyone can listen for.
*/
triggerChange() {
this.getContainer().getPlugin('event').trigger('toolbar-change');
document.dispatchEvent(new Event('toolbar-change'));
}
/**
@@ -167,7 +184,7 @@ export default class KimaiToolbar extends KimaiPlugin {
* @returns {string}
*/
getSelector() {
return this.formSelector;
return this._formSelector;
}
}