Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add filter operation #1024

Merged
merged 1 commit into from
Nov 25, 2024
Merged

add filter operation #1024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/kotti-ui/source/kotti-table/KtStandardTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ export default defineComponent({
table.value.setPageSize(value)
emit('update:pageSize', value)
},
onUpdateSearchValue: (value: string | null) => {
onUpdateSearchValue: (value: KottiFieldText.Value) => {
searchValue.value = value
},
pageIndex: computed(() => tablePagination.value.pageIndex),
Expand Down
27 changes: 10 additions & 17 deletions packages/kotti-ui/source/kotti-table/standard-table/components/FilterList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default defineComponent({
emits: ['input'],
setup(props, { emit }) {
return {
getComponent: (filter: KottiStandardTable.Filter) => {
getComponent: (filter: KottiStandardTable.FilterInternal) => {
switch (filter.type) {
case KottiStandardTable.FilterType.BOOLEAN:
return 'BooleanFilter'
Expand All @@ -54,25 +54,18 @@ export default defineComponent({
return null
}
},
getValue: (filter: KottiStandardTable.Filter) =>
props.value.find((appliedFilter) => appliedFilter.id === filter.id)
?.value ?? getEmptyValue(filter),
onInput: (
value: KottiStandardTable.FilterValue,
id: KottiStandardTable.Filter['id'],
) => {
const isNewValue = !props.value.some(
(appliedFilter) => appliedFilter.id === id,
)
const updatedValue = (
getValue: (filter: KottiStandardTable.FilterInternal) =>
props.value.find((v) => v.id === filter.id)?.value ??
getEmptyValue(filter),
onInput: (value: KottiStandardTable.AppliedFilter) => {
const isNewValue = !props.value.some((v) => v.id === value.id)
const updatedValueList = (
isNewValue
? [...props.value, { id, value }]
: props.value.map((appliedFilter) =>
appliedFilter.id === id ? { id, value } : appliedFilter,
)
? [...props.value, value]
: props.value.map((v) => (v.id === value.id ? value : v))
).filter(({ value }) => !isEmptyValue(value))

emit('input', updatedValue)
emit('input', updatedValueList)
},
}
},
Expand Down
11 changes: 9 additions & 2 deletions packages/kotti-ui/source/kotti-table/standard-table/components/filters/Boolean.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
size="small"
type="switch"
:value="value"
@input="$emit('input', $event, filter.id)"
@input="onInput"
>
<span v-if="slotLabel" v-text="slotLabel" />
</KtFieldToggle>
Expand All @@ -24,8 +24,15 @@ export default defineComponent({
name: 'BooleanFilter',
props: makeProps(KottiStandardTable.BooleanFilter.propsSchema),
emits: ['input'],
setup(props) {
setup(props, { emit }) {
return {
onInput: (value: KottiStandardTable.FilterValue) => {
emit('input', {
id: props.filter.id,
operation: props.filter.operations[0], // Current filters support only one operation
value,
})
},
slotLabel: computed(() => {
if (!props.filter.slotLabels || isNil(props.value)) {
return null
Expand Down
9 changes: 6 additions & 3 deletions packages/kotti-ui/source/kotti-table/standard-table/components/filters/DateRange.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
<script lang="ts">
import { defineComponent } from 'vue'

import type { KottiFieldDateRange } from '../../../../kotti-field-date/types'
import { useTranslationNamespace } from '../../../../kotti-i18n/hooks'
import { makeProps } from '../../../../make-props'
import { KottiStandardTable } from '../../types'
Expand All @@ -29,8 +28,12 @@ export default defineComponent({

return {
endPlaceholder: translations.value.endDate,
onInput: (value: KottiFieldDateRange.Value) => {
emit('input', value, props.filter.id)
onInput: (value: KottiStandardTable.FilterValue) => {
emit('input', {
id: props.filter.id,
operation: props.filter.operations[0], // Current filters support only one operation
value,
})
},
shortcuts: [
{
Expand Down
14 changes: 11 additions & 3 deletions packages/kotti-ui/source/kotti-table/standard-table/components/filters/MultiSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
:options="filter.options"
size="small"
:value="value"
@input="$emit('input', $event, filter.id)"
@input="onInput"
/>
</template>

Expand All @@ -22,8 +22,16 @@ export default defineComponent({
name: 'MultiSelectFilter',
props: makeProps(KottiStandardTable.MultiSelectFilter.propsSchema),
emits: ['input'],
setup() {
return {}
setup(props, { emit }) {
return {
onInput: (value: KottiStandardTable.FilterValue) => {
emit('input', {
id: props.filter.id,
operation: props.filter.operations[0], // Current filters support only one operation
value,
})
},
}
},
})
</script>
7 changes: 6 additions & 1 deletion packages/kotti-ui/source/kotti-table/standard-table/components/filters/NumberRange.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,12 @@ export default defineComponent({

const reOrderAndEmitRangeValue = () => {
range.value = reOrderRange(range.value)
emit('input', range.value, props.filter.id)

emit('input', {
id: props.filter.id,
operation: props.filter.operations[0], // Current filters support only one operation
value: range.value,
})
}

watch(
Expand Down
14 changes: 11 additions & 3 deletions packages/kotti-ui/source/kotti-table/standard-table/components/filters/SingleSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
:options="filter.options"
size="small"
:value="value"
@input="$emit('input', $event, filter.id)"
@input="onInput"
/>
</template>

Expand All @@ -22,8 +22,16 @@ export default defineComponent({
name: 'SingleSelectFilter',
props: makeProps(KottiStandardTable.SingleSelectFilter.propsSchema),
emits: ['input'],
setup() {
return {}
setup(props, { emit }) {
return {
onInput: (value: KottiStandardTable.FilterValue) => {
emit('input', {
id: props.filter.id,
operation: props.filter.operations[0], // Current filters support only one operation
value,
})
},
}
},
})
</script>
6 changes: 3 additions & 3 deletions packages/kotti-ui/source/kotti-table/standard-table/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ export type StandardTableContext<
> = Ref<{
internal: {
columns: KottiTable.Column<ROW, COLUMN_IDS>[]
filters: KottiStandardTable.Filter[]
filters: KottiStandardTable.FilterInternal[]
getFilter: (
id: KottiStandardTable.Filter['id'],
) => KottiStandardTable.Filter | null
id: KottiStandardTable.FilterInternal['id'],
) => KottiStandardTable.FilterInternal | null
isLoading: boolean
pageSizeOptions: number[]
paginationType: KottiStandardTable.PaginationType
Expand Down
62 changes: 59 additions & 3 deletions packages/kotti-ui/source/kotti-table/standard-table/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,35 @@ export namespace KottiStandardTable {
NUMBER_RANGE = 'NUMBER_RANGE',
SINGLE_SELECT = 'SINGLE_SELECT',
}
export namespace FilterOperation {
export enum Boolean {
EQUAL = 'EQUAL',
}

export enum DateRange {
IN_RANGE = 'IN_RANGE',
}

export enum MultiEnum {
ONE_OF = 'ONE_OF', // OR
}

export enum NumberRange {
IN_RANGE = 'IN_RANGE',
}

export enum SingleEnum {
EQUAL = 'EQUAL',
}

export const schema = z.union([
z.nativeEnum(Boolean),
z.nativeEnum(DateRange),
z.nativeEnum(MultiEnum),
z.nativeEnum(NumberRange),
z.nativeEnum(SingleEnum),
])
}

export enum PaginationType {
LOCAL = 'LOCAL',
Expand All @@ -39,12 +68,22 @@ export namespace KottiStandardTable {

const booleanFilterSchema = sharedFilterSchema.extend({
defaultValue: KottiFieldToggle.valueSchema.optional(),
operations: z
.nativeEnum(FilterOperation.Boolean)
.array()
.nonempty()
.default([FilterOperation.Boolean.EQUAL]),
slotLabels: z.tuple([z.string(), z.string()]).optional(),
type: z.literal(FilterType.BOOLEAN),
})

const dateRangeFilterSchema = sharedFilterSchema.extend({
defaultValue: KottiFieldDateRange.valueSchema.optional(),
operations: z
.nativeEnum(FilterOperation.DateRange)
.array()
.nonempty()
.default([FilterOperation.DateRange.IN_RANGE]),
type: z.literal(FilterType.DATE_RANGE),
})

Expand All @@ -57,6 +96,11 @@ export namespace KottiStandardTable {
)
.extend({
defaultValue: KottiFieldMultiSelect.valueSchema.optional(),
operations: z
.nativeEnum(FilterOperation.MultiEnum)
.array()
.nonempty()
.default([FilterOperation.MultiEnum.ONE_OF]),
type: z.literal(FilterType.MULTI_SELECT),
})

Expand All @@ -70,6 +114,11 @@ export namespace KottiStandardTable {
defaultValue: z
.tuple([KottiFieldNumber.valueSchema, KottiFieldNumber.valueSchema])
.optional(),
operations: z
.nativeEnum(FilterOperation.NumberRange)
.array()
.nonempty()
.default([FilterOperation.NumberRange.IN_RANGE]),
type: z.literal(FilterType.NUMBER_RANGE),
unit: KottiFieldNumber.propsSchema.shape.prefix,
})
Expand All @@ -83,6 +132,11 @@ export namespace KottiStandardTable {
)
.extend({
defaultValue: KottiFieldSingleSelect.valueSchema.optional(),
operations: z
.nativeEnum(FilterOperation.SingleEnum)
.array()
.nonempty()
.default([FilterOperation.SingleEnum.EQUAL]),
type: z.literal(FilterType.SINGLE_SELECT),
})

Expand All @@ -94,6 +148,7 @@ export namespace KottiStandardTable {
singleSelectFilterSchema,
])
export type Filter = z.input<typeof filterSchema>
export type FilterInternal = z.output<typeof filterSchema>

export const filterValueSchema = z.union([
KottiFieldToggle.valueSchema,
Expand All @@ -102,15 +157,15 @@ export namespace KottiStandardTable {
z.tuple([KottiFieldNumber.valueSchema, KottiFieldNumber.valueSchema]),
KottiFieldSingleSelect.valueSchema,
])
export type FilterValue = z.input<typeof filterValueSchema>
export type FilterValue = z.output<typeof filterValueSchema>

// TODO: add operation?
export const appliedFilterSchema = sharedFilterSchema
.pick({ id: true })
.extend({
operation: FilterOperation.schema,
value: filterValueSchema,
})
export type AppliedFilter = z.input<typeof appliedFilterSchema>
export type AppliedFilter = z.output<typeof appliedFilterSchema>

const sharedPaginationSchema = z.object({
pageIndex: z.number().int().finite().min(0),
Expand Down Expand Up @@ -259,6 +314,7 @@ export namespace KottiStandardTable {

export namespace Events {
const updateDataFetchDependencies = z.object({
filters: appliedFilterSchema.array(),
ordering: KottiTable.orderingSchema,
pagination: sharedPaginationSchema.pick({
pageIndex: true,
Expand Down
4 changes: 2 additions & 2 deletions packages/kotti-ui/source/kotti-table/standard-table/utilities/filters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { KottiStandardTable } from '../types'
* @returns the empty value
*/
export const getEmptyValue = (
filter: KottiStandardTable.Filter,
filter: KottiStandardTable.FilterInternal,
): KottiStandardTable.FilterValue => {
switch (filter.type) {
case KottiStandardTable.FilterType.DATE_RANGE:
Expand Down Expand Up @@ -48,7 +48,7 @@ const getOptionLabel = (
*/
export const formatFilterValue = (
value: KottiStandardTable.FilterValue,
filter: KottiStandardTable.Filter,
filter: KottiStandardTable.FilterInternal,
): string => {
switch (filter.type) {
case KottiStandardTable.FilterType.BOOLEAN: {
Expand Down
Loading