Browse Source

feat(gui-v2): grouped filter

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2860/head
Pranav C 2 years ago
parent
commit
3fce3c806e
  1. 53
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
  2. 16
      packages/nc-gui-v2/composables/useViewFilters.ts

53
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { FilterType } from 'nocodb-sdk' import type { FilterType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk' import { UITypes } from 'nocodb-sdk'
import Smartsheet from '~/components/tabs/Smartsheet.vue'
import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue' import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
import { useNuxtApp } from '#app' import { useNuxtApp } from '#app'
import { inject, useViewFilters } from '#imports' import { inject, useViewFilters } from '#imports'
@ -8,6 +9,7 @@ import { comparisonOpList } from '~/utils/filterUtils'
import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context' import { ActiveViewInj, 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 } = defineProps<{ nested?: boolean; parentId?: string }>()
const meta = inject(MetaInj) const meta = inject(MetaInj)
@ -16,9 +18,13 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
const { $e } = useNuxtApp() const { $e } = useNuxtApp()
const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter } = useViewFilters(activeView, parentId, () => { const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup } = useViewFilters(
activeView,
parentId,
() => {
reloadDataHook?.trigger() reloadDataHook?.trigger()
}) },
)
const filterUpdateCondition = (filter: FilterType, i: number) => { const filterUpdateCondition = (filter: FilterType, i: number) => {
saveOrUpdate(filter, i) saveOrUpdate(filter, i)
@ -70,6 +76,13 @@ watch(
}, },
{ immediate: true }, { immediate: true },
) )
const nestedFilter = ref()
const logicalOps = [
{ value: 'and', text: 'AND' },
{ value: 'or', text: 'OR' },
]
</script> </script>
<template> <template>
@ -77,7 +90,7 @@ watch(
<div v-if="filters && filters.length" class="grid" @click.stop> <div v-if="filters && filters.length" class="grid" @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"> <div v-if="filter.is_group" :key="i" style="grid-column: span 5; padding: 6px" class="">
<div class="d-flex" style="gap: 6px; padding: 0 6px"> <div class="d-flex" style="gap: 6px; padding: 0 6px">
<!-- <v-icon <!-- <v-icon
v-if="!filter.readOnly" v-if="!filter.readOnly"
@ -100,33 +113,20 @@ watch(
<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" class="flex-shrink-1 flex-grow-0 elevation-0 caption"
:items="['and', 'or']" :options="logicalOps"
density="compact"
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 }"> -->
<!-- <span class="caption font-weight-regular">{{ item }}</span> -->
<!-- </template> -->
</a-select> </a-select>
</div> </div>
<!-- <column-filter <SmartsheetToolbarColumnFilter
v-if="filter.id || shared" v-if="filter.id || shared"
ref="nestedFilter" ref="nestedFilter"
v-model="filter.children" v-model="filter.children"
:parent-id="filter.id" :parent-id="filter.id"
:view-id="viewId"
nested nested
:meta="meta" />
:shared="shared"
:web-hook="webHook"
:hook-id="hookId"
@updated="$emit('updated')"
@input="$emit('input', filters)"
/> -->
</div> </div>
<template v-else> <template v-else>
<!-- <v-icon <!-- <v-icon
@ -152,10 +152,7 @@ watch(
v-else v-else
v-model:value="filter.logical_op" v-model:value="filter.logical_op"
class="h-full" class="h-full"
:options="[ :options="logicalOps"
{ value: 'and', text: 'AND' },
{ value: 'or', text: 'OR' },
]"
hide-details hide-details
:disabled="filter.readOnly" :disabled="filter.readOnly"
@click.stop @click.stop
@ -215,6 +212,7 @@ watch(
</template> </template>
</div> </div>
<div class="flex gap-2">
<a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter"> <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @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> -->
@ -223,6 +221,15 @@ watch(
{{ $t('activity.addFilter') }} {{ $t('activity.addFilter') }}
</div> </div>
</a-button> </a-button>
<a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @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>

16
packages/nc-gui-v2/composables/useViewFilters.ts

@ -7,7 +7,8 @@ export function useViewFilters(
parentId?: string, parentId?: string,
reloadData?: () => void, reloadData?: () => void,
) { ) {
const filters = ref<(FilterType & { status?: 'update' | 'delete' })[]>([]) // todo: update swagger
const filters = ref<(FilterType & { status?: 'update' | 'delete'; parentId?: string })[]>([])
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
@ -100,5 +101,16 @@ export function useViewFilters(
}) })
} }
return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter } const addFilterGroup = async (parentId?: string) => {
filters.value.push({
parentId,
is_group: true,
status: 'update',
logical_op: 'and',
})
const index = filters.value.length - 1
await saveOrUpdate(filters.value[index], index)
}
return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
} }

Loading…
Cancel
Save