refactored column visibility modal to ES6 (#733)

This commit is contained in:
Kevin Papst
2019-05-01 22:18:57 +02:00
committed by GitHub
parent 721ecdbf3d
commit e80973c4d2
16 changed files with 263 additions and 214 deletions

View File

@@ -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 ------

View File

@@ -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;
}));
});

View File

@@ -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 */

View File

@@ -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 */

File diff suppressed because one or more lines are too long

View File

@@ -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",

View File

@@ -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) }}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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) }}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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]'