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');
+ * [KIMAI] KimaiDatatableColumnView: manages the visibility of data-table columns in cookies
-
-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.
  */
-$.datatable = {};
 
-$(function() {
+import Cookies from 'js-cookie';
-    "use strict";
 
-    $.datatable = {
+// Following the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
-        saveVisibility: function (modalSelector) {
+(function (root, factory) {
-            $(modalSelector).find('form').each(
+    if (typeof define === 'function' && define.amd) {
-                function() {
+        define(['jquery'], function (jquery) {
-                    var settings = {};
+            return (root.KimaiDatatableColumnView = factory(jquery));
-                    var cookieName = $(this).attr('name');
+        });
-                    $(this).find('input:checkbox').each(
+    } else if (typeof module === 'object' && module.exports) {
-                        function () {
+        let jQuery = (typeof window != 'undefined') ? window.jQuery : undefined;
-                            settings[$(this).attr('name')] = $(this).is(':checked');
+        if (!jQuery) {
-                        }
+            jQuery = require('jquery');
-                    );
+            if (!jQuery.fn) {
-                    if (jQuery.isEmptyObject(settings)) {
+                jQuery.fn = {};
-                        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;
             }
-            var header = $(tbl.find('th').get(column));
+        }
-            if (header.css("display") === "none") {
+        module.exports = factory(jQuery);
-                header.show('ease');
+    } else {
-                tbl.find('tr').each(function(){
+        root.KimaiDatatableColumnView = factory(root.jQuery);
-                    $($(this).find('td').get(column)).show('ease');
+    }
-                });
+}(typeof self !== 'undefined' ? self : this, function ($) {
-            } else {
+
-                header.hide('ease');
+    /**
-                tbl.find('tr').each(function(){
+     * This is my first approach on ES6, so it can be optimized.
-                    $($(this).find('td').get(column)).hide('ease');
+     * 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 */

public/build/manifest.json

@@ -1,5 +1,5 @@
 {
-  "build/app.js": "./app.js?14f8ca3b94540353d1d6",
+  "build/app.js": "./app.js?[contenthash]",
   "build/app.css": "./app.css?230233ad08d74f0006abee781c0fa499",
   "build/fonts/fa-solid-900.woff2": "./fonts/fa-solid-900.woff2?e8a92a29",
   "build/images/fa-solid-900.svg": "./images/fa-solid-900.svg?666a82cb",

templates/activity/index.html.twig

@@ -4,12 +4,24 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/actions.html.twig" as actions %}
 
+{% set columns = {
+    'name': 'alwaysVisible',
+    'customer': 'hidden-xs',
+    'project': 'hidden-xs',
+    'comment': 'hidden-xs',
+    'visible': '',
+    'actions': 'alwaysVisible',
+} %}
+
+{% set tableName = 'activity_admin' %}
+
 {% block page_title %}{{ 'admin_activity.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_activity.subtitle'|trans }}{% endblock %}
 {% block page_actions %}{{ actions.activities('index') }}{% endblock %}
 
 {% block main_before %}
     {{ toolbar.toolbar(toolbarForm, 'collapseActivityAdmin', showFilter) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main %}
@@ -17,16 +29,6 @@
     {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set columns = {
-            'name': 'alwaysVisible',
-            'customer': 'hidden-xs',
-            'project': 'hidden-xs',
-            'comment': 'hidden-xs',
-            'visible': '',
-            'actions': 'alwaysVisible',
-        } %}
-
-        {% set tableName = 'activity_admin' %}
 
         {{ tables.data_table_header(tableName, columns) }}
 

templates/customer/index.html.twig

@@ -4,12 +4,25 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/actions.html.twig" as actions %}
 
+{% set columns = {
+    'name': 'alwaysVisible',
+    'comment': 'hidden-xs',
+    'country': 'hidden-xs',
+    'number': 'hidden-xs',
+    'currency': 'hidden-xs',
+    'visible': 'hidden-xs',
+    'actions': 'alwaysVisible',
+} %}
+
+{% set tableName = 'customer_admin' %}
+
 {% block page_title %}{{ 'admin_customer.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_customer.subtitle'|trans }}{% endblock %}
 {% block page_actions %}{{ actions.customers('index') }}{% endblock %}
 
 {% block main_before %}
     {{ toolbar.toolbar(toolbarForm, 'collapseCustomerAdmin', showFilter) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main %}
@@ -17,18 +30,6 @@
     {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set columns = {
-            'name': 'alwaysVisible',
-            'comment': 'hidden-xs',
-            'country': 'hidden-xs',
-            'number': 'hidden-xs',
-            'currency': 'hidden-xs',
-            'visible': 'hidden-xs',
-            'actions': 'alwaysVisible',
-        } %}
-
-        {% set tableName = 'customer_admin' %}
-
         {{ tables.data_table_header(tableName, columns) }}
 
         {% for entry in entries %}

templates/export/index.html.twig

@@ -3,6 +3,21 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/datatables.html.twig" as tables %}
 
+{% set columns = {
+    'date': 'alwaysVisible',
+    'user': 'hidden-xs hidden-sm',
+    'customer': 'hidden-xs hidden-sm',
+    'project': 'hidden-xs hidden-sm',
+    'activity': 'hidden-xs hidden-sm',
+    'description': 'hidden-xs hidden-sm',
+    'unit_price': 'hidden-xs',
+    'duration': '',
+    'total_rate': '',
+    'exported': 'alwaysVisible',
+} %}
+
+{% set tableName = 'export' %}
+
 {% block page_title %}{{ 'export.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'export.subtitle'|trans }}{% endblock %}
 {% block page_actions %}
@@ -16,6 +31,7 @@
 
 {% block main_before %}
     {{ toolbar.toolbar(form, 'collapseExport', true) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main_after %}
@@ -27,21 +43,6 @@
     {% if entries is empty %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set columns = {
-            'date': 'alwaysVisible',
-            'user': 'hidden-xs hidden-sm',
-            'customer': 'hidden-xs hidden-sm',
-            'project': 'hidden-xs hidden-sm',
-            'activity': 'hidden-xs hidden-sm',
-            'description': 'hidden-xs hidden-sm',
-            'unit_price': 'hidden-xs',
-            'duration': '',
-            'total_rate': '',
-            'exported': 'alwaysVisible',
-        } %}
-
-        {% set tableName = 'export' %}
-
         {{ tables.data_table_header(tableName, columns) }}
         {% for entry in entries %}
             {% set currency = entry.project.customer.currency %}

templates/invoice/index.html.twig

@@ -3,6 +3,17 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/datatables.html.twig" as tables %}
 
+{% set columns = {
+    'date': 'alwaysVisible',
+    'user': 'hidden-sm',
+    'description': 'hidden-xs hidden-sm',
+    'unit_price': 'hidden-xs text-center',
+    'amount': 'text-center',
+    'total_rate': 'text-right alwaysVisible',
+} %}
+
+{% set tableName = 'invoice' %}
+
 {% block page_title %}{{ 'invoice.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'invoice.subtitle'|trans }}{% endblock %}
 {% block page_actions %}
@@ -18,6 +29,7 @@
 
 {% block main_before %}
     {{ toolbar.toolbar(form, 'collapseInvoice', true) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main_after %}
@@ -36,17 +48,6 @@
     {% else %}
         {{ widgets.callout('success', 'invoice.preview') }}
 
-        {% set columns = {
-            'date': 'alwaysVisible',
-            'user': 'hidden-sm',
-            'description': 'hidden-xs hidden-sm',
-            'unit_price': 'hidden-xs text-center',
-            'amount': 'text-center',
-            'total_rate': 'text-right',
-        } %}
-
-        {% set tableName = 'invoice' %}
-
         {{ tables.data_table_header(tableName, columns) }}
         {% for entry in entries %}
             {% set duration = entry.duration|duration() %}
@@ -70,7 +71,7 @@
                 </td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'unit_price') }} text-center">{{ rate|money(model.calculator.currency) }}</td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'amount') }} text-center text-nowrap">{{ duration }}</td>
-                <td class="{{ tables.data_table_column_class(tableName, columns, 'total_rate') }} text-right text-nowrap">{{ entry.rate|money(model.calculator.currency) }}</td>
+                <td class="text-right text-nowrap">{{ entry.rate|money(model.calculator.currency) }}</td>
             </tr>
         {% endfor %}
         {{ tables.data_table_footer(entries) }}

templates/macros/datatables.html.twig

@@ -1,5 +1,5 @@
 
-{% macro data_table_column_modal(name, entries) %}
+{% macro data_table_column_modal(name, columns) %}
 <div class="modal fade" id="modal_{{ name }}" tabindex="-1" role="dialog" aria-labelledby="data_table_modal_label">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
@@ -9,11 +9,11 @@
             </div>
             <div class="modal-body">
                 <form name="{{ name }}_visibility">
-                    {% for title, class in entries %}
+                    {% for title, class in columns %}
                         {% if 'alwaysVisible' not in class %}
                             <div class="form-group">
                                 <input type="checkbox" id="column_{{ title }}" name="{{ title }}"{% if is_visible_column(name, title) %} checked="checked"{% endif %}>
-                                <label class="control-label required" for="column_{{ title }}">{{ ('label.' ~ title)|trans }}</label>
+                                <label class="control-label" for="column_{{ title }}">{{ ('label.' ~ title)|trans }}</label>
                             </div>
                         {% endif %}
                     {% endfor %}
@@ -21,22 +21,27 @@
                 <p>{{ 'modal.columns.description'|trans }}</p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-primary pull-left" onclick="$.datatable.saveVisibility('#modal_{{ name }}')">{{ 'action.save'|trans }}</button>
+                <button type="button" class="btn btn-primary pull-left" data-type="save">{{ 'action.save'|trans }}</button>
-                <button type="button" class="btn btn-warning pull-left" onclick="$.datatable.resetVisibility('#modal_{{ name }}')">{{ 'action.delete'|trans }}</button>
+                <button type="button" class="btn btn-warning pull-left" data-type="reset">{{ 'action.delete'|trans }}</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'action.close'|trans }}</button>
             </div>
         </div>
     </div>
 </div>
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+        new KimaiDatatableColumnView('{{ name }}');
+    });
+</script>
 {% endmacro %}
 
-{% macro data_table_column_class(name, entries, column) %}
+{% macro data_table_column_class(name, columns, column) %}
 {% spaceless %}
     {% set class = '' %}
     {% set always = false %}
 
-    {% if entries[column] is defined %}
+    {% if columns[column] is defined %}
-        {% set classes = entries[column] %}
+        {% set classes = columns[column] %}
         {% if 'alwaysVisible' in classes %}
             {# as this column should always be visible, we remove every class that includes hidden #}
             {% for tmp in classes|split(' ') %}
@@ -70,9 +75,8 @@
 {% endspaceless %}
 {% endmacro %}
 
-{% macro data_table_header(name, entries, skipStripped) %}
+{% macro data_table_header(name, columns, skipStripped) %}
 {% import _self as macro %}
-{{ macro.data_table_column_modal(name, entries) }}
 <div class="box data_table" id="datatable_{{ name }}">
     <div class="box-body no-padding">
         <div class="dataTables_wrapper form-inline dt-bootstrap">
@@ -81,15 +85,15 @@
                     <table class="table {% if not skipStripped %}table-striped {% endif %}table-hover dataTable" role="grid">
                         <thead>
                         <tr>
-                            {%- for title, class in entries -%}
+                            {%- for title, class in columns -%}
-                                <th class="{{ macro.data_table_column_class(name, entries, title) }}">{{ ('label.' ~ title)|trans }}</th>
+                                <th data-field="{{ title }}" class="{{ macro.data_table_column_class(name, columns, title) }}">{{ ('label.' ~ title)|trans }}</th>
                             {%- endfor -%}
                         </tr>
                         </thead>
                         <tbody>
 {% endmacro %}
 
-{% macro data_table_footer(entries, route) %}
+{% macro data_table_footer(columns, route) %}
                         </tbody>
                     </table>
                 </div>
@@ -99,7 +103,7 @@
 </div>
 {% if route is not empty %}
 <div class="navigation text-center no-print">
-    {{ pagerfanta(entries, 'twitter_bootstrap3_translated', { proximity: 1, routeName: route }) }}
+    {{ pagerfanta(columns, 'twitter_bootstrap3_translated', { proximity: 1, routeName: route }) }}
 </div>
 {% endif %}
 {% endmacro %}

templates/project/index.html.twig

@@ -4,12 +4,24 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/actions.html.twig" as actions %}
 
+{% set columns = {
+    'name': 'alwaysVisible',
+    'customer': 'hidden-xs',
+    'comment': 'hidden-xs hidden-sm',
+    'budget': 'hidden-xs',
+    'visible': '',
+    'actions': 'alwaysVisible',
+} %}
+
+{% set tableName = 'project_admin' %}
+
 {% block page_title %}{{ 'admin_project.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_project.subtitle'|trans }}{% endblock %}
 {% block page_actions %}{{ actions.projects('index') }}{% endblock %}
 
 {% block main_before %}
     {{ toolbar.toolbar(toolbarForm, 'collapseProjectAdmin', showFilter) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main %}
@@ -17,17 +29,6 @@
     {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set columns = {
-            'name': 'alwaysVisible',
-            'customer': 'hidden-xs',
-            'comment': 'hidden-xs hidden-sm',
-            'budget': 'hidden-xs',
-            'visible': '',
-            'actions': 'alwaysVisible',
-        } %}
-
-        {% set tableName = 'project_admin' %}
-
         {{ tables.data_table_header(tableName, columns) }}
 
         {% for entry in entries %}

templates/timesheet-team/index.html.twig

@@ -4,12 +4,33 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/actions.html.twig" as actions %}
 
+{% set duration_only = is_duration_only() %}
+{% set columns = {'date': ''} %}
+
+{% if not duration_only %}
+    {% set columns = columns|merge({'starttime': 'hidden-xs', 'endtime': 'hidden-xs'}) %}
+{% endif %}
+
+{% set columns = columns|merge({
+    'duration': '',
+    'rate': '',
+    'customer': 'hidden-xs hidden-sm',
+    'project': 'hidden-xs hidden-sm',
+    'activity': 'hidden-xs hidden-sm',
+    'username': 'hidden-xs',
+    'description': 'hidden-xs hidden-sm',
+    'actions': 'alwaysVisible',
+}) %}
+
+{% set tableName = 'timesheet_admin' %}
+
 {% block page_title %}{{ 'admin_timesheet.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_timesheet.subtitle'|trans }}{% endblock %}
 {% block page_actions %}{{ actions.timesheets_team('index') }}{% endblock %}
 
 {% block main_before %}
     {{ toolbar.toolbar(toolbarForm, 'collapseTimesheetAdmin', showFilter) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main %}
@@ -17,26 +38,6 @@
     {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set duration_only = is_duration_only() %}
-        {% set columns = {'date': ''} %}
-
-        {% if not duration_only %}
-            {% set columns = columns|merge({'starttime': 'hidden-xs', 'endtime': 'hidden-xs'}) %}
-        {% endif %}
-
-        {% set columns = columns|merge({
-            'duration': '',
-            'rate': '',
-            'customer': 'hidden-xs hidden-sm',
-            'project': 'hidden-xs hidden-sm',
-            'activity': 'hidden-xs hidden-sm',
-            'username': 'hidden-xs',
-            'description': 'hidden-xs hidden-sm',
-            'actions': 'alwaysVisible',
-        }) %}
-
-        {% set tableName = 'timesheet_admin' %}
-
         {{ tables.data_table_header(tableName, columns) }}
 
         {% for entry in entries %}

templates/timesheet/index.html.twig

@@ -4,12 +4,32 @@
 {% import "macros/toolbar.html.twig" as toolbar %}
 {% import "macros/actions.html.twig" as actions %}
 
+{% set tableName = 'timesheet' %}
+{% set duration_only = is_duration_only() %}
+{% set canSeeRate = is_granted('view_rate_own_timesheet') %}
+{% set columns = {'date': 'alwaysVisible'} %}
+{% if not duration_only %}
+    {% set columns = columns|merge({'starttime': '', 'endtime': 'hidden-xs'}) %}
+{% endif %}
+{% set columns = columns|merge({'duration': ''}) %}
+{% if canSeeRate %}
+    {% set columns = columns|merge({'rate': 'hidden-xs'}) %}
+{% endif %}
+{% set columns = columns|merge({
+    'customer': 'hidden-xs hidden-sm',
+    'project': 'hidden-xs hidden-sm',
+    'activity': 'hidden-xs hidden-sm',
+    'description': 'hidden-xs hidden-sm',
+    'actions': 'alwaysVisible',
+}) %}
+
 {% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %}
 {% block page_actions %}{{ actions.timesheets('index') }}{% endblock %}
 
 {% block main_before %}
     {{ toolbar.toolbar(toolbarForm, 'collapseTimesheet', showFilter) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main %}
@@ -17,30 +37,6 @@
     {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set duration_only = is_duration_only() %}
-        {% set canSeeRate = is_granted('view_rate_own_timesheet') %}
-        {% set columns = {'date': ''} %}
-
-        {% if not duration_only %}
-            {% set columns = columns|merge({'starttime': '', 'endtime': 'hidden-xs'}) %}
-        {% endif %}
-
-        {% set columns = columns|merge({'duration': ''}) %}
-
-        {% if canSeeRate %}
-            {% set columns = columns|merge({'rate': 'hidden-xs'}) %}
-        {% endif %}
-
-        {% set columns = columns|merge({
-            'customer': 'hidden-xs hidden-sm',
-            'project': 'hidden-xs hidden-sm',
-            'activity': 'hidden-xs hidden-sm',
-            'description': 'hidden-xs hidden-sm',
-            'actions': 'alwaysVisible',
-        }) %}
-
-        {% set tableName = 'timesheet' %}
-
         {{ tables.data_table_header(tableName, columns, showSummary) }}
 
         {% set day = null %}

templates/user/index.html.twig

@@ -3,6 +3,18 @@
 {% import "macros/widgets.html.twig" as widgets %}
 {% import "macros/toolbar.html.twig" as toolbar %}
 
+{% set columns = {
+    'alias': 'alwaysVisible',
+    'username': 'hidden-xs',
+    'email': 'hidden-xs hidden-sm',
+    'title': 'hidden-xs',
+    'roles': 'hidden-xs',
+    'active': '',
+    'actions': 'alwaysVisible',
+} %}
+
+{% set tableName = 'user_admin' %}
+
 {% block page_title %}{{ 'admin_user.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_user.subtitle'|trans }}{% endblock %}
 {% block page_actions %}
@@ -13,9 +25,9 @@
     {{ widgets.page_actions(actions) }}
 {% endblock %}
 
-
 {% block main_before %}
     {{ toolbar.toolbar(toolbarForm, 'collapseUserAdmin', showFilter) }}
+    {{ tables.data_table_column_modal(tableName, columns) }}
 {% endblock %}
 
 {% block main %}
@@ -23,18 +35,6 @@
     {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {% set columns = {
-            'alias': 'alwaysVisible',
-            'username': 'hidden-xs',
-            'email': 'hidden-xs hidden-sm',
-            'title': 'hidden-xs',
-            'roles': 'hidden-xs',
-            'active': '',
-            'actions': 'alwaysVisible',
-        } %}
-
-        {% set tableName = 'user_admin' %}
-
         {{ tables.data_table_header(tableName, columns) }}
 
         {% for entry in entries %}

webpack.config.js

@@ -41,7 +41,7 @@ Encore
 
     // add hash after file name
     .configureFilenames({
-        js: '[name].js?[chunkhash]',
+        js: '[name].js?[contenthash]',
         css: '[name].css?[contenthash]',
         images: 'images/[name].[ext]?[hash:8]',
         fonts: 'fonts/[name].[ext]?[hash:8]'