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 & {