diff --git a/packages/documentation/pages/usage/components/filters.vue b/packages/documentation/pages/usage/components/filters.vue index 33b109fd56..9db4f54aa9 100644 --- a/packages/documentation/pages/usage/components/filters.vue +++ b/packages/documentation/pages/usage/components/filters.vue @@ -78,6 +78,29 @@ label="maximum" /> +
+ + +
+ import { Kotti, KtFilters } from '@3yourmind/kotti-ui' import { computed, defineComponent, ref } from '@vue/composition-api' +import dayjs from 'dayjs' import cloneDeep from 'lodash/cloneDeep' +import { ISO8601 } from '../../../../kotti-ui/source/constants' import { ComponentValue, generateComponentCode } from '../../utilities' import ComponentInfo from '~/components/ComponentInfo.vue' +const today = (): string => dayjs().format(ISO8601) +const getLast = (unit: 'day' | 'month' | 'week' | 'year') => + dayjs().subtract(1, unit).format(ISO8601) + +const shortcuts: Record< + string, + NonNullable[0] +> = { + today: { + label: 'Today', + value: [today(), today()], + }, + lastWeek: { + label: 'Last Week', + value: [getLast('week'), today()], + }, + lastMonth: { + label: 'Last Month', + value: [getLast('month'), today()], + }, + lastYear: { + label: 'Last Year', + value: [getLast('year'), today()], + }, +} + export default defineComponent({ name: 'DocumentationPageUsageComponentsFilters', components: { @@ -150,6 +201,9 @@ export default defineComponent({ isLoading: boolean } currencyCurrency: string + dateRangeMaximumDate: Kotti.FieldDateRange.Props['maximumDate'] + dateRangeMinimumDate: Kotti.FieldDateRange.Props['minimumDate'] + dateRangeShortcuts: Kotti.FieldDateRange.Props['shortcuts'] locale: Kotti.I18n.SupportedLanguages numberDecimalPlaces: Kotti.FieldNumber.Props['decimalPlaces'] | null numberMaximum: Kotti.FieldNumber.Props['maximum'] | null @@ -163,6 +217,9 @@ export default defineComponent({ isLoading: false, }, currencyCurrency: 'USD', + dateRangeMaximumDate: null, + dateRangeMinimumDate: null, + dateRangeShortcuts: [], locale: 'en-US', numberDecimalPlaces: null, numberMaximum: null, @@ -173,6 +230,12 @@ export default defineComponent({ searchPlaceholder: null, }) + const selectedShortcuts = ref( + Object.fromEntries( + Object.entries(shortcuts).map(([key]) => [key, false]), + ), + ) + const componentProps = computed( (): Omit => ({ columns: [ @@ -259,6 +322,9 @@ export default defineComponent({ Kotti.Filters.Operation.DateRange.IS_EMPTY, ], type: Kotti.Filters.FilterType.DATE_RANGE, + maximumDate: settings.value.dateRangeMaximumDate, + minimumDate: settings.value.dateRangeMinimumDate, + shortcuts: settings.value.dateRangeShortcuts, }, { key: 'singleEnumColumn', @@ -293,33 +359,46 @@ export default defineComponent({ }), ) - const componentCode = computed(() => { - const component: ComponentValue = { - contentSlot: null, - defaultSlot: null, - hasActions: false, - hasHelpTextSlot: false, - hasOptionSlot: false, - hasRemoteUpload: false, - headerSlot: null, - name: 'KtFilters', - props: cloneDeep(componentProps.value), - showHeaderSideSlot: false, - validation: 'empty', - } - return generateComponentCode(component) - }) - - const reset = () => (filters.value = []) - return { component: KtFilters, - componentCode, + componentCode: computed(() => { + const component: ComponentValue = { + contentSlot: null, + defaultSlot: null, + hasActions: false, + hasHelpTextSlot: false, + hasOptionSlot: false, + hasRemoteUpload: false, + headerSlot: null, + name: 'KtFilters', + props: cloneDeep(componentProps.value), + showHeaderSideSlot: false, + validation: 'empty', + } + return generateComponentCode(component) + }), componentProps, filters, Kotti, - reset, + onSelectedShortcutsChange: (value: Kotti.FieldToggleGroup.Value) => { + selectedShortcuts.value = value + settings.value = { + ...settings.value, + dateRangeShortcuts: Object.entries(selectedShortcuts.value ?? {}) + .filter(([_, value]) => value) + .map(([key]) => { + const { label, value } = shortcuts[key as keyof typeof shortcuts] + return { label, value } + }), + } + }, + reset: () => (filters.value = []), + selectedShortcuts, settings, + shortcutsOptions: Object.entries(shortcuts).map(([key, value]) => ({ + key, + label: value.label, + })), } }, }) diff --git a/packages/kotti-ui/source/constants.ts b/packages/kotti-ui/source/constants.ts index 77a48e246d..971d01e6ff 100644 --- a/packages/kotti-ui/source/constants.ts +++ b/packages/kotti-ui/source/constants.ts @@ -1,3 +1,4 @@ +export const ISO8601 = 'YYYY-MM-DD' as const export const ISO8601_SECONDS = 'YYYY-MM-DD HH:mm:ss' as const // eslint-disable-next-line no-magic-numbers diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue index 1eead18f03..c12aad9cf1 100644 --- a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue +++ b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue @@ -189,11 +189,19 @@ export default defineComponent({ props.column?.type === KottiFilters.FilterType.INTEGER ? props.column.maximum : undefined, + maximumDate: + props.column?.type === KottiFilters.FilterType.DATE_RANGE + ? props.column.maximumDate + : undefined, minimum: props.column?.type === KottiFilters.FilterType.FLOAT || props.column?.type === KottiFilters.FilterType.INTEGER ? props.column.minimum : undefined, + minimumDate: + props.column?.type === KottiFilters.FilterType.DATE_RANGE + ? props.column.minimumDate + : undefined, options: props.column?.type === KottiFilters.FilterType.MULTI_ENUM || props.column?.type === KottiFilters.FilterType.SINGLE_ENUM @@ -204,6 +212,10 @@ export default defineComponent({ props.column?.type === KottiFilters.FilterType.INTEGER ? props.column.prefix : undefined, + shortcuts: + props.column?.type === KottiFilters.FilterType.DATE_RANGE + ? props.column.shortcuts + : undefined, step: props.column?.type === KottiFilters.FilterType.FLOAT ? props.column.step diff --git a/packages/kotti-ui/source/kotti-filters/types.ts b/packages/kotti-ui/source/kotti-filters/types.ts index 37a8547e6e..a230f4e09e 100644 --- a/packages/kotti-ui/source/kotti-filters/types.ts +++ b/packages/kotti-ui/source/kotti-filters/types.ts @@ -123,7 +123,10 @@ export namespace KottiFilters { > = Common & { operations: OPERATION[] type: FilterType.DATE_RANGE - } + } & Pick< + KottiFieldDateRange.Props, + 'maximumDate' | 'minimumDate' | 'shortcuts' + > export type Float = Common & {