From 667f42d35a79323a86a87dfa6842d5cb3684d537 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 11 Jul 2022 18:13:09 +0530
Subject: [PATCH] wip(gui-v2): filter, sort integration with grid view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/DateTimePicker.vue        |   2 +-
 packages/nc-gui-v2/components/index.ts        |   3 +-
 .../smartsheet-toolbar/ColumnFilter.vue       | 176 ++++++++++++------
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  12 +-
 .../FieldListAutoCompleteDropdown.vue         |  78 ++++++++
 .../smartsheet-toolbar/FieldsMenu.vue         |   6 +-
 .../smartsheet-toolbar/SortListMenu.vue       |  94 +++++++++-
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  23 ++-
 .../components/smartsheet/Toolbar.vue         |   2 +-
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |  10 +-
 packages/nc-gui-v2/composables/useViewData.ts |   7 +-
 .../nc-gui-v2/composables/useViewFilters.ts   |  89 ++++++---
 .../nc-gui-v2/composables/useViewSorts.ts     |  26 ++-
 packages/nc-gui-v2/nuxt.config.ts             |   1 -
 14 files changed, 418 insertions(+), 111 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index f3bd74e2ef..a7fed7f1b3 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -4,7 +4,7 @@ import { computed, ref } from '#imports'
 import useProject from '~/composables/useProject'
 
 interface Props {
-  modelValue: string
+  modelValue?: string
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/index.ts b/packages/nc-gui-v2/components/index.ts
index 4710b5d1be..39474eecc6 100644
--- a/packages/nc-gui-v2/components/index.ts
+++ b/packages/nc-gui-v2/components/index.ts
@@ -1,5 +1,6 @@
 import type { ColumnType, FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
 import type { InjectionKey, Ref } from 'vue'
+import type { EventHook } from '@vueuse/core'
 import type useViewData from '~/composables/useViewData'
 
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
@@ -15,4 +16,4 @@ export const ValueInj: InjectionKey<any> = Symbol('value-injection')
 export const ActiveViewInj: InjectionKey<Ref<(GridType | GalleryType | FormType | KanbanType) & { id?: string }>> =
   Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
-export const ReloadViewDataInj: InjectionKey<any> = Symbol('reload-view-data-injection')
+export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 9ce1a6bad9..6169050997 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -1,16 +1,74 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ActiveViewInj, MetaInj } from '~/components'
+import { UITypes } from 'nocodb-sdk'
+import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
+import { useNuxtApp } from '#app'
+import { inject } from '#imports'
+import { comparisonOp } from '~/utils/filterUtils'
+import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/components'
 import useViewFilters from '~/composables/useViewFilters'
-import { comparisonOp } from '~/utils/comparisonOp'
+import MdiDeleteIcon from '~icons/mdi/close-box'
+
+const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
 
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
+const reloadDataHook = inject(ReloadViewDataHookInj)
+
+const { $e } = useNuxtApp()
+
+const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter } = useViewFilters(activeView, parentId, () => {
+  reloadDataHook?.trigger()
+})
+
+const filterUpdateCondition = (filter, i) => {
+  saveOrUpdate(filter, i)
+  $e('a:filter:update', {
+    logical: filter.logical_op,
+    comparison: filter.comparison_op,
+  })
+}
 
-const { filters, deleteFilter, saveOrUpdate } = useViewFilters(activeView)
+// todo
+// const filterComparisonOp = (f) =>
+//   comparisonOp.filter((op) => {
+//     // if (
+//     //   f &&
+//     //   f.fk_column_id &&
+//     //   this.columnsById[f.fk_column_id] &&
+//     //   this.columnsById[f.fk_column_id].uidt === UITypes.LinkToAnotherRecord &&
+//     //   this.columnsById[f.fk_column_id].uidt === UITypes.Lookup
+//     // ) {
+//     //   return !['notempty', 'empty', 'notnull', 'null'].includes(op.value)
+//     // }
+//     return true
+//   })
 
