Start working on support for date range filter and some filters fixes

Author: Pierstoval

src/lib/Filter.ts

@@ -36,8 +36,8 @@ export class BooleanFilter extends Filter<FilterOptions> {
 }
 
 /** */
-export class DateFilter extends Filter<FilterOptions> {
-	public readonly componentName: FilterTheme = 'date';
+export class DateRangeFilter extends Filter<FilterOptions> {
+	public readonly componentName: FilterTheme = 'date_range';
 }
 
 /** */

src/lib/themes/svelte/carbon/Crud/CrudList.svelte

@@ -7,7 +7,7 @@
 	import type { BaseField, FieldOptions } from '$lib/Fields';
 	import type { CrudDefinition } from '$lib/Crud';
 
-	import { List } from '$lib/Crud/Operations';
+	import { type CrudOperation, List } from '$lib/Crud/Operations';
 
 	import type { Action } from '$lib/Actions';
 
@@ -76,7 +76,9 @@
 			]).then((results) => results[0]);
 		}
 
-		rows = providerResponse.then((responseResults) => {
+		type Item = {id?: null|string|number, __crud_operation?: CrudOperation, [key: string]: unknown};
+
+		rows = providerResponse.then((responseResults): Item[] => {
 			if (
 				responseResults &&
 				!Array.isArray(responseResults) &&
@@ -87,10 +89,10 @@
 				);
 			}
 
-			let finalRows =
-				responseResults instanceof PaginatedResults
+			let finalRows: Array<Item> =
+				(responseResults instanceof PaginatedResults
 					? responseResults.currentItems
-					: responseResults;
+					: responseResults) as Array<Item>;
 
 			paginator = responseResults instanceof PaginatedResults ? responseResults : undefined;
 
@@ -100,9 +102,9 @@
 
 			// Make sure final results always have the "id" field,
 			// which is mandatory for Carbon's DataTable.
-			finalRows = finalRows.map((result: object) => {
+			finalRows = finalRows.map((result: Item) => {
 				if (!result.id && crud.options.identifierFieldName !== 'id') {
-					result.id = result[crud.options.identifierFieldName];
+					result.id = String(result[crud.options.identifierFieldName] || '');
 				}
 
 				result.__crud_operation = operation;
@@ -162,6 +164,7 @@
 	{onSort}
 	sortable={sortableDataTable}
 	filters={configuredFilters}
+	filtersValues={requestParameters.filters}
 	theme={dashboard.theme}
 	on:submitFilters={onFiltersSubmit}
 >

src/lib/themes/svelte/carbon/DataTable/DataTable.svelte

@@ -29,6 +29,7 @@
 	export let globalActions: Array<Action> = [];
 	export let batchActions: Action[] = [];
 	export let filters: Array<FilterInterface<FilterOptions>> = [];
+	export let filtersValues: {[key: string]: string|Array<string>|undefined} = {};
 	export let page: number | undefined;
 	export let theme: ThemeConfig;
 	export let sortable: boolean;
@@ -154,6 +155,7 @@
 				{theme}
 				actions={globalActionsDisplay || []}
 				filters={filters || []}
+				filtersValues={filtersValues || {}}
 				on:submitFilters={onFiltersSubmit}
 			/>
 		{/if}

src/lib/themes/svelte/carbon/DataTable/Toolbar/DataTableToolbar.svelte

@@ -19,17 +19,18 @@
 
 	export let actions: Array<Action> = [];
 	export let filters: Array<Filter<FilterOptions>> = [];
+	export let filtersValues: {[key: string]: string|Array<string>|undefined} = {};
 	export let theme: ThemeConfig;
 
-	let filtersValues: Record<string, unknown> = {};
-	const dispatchEvent = createEventDispatcher<{ submitFilters: SubmitEvent }>();
+	const dispatchEvent = createEventDispatcher<{ submitFilters: SubmittedData }>();
 
 	filters.forEach((filter: Filter<FilterOptions>) => {
-		filtersValues[filter.field] = undefined;
+		filtersValues[filter.field] ??= undefined;
 	});
 
 	function onFiltersSubmit(event: SubmitEvent) {
 		event.preventDefault();
+		event.stopPropagation();
 		if (!event.target) {
 			throw new Error(
 				'No target when submitted filters. Did you forget to attach the event to a Form?'
@@ -42,6 +43,7 @@
 				delete data[key];
 			}
 		});
+		console.info('submitted filters', data);
 		dispatchEvent('submitFilters', data);
 	}
 
@@ -65,16 +67,16 @@
 {/if}
 
 {#if filters.length}
-	<Accordion>
+	<Accordion open={Object.keys(filtersValues).length > 0}>
 		<AccordionItem>
 			<slot slot="title">
 				<FilterIcon />
 				{$_('datatable.filters.menu_title')}
 			</slot>
-			<Form action="#!" on:submit={onFiltersSubmit}>
+			<Form on:submit={onFiltersSubmit}>
 				{#each filters as filter}
 					<br />
-					<FilterComponent {filter} {theme} bind:value={filtersValues[filter.field]} />
+					<FilterComponent {filter} {theme} value={filtersValues[filter.field]} />
 				{/each}
 				<br />
 				<Button type="submit" kind="secondary" size="field">

src/lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarFilter.svelte

@@ -4,8 +4,9 @@
 
 	export let filter: FilterInterface<FilterOptions>;
 	export let theme: ThemeConfig;
+	export let value: undefined|string|Array<string>;
 
 	const component = theme.filters[filter.componentName];
 </script>
 
-<svelte:component this={component} {filter} />
+<svelte:component this={component} {filter} {value} />

src/lib/themes/svelte/carbon/FilterComponents/DateFilter.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import DatePickerInput from 'carbon-components-svelte/src/DatePicker/DatePickerInput.svelte';
+	import DatePicker from 'carbon-components-svelte/src/DatePicker/DatePicker.svelte';
+
+	import type { DateRangeFilter } from '$lib/Filter';
+	import FilterContainer from '$lib/themes/svelte/carbon/FilterComponents/Internal/FilterContainer.svelte';
+
+	export let filter: DateRangeFilter;
+	export let value: undefined|string|Array<string>;
+
+	let from: string = ''  ;
+	let to: string = ''  ;
+
+	// Extracted from Carbon's DatePicker types
+	type ChangeEvent = string | {
+		selectedDates: [dateFrom: Date, dateTo?: Date | undefined];
+		dateStr: string | { from: string; to: string; };
+	};
+</script>
+
+<FilterContainer {filter}>
+	<DatePicker datePickerType="range" bind:valueFrom={from} bind:valueTo={to}>
+		<DatePickerInput labelText={$_('filters.date.from')} name={filter.field + '[0]'} value={from || ''} />
+		<DatePickerInput labelText={$_('filters.date.to')} name={filter.field + '[1]'} value={to || ''} />
+	</DatePicker>
+</FilterContainer>

src/lib/themes/svelte/carbon/FilterComponents/DateRangeFilter.svelte

@@ -51,7 +51,7 @@ import EmailViewField from './ViewFieldsComponents/EmailField.svelte';
 import ViewLabel from './ViewFieldsComponents/ViewLabel.svelte';
 
 import BooleanFilter from './FilterComponents/BooleanFilter.svelte';
-import DateFilter from './FilterComponents/DateFilter.svelte';
+import DateRangeFilter from './FilterComponents/DateRangeFilter.svelte';
 import NumericFilter from './FilterComponents/NumericFilter.svelte';
 import TextFilter from './FilterComponents/TextFilter.svelte';
 
@@ -106,7 +106,7 @@ const theme: ThemeConfig = {
 	},
 	filters: {
 		boolean: BooleanFilter,
-		date: DateFilter,
+		date_range: DateRangeFilter,
 		numeric: NumericFilter,
 		text: TextFilter
 	},

src/lib/themes/svelte/carbon/index.ts

@@ -64,7 +64,7 @@ export type ThemeConfig = {
 	filters: {
 		boolean: ComponentType;
 		text: ComponentType;
-		date: ComponentType;
+		date_range: ComponentType;
 		numeric: ComponentType;
 		[key: string]: ComponentType;
 	};

src/lib/types.ts

@@ -4,6 +4,8 @@ import {
 	CallbackStateProcessor,
 	CallbackStateProvider,
 	CrudDefinition,
+	DateField,
+	DateRangeFilter,
 	Delete,
 	Edit,
 	List,
@@ -12,10 +14,9 @@ import {
 	TextareaField,
 	TextField,
 	TextFilter,
-	UrlAction,
-	View,
 	type RequestParameters,
-	DateField
+	UrlAction,
+	View
 } from '$lib';
 
 import { faker } from '@faker-js/faker';
@@ -76,7 +77,8 @@ export const bookCrud = new CrudDefinition<Book>({
 				},
 				filters: [
 					new TextFilter('title', 'Title contains'),
-					new TextFilter('description', 'Description contains')
+					new TextFilter('description', 'Description contains'),
+					new DateRangeFilter('publishedAt', 'Publication between')
 				]
 			}
 		),
@@ -143,6 +145,10 @@ export const bookCrud = new CrudDefinition<Book>({
 					) {
 						return false;
 					}
+					if (filters.publishedAt) {
+						console.info('PUBLISHED AT', filters, filters.publishedAt);
+						return true;
+					}
 
 					return true;
 				});

src/routes/admin/test/+page.svelte

@@ -13,7 +13,7 @@ import {
 	Columns,
 	CrudDefinition,
 	DateField,
-	DateFilter,
+	DateRangeFilter,
 	Delete,
 	Edit,
 	ExistsFilter,
@@ -149,7 +149,7 @@ export const testCrud = new CrudDefinition<Test>({
 				filters: [
 					new TextFilter('text_field', 'Filter text'),
 					new BooleanFilter('checkbox_field', 'Filter checkbox'),
-					new DateFilter('date_field', 'Filter date'),
+					new DateRangeFilter('date_field', 'Filter date'),
 					new ExistsFilter('toggle_field', 'Filter toggle'),
 					new NumericFilter('number_field', 'Filter number')
 				],