fix(gui-v2): reload filters on column delete

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components.d.ts

@@ -100,6 +100,7 @@ declare module '@vue/runtime-core' {
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
+    MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']

packages/nc-gui-v2/components/cell/DatePicker.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { vOnClickOutside } from '@vueuse/components'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
 const { modelValue } = defineProps<Props>()
@@ -57,7 +56,6 @@ watch(
 
 <template>
   <a-date-picker
-    @click="open = !open"
     v-model:value="localState"
     :bordered="false"
     class="!w-full px-1"
@@ -67,6 +65,7 @@ watch(
     :input-read-only="true"
     :dropdown-class-name="randonClass"
     :open="readOnlyMode ? false : open"
+    @click="open = !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui-v2/components/cell/DateTimePicker.vue

@@ -58,7 +58,6 @@ watch(
 
 <template>
   <a-date-picker
-    @click="open = !open"
     v-model:value="localState"
     :show-time="true"
     :bordered="false"
@@ -69,6 +68,7 @@ watch(
     :input-read-only="true"
     :dropdown-class-name="randonClass"
     :open="readOnlyMode ? false : open"
+    @click="open = !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui-v2/components/cell/TimePicker.vue

@@ -51,8 +51,6 @@ const localState = $computed({
   },
 })
 
-
-
 const open = ref(false)
 
 const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
@@ -69,7 +67,6 @@ watch(
 
 <template>
   <a-time-picker
-    @click="open = !open"
     v-model:value="localState"
     autofocus
     :show-time="true"
@@ -82,6 +79,7 @@ watch(
     :input-read-only="true"
     :open="readOnlyMode ? false : open"
     :dropdown-class-name="randonClass"
+    @click="open = !open"
   >
     <template #suffixIcon></template>
   </a-time-picker>

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

@@ -1,9 +1,10 @@
-import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
+import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
+import { useMetas } from '~/composables/useMetas'
 
 export function useViewFilters(
-  view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
+  view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
@@ -14,6 +15,7 @@ export function useViewFilters(
 
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
+  const { metas } = useMetas()
 
   const loadFilters = async () => {
     if (parentId) {
@@ -106,5 +108,21 @@ export function useViewFilters(
     await saveOrUpdate(filters.value[index], index, true)
   }
 
+  /** on column delete reload filters, identify by checking columns count */
+  watch(
+    () => {
+      if (!view?.value || !metas?.value?.[view?.value?.fk_model_id as string]) {
+        return 0
+      }
+
+      return metas?.value?.[view?.value?.fk_model_id as string]?.columns?.length || 0
+    },
+    async (nextColsLength, oldColsLength) => {
+      if (nextColsLength < oldColsLength) {
+        await loadFilters()
+      }
+    },
+  )
+
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }

packages/nc-gui-v2/composables/useViews.ts

@@ -1,15 +1,16 @@
-import type { FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
+import type { TableType, ViewType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp } from '#app'
 
 export function useViews(meta: MaybeRef<TableType | undefined>) {
-  let views = $ref<(GridType | FormType | KanbanType | GalleryType)[]>([])
+  let views = $ref<ViewType[]>([])
   const { $api } = useNuxtApp()
 
   const loadViews = async () => {
     const _meta = unref(meta)
 
     if (_meta && _meta.id) {
+      // todo: swagger type correction
       const response = (await $api.dbView.list(_meta.id)).list as any[]
       if (response) {
         views = response.sort((a, b) => a.order - b.order)

packages/nc-gui-v2/context/index.ts

@@ -1,4 +1,4 @@
-import type { ColumnType, FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
@@ -18,11 +18,11 @@ export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
-export const ActiveViewInj: InjectionKey<Ref<GridType | FormType | KanbanType | GalleryType>> = Symbol('active-view-injection')
+export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
-export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
+export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
 export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')