feat(gui): implement sort option in column grid level

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

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -6,6 +6,7 @@ import {
   IsLockedInj,
   MetaInj,
   Modal,
+  ReloadViewDataHookInj,
   extractSdkResponseErrorMsg,
   inject,
   message,
@@ -13,14 +14,20 @@ import {
   useMetas,
   useNuxtApp,
 } from '#imports'
+import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
 import { ActiveViewInj } from '~/context'
+import { SmartsheetStoreEvents } from '~/lib'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
 
 const emit = defineEmits(['edit'])
 
+const { eventBus } = useSmartsheetStoreOrThrow()
+
 const column = inject(ColumnInj)
 
+const reloadDataHook = inject(ReloadViewDataHookInj)
+
 const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
@@ -77,6 +84,8 @@ const sortCol = async (direction: 'asc' | 'desc') => {
   try {
     $e('a:sort:add', { from: 'column-menu' })
     await $api.dbTableSort.create(view.value?.id as string, { fk_column_id: column!.value.id, direction })
+    eventBus.emit(SmartsheetStoreEvents.SORT_RELOAD)
+    reloadDataHook?.trigger()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -84,8 +93,7 @@ const sortCol = async (direction: 'asc' | 'desc') => {
 </script>
 
 <template>
-  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']"
+  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
-              overlay-class-name="nc-dropdown-column-operations">
     <MdiMenuDown class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
 
     <template #overlay>

packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@@ -10,6 +10,7 @@ import {
   inject,
   ref,
   useMenuCloseOnEsc,
+  useSmartsheetStoreOrThrow,
   useViewSorts,
   watch,
 } from '#imports'
@@ -19,8 +20,16 @@ const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
+const { eventBus } = useSmartsheetStoreOrThrow()
+
 const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
+eventBus.on((event) => {
+  if (event === SmartsheetStoreEvents.SORT_RELOAD) {
+    loadSorts()
+  }
+})
+
 const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -1,7 +1,8 @@
 import { ViewTypes } from 'nocodb-sdk'
 import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { computed, ref, unref, useFieldQuery, useInjectionState, useNuxtApp, useProject } from '#imports'
+import { computed, ref, unref, useEventBus, useFieldQuery, useInjectionState, useNuxtApp, useProject } from '#imports'
+import type { SmartsheetStoreEvents } from '~/lib'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
@@ -19,6 +20,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 
     const { search } = useFieldQuery(view)
 
+    const eventBus = useEventBus<SmartsheetStoreEvents>(Symbol('SmartsheetStore'))
+
     // getters
     const isLocked = computed(() => view.value?.lock_type === 'locked')
     const isPkAvail = computed(() => (meta.value as TableType)?.columns?.some((c) => c.pk))
@@ -63,6 +66,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       sorts,
       nestedFilters,
       isSqlView,
+      eventBus,
     }
   },
   'smartsheet-store',

packages/nc-gui/lib/enums.ts

@@ -77,3 +77,10 @@ export enum TabType {
   VIEW = 'view',
   AUTH = 'auth',
 }
+
+export enum SmartsheetStoreEvents {
+  SORT_RELOAD = 'sort-reload',
+  FILTER_RELOAD = 'filter-reload',
+  DATA_RELOAD = 'data-reload',
+  FIELD_RELOAD = 'field-reload',
+}