Browse Source

Merge pull request #3251 from nocodb/fix/gui-v2-added-filter-sort-for-viewer-user

fix/Added filter sorting for user with viewer role
pull/3281/head
Raju Udava 2 years ago committed by GitHub
parent
commit
0fe07bd155
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      packages/nc-gui-v2/components/shared-view/Grid.vue
  2. 12
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
  3. 6
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
  4. 14
      packages/nc-gui-v2/composables/useSmartsheetStore.ts
  5. 6
      packages/nc-gui-v2/composables/useViewColumns.ts
  6. 9
      packages/nc-gui-v2/composables/useViewData.ts
  7. 74
      packages/nc-gui-v2/composables/useViewFilters.ts
  8. 44
      packages/nc-gui-v2/composables/useViewSorts.ts

4
packages/nc-gui-v2/components/shared-view/Grid.vue

@ -4,7 +4,7 @@ import type { TableType } from 'nocodb-sdk'
import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
const { sharedView, meta } = useSharedView()
const { sharedView, meta, sorts, nestedFilters } = useSharedView()
const reloadEventHook = createEventHook<void>()
provide(ReloadViewDataHookInj, reloadEventHook)
@ -14,7 +14,7 @@ provide(ActiveViewInj, sharedView)
provide(FieldsInj, ref(meta.value.columns as any[]))
provide(IsPublicInj, ref(true))
useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
useProvideSmartsheetStore(sharedView as Ref<TableType>, meta, true, sorts, nestedFilters)
</script>
<template>

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

