|
|
|
@ -5,24 +5,35 @@ import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue' |
|
|
|
import { useNuxtApp } from '#app' |
|
|
|
import { useNuxtApp } from '#app' |
|
|
|
import { inject, useViewFilters } from '#imports' |
|
|
|
import { inject, useViewFilters } from '#imports' |
|
|
|
import { comparisonOpList } from '~/utils/filterUtils' |
|
|
|
import { comparisonOpList } from '~/utils/filterUtils' |
|
|
|
import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context' |
|
|
|
import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context' |
|
|
|
import MdiDeleteIcon from '~icons/mdi/close-box' |
|
|
|
import MdiDeleteIcon from '~icons/mdi/close-box' |
|
|
|
import MdiAddIcon from '~icons/mdi/plus' |
|
|
|
import MdiAddIcon from '~icons/mdi/plus' |
|
|
|
const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>() |
|
|
|
|
|
|
|
|
|
|
|
const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['update:filtersLength']) |
|
|
|
|
|
|
|
|
|
|
|
const meta = inject(MetaInj) |
|
|
|
const meta = inject(MetaInj) |
|
|
|
const activeView = inject(ActiveViewInj) |
|
|
|
const activeView = inject(ActiveViewInj) |
|
|
|
const reloadDataHook = inject(ReloadViewDataHookInj) |
|
|
|
const reloadDataHook = inject(ReloadViewDataHookInj) |
|
|
|
|
|
|
|
const isLocked = inject(IsLockedInj) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// todo: replace with inject or get from state |
|
|
|
|
|
|
|
const shared = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const { $e } = useNuxtApp() |
|
|
|
const { $e } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
|
|
const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter } = useViewFilters(activeView, parentId, () => { |
|
|
|
const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters( |
|
|
|
|
|
|
|
activeView, |
|
|
|
|
|
|
|
parentId, |
|
|
|
|
|
|
|
computed(() => autoSave), |
|
|
|
|
|
|
|
() => { |
|
|
|
reloadDataHook?.trigger() |
|
|
|
reloadDataHook?.trigger() |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
const filterUpdateCondition = (filter: FilterType, i: number) => { |
|
|
|
const filterUpdateCondition = (filter: FilterType, i: number) => { |
|
|
|
saveOrUpdate(filter, i) |
|
|
|
saveOrUpdate(filter, i) |
|
|
|
|
|
|
|
|
|
|
|
$e('a:filter:update', { |
|
|
|
$e('a:filter:update', { |
|
|
|
logical: filter.logical_op, |
|
|
|
logical: filter.logical_op, |
|
|
|
comparison: filter.comparison_op, |
|
|
|
comparison: filter.comparison_op, |
|
|
|
@ -70,64 +81,81 @@ watch( |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ immediate: true }, |
|
|
|
{ immediate: true }, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const nestedFilters = ref() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const logicalOps = [ |
|
|
|
|
|
|
|
{ value: 'and', text: 'AND' }, |
|
|
|
|
|
|
|
{ value: 'or', text: 'OR' }, |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
() => filters?.value?.length, |
|
|
|
|
|
|
|
(length) => { |
|
|
|
|
|
|
|
emit('update:filtersLength', length ?? 0) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const applyChanges = async () => { |
|
|
|
|
|
|
|
await sync() |
|
|
|
|
|
|
|
for (const nestedFilter of nestedFilters?.value || []) { |
|
|
|
|
|
|
|
if (nestedFilter.parentId) { |
|
|
|
|
|
|
|
await nestedFilter.applyChanges(true) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
|
|
|
|
applyChanges, |
|
|
|
|
|
|
|
parentId, |
|
|
|
|
|
|
|
}) |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="bg-white shadow pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '630px' }"> |
|
|
|
<div |
|
|
|
<div v-if="filters && filters.length" class="grid" @click.stop> |
|
|
|
class="pa-2 menu-filter-dropdown bg-gray-50" |
|
|
|
|
|
|
|
:class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop> |
|
|
|
<template v-for="(filter, i) in filters" :key="filter.id || i"> |
|
|
|
<template v-for="(filter, i) in filters" :key="filter.id || i"> |
|
|
|
<template v-if="filter.status !== 'delete'"> |
|
|
|
<template v-if="filter.status !== 'delete'"> |
|
|
|
<div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding: 6px" class="elevation-4"> |
|
|
|
<template v-if="filter.is_group"> |
|
|
|
<div class="d-flex" style="gap: 6px; padding: 0 6px"> |
|
|
|
|
|
|
|
<!-- <v-icon |
|
|
|
|
|
|
|
v-if="!filter.readOnly" |
|
|
|
|
|
|
|
:key="`${i}_3`" |
|
|
|
|
|
|
|
small |
|
|
|
|
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
|
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
mdi-close-box |
|
|
|
|
|
|
|
</v-icon> --> |
|
|
|
|
|
|
|
<MdiDeleteIcon |
|
|
|
<MdiDeleteIcon |
|
|
|
v-if="!filter.readOnly" |
|
|
|
v-if="!filter.readOnly" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
small |
|
|
|
small |
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
class="nc-filter-item-remove-btn text-grey" |
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
<span v-else :key="`${i}dummy`" /> |
|
|
|
|
|
|
|
|
|
|
|
<span v-else :key="`${i}_1`" /> |
|
|
|
<div :key="`${i}nested`" class="d-flex"> |
|
|
|
|
|
|
|
|
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption" |
|
|
|
:dropdown-match-select-width="false" |
|
|
|
:items="['and', 'or']" |
|
|
|
size="small" |
|
|
|
density="compact" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption !text-xs" |
|
|
|
variant="solo" |
|
|
|
|
|
|
|
hide-details |
|
|
|
|
|
|
|
placeholder="Group op" |
|
|
|
placeholder="Group op" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
> |
|
|
|
> |
|
|
|
<!-- <template #item="{ item }"> --> |
|
|
|
<a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs"> |
|
|
|
<!-- <span class="caption font-weight-regular">{{ item }}</span> --> |
|
|
|
{{ op.text }} |
|
|
|
<!-- </template> --> |
|
|
|
</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <column-filter |
|
|
|
<span class="col-span-3" /> |
|
|
|
|
|
|
|
<div class="col-span-5"> |
|
|
|
|
|
|
|
<SmartsheetToolbarColumnFilter |
|
|
|
v-if="filter.id || shared" |
|
|
|
v-if="filter.id || shared" |
|
|
|
ref="nestedFilter" |
|
|
|
ref="nestedFilters" |
|
|
|
v-model="filter.children" |
|
|
|
v-model="filter.children" |
|
|
|
:parent-id="filter.id" |
|
|
|
:parent-id="filter.id" |
|
|
|
:view-id="viewId" |
|
|
|
|
|
|
|
nested |
|
|
|
nested |
|
|
|
:meta="meta" |
|
|
|
:auto-save="autoSave" |
|
|
|
:shared="shared" |
|
|
|
/> |
|
|
|
:web-hook="webHook" |
|
|
|
|
|
|
|
:hook-id="hookId" |
|
|
|
|
|
|
|
@updated="$emit('updated')" |
|
|
|
|
|
|
|
@input="$emit('input', filters)" |
|
|
|
|
|
|
|
/> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<!-- <v-icon |
|
|
|
<!-- <v-icon |
|
|
|
v-if="!filter.readOnly" |
|
|
|
v-if="!filter.readOnly" |
|
|
|
@ -151,21 +179,23 @@ watch( |
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
class="h-full" |
|
|
|
:dropdown-match-select-width="false" |
|
|
|
:options="[ |
|
|
|
size="small" |
|
|
|
{ value: 'and', text: 'AND' }, |
|
|
|
class="h-full !text-xs" |
|
|
|
{ value: 'or', text: 'OR' }, |
|
|
|
|
|
|
|
]" |
|
|
|
|
|
|
|
hide-details |
|
|
|
hide-details |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
/> |
|
|
|
> |
|
|
|
|
|
|
|
<a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs"> |
|
|
|
|
|
|
|
{{ op.text }} |
|
|
|
|
|
|
|
</a-select-option> |
|
|
|
|
|
|
|
</a-select> |
|
|
|
|
|
|
|
|
|
|
|
<FieldListAutoCompleteDropdown |
|
|
|
<FieldListAutoCompleteDropdown |
|
|
|
:key="`${i}_6`" |
|
|
|
:key="`${i}_6`" |
|
|
|
v-model="filter.fk_column_id" |
|
|
|
v-model="filter.fk_column_id" |
|
|
|
class="caption text-sm nc-filter-field-select" |
|
|
|
class="caption nc-filter-field-select" |
|
|
|
:columns="columns" |
|
|
|
:columns="columns" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@ -174,15 +204,21 @@ watch( |
|
|
|
|
|
|
|
|
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-model:value="filter.comparison_op" |
|
|
|
v-model:value="filter.comparison_op" |
|
|
|
class="caption nc-filter-operation-select text-sm" |
|
|
|
:dropdown-match-select-width="false" |
|
|
|
:options="comparisonOpList" |
|
|
|
size="small" |
|
|
|
|
|
|
|
class="caption nc-filter-operation-select !text-xs" |
|
|
|
:placeholder="$t('labels.operation')" |
|
|
|
:placeholder="$t('labels.operation')" |
|
|
|
density="compact" |
|
|
|
density="compact" |
|
|
|
variant="solo" |
|
|
|
variant="solo" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
hide-details |
|
|
|
hide-details |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
/><!-- |
|
|
|
> |
|
|
|
|
|
|
|
<a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="!text-xs"> |
|
|
|
|
|
|
|
{{ compOp.text }} |
|
|
|
|
|
|
|
</a-select-option> |
|
|
|
|
|
|
|
</a-select> |
|
|
|
|
|
|
|
<!-- |
|
|
|
todo: filter based on column type |
|
|
|
todo: filter based on column type |
|
|
|
|
|
|
|
|
|
|
|
item-value="value" |
|
|
|
item-value="value" |
|
|
|
@ -196,7 +232,8 @@ watch( |
|
|
|
<span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" /> |
|
|
|
<span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" /> |
|
|
|
<a-checkbox |
|
|
|
<a-checkbox |
|
|
|
v-else-if="types[filter.field] === 'boolean'" |
|
|
|
v-else-if="types[filter.field] === 'boolean'" |
|
|
|
v-model:value="filter.value" |
|
|
|
v-model:checked="filter.value" |
|
|
|
|
|
|
|
size="small" |
|
|
|
dense |
|
|
|
dense |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
@ -204,8 +241,9 @@ watch( |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
:key="`${i}_7`" |
|
|
|
:key="`${i}_7`" |
|
|
|
v-model="filter.value" |
|
|
|
v-model:value="filter.value" |
|
|
|
class="caption text-sm nc-filter-value-select" |
|
|
|
size="small" |
|
|
|
|
|
|
|
class="caption nc-filter-value-select" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@input="saveOrUpdate(filter, i)" |
|
|
|
@input="saveOrUpdate(filter, i)" |
|
|
|
@ -215,7 +253,8 @@ watch( |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<a-button small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter"> |
|
|
|
<div class="flex gap-2 my-2"> |
|
|
|
|
|
|
|
<a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter"> |
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
<MdiAddIcon /> |
|
|
|
<MdiAddIcon /> |
|
|
|
@ -223,15 +262,33 @@ watch( |
|
|
|
{{ $t('activity.addFilter') }} |
|
|
|
{{ $t('activity.addFilter') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-button> |
|
|
|
</a-button> |
|
|
|
|
|
|
|
<a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilterGroup"> |
|
|
|
|
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
|
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
|
|
|
|
<MdiAddIcon /> |
|
|
|
|
|
|
|
Add Filter Group |
|
|
|
|
|
|
|
<!-- todo: add i18n {{ $t('activity.addFilterGroup') }} --> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</a-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<slot /> |
|
|
|
<slot /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style scoped> |
|
|
|
.grid { |
|
|
|
.nc-filter-grid { |
|
|
|
display: grid; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 30px 130px auto auto auto; |
|
|
|
grid-template-columns: 18px 70px auto auto auto; |
|
|
|
column-gap: 6px; |
|
|
|
column-gap: 6px; |
|
|
|
row-gap: 6px; |
|
|
|
row-gap: 6px; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.ant-btn, .ant-select, .ant-input) { |
|
|
|
|
|
|
|
@apply "!text-xs"; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.ant-select-item-option) { |
|
|
|
|
|
|
|
@apply "!min-w-min"; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
Wing-Kam Wong
2 years ago