- 
+ 
- 
-
-
+
+
+
' + tplReplaced + '
';
+ },
+ no_results: (data, escape) => {
+ const tpl = this.translate('select.search.notfound');
+ const tplReplaced = tpl.replace('%input%', '' + escape(data.input) + '')
+ return '' + tplReplaced + '
';
+ },
+ },
+ });
+ });
+ }
+
+ destroyForm(form) {
+ [].slice.call(form.querySelectorAll(this.selector)).map((node) => {
+ if (node.tomselect) {
+ node.tomselect.destroy();
+ }
+ });
+ }
+
+}
diff --git a/assets/js/forms/KimaiCopyDataForm.js b/assets/js/forms/KimaiCopyDataForm.js
new file mode 100644
index 000000000..d9ba66869
--- /dev/null
+++ b/assets/js/forms/KimaiCopyDataForm.js
@@ -0,0 +1,71 @@
+/*
+ * 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] KimaiEditTimesheetForm: responsible for the most important form in the application
+ */
+
+import KimaiFormPlugin from "./KimaiFormPlugin";
+
+/**
+ * Used for simple copy from link to input action, e.g. the time and duration dropdowns
+ * copy the selected values into their corresponding input.
+ */
+export default class KimaiCopyDataForm extends KimaiFormPlugin {
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form) // eslint-disable-line no-unused-vars
+ {
+ return true;
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ activateForm(form) // eslint-disable-line no-unused-vars
+ {
+ if (this._eventHandler === undefined) {
+ this._eventHandler = (event) => {
+ let element = event.target;
+ if (!element.matches('a[data-form-widget="copy-data"]')) {
+ element = element.parentNode; // mostly for icons
+ }
+ if (!element.matches('a[data-form-widget="copy-data"]') || element.dataset.target === undefined) {
+ return;
+ }
+ const target = document.querySelector(element.dataset.target);
+ if (target === null) {
+ return;
+ }
+ target.value = element.dataset.value;
+ if (element.dataset.event !== undefined) {
+ for (const event of element.dataset.event.split(' ')) {
+ target.dispatchEvent(new Event(event));
+ }
+ } else if (element.dataset.eventBubbles !== undefined) {
+ for (const event of element.dataset.eventBubbles.split(' ')) {
+ target.dispatchEvent(new Event(event, {bubbles: true}));
+ }
+ }
+ event.preventDefault();
+ };
+ }
+ form.addEventListener('click', this._eventHandler);
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form) // eslint-disable-line no-unused-vars
+ {
+ form.removeEventListener('click', this._eventHandler);
+ }
+
+}
diff --git a/assets/js/forms/KimaiDateNowForm.js b/assets/js/forms/KimaiDateNowForm.js
new file mode 100644
index 000000000..da90658aa
--- /dev/null
+++ b/assets/js/forms/KimaiDateNowForm.js
@@ -0,0 +1,70 @@
+/*
+ * 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] KimaiEditTimesheetForm: responsible for the most important form in the application
+ */
+
+import KimaiFormPlugin from "./KimaiFormPlugin";
+
+/**
+ */
+export default class KimaiDateNowForm extends KimaiFormPlugin {
+
+ init()
+ {
+ this.selector = 'a[data-form-widget="date-now"]';
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form) // eslint-disable-line no-unused-vars
+ {
+ return true;
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ activateForm(form)
+ {
+ [].slice.call(form.querySelectorAll(this.selector)).map((element) => {
+ if (element.dataset.format !== undefined && element.dataset.target !== undefined) {
+ if (this._eventHandler === undefined) {
+ this._eventHandler = (event) => {
+ const linkTarget = event.currentTarget;
+
+ const formElement = document.getElementById(linkTarget.dataset.target);
+ if (!formElement.disabled) {
+ formElement.value = this.getDateUtils().format(linkTarget.dataset.format, null);
+ formElement.dispatchEvent(new Event('change', {bubbles: true}));
+ }
+
+ event.preventDefault();
+ };
+ }
+ element.addEventListener('click', this._eventHandler);
+ }
+ });
+
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form)
+ {
+ [].slice.call(form.querySelectorAll(this.selector)).map((element) => {
+ if (element.dataset.format !== undefined && element.dataset.target !== undefined) {
+ element.removeEventListener('click', this._eventHandler);
+ }
+ });
+ }
+
+}
diff --git a/assets/js/forms/KimaiDatePicker.js b/assets/js/forms/KimaiDatePicker.js
new file mode 100644
index 000000000..a0e308c34
--- /dev/null
+++ b/assets/js/forms/KimaiDatePicker.js
@@ -0,0 +1,113 @@
+/*
+ * 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] KimaiDatePicker: single date selects (currently unused)
+ */
+
+import { Litepicker } from 'litepicker';
+import 'litepicker/dist/plugins/mobilefriendly';
+import KimaiFormPlugin from "./KimaiFormPlugin";
+
+export default class KimaiDatePicker extends KimaiFormPlugin {
+
+ constructor(selector)
+ {
+ super();
+ this._selector = selector;
+ }
+
+ init()
+ {
+ window.disableLitepickerStyles = true;
+ this._pickers = [];
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form) // eslint-disable-line no-unused-vars
+ {
+ return true;
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ activateForm(form)
+ {
+ const FIRST_DOW = this.getConfigurations().getFirstDayOfWeek(false);
+ const LANGUAGE = this.getConfigurations().getLanguage();
+
+ let options = {
+ buttonText: {
+ previousMonth: ``,
+ nextMonth: ``,
+ apply: this.translate('confirm'),
+ cancel: this.translate('cancel'),
+ },
+ };
+
+ const newPickers = [].slice.call(form.querySelectorAll(this._selector)).map((element) => {
+ if (element.dataset.format === undefined) {
+ console.log('Trying to bind litepicker to an element without data-format attribute');
+ }
+ options = {...options, ...{
+ format: element.dataset.format,
+ showTooltip: false,
+ element: element,
+ lang: LANGUAGE,
+ autoRefresh: true,
+ firstDay: FIRST_DOW, // Litepicker: 0 = Sunday, 1 = Monday
+ setup: (picker) => {
+ // nasty hack, because litepicker does not trigger change event on the input and the available
+ // event "selected" is triggered why to often, even when moving the cursor inside the input
+ // element (not even typing is necessary) and so we have to make sure that the manual "click" event
+ // (works for touch as well) happened before we actually dispatch the change event manually ...
+ // what? report forms would be submitted upon cursor move without the "preselect” check
+ picker.on('preselect', (date1, date2) => { // eslint-disable-line no-unused-vars
+ picker._wasPreselected = true;
+ });
+ picker.on('selected', (date1, date2) => { // eslint-disable-line no-unused-vars
+ if (picker._wasPreselected !== undefined) {
+ element.dispatchEvent(new Event('change', {bubbles: true}));
+ delete picker._wasPreselected;
+ }
+ });
+ },
+ }};
+
+ return [element, new Litepicker(this.prepareOptions(options))];
+ });
+
+ this._pickers = this._pickers.concat(newPickers);
+ }
+
+ prepareOptions(options)
+ {
+ return {...options, ...{
+ plugins: ['mobilefriendly'],
+ }};
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form)
+ {
+ [].slice.call(form.querySelectorAll(this._selector)).map((element) => {
+ for (let i = 0; i < this._pickers.length; i++) {
+ if (this._pickers[i][0] === element) {
+ this._pickers[i][1].destroy();
+ this._pickers.splice(i, 1);
+ }
+ }
+ });
+ }
+
+}
diff --git a/assets/js/forms/KimaiDateRangePicker.js b/assets/js/forms/KimaiDateRangePicker.js
new file mode 100644
index 000000000..24aa2f972
--- /dev/null
+++ b/assets/js/forms/KimaiDateRangePicker.js
@@ -0,0 +1,25 @@
+/*
+ * 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] KimaiDateRangePicker: activate the (daterange picker) compound field in toolbar
+ */
+
+import KimaiDatePicker from "./KimaiDatePicker";
+
+export default class KimaiDateRangePicker extends KimaiDatePicker {
+
+ prepareOptions(options)
+ {
+ return {...options, ...{
+ plugins: ['mobilefriendly'],
+ singleMode: false,
+ autoRefresh: true,
+ }};
+ }
+
+}
diff --git a/assets/js/forms/KimaiFormPlugin.js b/assets/js/forms/KimaiFormPlugin.js
new file mode 100644
index 000000000..37b6e706d
--- /dev/null
+++ b/assets/js/forms/KimaiFormPlugin.js
@@ -0,0 +1,39 @@
+/*
+ * 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] KimaiFormPlugin: base class for all none ID plugin that handle forms
+ */
+
+import KimaiPlugin from '../KimaiPlugin';
+
+export default class KimaiFormPlugin extends KimaiPlugin {
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form) // eslint-disable-line no-unused-vars
+ {
+ return false;
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ activateForm(form) // eslint-disable-line no-unused-vars
+ {
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form) // eslint-disable-line no-unused-vars
+ {
+ }
+
+}
diff --git a/assets/js/forms/KimaiFormSelect.js b/assets/js/forms/KimaiFormSelect.js
new file mode 100644
index 000000000..2f2e15c21
--- /dev/null
+++ b/assets/js/forms/KimaiFormSelect.js
@@ -0,0 +1,574 @@
+/*
+ * 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] KimaiFormSelect: enhanced functionality for HTMLSelectElement
+ */
+
+import TomSelect from 'tom-select';
+import KimaiFormPlugin from "./KimaiFormPlugin";
+
+export default class KimaiFormSelect extends KimaiFormPlugin {
+
+ constructor(selector, apiSelects)
+ {
+ super();
+ this._selector = selector;
+ this._apiSelects = apiSelects;
+ }
+
+ getId()
+ {
+ return 'form-select';
+ }
+
+ init()
+ {
+ // selects the original value inside dropdowns, as the "reset" event (the updated option)
+ // is not automatically propagated to the JS element
+ document.addEventListener('reset', (event) => {
+ if (event.target.tagName.toUpperCase() === 'FORM') {
+ setTimeout(() => {
+ const fields = event.target.querySelectorAll(this._selector);
+ for (let field of fields) {
+ if (field.tagName.toUpperCase() === 'SELECT') {
+ field.dispatchEvent(new Event('data-reloaded'));
+ }
+ }
+ }, 10);
+ }
+ });
+ }
+
+ /**
+ * @param {HTMLFormElement} node
+ */
+ activateSelectPickerByElement(node)
+ {
+ let plugins = ['change_listener'];
+
+ const isMultiple = node.multiple !== undefined && node.multiple === true;
+
+ /*
+ const isOrdering = false;
+ if (isOrdering) {
+ plugins.push('caret_position');
+ plugins.push('drag_drop');
+ }
+ */
+
+ if (isMultiple) {
+ plugins.push('remove_button');
+ }
+
+ let options = {
+ lockOptgroupOrder: true,
+ allowEmptyOption: true,
+ plugins: plugins,
+ // if there are more than X entries, the other ones are hidden and can only be found
+ // by typing some characters to trigger the internal option search
+ maxOptions: 500,
+ };
+
+ let render = {
+ option_create: (data, escape) => {
+ const name = escape(data.input);
+ if (name.length < 3) {
+ return null;
+ }
+ const tpl = this.translate('select.search.create');
+ const tplReplaced = tpl.replace('%input%', '' + name + '');
+ return '' + tplReplaced + '
';
+ },
+ no_results: (data, escape) => {
+ const tpl = this.translate('select.search.notfound');
+ const tplReplaced = tpl.replace('%input%', '' + escape(data.input) + '');
+ return '' + tplReplaced + '
';
+ },
+ onOptionAdd: (value) => {
+ node.dispatchEvent(new CustomEvent('create', {detail: {'value': value}}));
+ },
+ };
+
+ if (node.dataset['create'] !== undefined) {
+ options = {...options, ...{
+ persist: true,
+ create: true,
+ }};
+ } else {
+ options = {...options, ...{
+ persist: false,
+ create: false,
+ }};
+ }
+
+ if (node.dataset.disableSearch !== undefined) {
+ options = {...options, ...{
+ controlInput: null,
+ }};
+ }
+
+ if (node.dataset['renderer'] !== undefined && node.dataset['renderer'] === 'color') {
+ options.render = {...render, ...{
+ option: function(data, escape) {
+ let color = data.value;
+ if (data.color !== undefined) {
+ color = data.color;
+ }
+ return ' ' + escape(data.text) + '
';
+ },
+ item: function(data, escape) {
+ let color = data.value;
+ if (data.color !== undefined) {
+ color = data.color;
+ }
+ return ' ' + escape(data.text) + '
';
+ }
+ }};
+ } else {
+ options.render = {...render, ...{
+ // the empty entry would collapse and only show as a tiny 5px line if there is no content inside
+ option: function(data, escape) {
+ let text = data.text;
+ if (text === null || text.trim() === '') {
+ text = ' ';
+ } else {
+ text = escape(text);
+ }
+ return '' + text + '
';
+ }
+ }};
+ }
+
+ const select = new TomSelect(node, options);
+ node.addEventListener('data-reloaded', (event) => {
+ select.clear(true);
+ select.clearOptionGroups();
+ select.clearOptions();
+ select.sync();
+ select.setValue(event.detail);
+ select.refreshItems();
+ select.refreshOptions(false);
+ });
+
+ // support reloading the list upon external event
+ if (node.dataset['reload'] !== undefined) {
+ node.addEventListener('reload', () => {
+ select.disable();
+ node.disabled = true;
+
+ /** @type {KimaiAPI} API */
+ const API = this.getContainer().getPlugin('api');
+
+ API.get(node.dataset['reload'], {}, (data) => {
+ this._updateSelect(node, data);
+ select.enable();
+ node.disabled = false;
+ });
+
+ node.dispatchEvent(new Event('change'));
+ });
+ }
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form) // eslint-disable-line no-unused-vars
+ {
+ return true;
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ activateForm(form)
+ {
+ [].slice.call(form.querySelectorAll(this._selector)).map((node) => {
+ this.activateSelectPickerByElement(node);
+ });
+
+ this._activateApiSelects(this._apiSelects);
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form)
+ {
+ [].slice.call(form.querySelectorAll(this._selector)).map((node) => {
+ if (node.tomselect) {
+ node.tomselect.destroy();
+ }
+ });
+ }
+
+ /**
+ * @param {string|Element} selectIdentifier
+ * @param {object} data
+ * @private
+ */
+ _updateOptions(selectIdentifier, data)
+ {
+ let emptyOption = null;
+ let node = null;
+ if (selectIdentifier instanceof Element) {
+ node = selectIdentifier;
+ } else {
+ node = document.querySelector(selectIdentifier);
+ }
+ if (node === null) {
+ console.log('Missing select: ' + selectIdentifier);
+ return;
+ }
+ const selectedValue = node.value;
+
+ for (let i = 0; i < node.options.length; i++) {
+ if (node.options[i].value === '') {
+ emptyOption = node.options[i];
+ }
+ }
+
+ node.options.length = 0;
+
+ if (emptyOption !== null) {
+ node.appendChild(this._createOption(emptyOption.text, ''));
+ }
+
+ let emptyOpts = [];
+ let options = [];
+ /** @type {string|null} titlePattern */
+ let titlePattern = null;
+ if (node.dataset !== undefined && node.dataset['optionPattern'] !== undefined) {
+ titlePattern = node.dataset['optionPattern'];
+ }
+ if (titlePattern === null || titlePattern === '') {
+ titlePattern = '{name}';
+ }
+
+ for (const [key, value] of Object.entries(data)) {
+ if (key === '__empty__') {
+ for (const entity of value) {
+ emptyOpts.push(this._createOption(this._getTitleFromPattern(titlePattern, entity), entity.id));
+ }
+ continue;
+ }
+
+ let optGroup = this._createOptgroup(key);
+ for (const entity of value) {
+ optGroup.appendChild(this._createOption(this._getTitleFromPattern(titlePattern, entity), entity.id));
+ }
+ options.push(optGroup);
+ }
+
+ options.forEach(child => node.appendChild(child));
+ emptyOpts.forEach(child => node.appendChild(child));
+
+ // if available, re-select the previous selected option (mostly usable for global activities)
+ node.value = selectedValue;
+
+ // pre-select an option if it is the only available one
+ if (node.value === '' || node.value === null) {
+ const allOptions = node.options;
+ const optionLength = allOptions.length;
+ let selectOption = '';
+
+ if (optionLength === 1) {
+ selectOption = allOptions[0].value;
+ } else if (optionLength === 2 && emptyOption !== null) {
+ selectOption = allOptions[1].value;
+ }
+
+ if (selectOption !== '') {
+ node.value = selectOption;
+ }
+ }
+
+ // this will update the attached javascript component
+ node.dispatchEvent(new CustomEvent('data-reloaded', {detail: node.value}));
+ // if we don't trigger the change, the other selects won't reset
+ node.dispatchEvent(new Event('change'));
+ }
+
+ /**
+ * @param {string} pattern
+ * @param {array} entity
+ * @private
+ */
+ _getTitleFromPattern(pattern, entity)
+ {
+ const DATE_UTILS = this.getDateUtils();
+ const regexp = new RegExp('{[^}]*?}','g');
+ let title = pattern;
+ let match = null;
+
+ while ((match = regexp.exec(pattern)) !== null) {
+ // cutting a string like "{name}" into "name"
+ const field = match[0].slice(1, -1);
+ let value = entity[field] === undefined ? null : entity[field];
+ if ((field === 'start' || field === 'end')) {
+ if (value === null) {
+ value = '?';
+ } else {
+ value = DATE_UTILS.getFormattedDate(value);
+ }
+ }
+
+ title = title.replace(new RegExp('{' + field + '}', 'g'), value ?? '');
+ }
+ title = title.replace(/- \?-\?/, '');
+ title = title.replace(/\r\n|\r|\n/g, ' ');
+ title = title.substring(0, 110);
+
+ const chars = '- ';
+ let start = 0, end = title.length;
+
+ while (start < end && chars.indexOf(title[start]) >= 0) {
+ ++start;
+ }
+
+ while (end > start && chars.indexOf(title[end - 1]) >= 0) {
+ --end;
+ }
+
+ return (start > 0 || end < title.length) ? title.substring(start, end) : title;
+ }
+
+ /**
+ * @param {HTMLSelectElement} select
+ * @param {string} label
+ * @param {string} value
+ * @param {object} dataset
+ */
+ addOption(select, label, value, dataset)
+ {
+ const option = this._createOption(label, value);
+ for (const key in dataset) {
+ option.dataset[key] = dataset[key];
+ }
+
+ select.options.add(option);
+ if (select.tomselect !== undefined) {
+ select.tomselect.sync();
+ }
+ }
+
+ /**
+ *
+ * @param {HTMLSelectElement} select
+ * @param {HTMLOptionElement} option
+ */
+ removeOption(select, option)
+ {
+ option.remove();
+ if (select.tomselect !== undefined) {
+ select.tomselect.removeOption(option.value, true);
+ select.tomselect.clear(true);
+ }
+ }
+
+ /**
+ * @param {string} label
+ * @param {string} value
+ * @returns {HTMLElement}
+ * @private
+ */
+ _createOption(label, value)
+ {
+ let option = document.createElement('option');
+ option.innerText = label;
+ option.value = value;
+ return option;
+ }
+
+ /**
+ * @param {string} label
+ * @returns {HTMLElement}
+ * @private
+ */
+ _createOptgroup(label)
+ {
+ let optGroup = document.createElement('optgroup');
+ optGroup.label = label;
+ return optGroup;
+ }
+
+ /**
+ * @param {string} selector
+ * @private
+ */
+ _activateApiSelects(selector)
+ {
+ if (this._eventHandlerApiSelects === undefined) {
+ this._eventHandlerApiSelects = (event) => {
+ if (event.target === null || !event.target.matches(selector)) {
+ return;
+ }
+
+ const apiSelect = event.target;
+ const targetSelectId = '#' + apiSelect.dataset['relatedSelect'];
+ /** @type {HTMLSelectElement} targetSelect */
+ const targetSelect = document.getElementById(apiSelect.dataset['relatedSelect']);
+
+ // if the related target select does not exist, we do not need to load the related data
+ if (targetSelect === null) {
+ return;
+ }
+
+ if (targetSelect.tomselect !== undefined) {
+ targetSelect.tomselect.disable();
+ }
+ targetSelect.disabled = true;
+
+ let formPrefix = apiSelect.dataset['formPrefix'];
+ if (formPrefix === undefined || formPrefix === null) {
+ formPrefix = '';
+ } else if (formPrefix.length > 0) {
+ formPrefix += '_';
+ }
+
+ let newApiUrl = this._buildUrlWithFormFields(apiSelect.dataset['apiUrl'], formPrefix);
+
+ const selectValue = apiSelect.value;
+
+ // Problem: select a project with activities and then select a customer that has no project
+ // results in a wrong URL, it triggers "activities?project=" instead of using the "emptyUrl"
+ if (selectValue === undefined || selectValue === null || selectValue === '' || (Array.isArray(selectValue) && selectValue.length === 0)) {
+ if (apiSelect.dataset['emptyUrl'] === undefined) {
+ this._updateSelect(targetSelectId, {});
+ return;
+ }
+ newApiUrl = this._buildUrlWithFormFields(apiSelect.dataset['emptyUrl'], formPrefix);
+ }
+
+ /** @type {KimaiAPI} API */
+ const API = this.getContainer().getPlugin('api');
+
+ API.get(newApiUrl, {}, (data) => {
+ this._updateSelect(targetSelectId, data);
+ if (targetSelect.tomselect !== undefined) {
+ targetSelect.tomselect.enable();
+ }
+ targetSelect.disabled = false;
+ });
+ }
+
+ document.addEventListener('change', this._eventHandlerApiSelects);
+ }
+ }
+
+ /**
+ * @param {string} apiUrl
+ * @param {string} formPrefix
+ * @return {string}
+ * @private
+ */
+ _buildUrlWithFormFields(apiUrl, formPrefix)
+ {
+ let newApiUrl = apiUrl;
+
+ apiUrl.split('?')[1].split('&').forEach(item => {
+ const [key, value] = item.split('='); // eslint-disable-line no-unused-vars
+ const decoded = decodeURIComponent(value);
+ const test = decoded.match(/%(.*)%/);
+ if (test !== null) {
+ const originalFieldName = test[1];
+ const targetFieldName = (formPrefix + originalFieldName).replace(/\[/, '').replace(/]/, '');
+ const targetField = document.getElementById(targetFieldName);
+ let newValue = '';
+ if (targetField === null) {
+ // happens for example:
+ // - in duration only mode, when the end field is not found
+ // console.log('ERROR: Cannot find field with name "' + test[1] + '" by selector: #' + formPrefix + test[1]);
+ } else {
+ if (targetField.value !== null) {
+ newValue = targetField.value;
+ if (targetField.tagName === 'SELECT' && targetField.multiple) {
+ newValue = [...targetField.selectedOptions].map(o => o.value);
+ } else if (newValue !== '') {
+ if (targetField.type === 'date') {
+ const timeId = targetField.id.replace('_date', '_time')
+ const timeElement = document.getElementById(timeId);
+ const time = timeElement === null ? '12:00:00' : timeElement.value;
+ // using 12:00 as fallback, because timezone handling might change the date if we use 00:00
+ const newDate = this.getDateUtils().fromHtml5Input(newValue, time);
+ newValue = this.getDateUtils().formatForAPI(newDate, false);
+ } else if (targetField.type === 'text' && targetField.name.includes('date')) {
+ const timeId = targetField.id.replace('_date', '_time')
+ const timeElement = document.getElementById(timeId);
+ // using 12:00 as fallback, because timezone handling might change the date if we use 00:00
+ let time = '12:00:00';
+ let timeFormat = 'HH:mm';
+ if (timeElement !== null) {
+ time = timeElement.value;
+ timeFormat = timeElement.dataset['format'];
+ }
+ const newDate = this.getDateUtils().fromFormat(newValue.trim() + ' ' + time.trim(), targetField.dataset['format'] + ' ' + timeFormat);
+ newValue = this.getDateUtils().formatForAPI(newDate, false);
+ } else if (targetField.dataset['format'] !== undefined) {
+ // find out when this else branch is triggered and document!
+
+ if (this.getDateUtils().isValidDateTime(newValue, targetField.dataset['format'])) {
+ newValue = this.getDateUtils().format(targetField.dataset['format'], newValue);
+ }
+ }
+ } else {
+ // happens for example:
+ // - when the end date is not set on a timesheet record and the project list is loaded (as the URL contains the %end% replacer)
+ // console.log('Empty value found for field with name "' + test[1] + '" by selector: #' + formPrefix + test[1]);
+ }
+ } else {
+ // happens for example:
+ // - when a customer without projects is selected
+ // console.log('ERROR: Empty field with name "' + test[1] + '" by selector: #' + formPrefix + test[1]);
+ }
+ }
+
+
+ if (Array.isArray(newValue)) {
+ let urlParams = [];
+ for (let tmpValue of newValue) {
+ urlParams.push(originalFieldName + '=' + tmpValue);
+ }
+ newApiUrl = newApiUrl.replace(item, urlParams.join('&'));
+ } else {
+ newApiUrl = newApiUrl.replace(value, newValue);
+ }
+ }
+ });
+
+ return newApiUrl;
+ }
+
+ /**
+ * @param {string|Element} select
+ * @param {object} data
+ * @private
+ */
+ _updateSelect(select, data)
+ {
+ const options = {};
+ for (const apiData of data) {
+ let title = '__empty__';
+ if (apiData['parentTitle'] !== undefined && apiData['parentTitle'] !== null) {
+ title = apiData['parentTitle'];
+ }
+ if (options[title] === undefined) {
+ options[title] = [];
+ }
+ options[title].push(apiData);
+ }
+
+ const ordered = {};
+ Object.keys(options).sort().forEach(function(key) {
+ ordered[key] = options[key];
+ });
+
+ this._updateOptions(select, ordered);
+ }
+}
diff --git a/assets/js/forms/KimaiTeamForm.js b/assets/js/forms/KimaiTeamForm.js
new file mode 100644
index 000000000..e0f09f14a
--- /dev/null
+++ b/assets/js/forms/KimaiTeamForm.js
@@ -0,0 +1,145 @@
+/*
+ * 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] KimaiEditTimesheetForm: responsible for the most important form in the application
+ */
+
+import KimaiFormPlugin from "./KimaiFormPlugin";
+import KimaiColor from "../widgets/KimaiColor";
+
+export default class KimaiTeamForm extends KimaiFormPlugin {
+
+ init()
+ {
+ this.usersId = 'team_edit_form_users';
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form)
+ {
+ return form.name === 'team_edit_form';
+ }
+
+ /**
+ * @return {HTMLElement}
+ * @private
+ */
+ _getPrototype()
+ {
+ return document.getElementById('team_edit_form_members');
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ activateForm(form)
+ {
+ if (!this.supportsForm(form)) {
+ return;
+ }
+
+ // must be attached to the form, because the button is added dynamically
+ form.addEventListener('click', event => this._removeMember(event));
+
+ document.getElementById(this.usersId).addEventListener('change', event => {
+ const select = event.target;
+ const option = select.options[select.selectedIndex];
+ const member = this._createMember(option);
+ this._getPrototype().append(member);
+ this.getPlugin('form-select').removeOption(select, option);
+ });
+ }
+
+ /**
+ * @param {HTMLOptionElement} option
+ * @returns {Element}
+ * @private
+ */
+ _createMember(option)
+ {
+ const prototype = this._getPrototype();
+ let counter = prototype.dataset['widgetCounter'] || prototype.childNodes.length;
+ let newWidget = prototype.dataset['prototype'];
+
+ newWidget = newWidget.replace(/__name__/g, counter);
+
+ newWidget = newWidget.replace(/#000000/g, KimaiColor.calculateContrastColor(option.dataset.color));
+ newWidget = newWidget.replace(/__DISPLAY__/g, option.dataset.display);
+ newWidget = newWidget.replace(/__COLOR__/g, option.dataset.color);
+ newWidget = newWidget.replace(/__INITIALS__/g, option.dataset.initials);
+ newWidget = newWidget.replace(/__TITLE__/g, option.dataset.title);
+ newWidget = newWidget.replace(/__USERNAME__/g, option.text);
+
+ prototype.dataset['widgetCounter'] = (++counter).toString();
+
+ const temp = document.createElement('div');
+ temp.innerHTML = newWidget;
+ temp.querySelector('input[type=hidden]').value = option.value;
+
+ const newNode = temp.firstElementChild;
+
+ // copy over all initial settings, so we are able to rebuild the original option if the
+ // member is removed from the list later on
+ for (const key in option.dataset) {
+ newNode.dataset[key] = option.dataset[key];
+ }
+
+ return newNode;
+ }
+
+ /**
+ * @param {Event} event
+ * @private
+ */
+ _removeMember(event)
+ {
+ let button = event.target;
+
+ if (button.parentNode.matches('.remove-member')) {
+ button = button.parentNode;
+ }
+
+ if (button.matches('.remove-member')) {
+ // see blocks.html.twig => block team_member_widget
+ const element = button.parentNode.parentNode.parentNode.parentNode.parentNode;
+
+ // re-adding the option to the select makes up for form validation errors
+ // because the list would have to be re-ordered and indices need to be changed ...
+ /*
+ this.getPlugin('form-select').addOption(
+ document.getElementById(this.usersId),
+ element.dataset['display'],
+ element.dataset['id'],
+ element.dataset
+ );
+ const prototype = this._getPrototype();
+ prototype.dataset['widgetCounter'] = (prototype.dataset['widgetCounter'] - 1).toString();
+ */
+
+ element.remove();
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form)
+ {
+ if (!this.supportsForm(form)) {
+ return;
+ }
+
+ form.removeEventListener('click', this._removeMember);
+ }
+
+}
diff --git a/assets/js/forms/KimaiTimesheetForm.js b/assets/js/forms/KimaiTimesheetForm.js
new file mode 100644
index 000000000..8ea6676ec
--- /dev/null
+++ b/assets/js/forms/KimaiTimesheetForm.js
@@ -0,0 +1,368 @@
+/*
+ * 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] KimaiEditTimesheetForm: responsible for the most important form in the application
+ */
+
+import { DateTime } from 'luxon';
+import KimaiFormPlugin from "./KimaiFormPlugin";
+
+export default class KimaiTimesheetForm extends KimaiFormPlugin {
+
+ /**
+ * @param {HTMLFormElement} form
+ * @return boolean
+ */
+ supportsForm(form)
+ {
+ return (form.name === 'timesheet_edit_form' || form.name ==='timesheet_admin_edit_form' || form.name ==='timesheet_multi_user_edit_form');
+ }
+
+ /**
+ * @param {HTMLFormElement} form
+ */
+ destroyForm(form)
+ {
+ if (!this.supportsForm(form)) {
+ return;
+ }
+
+ if (this._beginDate !== undefined) {
+ this._beginDate.removeEventListener('change', this._beginListener);
+ delete this._beginListener;
+ delete this._beginDate;
+ }
+
+ if (this._beginTime !== undefined) {
+ this._beginTime.removeEventListener('change', this._beginListener);
+ delete this._beginTime;
+ }
+
+ if (this._endTime !== undefined) {
+ this._endTime.removeEventListener('change', this._endListener);
+ delete this._endTime;
+ }
+
+ if (this._duration !== undefined) {
+ this._duration.removeEventListener('change', this._durationListener);
+ delete this._durationListener;
+ delete this._duration;
+ }
+
+ if (this._durationToggle !== undefined && this._durationToggle !== null) {
+ this._durationToggle.removeEventListener('change', this._durationToggleListener);
+ delete this._durationToggleListener;
+ delete this._durationToggle;
+ }
+
+ if (this._activity !== undefined) {
+ this._activity.removeEventListener('create', this._activityListener);
+ delete this._activityListener;
+ delete this._activity;
+ }
+
+ if (this._project !== undefined) {
+ delete this._project;
+ }
+ }
+
+ activateForm(form)
+ {
+ if (!this.supportsForm(form)) {
+ return;
+ }
+
+ const formPrefix = form.name;
+
+ this._activity = document.getElementById(formPrefix + '_activity');
+ this._project = document.getElementById(formPrefix + '_project');
+
+ /** @param {CustomEvent} event */
+ this._activityListener = (event) => {
+ const project = this._project.value;
+ /** @type {KimaiAPI} API */
+ const API = this.getContainer().getPlugin('api');
+ API.post(this._activity.dataset['create'], {
+ name: event.detail.value,
+ project: (project === '' ? null : project),
+ visible: true,
+ }, () => {
+ this._project.dispatchEvent(new Event('change'));
+ });
+ };
+ this._activity.addEventListener('create', this._activityListener);
+
+ this._beginDate = document.getElementById(formPrefix + '_begin_date');
+ this._beginTime = document.getElementById(formPrefix + '_begin_time');
+ this._endTime = document.getElementById(formPrefix + '_end_time');
+ this._duration = document.getElementById(formPrefix + '_duration');
+ this._durationToggle = document.getElementById(formPrefix + '_duration_toggle');
+
+ if (this._beginDate === null || this._beginTime === null || this._endTime === null || this._duration === null) {
+ return;
+ }
+
+ this._beginListener = () => this._changedBegin();
+ this._endListener = () => this._changedEnd();
+ this._durationListener = () => this._changedDuration();
+
+ this._beginDate.addEventListener('change', this._beginListener);
+ this._beginTime.addEventListener('change', this._beginListener);
+ this._endTime.addEventListener('change', this._endListener);
+ this._duration.addEventListener('change', this._durationListener);
+
+ if (this._duration !== null && this._durationToggle !== null) {
+ this._durationToggleListener = () => {
+ this._durationToggle.classList.toggle('text-success');
+ };
+ this._durationToggle.addEventListener('click', this._durationToggleListener);
+ }
+ }
+
+ _isDurationConnected()
+ {
+ if (this._duration === null && this._durationToggle === null) {
+ return false;
+ }
+
+ if (this._durationToggle === null) {
+ return true;
+ }
+
+ return this._durationToggle.classList.contains('text-success');
+ }
+
+ /**
+ * @returns {DateTime|null}
+ * @private
+ */
+ _getBegin()
+ {
+ if (this._beginDate.value === '' || this._beginTime.value === '') {
+ return null;
+ }
+
+ const date = this.getDateUtils().fromFormat(
+ this._beginDate.value + ' ' + this._beginTime.value,
+ this._beginDate.dataset['format'] + ' ' + this._beginTime.dataset['format'],
+ );
+
+ if (date.invalid) {
+ return null;
+ }
+
+ return date;
+ }
+
+ /**
+ * @returns {DateTime|null}
+ * @private
+ */
+ _getEnd()
+ {
+ if (this._endTime.value === '') {
+ return null;
+ }
+
+ let date = this.getDateUtils().fromFormat(
+ DateTime.now().toFormat('yyyy-LL-dd') + ' ' + this._endTime.value,
+ 'yyyy-LL-dd ' + this._endTime.dataset['format'],
+ );
+
+ const begin = this._getBegin();
+ if (begin !== null) {
+ date = this.getDateUtils().fromFormat(
+ begin.toFormat('yyyy-LL-dd') + ' ' + this._endTime.value,
+ 'yyyy-LL-dd ' + this._endTime.dataset['format'],
+ );
+
+ if (date < begin) {
+ date = date.plus({days: 1});
+ }
+ }
+
+ if (date.invalid) {
+ return null;
+ }
+
+ return date;
+ }
+
+ /**
+ * Ruleset:
+ * - invalid begin => skip
+ * - empty end => set end to begin (only if duration > 0 = running record)
+ * - invalid end => skip
+ * - calculate duration
+ */
+ _changedBegin()
+ {
+ const begin = this._getBegin();
+ if (begin === null) {
+ return;
+ }
+
+ const duration = this._getParsedDuration();
+ const hasDuration = duration.as('seconds') > 0;
+ const end = this._getEnd();
+
+ if (end === null && hasDuration) {
+ this._applyDateToField(begin.plus(duration), null, this._endTime);
+ } else {
+ this._updateDuration();
+ }
+ }
+
+ /**
+ * Ruleset:
+ * - invalid end => skip
+ * - empty begin => set begin to end
+ * - invalid begin => skip
+ * - calculate duration
+ */
+ _changedEnd()
+ {
+ const end = this._getEnd();
+ // empty or invalid date => reset duration and stop progress
+ if (end === null) {
+ return;
+ }
+
+ const duration = this._getParsedDuration();
+ const hasDuration = duration.as('seconds') > 0;
+ const begin = this._getBegin();
+
+ if (begin === null && hasDuration) {
+ this._applyDateToField(end.minus(duration), this._beginDate, this._beginTime);
+ } else {
+ this._updateDuration();
+ }
+ }
+
+ /**
+ * @private
+ */
+ _updateDuration()
+ {
+ const begin = this._getBegin();
+ const end = this._getEnd();
+ let newDuration = null;
+
+ if (begin !== null && end !== null) {
+ newDuration = end.diff(begin);
+ }
+
+ this._setDurationAsString(newDuration);
+ }
+
+ /**
+ * Ruleset:
+ * - invalid duration => skip
+ * - if begin and end are empty: set begin to now and end to duration
+ * - if begin is empty and end is not empty: set begin to end minus duration
+ * - if begin is not empty and end is empty and duration is > 0 (running records = 0): set end to begin plus duration
+ */
+ _changedDuration()
+ {
+ if (!this._isDurationConnected()) {
+ return;
+ }
+
+ const duration = this._getParsedDuration();
+ if (!duration.isValid) {
+ this._setDurationAsString(null);
+ return;
+ }
+
+ const begin = this._getBegin();
+ let end = this._getEnd();
+ const seconds = duration.as('seconds');
+
+ if (seconds < 0) {
+ end = null;
+ }
+
+ if (begin === null && end === null) {
+ const newBegin = DateTime.now();
+ this._applyDateToField(newBegin, this._beginDate, this._beginTime);
+ this._applyDateToField(newBegin.plus({seconds: seconds}), null, this._endTime);
+ } else if (begin === null && end !== null) {
+ this._applyDateToField(end.minus({seconds: seconds}), this._beginDate, this._beginTime);
+ } else if (begin !== null && seconds > 0) {
+ this._applyDateToField(begin.plus({seconds: seconds}), null, this._endTime);
+ }
+ }
+
+ /**
+ * Writes the value of a duration object as human-readable string into the duration field
+ *
+ * @param {Duration|null} duration
+ */
+ _setDurationAsString(duration)
+ {
+ if (!this._isDurationConnected()) {
+ return;
+ }
+
+ if (duration === null) {
+ this._duration.value = '';
+ return;
+ }
+
+ if (!duration.isValid) {
+ return;
+ }
+
+ const seconds = duration.as('seconds');
+ if (seconds < 0) {
+ this._duration.value = '';
+ return;
+ }
+
+ const hours = Math.floor(seconds / 3600);
+ let minutes = Math.floor((seconds - (hours * 3600)) / 60);
+
+ if (minutes < 10) {
+ minutes = '0' + minutes;
+ }
+
+ this._duration.value = hours + ':' + minutes;
+ }
+
+ /**
+ * Returns a duration object from the duration input field.
+ *
+ * @private
+ * @return {Duration}
+ */
+ _getParsedDuration()
+ {
+ return this.getDateUtils().parseDuration(this._duration.value.toUpperCase());
+ }
+
+ /**
+ * @param {DateTime|null} dateTime
+ * @param {HTMLElement|null} dateField
+ * @param {HTMLElement} timeField
+ * @private
+ */
+ _applyDateToField(dateTime, dateField, timeField)
+ {
+ if (dateTime === null || dateTime.invalid) {
+ dateField.value = '';
+ timeField.value = '';
+ return;
+ }
+
+ if (dateField !== null) {
+ dateField.value = this.getDateUtils().format(dateField.dataset['format'], dateTime);
+ }
+ timeField.value = this.getDateUtils().format(timeField.dataset['format'], dateTime);
+ }
+
+}
diff --git a/assets/js/plugins/KimaiAPI.js b/assets/js/plugins/KimaiAPI.js
index 2b72b4667..08de49aa1 100644
--- a/assets/js/plugins/KimaiAPI.js
+++ b/assets/js/plugins/KimaiAPI.js
@@ -9,7 +9,6 @@
* [KIMAI] KimaiAPI: easy access to API methods
*/
-import jQuery from 'jquery';
import KimaiPlugin from "../KimaiPlugin";
export default class KimaiAPI extends KimaiPlugin {
@@ -18,135 +17,162 @@ export default class KimaiAPI extends KimaiPlugin {
return 'api';
}
+ _headers() {
+ const headers = new Headers();
+ headers.append('X-AUTH-SESSION', '1');
+ headers.append('Content-Type', 'application/json');
+
+ return headers;
+ }
+
get(url, data, callbackSuccess, callbackError) {
- jQuery.ajax({
- url: url,
- headers: {
- 'X-AUTH-SESSION': true,
- 'Content-Type':'application/json'
- },
+ if (data !== undefined) {
+ const params = (new URLSearchParams(data)).toString();
+ if (params !== '') {
+ url = url + (url.includes('?') ? '&' : '?') + params;
+ }
+ }
+
+ if (callbackError === undefined) {
+ callbackError = (error) => {
+ this.handleError('An error occurred', error);
+ };
+ }
+
+ this.fetch(url, {
method: 'GET',
- data: data,
- dataType: 'json',
- success: callbackSuccess,
- error: callbackError
+ headers: this._headers()
+ }).then((response) => {
+ response.json().then((json) => {
+ callbackSuccess(json);
+ });
+ }).catch((error) => {
+ callbackError(error);
});
}
post(url, data, callbackSuccess, callbackError) {
- if (callbackError === null || callbackError === undefined) {
- callbackError = this.getPostErrorHandler();
+ if (callbackError === undefined) {
+ callbackError = (error) => {
+ this.handleError('action.update.error', error);
+ };
}
- jQuery.ajax({
- url: url,
- headers: {
- 'X-AUTH-SESSION': true,
- 'Content-Type':'application/json'
- },
+ this.fetch(url, {
method: 'POST',
- data: data,
- dataType: 'json',
- success: callbackSuccess,
- error: callbackError
+ body: this._parseData(data),
+ headers: this._headers()
+ }).then((response) => {
+ response.json().then((json) => {
+ callbackSuccess(json);
+ });
+ }).catch((error) => {
+ callbackError(error);
});
}
patch(url, data, callbackSuccess, callbackError) {
- if (callbackError === null || callbackError === undefined) {
- callbackError = this.getPatchErrorHandler();
+ if (callbackError === undefined) {
+ callbackError = (error) => {
+ this.handleError('action.update.error', error);
+ };
}
- jQuery.ajax({
- url: url,
- headers: {
- 'X-AUTH-SESSION': true,
- 'Content-Type':'application/json'
- },
+ this.fetch(url, {
method: 'PATCH',
- data: data,
- dataType: 'json',
- success: callbackSuccess,
- error: callbackError
+ body: this._parseData(data),
+ headers: this._headers()
+ }).then((response) => {
+ if (response.statusCode === 204) {
+ callbackSuccess();
+ } else {
+ response.json().then((json) => {
+ callbackSuccess(json);
+ });
+ }
+ }).catch((error) => {
+ callbackError(error);
});
}
delete(url, callbackSuccess, callbackError) {
- if (callbackError === null || callbackError === undefined) {
- callbackError = this.getDeleteErrorHandler();
+ if (callbackError === undefined) {
+ callbackError = (error) => {
+ this.handleError('action.delete.error', error);
+ };
}
- jQuery.ajax({
- url: url,
- headers: {
- 'X-AUTH-SESSION': true,
- 'Content-Type':'application/json'
- },
+ this.fetch(url, {
method: 'DELETE',
- dataType: 'json',
- success: callbackSuccess,
- error: callbackError
+ headers: this._headers()
+ }).then(() => {
+ callbackSuccess();
+ }).catch((error) => {
+ callbackError(error);
});
}
- getDeleteErrorHandler() {
- const self = this;
- return function(xhr, err) {
- self.handleError('action.delete.error', xhr, err);
- };
- }
+ /**
+ * @param {string|object} data
+ * @returns {string}
+ * @private
+ */
+ _parseData(data) {
+ if (typeof data === 'object') {
+ return JSON.stringify(data);
+ }
- getPatchErrorHandler() {
- const self = this;
- return function(xhr, err) {
- self.handleError('action.update.error', xhr, err);
- };
- }
-
- getPostErrorHandler() {
- const self = this;
- return function(xhr, err) {
- self.handleError('action.update.error', xhr, err);
- };
+ return data;
}
/**
* @param {string} message
- * @param {jqXHR} xhr
- * @param {string} err
+ * @param {Response} response
*/
- handleError(message, xhr, err) {
- let resultError = err;
- if (xhr.responseJSON && xhr.responseJSON.message) {
- resultError = xhr.responseJSON.message;
- // find validation errors
- if (xhr.status === 400 && xhr.responseJSON.errors) {
- let collected = ['' + resultError + ''];
- // form errors that are not attached to a field (like extra fields)
- if (xhr.responseJSON.errors.errors) {
- for (let error of xhr.responseJSON.errors.errors) {
- collected.push(error);
+ handleError(message, response) {
+ if (response.headers === undefined) {
+ // this can happen if someone clicks to fast and auto running
+ // requests (e.g. active records) are aborted
+ return;
+ }
+
+ const contentType = response.headers.get("content-type");
+ if (contentType && contentType.indexOf("application/json") !== -1) {
+ response.json().then(data => {
+ let resultError = data.message;
+ // find validation errors
+ if (response.status === 400 && data.errors) {
+ let collected = ['' + resultError + ''];
+ // form errors that are not attached to a field (like extra fields)
+ if (data.errors.errors) {
+ for (let error of data.errors.errors) {
+ collected.push(error);
+ }
}
- }
- if (xhr.responseJSON.errors.children) {
- for (let field in xhr.responseJSON.errors.children) {
- let tmpField = xhr.responseJSON.errors.children[field];
- if (tmpField.hasOwnProperty('errors') && tmpField.errors.length > 0) {
- for (let error of tmpField.errors) {
- collected.push(error);
+ if (data.errors.children) {
+ for (let field in data.errors.children) {
+ let tmpField = data.errors.children[field];
+ if (tmpField.errors !== undefined && tmpField.errors.length > 0) {
+ for (let error of tmpField.errors) {
+ collected.push(error);
+ }
}
}
}
+ if (collected.length > 0) {
+ resultError = collected;
+ }
}
- if (collected.length > 0) {
- resultError = collected;
- }
- }
- } else if (xhr.status && xhr.statusText) {
- resultError = '[' + xhr.status + '] ' + xhr.statusText;
- }
- this.getPlugin('alert').error(message, resultError);
+ this.getPlugin('alert').error(message, resultError);
+
+ });
+ } else {
+ response.text().then(() => {
+ const resultError = '[' + response.statusCode + '] ' + response.statusText;
+ this.getPlugin('alert').error(message, resultError);
+ });
+ }
}
}
diff --git a/assets/js/plugins/KimaiAPILink.js b/assets/js/plugins/KimaiAPILink.js
index de33df50d..baaeac05d 100644
--- a/assets/js/plugins/KimaiAPILink.js
+++ b/assets/js/plugins/KimaiAPILink.js
@@ -22,15 +22,14 @@ export default class KimaiAPILink extends KimaiPlugin {
constructor(selector) {
super();
- this.selector = selector;
+ this._selector = selector;
}
init() {
- const self = this;
- document.addEventListener('click', function(event) {
+ document.addEventListener('click', (event) => {
let target = event.target;
- while (target !== null && !target.matches('body')) {
- if (target.classList.contains(self.selector)) {
+ while (target !== null && typeof target.matches === "function" && !target.matches('body')) {
+ if (target.classList.contains(this._selector)) {
const attributes = target.dataset;
let url = attributes['href'];
@@ -39,13 +38,13 @@ export default class KimaiAPILink extends KimaiPlugin {
}
if (attributes.question !== undefined) {
- self.getContainer().getPlugin('alert').question(attributes.question, function(value) {
+ this.getContainer().getPlugin('alert').question(attributes.question, (value) => {
if (value) {
- self._callApi(url, attributes);
+ this._callApi(url, attributes);
}
});
} else {
- self._callApi(url, attributes);
+ this._callApi(url, attributes);
}
event.preventDefault();
@@ -57,37 +56,45 @@ export default class KimaiAPILink extends KimaiPlugin {
});
}
+ /**
+ * @param {string} url
+ * @param {DOMStringMap} attributes
+ * @private
+ */
_callApi(url, attributes)
{
const method = attributes['method'];
const eventName = attributes['event'];
+ /** @type {KimaiAPI} API */
const API = this.getContainer().getPlugin('api');
- const eventing = this.getContainer().getPlugin('event');
- const alert = this.getContainer().getPlugin('alert');
- const successHandle = function(result) {
- eventing.trigger(eventName);
- if (attributes.msgSuccess) {
- alert.success(attributes.msgSuccess);
+ /** @type {KimaiEvent} EVENTS */
+ const EVENTS = this.getContainer().getPlugin('event');
+ /** @type {KimaiAlert} ALERT */
+ const ALERT = this.getContainer().getPlugin('alert');
+ const successHandle = () => {
+ EVENTS.trigger(eventName);
+ if (attributes['msgSuccess'] !== undefined) {
+ ALERT.success(attributes['msgSuccess']);
}
};
- const errorHandle = function(xhr, err) {
+ const errorHandle = (error) => {
let message = 'action.update.error';
- if (attributes.msgError) {
- message = attributes.msgError;
+ if (attributes['msgError'] !== undefined) {
+ message = attributes['msgError'];
}
- API.handleError(message, xhr, err);
+ API.handleError(message, error);
};
if (method === 'PATCH') {
let data = {};
- if (attributes.payload) {
- data = attributes.payload;
+ if (attributes['payload'] !== undefined) {
+ data = attributes['payload'];
}
API.patch(url, data, successHandle, errorHandle);
} else if (method === 'POST') {
let data = {};
- if (attributes.payload) {
- data = attributes.payload;
+ if (attributes['payload'] !== undefined) {
+ data = attributes['payload'];
}
API.post(url, data, successHandle, errorHandle);
} else if (method === 'DELETE') {
diff --git a/assets/js/plugins/KimaiActiveRecords.js b/assets/js/plugins/KimaiActiveRecords.js
index fd0e5f17d..b5b3b7174 100644
--- a/assets/js/plugins/KimaiActiveRecords.js
+++ b/assets/js/plugins/KimaiActiveRecords.js
@@ -15,8 +15,8 @@ export default class KimaiActiveRecords extends KimaiPlugin {
constructor(selector, selectorEmpty) {
super();
- this.selector = selector;
- this.selectorEmpty = selectorEmpty;
+ this._selector = selector;
+ this._selectorEmpty = selectorEmpty;
}
getId() {
@@ -24,101 +24,146 @@ export default class KimaiActiveRecords extends KimaiPlugin {
}
init() {
- this.menu = document.querySelector(this.selector);
+ this._menu = document.querySelector(this._selector);
// the menu can be hidden if user has no permissions to see it
- if (this.menu === null) {
+ if (this._menu === null) {
return;
}
- this.attributes = this.menu.dataset;
+ this.attributes = this._menu.dataset;
- const self = this;
- const handle = function() { self.reloadActiveRecords(); };
+ const handleUpdate = () => {
+ this.reloadActiveRecords();
+ };
+ document.addEventListener('kimai.timesheetUpdate', handleUpdate);
+ document.addEventListener('kimai.timesheetDelete', handleUpdate);
+ document.addEventListener('kimai.activityUpdate', handleUpdate);
+ document.addEventListener('kimai.activityDelete', handleUpdate);
+ document.addEventListener('kimai.projectUpdate', handleUpdate);
+ document.addEventListener('kimai.projectDelete', handleUpdate);
+ document.addEventListener('kimai.customerUpdate', handleUpdate);
+ document.addEventListener('kimai.customerDelete', handleUpdate);
+
+ // -----------------------------------------------------------------------
+ // handle duration in the visible UI
+ this._updateBrowserTitle = !!this.getConfiguration('updateBrowserTitle');
+ this._updateDuration();
+ const handle = () => {
+ this._updateDuration();
+ };
+ this._updatesHandler = setInterval(handle, 10000);
document.addEventListener('kimai.timesheetUpdate', handle);
- document.addEventListener('kimai.timesheetDelete', handle);
- document.addEventListener('kimai.activityUpdate', handle);
- document.addEventListener('kimai.activityDelete', handle);
- document.addEventListener('kimai.projectUpdate', handle);
- document.addEventListener('kimai.projectDelete', handle);
- document.addEventListener('kimai.customerUpdate', handle);
- document.addEventListener('kimai.customerDelete', handle);
+ document.addEventListener('kimai.reloadedContent', handle);
}
- _toggleMenu(hasEntries) {
- this.menu.style.display = hasEntries ? 'inline-block' : 'none';
+ // TODO we could unregister all handler and listener
+ // _unregisterHandler() {
+ // clearInterval(this._updatesHandler);
+ // }
+
+ _updateDuration() {
+ const activeRecords = this._menu.querySelectorAll('[data-since]:not([data-since=""])');
+
+ if (activeRecords.length === 0) {
+ if (this._updateBrowserTitle) {
+ if (document.body.dataset['title'] === undefined) {
+ this._updateBrowserTitle = false;
+ } else {
+ document.title = document.body.dataset['title'];
+ }
+ }
+ return;
+ }
+
+ const DATE = this.getDateUtils();
+ let durations = [];
+
+ for (const record of activeRecords) {
+ const duration = DATE.formatDuration(record.dataset['since']);
+ // only use the ones from the menu for the title
+ if (record.dataset['replacer'] !== undefined && record.dataset['title'] !== null && duration !== '?') {
+ durations.push(duration);
+ }
+ // but update all on the page (running entries in list pages)
+ record.textContent = duration;
+ }
+
+ if (durations.length === 0) {
+ return;
+ }
+
+ if (!this._updateBrowserTitle) {
+ return;
+ }
+
+ let title = durations.shift();
+ for (const duration of durations.slice(0, 2)) {
+ title += ' | ' + duration;
+ }
+ document.title = title;
+ }
+
+ _setEntries(entries) {
+ const hasEntries = entries.length > 0;
+
+ this._menu.style.display = hasEntries ? 'inline-block' : 'none';
if (!hasEntries) {
// make sure that template entries in the menu are removed, otherwise they
// might still be shown in the browsers title
- for (let record of this.menu.querySelectorAll('[data-since]')) {
+ for (let record of this._menu.querySelectorAll('[data-since]')) {
record.dataset['since'] = '';
}
}
- const menuEmpty = document.querySelector(this.selectorEmpty);
+ const menuEmpty = document.querySelector(this._selectorEmpty);
if (menuEmpty !== null) {
menuEmpty.style.display = !hasEntries ? 'inline-block' : 'none';
}
- }
- setEntries(entries) {
- this._toggleMenu(entries.length > 0);
+ const stop = this._menu.querySelector('.ticktac-stop');
- const template = this.menu.querySelector('[data-template="active-record"]');
-
- const label = this.menu.querySelector('a > span.label');
- if (label !== null) {
- label.innerText = entries.length === 0 ? '' : entries.length;
- }
-
- if (entries.length === 0) {
+ if (!hasEntries) {
+ if (stop) {
+ stop.accesskey = null;
+ }
return;
}
- if (template === null) {
- this._replaceInNode(this.menu, entries[0]);
- } else {
- const container = template.parentElement;
- container.innerHTML = '';
-
- for (let timesheet of entries) {
- const newNode = template.cloneNode(true);
- container.appendChild(this._replaceInNode(newNode, timesheet));
- }
+ if (stop) {
+ stop.accesskey = 's';
}
-
- this.getContainer().getPlugin('timesheet-duration').updateRecords();
+ this._replaceInNode(this._menu, entries[0]);
+ this._updateDuration();
}
_replaceInNode(node, timesheet) {
- const date = this.getContainer().getPlugin('date');
+ const date = this.getDateUtils();
const allReplacer = node.querySelectorAll('[data-replacer]');
- for (let node of allReplacer) {
- const replacerName = node.dataset['replacer'];
+ for (let link of allReplacer) {
+ const replacerName = link.dataset['replacer'];
if (replacerName === 'url') {
- node.href = this.attributes['href'].replace('000', timesheet.id);
+ link.href = this.attributes['href'].replace('000', timesheet.id);
} else if (replacerName === 'activity') {
- node.innerText = timesheet.activity.name;
+ link.innerText = timesheet.activity.name;
} else if (replacerName === 'project') {
- node.innerText = timesheet.project.name;
+ link.innerText = timesheet.project.name;
} else if (replacerName === 'customer') {
- node.innerText = timesheet.project.customer.name;
+ link.innerText = timesheet.project.customer.name;
} else if (replacerName === 'duration') {
- node.dataset['since'] = timesheet.begin;
- node.innerText = date.formatDuration(timesheet.duration);
+ link.dataset['since'] = timesheet.begin;
+ link.innerText = date.formatDuration(timesheet.duration);
}
}
-
- return node;
}
reloadActiveRecords() {
- const self = this;
- const API= this.getContainer().getPlugin('api');
+ /** @type {KimaiAPI} API */
+ const API = this.getContainer().getPlugin('api');
- API.get(this.attributes['api'], {}, function(result) {
- self.setEntries(result);
+ API.get(this.attributes['api'], {}, (result) => {
+ this._setEntries(result);
});
}
diff --git a/assets/js/plugins/KimaiActiveRecordsDuration.js b/assets/js/plugins/KimaiActiveRecordsDuration.js
deleted file mode 100644
index 7a5f89f1f..000000000
--- a/assets/js/plugins/KimaiActiveRecordsDuration.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * 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] KimaiActiveRecordsDuration: activate the updates for all active timesheet records on this page
- */
-
-import KimaiPlugin from '../KimaiPlugin';
-
-export default class KimaiActiveRecordsDuration extends KimaiPlugin {
-
- getId() {
- return 'timesheet-duration';
- }
-
- init() {
- this.updateBrowserTitle = !!this.getConfiguration('updateBrowserTitle');
- this.updateRecords();
- const self = this;
- const handle = function() { self.updateRecords(); };
- this._updatesHandler = setInterval(handle, 10000);
- // this will probably not work as expected, as other event-handler might need longer to update the DOM
- document.addEventListener('kimai.timesheetUpdate', handle);
- }
-
- unregisterUpdates() {
- clearInterval(this._updatesHandler);
- }
-
- updateRecords() {
- let durations = [];
- const activeRecords = document.querySelectorAll('[data-since]:not([data-since=""])');
-
- if (activeRecords.length === 0) {
- if (this.updateBrowserTitle) {
- if (document.body.dataset['title'] === undefined) {
- this.updateBrowserTitle = false;
- } else {
- document.title = document.body.dataset['title'];
- }
- }
- return;
- }
-
- const DATE = this.getPlugin('date');
-
- for (let record of activeRecords) {
- const since = record.dataset['since'];
- const duration = DATE.formatDuration(since);
- // only use the ones from the menu for the title
- if (record.dataset['replacer'] !== undefined && record.dataset['title'] !== null && duration !== '?') {
- durations.push(duration);
- }
- // but update all on the page (running entries in list pages)
- record.textContent = duration;
- }
-
- if (durations.length === 0) {
- return;
- }
-
- if (!this.updateBrowserTitle) {
- return;
- }
-
- let title = durations.shift();
- let prefix = ' | ';
-
- for (let duration of durations.slice(0, 2)) {
- title += prefix + duration;
- }
- document.title = title;
- }
-}
diff --git a/assets/js/plugins/KimaiAjaxModalForm.js b/assets/js/plugins/KimaiAjaxModalForm.js
index 643acc14d..8578cdc59 100644
--- a/assets/js/plugins/KimaiAjaxModalForm.js
+++ b/assets/js/plugins/KimaiAjaxModalForm.js
@@ -12,70 +12,87 @@
* opening a modal with the content from the URL given in the elements 'data-href' or 'href' attribute
*/
-import jQuery from 'jquery';
import KimaiReducedClickHandler from "./KimaiReducedClickHandler";
+import { Modal } from 'bootstrap';
export default class KimaiAjaxModalForm extends KimaiReducedClickHandler {
constructor(selector) {
super();
- this.selector = selector;
+ this._selector = selector;
}
- getId() {
+ getId()
+ {
return 'modal';
}
- init() {
- const self = this;
- this.isDirty = false;
+ init()
+ {
+ this._isDirty = false;
- this.modal = jQuery('#remote_form_modal');
- this.modal
- .on('hide.bs.modal', function (e) {
- if (self.isDirty) {
- if (jQuery('#remote_form_modal .modal-body .remote_modal_is_dirty_warning').length === 0) {
- const msg = self.getContainer().getTranslation().get('modal.dirty');
- jQuery('#remote_form_modal .modal-body').prepend('' + msg + '
'); - } - e.preventDefault(); - return; + const modalElement = this._getModalElement(); + if (modalElement === null) { + return; + } + + modalElement.addEventListener('hide.bs.modal', (event) => { + if (this._isDirty) { + if (modalElement.querySelector('.modal-body .remote_modal_is_dirty_warning') === null) { + const msg = this.translate('modal.dirty'); + const temp = document.createElement('div'); + temp.innerHTML = '' + msg + '
'; + modalElement.querySelector('.modal-body').prepend(temp.firstElementChild); } - jQuery(self._getFormIdentifier()).off('change', self._isDirtyHandler); - self.isDirty = false; - self.getContainer().getPlugin('event').trigger('modal-hide'); - }) - .on('hidden.bs.modal', function () { - // kill all references, so GC can kick in - self.getContainer().getPlugin('form').destroyForm(self._getFormIdentifier()); - jQuery('#remote_form_modal .modal-body').replaceWith(''); - }) - .on('show.bs.modal', function () { - self.getContainer().getPlugin('event').trigger('modal-show'); - }); + event.preventDefault(); + return; + } + this._isDirty = false; + document.dispatchEvent(new Event('modal-hide')); + }); - this._addClickHandler(this.selector, function(href) { - self.openUrlInModal(href); + modalElement.addEventListener('hidden.bs.modal', () => { + // kill all references, so GC can kick in + this.getContainer().getPlugin('form').destroyForm(this._getFormIdentifier()); + modalElement.querySelector('.modal-body').replaceWith(''); + }); + + modalElement.addEventListener('show.bs.modal', () => { + document.dispatchEvent(new Event('modal-show')); + }); + + this.addClickHandler(this._selector, (href) => { + this.openUrlInModal(href); }); } - openUrlInModal(url, errorHandler) { - const self = this; + _getModal() + { + return Modal.getOrCreateInstance(this._getModalElement()) + } - if (errorHandler === undefined) { - errorHandler = function(xhr, err) { - if (xhr.status === undefined || xhr.status !== 403) { - window.location = url; - } - }; - } + openUrlInModal(url) + { + const headers = new Headers(); + headers.append('X-Requested-With', 'Kimai-Modal'); - jQuery.ajax({ - url: url, - success: function(html) { - self._openFormInModal(html); - }, - error: errorHandler + this.fetch(url, { + method: 'GET', + redirect: 'follow', + headers: headers + }) + .then(response => { + if (!response.ok) { + window.location = url; + return; + } + + return response.text().then(html => { + this._openFormInModal(html); + }); + }) + .catch(() => { + window.location = url; }); } @@ -85,157 +102,185 @@ export default class KimaiAjaxModalForm extends KimaiReducedClickHandler { * @returns {string} * @private */ - _getFormIdentifier() { + _getFormIdentifier() + { return '#remote_form_modal .modal-content form'; } - _openFormInModal(html) { - const self = this; + /** + * @returns {HTMLElement|null} + * @private + */ + _getModalElement() + { + return document.getElementById('remote_form_modal'); + } - let formIdentifier = this._getFormIdentifier(); - // if any of these is found in a response, the form will be re-displayed - let flashErrorIdentifier = 'div.alert-error'; - // messages to show above the form - let flashMessageIdentifier = 'div.alert'; - let form = jQuery(formIdentifier); - let remoteModal = this.modal; + /** + * @param {Element|ChildNode} node + * @returns {Element} + * @private + */ + _makeScriptExecutable(node) { + if (node.tagName !== undefined && node.tagName === 'SCRIPT') { + const script = document.createElement('script'); + script.text = node.innerHTML; + node.parentNode.replaceChild(script, node); + } else { + for (const child of node.childNodes) { + this._makeScriptExecutable(child); + } + } - // will be (re-)activated later - form.off('submit'); + return node; + } + + _openFormInModal(html) + { + const formIdentifier = this._getFormIdentifier(); + let remoteModal = this._getModalElement(); + const newFormHtml = document.createElement('div'); + newFormHtml.innerHTML = html; + const newModalContent = this._makeScriptExecutable(newFormHtml.querySelector('#form_modal .modal-content')); // load new form from given content - if (jQuery(html).find('#form_modal .modal-content').length > 0) { - // Support changing modal importance/types - remoteModal.on('hidden.bs.modal', function () { - if (remoteModal.hasClass('modal-danger')) { - remoteModal.removeClass('modal-danger'); - } - }); - - if (jQuery(html).find('#form_modal').hasClass('modal-danger')) { - remoteModal.addClass('modal-danger'); - } - + if (newModalContent !== null) { // Support changing modal sizes - let modalDialog = remoteModal.find('.modal-dialog'); - let largeModal = jQuery(html).find('.modal-dialog').hasClass('modal-lg'); - if (largeModal && !modalDialog.hasClass('modal-lg')) { - modalDialog.addClass('modal-lg'); - } - if (!largeModal && modalDialog.hasClass('modal-lg')) { - modalDialog.removeClass('modal-lg'); + let modalDialog = remoteModal.querySelector('.modal-dialog'); + let largeModal = newFormHtml.querySelector('.modal-dialog').classList.contains('modal-lg'); + + if (largeModal && !modalDialog.classList.contains('modal-lg')) { + modalDialog.classList.toggle('modal-lg'); } - jQuery('#remote_form_modal .modal-content').replaceWith( - jQuery(html).find('#form_modal .modal-content') - ); + if (!largeModal && modalDialog.classList.contains('modal-lg')) { + modalDialog.classList.toggle('modal-lg'); + } - jQuery('#remote_form_modal [data-dismiss=modal]').on('click', function() { - self.isDirty = false; + remoteModal.querySelector('.modal-content').replaceWith(newModalContent); + [].slice.call(remoteModal.querySelectorAll('[data-bs-dismiss="modal"]')).map((element) => { + element.addEventListener('click', () => { + this._isDirty = false; + this._getModal().hide(); + }); }); // activate new loaded widgets - self.getContainer().getPlugin('form').activateForm(formIdentifier); + this.getContainer().getPlugin('form').activateForm(formIdentifier); } // show error flash messages - let flashMessages = jQuery(html).find(flashMessageIdentifier); - if (flashMessages.length > 0) { - jQuery('#remote_form_modal .modal-body').prepend(flashMessages); + let flashMessages = newFormHtml.querySelector('div.alert'); + if (flashMessages !== null) { + remoteModal.querySelector('.modal-body').prepend(flashMessages); } - // ----------------------------------------------------------------------- - // a fix for firefox focus problems with datepicker in modal - // see https://github.com/kimai/kimai/issues/618 - let enforceModalFocusFn = jQuery.fn.modal.Constructor.prototype.enforceFocus; - jQuery.fn.modal.Constructor.prototype.enforceFocus = function() {}; - remoteModal.on('hidden.bs.modal', function () { - jQuery.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; - }); - // ----------------------------------------------------------------------- - - remoteModal.modal('show'); - // the new form that was loaded via ajax - form = jQuery(formIdentifier); + const form = document.querySelector(formIdentifier); - this._isDirtyHandler = function(e) { - self.isDirty = true; - } - form.on('change', this._isDirtyHandler); + form.addEventListener('change', () => { + this._isDirty = true; + }); // click handler for modal save button, to send forms via ajax - form.on('submit', function(event) { - // if the form has a target, we let the normal HTML flow happen - if (form.attr('target') !== undefined) { - return true; - } + form.addEventListener('submit', this._getEventHandler()); - // otherwise we do some AJAX magic to process the form in the background - const btn = jQuery(formIdentifier + ' button[type=submit]').button('loading'); - const eventName = form.attr('data-form-event'); - const events = self.getContainer().getPlugin('event'); - const alert = self.getContainer().getPlugin('alert'); + this._getModal().show(); + } - event.preventDefault(); - event.stopPropagation(); + _getEventHandler() + { + if (this.eventHandler === undefined) { + this.eventHandler = (event) => { + const form = event.target; - jQuery.ajax({ - url: form.attr('action'), - type: form.attr('method'), - data: form.serialize(), - success: function(html) { - btn.button('reset'); - let hasFieldError = jQuery(html).find('#form_modal .modal-content .has-error').length > 0; - let hasFormError = jQuery(html).find('#form_modal .modal-content ul.list-unstyled li.text-danger').length > 0; - let hasFlashError = jQuery(html).find(flashErrorIdentifier).length > 0; - - if (hasFieldError || hasFormError || hasFlashError) { - self._openFormInModal(html); - } else { - events.trigger(eventName); - - // try to find form defined messages first ... - let msg = form.attr('data-msg-success'); - if (msg === null || msg === undefined) { - // ... but if none was available, check the response to find server rendered flash-message - let flashMessage = jQuery(html).find('section.content div.row div.alert.alert-success'); - if (flashMessage.length > 0) { - let flashContent = flashMessage.contents(); - if (flashContent.length === 3) { - msg = flashContent[2].textContent; - } - } - } - - // ... and if even that is not available, we use a generic fallback message - if (msg === null || msg === undefined) { - msg = 'action.update.success'; - } - self.isDirty = false; - remoteModal.modal('hide'); - alert.success(msg); - } - return false; - }, - error: function(xhr, err) { - let message = form.attr('data-msg-error'); - if (message === null || message === undefined) { - message = 'action.update.error'; - } - if (xhr.responseJSON && xhr.responseJSON.message) { - err = xhr.responseJSON.message; - } else if (xhr.status && xhr.statusText) { - err = '[' + xhr.status +'] ' + xhr.statusText; - } - alert.error(message, err); - // this is useful for changing form fields and retrying to save (and in development to test form changes) - setTimeout(function() { - btn.button('reset'); - }, 1500); + // if the form has a target, we let the normal HTML flow happen + if (form.target !== undefined && form.target !== '') { + return true; } - }); - }); + + // otherwise we do some AJAX magic to process the form in the background + /** @type {HTMLButtonElement} btn */ + const btn = document.querySelector(this._getFormIdentifier() + ' button[type=submit]'); + btn.textContent = btn.textContent + ' …'; + btn.disabled = true; + + const eventName = form.dataset['formEvent']; + /** @type {KimaiEvent} alert */ + const events = this.getContainer().getPlugin('event'); + /** @type {KimaiAlert} alert */ + const alert = this.getContainer().getPlugin('alert'); + + event.preventDefault(); + event.stopPropagation(); + + const headers = new Headers(); + headers.append('X-Requested-With', 'Kimai-Modal'); + const options = {headers: headers}; + + this.fetchForm(form, options) + .then(response => { + response.text().then((html) => { + /** @type {HTMLDivElement} responseHtml */ + const responseHtml = document.createElement('div'); + responseHtml.innerHTML = html; + let hasFieldError = false; + let hasFormError = false; + let hasFlashError = false; + + // button must be re-enabled anyway + btn.textContent = btn.textContent.replace(' …', ''); + btn.disabled = false; + + // if the request was successful, there will be no form + /** @type {Element} modalContent */ + const modalContent = responseHtml.querySelector('#form_modal .modal-content'); + if (modalContent !== null) { + hasFieldError = modalContent.querySelector('.is-invalid') !== null; + if (!hasFieldError) { + // happens when an error occurs for a "hidden or non-classical" form element e.g. creating team without users + hasFieldError = modalContent.querySelector('.invalid-feedback') !== null; + } + hasFormError = modalContent.querySelector('ul.list-unstyled li.text-danger') !== null; + hasFlashError = responseHtml.querySelector('div.alert-danger') !== null; + } + + if (hasFieldError || hasFormError || hasFlashError) { + this._openFormInModal(html); + } else { + events.trigger(eventName); + + // try to find form defined message first, but + let msg = form.dataset['msgSuccess']; + // if that is not available: use a generic fallback message + if (msg === null || msg === undefined || msg === '') { + msg = 'action.update.success'; + } + this._isDirty = false; + this._getModal().hide(); + alert.success(msg); + } + }); + }) + .catch(error => { + let message = form.dataset['msgError']; + if (message === null || message === undefined || message === '') { + message = 'action.update.error'; + } + + alert.error(message, error.message); + + // this is useful for changing form fields and retrying to save (and in development to test form changes) + setTimeout(() =>{ + // critical error, allow to re-submit? + btn.textContent = btn.textContent.replace(' …', ''); + btn.disabled = false; + }, 1500); + }); + }; + } + + return this.eventHandler; } } diff --git a/assets/js/plugins/KimaiAlert.js b/assets/js/plugins/KimaiAlert.js index 5ef2a15ef..c29276f0a 100644 --- a/assets/js/plugins/KimaiAlert.js +++ b/assets/js/plugins/KimaiAlert.js @@ -9,108 +9,261 @@ * [KIMAI] KimaiAlert: notifications for Kimai */ -import Swal from 'sweetalert2' import KimaiPlugin from "../KimaiPlugin"; +import {Modal, Toast} from "bootstrap"; export default class KimaiAlert extends KimaiPlugin { + /** + * @return {string} + */ getId() { return 'alert'; } /** * @param {string} title - * @param {string|array} message + * @param {string|array|undefined} message */ error(title, message) { - const translation = this.getContainer().getTranslation(); + const translation = this.getTranslation(); if (translation.has(title)) { title = translation.get(title); } - if (translation.has(message)) { - message = translation.get(message); + title = title.replace('%reason%', ''); + + if (message === undefined) { + message = null; } - if (Array.isArray(message)) { - Swal.fire({ - icon: 'error', - title: title.replace('%reason%', ''), - html: message.join(''), - }); - } else { - Swal.fire({ - icon: 'error', - title: title.replace('%reason%', ''), - text: message, - }); + if (message !== null) { + if (translation.has(message)) { + message = translation.get(message); + } + if (Array.isArray(message)) { + message = message.join('
'); + } } + + const id = 'alert_global_error'; + const oldModalElement = document.getElementById(id); + if (oldModalElement !== null) { + Modal.getOrCreateInstance(oldModalElement).hide(); + } + + const html = ` +
+
+ `;
+
+ this._showModal(html);
}
+ /**
+ * @param {string} message
+ */
warning(message) {
this._show('warning', message);
}
+ /**
+ * @param {string} message
+ */
success(message) {
this._toast('success', message);
}
+ /**
+ * @param {string} message
+ */
info(message) {
this._show('info', message);
}
- _show(type, message) {
- const translation = this.getContainer().getTranslation();
+ /**
+ * @param {string} html
+ * @private
+ */
+ _showModal(html) {
+ const container = document.body;
+ const template = document.createElement('template');
+ template.innerHTML = html.trim();
+ const element = template.content.firstChild;
+ container.appendChild(element);
- if (translation.has(message)) {
- message = translation.get(message);
- }
-
- Swal.fire({
- icon: type,
- title: message,
- });
- }
-
- _toast(type, message) {
- const translation = this.getContainer().getTranslation();
-
- if (translation.has(message)) {
- message = translation.get(message);
- }
-
- Swal.fire({
- timer: 2000,
- timerProgressBar: true,
- toast: true,
- position: 'top',
- showConfirmButton: false,
- icon: type,
- title: message,
+ const modal = new Modal(element);
+ element.addEventListener('hidden.bs.modal', function () {
+ container.removeChild(element);
});
+ modal.show();
}
/**
- * Callback receives a value and needs to decide what should happen with it
+ * @param {string} type
+ * @param {string} message
+ * @private
+ */
+ _show(type, message) {
+ const translation = this.getTranslation();
+
+ if (translation.has(message)) {
+ message = translation.get(message);
+ }
+
+ const html = `
+
+
+
+
+
+ `;
+
+ this._showModal(html);
+ }
+
+ /**
+ * @param {string} type
+ * @return {string}
+ * @private
+ */
+ _mapClass(type) {
+ if (type === 'info' || type === 'success' || type === 'warning' || type === 'danger') {
+ return type;
+ } else if (type === 'error') {
+ return 'danger';
+ }
+
+ return 'primary';
+ }
+
+ /**
+ * @param type
+ * @param message
+ * @private
+ */
+ _toast(type, message) {
+ const translation = this.getTranslation();
+
+ if (translation.has(message)) {
+ message = translation.get(message);
+ }
+
+ let icon = '';
+
+ if (type === 'success') {
+ icon = '';
+ } else if (type === 'warning') {
+ icon = '';
+ } else if (type === 'danger' || type === 'error') {
+ icon = '';
+ }
+
+ const html =
+ `
+
+
+
+
`;
+
+ const container = document.getElementById('toast-container');
+ const template = document.createElement('template');
+
+ template.innerHTML = html.trim();
+ const element = template.content.firstChild;
+ container.appendChild(element);
+
+ const toast = new Toast(element);
+ element.addEventListener('hidden.bs.toast', function () {
+ container.removeChild(element);
+ })
+ toast.show();
+ }
+
+ /**
+ * Callback receives a bool value (true = confirm, false = cancel / close without action).
*
* @param message
* @param callback
*/
question(message, callback) {
- const translation = this.getContainer().getTranslation();
+ const translation = this.getTranslation();
if (translation.has(message)) {
message = translation.get(message);
}
- Swal.fire({
- title: message,
- icon: 'question',
- showCancelButton: true,
- confirmButtonText: translation.get('confirm'),
- cancelButtonText: translation.get('cancel')
- }).then((result) => {
- callback(result.value);
- });
- }
+ const css = this._mapClass('info');
+ const html = `
+
+
+
+ ` + icon + ' ' + message + `
+
+
+
+
+ `;
+ const container = document.body;
+ const template = document.createElement('template');
+ template.innerHTML = html.trim();
+ const element = template.content.firstChild;
+ container.appendChild(element);
+ element.querySelector('.question-confirm').addEventListener('click', () => {
+ callback(true);
+ });
+ element.querySelector('.question-cancel').addEventListener('click', () => {
+ callback(false);
+ });
+
+ const modal = new Modal(element);
+ element.addEventListener('hidden.bs.modal', () => {
+ container.removeChild(element);
+ });
+ modal.show();
+ }
}
diff --git a/assets/js/plugins/KimaiAlternativeLinks.js b/assets/js/plugins/KimaiAlternativeLinks.js
index 7e2d955be..9e01a1158 100644
--- a/assets/js/plugins/KimaiAlternativeLinks.js
+++ b/assets/js/plugins/KimaiAlternativeLinks.js
@@ -12,18 +12,17 @@
* redirecting to the URL given in the elements 'data-href' or 'href' attribute
*/
-import jQuery from 'jquery';
import KimaiReducedClickHandler from "./KimaiReducedClickHandler";
export default class KimaiAlternativeLinks extends KimaiReducedClickHandler {
constructor(selector) {
super();
- this.selector = selector;
+ this._selector = selector;
}
init() {
- this._addClickHandler(this.selector, function(href) {
+ this.addClickHandler(this._selector, function(href) {
window.location = href;
});
}
diff --git a/assets/js/plugins/KimaiAutocomplete.js b/assets/js/plugins/KimaiAutocomplete.js
deleted file mode 100644
index afd00d52d..000000000
--- a/assets/js/plugins/KimaiAutocomplete.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * 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.
- */
-
-import jQuery from 'jquery';
-import KimaiPlugin from "../KimaiPlugin";
-
-/**
- * Supporting auto-complete fields via API.
- * Currently used for timesheet tagging in toolbar and edit dialogs.
- */
-export default class KimaiAutocomplete extends KimaiPlugin {
-
- constructor(selector) {
- super();
- this.selector = selector;
- }
-
- init() {
- this.minChars = this.getConfiguration('autoComplete');
- }
-
- getId() {
- return 'autocomplete';
- }
-
- splitTagList(val) {
- return val.split(/,\s*/);
- }
-
- extractLastTag(term) {
- return this.splitTagList(term).pop();
- }
-
- activateAutocomplete(selector) {
- const self = this;
-
- jQuery(selector + ' ' + this.selector).each(function(index) {
- const currentField = jQuery(this);
- const apiUrl = currentField.attr('data-autocomplete-url');
- const API = self.getContainer().getPlugin('api');
-
- currentField
- // don't navigate away from the field on tab when selecting an item
- .on("keydown", function (event) {
- if (event.keyCode === jQuery.ui.keyCode.TAB &&
- jQuery(this).autocomplete("instance").menu.active) {
- event.preventDefault();
- }
- })
- .autocomplete({
- source: function (request, response) {
- const lastEntry = self.extractLastTag(request.term);
- API.get(apiUrl, {'name': lastEntry}, function(data){
- response(data);
- });
- },
- search: function () {
- // custom minLength
- var term = self.extractLastTag(this.value);
- if (term.length < self.minChars) {
- return false;
- }
- },
- focus: function () {
- // prevent value inserted on focus
- return false;
- },
- select: function (event, ui) {
- var terms = self.splitTagList(this.value);
-
- // remove the current input
- terms.pop();
-
- // check if selected tag is already in list
- if (!terms.includes(ui.item.value)) {
- // add the selected item
- terms.push(ui.item.value);
- }
- // add placeholder to get the comma-and-space at the end
- terms.push("");
-
- this.value = terms.join(", ");
-
- $(this).trigger('change');
-
- return false;
- }
- }
- )
- ;
- });
- }
-
- destroyAutocomplete(selector) {
- jQuery(selector + ' ' + this.selector).each(function(index) {
- const currentField = jQuery(this);
- currentField.autocomplete("destroy");
- currentField.removeData('autocomplete');
- });
- }
-
-}
diff --git a/assets/js/plugins/KimaiConfirmationLink.js b/assets/js/plugins/KimaiConfirmationLink.js
index 267ff757c..53c2ffd45 100644
--- a/assets/js/plugins/KimaiConfirmationLink.js
+++ b/assets/js/plugins/KimaiConfirmationLink.js
@@ -19,15 +19,14 @@ export default class KimaiConfirmationLink extends KimaiPlugin {
constructor(selector) {
super();
- this.selector = selector;
+ this._selector = selector;
}
init() {
- const self = this;
- document.addEventListener('click', function(event) {
+ document.addEventListener('click', (event) => {
let target = event.target;
- while (target !== null && !target.matches('body')) {
- if (target.classList.contains(self.selector)) {
+ while (target !== null && typeof target.matches === "function" && !target.matches('body')) {
+ if (target.classList.contains(this._selector)) {
const attributes = target.dataset;
// is this a link?
@@ -44,7 +43,7 @@ export default class KimaiConfirmationLink extends KimaiPlugin {
}
if (attributes.question !== undefined) {
- self.getContainer().getPlugin('alert').question(attributes.question, function(value) {
+ this.getContainer().getPlugin('alert').question(attributes.question, function(value) {
if (value) {
if (form === null) {
document.location = url;
diff --git a/assets/js/plugins/KimaiDatatable.js b/assets/js/plugins/KimaiDatatable.js
index 03e7a20f3..d861f93d6 100644
--- a/assets/js/plugins/KimaiDatatable.js
+++ b/assets/js/plugins/KimaiDatatable.js
@@ -9,15 +9,15 @@
* [KIMAI] KimaiDatatable: handles functionality for the datatable
*/
-import jQuery from 'jquery';
import KimaiPlugin from "../KimaiPlugin";
+import KimaiContextMenu from "../widgets/KimaiContextMenu";
export default class KimaiDatatable extends KimaiPlugin {
constructor(contentAreaSelector, tableSelector) {
super();
- this.contentArea = contentAreaSelector;
- this.selector = tableSelector;
+ this._contentArea = contentAreaSelector;
+ this._selector = tableSelector;
}
getId() {
@@ -25,24 +25,21 @@ export default class KimaiDatatable extends KimaiPlugin {
}
init() {
- const dataTable = document.querySelector(this.selector);
+ const dataTable = document.querySelector(this._selector);
// not every page contains a dataTable
if (dataTable === null) {
return;
}
- const attributes = dataTable.dataset;
- const events = attributes['reloadEvent'];
-
- this.fixDropdowns();
+ this.registerContextMenu(this._selector);
+ const events = dataTable.dataset['reloadEvent'];
if (events === undefined) {
return;
}
- const self = this;
- const handle = function() { self.reloadDatatable(); };
+ const handle = () => { this.reloadDatatable(); };
for (let eventName of events.split(' ')) {
document.addEventListener(eventName, handle);
@@ -52,55 +49,49 @@ export default class KimaiDatatable extends KimaiPlugin {
document.addEventListener('filter-change', handle);
}
- reloadDatatable() {
- const self = this;
- const contentArea = this.contentArea;
- const durations = this.getContainer().getPlugin('timesheet-duration');
- const toolbarSelector = this.getContainer().getPlugin('toolbar').getSelector();
-
- const form = jQuery(toolbarSelector);
- let loading = '';
- jQuery(contentArea).append(loading);
-
- // remove the empty fields to prevent errors
- let formData = jQuery(toolbarSelector + ' :input')
- .filter(function(index, element) {
- return jQuery(element).val() !== '';
- })
- .serialize();
-
- jQuery.ajax({
- url: form.attr('action'),
- type: form.attr('method'),
- data: formData,
- success: function(html) {
- jQuery(contentArea).replaceWith(
- jQuery(html).find(contentArea)
- );
- durations.updateRecords();
- self.fixDropdowns();
- },
- error: function(xhr, err) {
- form.submit();
- }
- });
-
+ /**
+ * @param {string} selector
+ * @private
+ */
+ registerContextMenu(selector)
+ {
+ KimaiContextMenu.createForDataTable(selector);
}
- /**
- * show dropdown menu upwards, if it is outside the visible viewport
- */
- fixDropdowns() {
- const docHeight = jQuery(document).height();
- jQuery(this.selector + ' [data-toggle=dropdown]').each(function() {
- const parent = jQuery(this).parent();
- const menu = parent.find('.dropdown-menu');
+ reloadDatatable()
+ {
+ const toolbarSelector = this.getContainer().getPlugin('toolbar').getSelector();
- if (parent && menu) {
- if ((parent.offset().top + parent.outerHeight() + menu.outerHeight()) > docHeight) {
- parent.addClass('dropup').removeClass('dropdown');
- }
- }
+ /** @type {HTMLFormElement} form */
+ const form = document.querySelector(toolbarSelector);
+ const callback = (text) => {
+ const temp = document.createElement('div');
+ temp.innerHTML = text;
+ const newContent = temp.querySelector(this._contentArea);
+ document.querySelector(this._contentArea).replaceWith(newContent);
+ this.registerContextMenu(this._selector);
+ document.dispatchEvent(new Event('kimai.reloadedContent'));
+ };
+
+ document.dispatchEvent(new CustomEvent('kimai.reloadContent', {detail: this._contentArea}));
+
+ if (form === null) {
+ this.fetch(document.location)
+ .then(response => {
+ response.text().then(callback);
+ })
+ .catch(() => {
+ document.location.reload();
+ });
+ return;
+ }
+
+ this.fetchForm(form)
+ .then(response => {
+ response.text().then(callback);
+ })
+ .catch(() => {
+ form.submit();
});
}
}
diff --git a/assets/js/plugins/KimaiDatatableColumnView.js b/assets/js/plugins/KimaiDatatableColumnView.js
index cac62a724..0566855d8 100644
--- a/assets/js/plugins/KimaiDatatableColumnView.js
+++ b/assets/js/plugins/KimaiDatatableColumnView.js
@@ -9,8 +9,6 @@
* [KIMAI] KimaiDatatableColumnView: manages the visibility of data-table columns in cookies
*/
-import Cookies from 'js-cookie';
-import jQuery from 'jquery';
import KimaiPlugin from "../KimaiPlugin";
export default class KimaiDatatableColumnView extends KimaiPlugin {
@@ -29,80 +27,110 @@ export default class KimaiDatatableColumnView extends KimaiPlugin {
if (dataTable === null) {
return;
}
- this.id = dataTable.getAttribute(this.dataAttribute);
- this.modal = document.getElementById('modal_' + this.id);
- this.bindButtons();
- }
-
- bindButtons() {
- let self = this;
- this.modal.querySelector('button[data-type=save]').addEventListener('click', function() {
- self.saveVisibility();
+ this._id = dataTable.getAttribute(this.dataAttribute);
+ this._modal = document.getElementById('modal_' + this._id);
+ this._modal.addEventListener('show.bs.modal', () => {
+ this._evaluateCheckboxes();
});
- this.modal.querySelector('button[data-type=reset]').addEventListener('click', function() {
- self.resetVisibility();
+ this._modal.querySelector('button[data-type=save]').addEventListener('click', () => {
+ this._saveVisibility();
});
- for (let checkbox of this.modal.querySelectorAll('form input[type=checkbox]')) {
- checkbox.addEventListener('click', function () {
- self.changeVisibility(checkbox.getAttribute('name'), checkbox.checked);
+ this._modal.querySelector('button[data-type=reset]').addEventListener('click', (event) => {
+ this._resetVisibility(event.currentTarget);
+ });
+ this._modal.querySelectorAll('input[name=datatable_profile]').forEach(element => {
+ element.addEventListener('change', () => {
+ const form = this._modal.getElementsByTagName('form')[0];
+ this.fetchForm(form, {}, element.getAttribute('data-href'))
+ .then(() => {
+ // the local storage is read in the login screen to set a cookie,
+ // which triggers the session switch in ProfileSubscriber
+ localStorage.setItem('kimai_profile', element.getAttribute('value'));
+ document.location.reload();
+ })
+ .catch(() => {
+ form.setAttribute('action', element.getAttribute('data-href'));
+ form.submit();
+ });
+ });
+ });
+ for (let checkbox of this._modal.querySelectorAll('form input[type=checkbox]')) {
+ checkbox.addEventListener('change', () => {
+ this._changeVisibility(checkbox.getAttribute('name'), checkbox.checked);
});
}
}
- saveVisibility() {
- const form = this.modal.getElementsByTagName('form')[0];
- let settings = {};
- for (let checkbox of form.querySelectorAll('input[type=checkbox]')) {
- settings[checkbox.getAttribute('name')] = checkbox.checked;
+ _evaluateCheckboxes() {
+ const form = this._modal.getElementsByTagName('form')[0];
+ const table = document.getElementsByClassName('datatable_' + this._id)[0];
+ for (let columnElement of table.getElementsByTagName('th')) {
+ const fieldName = columnElement.getAttribute('data-field');
+ if (fieldName === null) {
+ continue;
+ }
+ const checkbox = form.querySelector('input[name=' + fieldName + ']');
+ if (checkbox === null) {
+ continue;
+ }
+ checkbox.checked = window.getComputedStyle(columnElement).display !== 'none';
}
- Cookies.set(form.getAttribute('name'), JSON.stringify(settings), {expires: 365, SameSite: 'Strict'});
- jQuery(this.modal).modal('toggle');
}
- resetVisibility() {
- const form = this.modal.getElementsByTagName('form')[0];
- Cookies.remove(form.getAttribute('name'));
- for (let checkbox of form.querySelectorAll('input[type=checkbox]')) {
- if (!checkbox.checked) {
- checkbox.click();
- }
- }
- jQuery(this.modal).modal('toggle');
+ _saveVisibility() {
+ const form = this._modal.getElementsByTagName('form')[0];
+
+ this.fetchForm(form)
+ .then(() => {
+ document.location.reload();
+ })
+ .catch(() => {
+ form.submit();
+ });
}
- changeVisibility(columnName, checked) {
- const tables = document.getElementsByClassName('datatable_' + this.id);
- for (let tableBox of tables) {
- let column = 0;
- let foundColumn = false;
- let table = tableBox.getElementsByClassName('dataTable')[0];
- for (let columnElement of table.getElementsByTagName('th')) {
- if (columnElement.getAttribute('data-field') === columnName) {
- foundColumn = true;
- break;
+ _resetVisibility(button) {
+ const form = this._modal.getElementsByTagName('form')[0];
+
+ this.fetchForm(form, {}, button.getAttribute('formaction'))
+ .then(() => {
+ document.location.reload();
+ })
+ .catch(() => {
+ form.setAttribute('action', button.getAttribute('formaction'));
+ form.submit();
+ });
+ }
+
+ _changeVisibility(columnName, checked) {
+ for (const tableBox of document.getElementsByClassName('datatable_' + this._id)) {
+ let targetClasses = null;
+ for (let element of tableBox.getElementsByClassName('col_' + columnName)) {
+ // only calculate that once and re-use the cached class list
+ if (targetClasses === null) {
+ let removeClass = '-none';
+ let addClass = 'd-table-cell';
+
+ if (!checked) {
+ removeClass = '-table-cell';
+ addClass = 'd-none';
+ }
+
+ targetClasses = '';
+ element.classList.forEach(
+ function (name, index, listObj) { // eslint-disable-line no-unused-vars
+ if (name.indexOf(removeClass) === -1) {
+ targetClasses += ' ' + name;
+ }
+ }
+ );
+
+ if (targetClasses.indexOf(addClass) === -1) {
+ targetClasses += ' ' + addClass;
+ }
}
- if (columnElement.getAttribute('colspan') !== null) {
- console.log('Tables with colspans are not supported!');
- }
-
- column++;
- }
-
- if (!foundColumn) {
- return;
- }
-
- for (let rowElement of table.getElementsByTagName('tr')) {
- if (rowElement.children[column] === undefined) {
- continue;
- }
-
- if (checked) {
- rowElement.children[column].classList.remove('hidden');
- } else {
- rowElement.children[column].classList.add('hidden');
- }
+ element.className = targetClasses;
}
}
}
diff --git a/assets/js/plugins/KimaiDatePicker.js b/assets/js/plugins/KimaiDatePicker.js
deleted file mode 100644
index d9d315426..000000000
--- a/assets/js/plugins/KimaiDatePicker.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * 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] KimaiDatePicker: single date selects (currently unused)
- */
-
-import jQuery from 'jquery';
-import KimaiPlugin from '../KimaiPlugin';
-
-export default class KimaiDatePicker extends KimaiPlugin {
-
- constructor(selector) {
- super();
- this.selector = selector;
- }
-
- getId() {
- return 'date-picker';
- }
-
- activateDatePicker(selector) {
- const TRANSLATE = this.getContainer().getTranslation();
- const DATE_UTILS = this.getContainer().getPlugin('date');
- const firstDow = this.getConfiguration('first_dow_iso') % 7;
-
- jQuery(selector + ' ' + this.selector).each(function(index) {
- let localeFormat = jQuery(this).data('format');
- jQuery(this).daterangepicker({
- singleDatePicker: true,
- showDropdowns: true,
- autoUpdateInput: false,
- drops: 'down',
- locale: {
- format: localeFormat,
- firstDay: firstDow,
- applyLabel: TRANSLATE.get('confirm'),
- cancelLabel: TRANSLATE.get('cancel'),
- customRangeLabel: TRANSLATE.get('customRange'),
- daysOfWeek: DATE_UTILS.getWeekDaysShort(),
- monthNames: DATE_UTILS.getMonthNames(),
- }
- });
-
- jQuery(this).on('show.daterangepicker', function (ev, picker) {
- if (picker.element.offset().top - jQuery(window).scrollTop() + picker.container.outerHeight() + 30 > jQuery(window).height()) {
- // "up" is not possible here, because the code is triggered on many mobile phones and the picker then appears out of window
- picker.drops = 'auto';
- picker.move();
- }
- });
-
- jQuery(this).on('apply.daterangepicker', function(ev, picker) {
- jQuery(this).val(picker.startDate.format(localeFormat));
- jQuery(this).trigger("change");
- });
- });
- }
-
- destroyDatePicker(selector) {
- jQuery(selector + ' ' + this.selector).each(function(index) {
- if (jQuery(this).data('daterangepicker') !== undefined) {
- jQuery(this).data('daterangepicker').remove();
- }
- });
- }
-
-}
diff --git a/assets/js/plugins/KimaiDateRangePicker.js b/assets/js/plugins/KimaiDateRangePicker.js
deleted file mode 100644
index ca86ebb49..000000000
--- a/assets/js/plugins/KimaiDateRangePicker.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * 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] KimaiDateRangePicker: activate the (daterange picker) compound field in toolbar
- */
-
-import jQuery from 'jquery';
-import KimaiPlugin from '../KimaiPlugin';
-import moment from 'moment';
-
-export default class KimaiDateRangePicker extends KimaiPlugin {
-
- constructor(selector) {
- super();
- this.selector = selector;
- }
-
- getId() {
- return 'date-range-picker';
- }
-
- activateDateRangePicker(selector) {
- const TRANSLATE = this.getContainer().getTranslation();
- const DATE_UTILS = this.getContainer().getPlugin('date');
- const firstDow = this.getConfiguration('first_dow_iso') % 7;
-
- jQuery(selector + ' ' + this.selector).each(function(index) {
- let localeFormat = jQuery(this).data('format');
- let separator = jQuery(this).data('separator');
- let rangesList = {};
-
- rangesList[TRANSLATE.get('today')] = [moment(), moment()];
- rangesList[TRANSLATE.get('yesterday')] = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
- rangesList[TRANSLATE.get('thisWeek')] = [moment().startOf('isoWeek'), moment().endOf('isoWeek')];
- rangesList[TRANSLATE.get('lastWeek')] = [moment().subtract(1, 'week').startOf('isoWeek'), moment().subtract(1, 'week').endOf('isoWeek')];
- if (firstDow === 0) { // sunday = 0
- rangesList[TRANSLATE.get('thisWeek')] = [moment().startOf('isoWeek').subtract(1, 'day'), moment().endOf('isoWeek').subtract(1, 'day')];
- rangesList[TRANSLATE.get('lastWeek')] = [moment().subtract(1, 'week').startOf('isoWeek').subtract(1, 'day'), moment().subtract(1, 'week').endOf('isoWeek').subtract(1, 'day')];
- }
- rangesList[TRANSLATE.get('thisMonth')] = [moment().startOf('month'), moment().endOf('month')];
- rangesList[TRANSLATE.get('lastMonth')] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')];
- rangesList[TRANSLATE.get('thisYear')] = [moment().startOf('year'), moment().endOf('year')];
- rangesList[TRANSLATE.get('lastYear')] = [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')];
-
- jQuery(this).daterangepicker({
- showDropdowns: true,
- autoUpdateInput: false,
- autoApply: false,
- linkedCalendars: true,
- drops: 'down',
- locale: {
- separator: separator,
- format: localeFormat,
- firstDay: firstDow,
- applyLabel: TRANSLATE.get('confirm'),
- cancelLabel: TRANSLATE.get('cancel'),
- customRangeLabel: TRANSLATE.get('customRange'),
- daysOfWeek: DATE_UTILS.getWeekDaysShort(),
- monthNames: DATE_UTILS.getMonthNames(),
- },
- ranges: rangesList,
- alwaysShowCalendars: true
- });
-
- jQuery(this).on('show.daterangepicker', function (ev, picker) {
- if (picker.element.offset().top - jQuery(window).scrollTop() + picker.container.outerHeight() + 30 > jQuery(window).height()) {
- // "up" is not possible here, because the code is triggered on many mobile phones and the picker then appears out of window
- picker.drops = 'auto';
- picker.move();
- }
- });
-
- jQuery(this).on('apply.daterangepicker', function(ev, picker) {
- jQuery(this).val(picker.startDate.format(localeFormat) + ' - ' + picker.endDate.format(localeFormat));
- jQuery(this).data('begin', picker.startDate.format(localeFormat));
- jQuery(this).data('end', picker.endDate.format(localeFormat));
- jQuery(this).trigger("change");
- });
- });
- }
-
- destroyDateRangePicker(selector) {
- jQuery(selector + ' ' + this.selector).each(function(index) {
- if (jQuery(this).data('daterangepicker') !== undefined) {
- jQuery(this).data('daterangepicker').remove();
- }
- });
- }
-
-}
diff --git a/assets/js/plugins/KimaiDateTimePicker.js b/assets/js/plugins/KimaiDateTimePicker.js
deleted file mode 100644
index c4a4a9135..000000000
--- a/assets/js/plugins/KimaiDateTimePicker.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * 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] KimaiDateTimePicker: activate the (datetime picker) field in timesheet edit dialog
- */
-
-import jQuery from 'jquery';
-import KimaiPlugin from '../KimaiPlugin';
-
-export default class KimaiDateTimePicker extends KimaiPlugin {
-
- constructor(selector) {
- super();
- this.selector = selector;
- }
-
- getId() {
- return 'date-time-picker';
- }
-
- activateDateTimePicker(selector) {
- const TRANSLATE = this.getContainer().getTranslation();
- const DATE_UTILS = this.getContainer().getPlugin('date');
- const firstDow = this.getConfiguration('first_dow_iso') % 7;
- const is24hours = this.getConfiguration('twentyFourHours');
-
- jQuery(selector + ' ' + this.selector).each(function(index) {
- let localeFormat = jQuery(this).data('format');
- jQuery(this).daterangepicker({
- singleDatePicker: true,
- timePicker: true,
- timePicker24Hour: is24hours,
- showDropdowns: true,
- autoUpdateInput: false,
- drops: 'down',
- locale: {
- format: localeFormat,
- firstDay: firstDow,
- applyLabel: TRANSLATE.get('confirm'),
- cancelLabel: TRANSLATE.get('cancel'),
- customRangeLabel: TRANSLATE.get('customRange'),
- daysOfWeek: DATE_UTILS.getWeekDaysShort(),
- monthNames: DATE_UTILS.getMonthNames(),
- }
- });
-
- jQuery(this).on('show.daterangepicker', function (ev, picker) {
- if (picker.element.offset().top - jQuery(window).scrollTop() + picker.container.outerHeight() + 30 > jQuery(window).height()) {
- // "up" is not possible here, because the code is triggered on many mobile phones and the picker then appears out of window
- picker.drops = 'auto';
- picker.move();
- }
- });
-
- jQuery(this).on('apply.daterangepicker', function(ev, picker) {
- jQuery(this).val(picker.startDate.format(localeFormat));
- jQuery(this).trigger("change");
- });
- });
- }
-
- destroyDateTimePicker(selector) {
- jQuery(selector + ' ' + this.selector).each(function(index) {
- if (jQuery(this).data('daterangepicker') !== undefined) {
- jQuery(this).data('daterangepicker').remove();
- }
- });
- }
-
-}
diff --git a/assets/js/plugins/KimaiDateUtils.js b/assets/js/plugins/KimaiDateUtils.js
index 2a0d7737d..782050611 100644
--- a/assets/js/plugins/KimaiDateUtils.js
+++ b/assets/js/plugins/KimaiDateUtils.js
@@ -10,71 +10,241 @@
*/
import KimaiPlugin from '../KimaiPlugin';
-import moment from 'moment';
+import { DateTime, Duration } from 'luxon';
export default class KimaiDateUtils extends KimaiPlugin {
- getId() {
+ getId()
+ {
return 'date';
}
+ init()
+ {
+ if (this.getConfigurations().is24Hours()) {
+ this.timeFormat = 'HH:mm';
+ } else {
+ this.timeFormat = 'hh:mm a';
+ }
+ this.durationFormat = this.getConfiguration('formatDuration');
+ this.dateFormat = this.getConfiguration('formatDate');
+ }
+
/**
- * @param {string} dateTime
+ * @see https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+ * @param {string} format
+ * @returns {string}
+ * @private
+ */
+ _parseFormat(format)
+ {
+ format = format.replace('DD', 'dd');
+ format = format.replace('D', 'd');
+ format = format.replace('MM', 'LL');
+ format = format.replace('M', 'L');
+ format = format.replace('YYYY', 'yyyy');
+ format = format.replace('YY', 'yy');
+ format = format.replace('A', 'a');
+
+ return format;
+ }
+
+ /**
+ * @param {string} format
+ * @param {string|Date|null|undefined} dateTime
* @returns {string}
*/
- getFormattedDate(dateTime) {
- return moment(dateTime).format(this.getConfiguration('formatDate'));
- }
+ format(format, dateTime)
+ {
+ let newDate = null;
- getWeekDaysShort() {
- return moment.localeData().weekdaysShort();
- }
+ if (dateTime === null || dateTime === undefined) {
+ newDate = DateTime.now();
+ } else if (dateTime instanceof Date) {
+ newDate = DateTime.fromJSDate(dateTime);
+ } else {
+ newDate = DateTime.fromISO(dateTime);
+ }
- getMonthNames() {
- return moment.localeData().months();
- }
-
- formatDuration(since) {
- const duration = moment.duration(moment(new Date()).diff(moment(since)));
-
- return this.formatMomentDuration(duration);
- }
-
- formatSeconds(seconds) {
- const duration = moment.duration('PT' + seconds + 'S');
-
- return this.formatMomentDuration(duration);
+ // using locale english here prevents that that AM/PM is translated to the
+ // locale variant: e.g. "ko" translates it to 오후 / 오전
+ return newDate.toFormat(this._parseFormat(format), { locale: 'en-us' });
}
/**
- * @param {moment.Duration} duration
- * @returns {string|*}
+ * @param {string|Date} dateTime
+ * @returns {string}
*/
- formatMomentDuration(duration) {
- const hours = parseInt(duration.asHours());
- const minutes = duration.minutes();
-
- return this.formatTime(hours, minutes);
+ getFormattedDate(dateTime)
+ {
+ return this.format(this._parseFormat(this.dateFormat), dateTime);
}
- formatTime(hours, minutes) {
- let format = this.getConfiguration('formatDuration');
+ /**
+ * Returns a "YYYY-MM-DDTHH:mm:ss" formatted string in local time.
+ * This can take Date objects (e.g. from FullCalendar) and turn them into the correct format.
+ *
+ * @param {Date|DateTime} date
+ * @param {boolean|undefined} isUtc
+ * @return {string}
+ */
+ formatForAPI(date, isUtc = false)
+ {
+ if (date instanceof Date) {
+ date = DateTime.fromJSDate(date);
+ }
+
+ if (isUtc === undefined || !isUtc) {
+ date = date.toUTC();
+ }
+
+ return date.toISO({ includeOffset: false, suppressMilliseconds: true });
+ }
+
+ /**
+ * @param {string} date
+ * @param {string} format
+ * @return {DateTime}
+ */
+ fromFormat(date, format)
+ {
+ // using locale en-us here prevents that Luxon expects the localized
+ // version of AM/PM (e.g. 오후 / 오전 for locale "ko")
+ return DateTime.fromFormat(date, this._parseFormat(format), { locale: 'en-us' });
+ }
+
+ /**
+ * @param {string|null} date
+ * @param {string|null} time
+ * @return {DateTime}
+ */
+ fromHtml5Input(date, time)
+ {
+ date = date ?? '';
+ time = time ?? '';
+
+ if (date === '' && time === '') {
+ return DateTime.invalid('Empty date and time given');
+ }
+
+ if (date !== '' && time !== '') {
+ date = date + 'T' + time;
+ }
+
+ return DateTime.fromISO(date);
+ }
+
+ /**
+ * @param {string} date
+ * @param {string} format
+ * @return {boolean}
+ */
+ isValidDateTime(date, format)
+ {
+ return this.fromFormat(date, format).isValid;
+ }
+
+ /**
+ * Adds a string like "00:30:00" or "01:15" to a given date.
+ *
+ * @param {Date} date
+ * @param {string} duration
+ * @return {Date}
+ */
+ addHumanDuration(date, duration)
+ {
+ /** @type {DateTime} newDate */
+ let newDate = null;
+
+ if (date instanceof Date) {
+ newDate = DateTime.fromJSDate(date);
+ } else if (date instanceof DateTime) {
+ newDate = date;
+ } else {
+ throw 'addHumanDuration() needs a JS Date';
+ }
+
+ const parsed = DateTime.fromISO(duration);
+ const today = DateTime.now().startOf('day');
+ const timeOfDay = parsed.diff(today);
+
+ return newDate.plus(timeOfDay).toJSDate();
+ }
+
+ /**
+ * @param {string|integer|null} since
+ * @return {string}
+ */
+ formatDuration(since)
+ {
+ let duration = null;
+
+ if (typeof since === 'string') {
+ duration = DateTime.now().diff(DateTime.fromISO(since));
+ } else {
+ duration = Duration.fromISO('PT' + (since === null ? 0 : since) + 'S');
+ }
+
+ return this.formatLuxonDuration(duration);
+ }
+
+ /**
+ * @param {integer} seconds
+ * @return {string}
+ */
+ formatSeconds(seconds)
+ {
+ return this.formatLuxonDuration(Duration.fromObject({seconds: seconds}));
+ }
+
+ /**
+ * @param {Duration} duration
+ * @returns {string}
+ * @private
+ */
+ formatLuxonDuration(duration)
+ {
+ duration = duration.shiftTo('hours', 'minutes', 'seconds');
+
+ return this.formatAsDuration(duration.hours, duration.minutes);
+ }
+
+ /**
+ * @param {Date} date
+ * @param {boolean|undefined} isUtc
+ * @return {string}
+ */
+ formatTime(date, isUtc = false)
+ {
+ let newDate = DateTime.fromJSDate(date);
+
+ if (isUtc === undefined || !isUtc) {
+ newDate = newDate.toUTC();
+ }
+
+ // .utc() is required for calendar
+ return newDate.toFormat(this.timeFormat);
+ }
+
+ /**
+ * TODO remove seconds
+ *
+ * @param {int} hours
+ * @param {int} minutes
+ * @return {string}
+ */
+ formatAsDuration(hours, minutes)
+ {
+ let format = this.durationFormat;
if (hours < 0 || minutes < 0) {
hours = Math.abs(hours);
minutes = Math.abs(minutes);
- if (minutes > 0 || hours > 0) {
- format = '-' + format;
- }
+ format = '-' + format;
}
- // special case for hours, as they can overflow the 24h barrier - Kimai does not support days as duration unit
- if (hours < 10) {
- hours = '0' + hours;
- }
-
-
- return format.replace('%h', hours).replace('%m', ('0' + minutes).substr(-2));
+ return format.replace('%h', (hours < 10 ? '0' + hours : hours)).replace('%m', ('0' + minutes).slice(-2));
+ //return format.replace('%h', (hours < 10 ? '0' + hours : hours)).replace('%m', ('0' + minutes).slice(-2)).replace('%s', ('0' + seconds).slice(-2));
}
/**
@@ -83,32 +253,52 @@ export default class KimaiDateUtils extends KimaiPlugin {
*/
getSecondsFromDurationString(duration)
{
- duration = duration.trim().toUpperCase();
- let momentDuration = moment.duration(NaN);
+ const luxonDuration = this.parseDuration(duration);
- if (duration.indexOf(':') !== -1) {
- momentDuration = moment.duration(duration);
- } else if (duration.indexOf('.') !== -1 || duration.indexOf(',') !== -1) {
- duration = duration.replace(/,/, '.');
- duration = (parseFloat(duration) * 3600).toString();
- momentDuration = moment.duration('PT' + duration + 'S');
- } else if (duration.indexOf('H') !== -1 || duration.indexOf('M') !== -1 || duration.indexOf('S') !== -1) {
- /* D for days does not work, because 'PT1H' but with days 'P1D' is used */
- momentDuration = moment.duration('PT' + duration);
- } else {
- let c = parseInt(duration);
- let d = parseInt(duration).toFixed();
- if (!isNaN(c) && duration === d) {
- duration = (c * 3600).toString();
- momentDuration = moment.duration('PT' + duration + 'S');
- }
- }
-
- if (!momentDuration.isValid()) {
+ if (luxonDuration === null || !luxonDuration.isValid) {
return 0;
}
- return momentDuration.asSeconds();
+ return luxonDuration.as('seconds');
+ }
+
+ /**
+ * @param {string} duration
+ * @returns {Duration}
+ */
+ parseDuration(duration)
+ {
+ if (duration === undefined || duration === null || duration === '') {
+ return new Duration({seconds: 0});
+ }
+
+ duration = duration.trim().toUpperCase();
+ let luxonDuration = null;
+
+ if (duration.indexOf(':') !== -1) {
+ const [, hours, minutes, seconds] = duration.match(/(\d+):(\d+)(?::(\d+))*/);
+ luxonDuration = Duration.fromObject({hours: hours, minutes: minutes, seconds: seconds});
+ } else if (duration.indexOf('.') !== -1 || duration.indexOf(',') !== -1) {
+ duration = duration.replace(/,/, '.');
+ duration = (parseFloat(duration) * 3600).toString();
+ luxonDuration = Duration.fromISO('PT' + duration + 'S');
+ } else if (duration.indexOf('H') !== -1 || duration.indexOf('M') !== -1 || duration.indexOf('S') !== -1) {
+ /* D for days does not work, because 'PT1H' but with days 'P1D' is used */
+ luxonDuration = Duration.fromISO('PT' + duration);
+ } else {
+ let c = parseInt(duration);
+ const d = parseInt(duration).toFixed();
+ if (!isNaN(c) && duration === d) {
+ duration = (c * 3600).toString();
+ luxonDuration = Duration.fromISO('PT' + duration + 'S');
+ }
+ }
+
+ if (luxonDuration === null || !luxonDuration.isValid) {
+ return new Duration({seconds: 0});
+ }
+
+ return luxonDuration;
}
}
diff --git a/assets/js/plugins/KimaiEscape.js b/assets/js/plugins/KimaiEscape.js
index 0b20e4c13..8bdfa0c37 100644
--- a/assets/js/plugins/KimaiEscape.js
+++ b/assets/js/plugins/KimaiEscape.js
@@ -22,6 +22,10 @@ export default class KimaiEscape extends KimaiPlugin {
* @returns {string}
*/
escapeForHtml(title) {
+ if (title === undefined || title === null) {
+ return '';
+ }
+
const tagsToReplace = {
'&': '&',
'<': '<',
@@ -31,5 +35,5 @@ export default class KimaiEscape extends KimaiPlugin {
return title.replace(/[&<>]/g, function(tag) {
return tagsToReplace[tag] || tag;
});
- };
+ }
}
diff --git a/assets/js/plugins/KimaiEvent.js b/assets/js/plugins/KimaiEvent.js
index 2abc953a5..82332bee4 100644
--- a/assets/js/plugins/KimaiEvent.js
+++ b/assets/js/plugins/KimaiEvent.js
@@ -13,18 +13,24 @@ import KimaiPlugin from "../KimaiPlugin";
export default class KimaiEvent extends KimaiPlugin {
- getId() {
+ getId()
+ {
return 'event';
}
- trigger(name, details) {
- if (name === null || name === undefined) {
+ /**
+ * @param {string} name
+ * @param {string|array|object|null} details
+ */
+ trigger(name, details = null)
+ {
+ if (name === '') {
return;
}
- for(let event of name.split(' ')) {
+ for (const event of name.split(' ')) {
let triggerEvent = new Event(event);
- if (details !== undefined) {
+ if (details !== null) {
triggerEvent = new CustomEvent(event, {detail: details});
}
document.dispatchEvent(triggerEvent);
diff --git a/assets/js/plugins/KimaiFetch.js b/assets/js/plugins/KimaiFetch.js
new file mode 100644
index 000000000..dc0887323
--- /dev/null
+++ b/assets/js/plugins/KimaiFetch.js
@@ -0,0 +1,80 @@
+/*
+ * 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] KimaiEscape: sanitize strings
+ */
+
+import KimaiPlugin from "../KimaiPlugin";
+
+export default class KimaiFetch extends KimaiPlugin {
+
+ getId() {
+ return 'fetch';
+ }
+
+ /**
+ * @param {string} url
+ * @param {object} options
+ * @returns {Promise
+
+
+