From e7d46e53b7744a0bc3cb340b965e7a0f24c40e9c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 11:51:22 +0530
Subject: [PATCH 01/67] refactor(gui-v2): set icon size to avoid shrinking

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue     | 2 ++
 .../nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue     | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
index 9e99331042..4a0162d0d5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
@@ -13,3 +13,5 @@ const emits = defineEmits(['addRow'])
     </div>
   </a-tooltip>
 </template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
index 1f64724d7f..b6606d5703 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -11,3 +11,5 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
     </div>
   </a-tooltip>
 </template>
+
+<style scoped></style>

From 491fad361b014ae9002fe6fe600a287f58cfe018 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 12:05:06 +0530
Subject: [PATCH 02/67] refactor(gui-v2): integrate delete table with delete
 icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         | 54 +--------------
 .../smartsheet-toolbar/DeleteTable.vue        |  9 ++-
 .../nc-gui-v2/composables/useDeleteTable.ts   | 68 +++++++++++++++++++
 3 files changed, 77 insertions(+), 54 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useDeleteTable.ts

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index dbadea1fe1..ba44e7bc09 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -27,6 +27,7 @@ const { isUIAllowed } = useUIPermission()
 const route = useRoute()
 const { tables, loadTables } = useProject(route.params.projectId as string)
 const { closeTab } = useTabs()
+const { deleteTable } = useDeleteTable()
 
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
@@ -128,59 +129,6 @@ const setMenuContext = (type: 'table' | 'main', value?: any) => {
   $e('c:table:create:navdraw:right-click')
 }
 
-const deleteTable = (table: TableType) => {
-  $e('c:table:delete')
-  // 'Click Submit to Delete The table'
-  Modal.confirm({
-    title: `Click Yes to Delete The table : ${table.title}`,
-    okText: 'Yes',
-    okType: 'danger',
-    cancelText: 'No',
-    async onOk() {
-      const { getMeta, removeMeta } = useMetas()
-      try {
-        const meta = (await getMeta(table.id as string)) as TableType
-        const relationColumns = meta?.columns?.filter((c) => c.uidt === UITypes.LinkToAnotherRecord)
-
-        if (relationColumns?.length) {
-          const refColMsgs = await Promise.all(
-            relationColumns.map(async (c, i) => {
-              const refMeta = (await getMeta(
-                (c?.colOptions as LinkToAnotherRecordType)?.fk_related_model_id as string,
-              )) as TableType
-              return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`
-            }),
-          )
-          toast.info(
-            h('div', {
-              innerHTML: `<div style="padding:10px 4px">Unable to delete tables because of the following.
-                <br><br>${refColMsgs.join('<br>')}<br><br>
-                Delete them & try again</div>`,
-            }),
-          )
-          return
-        }
-
-        await $api.dbTable.delete(table?.id as string)
-
-        closeTab({
-          type: TabType.TABLE,
-          id: table.id,
-          title: table.title,
-        })
-
-        await loadTables()
-
-        removeMeta(table.id as string)
-        toast.info(`Deleted table ${table.title} successfully`)
-        $e('a:table:delete')
-      } catch (e: any) {
-        toast.error(await extractSdkResponseErrorMsg(e))
-      }
-    },
-  })
-}
-
 const renameTableDlg = ref(false)
 const renameTableMeta = ref()
 const showRenameTableDlg = (table: TableType, rightClick = false) => {
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
index b6606d5703..21b579cbe4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
+import { inject } from '#imports'
+import useDeleteTable from '~/composables/useDeleteTable'
+import { MetaInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
+
+const meta = inject(MetaInj)
+
+const { deleteTable } = useDeleteTable()
 </script>
 
 <template>
@@ -7,7 +14,7 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
-      <MdiDeleteIcon class="group-hover:(!text-white)" />
+      <MdiDeleteIcon class="group-hover:(!text-white)" @click="deleteTable(meta)" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/composables/useDeleteTable.ts b/packages/nc-gui-v2/composables/useDeleteTable.ts
new file mode 100644
index 0000000000..f529ad660d
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useDeleteTable.ts
@@ -0,0 +1,68 @@
+import { Modal } from 'ant-design-vue'
+import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
+import useTabs, { TabType } from '~/composables/useTabs'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+
+export default () => {
+  const { $e, $api } = useNuxtApp()
+  const toast = useToast()
+  const { getMeta, removeMeta } = useMetas()
+  const { loadTables } = useProject()
+  const { closeTab } = useTabs()
+
+  const deleteTable = (table: TableType) => {
+    $e('c:table:delete')
+    // 'Click Submit to Delete The table'
+    Modal.confirm({
+      title: `Click Yes to Delete The table : ${table.title}`,
+      okText: 'Yes',
+      okType: 'danger',
+      cancelText: 'No',
+      async onOk() {
+        try {
+          const meta = (await getMeta(table.id as string)) as TableType
+          const relationColumns = meta?.columns?.filter((c) => c.uidt === UITypes.LinkToAnotherRecord)
+
+          if (relationColumns?.length) {
+            const refColMsgs = await Promise.all(
+              relationColumns.map(async (c, i) => {
+                const refMeta = (await getMeta(
+                  (c?.colOptions as LinkToAnotherRecordType)?.fk_related_model_id as string,
+                )) as TableType
+                return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`
+              }),
+            )
+            toast.info(
+              h('div', {
+                innerHTML: `<div style="padding:10px 4px">Unable to delete tables because of the following.
+                <br><br>${refColMsgs.join('<br>')}<br><br>
+                Delete them & try again</div>`,
+              }),
+            )
+            return
+          }
+
+          await $api.dbTable.delete(table?.id as string)
+
+          closeTab({
+            type: TabType.TABLE,
+            id: table.id,
+            title: table.title,
+          })
+
+          await loadTables()
+
+          removeMeta(table.id as string)
+          toast.info(`Deleted table ${table.title} successfully`)
+          $e('a:table:delete')
+        } catch (e: any) {
+          toast.error(await extractSdkResponseErrorMsg(e))
+        }
+      },
+    })
+  }
+
+  return { deleteTable }
+}

From 0a146c14dc9fa7cbf686fe21bce91bb6c85b54da Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 14:25:36 +0530
Subject: [PATCH 03/67] wip(gui-v2): lock menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/LockMenu.vue         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
index de9f1e931e..55a6b74351 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
@@ -49,6 +49,15 @@ const Icon = computed(() => {
       return MdiAccountGroupIcon
   }
 })
+
+const changeLockType = (type) => {
+  $e('a:grid:lockmenu', { lockType: type })
+  if (type === 'personal') {
+    return toast.info('Coming soon')
+  }
+  // $emit('input', type);
+  toast.success(`Successfully Switched to ${type} view`)
+}
 </script>
 
 <template>
@@ -62,7 +71,6 @@ const Icon = computed(() => {
           <div class="nc-menu-item">
             <MdiCheckIcon v-if="!vModel || vModel === LockType.Collaborative" />
             <span v-else />
-
             <div>
               <MdiAccountGroupIcon />
               Collaborative view

From d08db24383831c90c044c82060c6d3f1d92802b9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 15:15:20 +0530
Subject: [PATCH 04/67] chore(swagger): add missing props in view schema

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb-sdk/src/lib/Api.ts |  4 ++++
 scripts/sdk/swagger.json           | 32 ++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 7f103927ca..31e43e709b 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -127,6 +127,7 @@ export interface ViewType {
   order?: number;
   fk_model_id?: string;
   slug?: string;
+  lock_type?: 'collaborative' | 'locked' | 'personal';
 }
 
 export interface TableInfoType {
@@ -313,6 +314,7 @@ export interface GridType {
   alias?: string;
   deleted?: boolean;
   order?: number;
+  lock_type?: 'collaborative' | 'locked' | 'personal';
 }
 
 export interface GalleryType {
@@ -331,6 +333,7 @@ export interface GalleryType {
   columns?: GalleryColumnType[];
   fk_model_id?: string;
   fk_cover_image_col_id?: string;
+  lock_type?: 'collaborative' | 'locked' | 'personal';
 }
 
 export interface GalleryColumnType {
@@ -382,6 +385,7 @@ export interface FormType {
   submit_another_form?: boolean;
   columns?: FormColumnType[];
   fk_model_id?: string;
+  lock_type?: 'collaborative' | 'locked' | 'personal';
 }
 
 export interface FormColumnType {
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 3b472b1946..5bd209698c 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6024,6 +6024,14 @@
           },
           "slug": {
             "type": "string"
+          },
+          "lock_type": {
+            "type": "string",
+            "enum": [
+              "collaborative",
+              "locked",
+              "personal"
+            ]
           }
         }
       },
@@ -6852,6 +6860,14 @@
           },
           "order": {
             "type": "number"
+          },
+          "lock_type": {
+            "type": "string",
+            "enum": [
+              "collaborative",
+              "locked",
+              "personal"
+            ]
           }
         },
         "description": ""
@@ -6908,6 +6924,14 @@
           },
           "fk_cover_image_col_id": {
             "type": "string"
+          },
+          "lock_type": {
+            "type": "string",
+            "enum": [
+              "collaborative",
+              "locked",
+              "personal"
+            ]
           }
         }
       },
@@ -7057,6 +7081,14 @@
           },
           "fk_model_id": {
             "type": "string"
+          },
+          "lock_type": {
+            "type": "string",
+            "enum": [
+              "collaborative",
+              "locked",
+              "personal"
+            ]
           }
         }
       },

From f2cd6f783315528fac384ee0c461529e3ecd6370 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 15:55:10 +0530
Subject: [PATCH 05/67] feat(gui-v2): integrate locked view menu with api

- add smartsheet store

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/LockMenu.vue           | 91 +++++++++----------
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |  7 +-
 .../composables/useSmartsheetStore.ts         | 30 ++++++
 3 files changed, 80 insertions(+), 48 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useSmartsheetStore.ts

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
index 55a6b74351..2a216287fd 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
@@ -1,29 +1,21 @@
 <script lang="ts" setup>
 import { computed } from '@vue/reactivity'
 import { useToast } from 'vue-toastification'
+import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
 import MdiCheckIcon from '~icons/mdi/check-bold'
 
-interface Props {
-  modelValue?: LockType
-}
-
-const props = defineProps<Props>()
-
-const emits = defineEmits(['update:modelValue'])
-
 enum LockType {
   Personal = 'personal',
   Locked = 'locked',
   Collaborative = 'collaborative',
 }
 
-const vModel = useVModel(props, 'modelValue', emits)
-
+const { view, $api } = useSmartsheetStoreOrThrow()
 const { $e } = useNuxtApp()
