feat(nc-gui): setup for group & filter by this field options in field header context menu

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" />

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>

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>

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 {