feat(nc-gui): add filter from field context menu

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>

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"

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) {

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: {

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]

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>,
-}
+}