@ -41,6 +41,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
const { $e } = useNuxtApp()
const { nestedFilters } = useSmartsheetStoreOrThrow()
const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
activeView,
parentId,
@ -48,10 +49,11 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
() => {
reloadDataHook.trigger()
},
modelValue,
modelValue || nestedFilters.value,
!modelValue,
)
const nestedFilters = ref()
const localNestedFilters = ref()
const filterUpdateCondition = (filter: FilterType, i: number) => {
saveOrUpdate(filter, i)
@ -115,9 +117,9 @@ watch(
const applyChanges = async (hookId?: string) => {
await sync(hookId)
if (!nestedFilters.value?.length) return
if (!localNestedFilters.value?.length) return
for (const nestedFilter of nestedFilters.value) {
for (const nestedFilter of localNestedFilters.value) {
if (nestedFilter.parentId) {
await nestedFilter.applyChanges(hookId, true)
}
@ -166,7 +168,7 @@ defineExpose({
<div class="col-span-5">
<SmartsheetToolbarColumnFilter
v-if="filter.id || filter.children"
ref="nestedFilters"
ref="localNestedFilters"
v-model="filter.children"
:parent-id="filter.id"
nested

6
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@ -12,11 +12,15 @@ const { filterAutoSave } = useGlobal()
const filterComp = ref<typeof ColumnFilter>()
const { nestedFilters } = useSmartsheetStoreOrThrow()
// todo: avoid duplicate api call by keeping a filter store
const { filters, loadFilters } = useViewFilters(
activeView,
undefined,
computed(() => false),
computed(() => true),
() => false,
nestedFilters.value,
true,
)
const filtersLength = ref(0)

14
packages/nc-gui-v2/composables/useSmartsheetStore.ts

@ -1,10 +1,16 @@
import { ViewTypes } from 'nocodb-sdk'
import type { TableType, ViewType } from 'nocodb-sdk'
import type { FilterType, SortType, TableType, ViewType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
(view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
(
view: Ref<ViewType>,
meta: Ref<TableType>,
shared = false,
initalSorts?: Ref<SortType[]>,
initialFilters?: Ref<FilterType[]>,
) => {
const { $api } = useNuxtApp()
const { sqlUi } = useProject()
@ -37,6 +43,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
}
return where
})
const sorts = initalSorts ?? ref<SortType[]>([])
const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
return {
view,
@ -51,6 +59,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
isGallery,
cellRefs,
isSharedForm,
sorts,
nestedFilters,
}
},
'smartsheet-store',

6
packages/nc-gui-v2/composables/useViewColumns.ts

@ -52,7 +52,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
}
const showAll = async (ignoreIds?: any) => {
if (isPublic.value || isSharedBase) {
if (isPublic.value || isSharedBase.value) {
fields.value = fields.value?.map((field: Field) => ({
...field,
show: true,
@ -75,7 +75,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
reloadData?.()
}
const hideAll = async (ignoreIds?: any) => {
if (isPublic.value || isSharedBase) {
if (isPublic.value || isSharedBase.value) {
fields.value = fields.value?.map((field: Field) => ({
...field,
show: false,
@ -144,7 +144,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
},
set(v: boolean) {
if (view?.value?.id) {
if (!isPublic.value && !isSharedBase) {
if (!isPublic.value && !isSharedBase.value) {
$api.dbView
.update(view.value.id, {
show_system_fields: v,

9
packages/nc-gui-v2/composables/useViewData.ts

@ -39,10 +39,10 @@ export function useViewData(
const formattedData = ref<Row[]>([])
const isPublic = inject(IsPublicInj, ref(false))
const { project } = useProject()
const { project, isSharedBase } = useProject()
const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
const { $api } = useNuxtApp()
const { sorts, nestedFilters: filters } = useSharedView()
const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
const { isUIAllowed } = useUIPermission()
const paginationData = computed({
@ -83,8 +83,7 @@ export function useViewData(
/** load row comments count */
const loadAggCommentsCount = async () => {
// todo: handle in public api
if (isPublic.value) return
if (isPublic.value || isSharedBase.value) return
const ids = formattedData.value
?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@ -112,7 +111,7 @@ export function useViewData(
? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
...params,
...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(filters.value) }),
...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
where: where?.value,
})
: await fetchSharedViewData()

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

@ -1,14 +1,15 @@
import type { ViewType } from 'nocodb-sdk'
import type { ComputedRef, Ref } from 'vue'
import { message } from 'ant-design-vue'
import {
IsPublicInj,
ReloadViewDataHookInj,
computed,
extractSdkResponseErrorMsg,
inject,
ref,
useMetas,
useNuxtApp,
useSharedView,
useUIPermission,
watch,
} from '#imports'
@ -19,13 +20,12 @@ export function useViewFilters(
parentId?: string,
autoApply?: ComputedRef<boolean>,
reloadData?: () => void,
siblingFilters?: Filter[],
currentFilters?: Filter[],
isNestedRoot?: boolean,
) {
const { nestedFilters } = useSharedView()
const reloadHook = inject(ReloadViewDataHookInj)
const _filters = ref<Filter[]>([])
const { nestedFilters } = useSmartsheetStoreOrThrow()
const isPublic = inject(IsPublicInj, ref(false))
@ -34,21 +34,23 @@ export function useViewFilters(
const { isUIAllowed } = useUIPermission()
const { metas } = useMetas()
const _filters = ref<Filter[]>([])
const nestedMode = computed(() => isPublic.value || !isUIAllowed('filterSync' || !isUIAllowed('filterChildrenRead')))
const filters = computed<Filter[]>({
get: () => (nestedMode.value ? currentFilters! : _filters.value),
set: (value: Filter[]) => {
if (nestedMode.value) {
currentFilters = value
if (isNestedRoot) nestedFilters.value = value
const filters = computed({
get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value) ?? [],
set: (value) => {
if (isPublic.value) {
if (siblingFilters) {
siblingFilters = value
} else {
nestedFilters.value = value
}
nestedFilters.value = [...nestedFilters.value]
reloadHook?.trigger()
} else {
_filters.value = value
return
}
_filters.value = value
},
})
@ -60,6 +62,9 @@ export function useViewFilters(
}
const loadFilters = async (hookId?: string) => {
if (nestedMode.value) return
try {
if (hookId) {
if (parentId) {
filters.value = await $api.dbTableFilter.childrenRead(parentId)
@ -73,9 +78,14 @@ export function useViewFilters(
filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
}
}
} catch (e: any) {
console.log(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
const sync = async (hookId?: string, _nested = false) => {
try {
for (const [i, filter] of Object.entries(filters.value)) {
if (filter.status === 'delete') {
await $api.dbTableFilter.delete(filter.id as string)
@ -100,13 +110,17 @@ export function useViewFilters(
}
reloadData?.()
} catch (e: any) {
console.log(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
const deleteFilter = async (filter: Filter, i: number) => {
// if shared or sync permission not allowed simply remove it from array
if (isPublic.value || !isUIAllowed('filterSync')) {
if (nestedMode.value) {
filters.value.splice(i, 1)
filters.value = [...filters.value]
reloadData?.()
} else {
if (filter.id) {
@ -115,11 +129,16 @@ export function useViewFilters(
filter.status = 'delete'
// if auto-apply enabled invoke delete api and remove from array
} else {
try {
await $api.dbTableFilter.delete(filter.id)
reloadData?.()
filters.value.splice(i, 1)
} catch (e: any) {
console.log(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
// if not synced yet remove it from array
} else {
@ -129,17 +148,12 @@ export function useViewFilters(
}
const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
if (isPublic.value) {
filters.value[i] = { ...filter }
filters.value = [...filters.value]
return
}
if (!view?.value) return
if (!isUIAllowed('filterSync')) {
// skip
try {
if (nestedMode.value) {
filters.value[i] = { ...filter }
filters.value = [...filters.value]
} else if (!autoApply?.value && !force) {
filter.status = filter.id ? 'update' : 'create'
} else if (filter.id) {
@ -154,6 +168,10 @@ export function useViewFilters(
fk_parent_id: parentId,
})) as any
}
} catch (e: any) {
console.log(e)
message.error(await extractSdkResponseErrorMsg(e))
}
reloadData?.()
}
@ -168,7 +186,7 @@ export function useViewFilters(
logical_op: 'and',
}
if (isPublic.value) placeHolderGroupFilter.children = [child]
if (nestedMode.value) placeHolderGroupFilter.children = [child]
filters.value.push(placeHolderGroupFilter)

44
packages/nc-gui-v2/composables/useViewSorts.ts

@ -1,36 +1,23 @@
import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { IsPublicInj, ReloadViewDataHookInj, useNuxtApp } from '#imports'
import { message } from 'ant-design-vue'
import { IsPublicInj, ReloadViewDataHookInj, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
export function useViewSorts(
view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
reloadData?: () => void,
) {
const _sorts = ref<SortType[]>([])
const { sorts: sharedViewSorts, sharedView } = useSharedView()
const { sharedView } = useSharedView()
const { sorts } = useSmartsheetStoreOrThrow()
const reloadHook = inject(ReloadViewDataHookInj)
const isPublic = inject(IsPublicInj, ref(false))
const { isSharedBase } = useProject()
const sorts = computed<SortType[]>({
get: () => (isPublic.value || isSharedBase.value ? sharedViewSorts.value : _sorts.value),
set: (value) => {
if (isPublic.value || isSharedBase.value) {
sharedViewSorts.value = value
} else {
_sorts.value = value
}
reloadHook?.trigger()
},
})
const { $api } = useNuxtApp()
const { isUIAllowed } = useUIPermission()
const { isSharedBase } = useProject()
const loadSorts = async () => {
if (isPublic.value) {
@ -38,8 +25,14 @@ export function useViewSorts(
sorts.value = [...sharedSorts]
return
}
try {
if (!view?.value) return
sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
} catch (e: any) {
console.error(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
const saveOrUpdate = async (sort: SortType, i: number) => {
@ -49,6 +42,7 @@ export function useViewSorts(
return
}
try {
if (isUIAllowed('sortSync')) {
if (sort.id) {
await $api.dbTableSort.update(sort.id, sort)
@ -57,6 +51,10 @@ export function useViewSorts(
}
}
reloadData?.()
} catch (e: any) {
console.error(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
const addSort = () => {
sorts.value = [
@ -68,11 +66,21 @@ export function useViewSorts(
}
const deleteSort = async (sort: SortType, i: number) => {
try {
if (isUIAllowed('sortSync') && sort.id && !isPublic.value && !isSharedBase.value) {
await $api.dbTableSort.delete(sort.id)
}
sorts.value.splice(i, 1)
sorts.value = [...sorts.value]
} catch (e: any) {
console.error(e)
message.error(await extractSdkResponseErrorMsg(e))
}
}
watch(sorts, () => {
reloadHook?.trigger()
})
return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
}

Loading…
Cancel
Save