Filters date range

src/lib/Crud/Form.ts

@@ -1,6 +1,6 @@
 import type { CrudOperation, FieldInterface, FieldOptions } from '$lib';
 
-export type SubmittedData = Record<string, FormDataEntryValue>;
+export type SubmittedData = Record<string, FormDataEntryValue | Array<FormDataEntryValue>>;
 
 /**
  * Function to get an record of {@link FormDataEntryValue} items from an "onSubmit" form {@link SubmitEvent} object.
@@ -18,8 +18,15 @@ export function getSubmittedFormData(event: SubmitEvent): SubmittedData {
 		return {};
 	}
 
-	new FormData(target as HTMLFormElement, event.submitter).forEach((value, key) => {
-		normalizedData[key] = value;
+	const formData = new FormData(target as HTMLFormElement, event.submitter);
+
+	formData.forEach((value, key) => {
+		if (normalizedData[key] && !Array.isArray(normalizedData[key])) {
+			normalizedData[key] = [normalizedData[key]];
+			normalizedData[key].push(value);
+		} else {
+			normalizedData[key] = value;
+		}
 	});
 
 	return normalizedData;

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,13 @@
 			]).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 +93,9 @@
 				);
 			}
 
-			let finalRows =
-				responseResults instanceof PaginatedResults
-					? responseResults.currentItems
-					: responseResults;
+			let finalRows: Array<Item> = (
+				responseResults instanceof PaginatedResults ? responseResults.currentItems : responseResults
+			) as Array<Item>;
 
 			paginator = responseResults instanceof PaginatedResults ? responseResults : undefined;
 
@@ -100,9 +105,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 +167,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?'
@@ -66,15 +67,15 @@
 
 {#if filters.length}
 	<Accordion>
-		<AccordionItem>
+		<AccordionItem open={Object.values(filtersValues).filter((i) => !!i).length > 0}>
 			<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/ToolbarAction.svelte

@@ -8,8 +8,6 @@
 
 	export let action: Action;
 	export let action_arguments: Array<unknown> = [];
-
-	console.info('Action: ', action);
 </script>
 
 {#if action instanceof UrlAction}

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 → src/lib/themes/svelte/carbon/FilterComponents/DateRangeFilter.svelte

@@ -3,21 +3,28 @@
 	import DatePickerInput from 'carbon-components-svelte/src/DatePicker/DatePickerInput.svelte';
 	import DatePicker from 'carbon-components-svelte/src/DatePicker/DatePicker.svelte';
 
-	import type { DateFilter } from '$lib/Filter';
+	import type { DateRangeFilter } from '$lib/Filter';
 	import FilterContainer from '$lib/themes/svelte/carbon/FilterComponents/Internal/FilterContainer.svelte';
 
-	export let filter: DateFilter;
+	export let filter: DateRangeFilter;
+	export let value: undefined | string | Array<string>;
 
 	let from: string = '';
 	let to: string = '';
+
+	if (value && Array.isArray(value)) {
+		if (value[0]) {
+			from = value[0];
+		}
+		if (value[1]) {
+			to = value[1];
+		}
+	}
 </script>
 
 <FilterContainer {filter}>
-	<input type="hidden" name={filter.field + '[0]'} value={from} />
-	<input type="hidden" name={filter.field + '[1]'} value={to} />
-
 	<DatePicker datePickerType="range" bind:valueFrom={from} bind:valueTo={to}>
-		<DatePickerInput labelText={$_('filters.date.from')} placeholder="mm/dd/yyyy" />
-		<DatePickerInput labelText={$_('filters.date.to')} placeholder="mm/dd/yyyy" />
+		<DatePickerInput labelText={$_('filters.date.from')} name={filter.field} value={from || ''} />
+		<DatePickerInput labelText={$_('filters.date.to')} name={filter.field} value={to || ''} />
 	</DatePicker>
 </FilterContainer>

src/lib/themes/svelte/carbon/ViewFieldsComponents/ArrayField.test.ts

@@ -29,7 +29,6 @@ describe(
 			expect(label).toBeDefined();
 			expect(label?.innerHTML).toStrictEqual('Text field');
 			const valueElement = label?.parentElement?.nextElementSibling;
-			console.info('+=====================+');
 			expect(valueElement).toBeDefined();
 			expect(valueElement?.childNodes).toBeDefined();
 			expect(valueElement?.childNodes[0]).toBeInstanceOf(Text);

src/lib/themes/svelte/carbon/ViewFieldsComponents/CrudEntityField.svelte

@@ -16,23 +16,18 @@
 			(def: CrudDefinition<unknown>) => def.name === field.options.crud_name
 		)[0] ?? undefined;
 
-	console.info('CrudEntityField created with params: ', { field, operation, value });
-
 	async function fetchData() {
 		if (!crud) {
 			console.error('No CRUD to fetch data from.');
 			return;
 		}
 
-		console.info('Fetching...');
 		const fieldOperation = new SingleField(
 			field.options.get_provider_operation?.name ?? 'entity_view',
 			field.options.get_provider_operation?.options ?? {}
 		);
 		fieldOperation.crud = crud;
 		fieldOperation.dashboard = operation.dashboard;
-		console.info('Shallow field: ', fieldOperation);
-		console.info('value: ', value);
 
 		return crud.options.stateProvider.provide(fieldOperation, {
 			field_value: value

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

@@ -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/types.ts

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

src/testApp/BookCrud.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,13 +145,29 @@ export const bookCrud = new CrudDefinition<Book>({
 					) {
 						return false;
 					}
+					if (filters.publishedAt) {
+						const publishedAtFilter = filters.publishedAt as unknown as [
+							string | undefined,
+							string | undefined
+						];
+						if (
+							publishedAtFilter[0] &&
+							new Date(entity.publishedAt) < new Date(publishedAtFilter[0])
+						) {
+							return false;
+						}
+						if (
+							publishedAtFilter[1] &&
+							new Date(entity.publishedAt) > new Date(publishedAtFilter[1])
+						) {
+							return false;
+						}
+					}
 
 					return true;
 				});
 			}
 
-			console.info('Sort: ', requestParameters.sort);
-
 			if (requestParameters.sort) {
 				if (!requestParameters.sort?.title && !requestParameters.sort?.publishedAt) {
 					console.warn('Sorting not supported for these sort parameters:');

src/testApp/TestCrud.ts

@@ -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')
 				],