From c00ec28897b54be018be17982b620117fed52559 Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 17:04:13 +0300 Subject: [PATCH 01/10] feat(DataGrid): Make it possible to reset all filters by clicking button in the side panel --- packages/DataGrid/DataGridSidePanel.ts | 20 +++++++++++++++++++ packages/DataGrid/index.ts | 2 ++ packages/DataGrid/package.json | 2 ++ .../FetchableDataGrid/FetchableDataGrid.ts | 6 +++++- 4 files changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/DataGrid/DataGridSidePanel.ts b/packages/DataGrid/DataGridSidePanel.ts index 399e6170..9c3c5df7 100644 --- a/packages/DataGrid/DataGridSidePanel.ts +++ b/packages/DataGrid/DataGridSidePanel.ts @@ -3,6 +3,7 @@ import { Localizer } from '@3mo/localization' import { tooltip } from '@3mo/tooltip' import { type DataGridColumn } from './DataGridColumn.js' import { type DataGrid } from './DataGrid.js' +import { type FetchableDataGrid } from '@3mo/fetchable-data-grid' Localizer.dictionaries.add('de', { 'Settings': 'Einstellungen', @@ -11,6 +12,7 @@ Localizer.dictionaries.add('de', { 'Font Size': 'Schriftgröße', 'Row Height': 'Zeilenhöhe', 'Design': 'Design', + 'Reset all filters': 'Alle Filter zurücksetzen', }) export enum DataGridSidePanelTab { @@ -115,10 +117,28 @@ export class DataGridSidePanel extends Component { return html` + ${!this.dataGrid.hasFilters || !('parameters' in this.dataGrid) ? html.nothing : html` + this.resetAllParameters()} + > + ${t('Reset all filters')} + + `} ` } + private get areParametersDirty() { + const { parameters, initialParameters } = this.dataGrid as FetchableDataGrid + return JSON.stringify(parameters) === JSON.stringify(initialParameters) + } + + private resetAllParameters = () => { + (this.dataGrid as FetchableDataGrid).parameters = + (this.dataGrid as FetchableDataGrid).initialParameters + } + protected get settingsTemplate() { return html` diff --git a/packages/DataGrid/index.ts b/packages/DataGrid/index.ts index 18bcd407..0bb2c466 100644 --- a/packages/DataGrid/index.ts +++ b/packages/DataGrid/index.ts @@ -1,5 +1,7 @@ import 'requestidlecallback-polyfill' import '@3mo/flex' +import '@3mo/button' +import '@3mo/fetchable-data-grid' import '@3mo/grid' import '@a11d/key-path' import '@3mo/icon' diff --git a/packages/DataGrid/package.json b/packages/DataGrid/package.json index d1de7809..bb1316cd 100644 --- a/packages/DataGrid/package.json +++ b/packages/DataGrid/package.json @@ -28,6 +28,8 @@ "@a11d/lit-application": "x", "@a11d/equals": "x", "@3mo/flex": "x", + "@3mo/button": "x", + "@3mo/fetchable-data-grid": "x", "@3mo/grid": "x", "@a11d/key-path": "1.x", "@3mo/icon": "x", diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index 628b0498..3df99ffa 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -67,6 +67,8 @@ export class FetchableDataGrid Partial // protected filterParameters?: () => TDataFetcherParameters + initialParameters!: TDataFetcherParameters + protected readonly parametersBinder = new Binder(this, 'parameters') protected fetchDirty?(parameters: TDataFetcherParameters): Array | undefined @@ -77,7 +79,9 @@ export class FetchableDataGrid Date: Wed, 11 Sep 2024 17:21:24 +0300 Subject: [PATCH 02/10] fix: Update 3mo/data-grid in 3mo/fetchable-data-grid --- packages/FetchableDataGrid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/FetchableDataGrid/package.json b/packages/FetchableDataGrid/package.json index d8b45878..c3b3b5d2 100644 --- a/packages/FetchableDataGrid/package.json +++ b/packages/FetchableDataGrid/package.json @@ -30,7 +30,7 @@ "@3mo/icon-button": "x", "@3mo/circular-progress": "x", "@3mo/empty-state": "x", - "@3mo/data-grid": "x", + "@3mo/data-grid": "0.9.16-preview.0", "@3mo/fetcher-controller": "x", "@3mo/tooltip": "x" } From 5ef26f2162016fc4849481bc380f96654af80df5 Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 17:31:48 +0300 Subject: [PATCH 03/10] fix: Overwrite sidePanelTemplate into FetchableDataGrid --- package-lock.json | 38 +++++++++++++++++++ packages/DataGrid/DataGridSidePanel.ts | 20 ---------- .../FetchableDataGrid/FetchableDataGrid.ts | 34 ++++++++++++++++- packages/FetchableDataGrid/package.json | 2 +- 4 files changed, 72 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index caf25f80..69c6259d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13684,6 +13684,44 @@ "tslib": "x" } }, + "packages/FetchableDataGrid/node_modules/@3mo/data-grid": { + "version": "0.9.15", + "resolved": "https://registry.npmjs.org/@3mo/data-grid/-/data-grid-0.9.15.tgz", + "integrity": "sha512-BS/bYKAJX1FGZvuxTFRFGwl/eFJKA0cTz5yEGXf9JAT1cZX/hI+1peuzGKBepI4LC2GZPnvPD7jFzgm0fS69Kw==", + "dependencies": { + "@3mo/checkbox": "x", + "@3mo/context-menu": "x", + "@3mo/date-time-fields": "x", + "@3mo/downloader": "x", + "@3mo/empty-state": "x", + "@3mo/flex": "x", + "@3mo/focus-ring": "x", + "@3mo/grid": "x", + "@3mo/icon": "x", + "@3mo/icon-button": "x", + "@3mo/instanceof-attribute-controller": "x", + "@3mo/keyboard-controller": "x", + "@3mo/line": "x", + "@3mo/localization": "x", + "@3mo/media-query-observer": "x", + "@3mo/mutation-observer": "x", + "@3mo/number-fields": "x", + "@3mo/resize-observer": "x", + "@3mo/section": "x", + "@3mo/select-field": "x", + "@3mo/slot-controller": "x", + "@3mo/splitter": "x", + "@3mo/tab": "x", + "@3mo/text-fields": "x", + "@3mo/theme": "x", + "@3mo/tooltip": "x", + "@a11d/key-path": "1.x", + "@a11d/lit": "x", + "@a11d/lit-application": "x", + "requestidlecallback-polyfill": "x", + "tslib": "x" + } + }, "packages/FetchableDialog": { "name": "@3mo/fetchable-dialog", "version": "0.1.3", diff --git a/packages/DataGrid/DataGridSidePanel.ts b/packages/DataGrid/DataGridSidePanel.ts index 9c3c5df7..399e6170 100644 --- a/packages/DataGrid/DataGridSidePanel.ts +++ b/packages/DataGrid/DataGridSidePanel.ts @@ -3,7 +3,6 @@ import { Localizer } from '@3mo/localization' import { tooltip } from '@3mo/tooltip' import { type DataGridColumn } from './DataGridColumn.js' import { type DataGrid } from './DataGrid.js' -import { type FetchableDataGrid } from '@3mo/fetchable-data-grid' Localizer.dictionaries.add('de', { 'Settings': 'Einstellungen', @@ -12,7 +11,6 @@ Localizer.dictionaries.add('de', { 'Font Size': 'Schriftgröße', 'Row Height': 'Zeilenhöhe', 'Design': 'Design', - 'Reset all filters': 'Alle Filter zurücksetzen', }) export enum DataGridSidePanelTab { @@ -117,28 +115,10 @@ export class DataGridSidePanel extends Component { return html` - ${!this.dataGrid.hasFilters || !('parameters' in this.dataGrid) ? html.nothing : html` - this.resetAllParameters()} - > - ${t('Reset all filters')} - - `} ` } - private get areParametersDirty() { - const { parameters, initialParameters } = this.dataGrid as FetchableDataGrid - return JSON.stringify(parameters) === JSON.stringify(initialParameters) - } - - private resetAllParameters = () => { - (this.dataGrid as FetchableDataGrid).parameters = - (this.dataGrid as FetchableDataGrid).initialParameters - } - protected get settingsTemplate() { return html` diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index 3df99ffa..779466b1 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -1,4 +1,4 @@ -import { Binder, component, css, event, html, property } from '@a11d/lit' +import { Binder, component, css, event, html, ifDefined, property } from '@a11d/lit' import { tooltip } from '@3mo/tooltip' import { Localizer } from '@3mo/localization' import { FetcherController } from '@3mo/fetcher-controller' @@ -21,6 +21,7 @@ type Result = PaginatedResult | NonPaginatedResult Localizer.dictionaries.add('de', { 'Make a filter selection': 'Filterauswahl vornehmen', 'Refetch': 'Neu laden', + 'Reset all filters': 'Alle Filter zurücksetzen', }) /** @@ -303,6 +304,37 @@ export class FetchableDataGrid ` } + + protected override get sidePanelTemplate() { + return html` + + ${this.settingsDefaultTemplate} + + ${this.filtersDefaultTemplate} + + ${[html.nothing, undefined].includes(this.filtersDefaultTemplate) || !this.hasFilters ? html.nothing : html` + this.resetAllParameters()} + > + ${t('Reset all filters')} + + `} + + + ` + } + + private get areParametersDirty() { + return JSON.stringify(this.parameters) === JSON.stringify(this.initialParameters) + } + + private resetAllParameters = () => { + this.parameters = this.initialParameters + } } declare global { diff --git a/packages/FetchableDataGrid/package.json b/packages/FetchableDataGrid/package.json index c3b3b5d2..d8b45878 100644 --- a/packages/FetchableDataGrid/package.json +++ b/packages/FetchableDataGrid/package.json @@ -30,7 +30,7 @@ "@3mo/icon-button": "x", "@3mo/circular-progress": "x", "@3mo/empty-state": "x", - "@3mo/data-grid": "0.9.16-preview.0", + "@3mo/data-grid": "x", "@3mo/fetcher-controller": "x", "@3mo/tooltip": "x" } From 4e4683d67c8d87b8b9ec66bea8a7482c68c84f21 Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 17:32:27 +0300 Subject: [PATCH 04/10] fix: Revert DataGrid package changes --- packages/DataGrid/index.ts | 2 -- packages/DataGrid/package.json | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/DataGrid/index.ts b/packages/DataGrid/index.ts index 0bb2c466..18bcd407 100644 --- a/packages/DataGrid/index.ts +++ b/packages/DataGrid/index.ts @@ -1,7 +1,5 @@ import 'requestidlecallback-polyfill' import '@3mo/flex' -import '@3mo/button' -import '@3mo/fetchable-data-grid' import '@3mo/grid' import '@a11d/key-path' import '@3mo/icon' diff --git a/packages/DataGrid/package.json b/packages/DataGrid/package.json index bb1316cd..d1de7809 100644 --- a/packages/DataGrid/package.json +++ b/packages/DataGrid/package.json @@ -28,8 +28,6 @@ "@a11d/lit-application": "x", "@a11d/equals": "x", "@3mo/flex": "x", - "@3mo/button": "x", - "@3mo/fetchable-data-grid": "x", "@3mo/grid": "x", "@a11d/key-path": "1.x", "@3mo/icon": "x", From 1e5791e8ef79fb1fb4507d770954711e7debbf57 Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 17:37:21 +0300 Subject: [PATCH 05/10] fix: Add ts-ignore for sidePanelTemplate visibility --- packages/FetchableDataGrid/FetchableDataGrid.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index 779466b1..d48a23b1 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -39,6 +39,7 @@ Localizer.dictionaries.add('de', { * @fires dataFetch */ @component('mo-fetchable-data-grid') +// @ts-ignore `sidePanelTemplate` is private in `DataGrid` export class FetchableDataGrid, TDetailsElement extends Element | undefined = undefined> extends DataGrid { @event() readonly parametersChange!: EventDispatcher @event() readonly dataFetch!: EventDispatcher> @@ -305,7 +306,7 @@ export class FetchableDataGrid Date: Wed, 11 Sep 2024 18:04:23 +0300 Subject: [PATCH 06/10] fix: Fix cloning and restoring parameters --- .../FetchableDataGrid/FetchableDataGrid.ts | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index d48a23b1..ccc72afa 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -24,6 +24,17 @@ Localizer.dictionaries.add('de', { 'Reset all filters': 'Alle Filter zurücksetzen', }) +const deepCloneKeepingClasses = (origin: T) => { + const clonedObject = structuredClone(origin) + for (const keyName in origin) { + if (origin[keyName] instanceof DateTimeRange) { + const { start, end } = origin[keyName] + clonedObject[keyName] = new DateTimeRange(start, end) as T[Extract] + } + } + return clonedObject +} + /** * @element mo-fetchable-data-grid * @@ -82,7 +93,7 @@ export class FetchableDataGrid this.resetAllParameters()} + ?disabled=${this.hasParametersChanged} + @click=${() => this.restoreDefaultParameters()} > ${t('Reset all filters')} @@ -329,12 +340,12 @@ export class FetchableDataGrid { - this.parameters = this.initialParameters + private restoreDefaultParameters = () => { + this.parameters = deepCloneKeepingClasses(this.initialParameters) } } From d4797549895134fc133610c630079ae82ab1885e Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 18:09:12 +0300 Subject: [PATCH 07/10] fix: Button should be disabled if parameters has not changed --- packages/FetchableDataGrid/FetchableDataGrid.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index ccc72afa..c6d80225 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -329,7 +329,7 @@ export class FetchableDataGrid this.restoreDefaultParameters()} > ${t('Reset all filters')} From 18b885ccbdbdbf588c184f52a86616f9d7c677b8 Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 18:14:25 +0300 Subject: [PATCH 08/10] fix: Get rid of all empty parameters --- packages/FetchableDataGrid/FetchableDataGrid.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index c6d80225..c5b0085d 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -27,9 +27,12 @@ Localizer.dictionaries.add('de', { const deepCloneKeepingClasses = (origin: T) => { const clonedObject = structuredClone(origin) for (const keyName in origin) { - if (origin[keyName] instanceof DateTimeRange) { - const { start, end } = origin[keyName] - clonedObject[keyName] = new DateTimeRange(start, end) as T[Extract] + const value = origin[keyName] + if (value instanceof DateTimeRange) { + clonedObject[keyName] = new DateTimeRange(value.start, value.end) as T[Extract] + } + if (value === undefined || value === '' || (value instanceof Array && !value.length)) { + delete origin[keyName] } } return clonedObject From f231cc77843309c86ff882a073aab2ff54a1685f Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Wed, 11 Sep 2024 18:42:08 +0300 Subject: [PATCH 09/10] fix: Fix parameters comparing --- packages/FetchableDataGrid/FetchableDataGrid.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/FetchableDataGrid/FetchableDataGrid.ts b/packages/FetchableDataGrid/FetchableDataGrid.ts index c5b0085d..07acf736 100644 --- a/packages/FetchableDataGrid/FetchableDataGrid.ts +++ b/packages/FetchableDataGrid/FetchableDataGrid.ts @@ -31,9 +31,6 @@ const deepCloneKeepingClasses = (origin: T) => { if (value instanceof DateTimeRange) { clonedObject[keyName] = new DateTimeRange(value.start, value.end) as T[Extract] } - if (value === undefined || value === '' || (value instanceof Array && !value.length)) { - delete origin[keyName] - } } return clonedObject } @@ -344,7 +341,11 @@ export class FetchableDataGrid value !== undefined + && value !== '' + && (!(value instanceof Array) || value.length > 0)) + .some(([key, value]) => JSON.stringify(this.initialParameters[key]) !== JSON.stringify(value)) } private restoreDefaultParameters = () => { From ed54b75579fb5484e7a0ae58b2b62ac5b82b7757 Mon Sep 17 00:00:00 2001 From: Anton Vorobiov Date: Thu, 12 Sep 2024 12:59:37 +0300 Subject: [PATCH 10/10] fix: Use protected visibility for sidePanelTemplate --- packages/DataGrid/DataGrid.ts | 2 +- packages/FetchableDataGrid/FetchableDataGrid.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/DataGrid/DataGrid.ts b/packages/DataGrid/DataGrid.ts index 3122f717..4f47ba2b 100644 --- a/packages/DataGrid/DataGrid.ts +++ b/packages/DataGrid/DataGrid.ts @@ -586,7 +586,7 @@ export class DataGrid(origin: T) => { * @fires dataFetch */ @component('mo-fetchable-data-grid') -// @ts-ignore `sidePanelTemplate` is private in `DataGrid` export class FetchableDataGrid, TDetailsElement extends Element | undefined = undefined> extends DataGrid { @event() readonly parametersChange!: EventDispatcher @event() readonly dataFetch!: EventDispatcher> @@ -317,7 +316,7 @@ export class FetchableDataGrid