refactored column visibility modal to ES6 (#733)

assets/app.js

@@ -24,6 +24,7 @@ require('moment/locale/ru');
 require('moment/locale/ar');
 require('moment/locale/hu');
 require('moment/locale/pt-br');
+require('moment/locale/sv');
 
 require('daterangepicker');
 
@@ -54,6 +55,7 @@ require('fullcalendar/dist/locale/ru');
 require('fullcalendar/dist/locale/ar');
 require('fullcalendar/dist/locale/hu');
 require('fullcalendar/dist/locale/pt-br');
+require('fullcalendar/dist/locale/sv');
 require('fullcalendar/dist/fullcalendar.min.css');
 
 // ------ for charts ------

assets/js/datatable.js

@@ -5,76 +5,107 @@
  * file that was distributed with this source code.
  */
 
-/** global: Cookies */
-global.Cookies = require('js-cookie');
-
-if (typeof jQuery === 'undefined') {
-    throw new Error('Kimai requires jQuery');
-}
-
-/* datatable
- *
- * @type Object
- * @description $.datatable is the main object for views with data-tables.
- *              It's used for implementing functions and options related
- *              to the datatables.
+/*!
+ * [KIMAI] KimaiDatatableColumnView: manages the visibility of data-table columns in cookies
  */
-$.datatable = {};
 
-$(function() {
-    "use strict";
+import Cookies from 'js-cookie';
 
-    $.datatable = {
-        saveVisibility: function (modalSelector) {
-            $(modalSelector).find('form').each(
-                function() {
-                    var settings = {};
-                    var cookieName = $(this).attr('name');
-                    $(this).find('input:checkbox').each(
-                        function () {
-                            settings[$(this).attr('name')] = $(this).is(':checked');
-                        }
-                    );
-                    if (jQuery.isEmptyObject(settings)) {
-                        Cookies.remove(cookieName);
-                    } else {
-                        Cookies.set(cookieName, JSON.stringify(settings), {expires: 365});
-                    }
-                }
-            );
-            $(modalSelector).modal('toggle');
-            $.kimai.reloadDatatableWithToolbarFilter();
-        },
-        resetVisibility: function (modalSelector) {
-            $(modalSelector).find('form').each(
-                function() {
-                    var cookieName = $(this).attr('name');
-                    Cookies.remove(cookieName);
-                }
-            );
-            $(modalSelector).modal('toggle');
-            $.kimai.reloadDatatableWithToolbarFilter();
-        },
-        changeVisibility: function (column) {
-            var tbl = $('table.dataTable');
-            var amount = tbl.find('th').length -1;
-            if (column < 0 || column >= amount) {
-                return;
+// Following the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], function (jquery) {
+            return (root.KimaiDatatableColumnView = factory(jquery));
+        });
+    } else if (typeof module === 'object' && module.exports) {
+        let jQuery = (typeof window != 'undefined') ? window.jQuery : undefined;
+        if (!jQuery) {
+            jQuery = require('jquery');
+            if (!jQuery.fn) {
+                jQuery.fn = {};
             }
-            var header = $(tbl.find('th').get(column));
-            if (header.css("display") === "none") {
-                header.show('ease');
-                tbl.find('tr').each(function(){
-                    $($(this).find('td').get(column)).show('ease');
-                });
-            } else {
-                header.hide('ease');
-                tbl.find('tr').each(function(){
-                    $($(this).find('td').get(column)).hide('ease');
+        }
+        module.exports = factory(jQuery);
+    } else {
+        root.KimaiDatatableColumnView = factory(root.jQuery);
+    }
+}(typeof self !== 'undefined' ? self : this, function ($) {
+
+    /**
+     * This is my first approach on ES6, so it can be optimized.
+     * Please: show your JS skills and teach a PHP backend developer how to do it properly, sent a PR!
+     *
+     * BTW: I tried to get rid of it, but jQuery is still required for the bootstrap modal ...
+     */
+    class KimaiDatatableColumnView {
+
+        constructor(selector) {
+            this.id = selector;
+            this.modal = document.getElementById('modal_' + selector);
+            this.bindButtons();
+        }
+
+        bindButtons() {
+            let self = this;
+            this.modal.querySelector('button[data-type=save]').addEventListener('click', function() {
+                self.saveVisibility();
+            });
+            this.modal.querySelector('button[data-type=reset]').addEventListener('click', function() {
+                self.resetVisibility();
+            });
+            for (let checkbox of this.modal.querySelectorAll('form input[type=checkbox]')) {
+                checkbox.addEventListener('click', function () {
+                    self.changeVisibility(checkbox.getAttribute('name'));
                 });
             }
         }
 
-    };
+        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;
+            }
+            Cookies.set(form.getAttribute('name'), JSON.stringify(settings), {expires: 365});
+            $(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();
+                }
+            }
+            $(this.modal).modal('toggle');
+        }
+
+        changeVisibility(columnName) {
+            const table = document.getElementById('datatable_' + this.id).getElementsByClassName('dataTable')[0];
+            let column = 0;
+            let foundColumn = false;
+            for (let columnElement of table.getElementsByTagName('th')) {
+                if (columnElement.getAttribute('data-field') === columnName) {
+                    foundColumn = true;
+                    break;
+                }
+                column++;
+            }
+
+            if (!foundColumn) {
+                console.error('Could not find column: ' + columnName);
+                return;
+            }
+
+            for (let rowElement of table.getElementsByTagName('tr')) {
+                rowElement.children[column].classList.toggle('hidden');
+            }
+        }
+
+    }
+
+    return KimaiDatatableColumnView;
+
+}));
 
-});

assets/js/kimai.js

@@ -1,4 +1,4 @@
-/*!
+/*
  * This file is part of the Kimai time-tracking app.
  *
  * Main JS application file for Kimai 2. This file should be included in all pages.
@@ -7,6 +7,10 @@
  * file that was distributed with this source code.
  */
 
+/*!
+ * [KIMAI] Main JS application file for Kimai 2
+ */
+
 /** global: jQuery */
 /** global: moment */
 

assets/js/toolbar.js

@@ -4,6 +4,10 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+
+/*!
+ * [KIMAI] Toolbar: some helper scripts for data-table filter, toolbar and navigation
+ */
 $(document).ready(function () {
 
     /* Submit the pagination including the toolbar filters */