From e1e6447a4bf1a2e3d1d1d859b07eedaa810fc504 Mon Sep 17 00:00:00 2001 From: Jonathan DURAND Date: Tue, 7 May 2024 10:11:02 +0200 Subject: [PATCH 1/3] Fix merge column if there are only 'standard' group --- lib/dom/HeadersLxDom.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/dom/HeadersLxDom.ts b/lib/dom/HeadersLxDom.ts index d621f28..a02aad4 100644 --- a/lib/dom/HeadersLxDom.ts +++ b/lib/dom/HeadersLxDom.ts @@ -55,10 +55,11 @@ class HeaderLxDom extends AbstractLxDom { ); if (!Object.keys(groupedHeaders).length) return this.headerRef; - // if no groupheader is present, build only columns + // if no groupheader is present, build only columns (e.g. : there are only HeaderGroup.NONE groups) if ( - Object.keys(groupedHeaders).length === 1 && - Object.keys(groupedHeaders).some((el) => el.startsWith(HeaderGroup.NONE)) + /*Object.keys(groupedHeaders).length === 1 || + Object.keys(groupedHeaders).some((el) => el.startsWith(HeaderGroup.NONE))*/ + !Object.keys(groupedHeaders).some(el => !el.startsWith(HeaderGroup.NONE)) ) { const headerCells = this.$mainRowHeader(groupedHeaders); const mainHeaderWrapper = this.$headerWrapper( From 112a024363656791915d023c9869d85f6c9603f6 Mon Sep 17 00:00:00 2001 From: Jonathan DURAND Date: Tue, 7 May 2024 10:15:03 +0200 Subject: [PATCH 2/3] Add filter and scrollYFitToScreen event after init complete; fix scrollYFitToScreen if you use dom config --- lib/core/LyxeaDatatable.ts | 76 ++++++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 23 deletions(-) diff --git a/lib/core/LyxeaDatatable.ts b/lib/core/LyxeaDatatable.ts index 42e3f14..643aaae 100644 --- a/lib/core/LyxeaDatatable.ts +++ b/lib/core/LyxeaDatatable.ts @@ -20,6 +20,7 @@ import Action, { ActionArgs } from '@plugins/action/Action'; import DtButtons from './DtButtons'; import Filters from './Filters'; import LxRenderer from '@dto/Renderer'; +import {default as jquery} from 'jquery'; //@ts-ignore window.JSZip = jszip; @@ -177,7 +178,7 @@ class LyxeaDatatable If columns in the standard object and in lxconfig, header generation is only based on lxconfig. This allows you to generate the header with all the columns (and not just the columns defined in lxconfig). */ - if (lxConfig.headers && standardColumns) { + if (lxConfig.headers && standardColumns && standardColumns.length) { lxConfig.headers?.unshift({ columns: [...standardColumns] }); } new LxRenderer(lxConfig); @@ -253,9 +254,32 @@ class LyxeaDatatable this.#dtButtons.parse(this.config.buttons); - if (lxConfig && lxConfig.scrollYFitToScreen) - this.scrollYFitToScreen(this.config); + jquery(`${this._ref}`) + .on('init.dt', (e, settings) => { + if ( e.namespace !== 'dt' ) { + return; + } + const dtInstance = settings.oInstance.api(); + /** + * Adding filter inputs + */ + if (lxConfig && lxConfig.filters) { + // @ts-ignore + this.#headerElement = new Filters(this.config, dtInstance).init( + this.#headerElement + ); + } + + /** + * Fit scrollY to screen + */ + if (lxConfig && lxConfig.scrollYFitToScreen){ + this.scrollYFitToScreen(); + // Force redraw (FitToScreen has an effect on the draw event) + dtInstance.draw(); + } + }) /** * Initializing datatable * Init event, get the datable instance on event.detail @@ -263,15 +287,6 @@ class LyxeaDatatable this.instance = new DataTable(`${this._ref}`, this.config); this.refElement.dispatchEvent(this.initEvent(this.instance)); - /** - * Adding filter inputs - */ - if (lxConfig && lxConfig.filters) { - this.#headerElement = new Filters(this.config, this.instance).init( - this.#headerElement - ); - } - /** * Handle issue with bootstrap tab nav */ @@ -283,24 +298,37 @@ class LyxeaDatatable __filterDataWithKey() {} - scrollYFitToScreen(config: CustomDatatableConfig) { + scrollYFitToScreen() { const self = this; - // @ts-ignore - config.drawCallback = function () { + jquery(`${this._ref}`) + .on('draw.dt', (e, _) => { + if ( e.namespace !== 'dt' ) { + return; + } const tabPosition = document.querySelector( `${self._ref}_wrapper` ) as HTMLElement; if (tabPosition) { const tabTop = tabPosition.getBoundingClientRect().top; const dtScrollHeadHeight = ( - document.querySelector( + (document.querySelector( `${self._ref}_wrapper .dt-scroll-head` - ) as HTMLElement + ) as HTMLElement) || { offsetHeight: 0 } + ).offsetHeight; + const dtTop = ( + (document.querySelector( + `${self._ref}_wrapper .top` + ) as HTMLElement) || { offsetHeight: 0 } + ).offsetHeight; + const dtBottom = ( + (document.querySelector( + `${self._ref}_wrapper .bottom` + ) as HTMLElement) || { offsetHeight: 0 } ).offsetHeight; const dtScrollFootHeight = ( - document.querySelector( + (document.querySelector( `${self._ref}_wrapper .dt-scroll-foot` - ) as HTMLElement + ) as HTMLElement) || { offsetHeight: 0 } ).offsetHeight; const dtLayoutRows = document.querySelectorAll( `${self._ref}_wrapper .dt-layout-row:not(.dt-layout-table)` @@ -312,9 +340,11 @@ class LyxeaDatatable const myHeight = window.innerHeight - // La taille de la fenêtre complete tabTop - // L'ordonnée du haut du tableau - dtScrollHeadHeight - // La taille du header - dtScrollFootHeight - // La taille du footer - dtLayoutRowsHeight - // La taille de toutes les rows + dtTop - // La taille du top (lorsqu'on utilise `dom`) + dtBottom - // La taille du bottom (lorsqu'on utilise `dom`) + dtScrollHeadHeight - // La taille du header (lorsqu'on utilise `layout`) + dtScrollFootHeight - // La taille du footer (lorsqu'on utilise `layout`) + dtLayoutRowsHeight - // La taille de toutes les rows (lorsqu'on utilise `layout`) 10; // valeur statique pour assurer une marge const dtScrollBody = document.querySelector( `${self._ref}_wrapper .dt-scroll-body` @@ -324,7 +354,7 @@ class LyxeaDatatable dtScrollBody.style.height = myHeight + 'px'; } } - }; + }); } handleBootrapTabChange(instance: DataTable) { From 1c0afd7984b4e11cd5a306c68a3ef9ba224c7ef8 Mon Sep 17 00:00:00 2001 From: Jonathan DURAND Date: Tue, 7 May 2024 10:29:09 +0200 Subject: [PATCH 3/3] prettier --- lib/core/LyxeaDatatable.ts | 55 ++++++++++++++++++-------------------- lib/dom/HeadersLxDom.ts | 4 ++- 2 files changed, 29 insertions(+), 30 deletions(-) diff --git a/lib/core/LyxeaDatatable.ts b/lib/core/LyxeaDatatable.ts index 643aaae..d8f4a2a 100644 --- a/lib/core/LyxeaDatatable.ts +++ b/lib/core/LyxeaDatatable.ts @@ -20,7 +20,7 @@ import Action, { ActionArgs } from '@plugins/action/Action'; import DtButtons from './DtButtons'; import Filters from './Filters'; import LxRenderer from '@dto/Renderer'; -import {default as jquery} from 'jquery'; +import { default as jquery } from 'jquery'; //@ts-ignore window.JSZip = jszip; @@ -254,32 +254,30 @@ class LyxeaDatatable this.#dtButtons.parse(this.config.buttons); - jquery(`${this._ref}`) - .on('init.dt', (e, settings) => { - if ( e.namespace !== 'dt' ) { - return; - } - const dtInstance = settings.oInstance.api(); - /** - * Adding filter inputs - */ - if (lxConfig && lxConfig.filters) { - // @ts-ignore - this.#headerElement = new Filters(this.config, dtInstance).init( - this.#headerElement - ); - } - - /** - * Fit scrollY to screen - */ - if (lxConfig && lxConfig.scrollYFitToScreen){ - this.scrollYFitToScreen(); - // Force redraw (FitToScreen has an effect on the draw event) - dtInstance.draw(); - } + jquery(`${this._ref}`).on('init.dt', (e, settings) => { + if (e.namespace !== 'dt') { + return; + } + const dtInstance = settings.oInstance.api(); + /** + * Adding filter inputs + */ + if (lxConfig && lxConfig.filters) { + // @ts-ignore + this.#headerElement = new Filters(this.config, dtInstance).init( + this.#headerElement + ); + } - }) + /** + * Fit scrollY to screen + */ + if (lxConfig && lxConfig.scrollYFitToScreen) { + this.scrollYFitToScreen(); + // Force redraw (FitToScreen has an effect on the draw event) + dtInstance.draw(); + } + }); /** * Initializing datatable * Init event, get the datable instance on event.detail @@ -300,9 +298,8 @@ class LyxeaDatatable scrollYFitToScreen() { const self = this; - jquery(`${this._ref}`) - .on('draw.dt', (e, _) => { - if ( e.namespace !== 'dt' ) { + jquery(`${this._ref}`).on('draw.dt', (e, _) => { + if (e.namespace !== 'dt') { return; } const tabPosition = document.querySelector( diff --git a/lib/dom/HeadersLxDom.ts b/lib/dom/HeadersLxDom.ts index a02aad4..9388db3 100644 --- a/lib/dom/HeadersLxDom.ts +++ b/lib/dom/HeadersLxDom.ts @@ -59,7 +59,9 @@ class HeaderLxDom extends AbstractLxDom { if ( /*Object.keys(groupedHeaders).length === 1 || Object.keys(groupedHeaders).some((el) => el.startsWith(HeaderGroup.NONE))*/ - !Object.keys(groupedHeaders).some(el => !el.startsWith(HeaderGroup.NONE)) + !Object.keys(groupedHeaders).some( + (el) => !el.startsWith(HeaderGroup.NONE) + ) ) { const headerCells = this.$mainRowHeader(groupedHeaders); const mainHeaderWrapper = this.$headerWrapper(