-const filterUpdateCondition = (filter, i) => {}
-const filterComparisonOp = (filter) => {}
+const columns = computed(() => meta?.value?.columns)
+const types = computed(() => {
+  if (!meta?.value?.columns?.length) {
+    return {}
+  }
+  return meta?.value?.columns?.reduce((obj: any, col: any) => {
+    switch (col.uidt) {
+      case UITypes.Number:
+      case UITypes.Decimal:
+        obj[col.title] = obj[col.column_name] = 'number'
+        break
+      case UITypes.Checkbox:
+        obj[col.title] = obj[col.column_name] = 'boolean'
+        break
+    }
+    return obj
+  }, {})
+})
+
+watch(
+  () => activeView?.value?.id,
+  (n, o) => {
+    if (n !== o) loadFilters()
+  },
+  { immediate: true },
+)
 
 /* import { UITypes, getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
 import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
@@ -319,9 +377,9 @@ export default {
 </script>
 
 <template>
-  <div class="backgroundColor pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '530px' }">
-    <div class="grid" @click.stop>
-      <template v-for="(filter, i) in filters">
+  <div class="backgroundColor pa-2 menu-filter-dropdown bg-background" :style="{ width: nested ? '100%' : '630px' }">
+    <div v-if="filters && filters.length" class="grid" @click.stop>
+      <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
           <div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding: 6px" class="elevation-4">
             <div class="d-flex" style="gap: 6px; padding: 0 6px">
@@ -339,17 +397,16 @@ export default {
                 v-model="filter.logical_op"
                 class="flex-shrink-1 flex-grow-0 elevation-0 caption"
                 :items="['and', 'or']"
-                solo
-                flat
-                dense
+                density="compact"
+                variant="solo"
                 hide-details
                 placeholder="Group op"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
-                <template #item="{ item }">
-                  <span class="caption font-weight-regular">{{ item }}</span>
-                </template>
+                <!--                <template #item="{ item }"> -->
+                <!--                  <span class="caption font-weight-regular">{{ item }}</span> -->
+                <!--                </template> -->
               </v-select>
             </div>
             <!--            <column-filter
@@ -368,41 +425,47 @@ export default {
             /> -->
           </div>
           <template v-else>
-            <v-icon
+            <!--                        <v-icon
+                                      v-if="!filter.readOnly"
+                                      :key="`${i}_3`"
+                                      small
+                                      class="nc-filter-item-remove-btn"
+                                      @click.stop="deleteFilter(filter, i)"
+                                    >
+                                      mdi-close-box
+                                    </v-icon> -->
+
+            <MdiDeleteIcon
               v-if="!filter.readOnly"
-              :key="`${i}_3`"
-              small
-              class="nc-filter-item-remove-btn"
+              class="nc-filter-item-remove-btn text-grey"
               @click.stop="deleteFilter(filter, i)"
-            >
-              mdi-close-box
-            </v-icon>
-            <span v-else :key="`${i}_1`" />
-            <span v-if="!i" :key="`${i}_2`" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
+            ></MdiDeleteIcon>
+            <span v-else />
+
+            <span v-if="!i" :key="`${i}_2`" class="text-xs d-flex align-center">{{ $t('labels.where') }}</span>
 
             <v-select
               v-else
               :key="`${i}_4`"
               v-model="filter.logical_op"
-              class="flex-shrink-1 flex-grow-0 elevation-0 caption"
+              class="w-full elevation-0 caption"
               :items="['and', 'or']"
-              solo
-              flat
-              dense
+              density="compact"
+              variant="solo"
               hide-details
               :disabled="filter.readOnly"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
-            >
-              <template #item="{ item }">
+            />
+            <!--              <template #item="{ item }">
                 <span class="caption font-weight-regular">{{ item }}</span>
               </template>
-            </v-select>
+            </v-select> -->
 
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
               v-model="filter.fk_column_id"
-              class="caption nc-filter-field-select"
+              class="caption text-sm nc-filter-field-select"
               :columns="columns"
               :disabled="filter.readOnly"
               @click.stop
@@ -410,25 +473,26 @@ export default {
             />
 
             <v-select
-              :key="`k${i}`"
               v-model="filter.comparison_op"
-              class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select"
-              :items="filterComparisonOp(filter)"
+              class="caption nc-filter-operation-select text-sm"
+              :items="comparisonOp.map((it) => it.value)"
               :placeholder="$t('labels.operation')"
-              solo
-              flat
-              style="max-width: 120px"
-              dense
+              density="compact"
+              variant="solo"
               :disabled="filter.readOnly"
               hide-details
-              item-value="value"
-              @click.stop
               @change="filterUpdateCondition(filter, i)"
-            >
-              <template #item="{ item }">
-                <span class="caption font-weight-regular">{{ item.text }}</span>
-              </template>
-            </v-select>
+            /><!--
+            todo: filter based on column type
+
+            item-value="value"
+            item-text="text"
+            :items="filterComparisonOp(filter)" -->
+
+            <!--              <template #item="{ item }"> -->
+            <!--                <span class="caption font-weight-regular">{{ item.text }}</span> -->
+            <!--              </template> -->
+            <!--            </v-select> -->
             <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" />
             <v-checkbox
               v-else-if="types[filter.field] === 'boolean'"
@@ -442,11 +506,10 @@ export default {
               v-else
               :key="`${i}_7`"
               v-model="filter.value"
-              solo
-              flat
+              density="compact"
+              variant="solo"
               hide-details
-              dense
-              class="caption nc-filter-value-select"
+              class="caption text-sm nc-filter-value-select"
               :disabled="filter.readOnly"
               @click.stop
               @input="saveOrUpdate(filter, i)"
@@ -455,6 +518,13 @@ export default {
         </template>
       </template>
     </div>
+
+    <v-btn small class="elevation-0 text-sm text-capitalize my-3" @click.stop="addFilter">
+      <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
+      <!-- Add Filter -->
+      {{ $t('activity.addFilter') }}
+    </v-btn>
+    <slot />
   </div>
 
   <!--  <div class="backgroundColor pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '530px' }">
@@ -604,10 +674,10 @@ export default {
 </template>
 
 <style scoped>
-/*.grid {
+.grid {
   display: grid;
-  grid-template-columns: 22px 80px auto auto auto;
+  grid-template-columns: 30px 130px auto auto auto;
   column-gap: 6px;
   row-gap: 6px;
-}*/
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index ba2e3a090b..9087f1f20e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -3,6 +3,8 @@
 import { useState } from '#app'
 import { IsLockedInj } from '~/components'
 import Smartsheet from '~/components/tabs/Smartsheet.vue'
