Implement raw date filter

Author: Pierstoval

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/themes/svelte/carbon/DataTable/Toolbar/DataTableToolbar.svelte

@@ -43,7 +43,6 @@
 				delete data[key];
 			}
 		});
-		console.info('submitted filters', data);
 		dispatchEvent('submitFilters', data);
 	}
 
@@ -67,8 +66,8 @@
 {/if}
 
 {#if filters.length}
-	<Accordion open={Object.keys(filtersValues).length > 0}>
-		<AccordionItem>
+	<Accordion>
+		<AccordionItem open={Object.values(filtersValues).filter(i => !!i).length > 0}>
 			<slot slot="title">
 				<FilterIcon />
 				{$_('datatable.filters.menu_title')}

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/FilterComponents/DateRangeFilter.svelte

@@ -12,16 +12,19 @@
 	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; };
-	};
+	if (value && Array.isArray(value)) {
+		if (value[0]) {
+			from = value[0];
+		}
+		if (value[1]) {
+			to = value[1];
+		}
+	}
 </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 || ''} />
+		<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/testApp/BookCrud.ts

@@ -146,16 +146,19 @@ export const bookCrud = new CrudDefinition<Book>({
 						return false;
 					}
 					if (filters.publishedAt) {
-						console.info('PUBLISHED AT', filters, filters.publishedAt);
-						return true;
+						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:');