-
 const toast = useToast()
 
 function changeLockType(type: LockType) {
@@ -32,14 +24,20 @@ function changeLockType(type: LockType) {
   if (type === 'personal') {
     return toast.info('Coming soon', { timeout: 3000 })
   }
-
-  vModel.value = type
-
-  toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
+  try {
+    view.value.lock_type = type
+    $api.dbView.update(view.value.id as string, {
+      lock_type: type,
+    })
+
+    toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
+  } catch (e) {
+    toast.error(extractSdkResponseErrorMsg(e))
+  }
 }
 
 const Icon = computed(() => {
-  switch (vModel.value) {
+  switch (view?.value?.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -49,15 +47,6 @@ const Icon = computed(() => {
       return MdiAccountGroupIcon
   }
 })
-
-const changeLockType = (type) => {
-  $e('a:grid:lockmenu', { lockType: type })
-  if (type === 'personal') {
-    return toast.info('Coming soon')
-  }
-  // $emit('input', type);
-  toast.success(`Successfully Switched to ${type} view`)
-}
 </script>
 
 <template>
@@ -68,32 +57,38 @@ const changeLockType = (type) => {
     <template #overlay>
       <div class="min-w-[350px] max-w-[500px] shadow bg-white">
         <div>
-          <div class="nc-menu-item">
-            <MdiCheckIcon v-if="!vModel || vModel === LockType.Collaborative" />
-            <span v-else />
+          <div class="nc-menu-item" @click="changeLockType(LockType.Collaborative)">
             <div>
-              <MdiAccountGroupIcon />
-              Collaborative view
-              <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
+              <MdiCheckIcon v-if="!view?.lock_type || view?.lock_type === LockType.Collaborative" />
+              <span v-else />
+              <div>
+                <MdiAccountGroupIcon />
+                Collaborative view
+                <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
+              </div>
             </div>
           </div>
-          <div class="nc-menu-item">
-            <MdiCheckIcon v-if="vModel === LockType.Locked" />
-            <span v-else />
+          <div class="nc-menu-item" @click="changeLockType(LockType.Locked)">
             <div>
-              <MdiLockOutlineIcon />
-              Locked View
-              <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
+              <MdiCheckIcon v-if="view.lock_type === LockType.Locked" />
+              <span v-else />
+              <div>
+                <MdiLockOutlineIcon />
+                Locked View
+                <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
+              </div>
             </div>
           </div>
-          <div class="nc-menu-item">
-            <MdiCheckIcon v-if="vModel === LockType.Personal" />
-            <span v-else />
+          <div class="nc-menu-item" @click="changeLockType(LockType.Personal)">
             <div>
-              <MdiAccountIcon />
-              Personal view
-              <div class="nc-subtitle">
-                Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
+              <MdiCheckIcon v-if="view.lock_type === LockType.Personal" />
+              <span v-else />
+              <div>
+                <MdiAccountIcon />
+                Personal view
+                <div class="nc-subtitle">
+                  Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
+                </div>
               </div>
             </div>
           </div>
@@ -104,8 +99,12 @@ const changeLockType = (type) => {
 </template>
 
 <style scoped>
-.nc-menu-item {
-  @apply grid grid-cols-[30px,auto] gap-2  p-4;
+.nc-menu-item > div {
+  @apply grid grid-cols-[30px,auto] gap-2  p-2 align-center;
+}
+
+.nc-menu-item > div > svg {
+  align-self: center;
 }
 
 .nc-menu-option > :first-child {
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index ac204ddcc6..797a59f27b 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType } from 'nocodb-sdk'
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports'
@@ -19,7 +19,7 @@ const tabMeta = inject(
   computed(() => ({} as TabItem)),
 )
 
-const meta = computed(() => metas.value?.[tabMeta?.value?.id as string])
+const meta = computed<TableType>(() => metas.value?.[tabMeta?.value?.id as string])
 
 watchEffect(async () => {
   await getMeta(tabMeta?.value?.id as string)
@@ -27,6 +27,7 @@ watchEffect(async () => {
 
 const reloadEventHook = createEventHook<void>()
 
+// todo: move to store
 provide(MetaInj, meta)
 provide(TabMetaInj, tabMeta)
 provide(ActiveViewInj, activeView)
@@ -35,6 +36,8 @@ provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
 provide(RightSidebarInj, ref(true))
 
+useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta.id) await getMeta(newTabMeta.id)
 })
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
new file mode 100644
index 0000000000..9189a2a122
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -0,0 +1,30 @@
+import { createInjectionState } from '@vueuse/core'
+import type { TableType, ViewType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useNuxtApp } from '#app'
+
+const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
+  const { $api } = useNuxtApp()
+
+  // state
+
+  // getters
+  const isLocked = computed(() => view?.value?.lock_type === 'locked')
+
+  // actions
+
+  return {
+    view,
+    meta,
+    isLocked,
+    $api,
+  }
+})
+
+export { useProvideSmartsheetStore }
+
+export function useSmartsheetStoreOrThrow() {
+  const smartsheetStore = useSmartsheetStore()
+  if (smartsheetStore == null) throw new Error('Please call `useSmartsheetStore` on the appropriate parent component')
+  return smartsheetStore
+}

From 91b0ddbbd5368a3988733132c48cc25f6d7ad33f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 17:31:11 +0530
Subject: [PATCH 06/67] wip(gui-v2): share view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ShareView.vue          | 131 +++++++++++++++++-
 1 file changed, 126 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 5d22870e40..160c965c88 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -1,13 +1,134 @@
 <script lang="ts" setup>
-import MdiOpenInNew from '~icons/mdi/open-in-new'
-import { useUIPermission } from '#imports'
+import { useClipboard } from '@vueuse/core'
+import { ViewTypes } from 'nocodb-sdk'
+import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
+import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
+import MdiCopyIcon from '~icons/mdi/content-copy'
 
 const { isUIAllowed } = useUIPermission()
+const { view, $api } = useSmartsheetStoreOrThrow()
+
+const { copy } = useClipboard()
+
+let showShareModel = $ref(false)
+const shared = ref()
+
+const source = ref('Hello')
+
+const genShareLink = async () => {
+  shared.value = await $api.dbViewShare.create(view.value.id as string)
+  // shared.meta = shared.meta && typeof shared.meta === 'string' ? JSON.parse(shared.meta) : shared.meta;
+  // // todo: url
+  // this.shareLink = shared;
+  // this.passwordProtect = shared.password !== null;
+  // this.allowCSVDownload = shared.meta.allowCSVDownload;
+  showShareModel = true
+}
+
+const sharedViewUrl = computed(() => {
+  if (!shared.value) return
+  let viewType
+
+  switch (shared.value.type) {
+    case ViewTypes.FORM:
+      viewType = 'form'
+      break
+    case ViewTypes.KANBAN:
+      viewType = 'kanban'
+      break
+    default:
+      viewType = 'view'
+  }
+
+  // todo: get dashboard url
+  return `#/nc/${viewType}/${shared.value.uuid}`
+})
 </script>
 
 <template>
-  <div v-t="['c:view:share']" class="nc-sidebar-right-item hover:after:bg-secondary/75 group">
-    <MdiOpenInNew class="group-hover:(!text-white)" />
-    {{ $t('activity.shareView') }}
+  <div>
+    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small">
+      <div class="flex align-center gap-1" @click="genShareLink">
+        <MdiOpenInNewIcon class="text-grey" />
+        <!-- Share View -->
+        {{ $t('activity.shareView') }}
+      </div>
+    </a-button>
+
+    <!-- This view is shared via a private link -->
+    <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')">
+      <div class="share-link-box nc-share-link-box">
+        <div class="flex-1 h-min">{{ sharedViewUrl }}</div>
+        <!--        <v-spacer /> -->
+        <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
+          <MdiOpenInNewIcon class="text-sm text-grey mt-1" />
+        </a>
+        <MdiCopyIcon class="text-grey text-sm cursor-pointer" @click="copy(sharedViewUrl)" />
+      </div>
+      <!--
+                <v-expansion-panels v-model="advanceOptionsPanel" class="mx-auto" flat>
+                  <v-expansion-panel>
+                    <v-expansion-panel-header hide-actions>
+                      <v-spacer />
+                      <span class="grey&#45;&#45;text caption"
+                        >More Options
+                        <v-icon color="grey" small> mdi-chevron-{{ advanceOptionsPanel === 0 ? 'up' : 'down' }} </v-icon></span
+                      >
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                      <v-checkbox
+                        v-model="passwordProtect"
+                        class="caption"
+                        :label="$t('msg.info.beforeEnablePwd')"
+                        hide-details
+                        dense
+                        @change="onPasswordProtectChange"
+                      />
+                      <div v-if="passwordProtect" class="d-flex flex-column align-center justify-center">
+                        <v-text-field
+                          v-model="shareLink.password"
+                          autocomplete="new-password"
+                          browser-autocomplete="new-password"
+                          class="password-field mr-2 caption"
+                          style="max-width: 230px"
+                          :type="showShareLinkPassword ? 'text' : 'password'"
+                          :hint="$t('placeholder.password.enter')"
+                          persistent-hint
+                          dense
+                          solo
+                          flat
+                        >
+                          <template #append>
+                            <v-icon small @click="showShareLinkPassword = !showShareLinkPassword">
+                              {{ showShareLinkPassword ? 'visibility_off' : 'visibility' }}
+                            </v-icon>
+                          </template>
+                        </v-text-field>
+                        <v-btn color="primary" class="caption" small @click="saveShareLinkPassword">
+                          &lt;!&ndash; Save password &ndash;&gt;
+                          {{ $t('placeholder.password.save') }}
+                        </v-btn>
+                      </div>
+                      <v-checkbox
+                        v-if="selectedView && selectedView.type === viewTypes.GRID"
+                        v-model="allowCSVDownload"
+                        class="caption"
+                        label="Allow Download"
+                        hide-details
+                        dense
+                        @change="onAllowCSVDownloadChange"
+                      />
+                    </v-expansion-panel-content>
+                  </v-expansion-panel>
+                </v-expansion-panels> -->
+      <!--      </v-container> -->
+      <!--      </v-card> -->
+    </a-modal>
   </div>
 </template>
+
+<style scoped>
+.share-link-box {
+  @apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded;
+}
+</style>

From fad3707f180cd05f1be37a112b78c74dc8d27939 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 20:09:38 +0530
Subject: [PATCH 07/67] wip(gui-v2): share view list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/MoreActions.vue        | 76 +++++++++-------
 .../smartsheet-toolbar/SharedViewList.vue     | 89 +++++++++++++++++++
 2 files changed, 131 insertions(+), 34 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index bd45f04b3b..f1255ec183 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -13,6 +13,8 @@ import MdiUploadIcon from '~icons/mdi/upload-outline'
 import MdiHookIcon from '~icons/mdi/hook'
 import MdiViewListIcon from '~icons/mdi/view-list-outline'
 
+const sharedViewListDlg = ref(false)
+
 // todo : replace with inject
 const publicViewId = null
 const { project } = useProject()
@@ -87,40 +89,46 @@ const exportCsv = async () => {
 </script>
 
 <template>
-  <a-dropdown>
-    <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
-      <div class="flex gap-1 align-center">
-        <MdiFlashIcon class="text-grey" />
-        <!-- More -->
-        {{ $t('general.more') }}
-        <MdiMenuDownIcon class="text-grey" />
-      </div>
-    </a-button>
-    <template #overlay>
-      <div class="bg-white shadow">
-        <div>
-          <div class="nc-menu-item" @click.stop="exportCsv">
-            <MdiDownloadIcon />
-            <!-- Download as CSV -->
-            {{ $t('activity.downloadCSV') }}
-          </div>
-          <div class="nc-menu-item" @click.stop>
-            <MdiUploadIcon />
-            <!-- Upload CSV -->
-            {{ $t('activity.uploadCSV') }}
-          </div>
-          <div class="nc-menu-item" @click.stop>
-            <MdiViewListIcon />
-            <!-- Shared View List -->
-            {{ $t('activity.listSharedView') }}
-          </div>
-          <div class="nc-menu-item" @click.stop>
-            <MdiHookIcon />
-            <!-- todo: i18n -->
-            Webhook
+  <div>
+    <a-dropdown>
+      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+        <div class="flex gap-1 align-center">
+          <MdiFlashIcon class="text-grey" />
+          <!-- More -->
+          {{ $t('general.more') }}
+          <MdiMenuDownIcon class="text-grey" />
+        </div>
+      </a-button>
+      <template #overlay>
+        <div class="bg-white shadow">
+          <div>
+            <div class="nc-menu-item" @click.stop="exportCsv">
+              <MdiDownloadIcon />
+              <!-- Download as CSV -->
+              {{ $t('activity.downloadCSV') }}
+            </div>
+            <div class="nc-menu-item" @click.stop>
+              <MdiUploadIcon />
+              <!-- Upload CSV -->
+              {{ $t('activity.uploadCSV') }}
+            </div>
+            <div class="nc-menu-item" @click.stop="sharedViewListDlg = true">
+              <MdiViewListIcon />
+              <!-- Shared View List -->
+              {{ $t('activity.listSharedView') }}
+            </div>
+            <div class="nc-menu-item" @click.stop>
+              <MdiHookIcon />
+              <!-- todo: i18n -->
+              Webhook
+            </div>
           </div>
         </div>
-      </div>
-    </template>
-  </a-dropdown>
+      </template>
+    </a-dropdown>
+
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="90vw">
+      <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
+    </a-modal>
+  </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
new file mode 100644
index 0000000000..fc4fd9f036
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { onMounted } from '#imports'
+
+const { view, $api, meta } = useSmartsheetStoreOrThrow()
+
+let isLoading = $ref(false)
+// let activeSharedView = $ref(null)
+const sharedViewList = ref()
+
+const loadSharedViewsList = async () => {
+  isLoading = true
+  const list = await $api.dbViewShare.list(meta.value?.id as string)
+
+  console.log(unref(sharedViewList))
+  console.log(list)
+
+  sharedViewList.value = list
+
+  // todo: show active view in list separately
+  // const index = sharedViewList.value.findIndex((v) => {
+  //   return view?.value?.id === v.id
+  // })
+  //
+  // if (index > -1) {
+  //   activeSharedView = sharedViewList.value.splice(index, 1)[0]
+  // } else {
+  //   activeSharedView = null
+  // }
+
+  isLoading = false
+}
+
+onMounted(loadSharedViewsList)
+const test = (t) => console.log(t)
+</script>
+
+<template>
+  <div class="w-full">
+    <a-table class="" size="small" :data-source="sharedViewList" :pagination="{ position: ['bottomCenter'] }">
+      <!-- View name -->
+      <a-table-column key="title" :title="$t('labels.viewName')" data-index="title">
+        <template #default="{ text }">
+          <div class="text-xs" :title="text">
+            {{ text }}
+          </div>
+        </template>
+      </a-table-column>
+      <!-- View Link -->
+      <a-table-column key="title" :title="$t('labels.viewLink')" data-index="title">
+        <template #default="{ record }">
+          <div @click="test(rest)">click</div>
+          <!--          <nuxt-link :to="sharedViewUrl(currentView)">
+            {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
+          </nuxt-link> -->
+        </template>
+      </a-table-column>
+      <!-- Password -->
+      <a-table-column key="password" :title="$t('labels.password')" data-index="title">
+        <template #default="{ text }">
+          {{ text }}
+          <!--          <span>{{ currentView.showPassword ? currentView.password : '***************************' }}</span>
+          <v-icon small @click="$set(currentView, 'showPassword', !currentView.showPassword)">
+            {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
+          </v-icon> -->
+        </template>
+      </a-table-column>
+      <!-- Password -->
+      <a-table-column key="meta" title="Download allowed" data-index="title">
+        <template #default="{ text }">
+          {{ text }}
+          <!--          <template v-if="'meta' in currentView"> -->
+          <!--            <span>{{ renderAllowCSVDownload(currentView) }}</span> -->
+          <!--          </template> -->
+        </template>
+      </a-table-column>
+      <!-- Actions -->
+      <a-table-column key="id" :title="$t('labels.actions')" data-index="title">
+        <template #default="{ record }">
+          <div class="text-xs" :title="text">
+            <!--            <v-icon small @click="copyLink(currentView)"> mdi-content-copy </v-icon> -->
+            <!--            <v-icon small @click="deleteLink(currentView.id)"> mdi-delete-outline </v-icon> -->
+          </div>
+        </template>
+      </a-table-column>
+    </a-table>
+  </div>
+</template>
+
+<style scoped></style>

From f3bea4d8d76e263f8277856dea9506e1642de342 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 22:24:43 +0530
Subject: [PATCH 08/67] feat(gui-v2): add password toggle icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/SharedViewList.vue     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index fc4fd9f036..f829d9752a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { onMounted } from '#imports'
+import MdiVisibilityOnIcon from '~icons/mdi/visibility'
+import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
 
 const { view, $api, meta } = useSmartsheetStoreOrThrow()
 
@@ -48,7 +50,6 @@ const test = (t) => console.log(t)
       <!-- View Link -->
       <a-table-column key="title" :title="$t('labels.viewLink')" data-index="title">
         <template #default="{ record }">
-          <div @click="test(rest)">click</div>
           <!--          <nuxt-link :to="sharedViewUrl(currentView)">
             {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
           </nuxt-link> -->
@@ -56,15 +57,17 @@ const test = (t) => console.log(t)
       </a-table-column>
       <!-- Password -->
       <a-table-column key="password" :title="$t('labels.password')" data-index="title">
-        <template #default="{ text }">
-          {{ text }}
-          <!--          <span>{{ currentView.showPassword ? currentView.password : '***************************' }}</span>
-          <v-icon small @click="$set(currentView, 'showPassword', !currentView.showPassword)">
-            {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
-          </v-icon> -->
+        <template #default="{ text, record }">
+          <div class="flex align-center items-center gap-1">
+            <span class="h-min">{{ record.showPassword ? text : '***************************' }}</span>
+            <component
+              :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
+              @click="record.showPassword = !record.showPassword"
+            />
+          </div>
         </template>
       </a-table-column>
-      <!-- Password -->
+      <!-- Todo: i18n  -->
       <a-table-column key="meta" title="Download allowed" data-index="title">
         <template #default="{ text }">
           {{ text }}

From a1892de55e3c1c5f4f245fd4d31dbb6316a37baf Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 22:49:40 +0530
Subject: [PATCH 09/67] feat(gui-v2): shared view list modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/SharedViewList.vue     | 83 ++++++++++++++++---
 1 file changed, 70 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index f829d9752a..4b9a9c2f18 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,13 +1,33 @@
 <script lang="ts" setup>
+import { useClipboard } from '@vueuse/core'
+import { ViewTypes } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
 import { onMounted } from '#imports'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
+import MdiCopyIcon from '~icons/mdi/content-copy'
+import MdiDeleteIcon from '~icons/mdi/delete-outline'
+
+interface SharedViewType {
+  password: string
+  title: string
+  uuid: string
+  type: ViewTypes
+  meta: string | Record<string, any>
+  showPassword?: boolean
+}
 
 const { view, $api, meta } = useSmartsheetStoreOrThrow()
+const { copy } = useClipboard()
+const toast = useToast()
 
 let isLoading = $ref(false)
 // let activeSharedView = $ref(null)
-const sharedViewList = ref()
+const sharedViewList = ref<SharedViewType[]>()
+
+// todo: replace with inject/composable
+const dashboardUrl = ''
 
 const loadSharedViewsList = async () => {
   isLoading = true
@@ -33,7 +53,45 @@ const loadSharedViewsList = async () => {
 }
 
 onMounted(loadSharedViewsList)
-const test = (t) => console.log(t)
+
+const sharedViewUrl = (view: SharedViewType) => {
+  let viewType
+  switch (view.type) {
+    case ViewTypes.FORM:
+      viewType = 'form'
+      break
+    case ViewTypes.KANBAN:
+      viewType = 'kanban'
+      break
+    default:
+      viewType = 'view'
+  }
+  return `/nc/${viewType}/${view.uuid}`
+}
+
+const renderAllowCSVDownload = (view: SharedViewType) => {
+  if (view.type === ViewTypes.GRID) {
+    view.meta = (view.meta && typeof view.meta === 'string' ? JSON.parse(view.meta) : view.meta) as Record<string, any>
+    return view.meta.allowCSVDownload ? '✔️' : '❌'
+  } else {
+    return 'N/A'
+  }
+}
+
+const copyLink = (view: SharedViewType) => {
+  copy(`${dashboardUrl}/${sharedViewUrl(view)}`)
+  toast.info('Copied to clipboard')
+}
+
+const deleteLink = async (id: string) => {
+  try {
+    await $api.dbViewShare.delete(id)
+    toast.success('Deleted shared view successfully')
+    await loadSharedViewsList()
+  } catch (e) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
 </script>
 
 <template>
@@ -50,9 +108,9 @@ const test = (t) => console.log(t)
       <!-- View Link -->
       <a-table-column key="title" :title="$t('labels.viewLink')" data-index="title">
         <template #default="{ record }">
-          <!--          <nuxt-link :to="sharedViewUrl(currentView)">
-            {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
-          </nuxt-link> -->
+          <nuxt-link :to="sharedViewUrl(record)">
+            {{ `${dashboardUrl}/${sharedViewUrl(record)}` }}
+          </nuxt-link>
         </template>
       </a-table-column>
       <!-- Password -->
@@ -69,19 +127,18 @@ const test = (t) => console.log(t)
       </a-table-column>
       <!-- Todo: i18n  -->
       <a-table-column key="meta" title="Download allowed" data-index="title">
-        <template #default="{ text }">
-          {{ text }}
-          <!--          <template v-if="'meta' in currentView"> -->
-          <!--            <span>{{ renderAllowCSVDownload(currentView) }}</span> -->
-          <!--          </template> -->
+        <template #default="{ record }">
+          <template v-if="'meta' in record">
+            <span>{{ renderAllowCSVDownload(record) }}</span>
+          </template>
         </template>
       </a-table-column>
       <!-- Actions -->
       <a-table-column key="id" :title="$t('labels.actions')" data-index="title">
         <template #default="{ record }">
-          <div class="text-xs" :title="text">
-            <!--            <v-icon small @click="copyLink(currentView)"> mdi-content-copy </v-icon> -->
-            <!--            <v-icon small @click="deleteLink(currentView.id)"> mdi-delete-outline </v-icon> -->
+          <div class="text-sm flex gap-2" :title="text">
+            <MdiCopyIcon @click="copyLink(record)" />
+            <MdiDeleteIcon @click="deleteLink(record.id)" />
           </div>
         </template>
       </a-table-column>

From e150e4bd13d223c902bc9f9ba7bf453448fe708f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 22:52:34 +0530
Subject: [PATCH 10/67] chore(gui-v2): add missing import

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 4b9a9c2f18..0f28592c35 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -3,6 +3,7 @@ import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
 import { onMounted } from '#imports'
+import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'

From 824a8462ca991f9329bd1b7db65c718823098ef8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 23:40:16 +0530
Subject: [PATCH 11/67] feat(gui-v2): add password and csv download option in
 share link

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ShareView.vue          | 141 ++++++++++--------
 1 file changed, 78 insertions(+), 63 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 160c965c88..b0ea17de53 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
+import { computed } from 'vue'
+import { useToast } from 'vue-toastification'
+import { useNuxtApp } from '#app'
 import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 
@@ -9,19 +13,31 @@ const { isUIAllowed } = useUIPermission()
 const { view, $api } = useSmartsheetStoreOrThrow()
 
 const { copy } = useClipboard()
+const toast = useToast()
+const { $e } = useNuxtApp()
 
 let showShareModel = $ref(false)
+const passwordProtected = $ref(false)
 const shared = ref()
 
-const source = ref('Hello')
+const allowCSVDownload = computed({
+  get() {
+    return !!(shared.value?.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta)
+      ?.allowCSVDownload
+  },
+  set(allow) {
+    shared.value.meta = { allowCSVDownload: allow }
+    saveAllowCSVDownload()
+  },
+})
 
 const genShareLink = async () => {
   shared.value = await $api.dbViewShare.create(view.value.id as string)
   // shared.meta = shared.meta && typeof shared.meta === 'string' ? JSON.parse(shared.meta) : shared.meta;
   // // todo: url
-  // this.shareLink = shared;
-  // this.passwordProtect = shared.password !== null;
-  // this.allowCSVDownload = shared.meta.allowCSVDownload;
+  // shareLink = shared;
+  // passwordProtect = shared.password !== null;
+  // allowCSVDownload = shared.meta.allowCSVDownload;
   showShareModel = true
 }
 
@@ -43,6 +59,38 @@ const sharedViewUrl = computed(() => {
   // todo: get dashboard url
   return `#/nc/${viewType}/${shared.value.uuid}`
 })
+
+async function saveAllowCSVDownload () {
+  try {
+    const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
+
+    // todo: update swagger
+    await $api.dbViewShare.update(shared.value.id, {
+      meta,
+    } as any)
+    toast.success('Successfully updated')
+  } catch (e) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+  if (allowCSVDownload?.value) {
+    $e('a:view:share:enable-csv-download')
+  } else {
+    $e('a:view:share:disable-csv-download')
+  }
+}
+
+const saveShareLinkPassword = async () => {
+  try {
+    await $api.dbViewShare.update(shared.value.id, {
+      password: shared.value.password,
+    })
+    toast.success('Successfully updated')
+  } catch (e) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+
+  $e('a:view:share:enable-pwd')
+}
 </script>
 
 <template>
@@ -56,7 +104,7 @@ const sharedViewUrl = computed(() => {
     </a-button>
 
     <!-- This view is shared via a private link -->
-    <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')">
+    <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null">
       <div class="share-link-box nc-share-link-box">
         <div class="flex-1 h-min">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
@@ -65,64 +113,31 @@ const sharedViewUrl = computed(() => {
         </a>
         <MdiCopyIcon class="text-grey text-sm cursor-pointer" @click="copy(sharedViewUrl)" />
       </div>
-      <!--
-                <v-expansion-panels v-model="advanceOptionsPanel" class="mx-auto" flat>
-                  <v-expansion-panel>
-                    <v-expansion-panel-header hide-actions>
-                      <v-spacer />
-                      <span class="grey&#45;&#45;text caption"
-                        >More Options
-                        <v-icon color="grey" small> mdi-chevron-{{ advanceOptionsPanel === 0 ? 'up' : 'down' }} </v-icon></span
-                      >
-                    </v-expansion-panel-header>
-                    <v-expansion-panel-content>
-                      <v-checkbox
-                        v-model="passwordProtect"
-                        class="caption"
-                        :label="$t('msg.info.beforeEnablePwd')"
-                        hide-details
-                        dense
-                        @change="onPasswordProtectChange"
-                      />
-                      <div v-if="passwordProtect" class="d-flex flex-column align-center justify-center">
-                        <v-text-field
-                          v-model="shareLink.password"
-                          autocomplete="new-password"
-                          browser-autocomplete="new-password"
-                          class="password-field mr-2 caption"
-                          style="max-width: 230px"
-                          :type="showShareLinkPassword ? 'text' : 'password'"
-                          :hint="$t('placeholder.password.enter')"
-                          persistent-hint
-                          dense
-                          solo
-                          flat
-                        >
-                          <template #append>
-                            <v-icon small @click="showShareLinkPassword = !showShareLinkPassword">
-                              {{ showShareLinkPassword ? 'visibility_off' : 'visibility' }}
-                            </v-icon>
-                          </template>
-                        </v-text-field>
-                        <v-btn color="primary" class="caption" small @click="saveShareLinkPassword">
-                          &lt;!&ndash; Save password &ndash;&gt;
-                          {{ $t('placeholder.password.save') }}
-                        </v-btn>
-                      </div>
-                      <v-checkbox
-                        v-if="selectedView && selectedView.type === viewTypes.GRID"
-                        v-model="allowCSVDownload"
-                        class="caption"
-                        label="Allow Download"
-                        hide-details
-                        dense
-                        @change="onAllowCSVDownloadChange"
-                      />
-                    </v-expansion-panel-content>
-                  </v-expansion-panel>
-                </v-expansion-panels> -->
-      <!--      </v-container> -->
-      <!--      </v-card> -->
+
+      <a-collapse ghost>
+        <a-collapse-panel key="1" header="More Options">
+          <div class="mb-2">
+            <a-checkbox v-model:checked="passwordProtected" class="text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+            <!--           todo: add password toggle -->
+            <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
+              <a-input
+                v-model:value="shared.password"
+                size="small"
+                class="max-w-[250px]"
+                :placeholder="$t('placeholder.password.enter')"
+              />
+              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">{{
+                $t('placeholder.password.save')
+              }}</a-button>
+            </div>
+          </div>
+          <div>
+            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="text-xs"
+              >Allow Download
+            </a-checkbox>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
     </a-modal>
   </div>
 </template>

From cada1df6065d5d9947bf35e12b27b4abcb397ef3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 23:42:11 +0530
Subject: [PATCH 12/67] fix(gui-v2): show correct password on password toggle

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/SharedViewList.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 0f28592c35..fe039bc7ce 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -116,9 +116,9 @@ const deleteLink = async (id: string) => {
       </a-table-column>
       <!-- Password -->
       <a-table-column key="password" :title="$t('labels.password')" data-index="title">
-        <template #default="{ text, record }">
+        <template #default="{ record }">
           <div class="flex align-center items-center gap-1">
-            <span class="h-min">{{ record.showPassword ? text : '***************************' }}</span>
+            <span class="h-min">{{ record.showPassword ? record.password : '***************************' }}</span>
             <component
               :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
               @click="record.showPassword = !record.showPassword"

From 9105187312e0998a57aa4c9e38067a81c44f97fd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 23:42:46 +0530
Subject: [PATCH 13/67] refactor(gui-v2): password field type

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index b0ea17de53..74f6b3c48c 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -60,7 +60,7 @@ const sharedViewUrl = computed(() => {
   return `#/nc/${viewType}/${shared.value.uuid}`
 })
 
-async function saveAllowCSVDownload () {
+async function saveAllowCSVDownload() {
   try {
     const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
 
@@ -124,6 +124,7 @@ const saveShareLinkPassword = async () => {
                 v-model:value="shared.password"
                 size="small"
                 class="max-w-[250px]"
+                type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
               <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">{{

From 507e8fe829718b30dbd14d428de540827196edb9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 23:44:30 +0530
Subject: [PATCH 14/67] refactor(gui-v2): button size correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 5332e17d78..ffc4dfc2dc 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -215,7 +215,7 @@ watch(
       </template>
     </div>
 
-    <a-button small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
+    <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
       <div class="flex align-center gap-1">
         <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
         <MdiAddIcon />

From c949fd063e60955c060bf7a5263ff4009f4b0d25 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 00:11:17 +0530
Subject: [PATCH 15/67] feat(gui-v2): show/hide system fields

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/FieldsMenu.vue         | 35 ++++++++++---------
 .../nc-gui-v2/composables/useViewColumns.ts   |  6 +---
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index fc947db923..f94e12a6e3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { TableType } from 'nocodb-sdk'
-import type { ComputedRef } from 'vue'
 import { computed, inject } from 'vue'
 import Draggable from 'vuedraggable'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
@@ -39,8 +37,8 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-  sortedFields,
-} = useViewColumns(activeView, meta as ComputedRef<TableType>, false, () => reloadDataHook?.trigger())
+  // sortedFields,
+} = useViewColumns(activeView, meta, false, () => reloadDataHook?.trigger())
 
 watch(
   () => (activeView?.value as any)?.id,
@@ -61,17 +59,20 @@ watch(
 
 const onMove = (event: unknown) => {
   // todo : sync with server
-  // if (!sortedFields?.value) return
-  // if (sortedFields?.value.length - 1 === event.moved.newIndex) {
-  //   sortedFields.value[event.moved.newIndex].order = sortedFields.value[event.moved.newIndex - 1].order + 1
-  // } else if (event.moved.newIndex === 0) {
-  //   sortedFields.value[event.moved.newIndex].order = sortedFields.value[1].order / 2
-  // } else {
-  //   sortedFields.value[event.moved.newIndex].order =
-  //     (sortedFields?.value[event.moved.newIndex - 1].order + sortedFields?.value[event.moved.newIndex + 1].order) / 2
-  //   // );
-  // }
-  // saveOrUpdate(sortedFields[event.moved.newIndex], event.moved.newIndex);
+  if (!fields?.value) return
+
+  if (fields.value.length < 2) return
+
+  if (fields?.value.length - 1 === event.moved.newIndex) {
+    fields.value[event.moved.newIndex].order = (fields.value[event.moved.newIndex - 1].order || 1) + 1
+  } else if (event.moved.newIndex === 0) {
+    fields.value[event.moved.newIndex].order = (fields?.value[1].order || 1) / 2
+  } else {
+    fields.value[event.moved.newIndex].order =
+      ((fields?.value[event.moved.newIndex - 1].order || 1) + (fields?.value[event.moved.newIndex + 1].order || 1)) / 2
+    // );
+  }
+  saveOrUpdate(fields.value[event.moved.newIndex], event.moved.newIndex)
   $e('a:fields:reorder')
 }
 </script>
@@ -93,9 +94,9 @@ const onMove = (event: unknown) => {
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
         <div class="nc-fields-list py-1">
-          <Draggable :list="sortedFields" @change="onMove($event)">
+          <Draggable :list="fields" @change="onMove($event)">
             <template #item="{ element: field }">
-              <div :key="field.id" class="px-2 py-1 flex" @click.stop>
+              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
                   <span class="text-xs">{{ field.title }}</span>
                 </a-checkbox>
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 2694cfc49f..8d6c96caa8 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -42,6 +42,7 @@ export function useViewColumns(
           fk_column_id: c.id,
           ...(fieldById[c.id as string] ? fieldById[c.id as string] : {}),
           order: (fieldById[c.id as string] && fieldById[c.id as string].order) || order++,
+          system: isSystemColumn(fieldById[c.fk_model_id as string]?.type as ColumnType),
         }))
         .sort((a, b) => a.order - b.order)
     } else if (isPublic) {
@@ -125,10 +126,6 @@ export function useViewColumns(
       ?.sort((c1, c2) => c1.order - c2.order)
       ?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) || []) as ColumnType[]
   })
-  const sortedFields = computed<ColumnType[]>(() => {
-    return (fields?.value?.sort((c1, c2) => c1.order - c2.order)?.map((c) => metaColumnById?.value?.[c.fk_column_id as string]) ||
-      []) as ColumnType[]
-  })
 
   // reload view columns when table meta changes
   watch(meta, () => loadViewColumns())
@@ -143,6 +140,5 @@ export function useViewColumns(
     saveOrUpdate,
     sortedAndFilteredFields,
     showSystemFields,
-    sortedFields,
   }
 }

From 3fce3c806e813d0c397b9b5a9eeb8967b8ebc04f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 00:36:48 +0530
Subject: [PATCH 16/67] feat(gui-v2): grouped filter

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue       | 71 ++++++++++---------
 .../nc-gui-v2/composables/useViewFilters.ts   | 16 ++++-
 2 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index ffc4dfc2dc..6756ba6aac 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
+import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { useNuxtApp } from '#app'
 import { inject, useViewFilters } from '#imports'
@@ -8,6 +9,7 @@ import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
+
 const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
 
 const meta = inject(MetaInj)
@@ -16,9 +18,13 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { $e } = useNuxtApp()
 
-const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter } = useViewFilters(activeView, parentId, () => {
-  reloadDataHook?.trigger()
-})
+const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup } = useViewFilters(
+  activeView,
+  parentId,
+  () => {
+    reloadDataHook?.trigger()
+  },
+)
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
@@ -70,6 +76,13 @@ watch(
   },
   { immediate: true },
 )
+
+const nestedFilter = ref()
+
+const logicalOps = [
+  { value: 'and', text: 'AND' },
+  { value: 'or', text: 'OR' },
+]
 </script>
 
 <template>
@@ -77,7 +90,7 @@ watch(
     <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 v-if="filter.is_group" :key="i" style="grid-column: span 5; padding: 6px" class="">
             <div class="d-flex" style="gap: 6px; padding: 0 6px">
               <!--              <v-icon
                 v-if="!filter.readOnly"
@@ -100,33 +113,20 @@ watch(
               <a-select
                 v-model:value="filter.logical_op"
                 class="flex-shrink-1 flex-grow-0 elevation-0 caption"
-                :items="['and', 'or']"
-                density="compact"
-                variant="solo"
-                hide-details
+                :options="logicalOps"
                 placeholder="Group op"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
-                <!--                <template #item="{ item }"> -->
-                <!--                  <span class="caption font-weight-regular">{{ item }}</span> -->
-                <!--                </template> -->
               </a-select>
             </div>
-            <!--            <column-filter
+            <SmartsheetToolbarColumnFilter
               v-if="filter.id || shared"
               ref="nestedFilter"
               v-model="filter.children"
               :parent-id="filter.id"
-              :view-id="viewId"
               nested
-              :meta="meta"
-              :shared="shared"
-              :web-hook="webHook"
-              :hook-id="hookId"
-              @updated="$emit('updated')"
-              @input="$emit('input', filters)"
-            /> -->
+            />
           </div>
           <template v-else>
             <!--                        <v-icon
@@ -152,10 +152,7 @@ watch(
               v-else
               v-model:value="filter.logical_op"
               class="h-full"
-              :options="[
-                { value: 'and', text: 'AND' },
-                { value: 'or', text: 'OR' },
-              ]"
+              :options="logicalOps"
               hide-details
               :disabled="filter.readOnly"
               @click.stop
@@ -215,14 +212,24 @@ watch(
       </template>
     </div>
 
-    <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
-      <div class="flex align-center gap-1">
-        <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
-        <MdiAddIcon />
-        <!-- Add Filter -->
-        {{ $t('activity.addFilter') }}
-      </div>
-    </a-button>
+    <div class="flex gap-2">
+      <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
+        <div class="flex align-center gap-1">
+          <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
+          <MdiAddIcon />
+          <!-- Add Filter -->
+          {{ $t('activity.addFilter') }}
+        </div>
+      </a-button>
+      <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilterGroup">
+        <div class="flex align-center gap-1">
+          <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
+          <MdiAddIcon />
+          Add Filter Group
+          <!--     todo: add i18n {{ $t('activity.addFilterGroup') }} -->
+        </div>
+      </a-button>
+    </div>
     <slot />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 64a82d24bc..daf0a1d161 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -7,7 +7,8 @@ export function useViewFilters(
   parentId?: string,
   reloadData?: () => void,
 ) {
-  const filters = ref<(FilterType & { status?: 'update' | 'delete' })[]>([])
+  // todo: update swagger
+  const filters = ref<(FilterType & { status?: 'update' | 'delete'; parentId?: string })[]>([])
 
   const { $api } = useNuxtApp()
 
@@ -100,5 +101,16 @@ export function useViewFilters(
     })
   }
 
-  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter }
+  const addFilterGroup = async (parentId?: string) => {
+    filters.value.push({
+      parentId,
+      is_group: true,
+      status: 'update',
+      logical_op: 'and',
+    })
+    const index = filters.value.length - 1
+   await saveOrUpdate(filters.value[index], index)
+  }
+
+  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }

From f1190cc08cc2b0bc97835b77c66f1901963dd18e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 10:54:44 +0530
Subject: [PATCH 17/67] chore(gui-v2): type correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/models/View.ts                        | 2 +-
 .../src/lib/version-upgrader/ncProjectUpgraderV2_0090000.ts   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index a3dc3b657e..844bcfaf95 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/packages/nocodb/src/lib/models/View.ts
@@ -30,7 +30,7 @@ export default class View implements ViewType {
   is_default: boolean;
   order: number;
   type: ViewTypes;
-  lock_type?: string;
+  lock_type?: ViewType['lock_type'];
 
   fk_model_id: string;
   model?: Model;
diff --git a/packages/nocodb/src/lib/version-upgrader/ncProjectUpgraderV2_0090000.ts b/packages/nocodb/src/lib/version-upgrader/ncProjectUpgraderV2_0090000.ts
index 32748b3d13..2f604b18df 100644
--- a/packages/nocodb/src/lib/version-upgrader/ncProjectUpgraderV2_0090000.ts
+++ b/packages/nocodb/src/lib/version-upgrader/ncProjectUpgraderV2_0090000.ts
@@ -8,6 +8,7 @@ import {
   ModelTypes,
   substituteColumnAliasWithIdInFormula,
   UITypes,
+  ViewType,
   ViewTypes,
 } from 'nocodb-sdk';
 import Column from '../models/Column';
@@ -1029,7 +1030,8 @@ async function migrateViewsParams(
             },
             ncMeta
           );
-          view.lock_type = queryParams?.viewStatus?.type;
+          view.lock_type = queryParams?.viewStatus
+            ?.type as ViewType['lock_type'];
         }
         // migrate view sort list
         for (const sort of queryParams.sortList || []) {

From 5ca62c5ae919c0dfb8c7f7e40eb493a682cbddd9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 11:45:11 +0530
Subject: [PATCH 18/67] feat(gui-v2): add fields filter

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/FieldsMenu.vue         | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index f94e12a6e3..44e9daae41 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -80,12 +80,12 @@ const onMove = (event: unknown) => {
 <template>
   <a-dropdown :trigger="['click']">
     <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="text-grey"></MdiEyeIcon>
           <!-- Fields -->
-          <span class="text-sm text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
+          <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
           <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
         </div>
       </a-button>
@@ -93,6 +93,15 @@ const onMove = (event: unknown) => {
 
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
+
+        <div
+          class="p-1"
+          @click.stop>
+        <a-input
+          size="small"
+          v-model:value="filterQuery"
+          :placeholder="$t('placeholder.searchFields')"/>
+        </div>
         <div class="nc-fields-list py-1">
           <Draggable :list="fields" @change="onMove($event)">
             <template #item="{ element: field }">
@@ -114,11 +123,11 @@ const onMove = (event: unknown) => {
           </a-checkbox>
         </div>
         <div class="p-2 flex gap-2" @click.stop>
-          <a-button size="small" class="text-gray-500 text-sm text-capitalize" @click.stop="showAll">
+          <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="showAll">
             <!-- Show All -->
             {{ $t('general.showAll') }}
           </a-button>
-          <a-button size="small" class="text-gray-500 text-sm text-capitalize" @click.stop="hideAll">
+          <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="hideAll">
             <!-- Hide All -->
             {{ $t('general.hideAll') }}
           </a-button>
@@ -129,7 +138,10 @@ const onMove = (event: unknown) => {
 </template>
 
 <style scoped lang="scss">
-:deep(.ant-checkbox-input) {
-  transform: scale(0.7);
+:deep(.ant-checkbox-inner) {
+  @apply transform scale-60;
+}
+:deep(::placeholder){
+  @apply !text-xs
 }
 </style>

From d9948e68d34d7ba0f25d9aded06f8921d2aab66f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 11:57:58 +0530
Subject: [PATCH 19/67] feat(gui-v2): show badge if atleast one field hidden

- replace vuetify badge

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |  4 ++
 .../smartsheet-toolbar/ColumnFilter.vue       |  2 +-
 .../smartsheet-toolbar/FieldsMenu.vue         | 52 +++++++++----------
 .../nc-gui-v2/composables/useViewColumns.ts   |  1 +
 .../nc-gui-v2/composables/useViewFilters.ts   |  2 +-
 5 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index cfc809dfc2..28d87b8488 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -92,3 +92,7 @@ html {
     @apply z-1 text-xl p-1 text-gray-500;
   }
 }
+
+.nc-badge {
+  @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-['']);
+}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 6756ba6aac..933e03a636 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
+import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import { useNuxtApp } from '#app'
 import { inject, useViewFilters } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 44e9daae41..9a40ea7d78 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -19,12 +19,6 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 const isLocked = inject(IsLockedInj)
 const rootFields = inject(FieldsInj)
 
-const isAnyFieldHidden = computed(() => {
-  return false
-  // todo: implement
-  // return meta?.fields?.some(field => field.hidden)
-})
-
 const { $e } = useNuxtApp()
 
 const {
@@ -57,7 +51,11 @@ watch(
   { immediate: true },
 )
 
-const onMove = (event: unknown) => {
+const isAnyFieldHidden = computed(() => {
+  return fields?.value?.some((f) => !(!showSystemFields && f.system) && !f.show)
+})
+
+const onMove = (event: { moved: { newIndex: number } }) => {
   // todo : sync with server
   if (!fields?.value) return
 
@@ -79,28 +77,26 @@ const onMove = (event: unknown) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
-        <div class="flex align-center gap-1">
-          <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-          <MdiEyeIcon class="text-grey"></MdiEyeIcon>
-          <!-- Fields -->
-          <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
-          <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
-        </div>
-      </a-button>
-    </v-badge>
+    <a-button
+      v-t="['c:fields']"
+      class="nc-fields-menu-btn nc-toolbar-btn text-xs"
+      :class="{ 'nc-badge': isAnyFieldHidden }"
+      :disabled="isLocked"
+      size="small"
+    >
+      <div class="flex align-center gap-1">
+        <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
+        <MdiEyeIcon class="text-grey"></MdiEyeIcon>
+        <!-- Fields -->
+        <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
+        <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
+      </div>
+    </a-button>
 
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
-
-        <div
-          class="p-1"
-          @click.stop>
-        <a-input
-          size="small"
-          v-model:value="filterQuery"
-          :placeholder="$t('placeholder.searchFields')"/>
+        <div class="p-1" @click.stop>
+          <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
         <div class="nc-fields-list py-1">
           <Draggable :list="fields" @change="onMove($event)">
@@ -141,7 +137,7 @@ const onMove = (event: unknown) => {
 :deep(.ant-checkbox-inner) {
   @apply transform scale-60;
 }
-:deep(::placeholder){
-  @apply !text-xs
+:deep(::placeholder) {
+  @apply !text-xs;
 }
 </style>
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 8d6c96caa8..8f37122bdc 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -16,6 +16,7 @@ export function useViewColumns(
       show: number | boolean
       title: string
       fk_column_id?: string
+      system?: boolean
     }[]
   >()
 
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index daf0a1d161..f2942fc3db 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -109,7 +109,7 @@ export function useViewFilters(
       logical_op: 'and',
     })
     const index = filters.value.length - 1
-   await saveOrUpdate(filters.value[index], index)
+    await saveOrUpdate(filters.value[index], index)
   }
 
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }

From 4bbcb0f82bf445ed06772d6194a7a66fbcc92382 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 12:03:45 +0530
Subject: [PATCH 20/67] fix(gui-v2): badge togglig issue

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |  2 +-
 .../smartsheet-toolbar/FieldsMenu.vue         | 27 ++++++++-----------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 28d87b8488..740ddc4aee 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -94,5 +94,5 @@ html {
 }
 
 .nc-badge {
-  @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-['']);
+  @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
 }
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 9a40ea7d78..ded9abae04 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -77,22 +77,17 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <a-button
-      v-t="['c:fields']"
-      class="nc-fields-menu-btn nc-toolbar-btn text-xs"
-      :class="{ 'nc-badge': isAnyFieldHidden }"
-      :disabled="isLocked"
-      size="small"
-    >
-      <div class="flex align-center gap-1">
-        <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-        <MdiEyeIcon class="text-grey"></MdiEyeIcon>
-        <!-- Fields -->
-        <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
-        <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
-      </div>
-    </a-button>
-
+    <div :class="{ 'nc-badge': isAnyFieldHidden }">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
+        <div class="flex align-center gap-1">
+          <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
+          <MdiEyeIcon class="text-grey"></MdiEyeIcon>
+          <!-- Fields -->
+          <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
+          <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
+        </div>
+      </a-button>
+    </div>
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
         <div class="p-1" @click.stop>

From 8652cb33a48b19c25a237c00ae0c223193fcb293 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 12:42:24 +0530
Subject: [PATCH 21/67] fix(gui-v2): show filter badge based on filters length

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilter.vue    | 11 ++++++++++-
 .../smartsheet-toolbar/ColumnFilterMenu.vue           |  8 ++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 933e03a636..87d9420912 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -4,7 +4,7 @@ import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import { useNuxtApp } from '#app'
-import { inject, useViewFilters } from '#imports'
+import { inject, useViewFilters, watchEffect } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
@@ -12,6 +12,8 @@ import MdiAddIcon from '~icons/mdi/plus'
 
 const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
 
+const emit = defineEmits(['update:filters-length'])
+
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
@@ -83,6 +85,13 @@ const logicalOps = [
   { value: 'and', text: 'AND' },
   { value: 'or', text: 'OR' },
 ]
+
+watch(
+  () => filters?.value?.length,
+  (length) => {
+    emit('update:filters-length', length ?? 0)
+  },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index b12acdebdb..198ccbf7e8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -9,7 +9,7 @@ const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
 // todo: emit from child
-const filters = []
+const filtersLength = ref(0)
 
 // todo: implement
 const applyChanges = () => {}
@@ -17,7 +17,7 @@ const applyChanges = () => {}
 
 <template>
   <a-dropdown :trigger="['click']">
-    <v-badge :value="filters.length" color="primary" dot overlap>
+    <div :class="{ 'nc-badge': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
@@ -26,9 +26,9 @@ const applyChanges = () => {}
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
-    </v-badge>
+    </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter />
+      <SmartsheetToolbarColumnFilter @update:filters-length="filtersLength = $event" />
     </template>
   </a-dropdown>
 </template>

From a9ace44f8f447fb77f9f9f820350c4832a9b46e2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 12:43:34 +0530
Subject: [PATCH 22/67] fix(gui-v2): show sorts list badge based on filters
 length

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 6756d328e8..1e7ac2e261 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -27,7 +27,7 @@ watch(
 
 <template>
   <a-dropdown offset-y class="" :trigger="['click']">
-    <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
+    <div :class="{ 'nc-badge': sorts?.length }">
       <a-button v-t="['c:sort']" size="small" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex align-center gap-1">
           <MdiSortIcon class="text-grey" />
@@ -36,7 +36,7 @@ watch(
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
-    </v-badge>
+    </div>
     <template #overlay>
       <div class="bg-white shadow p-2 menu-filter-dropdown min-w-[400px]">
         <div class="sort-grid" @click.stop>

From a76d4c7ec576f3b721b6f0be2ce84d0f2a11c8af Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 14:33:40 +0530
Subject: [PATCH 23/67] refactor(gui-v2): ui updates

- highlight toolbar item
- filter menu items size
- sort menu items size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |  8 ++
 .../smartsheet-toolbar/ColumnFilter.vue       | 79 ++++++++++---------
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  2 +-
 .../FieldListAutoCompleteDropdown.vue         |  1 +
 .../smartsheet-toolbar/FieldsMenu.vue         |  2 +-
 .../smartsheet-toolbar/SortListMenu.vue       |  5 +-
 6 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 740ddc4aee..c94a2803ff 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -72,6 +72,8 @@ html {
   overflow-y: auto !important;
 }
 
+
+// menu item styling
 .nc-menu-item {
   @apply cursor-pointer text-xs flex align-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0  w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
 }
@@ -93,6 +95,12 @@ html {
   }
 }
 
+// show  a dot badge if some change present
 .nc-badge {
   @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
 }
+
+// for highlighting toolbar menu item
+.nc-active-btn > .ant-btn{
+  @apply bg-primary/20;
+}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 87d9420912..54daed98d4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -95,32 +95,27 @@ watch(
 </script>
 
 <template>
-  <div class="bg-white shadow pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '630px' }">
-    <div v-if="filters && filters.length" class="grid" @click.stop>
+  <div
+    class=" pa-2 menu-filter-dropdown bg-gray-50"
+    :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
+  >
+    <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @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 5; padding: 6px" class="">
-            <div class="d-flex" style="gap: 6px; padding: 0 6px">
-              <!--              <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"
-                small
-                class="nc-filter-item-remove-btn"
-                @click.stop="deleteFilter(filter, i)"
-              />
-
-              <span v-else :key="`${i}_1`" />
+          <template v-if="filter.is_group" >
+            <MdiDeleteIcon
+              :key="i"
+              v-if="!filter.readOnly"
+              small
+              class="nc-filter-item-remove-btn text-grey"
+              @click.stop="deleteFilter(filter, i)"
+            />
+            <span v-else :key="i + 'dummy'"/>
 
+            <div class="d-flex" :key="i + 'nested'">
               <a-select
                 v-model:value="filter.logical_op"
+                size="small"
                 class="flex-shrink-1 flex-grow-0 elevation-0 caption"
                 :options="logicalOps"
                 placeholder="Group op"
@@ -129,14 +124,17 @@ watch(
               >
               </a-select>
             </div>
-            <SmartsheetToolbarColumnFilter
-              v-if="filter.id || shared"
-              ref="nestedFilter"
-              v-model="filter.children"
-              :parent-id="filter.id"
-              nested
-            />
-          </div>
+            <span class="col-span-3" />
+            <div class="col-span-5">
+              <SmartsheetToolbarColumnFilter
+                v-if="filter.id || shared"
+                ref="nestedFilter"
+                v-model="filter.children"
+                :parent-id="filter.id"
+                nested
+              />
+            </div>
+          </template>
           <template v-else>
             <!--                        <v-icon
                                       v-if="!filter.readOnly"
@@ -160,6 +158,7 @@ watch(
             <a-select
               v-else
               v-model:value="filter.logical_op"
+              size="small"
               class="h-full"
               :options="logicalOps"
               hide-details
@@ -171,7 +170,7 @@ watch(
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
               v-model="filter.fk_column_id"
-              class="caption text-sm nc-filter-field-select"
+              class="caption nc-filter-field-select"
               :columns="columns"
               :disabled="filter.readOnly"
               @click.stop
@@ -180,7 +179,8 @@ watch(
 
             <a-select
               v-model:value="filter.comparison_op"
-              class="caption nc-filter-operation-select text-sm"
+              size="small"
+              class="caption nc-filter-operation-select"
               :options="comparisonOpList"
               :placeholder="$t('labels.operation')"
               density="compact"
@@ -203,6 +203,7 @@ watch(
             <a-checkbox
               v-else-if="types[filter.field] === 'boolean'"
               v-model:value="filter.value"
+              size="small"
               dense
               :disabled="filter.readOnly"
               @change="saveOrUpdate(filter, i)"
@@ -211,7 +212,8 @@ watch(
               v-else
               :key="`${i}_7`"
               v-model="filter.value"
-              class="caption text-sm nc-filter-value-select"
+              size="small"
+              class="caption nc-filter-value-select"
               :disabled="filter.readOnly"
               @click.stop
               @input="saveOrUpdate(filter, i)"
@@ -222,7 +224,7 @@ watch(
     </div>
 
     <div class="flex gap-2">
-      <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
+      <a-button  size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
@@ -230,7 +232,7 @@ watch(
           {{ $t('activity.addFilter') }}
         </div>
       </a-button>
-      <a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilterGroup">
+      <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilterGroup">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
@@ -244,10 +246,15 @@ watch(
 </template>
 
 <style scoped>
-.grid {
+.nc-filter-grid {
   display: grid;
-  grid-template-columns: 30px 130px auto auto auto;
+  grid-template-columns: 18px 70px auto auto auto;
   column-gap: 6px;
   row-gap: 6px;
+  align-items: center;
+}
+
+:deep(.ant-btn, .ant-select, .ant-input) {
+  @apply "!text-xs";
 }
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 198ccbf7e8..fde821e2d3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -17,7 +17,7 @@ const applyChanges = () => {}
 
 <template>
   <a-dropdown :trigger="['click']">
-    <div :class="{ 'nc-badge': filtersLength }">
+    <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index b008c84b6c..4c5577a83f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -59,6 +59,7 @@ const filterOption = (input: string, option: any) => {
 <template>
   <a-select
     v-model:value="localValue"
+    size="small"
     show-search
     placeholder="Select a field"
     :options="options"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index ded9abae04..d725674016 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -77,7 +77,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <div :class="{ 'nc-badge': isAnyFieldHidden }">
+    <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 1e7ac2e261..2b8ca7ad0e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -27,7 +27,7 @@ watch(
 
 <template>
   <a-dropdown offset-y class="" :trigger="['click']">
-    <div :class="{ 'nc-badge': sorts?.length }">
+    <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" size="small" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex align-center gap-1">
           <MdiSortIcon class="text-grey" />
@@ -38,7 +38,7 @@ watch(
       </a-button>
     </div>
     <template #overlay>
-      <div class="bg-white shadow p-2 menu-filter-dropdown min-w-[400px]">
+      <div class="bg-gray-50 shadow p-2 menu-filter-dropdown 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> -->
@@ -55,6 +55,7 @@ watch(
               @update:model-value="saveOrUpdate(sort, i)"
             />
             <a-select
+              size="small"
               v-model:value="sort.direction"
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
               :items="[

From 18a869c93f85d4259bec87bcc527e2553f695de5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 17:53:31 +0530
Subject: [PATCH 24/67] refactor(gui-v2): ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue         | 12 ++++++------
 .../smartsheet-toolbar/ColumnFilterMenu.vue     |  4 ++--
 .../FieldListAutoCompleteDropdown.vue           |  1 -
 .../smartsheet-toolbar/FieldsMenu.vue           |  8 ++++----
 .../smartsheet-toolbar/SortListMenu.vue         | 13 +++++++------
 .../nc-gui-v2/components/smartsheet/Toolbar.vue | 17 ++++++++++++++++-
 6 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 54daed98d4..1d87515f8e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -96,23 +96,23 @@ watch(
 
 <template>
   <div
-    class=" pa-2 menu-filter-dropdown bg-gray-50"
+    class="pa-2 menu-filter-dropdown bg-gray-50"
     :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
       <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
-          <template v-if="filter.is_group" >
+          <template v-if="filter.is_group">
             <MdiDeleteIcon
-              :key="i"
               v-if="!filter.readOnly"
+              :key="i"
               small
               class="nc-filter-item-remove-btn text-grey"
               @click.stop="deleteFilter(filter, i)"
             />
-            <span v-else :key="i + 'dummy'"/>
+            <span v-else :key="`${i}dummy`" />
 
-            <div class="d-flex" :key="i + 'nested'">
+            <div :key="`${i}nested`" class="d-flex">
               <a-select
                 v-model:value="filter.logical_op"
                 size="small"
@@ -224,7 +224,7 @@ watch(
     </div>
 
     <div class="flex gap-2">
-      <a-button  size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
+      <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index fde821e2d3..af1a6aca6a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -18,7 +18,7 @@ const applyChanges = () => {}
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
-      <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+      <a-button v-t="['c:filter']" class="text-xs nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
           <!-- Filter -->
@@ -28,7 +28,7 @@ const applyChanges = () => {}
       </a-button>
     </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter @update:filters-length="filtersLength = $event" />
+      <SmartsheetToolbarColumnFilter class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" />
     </template>
   </a-dropdown>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index 4c5577a83f..fa9659d8ad 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -96,4 +96,3 @@ const filterOption = (input: string, option: any) => {
     </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 d725674016..6ee5ce8777 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -78,7 +78,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="text-grey"></MdiEyeIcon>
@@ -89,7 +89,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
+      <div class="pt-0 min-w-[280px] bg-gray-50 shadow nc-table-toolbar-menu" @click.stop>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
@@ -114,11 +114,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           </a-checkbox>
         </div>
         <div class="p-2 flex gap-2" @click.stop>
-          <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="showAll">
+          <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="showAll">
             <!-- Show All -->
             {{ $t('general.showAll') }}
           </a-button>
-          <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="hideAll">
+          <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
             <!-- Hide All -->
             {{ $t('general.hideAll') }}
           </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 2b8ca7ad0e..250f946cca 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -39,7 +39,7 @@ watch(
     </div>
     <template #overlay>
       <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px]">
-        <div class="sort-grid" @click.stop>
+        <div v-if="sorts?.length" class="sort-grid mb-2" @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
@@ -55,17 +55,14 @@ watch(
               @update:model-value="saveOrUpdate(sort, i)"
             />
             <a-select
-              size="small"
               v-model:value="sort.direction"
+              size="small"
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
               :items="[
                 { text: 'asc', value: 'asc' },
                 { text: 'desc', value: 'desc' },
               ]"
               :label="$t('labels.operation')"
-              density="compact"
-              variant="solo"
-              hide-details
               @click.stop
               @update:model-value="saveOrUpdate(sort, i)"
             />
@@ -75,7 +72,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button size="small" class="text-grey text-capitalize text-sm my-3" @click.stop="addSort">
+        <a-button size="small" class="text-xs text-grey text-capitalize " @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->
@@ -94,4 +91,8 @@ watch(
   column-gap: 6px;
   row-gap: 6px;
 }
+
+:deep(.ant-btn, .ant-select, .ant-input, ::placeholder) {
+  @apply "!text-xs";
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 93135792eb..dc289f30f2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -13,11 +13,26 @@
     <SmartsheetToolbarMoreActions />
 
     <div class="flex-1" />
+<!--    <SmartsheetToolbarLockMenu />
+    <div class="dot" />
+    <SmartsheetToolbarReload />
+    <div class="dot" />
+    <SmartsheetToolbarAddRow />
+    <div class="dot" />
+    <SmartsheetToolbarDeleteTable />
+    <div class="dot" />
+    <SmartsheetToolbarToggleDrawer class="mr-2" />
+ -->
   </div>
 </template>
 
 <style scoped>
 :deep(.nc-toolbar-btn) {
   @apply border-0 !text-xs font-semibold px-2;
-}
+}/*
+.dot {
+  @apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
+}*/
+
+
 </style>

From c89275cbcd2e821c67951446042334b869806110 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 19:55:15 +0530
Subject: [PATCH 25/67] refactor(gui-v2): set min height for sort and field
 list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 6ee5ce8777..0d74d1fa64 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -89,7 +89,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="pt-0 min-w-[280px] bg-gray-50 shadow nc-table-toolbar-menu" @click.stop>
+      <div class="pt-0 min-w-[280px] bg-gray-50 shadow nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto" @click.stop>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 250f946cca..642957b835 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -38,7 +38,7 @@ watch(
       </a-button>
     </div>
     <template #overlay>
-      <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px]">
+      <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto">
         <div v-if="sorts?.length" class="sort-grid mb-2" @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> -->

From e210e3580ce2478b471514f78c65e417ff05420a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 22:10:58 +0530
Subject: [PATCH 26/67] feat(gui-v2): add field type icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/CellIcon.vue |  4 +-
 .../smartsheet-header/VirtualCellIcon.vue     |  6 ++-
 .../FieldListAutoCompleteDropdown.vue         | 50 +++++--------------
 .../smartsheet-toolbar/SortListMenu.vue       |  2 +-
 4 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index bdb134c499..9fe986ef2f 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -19,7 +19,9 @@ import URLIcon from '~icons/mdi/link'
 import EmailIcon from '~icons/mdi/email'
 import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 
-const column = inject(ColumnInj)
+const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+
+const column = inject(ColumnInj, columnMeta)
 
 const additionalColMeta = useColumn(column as ColumnType)
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 1db65540cf..2a8dc6265c 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
@@ -9,7 +9,9 @@ import MMIcon from '~icons/mdi/table-network'
 import FormulaIcon from '~icons/mdi/math-integral'
 import RollupIcon from '~icons/mdi/movie-roll'
 
-const column = inject(ColumnInj)
+const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+
+const column = inject(ColumnInj, columnMeta)
 
 const icon = computed(() => {
   switch (column?.uidt) {
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index fa9659d8ad..e9565e2a24 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { SelectProps } from 'ant-design-vue'
+import { isVirtualCol } from 'nocodb-sdk'
 import { computed } from 'vue'
 import { MetaInj } from '~/context'
+import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
+import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 
 interface Props {
   modelValue?: string
@@ -48,6 +51,10 @@ const options = computed<SelectProps['options']>(() =>
   meta?.value?.columns?.map((c) => ({
     value: c.id,
     label: c.title,
+    icon: h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+      columnMeta: c,
+    }),
+    c,
   })),
 )
 
@@ -57,42 +64,9 @@ const filterOption = (input: string, option: any) => {
 </script>
 
 <template>
-  <a-select
-    v-model:value="localValue"
-    size="small"
-    show-search
-    placeholder="Select a field"
-    :options="options"
-    :filter-option="filterOption"
-  ></a-select>
-
-  <!--  <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;    &lt;!&ndash; @change="$emit('change')" &ndash;&gt; &ndash;&gt;
-      &lt;!&ndash;    <template #selection="{ item }"> &ndash;&gt;
-      &lt;!&ndash;      <v-icon small class="mr-1"> &ndash;&gt;
-      &lt;!&ndash;        {{ item.icon }} &ndash;&gt;
-      &lt;!&ndash;      </v-icon> &ndash;&gt;
-      &lt;!&ndash;      {{ item.title }} &ndash;&gt;
-      &lt;!&ndash;    </template> &ndash;&gt;
-      &lt;!&ndash;    <template #item="{ item }"> &ndash;&gt;
-      &lt;!&ndash;      <span :class="`caption font-weight-regular nc-fld-${item.title}`"> &ndash;&gt;
-      &lt;!&ndash;        <v-icon color="grey" small class="mr-1"> &ndash;&gt;
-      &lt;!&ndash;          {{ item.icon }} &ndash;&gt;
-      &lt;!&ndash;        </v-icon> &ndash;&gt;
-      &lt;!&ndash;        {{ item.title }} &ndash;&gt;
-      &lt;!&ndash;      </span> &ndash;&gt;
-      &lt;!&ndash;    </template> &ndash;&gt;
-    </v-autocomplete> -->
+  <a-select v-model:value="localValue" size="small" show-search placeholder="Select a field" :filter-option="filterOption">
+    <a-select-option v-for="option in options" :key="option.value" :value="option.value">
+      <div class="flex gap-2 align-center"><component :is="option.icon" class="!text-xs !mx-0" /> {{ option.label }}</div>
+    </a-select-option>
+  </a-select>
 </template>
-
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 642957b835..4cf7f06437 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -72,7 +72,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button size="small" class="text-xs text-grey text-capitalize " @click.stop="addSort">
+        <a-button size="small" class="text-xs text-grey text-capitalize" @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->

From 5eb38b9520ce4f6a49f5ff8cf61f9f6ea4f51382 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 23:19:58 +0530
Subject: [PATCH 27/67] feat(gui-v2): filter auto-save disable/enable option

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue       | 27 ++++++++++++----
 .../smartsheet-toolbar/ColumnFilterMenu.vue   | 31 +++++++++++++++++--
 .../nc-gui-v2/composables/useViewFilters.ts   | 27 ++++++++--------
 3 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 1d87515f8e..895fb75c22 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -2,7 +2,6 @@
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
-import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import { useNuxtApp } from '#app'
 import { inject, useViewFilters, watchEffect } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
@@ -10,7 +9,7 @@ import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
-const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
+const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>()
 
 const emit = defineEmits(['update:filters-length'])
 
@@ -20,9 +19,10 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { $e } = useNuxtApp()
 
-const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup } = useViewFilters(
+const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
   activeView,
   parentId,
+  computed(() => autoSave),
   () => {
     reloadDataHook?.trigger()
   },
@@ -30,7 +30,6 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
-
   $e('a:filter:update', {
     logical: filter.logical_op,
     comparison: filter.comparison_op,
@@ -79,7 +78,7 @@ watch(
   { immediate: true },
 )
 
-const nestedFilter = ref()
+const nestedFilters = ref()
 
 const logicalOps = [
   { value: 'and', text: 'AND' },
@@ -92,6 +91,22 @@ watch(
     emit('update:filters-length', length ?? 0)
   },
 )
+
+const applyChanges = async () => {
+  console.log('hello')
+  // sync()
+  // $e('a:filter:apply')
+
+    for (const nestedFilter of nestedFilters?.value || []) {
+      if (nestedFilter.parentId) {
+        await nestedFilter.applyChanges(true);
+      }
+    }
+}
+
+defineExpose({
+  applyChanges, parentId
+})
 </script>
 
 <template>
@@ -128,7 +143,7 @@ watch(
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
                 v-if="filter.id || shared"
-                ref="nestedFilter"
+                ref="nestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
                 nested
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index af1a6aca6a..a471ffaecf 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -4,15 +4,22 @@ import { useState } from '#app'
 import { IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import ColumnFilter from './ColumnFilter.vue'
 
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
 // todo: emit from child
 const filtersLength = ref(0)
+// todo: sync with store
+const autosave = ref(true)
+
+const filterComp = ref<typeof ColumnFilter>()
 
 // todo: implement
-const applyChanges = () => {}
+const applyChanges = async () => {
+  await filterComp?.value?.applyChanges()
+}
 </script>
 
 <template>
@@ -28,7 +35,27 @@ const applyChanges = () => {}
       </a-button>
     </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" />
+      <SmartsheetToolbarColumnFilter ref="filterComp" class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" :auto-save="autosave" >
+        <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
+          <a-checkbox
+            id="col-filter-checkbox"
+            v-model:checked="autosave"
+            class="col-filter-checkbox"
+            hide-details
+            dense
+          >
+            <span class="text-grey text-xs">
+              {{ $t('msg.info.filterAutoApply') }}
+              <!-- Auto apply -->
+            </span>
+          </a-checkbox>
+
+          <div class="flex-1"/>
+          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges">
+            Apply changes
+          </a-button>
+        </div>
+      </SmartsheetToolbarColumnFilter>
     </template>
   </a-dropdown>
 </template>
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index f2942fc3db..365f970eb4 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,10 +1,11 @@
 import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#imports'
 
 export function useViewFilters(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   parentId?: string,
+  autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
 ) {
   // todo: update swagger
@@ -39,20 +40,20 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const deleteFilter = async (filter: FilterType, i: number) => {
+  const deleteFilter = async (filter: FilterType & { status: string }, 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 $api.dbTableFilter.delete(filter.id) /**/
-      //       await this.loadFilter()
-      //       this.$emit('updated')
-      //     }
+      if (!autoApply?.value) {
+        filter.status = 'delete'
+      } else {
+        await $api.dbTableFilter.delete(filter.id) /**/
+        //       await this.loadFilter()
+        //       this.$emit('updated')
+      }
     } else {
       //     this.$emit('updated')
     }
@@ -64,16 +65,16 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const saveOrUpdate = async (filter: FilterType, i: number) => {
+  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number) => {
     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) {
+    if (!autoApply?.value) {
+      filter.status = 'update'
+    } else if (filter.id) {
       await $api.dbTableFilter.update(filter.id, {
         ...filter,
         fk_parent_id: parentId,

From bd6fa6ff73246a3e1cc588d0ab86b8e20aa5e666 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 11:22:22 +0530
Subject: [PATCH 28/67] feat(gui-v2): integrate search with grid view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue       | 11 ++++---
 .../smartsheet-toolbar/ColumnFilterMenu.vue   | 23 ++++++--------
 .../smartsheet-toolbar/SearchData.vue         | 31 +++++++------------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  4 ++-
 .../composables/useSmartsheetStore.ts         | 23 ++++++++++++++
 packages/nc-gui-v2/composables/useViewData.ts |  8 +++--
 6 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 895fb75c22..6555e12b33 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -97,15 +97,16 @@ const applyChanges = async () => {
   // sync()
   // $e('a:filter:apply')
 
-    for (const nestedFilter of nestedFilters?.value || []) {
-      if (nestedFilter.parentId) {
-        await nestedFilter.applyChanges(true);
-      }
+  for (const nestedFilter of nestedFilters?.value || []) {
+    if (nestedFilter.parentId) {
+      await nestedFilter.applyChanges(true)
     }
+  }
 }
 
 defineExpose({
-  applyChanges, parentId
+  applyChanges,
+  parentId,
 })
 </script>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index a471ffaecf..92b0f5a252 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 // todo: move to persisted state
+import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
 import { IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import ColumnFilter from './ColumnFilter.vue'
 
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
@@ -35,25 +35,22 @@ const applyChanges = async () => {
       </a-button>
     </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter ref="filterComp" class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" :auto-save="autosave" >
+      <SmartsheetToolbarColumnFilter
+        ref="filterComp"
+        class="nc-table-toolbar-menu"
+        :auto-save="autosave"
+        @update:filters-length="filtersLength = $event"
+      >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox
-            id="col-filter-checkbox"
-            v-model:checked="autosave"
-            class="col-filter-checkbox"
-            hide-details
-            dense
-          >
+          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
             </span>
           </a-checkbox>
 
-          <div class="flex-1"/>
-          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges">
-            Apply changes
-          </a-button>
+          <div class="flex-1" />
+          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes </a-button>
         </div>
       </SmartsheetToolbarColumnFilter>
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 513c2d44ee..ddb58201e3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -1,23 +1,10 @@
 <script lang="ts" setup>
-import { MetaInj } from '~/context'
+import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
+import { MetaInj, ReloadViewDataHookInj, SearchFieldAndQueryCbkInj } from '~/context'
 
-const { modelValue, field } = defineProps<{
-  modelValue?: string
-  field?: any
-}>()
+const reloadData = inject(ReloadViewDataHookInj)
+const { search, meta } = useSmartsheetStoreOrThrow()
 
-const emit = defineEmits(['update:modelValue', 'update:field'])
-
-const localValue = computed({
-  get: () => modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
-const localField = computed({
-  get: () => field,
-  set: (val) => emit('update:field', val),
-})
-
-const meta = inject(MetaInj)
 const columns = computed(() =>
   meta?.value?.columns?.map((c) => ({
     value: c.id,
@@ -27,9 +14,15 @@ const columns = computed(() =>
 </script>
 
 <template>
-  <a-input v-model:value="localValue" size="small" class="max-w-[250px]" placeholder="Filter query">
+  <a-input
+    v-model:value="search.value"
+    size="small"
+    class="max-w-[250px]"
+    placeholder="Filter query"
+    @pressEnter="reloadData.trigger()"
+  >
     <template #addonBefore>
-      <a-select v-model:value="localField" :options="columns" style="width: 80px" class="!text-xs" size="small" />
+      <a-select v-model:value="search.field" :options="columns" style="width: 80px" class="!text-xs" size="small" />
     </template>
   </a-input>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 27dc0478b7..bae3fbbf1e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -32,9 +32,11 @@ const isPublicView = false
 
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
+const { sqlUi } = useProject()
+const { xWhere } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
 
-const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view as any)
+const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view as any, xWhere)
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 onMounted(loadGridViewColumns)
 
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 9189a2a122..5e34f72daa 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -1,15 +1,36 @@
+import { computed } from '@vue/reactivity'
 import { createInjectionState } from '@vueuse/core'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
+import useProject from '~/composables/useProject'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
+  const { sqlUi } = useProject()
 
   // state
+  // todo: move to grid view store
+  const search = reactive({
+    field: '',
+    value: '',
+  })
 
   // getters
   const isLocked = computed(() => view?.value?.lock_type === 'locked')
+  const xWhere = computed(() => {
+    let where
+    const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
+    if (!col) return
+
+    if (!search.value.trim()) return
+    if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
+      where = `(${col.title},like,%${search.value.trim()}%)`
+    } else {
+      where = `(${col.title},eq,${search.value.trim()})`
+    }
+    return where
+  })
 
   // actions
 
@@ -18,6 +39,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     meta,
     isLocked,
     $api,
+    search,
+    xWhere,
   }
 })
 
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 8446f8d6d8..e60ed0b2eb 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -17,6 +17,7 @@ export function useViewData(
     | Ref<(GridType | GalleryType | FormType) & { id: string }>
     | ComputedRef<(GridType | GalleryType | FormType) & { id: string }>
     | undefined,
+  where?: ComputedRef<string | undefined>,
 ) {
   const data = ref<Record<string, any>[]>()
   const formattedData = ref<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }[]>()
@@ -27,7 +28,10 @@ export function useViewData(
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
-    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, params)
+    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
+      ...params,
+      where: where?.value,
+    })
     data.value = response.list
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
@@ -97,7 +101,7 @@ export function useViewData(
 
   const changePage = async (page: number) => {
     paginationData.value.page = page
-    await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25) } as any)
+    await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any)
   }
 
   return { data, loadData, paginationData, formattedData, insertRow, updateRowProperty, changePage }

From 17b172a15c649537ecce1f7bff8d05d295a47ace Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 11:28:20 +0530
Subject: [PATCH 29/67] feat(gui-v2): hide password toggle if password missing

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/SharedViewList.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index fe039bc7ce..620806a7a0 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -118,11 +118,13 @@ const deleteLink = async (id: string) => {
       <a-table-column key="password" :title="$t('labels.password')" data-index="title">
         <template #default="{ record }">
           <div class="flex align-center items-center gap-1">
-            <span class="h-min">{{ record.showPassword ? record.password : '***************************' }}</span>
-            <component
-              :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
-              @click="record.showPassword = !record.showPassword"
-            />
+            <template v-if="record.password">
+              <span class="h-min">{{ record.showPassword ? record.password : '***************************' }}</span>
+              <component
+                :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
+                @click="record.showPassword = !record.showPassword"
+              />
+            </template>
           </div>
         </template>
       </a-table-column>

From 5fdfa933c35b623ed2493be1d76645eb042fe142 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 11:47:35 +0530
Subject: [PATCH 30/67] wip(gui-v2): dashboard url

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/SharedViewList.vue           | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 620806a7a0..9752d3c8b4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { useRoute } from '#app'
+import { computed } from '@vue/reactivity'
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
@@ -22,13 +24,12 @@ interface SharedViewType {
 const { view, $api, meta } = useSmartsheetStoreOrThrow()
 const { copy } = useClipboard()
 const toast = useToast()
+const route = useRoute()
 
 let isLoading = $ref(false)
 // let activeSharedView = $ref(null)
 const sharedViewList = ref<SharedViewType[]>()
 
-// todo: replace with inject/composable
-const dashboardUrl = ''
 
 const loadSharedViewsList = async () => {
   isLoading = true
@@ -55,6 +56,11 @@ const loadSharedViewsList = async () => {
 
 onMounted(loadSharedViewsList)
 
+// todo: get correct dashboard url
+const dashboardUrl = computed(() =>{
+  return `${location.origin}`
+})
+
 const sharedViewUrl = (view: SharedViewType) => {
   let viewType
   switch (view.type) {
@@ -80,7 +86,7 @@ const renderAllowCSVDownload = (view: SharedViewType) => {
 }
 
 const copyLink = (view: SharedViewType) => {
-  copy(`${dashboardUrl}/${sharedViewUrl(view)}`)
+  copy(`${dashboardUrl?.value as string}/${sharedViewUrl(view)}`)
   toast.info('Copied to clipboard')
 }
 
@@ -93,6 +99,7 @@ const deleteLink = async (id: string) => {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
 </script>
 
 <template>

From 6ed1267ee5ccc4380fd6581f63c14c3a241fc278 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:06:43 +0530
Subject: [PATCH 31/67] feat(gui-v2): Sort direction dropdown issue

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 4cf7f06437..cc85c8909e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -58,7 +58,7 @@ watch(
               v-model:value="sort.direction"
               size="small"
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
-              :items="[
+              :options="[
                 { text: 'asc', value: 'asc' },
                 { text: 'desc', value: 'desc' },
               ]"

From 78b0f61b1faba0528158b590ed17b8e9bf5e82f0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:10:28 +0530
Subject: [PATCH 32/67] refactor(gui-v2): give fixed dropdown width

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilter.vue          | 6 +++++-
 .../components/smartsheet-toolbar/SharedViewList.vue        | 6 ++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 6555e12b33..3a56a70ea9 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -264,7 +264,7 @@ defineExpose({
 <style scoped>
 .nc-filter-grid {
   display: grid;
-  grid-template-columns: 18px 70px auto auto auto;
+  grid-template-columns: 18px 70px auto 90px auto;
   column-gap: 6px;
   row-gap: 6px;
   align-items: center;
@@ -273,4 +273,8 @@ defineExpose({
 :deep(.ant-btn, .ant-select, .ant-input) {
   @apply "!text-xs";
 }
+
+:deep(.ant-select-item-option) {
+  @apply "!min-w-min";
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 9752d3c8b4..7b5aa775c7 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useRoute } from '#app'
 import { computed } from '@vue/reactivity'
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
+import { useRoute } from '#app'
 import { onMounted } from '#imports'
 import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -30,7 +30,6 @@ let isLoading = $ref(false)
 // let activeSharedView = $ref(null)
 const sharedViewList = ref<SharedViewType[]>()
 
-
 const loadSharedViewsList = async () => {
   isLoading = true
   const list = await $api.dbViewShare.list(meta.value?.id as string)
@@ -57,7 +56,7 @@ const loadSharedViewsList = async () => {
 onMounted(loadSharedViewsList)
 
 // todo: get correct dashboard url
-const dashboardUrl = computed(() =>{
+const dashboardUrl = computed(() => {
   return `${location.origin}`
 })
 
@@ -99,7 +98,6 @@ const deleteLink = async (id: string) => {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
-
 </script>
 
 <template>

From d66b6959c59441bab0a07a3c8c773f0c7d68c200 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:17:58 +0530
Subject: [PATCH 33/67] refactor(gui-v2): update string cell icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-header/CellIcon.vue     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 9fe986ef2f..196f8a1007 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -6,7 +6,7 @@ import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
 // import FKIcon from '~icons/mdi/link-variant'
 import TextAreaIcon from '~icons/mdi/card-text-outline'
-import StringIcon from '~icons/mdi/alpha-a'
+import StringIcon from '~icons/mdi/alpha-a-box-outline'
 import BooleanIcon from '~icons/mdi/check-box-outline'
 import SingleSelectIcon from '~icons/mdi/radiobox-marked'
 import MultiSelectIcon from '~icons/mdi/checkbox-multiple-marked'
@@ -57,9 +57,7 @@ const icon = computed(() => {
   } else if (additionalColMeta.isCurrency) {
     return CurrencyIcon
   } else if (additionalColMeta.isString) {
-    return h(StringIcon, {
-      class: 'text-[1.5rem]',
-    })
+    return StringIcon
   } else {
     return GenericIcon
   }

From 45a33a9b8950205debfba1f81630407db48c2083 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:52:00 +0530
Subject: [PATCH 34/67] refactor(gui-v2): share view link correction and ui
 updates

- icon color
- link
- toast on copy

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ShareView.vue          | 20 ++++++++++++-------
 .../smartsheet-toolbar/SharedViewList.vue     |  7 +------
 .../nc-gui-v2/composables/useDashboard.ts     | 10 ++++++++++
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useDashboard.ts

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 74f6b3c48c..75081e55fe 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -15,6 +15,7 @@ const { view, $api } = useSmartsheetStoreOrThrow()
 const { copy } = useClipboard()
 const toast = useToast()
 const { $e } = useNuxtApp()
+const { dashboardUrl } = useDashboard()
 
 let showShareModel = $ref(false)
 const passwordProtected = $ref(false)
@@ -57,7 +58,7 @@ const sharedViewUrl = computed(() => {
   }
 
   // todo: get dashboard url
-  return `#/nc/${viewType}/${shared.value.uuid}`
+  return `${dashboardUrl?.value}/nc/${viewType}/${shared.value.uuid}`
 })
 
 async function saveAllowCSVDownload() {
@@ -91,6 +92,11 @@ const saveShareLinkPassword = async () => {
 
   $e('a:view:share:enable-pwd')
 }
+
+const copyLink = () => {
+  copy(sharedViewUrl?.value as string)
+  toast.info('Copied to clipboard')
+}
 </script>
 
 <template>
@@ -105,13 +111,13 @@ const saveShareLinkPassword = async () => {
 
     <!-- This view is shared via a private link -->
     <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null">
-      <div class="share-link-box nc-share-link-box">
+      <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
         <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
-          <MdiOpenInNewIcon class="text-sm text-grey mt-1" />
+          <MdiOpenInNewIcon class="text-sm text-gray-500 mt-1" />
         </a>
-        <MdiCopyIcon class="text-grey text-sm cursor-pointer" @click="copy(sharedViewUrl)" />
+        <MdiCopyIcon class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
       <a-collapse ghost>
@@ -127,9 +133,9 @@ const saveShareLinkPassword = async () => {
                 type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
-              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">{{
-                $t('placeholder.password.save')
-              }}</a-button>
+              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword"
+                >{{ $t('placeholder.password.save') }}
+              </a-button>
             </div>
           </div>
           <div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 7b5aa775c7..3dcc32218f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
@@ -25,6 +24,7 @@ const { view, $api, meta } = useSmartsheetStoreOrThrow()
 const { copy } = useClipboard()
 const toast = useToast()
 const route = useRoute()
+const { dashboardUrl } = useDashboard()
 
 let isLoading = $ref(false)
 // let activeSharedView = $ref(null)
@@ -55,11 +55,6 @@ const loadSharedViewsList = async () => {
 
 onMounted(loadSharedViewsList)
 
-// todo: get correct dashboard url
-const dashboardUrl = computed(() => {
-  return `${location.origin}`
-})
-
 const sharedViewUrl = (view: SharedViewType) => {
   let viewType
   switch (view.type) {
diff --git a/packages/nc-gui-v2/composables/useDashboard.ts b/packages/nc-gui-v2/composables/useDashboard.ts
new file mode 100644
index 0000000000..7cde85e020
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useDashboard.ts
@@ -0,0 +1,10 @@
+export default () => {
+  const route = useRoute()
+  const dashboardUrl = computed(() => {
+    // todo: test in different scenarios
+    // get base path of app
+    return `${location.origin}${(location.pathname || '').replace(route.path, '')}`
+  })
+
+  return { dashboardUrl }
+}

From a089e9cb323d8ea3300643c87ae82314342ef26c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:55:33 +0530
Subject: [PATCH 35/67] refactor(gui-v2): shared view list size correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/SharedViewList.vue      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 3dcc32218f..4017341354 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -109,7 +109,7 @@ const deleteLink = async (id: string) => {
       <!-- View Link -->
       <a-table-column key="title" :title="$t('labels.viewLink')" data-index="title">
         <template #default="{ record }">
-          <nuxt-link :to="sharedViewUrl(record)">
+          <nuxt-link :to="sharedViewUrl(record)" class="text-xs">
             {{ `${dashboardUrl}/${sharedViewUrl(record)}` }}
           </nuxt-link>
         </template>
@@ -149,4 +149,8 @@ const deleteLink = async (id: string) => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.ant-pagination-item > a){
+@apply leading-normal
+}
+</style>

From 6b6eafbc307b096152d4b0bb893a94cd966235fb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:55:59 +0530
Subject: [PATCH 36/67] refactor(gui-v2): hide footer in shared view list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index f1255ec183..cd633a63c8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -127,7 +127,7 @@ const exportCsv = async () => {
       </template>
     </a-dropdown>
 
-    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="90vw">
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="90vw" :footer="null">
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
   </div>

From 28feef5408183394752545d6739542001a30f217 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:00:01 +0530
Subject: [PATCH 37/67] refactor(gui-v2): give similar size for all field icons

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

refactor(gui-v2): give similar size for all field icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue  | 2 +-
 .../components/smartsheet-header/VirtualCellIcon.vue          | 2 +-
 .../components/smartsheet-toolbar/SharedViewList.vue          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 196f8a1007..76fd47e4b9 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -65,5 +65,5 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <component :is="icon" class="text-grey mx-1" />
+  <component :is="icon" class="text-grey mx-1 !text-sm" />
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 2a8dc6265c..9d91c76f80 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -37,5 +37,5 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <component :is="icon" class="text-grey mx-1" />
+  <component :is="icon" class="text-grey mx-1 !text-sm" />
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 4017341354..103a3703b3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -140,8 +140,8 @@ const deleteLink = async (id: string) => {
       <a-table-column key="id" :title="$t('labels.actions')" data-index="title">
         <template #default="{ record }">
           <div class="text-sm flex gap-2" :title="text">
-            <MdiCopyIcon @click="copyLink(record)" />
-            <MdiDeleteIcon @click="deleteLink(record.id)" />
+            <MdiCopyIcon class="cursor-pointer" @click="copyLink(record)" />
+            <MdiDeleteIcon  class="cursor-pointer" @click="deleteLink(record.id)" />
           </div>
         </template>
       </a-table-column>

From c1ee49ce8b2836b787d11317c22574e740259a73 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:00:01 +0530
Subject: [PATCH 38/67] refactor(gui-v2): reduce font size of button in fields

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 0d74d1fa64..fb3aebb5cf 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -114,11 +114,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           </a-checkbox>
         </div>
         <div class="p-2 flex gap-2" @click.stop>
-          <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="showAll">
+          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="showAll">
             <!-- Show All -->
             {{ $t('general.showAll') }}
           </a-button>
-          <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
+          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
             <!-- Hide All -->
             {{ $t('general.hideAll') }}
           </a-button>

From 3c5d25b771061dfec90b0086066cfcc590196b3a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:25:33 +0530
Subject: [PATCH 39/67] refactor(gui-v2): margin for buttons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue    | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 3a56a70ea9..be89577de8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -239,7 +239,7 @@ defineExpose({
       </template>
     </div>
 
-    <div class="flex gap-2">
+    <div class="flex gap-2 my-2">
       <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index cc85c8909e..c5d22ea3c5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -72,7 +72,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button size="small" class="text-xs text-grey text-capitalize" @click.stop="addSort">
+        <a-button size="small" class="text-xs text-grey text-capitalize my-2" @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->

From c3b4f0d659126bdb03453f7b87e4ae9757fe5497 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:27:22 +0530
Subject: [PATCH 40/67] fix(gui-v2): bind value property to input

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index be89577de8..fbe3e75672 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -218,7 +218,7 @@ defineExpose({
             <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" />
             <a-checkbox
               v-else-if="types[filter.field] === 'boolean'"
-              v-model:value="filter.value"
+              v-model:checked="filter.value"
               size="small"
               dense
               :disabled="filter.readOnly"
@@ -227,7 +227,7 @@ defineExpose({
             <a-input
               v-else
               :key="`${i}_7`"
-              v-model="filter.value"
+              v-model:value="filter.value"
               size="small"
               class="caption nc-filter-value-select"
               :disabled="filter.readOnly"

From 083e5fca2117143629890993cb7a5ec5df65cba0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:50:24 +0530
Subject: [PATCH 41/67] refactor(gui-v2): font size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue       | 30 +++++++++++++------
 .../FieldListAutoCompleteDropdown.vue         | 19 ++++++++++--
 .../smartsheet-toolbar/ShareView.vue          | 13 ++++----
 .../smartsheet-toolbar/SharedViewList.vue     |  6 ++--
 4 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index fbe3e75672..cb7ef32895 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -131,13 +131,16 @@ defineExpose({
             <div :key="`${i}nested`" class="d-flex">
               <a-select
                 v-model:value="filter.logical_op"
+                :dropdown-match-select-width="false"
                 size="small"
-                class="flex-shrink-1 flex-grow-0 elevation-0 caption"
-                :options="logicalOps"
+                class="flex-shrink-1 flex-grow-0 elevation-0 caption !text-xs"
                 placeholder="Group op"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
+                <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs">
+                  {{ op.text }}
+                </a-select-option>
               </a-select>
             </div>
             <span class="col-span-3" />
@@ -174,14 +177,18 @@ defineExpose({
             <a-select
               v-else
               v-model:value="filter.logical_op"
+              :dropdown-match-select-width="false"
               size="small"
-              class="h-full"
-              :options="logicalOps"
+              class="h-full !text-xs"
               hide-details
               :disabled="filter.readOnly"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
-            />
+            >
+              <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs">
+                {{ op.text }}
+              </a-select-option>
+            </a-select>
 
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
@@ -195,16 +202,21 @@ defineExpose({
 
             <a-select
               v-model:value="filter.comparison_op"
+              :dropdown-match-select-width="false"
               size="small"
-              class="caption nc-filter-operation-select"
-              :options="comparisonOpList"
+              class="caption nc-filter-operation-select !text-xs"
               :placeholder="$t('labels.operation')"
               density="compact"
               variant="solo"
               :disabled="filter.readOnly"
               hide-details
               @change="filterUpdateCondition(filter, i)"
-            /><!--
+            >
+              <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="!text-xs">
+                {{ compOp.text }}
+              </a-select-option>
+            </a-select>
+            <!--
             todo: filter based on column type
 
             item-value="value"
@@ -264,7 +276,7 @@ defineExpose({
 <style scoped>
 .nc-filter-grid {
   display: grid;
-  grid-template-columns: 18px 70px auto 90px auto;
+  grid-template-columns: 18px 70px auto auto auto;
   column-gap: 6px;
   row-gap: 6px;
   align-items: center;
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index e9565e2a24..c9256f3256 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -64,9 +64,24 @@ const filterOption = (input: string, option: any) => {
 </script>
 
 <template>
-  <a-select v-model:value="localValue" size="small" show-search placeholder="Select a field" :filter-option="filterOption">
+  <a-select
+    v-model:value="localValue"
+    :dropdown-match-select-width="false"
+    size="small"
+    show-search
+    placeholder="Select a field"
+    :filter-option="filterOption"
+  >
     <a-select-option v-for="option in options" :key="option.value" :value="option.value">
-      <div class="flex gap-2 align-center"><component :is="option.icon" class="!text-xs !mx-0" /> {{ option.label }}</div>
+      <div class="flex gap-2 text-xs items-center align-center h-full">
+        <component :is="option.icon" class="min-w-5 !mx-0" /> <span class="min-w-0"> {{ option.label }}</span>
+      </div>
     </a-select-option>
   </a-select>
 </template>
+
+<style scoped>
+:deep(::placeholder) {
+  @apply !text-xs;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 75081e55fe..2cc67821f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -112,10 +112,10 @@ const copyLink = () => {
     <!-- This view is shared via a private link -->
     <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null">
       <div class="share-link-box nc-share-link-box bg-primary-50">
-        <div class="flex-1 h-min">{{ sharedViewUrl }}</div>
+        <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
         <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
-          <MdiOpenInNewIcon class="text-sm text-gray-500 mt-1" />
+          <MdiOpenInNewIcon class="text-sm text-gray-500 mt-2" />
         </a>
         <MdiCopyIcon class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
@@ -123,13 +123,13 @@ const copyLink = () => {
       <a-collapse ghost>
         <a-collapse-panel key="1" header="More Options">
           <div class="mb-2">
-            <a-checkbox v-model:checked="passwordProtected" class="text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+            <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
             <!--           todo: add password toggle -->
             <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
               <a-input
                 v-model:value="shared.password"
                 size="small"
-                class="max-w-[250px]"
+                class="!text-xs max-w-[250px]"
                 type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
@@ -139,7 +139,7 @@ const copyLink = () => {
             </div>
           </div>
           <div>
-            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="text-xs"
+            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs"
               >Allow Download
             </a-checkbox>
           </div>
@@ -153,4 +153,7 @@ const copyLink = () => {
 .share-link-box {
   @apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded;
 }
+:deep(.ant-collapse-header) {
+  @apply !text-xs;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 103a3703b3..55fad5646d 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -141,7 +141,7 @@ const deleteLink = async (id: string) => {
         <template #default="{ record }">
           <div class="text-sm flex gap-2" :title="text">
             <MdiCopyIcon class="cursor-pointer" @click="copyLink(record)" />
-            <MdiDeleteIcon  class="cursor-pointer" @click="deleteLink(record.id)" />
+            <MdiDeleteIcon class="cursor-pointer" @click="deleteLink(record.id)" />
           </div>
         </template>
       </a-table-column>
@@ -150,7 +150,7 @@ const deleteLink = async (id: string) => {
 </template>
 
 <style scoped>
-:deep(.ant-pagination-item > a){
-@apply leading-normal
+:deep(.ant-pagination-item > a) {
+  @apply leading-normal;
 }
 </style>

From ef3d0d1a5a6f2ac604136ce5f5057e216f71fc00 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:53:06 +0530
Subject: [PATCH 42/67] refactor(gui-v2): field filter correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useViewColumns.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 8f37122bdc..450d737b29 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -106,7 +106,7 @@ export function useViewColumns(
         return false
       }
 
-      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value)
+      return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
     })
   })
 

From bebc61b8f9c91bd2adba008fe0d6df43704c76e0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 17:01:09 +0530
Subject: [PATCH 43/67] refactor(gui-v2): reduce fields placeholder size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/FieldListAutoCompleteDropdown.vue   | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index c9256f3256..5ba26d223a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -69,6 +69,7 @@ const filterOption = (input: string, option: any) => {
     :dropdown-match-select-width="false"
     size="small"
     show-search
+    class="!text-xs"
     placeholder="Select a field"
     :filter-option="filterOption"
   >
@@ -79,9 +80,3 @@ const filterOption = (input: string, option: any) => {
     </a-select-option>
   </a-select>
 </template>
-
-<style scoped>
-:deep(::placeholder) {
-  @apply !text-xs;
-}
-</style>

From 1d8a2c04a77e6096e70dd54debdd2c9c2d6f939b Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 30 Jul 2022 17:18:09 +0530
Subject: [PATCH 44/67] test: cy marker for fields, filter, sort

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/smartsheet-toolbar/ColumnFilterMenu.vue          | 2 +-
 packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 92b0f5a252..2f5483407a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -29,7 +29,7 @@ const applyChanges = async () => {
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
           <!-- Filter -->
-          <span class="text-capitalize nc-filter-menu-btn">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize">{{ $t('activity.filter') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index fb3aebb5cf..fd067d6e2c 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -83,7 +83,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="text-grey"></MdiEyeIcon>
           <!-- Fields -->
-          <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
+          <span class="text-xs text-capitalize">{{ $t('objects.fields') }}</span>
           <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
         </div>
       </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index c5d22ea3c5..cbfef72b4b 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -32,7 +32,7 @@ watch(
         ><div class="flex align-center gap-1">
           <MdiSortIcon class="text-grey" />
           <!-- Sort -->
-          <span class="text-capitalize nc-sort-menu-btn">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize">{{ $t('activity.sort') }}</span>
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>

From d4c4d512a1939fa29ff0a5e7d68d3ee10748be91 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 17:44:03 +0530
Subject: [PATCH 45/67] refactor(gui-v2): show type based direction option

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/SortListMenu.vue       | 24 +++++++++----
 packages/nc-gui-v2/utils/sortUtils.ts         | 35 +++++++++++++++++++
 2 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 packages/nc-gui-v2/utils/sortUtils.ts

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index cbfef72b4b..1316db767e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
+import { getSortDirectionOptions } from '~/utils/sortUtils'
 import { computed, inject, useViewSorts } from '#imports'
 import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
@@ -15,6 +17,12 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
 const columns = computed(() => meta?.value?.columns || [])
+const columnByID = computed<Record<string, ColumnType>>(() =>
+  columns?.value?.reduce((obj: any, col: any) => {
+    obj[col.id] = col
+    return obj
+  }, {}),
+)
 
 watch(
   () => (view?.value as any)?.id,
@@ -57,15 +65,19 @@ watch(
             <a-select
               v-model:value="sort.direction"
               size="small"
-              class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
-              :options="[
-                { text: 'asc', value: 'asc' },
-                { text: 'desc', value: 'desc' },
-              ]"
+              class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"
               @click.stop
               @update:model-value="saveOrUpdate(sort, i)"
-            />
+            >
+              <a-select-option
+                v-for="(option, j) in getSortDirectionOptions(columnByID[sort.fk_column_id]?.uidt)"
+                :key="j"
+                :value="option.value"
+              >
+                <span class="text-xs">{{ option.text }}</span>
+              </a-select-option>
+            </a-select>
             <!--            <template #item="{ item }"> -->
             <!--              <span class="caption font-weight-regular">{{ item.text }}</span> -->
             <!--            </template> -->
diff --git a/packages/nc-gui-v2/utils/sortUtils.ts b/packages/nc-gui-v2/utils/sortUtils.ts
new file mode 100644
index 0000000000..234cf98a17
--- /dev/null
+++ b/packages/nc-gui-v2/utils/sortUtils.ts
@@ -0,0 +1,35 @@
+import { UITypes } from 'nocodb-sdk'
+
+export const getSortDirectionOptions = (uidt: UITypes) => {
+  switch (uidt) {
+    case UITypes.Year:
+    case UITypes.Number:
+    case UITypes.Decimal:
+    case UITypes.Rating:
+    case UITypes.Count:
+    case UITypes.AutoNumber:
+    case UITypes.Time:
+    case UITypes.Currency:
+    case UITypes.Percent:
+    case UITypes.Duration:
+    case UITypes.PhoneNumber:
+    case UITypes.Date:
+    case UITypes.DateTime:
+    case UITypes.CreateTime:
+    case UITypes.LastModifiedTime:
+      return [
+        { text: '1 → 9', value: 'asc' },
+        { text: '9 → 1', value: 'desc' },
+      ]
+    case UITypes.Checkbox:
+      return [
+        { text: '▢ → ✓', value: 'asc' },
+        { text: '✓ → ▢', value: 'desc' },
+      ]
+    default:
+      return [
+        { text: 'A → Z', value: 'asc' },
+        { text: 'Z → A', value: 'desc' },
+      ]
+  }
+}

From 5a5d4f3865ac6117d3c372b6bf266fdc78b2a976 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 17:44:34 +0530
Subject: [PATCH 46/67] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/SearchData.vue  | 2 +-
 packages/nc-gui-v2/composables/useViewData.ts               | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index ddb58201e3..565b1fea62 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -19,7 +19,7 @@ const columns = computed(() =>
     size="small"
     class="max-w-[250px]"
     placeholder="Filter query"
-    @pressEnter="reloadData.trigger()"
+    @press-enter="reloadData.trigger()"
   >
     <template #addonBefore>
       <a-select v-model:value="search.field" :options="columns" style="width: 80px" class="!text-xs" size="small" />
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index e60ed0b2eb..d2a8c4be9c 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,4 +1,4 @@
-import type { Api, FormType, GalleryType, GridType, PaginatedType, TableType } from 'nocodb-sdk'
+import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
@@ -14,8 +14,8 @@ const formatData = (list: Record<string, any>[]) =>
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
   viewMeta:
-    | Ref<(GridType | GalleryType | FormType) & { id: string }>
-    | ComputedRef<(GridType | GalleryType | FormType) & { id: string }>
+    | Ref<(ViewType) & { id: string }>
+    | ComputedRef<(ViewType) & { id: string }>
     | undefined,
   where?: ComputedRef<string | undefined>,
 ) {

From b6c007269f1918774bebbf11642555b4d33a25e2 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 17:37:46 +0530
Subject: [PATCH 47/67] fix(gui-v2):  sync sort on direction change

---
 .../nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 1316db767e..bd4004c55c 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -68,7 +68,7 @@ watch(
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"
               @click.stop
-              @update:model-value="saveOrUpdate(sort, i)"
+              @update:value="saveOrUpdate(sort, i)"
             >
               <a-select-option
                 v-for="(option, j) in getSortDirectionOptions(columnByID[sort.fk_column_id]?.uidt)"

From 872851820c0335cae053c0abb8fb452ed7b9bcc7 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 17:43:51 +0530
Subject: [PATCH 48/67] refactor(gui-v2): close more action menu after menu
 item click

---
 .../nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index cd633a63c8..321dc192a7 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -102,7 +102,7 @@ const exportCsv = async () => {
       <template #overlay>
         <div class="bg-white shadow">
           <div>
-            <div class="nc-menu-item" @click.stop="exportCsv">
+            <div class="nc-menu-item" @click="exportCsv">
               <MdiDownloadIcon />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
@@ -112,7 +112,7 @@ const exportCsv = async () => {
               <!-- Upload CSV -->
               {{ $t('activity.uploadCSV') }}
             </div>
-            <div class="nc-menu-item" @click.stop="sharedViewListDlg = true">
+            <div class="nc-menu-item" @click="sharedViewListDlg = true">
               <MdiViewListIcon />
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}

From 0e47e6decbf76514610ad3053bc5d2e63566ca07 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 17:57:32 +0530
Subject: [PATCH 49/67] refactor(gui-v2): increase shared view modal size

---
 packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 2cc67821f3..582b83dfea 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -110,7 +110,7 @@ const copyLink = () => {
     </a-button>
 
     <!-- This view is shared via a private link -->
-    <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null">
+    <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null" width="min(100vw,640px)">
       <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->

From 7e99edc5bc48aebcf2e649400b360cad2b633f07 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 18:43:55 +0530
Subject: [PATCH 50/67] fix(gui-v2): correction in manual filter save
 implementation

---
 .../smartsheet-toolbar/ColumnFilter.vue       |  9 +--
 .../nc-gui-v2/composables/useViewFilters.ts   | 67 ++++++++-----------
 2 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index cb7ef32895..b9862843f5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -17,6 +17,9 @@ const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
+// todo: replace with inject or get from state
+const shared = ref(false)
+
 const { $e } = useNuxtApp()
 
 const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
@@ -93,10 +96,7 @@ watch(
 )
 
 const applyChanges = async () => {
-  console.log('hello')
-  // sync()
-  // $e('a:filter:apply')
-
+  await sync()
   for (const nestedFilter of nestedFilters?.value || []) {
     if (nestedFilter.parentId) {
       await nestedFilter.applyChanges(true)
@@ -151,6 +151,7 @@ defineExpose({
                 v-model="filter.children"
                 :parent-id="filter.id"
                 nested
+                :auto-save="autoSave"
               />
             </div>
           </template>
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 365f970eb4..6e5da5ca2f 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,17 +1,21 @@
-import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
-import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp } from '#imports'
+import type {FilterType, GalleryType, GridType, KanbanType} from 'nocodb-sdk'
+import type {ComputedRef, Ref} from 'vue'
+import {useNuxtApp} from '#imports'
+import useUIPermission from '~/composables/useUIPermission'
 
 export function useViewFilters(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
+  shared = false
 ) {
+
   // todo: update swagger
-  const filters = ref<(FilterType & { status?: 'update' | 'delete'; parentId?: string })[]>([])
+  const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
-  const { $api } = useNuxtApp()
+  const {$api} = useNuxtApp()
+  const {isUIAllowed} = useUIPermission()
 
   const loadFilters = async () => {
     if (parentId) {
@@ -30,7 +34,7 @@ export function useViewFilters(
           ...filter,
           fk_parent_id: parentId,
         })
-      } else {
+      } else if (filter.status === 'create') {
         filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
           ...filter,
           fk_parent_id: parentId,
@@ -41,54 +45,41 @@ export function useViewFilters(
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
-    //   if (this.shared || !this._isUIAllowed('filterSync')) {
-    //     this.filters.splice(i, 1)
-    //     this.$emit('updated')
-    //   } else
 
-    if (filter.id) {
+    if (shared || !isUIAllowed('filterSync')) {
+      const _filters = unref(filters.value)
+      _filters.splice(i, 1)
+      filters.value = _filters
+    } else if (filter.id) {
       if (!autoApply?.value) {
         filter.status = 'delete'
       } else {
-        await $api.dbTableFilter.delete(filter.id) /**/
-        //       await this.loadFilter()
-        //       this.$emit('updated')
+        await $api.dbTableFilter.delete(filter.id)
+        const _filters = unref(filters.value)
+        _filters.splice(i, 1)
+        filters.value = _filters
+        reloadData?.()
       }
-    } 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 & { status?: string }, i: number) => {
+  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
     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 (!autoApply?.value) {
-      filter.status = 'update'
+    if (shared || !isUIAllowed('filterSync')) {
+      // skip
+    } else if (!autoApply?.value && !force) {
+      filter.status = filter.id ? 'update' : 'create'
     } 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?.()
   }
@@ -97,7 +88,7 @@ export function useViewFilters(
     filters.value.push({
       comparison_op: 'eq',
       value: '',
-      status: 'update',
+      status: 'create',
       logical_op: 'and',
     })
   }
@@ -106,12 +97,12 @@ export function useViewFilters(
     filters.value.push({
       parentId,
       is_group: true,
-      status: 'update',
+      status: 'create',
       logical_op: 'and',
     })
     const index = filters.value.length - 1
-    await saveOrUpdate(filters.value[index], index)
+    await saveOrUpdate(filters.value[index], index, true)
   }
 
-  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
+  return {filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup}
 }

From 4eb762ef40503f34584ca4b078f202e293108f9f Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 19:03:24 +0530
Subject: [PATCH 51/67] refactor(gui-v2): search field style improvement

---
 .../components/smartsheet-toolbar/SearchData.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 565b1fea62..c7613419ed 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
-import { MetaInj, ReloadViewDataHookInj, SearchFieldAndQueryCbkInj } from '~/context'
+import { MetaInj, ReloadViewDataHookInj } from '~/context'
+import MdiSearchIcon from '~icons/mdi/magnify'
+import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const reloadData = inject(ReloadViewDataHookInj)
 const { search, meta } = useSmartsheetStoreOrThrow()
@@ -11,18 +13,24 @@ const columns = computed(() =>
     label: c.title,
   })),
 )
+
 </script>
 
 <template>
   <a-input
     v-model:value="search.value"
     size="small"
-    class="max-w-[250px]"
+    class="max-w-[200px]"
     placeholder="Filter query"
     @press-enter="reloadData.trigger()"
   >
-    <template #addonBefore>
-      <a-select v-model:value="search.field" :options="columns" style="width: 80px" class="!text-xs" size="small" />
+    <template #addonBefore @click="isDropdownOpen = true">
+      <div class="flex align-center relative">
+      <MdiSearchIcon class="text-grey"/>
+      <MdiMenuDownIcon class="text-grey"/>
+      <a-select size="small" :dropdownMatchSelectWidth="false" v-model:value="search.field" :options="columns"  class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0">
+      </a-select>
+      </div>
     </template>
   </a-input>
 </template>

From a7ea654c3c70f0be82d9208b06f9250c1274bf17 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 16:13:44 +0530
Subject: [PATCH 52/67] refactor(gui-v2): bring changes from dev

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 797a59f27b..5757e22c1a 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -3,6 +3,7 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports'
+import { useProvideSmartsheetStore } from '~/composables/useSmartsheetStore'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
 import type { TabItem } from '~/composables'
 

From 3ac39dad92a4f2b0ee0f1e6451af3a660edd8287 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 16:19:41 +0530
Subject: [PATCH 53/67] refactor(gui-v2): center tick mark

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 55fad5646d..95501a97da 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -132,7 +132,7 @@ const deleteLink = async (id: string) => {
       <a-table-column key="meta" title="Download allowed" data-index="title">
         <template #default="{ record }">
           <template v-if="'meta' in record">
-            <span>{{ renderAllowCSVDownload(record) }}</span>
+            <div class="text-center">{{ renderAllowCSVDownload(record) }}</div>
           </template>
         </template>
       </a-table-column>

From 854a731273b8039bdae40e0c7dc6f363131a3d75 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 16:21:20 +0530
Subject: [PATCH 54/67] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/SearchData.vue | 15 ++++++++++-----
 .../components/smartsheet-toolbar/ShareView.vue  |  8 +++++++-
 .../nc-gui-v2/components/smartsheet/Toolbar.vue  |  6 ++----
 packages/nc-gui-v2/composables/useViewFilters.ts | 16 +++++++---------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index c7613419ed..f50fc35703 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -13,7 +13,6 @@ const columns = computed(() =>
     label: c.title,
   })),
 )
-
 </script>
 
 <template>
@@ -26,10 +25,16 @@ const columns = computed(() =>
   >
     <template #addonBefore @click="isDropdownOpen = true">
       <div class="flex align-center relative">
-      <MdiSearchIcon class="text-grey"/>
-      <MdiMenuDownIcon class="text-grey"/>
-      <a-select size="small" :dropdownMatchSelectWidth="false" v-model:value="search.field" :options="columns"  class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0">
-      </a-select>
+        <MdiSearchIcon class="text-grey" />
+        <MdiMenuDownIcon class="text-grey" />
+        <a-select
+          v-model:value="search.field"
+          size="small"
+          :dropdown-match-select-width="false"
+          :options="columns"
+          class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
+        >
+        </a-select>
       </div>
     </template>
   </a-input>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 582b83dfea..01ea64dd96 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -110,7 +110,13 @@ const copyLink = () => {
     </a-button>
 
     <!-- This view is shared via a private link -->
-    <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null" width="min(100vw,640px)">
+    <a-modal
+      v-model:visible="showShareModel"
+      size="small"
+      :title="$t('msg.info.privateLink')"
+      :footer="null"
+      width="min(100vw,640px)"
+    >
       <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index dc289f30f2..b668226c0d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -13,7 +13,7 @@
     <SmartsheetToolbarMoreActions />
 
     <div class="flex-1" />
-<!--    <SmartsheetToolbarLockMenu />
+    <!--    <SmartsheetToolbarLockMenu />
     <div class="dot" />
     <SmartsheetToolbarReload />
     <div class="dot" />
@@ -29,10 +29,8 @@
 <style scoped>
 :deep(.nc-toolbar-btn) {
   @apply border-0 !text-xs font-semibold px-2;
-}/*
+} /*
 .dot {
   @apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
 }*/
-
-
 </style>
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 6e5da5ca2f..95deb81e57 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,6 +1,6 @@
-import type {FilterType, GalleryType, GridType, KanbanType} from 'nocodb-sdk'
-import type {ComputedRef, Ref} from 'vue'
-import {useNuxtApp} from '#imports'
+import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
+import type { ComputedRef, Ref } from 'vue'
+import { useNuxtApp } from '#imports'
 import useUIPermission from '~/composables/useUIPermission'
 
 export function useViewFilters(
@@ -8,14 +8,13 @@ export function useViewFilters(
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  shared = false
+  shared = false,
 ) {
-
   // todo: update swagger
   const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
-  const {$api} = useNuxtApp()
-  const {isUIAllowed} = useUIPermission()
+  const { $api } = useNuxtApp()
+  const { isUIAllowed } = useUIPermission()
 
   const loadFilters = async () => {
     if (parentId) {
@@ -45,7 +44,6 @@ export function useViewFilters(
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
-
     if (shared || !isUIAllowed('filterSync')) {
       const _filters = unref(filters.value)
       _filters.splice(i, 1)
@@ -104,5 +102,5 @@ export function useViewFilters(
     await saveOrUpdate(filters.value[index], index, true)
   }
 
-  return {filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup}
+  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }

From b3d043bb67e80467c97fa729246cdab259bef0be Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 17:20:18 +0530
Subject: [PATCH 55/67] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue | 1 +
 packages/nc-gui-v2/composables/useViewData.ts     | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 5757e22c1a..ae6256d468 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports'
 import { useProvideSmartsheetStore } from '~/composables/useSmartsheetStore'
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index d2a8c4be9c..1a31b877f7 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -13,10 +13,7 @@ const formatData = (list: Record<string, any>[]) =>
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
-  viewMeta:
-    | Ref<(ViewType) & { id: string }>
-    | ComputedRef<(ViewType) & { id: string }>
-    | undefined,
+  viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
   where?: ComputedRef<string | undefined>,
 ) {
   const data = ref<Record<string, any>[]>()

From 230364b515f747507b25e1929efc4b521f16bd2f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 17:22:26 +0530
Subject: [PATCH 56/67] fix(gui-v2): bind event handler properly

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/SearchData.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index f50fc35703..eecb9ecd5d 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -23,8 +23,8 @@ const columns = computed(() =>
     placeholder="Filter query"
     @press-enter="reloadData.trigger()"
   >
-    <template #addonBefore @click="isDropdownOpen = true">
-      <div class="flex align-center relative">
+    <template #addonBefore>
+      <div class="flex align-center relative" @click="isDropdownOpen = true">
         <MdiSearchIcon class="text-grey" />
         <MdiMenuDownIcon class="text-grey" />
         <a-select

From f8ed011dd44f17ec511aa2363f4732b75007ca96 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 17:51:18 +0530
Subject: [PATCH 57/67] fix(gui-v2): import modules from `#imports`

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue  | 3 +--
 packages/nc-gui-v2/composables/index.ts                      | 3 +++
 packages/nc-gui-v2/composables/useDeleteTable.ts             | 5 +++--
 packages/nc-gui-v2/composables/useSmartsheetStore.ts         | 4 ++--
 packages/nc-gui-v2/composables/useViewFilters.ts             | 3 +--
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
index 21b579cbe4..a8981d3034 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from '#imports'
-import useDeleteTable from '~/composables/useDeleteTable'
+import { inject, useDeleteTable } from '#imports'
 import { MetaInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index b9e13de6d8..e3cc4c88c0 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -18,3 +18,6 @@ export * from './useViewFilters'
 export * from './useViews'
 export * from './useViewSorts'
 export * from './useVirtualCell'
+export * from './useDeleteTable'
+export * from './useColumnCreateStore'
+export * from './useSmartsheetStore'
diff --git a/packages/nc-gui-v2/composables/useDeleteTable.ts b/packages/nc-gui-v2/composables/useDeleteTable.ts
index f529ad660d..33e2c46aee 100644
--- a/packages/nc-gui-v2/composables/useDeleteTable.ts
+++ b/packages/nc-gui-v2/composables/useDeleteTable.ts
@@ -2,10 +2,11 @@ import { Modal } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
-import useTabs, { TabType } from '~/composables/useTabs'
+import { useTabs } from '#imports'
+import { TabType } from '~/composables/useTabs'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
-export default () => {
+export function useDeleteTable() {
   const { $e, $api } = useNuxtApp()
   const toast = useToast()
   const { getMeta, removeMeta } = useMetas()
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 5e34f72daa..7ec018f5b0 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -3,7 +3,7 @@ import { createInjectionState } from '@vueuse/core'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
@@ -17,7 +17,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
   })
 
   // getters
-  const isLocked = computed(() => view?.value?.lock_type === 'locked')
+  const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
   const xWhere = computed(() => {
     let where
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 95deb81e57..11b633fd7e 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,7 +1,6 @@
 import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp } from '#imports'
-import useUIPermission from '~/composables/useUIPermission'
+import { useNuxtApp, useUIPermission } from '#imports'
 
 export function useViewFilters(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,

From 5d08bf0b282e0f2e3806d4864ebd3d0e5f14548f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 20:38:31 +0530
Subject: [PATCH 58/67] refactor(gui-v2): remove unnecessary style tag

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue     | 2 --
 .../nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue     | 1 -
 2 files changed, 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
index 4a0162d0d5..9e99331042 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
@@ -13,5 +13,3 @@ const emits = defineEmits(['addRow'])
     </div>
   </a-tooltip>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
index a8981d3034..bf3d4622c1 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -18,4 +18,3 @@ const { deleteTable } = useDeleteTable()
   </a-tooltip>
 </template>
 
-<style scoped></style>

From b076201e7f148466b52505682938dcc155b2daed Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 20:40:08 +0530
Subject: [PATCH 59/67] refactor(gui-v2): rename event name with camel case

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue  | 4 ++--
 .../components/smartsheet-toolbar/ColumnFilterMenu.vue        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index b9862843f5..6671de9c75 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -11,7 +11,7 @@ import MdiAddIcon from '~icons/mdi/plus'
 
 const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>()
 
-const emit = defineEmits(['update:filters-length'])
+const emit = defineEmits(['update:filtersLength'])
 
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
@@ -91,7 +91,7 @@ const logicalOps = [
 watch(
   () => filters?.value?.length,
   (length) => {
-    emit('update:filters-length', length ?? 0)
+    emit('update:filtersLength', length ?? 0)
   },
 )
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 2f5483407a..51a95ba753 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -39,7 +39,7 @@ const applyChanges = async () => {
         ref="filterComp"
         class="nc-table-toolbar-menu"
         :auto-save="autosave"
-        @update:filters-length="filtersLength = $event"
+        @update:filtersLength="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
           <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>

From 28fff67ebd1f3ac4bde8e2384b75dbc4ab77ae4a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 20:44:28 +0530
Subject: [PATCH 60/67] refactor(gui-v2): rename property name

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/SearchData.vue          | 2 +-
 packages/nc-gui-v2/composables/useSmartsheetStore.ts      | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index eecb9ecd5d..3648b6450d 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -17,7 +17,7 @@ const columns = computed(() =>
 
 <template>
   <a-input
-    v-model:value="search.value"
+    v-model:value="search.query"
     size="small"
     class="max-w-[200px]"
     placeholder="Filter query"
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 7ec018f5b0..082b027807 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -13,7 +13,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
   // todo: move to grid view store
   const search = reactive({
     field: '',
-    value: '',
+    query: '',
   })
 
   // getters
@@ -23,11 +23,11 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
     if (!col) return
 
-    if (!search.value.trim()) return
+    if (!search.query.trim()) return
     if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
-      where = `(${col.title},like,%${search.value.trim()}%)`
+      where = `(${col.title},like,%${search.query.trim()}%)`
     } else {
-      where = `(${col.title},eq,${search.value.trim()})`
+      where = `(${col.title},eq,${search.query.trim()})`
     }
     return where
   })

From 07a11916e010255b7c43a24ea9eb4b0f1590186b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 20:45:58 +0530
Subject: [PATCH 61/67] refactor(gui-v2): code cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Toolbar.vue   | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index b668226c0d..93135792eb 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -13,24 +13,11 @@
     <SmartsheetToolbarMoreActions />
 
     <div class="flex-1" />
-    <!--    <SmartsheetToolbarLockMenu />
-    <div class="dot" />
-    <SmartsheetToolbarReload />
-    <div class="dot" />
-    <SmartsheetToolbarAddRow />
-    <div class="dot" />
-    <SmartsheetToolbarDeleteTable />
-    <div class="dot" />
-    <SmartsheetToolbarToggleDrawer class="mr-2" />
- -->
   </div>
 </template>
 
 <style scoped>
 :deep(.nc-toolbar-btn) {
   @apply border-0 !text-xs font-semibold px-2;
-} /*
-.dot {
-  @apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
-}*/
+}
 </style>

From 828b830aa8396a58654d3427e10596cddfa588cd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 20:48:50 +0530
Subject: [PATCH 62/67] refactor(gui-v2): group module imports

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue    | 1 -
 packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue | 3 +--
 packages/nc-gui-v2/components/tabs/Smartsheet.vue              | 3 +--
 packages/nc-gui-v2/composables/useDashboard.ts                 | 2 +-
 5 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
index bf3d4622c1..44b626f6d7 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -17,4 +17,3 @@ const { deleteTable } = useDeleteTable()
     </div>
   </a-tooltip>
 </template>
-
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 01ea64dd96..60fb460171 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -4,7 +4,7 @@ import { ViewTypes } from 'nocodb-sdk'
 import { computed } from 'vue'
 import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
-import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
+import { useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
 import MdiCopyIcon from '~icons/mdi/content-copy'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 95501a97da..b0ec31863e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -3,8 +3,7 @@ import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
 import { useRoute } from '#app'
-import { onMounted } from '#imports'
-import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
+import { onMounted, useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index ae6256d468..6465cac6c0 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -3,8 +3,7 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
-import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports'
-import { useProvideSmartsheetStore } from '~/composables/useSmartsheetStore'
+import { computed, inject, provide, useMetas, useProvideSmartsheetStore, watch, watchEffect } from '#imports'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
 import type { TabItem } from '~/composables'
 
diff --git a/packages/nc-gui-v2/composables/useDashboard.ts b/packages/nc-gui-v2/composables/useDashboard.ts
index 7cde85e020..e9a93e0c70 100644
--- a/packages/nc-gui-v2/composables/useDashboard.ts
+++ b/packages/nc-gui-v2/composables/useDashboard.ts
@@ -1,4 +1,4 @@
-export default () => {
+export function useDashboard() {
   const route = useRoute()
   const dashboardUrl = computed(() => {
     // todo: test in different scenarios

From 71421e22758fe2b158770127d8db60f6463606a0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 21:06:34 +0530
Subject: [PATCH 63/67] refactor(gui-v2): replace toast with message

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilterMenu.vue      | 2 +-
 .../nc-gui-v2/components/smartsheet-toolbar/ShareView.vue   | 6 ++++--
 .../components/smartsheet-toolbar/SharedViewList.vue        | 3 ++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 51a95ba753..2f5483407a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -39,7 +39,7 @@ const applyChanges = async () => {
         ref="filterComp"
         class="nc-table-toolbar-menu"
         :auto-save="autosave"
-        @update:filtersLength="filtersLength = $event"
+        @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
           <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 60fb460171..957ca05138 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -2,6 +2,7 @@
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed } from 'vue'
+import { message } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
 import { useSmartsheetStoreOrThrow } from '#imports'
@@ -13,8 +14,8 @@ const { isUIAllowed } = useUIPermission()
 const { view, $api } = useSmartsheetStoreOrThrow()
 
 const { copy } = useClipboard()
-const toast = useToast()
 const { $e } = useNuxtApp()
+const toast = useToast()
 const { dashboardUrl } = useDashboard()
 
 let showShareModel = $ref(false)
@@ -95,7 +96,7 @@ const saveShareLinkPassword = async () => {
 
 const copyLink = () => {
   copy(sharedViewUrl?.value as string)
-  toast.info('Copied to clipboard')
+  message.success('Copied to clipboard')
 }
 </script>
 
@@ -159,6 +160,7 @@ const copyLink = () => {
 .share-link-box {
   @apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded;
 }
+
 :deep(.ant-collapse-header) {
   @apply !text-xs;
 }
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index b0ec31863e..2f041568f6 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -2,6 +2,7 @@
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
+import { message } from 'ant-design-vue'
 import { useRoute } from '#app'
 import { onMounted, useSmartsheetStoreOrThrow } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -80,7 +81,7 @@ const renderAllowCSVDownload = (view: SharedViewType) => {
 
 const copyLink = (view: SharedViewType) => {
   copy(`${dashboardUrl?.value as string}/${sharedViewUrl(view)}`)
-  toast.info('Copied to clipboard')
+  message.success('Copied to clipboard')
 }
 
 const deleteLink = async (id: string) => {

From 2c4bfb1f221ea42e6bfa2a2cb2edcffa6c459d99 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 21:17:32 +0530
Subject: [PATCH 64/67] refactor(gui-v2): combine composables

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         | 11 ++--
 .../nc-gui-v2/components/dlg/TableCreate.vue  |  4 +-
 .../nc-gui-v2/components/dlg/TableRename.vue  |  2 +-
 .../smartsheet-toolbar/DeleteTable.vue        |  4 +-
 packages/nc-gui-v2/composables/index.ts       |  3 +-
 .../{useDeleteTable.ts => useTable.ts}        | 51 ++++++++++++++++--
 .../nc-gui-v2/composables/useTableCreate.ts   | 52 -------------------
 7 files changed, 56 insertions(+), 71 deletions(-)
 rename packages/nc-gui-v2/composables/{useDeleteTable.ts => useTable.ts} (58%)
 delete mode 100644 packages/nc-gui-v2/composables/useTableCreate.ts

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index ba44e7bc09..e13eadd331 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
-import { Modal } from 'ant-design-vue'
-import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
+import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { useToast } from 'vue-toastification'
 import SettingsModal from './settings/SettingsModal.vue'
-import { useProject, useTabs, useUIPermission, watchEffect } from '#imports'
+import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import { useNuxtApp, useRoute } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiSettingIcon from '~icons/mdi/cog'
 import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
@@ -18,7 +14,6 @@ import MdiPlus from '~icons/mdi/plus-circle-outline'
 import MdiDrag from '~icons/mdi/drag-vertical'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiAPIDocIcon from '~icons/mdi/open-in-new'
-import { TabType } from '~/composables'
 
 const { addTab } = useTabs()
 const toast = useToast()
@@ -27,7 +22,7 @@ const { isUIAllowed } = useUIPermission()
 const route = useRoute()
 const { tables, loadTables } = useProject(route.params.projectId as string)
 const { closeTab } = useTabs()
-const { deleteTable } = useDeleteTable()
+const { deleteTable } = useTable()
 
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 7aaf775c5c..a9260fe7d0 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -2,7 +2,7 @@
 import type { ComponentPublicInstance } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
-import { onMounted, useProject, useTableCreate, useTabs } from '#imports'
+import { onMounted, useProject, useTable, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
 import { TabType } from '~/composables'
 
@@ -29,7 +29,7 @@ const { addTab } = useTabs()
 
 const { loadTables } = useProject()
 
-const { table, createTable, generateUniqueTitle, tables, project } = useTableCreate(async (table) => {
+const { table, createTable, generateUniqueTitle, tables, project } = useTable(async (table) => {
   await loadTables()
 
   addTab({
diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index b18148ca70..70bbb33699 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -3,7 +3,7 @@ import { watchEffect } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
-import { useProject, useTableCreate, useTabs } from '#imports'
+import { useProject, useTabs } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { validateTableName } from '~/utils/validation'
 import { useNuxtApp } from '#app'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
index 44b626f6d7..0a4f7ba450 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { inject, useDeleteTable } from '#imports'
+import { inject, useTable } from '#imports'
 import { MetaInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
 const meta = inject(MetaInj)
 
-const { deleteTable } = useDeleteTable()
+const { deleteTable } = useTable()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index e3cc4c88c0..92931e7baf 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -10,7 +10,7 @@ export * from './useHasMany'
 export * from './useManyToMany'
 export * from './useMetas'
 export * from './useProject'
-export * from './useTableCreate'
+export * from './useTable'
 export * from './useTabs'
 export * from './useViewColumns'
 export * from './useViewData'
@@ -18,6 +18,5 @@ export * from './useViewFilters'
 export * from './useViews'
 export * from './useViewSorts'
 export * from './useVirtualCell'
-export * from './useDeleteTable'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
diff --git a/packages/nc-gui-v2/composables/useDeleteTable.ts b/packages/nc-gui-v2/composables/useTable.ts
similarity index 58%
rename from packages/nc-gui-v2/composables/useDeleteTable.ts
rename to packages/nc-gui-v2/composables/useTable.ts
index 33e2c46aee..c30a5cdd3c 100644
--- a/packages/nc-gui-v2/composables/useDeleteTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -2,16 +2,59 @@ import { Modal } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
-import { useTabs } from '#imports'
+import { useProject } from './useProject'
 import { TabType } from '~/composables/useTabs'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils'
+import { useNuxtApp } from '#app'
+
+export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
+  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+    title: '',
+    table_name: '',
+    columns: ['id', 'title', 'created_at', 'updated_at'],
+  })
 
-export function useDeleteTable() {
   const { $e, $api } = useNuxtApp()
   const toast = useToast()
   const { getMeta, removeMeta } = useMetas()
   const { loadTables } = useProject()
   const { closeTab } = useTabs()
+  const { sqlUi, project, tables } = useProject()
+
+  const createTable = async () => {
+    if (!sqlUi?.value) return
+    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
+      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
+        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+        return true
+      }
+      return table.columns.includes(col.column_name)
+    })
+
+    const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+      ...table,
+      columns,
+    })
+
+    onTableCreate?.(tableMeta)
+  }
+
+  watch(
+    () => table.title,
+    (title) => {
+      table.table_name = `${project?.value?.prefix || ''}${title}`
+    },
+  )
+
+  const generateUniqueTitle = () => {
+    let c = 1
+    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
+      c++
+    }
+    table.title = `Sheet${c}`
+  }
 
   const deleteTable = (table: TableType) => {
     $e('c:table:delete')
@@ -65,5 +108,5 @@ export function useDeleteTable() {
     })
   }
 
-  return { deleteTable }
+  return { table, createTable, generateUniqueTitle, tables, project, deleteTable }
 }
diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
deleted file mode 100644
index 581ea88463..0000000000
--- a/packages/nc-gui-v2/composables/useTableCreate.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { TableType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { useNuxtApp } from '#app'
-
-export function useTableCreate(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
-    title: '',
-    table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
-  })
-
-  const { sqlUi, project, tables } = useProject()
-  const { $api } = useNuxtApp()
-
-  const createTable = async () => {
-    if (!sqlUi?.value) return
-    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
-        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-        return true
-      }
-      return table.columns.includes(col.column_name)
-    })
-
-    const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
-      ...table,
-      columns,
-    })
-
-    onTableCreate?.(tableMeta)
-  }
-
-  watch(
-    () => table.title,
-    (title) => {
-      table.table_name = `${project?.value?.prefix || ''}${title}`
-    },
-  )
-
-  const generateUniqueTitle = () => {
-    let c = 1
-    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
-      c++
-    }
-    table.title = `Sheet${c}`
-  }
-
-  return { table, createTable, generateUniqueTitle, tables, project }
-}

From 6b883a004aaf953d783e2518834d54ba799d4a19 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 21:48:35 +0530
Subject: [PATCH 65/67] refactor(gui-v2): ui permission code correction, reduce
 modal size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilter.vue          | 5 +++--
 .../nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue  | 4 ++--
 .../nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue | 2 +-
 packages/nc-gui-v2/composables/useUIPermission/index.ts     | 6 ++----
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 6671de9c75..87d4bb03c8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -3,9 +3,9 @@ import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { useNuxtApp } from '#app'
-import { inject, useViewFilters, watchEffect } from '#imports'
+import { inject, useViewFilters } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
-import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
@@ -16,6 +16,7 @@ const emit = defineEmits(['update:filtersLength'])
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
+const isLocked = inject(IsLockedInj)
 
 // todo: replace with inject or get from state
 const shared = ref(false)
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index fd067d6e2c..ff4ec2a87e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -16,8 +16,8 @@ const { fieldsOrder, coverImageField, modelValue } = defineProps<{
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
-const isLocked = inject(IsLockedInj)
 const rootFields = inject(FieldsInj)
+const isLocked = inject(IsLockedInj)
 
 const { $e } = useNuxtApp()
 
@@ -94,7 +94,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
         <div class="nc-fields-list py-1">
-          <Draggable :list="fields" @change="onMove($event)">
+          <Draggable :list="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field }">
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
                 <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 321dc192a7..daeeaf6402 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -127,7 +127,7 @@ const exportCsv = async () => {
       </template>
     </a-dropdown>
 
-    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="90vw" :footer="null">
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
   </div>
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index f2bdd4d8a6..dcfbcd8352 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -10,7 +10,6 @@ export function useUIPermission() {
   const isUIAllowed = (permission: RolePermissions, _skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
-
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
       userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
@@ -37,9 +36,8 @@ export function useUIPermission() {
 
       return (
         hasRole &&
-        (rolePermission === '*' || typeof rolePermission === 'object'
-          ? rolePermission[permission as keyof typeof rolePermission] === true
-          : false)
+        (rolePermission === '*' ||
+          (typeof rolePermission === 'object' && rolePermission[permission as keyof typeof rolePermission]))
       )
     })
   }

From 702d81305b87d8c75e00ad21ace4285fabe69f1b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 1 Aug 2022 23:40:04 +0530
Subject: [PATCH 66/67] chore(gui-v2): update vuedraggable version

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/package-lock.json | 33 +++++++++++++++-------------
 packages/nc-gui-v2/package.json      |  2 +-
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 37e04f1621..8f0a2e375d 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -19,7 +19,7 @@
         "unique-names-generator": "^4.7.1",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
-        "vuedraggable": "^2.24.3",
+        "vuedraggable": "^4.1.0",
         "vuetify": "^3.0.0-alpha.13",
         "xlsx": "^0.17.3"
       },
@@ -13869,17 +13869,20 @@
       }
     },
     "node_modules/vuedraggable": {
-      "version": "2.24.3",
-      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
-      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
       "dependencies": {
-        "sortablejs": "1.10.2"
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
       }
     },
     "node_modules/vuedraggable/node_modules/sortablejs": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
-      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
     },
     "node_modules/vuetify": {
       "version": "3.0.0-beta.5",
@@ -24681,17 +24684,17 @@
       }
     },
     "vuedraggable": {
-      "version": "2.24.3",
-      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
-      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
       "requires": {
-        "sortablejs": "1.10.2"
+        "sortablejs": "1.14.0"
       },
       "dependencies": {
         "sortablejs": {
-          "version": "1.10.2",
-          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
-          "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+          "version": "1.14.0",
+          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+          "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
         }
       }
     },
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 83aae5e093..c038b5bb59 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -25,7 +25,7 @@
     "unique-names-generator": "^4.7.1",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
-    "vuedraggable": "^2.24.3",
+    "vuedraggable": "^4.1.0",
     "vuetify": "^3.0.0-alpha.13",
     "xlsx": "^0.17.3"
   },

From dcd5fba24e13bf7fdd1d9ade1f2adb2818084d3f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 2 Aug 2022 02:50:24 +0530
Subject: [PATCH 67/67] Update index.ts

---
 packages/nc-gui-v2/composables/useUIPermission/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index b8bc370319..460664e998 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -34,7 +34,7 @@ export function useUIPermission() {
     return Object.entries<boolean>(roles).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
 
-      return hasRole && (rolePermission === '*' || rolePermission[permission])
+      return hasRole && (rolePermission === '*' || rolePermission?.[permission])
     })
   }