feat(DataGrid): Add button in the side panel to reset all filters

packages/DataGrid/DataGrid.ts

@@ -586,7 +586,7 @@ export class DataGrid<TData, TDetailsElement extends Element | undefined = undef
 		`
 	}
 
-	private get sidePanelTemplate() {
+	protected get sidePanelTemplate() {
 		return html`
 			<mo-data-grid-side-panel
 				.dataGrid=${this as any}

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,8 +21,20 @@ type Result<TData> = PaginatedResult<TData> | NonPaginatedResult<TData>
 Localizer.dictionaries.add('de', {
 	'Make a filter selection': 'Filterauswahl vornehmen',
 	'Refetch': 'Neu laden',
+	'Reset all filters': 'Alle Filter zurücksetzen',
 })
 
+const deepCloneKeepingClasses = <T = {}>(origin: T) => {
+	const clonedObject = structuredClone(origin)
+	for (const keyName in origin) {
+		const value = origin[keyName]
+		if (value instanceof DateTimeRange) {
+			clonedObject[keyName] = new DateTimeRange(value.start, value.end) as T[Extract<keyof T, string>]
+		}
+	}
+	return clonedObject
+}
+
 /**
  * @element mo-fetchable-data-grid
  *
@@ -67,6 +79,8 @@ export class FetchableDataGrid<TData, TDataFetcherParameters extends FetchableDa
 	@property({ type: Object }) sortParameters?: () => Partial<TDataFetcherParameters>
 	// protected filterParameters?: () => TDataFetcherParameters
 
+	initialParameters!: TDataFetcherParameters
+
 	protected readonly parametersBinder = new Binder<TDataFetcherParameters>(this, 'parameters')
 
 	protected fetchDirty?(parameters: TDataFetcherParameters): Array<TData> | undefined
@@ -77,7 +91,9 @@ export class FetchableDataGrid<TData, TDataFetcherParameters extends FetchableDa
 			if (!this.parameters) {
 				return undefined
 			}
-
+			if (!this.initialParameters) {
+				this.initialParameters = deepCloneKeepingClasses(this.parameters)
+			}
 			const paginationParameters = this.paginationParameters?.({ page: this.page, pageSize: this.pageSize }) ?? {}
 			const sortParameters = this.sortParameters?.() ?? {}
 			const data = await this.fetch({
@@ -299,6 +315,41 @@ export class FetchableDataGrid<TData, TDataFetcherParameters extends FetchableDa
 			</slot>
 		`
 	}
+
+	protected override get sidePanelTemplate() {
+		return html`
+			<mo-data-grid-side-panel
+				.dataGrid=${this as any}
+				tab=${ifDefined(this.sidePanelTab)}
+			>
+				<slot slot='settings' name='settings'>${this.settingsDefaultTemplate}</slot>
+				<slot slot='filter' name='filter'>
+					${this.filtersDefaultTemplate}
+
+					${[html.nothing, undefined].includes(this.filtersDefaultTemplate) || !this.hasFilters ? html.nothing : html`
+						<mo-button type='raised'
+							?disabled=${!this.hasParametersChanged}
+							@click=${() => this.restoreDefaultParameters()}
+						>
+							${t('Reset all filters')}
+						</mo-button>
+					`}
+				</slot>
+			</mo-data-grid-side-panel>
+		`
+	}
+
+	private get hasParametersChanged() {
+		return Object.entries(this.parameters ?? {})
+			.filter(([_, value]) => value !== undefined
+				&& value !== ''
+				&& (!(value instanceof Array) || value.length > 0))
+			.some(([key, value]) => JSON.stringify(this.initialParameters[key]) !== JSON.stringify(value))
+	}
+
+	private restoreDefaultParameters = () => {
+		this.parameters = deepCloneKeepingClasses(this.initialParameters)
+	}
 }
 
 declare global {