From 226c98edc6649487e037269064677155b14a4472 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:58 +0000
Subject: [PATCH 1/9] feat(nc-gui): setup for group & filter by this field
 options in field header context menu

---
 .../components/smartsheet/header/Menu.vue     | 25 +++++++++++++++++++
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |  9 ++++++-
 .../smartsheet/toolbar/GroupByMenu.vue        |  6 +++++
 packages/nc-gui/lib/enums.ts                  |  2 ++
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 7851d46018..3328ff7fe0 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -295,6 +295,11 @@ const isDeleteAllowed = computed(() => {
 const isDuplicateAllowed = computed(() => {
   return column?.value && !column.value.system
 })
+
+const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
+  eventBus.emit(event)
+  isOpen.value = false
+}
 </script>
 
 <template>
@@ -364,6 +369,26 @@ const isDuplicateAllowed = computed(() => {
 
         <a-divider v-if="!column?.pk" class="!my-0" />
 
+        <template v-if="true">
+          <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)">
+            <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
+              <component :is="iconMap.filter" class="text-gray-700" />
+              <!-- Group by this field -->
+              Filter by this field
+            </div>
+          </NcMenuItem>
+
+          <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.GROUP_BY_ADD)">
+            <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
+              <component :is="iconMap.group" class="text-gray-700" />
+              <!-- Group by this field -->
+              Group by this field
+            </div>
+          </NcMenuItem>
+
+          <a-divider class="!my-0" />
+        </template>
+
         <NcMenuItem v-if="!column?.pk" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">
           <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
             <component :is="iconMap.duplicate" class="text-gray-700" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index e9d28b57b9..3608bf71ba 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -12,6 +12,7 @@ import {
   useSmartsheetStoreOrThrow,
   useViewFilters,
   watch,
+  SmartsheetStoreEvents,
 } from '#imports'
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -22,7 +23,7 @@ const { isMobileMode } = useGlobal()
 
 const filterComp = ref<typeof ColumnFilter>()
 
-const { nestedFilters } = useSmartsheetStoreOrThrow()
+const { nestedFilters, eventBus } = useSmartsheetStoreOrThrow()
 
 // todo: avoid duplicate api call by keeping a filter store
 const { nonDeletedFilters, loadFilters } = useViewFilters(
@@ -54,6 +55,12 @@ const allFilters = ref({})
 provide(AllFiltersInj, allFilters)
 
 useMenuCloseOnEsc(open)
+
+eventBus.on(async (event, payload) => {
+  if (event === SmartsheetStoreEvents.FILTER_ADD) {
+    open.value = true
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 9ab9f9cb75..b7a46f1871 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -218,6 +218,12 @@ onMounted(async () => {
 watch(meta, async () => {
   await loadAllowedLookups()
 })
+
+eventBus.on(async (event, payload) => {
+  if (event === SmartsheetStoreEvents.GROUP_BY_ADD) {
+    open.value = true
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index edfa445729..bb7ab6e3dc 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -81,6 +81,8 @@ export enum SmartsheetStoreEvents {
   FIELD_ADD = 'field-add',
   MAPPED_BY_COLUMN_CHANGE = 'mapped-by-column-change',
   CLEAR_NEW_ROW = 'clear-new-row',
+  GROUP_BY_ADD = 'group-by-add',
+  FILTER_ADD = 'filter-add'
 }
 
 export enum DataSourcesSubTab {

From 287725923fe30b9bfa575d5863be1f85aa1c2965 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 2/9] feat(nc-gui): add & remove group by this field

---
 .../components/smartsheet/header/Menu.vue     | 20 ++++-
 .../smartsheet/toolbar/GroupByMenu.vue        | 78 +++---------------
 packages/nc-gui/composables/useViewGroupBy.ts | 82 ++++++++++++++++++-
 packages/nc-gui/lib/enums.ts                  |  3 +-
 4 files changed, 110 insertions(+), 73 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 3328ff7fe0..aa0b9fee26 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -52,6 +52,8 @@ const { addUndo, defineModelScope, defineViewScope } = useUndoRedo()
 
 const showDeleteColumnModal = ref(false)
 
+const { gridViewCols } = useViewColumnsOrThrow()
+
 const setAsDisplayValue = async () => {
   try {
     const currentDisplayValue = meta?.value?.columns?.find((f) => f.pv)
@@ -296,8 +298,14 @@ const isDuplicateAllowed = computed(() => {
   return column?.value && !column.value.system
 })
 
+const isGroupedByThisField = computed(() => {
+  return !!gridViewCols.value[column?.value?.id]?.group_by
+})
+
 const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
-  eventBus.emit(event)
+  if (column?.value) {
+    eventBus.emit(event, column.value)
+  }
   isOpen.value = false
 }
 </script>
@@ -378,11 +386,17 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
             </div>
           </NcMenuItem>
 
-          <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.GROUP_BY_ADD)">
+          <NcMenuItem
+            @click="
+              filterOrGroupByThisField(
+                isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
+              )
+            "
+          >
             <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
               <component :is="iconMap.group" class="text-gray-700" />
               <!-- Group by this field -->
-              Group by this field
+              {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
             </div>
           </NcMenuItem>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index b7a46f1871..2aeea561ae 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -8,30 +8,26 @@ import {
   computed,
   getSortDirectionOptions,
   inject,
-  onMounted,
   ref,
   useMenuCloseOnEsc,
-  useMetas,
   useNuxtApp,
   useSmartsheetStoreOrThrow,
   useViewColumnsOrThrow,
   watch,
 } from '#imports'
 
-const excludedGroupingUidt = [UITypes.Attachment]
-
 const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
 
 const { gridViewCols, updateGridViewColumn, metaColumnById, showSystemFields } = useViewColumnsOrThrow()
 
+const { fieldsToGroupBy } = useViewGroupBy(view)
+
 const { $e } = useNuxtApp()
 
 const _groupBy = ref<{ fk_column_id?: string; sort: string; order: number }[]>([])
 
-const { getMeta } = useMetas()
-
 const groupBy = computed<{ fk_column_id?: string; sort: string; order: number }[]>(() => {
   const tempGroupBy: { fk_column_id?: string; sort: string; order: number }[] = []
   Object.values(gridViewCols.value).forEach((col) => {
@@ -53,24 +49,8 @@ const { eventBus } = useSmartsheetStoreOrThrow()
 
 const { isMobileMode } = useGlobal()
 
-const supportedLookups = ref<string[]>([])
-
 const showCreateGroupBy = ref(false)
 
-const fieldsToGroupBy = computed(() => {
-  const fields = meta.value?.columns || []
-
-  return fields.filter((field) => {
-    if (excludedGroupingUidt.includes(field.uidt as UITypes)) return false
-
-    if (field.uidt === UITypes.Lookup) {
-      return field.id && supportedLookups.value.includes(field.id)
-    }
-
-    return true
-  })
-})
-
 const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
@@ -152,6 +132,7 @@ const saveGroupBy = async () => {
 }
 
 const addFieldToGroupBy = (column: ColumnType) => {
+  console.log('groupByField', column)
   _groupBy.value.push({ fk_column_id: column.id, sort: 'asc', order: _groupBy.value.length + 1 })
   saveGroupBy()
   showCreateGroupBy.value = false
@@ -174,54 +155,19 @@ watch(open, () => {
   }
 })
 
-const loadAllowedLookups = async () => {
-  const filteredLookupCols = []
-  try {
-    for (const col of meta.value?.columns || []) {
-      if (col.uidt !== UITypes.Lookup) continue
-
-      let nextCol: ColumnType = col
-      // check the lookup column is supported type or not
-      while (nextCol && nextCol.uidt === UITypes.Lookup) {
-        const lookupRelation = (await getMeta(nextCol.fk_model_id as string))?.columns?.find(
-          (c) => c.id === (nextCol?.colOptions as LookupType).fk_relation_column_id,
-        )
-
-        const relatedTableMeta = await getMeta(
-          (lookupRelation?.colOptions as LinkToAnotherRecordType).fk_related_model_id as string,
-        )
-
-        nextCol = relatedTableMeta?.columns?.find(
-          (c) => c.id === ((nextCol?.colOptions as LookupType).fk_lookup_column_id as string),
-        ) as ColumnType
+eventBus.on(async (event, column) => {
+  if (!column?.id) return
 
-        // if next column is same as root lookup column then break the loop
-        // since it's going to be a circular loop, and ignore the column
-        if (nextCol?.id === col.id) {
-          break
-        }
-      }
+  console.log('_groupBy', column, _groupBy.value)
 
-      if (nextCol?.uidt !== UITypes.Attachment && col.id) filteredLookupCols.push(col.id)
-    }
-
-    supportedLookups.value = filteredLookupCols
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-onMounted(async () => {
-  await loadAllowedLookups()
-})
+  if (event === SmartsheetStoreEvents.GROUP_BY_ADD) {
+    addFieldToGroupBy(column)
+  } else if (event === SmartsheetStoreEvents.GROUP_BY_REMOVE) {
+    if (groupedByColumnIds.value.length === 0) return
 
-watch(meta, async () => {
-  await loadAllowedLookups()
-})
+    _groupBy.value = _groupBy.value.filter((g) => g.fk_column_id !== column.id)
 
-eventBus.on(async (event, payload) => {
-  if (event === SmartsheetStoreEvents.GROUP_BY_ADD) {
-    open.value = true
+    await saveGroupBy()
   }
 })
 </script>
diff --git a/packages/nc-gui/composables/useViewGroupBy.ts b/packages/nc-gui/composables/useViewGroupBy.ts
index 37c38e6763..91038689c1 100644
--- a/packages/nc-gui/composables/useViewGroupBy.ts
+++ b/packages/nc-gui/composables/useViewGroupBy.ts
@@ -1,10 +1,13 @@
-import { type ColumnType, type SelectOptionsType, UITypes, type ViewType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import type { ColumnType, SelectOptionsType, ViewType, LookupType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '../utils'
-import { GROUP_BY_VARS, ref, storeToRefs, useApi, useBase, useViewColumnsOrThrow } from '#imports'
+import { GROUP_BY_VARS, ref, storeToRefs, useApi, useBase, useViewColumnsOrThrow, useMetas } from '#imports'
 import type { Group, GroupNestedIn, Row } from '#imports'
 
+const excludedGroupingUidt = [UITypes.Attachment, UITypes.QrCode, UITypes.Barcode]
+
 export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: ComputedRef<string | undefined>) => {
   const { api } = useApi()
 
@@ -18,6 +21,8 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
 
   const { gridViewCols } = useViewColumnsOrThrow()
 
+  const { getMeta } = useMetas()
+
   const groupBy = computed<{ column: ColumnType; sort: string; order?: number }[]>(() => {
     const tempGroupBy: { column: ColumnType; sort: string; order?: number }[] = []
     Object.values(gridViewCols.value).forEach((col) => {
@@ -54,6 +59,22 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     return appInfo.value.defaultGroupByLimit?.limitRecord || 10
   })
 
+  const supportedLookups = ref<string[]>([])
+
+  const fieldsToGroupBy = computed(() => {
+    const fields = meta?.value?.columns || []
+
+    return fields.filter((field) => {
+      if (excludedGroupingUidt.includes(field.uidt as UITypes)) return false
+
+      if (field.uidt === UITypes.Lookup) {
+        return field.id && supportedLookups.value.includes(field.id)
+      }
+
+      return true
+    })
+  })
+
   const rootGroup = ref<Group>({
     key: 'root',
     color: 'root',
@@ -464,5 +485,60 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     }
   }
 
-  return { rootGroup, groupBy, isGroupBy, loadGroups, loadGroupData, loadGroupPage, groupWrapperChangePage, redistributeRows }
+  const loadAllowedLookups = async () => {
+    const filteredLookupCols = []
+    try {
+      for (const col of meta?.value?.columns || []) {
+        if (col.uidt !== UITypes.Lookup) continue
+
+        let nextCol: ColumnType = col
+        // check the lookup column is supported type or not
+        while (nextCol && nextCol.uidt === UITypes.Lookup) {
+          const lookupRelation = (await getMeta(nextCol.fk_model_id as string))?.columns?.find(
+            (c) => c.id === (nextCol?.colOptions as LookupType).fk_relation_column_id,
+          )
+
+          const relatedTableMeta = await getMeta(
+            (lookupRelation?.colOptions as LinkToAnotherRecordType).fk_related_model_id as string,
+          )
+
+          nextCol = relatedTableMeta?.columns?.find(
+            (c) => c.id === ((nextCol?.colOptions as LookupType).fk_lookup_column_id as string),
+          ) as ColumnType
+
+          // if next column is same as root lookup column then break the loop
+          // since it's going to be a circular loop, and ignore the column
+          if (nextCol?.id === col.id) {
+            break
+          }
+        }
+
+        if (nextCol?.uidt !== UITypes.Attachment && col.id) filteredLookupCols.push(col.id)
+      }
+
+      supportedLookups.value = filteredLookupCols
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  onMounted(async () => {
+    await loadAllowedLookups()
+  })
+
+  watch(meta, async () => {
+    await loadAllowedLookups()
+  })
+
+  return {
+    rootGroup,
+    groupBy,
+    isGroupBy,
+    fieldsToGroupBy,
+    loadGroups,
+    loadGroupData,
+    loadGroupPage,
+    groupWrapperChangePage,
+    redistributeRows,
+  }
 }
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index bb7ab6e3dc..38be605039 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -82,7 +82,8 @@ export enum SmartsheetStoreEvents {
   MAPPED_BY_COLUMN_CHANGE = 'mapped-by-column-change',
   CLEAR_NEW_ROW = 'clear-new-row',
   GROUP_BY_ADD = 'group-by-add',
-  FILTER_ADD = 'filter-add'
+  GROUP_BY_REMOVE = 'group-by-remove',
+  FILTER_ADD = 'filter-add',
 }
 
 export enum DataSourcesSubTab {

From f9a4b131802ebfd778780e4aba9c6020c918efd1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 3/9] feat(nc-gui): add filter from field context menu

---
 .../smartsheet/toolbar/ColumnFilter.vue       | 37 +++++++++++++++----
 .../smartsheet/toolbar/ColumnFilterMenu.vue   | 11 +++++-
 .../smartsheet/toolbar/GroupByMenu.vue        |  2 -
 packages/nc-gui/composables/useViewFilters.ts |  4 +-
 packages/nc-gui/composables/useViewGroupBy.ts |  4 +-
 packages/nc-gui/lib/constants.ts              |  2 +-
 6 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 51ce686719..f5757582a6 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -27,6 +27,7 @@ interface Props {
   showLoading?: boolean
   modelValue?: undefined | Filter[]
   webHook?: boolean
+  draftFilter?: Partial<FilterType>
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -38,7 +39,9 @@ const props = withDefaults(defineProps<Props>(), {
   webHook: false,
 })
 
-const emit = defineEmits(['update:filtersLength'])
+const emit = defineEmits(['update:filtersLength', 'update:draftFilter'])
+
+const draftFilter = useVModel(props, 'draftFilter', emit)
 
 const { nestedLevel, parentId, autoSave, hookId, modelValue, showLoading, webHook } = toRefs(props)
 
@@ -94,6 +97,8 @@ const localNestedFilters = ref()
 const wrapperDomRef = ref<HTMLElement>()
 const addFiltersRowDomRef = ref<HTMLElement>()
 
+const isMounted = ref(false)
+
 const columns = computed(() => meta.value?.columns)
 
 const getColumn = (filter: Filter) => {
@@ -279,8 +284,12 @@ const scrollDownIfNeeded = () => {
   }
 }
 
-const addFilter = async () => {
-  await _addFilter()
+const addFilter = async (filter?: Partial<FilterType>) => {
+  await _addFilter(false, filter)
+
+  if (filter) {
+    selectFilterField(filters.value[filters.value.length - 1], filters.value.length - 1)
+  }
 
   if (!nested.value) {
     // if nested, scroll to bottom
@@ -316,12 +325,9 @@ const showFilterInput = (filter: Filter) => {
   }
 }
 
-onMounted(() => {
-  loadFilters(hookId?.value, webHook.value)
-})
-
 onMounted(async () => {
-  await loadBtLookupTypes()
+  await Promise.all([loadFilters(hookId?.value, webHook.value), loadBtLookupTypes()])
+  isMounted.value = true
 })
 
 onBeforeUnmount(() => {
@@ -331,6 +337,21 @@ onBeforeUnmount(() => {
 function isDateType(uidt: UITypes) {
   return [UITypes.Date, UITypes.DateTime, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(uidt)
 }
+
+watch(
+  [draftFilter, isMounted],
+  async () => {
+    if (!isMounted.value || !draftFilter.value?.fk_column_id) return
+
+    await addFilter(draftFilter.value)
+
+    draftFilter.value = {}
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 3608bf71ba..62dce9c98e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   AllFiltersInj,
   IsLockedInj,
+  SmartsheetStoreEvents,
   computed,
   iconMap,
   inject,
@@ -12,7 +14,6 @@ import {
   useSmartsheetStoreOrThrow,
   useViewFilters,
   watch,
-  SmartsheetStoreEvents,
 } from '#imports'
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -56,8 +57,13 @@ provide(AllFiltersInj, allFilters)
 
 useMenuCloseOnEsc(open)
 
-eventBus.on(async (event, payload) => {
+const draftFilter = ref({})
+
+eventBus.on(async (event, column: ColumnType) => {
+  if (!column) return
+
   if (event === SmartsheetStoreEvents.FILTER_ADD) {
+    draftFilter.value = { fk_column_id: column.id }
     open.value = true
   }
 })
@@ -85,6 +91,7 @@ eventBus.on(async (event, payload) => {
     <template #overlay>
       <SmartsheetToolbarColumnFilter
         ref="filterComp"
+        v-model:draft-filter="draftFilter"
         class="nc-table-toolbar-menu"
         :auto-save="true"
         data-testid="nc-filter-menu"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 2aeea561ae..8dc9750517 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -158,8 +158,6 @@ watch(open, () => {
 eventBus.on(async (event, column) => {
   if (!column?.id) return
 
-  console.log('_groupBy', column, _groupBy.value)
-
   if (event === SmartsheetStoreEvents.GROUP_BY_ADD) {
     addFieldToGroupBy(column)
   } else if (event === SmartsheetStoreEvents.GROUP_BY_REMOVE) {
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 958ff26c71..3dce65ef74 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -386,8 +386,8 @@ export function useViewFilters(
 
   const saveOrUpdateDebounced = useDebounceFn(saveOrUpdate, 500)
 
-  const addFilter = async (undo = false) => {
-    filters.value.push(placeholderFilter())
+  const addFilter = async (undo = false, draftFilter: Partial<FilterType> = {}) => {
+    filters.value.push(draftFilter?.fk_column_id ? { ...placeholderFilter(), ...draftFilter } : placeholderFilter())
     if (!undo) {
       addUndo({
         undo: {
diff --git a/packages/nc-gui/composables/useViewGroupBy.ts b/packages/nc-gui/composables/useViewGroupBy.ts
index 91038689c1..c7ec09b6a9 100644
--- a/packages/nc-gui/composables/useViewGroupBy.ts
+++ b/packages/nc-gui/composables/useViewGroupBy.ts
@@ -1,9 +1,9 @@
 import { UITypes } from 'nocodb-sdk'
-import type { ColumnType, SelectOptionsType, ViewType, LookupType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType, SelectOptionsType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '../utils'
-import { GROUP_BY_VARS, ref, storeToRefs, useApi, useBase, useViewColumnsOrThrow, useMetas } from '#imports'
+import { GROUP_BY_VARS, ref, storeToRefs, useApi, useBase, useMetas, useViewColumnsOrThrow } from '#imports'
 import type { Group, GroupNestedIn, Row } from '#imports'
 
 const excludedGroupingUidt = [UITypes.Attachment, UITypes.QrCode, UITypes.Barcode]
diff --git a/packages/nc-gui/lib/constants.ts b/packages/nc-gui/lib/constants.ts
index ab1d63e38a..f8257bebfa 100644
--- a/packages/nc-gui/lib/constants.ts
+++ b/packages/nc-gui/lib/constants.ts
@@ -17,4 +17,4 @@ export const GROUP_BY_VARS = {
     __nc_true__: 'Checked',
     __nc_false__: 'Unchecked',
   } as Record<string, string>,
-}
\ No newline at end of file
+}

From 879cdc93ac6f5dfb648a9c639011b23659c44c16 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 4/9] fix(nc-gui): remove console

---
 .../components/smartsheet/toolbar/GroupByMenu.vue      |  1 -
 packages/nc-gui/composables/useViewGroupBy.ts          | 10 ++++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 8dc9750517..ab5e5f828a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -132,7 +132,6 @@ const saveGroupBy = async () => {
 }
 
 const addFieldToGroupBy = (column: ColumnType) => {
-  console.log('groupByField', column)
   _groupBy.value.push({ fk_column_id: column.id, sort: 'asc', order: _groupBy.value.length + 1 })
   saveGroupBy()
   showCreateGroupBy.value = false
diff --git a/packages/nc-gui/composables/useViewGroupBy.ts b/packages/nc-gui/composables/useViewGroupBy.ts
index c7ec09b6a9..a4368f157c 100644
--- a/packages/nc-gui/composables/useViewGroupBy.ts
+++ b/packages/nc-gui/composables/useViewGroupBy.ts
@@ -61,10 +61,8 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
 
   const supportedLookups = ref<string[]>([])
 
-  const fieldsToGroupBy = computed(() => {
-    const fields = meta?.value?.columns || []
-
-    return fields.filter((field) => {
+  const fieldsToGroupBy = computed(() =>
+    (meta?.value?.columns || []).filter((field) => {
       if (excludedGroupingUidt.includes(field.uidt as UITypes)) return false
 
       if (field.uidt === UITypes.Lookup) {
@@ -72,8 +70,8 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
       }
 
       return true
-    })
-  })
+    }),
+  )
 
   const rootGroup = ref<Group>({
     key: 'root',

From d4b8a1957b99fce5da7fc86769600e51dcf59498 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 5/9] fix(nc-gui): add validations for field context group by

---
 .../components/smartsheet/header/Menu.vue     | 54 +++++++++++++------
 .../smartsheet/toolbar/GroupByMenu.vue        |  4 +-
 packages/nc-gui/composables/useViewGroupBy.ts |  3 ++
 3 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index aa0b9fee26..94b67ba106 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -54,6 +54,8 @@ const showDeleteColumnModal = ref(false)
 
 const { gridViewCols } = useViewColumnsOrThrow()
 
+const { fieldsToGroupBy, groupByLimit } = useViewGroupBy(view)
+
 const setAsDisplayValue = async () => {
   try {
     const currentDisplayValue = meta?.value?.columns?.find((f) => f.pv)
@@ -298,8 +300,13 @@ const isDuplicateAllowed = computed(() => {
   return column?.value && !column.value.system
 })
 
-const isGroupedByThisField = computed(() => {
-  return !!gridViewCols.value[column?.value?.id]?.group_by
+const isGroupedByThisField = computed(() => !!gridViewCols.value[column?.value?.id]?.group_by)
+
+const isGroupBySupported = computed(() => !!(fieldsToGroupBy.value || []).find((f) => f.id === column?.value?.id))
+
+const isGroupByLimitExceeded = computed(() => {
+  const groupBy = Object.values(gridViewCols.value).filter((c) => c.group_by)
+  return !(fieldsToGroupBy.value.length && fieldsToGroupBy.value.length > groupBy.length && groupBy.length < groupByLimit)
 })
 
 const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
@@ -381,24 +388,34 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
           <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)">
             <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
               <component :is="iconMap.filter" class="text-gray-700" />
-              <!-- Group by this field -->
+              <!-- Filter by this field -->
               Filter by this field
             </div>
           </NcMenuItem>
 
-          <NcMenuItem
-            @click="
-              filterOrGroupByThisField(
-                isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
-              )
-            "
-          >
-            <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
-              <component :is="iconMap.group" class="text-gray-700" />
-              <!-- Group by this field -->
-              {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
-            </div>
-          </NcMenuItem>
+          <NcTooltip :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField">
+            <template #title>{{
+              !isGroupBySupported
+                ? "This field type doesn't support grouping"
+                : isGroupByLimitExceeded
+                ? 'Group by limit exceeded'
+                : 'ds'
+            }}</template>
+            <NcMenuItem
+              :disabled="(!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
+              @click="
+                filterOrGroupByThisField(
+                  isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
+                )
+              "
+            >
+              <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
+                <component :is="iconMap.group" class="text-gray-700" />
+                <!-- Group by this field -->
+                {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
+              </div>
+            </NcMenuItem>
+          </NcTooltip>
 
           <a-divider class="!my-0" />
         </template>
@@ -457,7 +474,10 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
   }
 }
 
-:deep(.ant-dropdown-menu-item) {
+:deep(.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled)) {
   @apply !hover:text-black text-gray-700;
 }
+:deep(.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled .nc-icon) {
+  @apply text-current;
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index ab5e5f828a..324b7fa36f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -22,7 +22,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { gridViewCols, updateGridViewColumn, metaColumnById, showSystemFields } = useViewColumnsOrThrow()
 
-const { fieldsToGroupBy } = useViewGroupBy(view)
+const { fieldsToGroupBy, groupByLimit } = useViewGroupBy(view)
 
 const { $e } = useNuxtApp()
 
@@ -254,7 +254,7 @@ eventBus.on(async (event, column) => {
           </template>
         </div>
         <NcDropdown
-          v-if="availableColumns.length && fieldsToGroupBy.length > _groupBy.length && _groupBy.length < 3"
+          v-if="availableColumns.length && fieldsToGroupBy.length > _groupBy.length && _groupBy.length < groupByLimit"
           v-model:visible="showCreateGroupBy"
           :trigger="['click']"
           overlay-class-name="nc-toolbar-dropdown"
diff --git a/packages/nc-gui/composables/useViewGroupBy.ts b/packages/nc-gui/composables/useViewGroupBy.ts
index a4368f157c..7aed1ea614 100644
--- a/packages/nc-gui/composables/useViewGroupBy.ts
+++ b/packages/nc-gui/composables/useViewGroupBy.ts
@@ -9,6 +9,8 @@ import type { Group, GroupNestedIn, Row } from '#imports'
 const excludedGroupingUidt = [UITypes.Attachment, UITypes.QrCode, UITypes.Barcode]
 
 export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: ComputedRef<string | undefined>) => {
+  const groupByLimit: number = 3
+
   const { api } = useApi()
 
   const { appInfo } = useGlobal()
@@ -533,6 +535,7 @@ export const useViewGroupBy = (view: Ref<ViewType | undefined>, where?: Computed
     groupBy,
     isGroupBy,
     fieldsToGroupBy,
+    groupByLimit,
     loadGroups,
     loadGroupData,
     loadGroupPage,

From cd102d5a5227293311b96b51ada4c06750942b18 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 6/9] fix(nc-gui): exclude barcode & qr code field from filter
 & group menu list

---
 .../components/smartsheet/header/Menu.vue     | 24 +++++++++++++------
 .../smartsheet/toolbar/ColumnFilter.vue       |  5 +++-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 94b67ba106..31b4743faa 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -299,6 +299,13 @@ const isDeleteAllowed = computed(() => {
 const isDuplicateAllowed = computed(() => {
   return column?.value && !column.value.system
 })
+const isFilterSupported = computed(
+  () =>
+    !!(meta.value?.columns || []).find((f) => f.id === column?.value?.id && ![UITypes.QrCode, UITypes.Barcode].includes(f.uidt)),
+)
+
+// TODO: calculate filter limit
+const isFilterLimitExceeded = computed(() => false)
 
 const isGroupedByThisField = computed(() => !!gridViewCols.value[column?.value?.id]?.group_by)
 
@@ -385,13 +392,16 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
         <a-divider v-if="!column?.pk" class="!my-0" />
 
         <template v-if="true">
-          <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)">
-            <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
-              <component :is="iconMap.filter" class="text-gray-700" />
-              <!-- Filter by this field -->
-              Filter by this field
-            </div>
-          </NcMenuItem>
+          <NcTooltip :disabled="isFilterSupported">
+            <template #title> This field type doesn't support filtering </template>
+            <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)" :disabled="!isFilterSupported">
+              <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
+                <component :is="iconMap.filter" class="text-gray-700" />
+                <!-- Filter by this field -->
+                Filter by this field
+              </div>
+            </NcMenuItem>
+          </NcTooltip>
 
           <NcTooltip :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField">
             <template #title>{{
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index f5757582a6..9959b353b4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -29,6 +29,7 @@ interface Props {
   webHook?: boolean
   draftFilter?: Partial<FilterType>
 }
+const excludedFilterColUidt = [UITypes.QrCode, UITypes.Barcode]
 
 const props = withDefaults(defineProps<Props>(), {
   nestedLevel: 0,
@@ -101,6 +102,8 @@ const isMounted = ref(false)
 
 const columns = computed(() => meta.value?.columns)
 
+const fieldsToFilter = computed(() => (columns.value || []).filter((c) => !excludedFilterColUidt.includes(c.uidt as UITypes)))
+
 const getColumn = (filter: Filter) => {
   // extract looked up column if available
   return btLookupTypesMap.value[filter.fk_column_id] || columns.value?.find((col: ColumnType) => col.id === filter.fk_column_id)
@@ -457,7 +460,7 @@ watch(
               :key="`${i}_6`"
               v-model="filter.fk_column_id"
               class="nc-filter-field-select min-w-32 max-w-32 max-h-8"
-              :columns="columns"
+              :columns="fieldsToFilter"
               :disabled="filter.readOnly"
               @click.stop
               @change="selectFilterField(filter, i)"

From 475ef365b1fabfdfcbeaf93522ea59eb882d54b0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 7/9] fix(nc-gui): focus filter value input on adding filter
 from field context menu

---
 .../smartsheet/toolbar/ColumnFilter.vue        | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 9959b353b4..f856ec8b57 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -348,7 +348,23 @@ watch(
 
     await addFilter(draftFilter.value)
 
+    await nextTick()
+
+    scrollToBottom()
+
+    const filterWrapper = document.querySelectorAll(`.nc-filter-wrapper-${draftFilter.value.fk_column_id}`)
+
     draftFilter.value = {}
+    if (!filterWrapper.length) return
+
+    const filterInputElement =
+      filterWrapper[filterWrapper.length - 1]?.querySelector<HTMLInputElement>('.nc-filter-value-select input')
+    if (filterInputElement) {
+      setTimeout(() => {
+        filterInputElement?.focus?.()
+        filterInputElement?.click?.()
+      }, 100)
+    }
   },
   {
     deep: true,
@@ -429,7 +445,7 @@ watch(
               </div>
             </div>
           </template>
-          <div v-else class="flex flex-row gap-x-2 w-full">
+          <div v-else class="flex flex-row gap-x-2 w-full" :class="`nc-filter-wrapper-${filter.fk_column_id}`">
             <span v-if="!i" class="flex items-center ml-2 mr-7.35">{{ $t('labels.where') }}</span>
 
             <NcSelect

From 61bab38907ecb75789b76675ef6a3cc6fbd592ff Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 8/9] fix(nc-gui): disable add filter from context menu if
 limit exceed

---
 .../components/smartsheet/header/Menu.vue     | 43 ++++++++----
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |  2 +-
 .../nc-gui/composables/useSmartsheetStore.ts  |  3 +
 packages/nc-gui/composables/useViewFilters.ts | 67 ++++++++++++++++++-
 4 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 31b4743faa..91a7df4c14 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnReqType } from 'nocodb-sdk'
-import { RelationTypes, UITypes, isLinksOrLTAR } from 'nocodb-sdk'
+import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR } from 'nocodb-sdk'
 import { computed } from 'vue'
 import {
   ActiveViewInj,
@@ -28,7 +28,7 @@ const virtual = toRef(props, 'virtual')
 
 const isOpen = useVModel(props, 'isOpen', emit)
 
-const { eventBus } = useSmartsheetStoreOrThrow()
+const { eventBus, allFilters } = useSmartsheetStoreOrThrow()
 
 const column = inject(ColumnInj)
 
@@ -38,10 +38,12 @@ const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
 
-const { insertSort } = useViewSorts(view, () => reloadDataHook?.trigger())
-
 const isLocked = inject(IsLockedInj)
 
+const isPublic = inject(IsPublicInj, ref(false))
+
+const { insertSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+
 const { $api, $e } = useNuxtApp()
 
 const { t } = useI18n()
@@ -304,8 +306,12 @@ const isFilterSupported = computed(
     !!(meta.value?.columns || []).find((f) => f.id === column?.value?.id && ![UITypes.QrCode, UITypes.Barcode].includes(f.uidt)),
 )
 
-// TODO: calculate filter limit
-const isFilterLimitExceeded = computed(() => false)
+const { getPlanLimit } = useWorkspace()
+
+const isFilterLimitExceeded = computed(
+  () =>
+    allFilters.value.filter((f) => !(f.is_group || f.status === 'delete')).length >= getPlanLimit(PlanLimitTypes.FILTER_LIMIT),
+)
 
 const isGroupedByThisField = computed(() => !!gridViewCols.value[column?.value?.id]?.group_by)
 
@@ -392,9 +398,20 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
         <a-divider v-if="!column?.pk" class="!my-0" />
 
         <template v-if="true">
-          <NcTooltip :disabled="isFilterSupported">
-            <template #title> This field type doesn't support filtering </template>
-            <NcMenuItem @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)" :disabled="!isFilterSupported">
+          <NcTooltip :disabled="isFilterSupported && !isFilterLimitExceeded">
+            <template #title>
+              {{
+                !isFilterSupported
+                  ? "This field type doesn't support filtering"
+                  : isFilterLimitExceeded
+                  ? 'Filter by limit exceeded'
+                  : ''
+              }}
+            </template>
+            <NcMenuItem
+              @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)"
+              :disabled="!isFilterSupported || isFilterLimitExceeded"
+            >
               <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
                 <component :is="iconMap.filter" class="text-gray-700" />
                 <!-- Filter by this field -->
@@ -403,16 +420,18 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
             </NcMenuItem>
           </NcTooltip>
 
-          <NcTooltip :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField">
+          <NcTooltip
+            :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField || !(isEeUI && !isPublic)"
+          >
             <template #title>{{
               !isGroupBySupported
                 ? "This field type doesn't support grouping"
                 : isGroupByLimitExceeded
                 ? 'Group by limit exceeded'
-                : 'ds'
+                : ''
             }}</template>
             <NcMenuItem
-              :disabled="(!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
+              :disabled="isEeUI && !isPublic && (!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
               @click="
                 filterOrGroupByThisField(
                   isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 62dce9c98e..3fd9a27adc 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -42,7 +42,7 @@ watch(
   () => activeView?.value?.id,
   async (viewId) => {
     if (viewId) {
-      await loadFilters()
+      await loadFilters(undefined, false, true)
       filtersLength.value = nonDeletedFilters.value.length || 0
     }
   },
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index f90aaf128c..48be07d8be 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -58,6 +58,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
+    const allFilters = ref<Filter[]>([])
+
     watch(
       sorts,
       () => {
@@ -97,6 +99,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       isSqlView,
       eventBus,
       sqlUi,
+      allFilters,
     }
   },
   'smartsheet-store',
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 3dce65ef74..310d8f6ae3 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -43,7 +43,7 @@ export function useViewFilters(
 
   const reloadHook = inject(ReloadViewDataHookInj)
 
-  const { nestedFilters } = useSmartsheetStoreOrThrow()
+  const { nestedFilters, allFilters } = useSmartsheetStoreOrThrow()
 
   const { baseMeta } = storeToRefs(useBase())
 
@@ -208,7 +208,35 @@ export function useViewFilters(
     }
   }
 
-  const loadFilters = async (hookId?: string, isWebhook = false) => {
+  const loadAllChildFilters = async (filters: Filter[]) => {
+    // Array to store promises of child filter loading
+    const promises = []
+
+    // Array to store all child filters
+    const allChildFilters: Filter[] = []
+
+    // Iterate over all filters
+    for (const filter of filters) {
+      // Check if the filter is a group
+      if (filter.id && filter.is_group) {
+        // Load children filters from the backend
+        const childFilterPromise = $api.dbTableFilter.childrenRead(filter.id).then((response) => {
+          const childFilters = response.list as Filter[]
+          allChildFilters.push(...childFilters)
+          return loadAllChildFilters(childFilters)
+        })
+        promises.push(childFilterPromise)
+      }
+    }
+
+    // Wait for all promises to resolve
+    await Promise.all(promises)
+
+    // Push all child filters into the allFilters array
+    allFilters.value.push(...allChildFilters)
+  }
+
+  const loadFilters = async (hookId?: string, isWebhook = false, loadAllFilters = false) => {
     if (!view.value?.id) return
 
     if (nestedMode.value) {
@@ -228,6 +256,10 @@ export function useViewFilters(
           filters.value = (await $api.dbTableFilter.childrenRead(parentId)).list as Filter[]
         } else {
           filters.value = (await $api.dbTableFilter.read(view.value!.id!)).list as Filter[]
+          if (loadAllFilters) {
+            allFilters.value = [...filters.value]
+            await loadAllChildFilters(allFilters.value)
+          }
         }
       }
     } catch (e: any) {
@@ -241,6 +273,11 @@ export function useViewFilters(
       for (const [i, filter] of Object.entries(filters.value)) {
         if (filter.status === 'delete') {
           await $api.dbTableFilter.delete(filter.id as string)
+          if (filter.is_group) {
+            deleteFilterGroupFromAllFilters(filter)
+          } else {
+            allFilters.value = allFilters.value.filter((f) => f.id !== filter.id)
+          }
         } else if (filter.status === 'update') {
           await $api.dbTableFilter.update(filter.id as string, {
             ...filter,
@@ -258,6 +295,8 @@ export function useViewFilters(
               fk_parent_id: parentId,
             })
           }
+
+          allFilters.value.push(filters.value[+i])
         }
       }
 
@@ -323,6 +362,8 @@ export function useViewFilters(
           ...filter,
           fk_parent_id: parentId,
         })
+
+        allFilters.value.push(filters.value[+i])
       }
     } catch (e: any) {
       console.log(e)
@@ -334,6 +375,21 @@ export function useViewFilters(
     if (!isWebhook) reloadData?.()
   }
 
+  function deleteFilterGroupFromAllFilters(filter: Filter) {
+    // Find all child filters of the specified parentId
+    const childFilters = allFilters.value.filter((f) => f.fk_parent_id === filter.id)
+
+    // Recursively delete child filter of child filter
+    childFilters.forEach((childFilter) => {
+      if (childFilter.is_group) {
+        deleteFilterGroupFromAllFilters(childFilter)
+      }
+    })
+
+    // Remove the parent object and its children from the array
+    allFilters.value = allFilters.value.filter((f) => f.id !== filter.id && f.fk_parent_id !== filter.id)
+  }
+
   const deleteFilter = async (filter: Filter, i: number, undo = false) => {
     if (!undo && !filter.is_group) {
       addUndo({
@@ -369,6 +425,7 @@ export function useViewFilters(
         } else {
           try {
             await $api.dbTableFilter.delete(filter.id)
+
             if (!isWebhook) reloadData?.()
             filters.value.splice(i, 1)
           } catch (e: any) {
@@ -382,6 +439,12 @@ export function useViewFilters(
       }
       $e('a:filter:delete', { length: nonDeletedFilters.value.length })
     }
+
+    if (filter.is_group) {
+      deleteFilterGroupFromAllFilters(filter)
+    } else {
+      allFilters.value = allFilters.value.filter((f) => f.id !== filter.id)
+    }
   }
 
   const saveOrUpdateDebounced = useDebounceFn(saveOrUpdate, 500)

From 8097722826ebf6b893c956623ffd3cc0b604a563 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 22 Apr 2024 05:37:59 +0000
Subject: [PATCH 9/9] fix(nc-gui): small changes

---
 .../components/smartsheet/header/Menu.vue     | 100 +++++++++---------
 .../smartsheet/toolbar/ColumnFilter.vue       |   4 +-
 .../smartsheet/toolbar/GroupByMenu.vue        |   2 +-
 3 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 91a7df4c14..6b5069c16a 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -395,59 +395,55 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
           </NcMenuItem>
         </template>
 
-        <a-divider v-if="!column?.pk" class="!my-0" />
-
-        <template v-if="true">
-          <NcTooltip :disabled="isFilterSupported && !isFilterLimitExceeded">
-            <template #title>
-              {{
-                !isFilterSupported
-                  ? "This field type doesn't support filtering"
-                  : isFilterLimitExceeded
-                  ? 'Filter by limit exceeded'
-                  : ''
-              }}
-            </template>
-            <NcMenuItem
-              @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)"
-              :disabled="!isFilterSupported || isFilterLimitExceeded"
-            >
-              <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
-                <component :is="iconMap.filter" class="text-gray-700" />
-                <!-- Filter by this field -->
-                Filter by this field
-              </div>
-            </NcMenuItem>
-          </NcTooltip>
-
-          <NcTooltip
-            :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField || !(isEeUI && !isPublic)"
-          >
-            <template #title>{{
-              !isGroupBySupported
-                ? "This field type doesn't support grouping"
-                : isGroupByLimitExceeded
-                ? 'Group by limit exceeded'
+        <a-divider class="!my-0" />
+
+        <NcTooltip :disabled="isFilterSupported && !isFilterLimitExceeded">
+          <template #title>
+            {{
+              !isFilterSupported
+                ? "This field type doesn't support filtering"
+                : isFilterLimitExceeded
+                ? 'Filter by limit exceeded'
                 : ''
-            }}</template>
-            <NcMenuItem
-              :disabled="isEeUI && !isPublic && (!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
-              @click="
-                filterOrGroupByThisField(
-                  isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
-                )
-              "
-            >
-              <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
-                <component :is="iconMap.group" class="text-gray-700" />
-                <!-- Group by this field -->
-                {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
-              </div>
-            </NcMenuItem>
-          </NcTooltip>
-
-          <a-divider class="!my-0" />
-        </template>
+            }}
+          </template>
+          <NcMenuItem
+            :disabled="!isFilterSupported || isFilterLimitExceeded"
+            @click="filterOrGroupByThisField(SmartsheetStoreEvents.FILTER_ADD)"
+          >
+            <div v-e="['a:field:add:filter']" class="nc-column-filter nc-header-menu-item">
+              <component :is="iconMap.filter" class="text-gray-700" />
+              <!-- Filter by this field -->
+              Filter by this field
+            </div>
+          </NcMenuItem>
+        </NcTooltip>
+
+        <NcTooltip :disabled="(isGroupBySupported && !isGroupByLimitExceeded) || isGroupedByThisField || !(isEeUI && !isPublic)">
+          <template #title>{{
+            !isGroupBySupported
+              ? "This field type doesn't support grouping"
+              : isGroupByLimitExceeded
+              ? 'Group by limit exceeded'
+              : ''
+          }}</template>
+          <NcMenuItem
+            :disabled="isEeUI && !isPublic && (!isGroupBySupported || isGroupByLimitExceeded) && !isGroupedByThisField"
+            @click="
+              filterOrGroupByThisField(
+                isGroupedByThisField ? SmartsheetStoreEvents.GROUP_BY_REMOVE : SmartsheetStoreEvents.GROUP_BY_ADD,
+              )
+            "
+          >
+            <div v-e="['a:field:add:groupby']" class="nc-column-groupby nc-header-menu-item">
+              <component :is="iconMap.group" class="text-gray-700" />
+              <!-- Group by this field -->
+              {{ isGroupedByThisField ? "Don't group by this field" : 'Group by this field' }}
+            </div>
+          </NcMenuItem>
+        </NcTooltip>
+
+        <a-divider class="!my-0" />
 
         <NcMenuItem v-if="!column?.pk" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">
           <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index f856ec8b57..427b245faa 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -29,8 +29,6 @@ interface Props {
   webHook?: boolean
   draftFilter?: Partial<FilterType>
 }
-const excludedFilterColUidt = [UITypes.QrCode, UITypes.Barcode]
-
 const props = withDefaults(defineProps<Props>(), {
   nestedLevel: 0,
   autoSave: true,
@@ -42,6 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['update:filtersLength', 'update:draftFilter'])
 
+const excludedFilterColUidt = [UITypes.QrCode, UITypes.Barcode]
+
 const draftFilter = useVModel(props, 'draftFilter', emit)
 
 const { nestedLevel, parentId, autoSave, hookId, modelValue, showLoading, webHook } = toRefs(props)
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index 324b7fa36f..d1b48414aa 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveViewInj,