refactored column visibility modal to ES6 (#733)

2019-05-01 22:18:57 +02:00
parent 721ecdbf3d
commit e80973c4d2
16 changed files with 263 additions and 214 deletions
--- a/templates/activity/index.html.twig
+++ b/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) }}

--- a/templates/customer/index.html.twig
+++ b/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 %}
--- a/templates/export/index.html.twig
+++ b/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 %}
--- a/templates/invoice/index.html.twig
+++ b/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) }}
--- a/templates/macros/datatables.html.twig
+++ b/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-warning pull-left" onclick="$.datatable.resetVisibility('#modal_{{ name }}')">{{ 'action.delete'|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" 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 %}
-        {% set classes = entries[column] %}
+    {% if columns[column] is defined %}
+        {% 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 -%}
-                                <th class="{{ macro.data_table_column_class(name, entries, title) }}">{{ ('label.' ~ title)|trans }}</th>
+                            {%- for title, class in columns -%}
+                                <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 %}
--- a/templates/project/index.html.twig
+++ b/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 %}
--- a/templates/timesheet-team/index.html.twig
+++ b/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 %}
--- a/templates/timesheet/index.html.twig
+++ b/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 %}
--- a/templates/user/index.html.twig
+++ b/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 %}