Skip to content

Commit b3156c1

Browse files
committed
Start working on support for date range filter and some filters fixes
1 parent d7053c0 commit b3156c1

File tree

12 files changed

+66
-48
lines changed

12 files changed

+66
-48
lines changed

src/lib/Filter.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ export class BooleanFilter extends Filter<FilterOptions> {
3636
}
3737

3838
/** */
39-
export class DateFilter extends Filter<FilterOptions> {
40-
public readonly componentName: FilterTheme = 'date';
39+
export class DateRangeFilter extends Filter<FilterOptions> {
40+
public readonly componentName: FilterTheme = 'date_range';
4141
}
4242

4343
/** */

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import type { BaseField, FieldOptions } from '$lib/Fields';
88
import type { CrudDefinition } from '$lib/Crud';
99
10-
import { List } from '$lib/Crud/Operations';
10+
import { type CrudOperation, List } from '$lib/Crud/Operations';
1111
1212
import type { Action } from '$lib/Actions';
1313
@@ -76,7 +76,9 @@
7676
]).then((results) => results[0]);
7777
}
7878
79-
rows = providerResponse.then((responseResults) => {
79+
type Item = {id?: null|string|number, __crud_operation?: CrudOperation, [key: string]: unknown};
80+
81+
rows = providerResponse.then((responseResults): Item[] => {
8082
if (
8183
responseResults &&
8284
!Array.isArray(responseResults) &&
@@ -87,10 +89,10 @@
8789
);
8890
}
8991
90-
let finalRows =
91-
responseResults instanceof PaginatedResults
92+
let finalRows: Array<Item> =
93+
(responseResults instanceof PaginatedResults
9294
? responseResults.currentItems
93-
: responseResults;
95+
: responseResults) as Array<Item>;
9496
9597
paginator = responseResults instanceof PaginatedResults ? responseResults : undefined;
9698
@@ -100,9 +102,9 @@
100102
101103
// Make sure final results always have the "id" field,
102104
// which is mandatory for Carbon's DataTable.
103-
finalRows = finalRows.map((result: object) => {
105+
finalRows = finalRows.map((result: Item) => {
104106
if (!result.id && crud.options.identifierFieldName !== 'id') {
105-
result.id = result[crud.options.identifierFieldName];
107+
result.id = String(result[crud.options.identifierFieldName] || '');
106108
}
107109
108110
result.__crud_operation = operation;
@@ -162,6 +164,7 @@
162164
{onSort}
163165
sortable={sortableDataTable}
164166
filters={configuredFilters}
167+
filtersValues={requestParameters.filters}
165168
theme={dashboard.theme}
166169
on:submitFilters={onFiltersSubmit}
167170
>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
export let globalActions: Array<Action> = [];
3030
export let batchActions: Action[] = [];
3131
export let filters: Array<FilterInterface<FilterOptions>> = [];
32+
export let filtersValues: {[key: string]: string|Array<string>|undefined} = {};
3233
export let page: number | undefined;
3334
export let theme: ThemeConfig;
3435
export let sortable: boolean;
@@ -154,6 +155,7 @@
154155
{theme}
155156
actions={globalActionsDisplay || []}
156157
filters={filters || []}
158+
filtersValues={filtersValues || {}}
157159
on:submitFilters={onFiltersSubmit}
158160
/>
159161
{/if}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,18 @@
1919
2020
export let actions: Array<Action> = [];
2121
export let filters: Array<Filter<FilterOptions>> = [];
22+
export let filtersValues: {[key: string]: string|Array<string>|undefined} = {};
2223
export let theme: ThemeConfig;
2324
24-
let filtersValues: Record<string, unknown> = {};
25-
const dispatchEvent = createEventDispatcher<{ submitFilters: SubmitEvent }>();
25+
const dispatchEvent = createEventDispatcher<{ submitFilters: SubmittedData }>();
2626
2727
filters.forEach((filter: Filter<FilterOptions>) => {
28-
filtersValues[filter.field] = undefined;
28+
filtersValues[filter.field] ??= undefined;
2929
});
3030
3131
function onFiltersSubmit(event: SubmitEvent) {
3232
event.preventDefault();
33+
event.stopPropagation();
3334
if (!event.target) {
3435
throw new Error(
3536
'No target when submitted filters. Did you forget to attach the event to a Form?'
@@ -42,6 +43,7 @@
4243
delete data[key];
4344
}
4445
});
46+
console.info('submitted filters', data);
4547
dispatchEvent('submitFilters', data);
4648
}
4749
@@ -65,16 +67,16 @@
6567
{/if}
6668

6769
{#if filters.length}
68-
<Accordion>
70+
<Accordion open={Object.keys(filtersValues).length > 0}>
6971
<AccordionItem>
7072
<slot slot="title">
7173
<FilterIcon />
7274
{$_('datatable.filters.menu_title')}
7375
</slot>
74-
<Form action="#!" on:submit={onFiltersSubmit}>
76+
<Form on:submit={onFiltersSubmit}>
7577
{#each filters as filter}
7678
<br />
77-
<FilterComponent {filter} {theme} bind:value={filtersValues[filter.field]} />
79+
<FilterComponent {filter} {theme} value={filtersValues[filter.field]} />
7880
{/each}
7981
<br />
8082
<Button type="submit" kind="secondary" size="field">

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
55
export let filter: FilterInterface<FilterOptions>;
66
export let theme: ThemeConfig;
7+
export let value: undefined|string|Array<string>;
78
89
const component = theme.filters[filter.componentName];
910
</script>
1011

11-
<svelte:component this={component} {filter} />
12+
<svelte:component this={component} {filter} {value} />

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

Lines changed: 0 additions & 23 deletions
This file was deleted.
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { _ } from 'svelte-i18n';
3+
import DatePickerInput from 'carbon-components-svelte/src/DatePicker/DatePickerInput.svelte';
4+
import DatePicker from 'carbon-components-svelte/src/DatePicker/DatePicker.svelte';
5+
6+
import type { DateRangeFilter } from '$lib/Filter';
7+
import FilterContainer from '$lib/themes/svelte/carbon/FilterComponents/Internal/FilterContainer.svelte';
8+
9+
export let filter: DateRangeFilter;
10+
export let value: undefined|string|Array<string>;
11+
12+
let from: string = '' ;
13+
let to: string = '' ;
14+
15+
// Extracted from Carbon's DatePicker types
16+
type ChangeEvent = string | {
17+
selectedDates: [dateFrom: Date, dateTo?: Date | undefined];
18+
dateStr: string | { from: string; to: string; };
19+
};
20+
</script>
21+
22+
<FilterContainer {filter}>
23+
<DatePicker datePickerType="range" bind:valueFrom={from} bind:valueTo={to}>
24+
<DatePickerInput labelText={$_('filters.date.from')} name={filter.field + '[0]'} value={from || ''} />
25+
<DatePickerInput labelText={$_('filters.date.to')} name={filter.field + '[1]'} value={to || ''} />
26+
</DatePicker>
27+
</FilterContainer>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import EmailViewField from './ViewFieldsComponents/EmailField.svelte';
5151
import ViewLabel from './ViewFieldsComponents/ViewLabel.svelte';
5252

5353
import BooleanFilter from './FilterComponents/BooleanFilter.svelte';
54-
import DateFilter from './FilterComponents/DateFilter.svelte';
54+
import DateRangeFilter from './FilterComponents/DateRangeFilter.svelte';
5555
import NumericFilter from './FilterComponents/NumericFilter.svelte';
5656
import TextFilter from './FilterComponents/TextFilter.svelte';
5757

@@ -106,7 +106,7 @@ const theme: ThemeConfig = {
106106
},
107107
filters: {
108108
boolean: BooleanFilter,
109-
date: DateFilter,
109+
date_range: DateRangeFilter,
110110
numeric: NumericFilter,
111111
text: TextFilter
112112
},

src/lib/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export type ThemeConfig = {
6464
filters: {
6565
boolean: ComponentType;
6666
text: ComponentType;
67-
date: ComponentType;
67+
date_range: ComponentType;
6868
numeric: ComponentType;
6969
[key: string]: ComponentType;
7070
};

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

Whitespace-only changes.

0 commit comments

Comments
 (0)