+import MdiFilterIcon from '~icons/mdi/filter-outline'
+import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
@@ -68,7 +70,7 @@ export default {
 
 <template>
   <v-menu offset-y eager transition="slide-y-transition">
-    <template #activator="props">
+    <template #activator="{ props }">
       <v-badge :value="filters.length" color="primary" dot overlap>
         <v-btn
           v-t="['c:filter']"
@@ -82,14 +84,14 @@ export default {
           }"
           v-bind="props"
         >
-          <v-icon small class="mr-1" color="grey  darken-3"> mdi-filter-outline</v-icon>
+          <MdiFilterIcon class="mr-1 text-grey" />
           <!-- Filter -->
-          {{ $t('activity.filter') }}
-          <v-icon small color="#777"> mdi-menu-down</v-icon>
+          <span class="text-capitalize">{{ $t('activity.filter') }}</span>
+          <MdiMenuDownIcon class="text-grey" />
         </v-btn>
       </v-badge>
     </template>
-    <SmartsheetToolbarColumnFilter ref="filter">
+    <SmartsheetToolbarColumnFilter>
       <!--
       v-model="filters"
       :shared="shared"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
new file mode 100644
index 0000000000..91e3d563fc
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { MetaInj } from '~/components'
+
+interface Props {
+  modelValue?: string
+}
+
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const meta = inject(MetaInj)
+
+const localValue = computed({
+  get: () => modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+/* export default {
+  name: 'FieldListAutoCompleteDropdown',
+  props: {
+    columns: Array,
+    value: String,
+  },
+  computed: {
+    localValue: {
+      set(v) {
+        this.$emit('input', v)
+      },
+      get() {
+        return this.value
+      },
+    },
+  },
+  mounted() {
+    const autocompleteInput = this.$refs.field.$refs.input
+    autocompleteInput.addEventListener('focus', this.onFocus, true)
+  },
+  methods: {
+    onFocus(e) {
+      this.$refs.field.isMenuActive = true // open item list
+    },
+  },
+} */
+</script>
+
+<template>
+  <v-autocomplete
+    ref="field"
+    v-model="localValue"
+    class="caption"
+    :items="meta.columns"
+    item-value="id"
+    item-text="title"
+    :label="$t('objects.field')"
+    variant="solo"
+    hide-details
+    @click.stop
+  >
+    <!--    &lt;!&ndash; @change="$emit('change')" &ndash;&gt; -->
+    <!--    <template #selection="{ item }"> -->
+    <!--      <v-icon small class="mr-1"> -->
+    <!--        {{ item.icon }} -->
+    <!--      </v-icon> -->
+    <!--      {{ item.title }} -->
+    <!--    </template> -->
+    <!--    <template #item="{ item }"> -->
+    <!--      <span :class="`caption font-weight-regular nc-fld-${item.title}`"> -->
+    <!--        <v-icon color="grey" small class="mr-1"> -->
+    <!--          {{ item.icon }} -->
+    <!--        </v-icon> -->
+    <!--        {{ item.title }} -->
+    <!--      </span> -->
+    <!--    </template> -->
+  </v-autocomplete>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 7b7a236b11..6d6d27e854 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ActiveViewInj, MetaInj } from '~/components'
+import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
 import useViewColumns from '~/composables/useViewColumns'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiEyeIcon from '~icons/mdi/eye-off-outline'
@@ -14,7 +14,8 @@ const { showSystemFields, fieldsOrder, coverImageField, modelValue } = definePro
 
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
-const isLocked = false
+const reloadDataHook = inject(ReloadViewDataHookInj)
+const isLocked = inject(IsLockedInj)
 
 const isAnyFieldHidden = computed(() => {
   return false
@@ -307,7 +308,6 @@ export default {
           :class="{
             'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
           }"
-          v-on="on"
         >
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="mr-1 text-grey"></MdiEyeIcon>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 28966123a4..f9acac2d04 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -1,4 +1,26 @@
-<script>
+<script setup lang="ts">
+import { inject } from '@vue/runtime-core'
+import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
+import { ActiveViewInj, IsLockedInj, ReloadViewDataHookInj } from '~/components'
+import useViewSorts from '~/composables/useViewSorts'
+import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import MdiSortIcon from '~icons/mdi/sort'
+import MdiDeleteIcon from '~icons/mdi/close-box'
+
+const view = inject(ActiveViewInj)
+const isLocked = inject(IsLockedInj)
+const reloadDataHook = inject(ReloadViewDataHookInj)
+
+const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+
+watch(
+  () => view?.value?.id,
+  () => {
+    loadSorts()
+  },
+  { immediate: true },
+)
+
 /* import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
 import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
@@ -96,6 +118,70 @@ export default {
 </script>
 
 <template>
+  <v-menu offset-y transition="slide-y-transition">
+    <template #activator="{ props }">
+      <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
+        <v-btn
+          v-t="['c:sort']"
+          class="nc-sort-menu-btn px-2 nc-remove-border"
+          :disabled="isLocked"
+          small
+          text
+          outlined
+          :class="{
+            'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
+          }"
+          v-bind="props"
+        >
+          <MdiSortIcon class="mr-1 text-grey" />
+          <!-- Sort -->
+          <span class="text-capitalize">{{ $t('activity.sort') }}</span>
+          <MdiMenuDownIcon class="text-grey" />
+        </v-btn>
+      </v-badge>
+    </template>
+    <div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]">
+      <div class="sort-grid" @click.stop>
+        <template v-for="(sort, i) in sorts || []" :key="i">
+          <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
+          <MdiDeleteIcon class="nc-sort-item-remove-btn text-grey" small @click.stop="deleteSort(sort, i)"></MdiDeleteIcon>
+          <FieldListAutoCompleteDropdown
+            v-model="sort.fk_column_id"
+            class="caption nc-sort-field-select"
+            :columns="columns"
+            @click.stop
+            @change="sync(sort, i)"
+          />
+          <v-select
+            v-model="sort.direction"
+            class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
+            :items="[
+              // { text: 'A -> Z', value: 'asc' },
+              'asc',
+              // { text: 'Z -> A', value: 'desc' },
+              'desc',
+            ]"
+            :label="$t('labels.operation')"
+            density="compact"
+            variant="solo"
+            hide-details
+            @click.stop
+            @change="saveOrUpdate(sort, i)"
+          >
+            <template #item="{ item }">
+              <span class="caption font-weight-regular">{{ item.text }}</span>
+            </template>
+          </v-select>
+        </template>
+      </div>
+      <v-btn small class="elevation-0 grey&#45;&#45;text my-3" @click.stop="addSort">
+        <!-- todo:        <v-icon small color="grey"> mdi-plus </v-icon> -->
+        <!-- Add Sort Option -->
+        {{ $t('activity.addSort') }}
+      </v-btn>
+    </div>
+  </v-menu>
+
   <!--  <v-menu offset-y transition="slide-y-transition">
     <template #activator="{ on }">
       <v-badge :value="sortList && sortList.length" color="primary" dot overlap>
@@ -163,10 +249,10 @@ export default {
 </template>
 
 <style scoped>
-/*.sort-grid {
+.sort-grid {
   display: grid;
-  grid-template-columns: 22px auto 100px;
+  grid-template-columns: 22px auto 150px;
   column-gap: 6px;
   row-gap: 6px;
-}*/
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6b24ff743b..b38e33d513 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,7 +1,16 @@
 <script lang="ts" setup>
+import { computed } from '@vue/reactivity'
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
-import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReloadViewDataInj } from '~/components'
+import {
+  ActiveViewInj,
+  ChangePageInj,
+  IsFormInj,
+  IsGridInj,
+  MetaInj,
+  PaginationDataInj,
+  ReloadViewDataHookInj,
+} from '~/components'
 import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import useViewData from '~/composables/useViewData'
 
@@ -20,7 +29,11 @@ provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
-provide(ReloadViewDataInj, loadData)
+
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
+reloadViewDataHook?.on(() => {
+  loadData()
+})
 
 const selectCell = (row: number, col: number) => {
   selected.row = row
@@ -42,6 +55,10 @@ watch(
   },
   { immediate: true },
 )
+
+defineExpose({
+  loadData,
+})
 </script>
 
 <template>
@@ -178,7 +195,7 @@ watch(
   overflow: auto;
 
   td,
-  tr {
+  th {
     min-height: 31px !important;
     position: relative;
     padding: 0 5px !important;
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index ccf88407c0..a67a8c90e7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -4,7 +4,7 @@
   <v-toolbar dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
     <SmartsheetToolbarColumnFilterMenu />
-    <!--    <SmartsheetToolbarSortListMenu /> -->
+    <SmartsheetToolbarSortListMenu />
   </v-toolbar>
 </template>
 
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index f7b4c73ada..57f24d2ea6 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useEventBus } from '@vueuse/core'
 import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed, onMounted, provide, watch } from '#imports'
-import { ActiveViewInj, MetaInj, TabMetaInj } from '~/components'
+import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components'
 import useMetas from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({
@@ -12,15 +13,20 @@ const { tabMeta } = defineProps({
 const { getMeta, metas } = useMetas()
 
 const activeView = ref<GridType | FormType | KanbanType | GalleryType>()
+const el = ref<any>()
 const meta = computed(() => metas.value?.[tabMeta?.id])
 
 onMounted(async () => {
   await getMeta(tabMeta?.id)
 })
 
+const reloadEventHook = createEventHook<void>()
+
 provide(MetaInj, meta)
 provide(TabMetaInj, tabMeta)
 provide(ActiveViewInj, activeView)
+provide(IsLockedInj, false)
+provide(ReloadViewDataHookInj, reloadEventHook)
 
 watch(
   () => tabMeta && tabMeta?.id,
@@ -36,7 +42,7 @@ watch(
     <template v-if="meta">
       <div class="d-flex">
         <div v-if="activeView" class="flex-grow-1 min-w-0">
-          <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" />
+          <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
           <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
           <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
         </div>
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index f67fbbe6b7..f6584751a6 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,4 +1,4 @@
-import type { Api, PaginatedType, TableType } from 'nocodb-sdk'
+import type { Api, FormType, GalleryType, GridType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 import useProject from '~/composables/useProject'
@@ -13,7 +13,10 @@ const formatData = (list: Record<string, any>[]) =>
 
 export default (
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
-  viewMeta: Ref<TableType> | ComputedRef<TableType> | undefined,
+  viewMeta:
+    | Ref<(GridType | GalleryType | FormType) & { id: string }>
+    | ComputedRef<(GridType | GalleryType | FormType) & { id: string }>
+    | undefined,
 ) => {
   const data = ref<Record<string, any>[]>()
   const formattedData = ref<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }[]>()
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 65c01849dc..c794de80ed 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -2,7 +2,11 @@ import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#imports'
 
-export default function (view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined, parentId?: string) {
+export default function (
+  view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
+  parentId?: string,
+  reloadData?: () => void,
+) {
   const filters = ref<(FilterType & { status?: 'update' | 'delete' })[]>([])
 
   const { $api } = useNuxtApp()
@@ -31,47 +35,70 @@ export default function (view: Ref<(GridType | KanbanType | GalleryType) & { id?
         })) as any
       }
     }
+    reloadData?.()
   }
 
   const deleteFilter = async (filter: FilterType, i: number) => {
     //   if (this.shared || !this._isUIAllowed('filterSync')) {
     //     this.filters.splice(i, 1)
     //     this.$emit('updated')
-    //   } else if (filter.id) {
-    //     if (!this.autoApply) {
-    //       this.$set(filter, 'status', 'delete')
-    //     } else {
-    //       await this.$api.dbTableFilter.delete(filter.id)
-    //       await this.loadFilter()
-    //       this.$emit('updated')
-    //     }
-    //   } else {
-    //     this.filters.splice(i, 1)
-    //     this.$emit('updated')
-    //   }
+    //   } else
+
+    if (filter.id) {
+      //     if (!this.autoApply) {
+      //       this.$set(filter, 'status', 'delete')
+      //     } else {
+      await $api.dbTableFilter.delete(filter.id) /**/
+      //       await this.loadFilter()
+      //       this.$emit('updated')
+      //     }
+    } else {
+      //     this.$emit('updated')
+    }
+    const _filters = unref(filters.value)
+    _filters.splice(i, 1)
+    filters.value = _filters
     //   this.$e('a:filter:delete')
     // // },
+    reloadData?.()
   }
 
   const saveOrUpdate = async (filter: FilterType, i: number) => {
-    //   if (this.shared || !this._isUIAllowed('filterSync')) {
-    //     this.filters.splice(i, 1)
-    //     this.$emit('updated')
-    //   } else if (filter.id) {
-    //     if (!this.autoApply) {
-    //       this.$set(filter, 'status', 'delete')
-    //     } else {
-    //       await this.$api.dbTableFilter.delete(filter.id)
-    //       await this.loadFilter()
-    //       this.$emit('updated')
-    //     }
-    //   } else {
-    //     this.filters.splice(i, 1)
-    //     this.$emit('updated')
-    //   }
-    //   this.$e('a:filter:delete')
-    // // },
+    if (!view?.value) return
+
+    // if (this.shared || !this._isUIAllowed('filterSync')) {
+    // this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op))
+    // this.$emit('updated')
+    // } else if (!this.autoApply) {
+    //   filter.status = 'update'
+    // } else
+    if (filter.id) {
+      await $api.dbTableFilter.update(filter.id, {
+        ...filter,
+        fk_parent_id: parentId,
+      })
+
+      // this.$emit('updated')
+    } else {
+      // todo: return type correction
+      filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+        ...filter,
+        fk_parent_id: parentId,
+      })) as any
+
+      // this.$emit('updated')
+    }
+    reloadData?.()
+  }
+
+  const addFilter = () => {
+    filters.value.push({
+      comparison_op: 'eq',
+      value: '',
+      status: 'update',
+      logical_op: 'and',
+    })
   }
 
-  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate }
+  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter }
 }
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 1a2a126632..c0fe98f326 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -2,23 +2,41 @@ import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#imports'
 
-export default function (view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }>) {
+export default function (
+  view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
+  reloadData?: () => void,
+) {
   const sorts = ref<SortType[]>([])
 
   const { $api } = useNuxtApp()
 
   const loadSorts = async () => {
-    sorts.value = (await $api.dbTableSort.list(view?.value?.id as string)) as any[]
+    if (!view?.value) return
+    // todo: api correction
+    sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list as any[]
   }
 
-  const sync = async (sort: SortType, i: number) => {
+  const saveOrUpdate = async (sort: SortType, i: number) => {
     if (!sorts?.value) return
     if (sort.id) {
       await $api.dbTableSort.update(sort.id, sort)
     } else {
       sorts.value[i] = (await $api.dbTableSort.create(view?.value?.id as string, sort)) as any
     }
+    reloadData?.()
+  }
+  const addSort = () => {
+    sorts.value.push({
+      direction: 'asc',
+    })
   }
 
-  return { sorts, loadSorts, sync }
+  const deleteSort = async (sort: SortType, i: number) => {
+    // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
+    if (sort.id) {
+      await $api.dbTableSort.delete(sort.id)
+    }
+    sorts.value.splice(i, 1)
+  }
+  return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 132fdd3009..e6d81d17ad 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -62,7 +62,6 @@ export default defineNuxtConfig({
       },
     },
   },
-
   experimental: {
     reactivityTransform: true,
     viteNode: false,