From 93ae08e8aacbd876642b098f84750b1e642576c1 Mon Sep 17 00:00:00 2001 From: Julien Rosset Date: Wed, 22 May 2024 19:29:14 +0200 Subject: [PATCH] Add Datatables.net to asset mapper --- assets/datatables.js | 135 ++++++++++++++++++++++++++++++++++ assets/styles/app.scss | 4 + assets/styles/datatables.scss | 35 +++++++++ importmap.php | 27 ++++++- 4 files changed, 198 insertions(+), 3 deletions(-) create mode 100644 assets/datatables.js create mode 100644 assets/styles/datatables.scss diff --git a/assets/datatables.js b/assets/datatables.js new file mode 100644 index 0000000..a6d1a39 --- /dev/null +++ b/assets/datatables.js @@ -0,0 +1,135 @@ +//region Datatables.net +import 'datatables.net'; +import 'datatables.net-dt/css/dataTables.dataTables.min.css'; +//endregion +//region Bootstrap 5 styling for Datatables.net +import 'datatables.net-bs5'; +import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css'; +//endregion +//region Custom style for Datatables.net +import './styles/datatables.scss'; +//endregion +import Utils from 'utils'; + +$('table.table-datatable').each(function () { + const self = $(this); + + //region Options du datatable + let options = { + paging: Utils.getData(self, 'sortPaging', false), + pageLength: Utils.getData(self, 'sortPerPage', 50), + processing: true, + layout: Utils.getData( + self, + 'sortLayout', + { + topStart: null, + topEnd: null, + bottomStart: null, + bottomEnd: 'paging', + }, + ), + }; + //endregion + //region Gestion tri initial + let initialSort = []; + $('> thead > tr > th[data-sort-onLoad]', this).each(function () { + let self = $(this); + initialSort.push( + { + index: self.index(), + priority: self.data('sortOnload'), + direction: Utils.getData(self, 'sortOrder', 'asc').toLowerCase(), + }, + ); + }); + initialSort.sort(function (sort1, sort2) { + if (sort1.priority === sort2.priority) { + return sort1.index - sort2.index; + } + + return sort1.priority - sort2.priority; + }); + + if (initialSort.length > 0) { + options.order = []; + initialSort.forEach(function (sortOrder) { + options.order.push([sortOrder.index, sortOrder.direction]); + }); + } + //endregion + //region Gestion sens de tri (1er clic ou initial si concerné) + let descSort = []; + $('> thead > tr > th[data-sort-order]', this).each(function () { + const self = $(this); + if (Utils.getData(self, 'sortOrder', 'asc').toLowerCase() === 'desc') { + descSort.push(self.index()); + } + }); + if (descSort.length > 0) { + if (!options.hasOwnProperty('columnDefs')) { + options.columnDefs = []; + } + options.columnDefs.push( + { + targets: descSort, + orderSequence: ['desc', 'asc'], + }, + ); + } + //endregion + //region Gestion désactivation tri + let disabledSort = []; + $('> thead > tr > th[data-sort]', this).each(function () { + const self = $(this); + if (!Utils.getData(self, 'sort', true)) { + disabledSort.push(self.index()); + } + }); + if (disabledSort.length > 0) { + if (!options.hasOwnProperty('columnDefs')) { + options.columnDefs = []; + } + options.columnDefs.push( + { + targets: disabledSort, + orderable: false, + }, + ); + } + //endregion + //region Gestion nom des colonnes + const columnsName = $('> thead > tr > th[data-sort-name]', this); + if (columnsName.length > 0) { + if (!options.hasOwnProperty('columnDefs')) { + options.columnDefs = []; + } + + columnsName.each(function () { + const self = $(this); + const name = Utils.getData(self, 'sortName', ''); + if (name !== '') { + options.columnDefs.push( + { + targets: self.index(), + name: name, + }, + ); + } + }); + } + //endregion + //region Gestion de AJAX + const ajaxUrl = Utils.getData(self, 'sortAjax', false); + if (ajaxUrl !== false) { + options.serverSide = true; + options.ajax = { + url: ajaxUrl, + type: 'POST', + cache: Utils.getData(self, 'sortAjaxCache', false), + }; + } + //endregion + + self.DataTable(options); +}); \ No newline at end of file diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 1620068..98822a1 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -2,3 +2,7 @@ @import 'xdebug'; @import 'layout'; @import 'freakFlagSprite'; + +.required:not(.form-check-label) { + color : var(--bs-red); +} \ No newline at end of file diff --git a/assets/styles/datatables.scss b/assets/styles/datatables.scss new file mode 100644 index 0000000..ccfc76a --- /dev/null +++ b/assets/styles/datatables.scss @@ -0,0 +1,35 @@ +table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before, +table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::after, +table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before, +table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after, +table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, +table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::after, +table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before, +table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, +table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before, +table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::after, +table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::before, +table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after, +table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before, +table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::after, +table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::before, +table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after { + margin-top : 3px; +} +table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, +table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, +table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, +table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order, +table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order, +table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order, +table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order, +table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order { + position : relative; + left : 10px; + top : none; + bottom : none; +} +div.dt-container .dt-paging .dt-paging-button { + padding : 0; + margin : 0; +} \ No newline at end of file diff --git a/importmap.php b/importmap.php index 051ed8c..0236579 100644 --- a/importmap.php +++ b/importmap.php @@ -12,20 +12,41 @@ * The "importmap:require" command can be used to add new entries to this file. */ return [ - 'app' => [ + 'app' => [ 'path' => './assets/app.js', 'entrypoint' => true, ], + 'datatables' => [ + 'path' => './assets/datatables.js', + 'entrypoint' => true, + ], 'bootstrap' => [ 'version' => '5.3.3', ], '@popperjs/core' => [ 'version' => '2.11.8', ], - 'jquery' => [ + 'jquery' => [ 'version' => '3.7.1', ], - 'utils' => [ + 'utils' => [ 'path' => './assets/utils.js', ], + '@fortawesome/free-solid-svg-icons' => [ + 'version' => '6.5.2', + ], + 'datatables.net' => [ + 'version' => '2.0.7', + ], + 'datatables.net-dt/css/dataTables.dataTables.min.css' => [ + 'version' => '2.0.7', + 'type' => 'css', + ], + 'datatables.net-bs5' => [ + 'version' => '2.0.7', + ], + 'datatables.net-bs5/css/dataTables.bootstrap5.min.css' => [ + 'version' => '2.0.7', + 'type' => 'css', + ], ];