From 4786c550402d29ec3d724fcf7c3df5600ebc75c7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 9 Aug 2022 16:12:43 +0200
Subject: [PATCH 01/31] fix(gui-v2): pass unique row+col key to attachment cell
 for dropzone refs

---
 .../components/cell/attachment/index.vue      | 30 +++++++++----------
 .../nc-gui-v2/components/smartsheet/Cell.vue  | 10 +++----
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  9 ++++--
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index d1a385c2c9..6c6c8d36d9 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -6,21 +6,17 @@ import { useSortable } from './sort'
 import Carousel from './Carousel.vue'
 import { onMounted, ref, useDropZone, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
-import MaterialSymbolsAttachFile from '~icons/material-symbols/attach-file'
-import MaterialArrowExpandIcon from '~icons/mdi/arrow-expand'
-import MaterialSymbolsFileCopyOutline from '~icons/material-symbols/file-copy-outline'
-import MdiReload from '~icons/mdi/reload'
-import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
+  rowIndex: number
 }
 
 interface Emits {
   (event: 'update:modelValue', value: string | Record<string, any>): void
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
@@ -60,7 +56,7 @@ onKeyDown('Escape', () => {
 /** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
 onMounted(() => {
   if (typeof document !== 'undefined') {
-    dropZoneRef.value = document.querySelector(`td[data-col="${column.value.id}"]`) as HTMLTableDataCellElement
+    dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement
   }
 })
 </script>
@@ -73,7 +69,7 @@ onMounted(() => {
       <general-overlay
         v-model="isOverDropZone"
         inline
-        :target="`td[data-col='${column.id}']`"
+        :target="`td[data-key='${rowIndex}${column.id}']`"
         class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
@@ -100,12 +96,15 @@ onMounted(() => {
     </div>
 
     <template v-if="visibleItems.length">
-      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-dull">
+      <div
+        ref="sortableRef"
+        :class="{ dragging }"
+        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull"
+      >
         <div
           v-for="(item, i) of visibleItems"
           :id="item.url"
           :key="item.url || item.title"
-          style="flex: 1 1 50px"
           :class="isImage(item.title, item.mimetype) ? '' : 'border-1 rounded'"
           class="nc-attachment flex items-center justify-center min-h-[50px]"
         >
@@ -120,7 +119,7 @@ onMounted(() => {
               placeholder
               :alt="item.title || `#${i}`"
               :src="item.url || item.data"
-              class="ring-1 ring-gray-300 rounded"
+              class="ring-1 ring-gray-300 rounded max-h-[50px] max-w-[50px]"
               @click="selectedImage = item"
             />
 
@@ -137,10 +136,7 @@ onMounted(() => {
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
-          <MaterialArrowExpandIcon
-            class="select-none transform group-hover:(text-pink-500 scale-120)"
-            @click.stop="modalVisible = true"
-          />
+          <MdiArrowExpand class="select-none transform group-hover:(text-pink-500 scale-120)" @click.stop="modalVisible = true" />
         </a-tooltip>
       </div>
     </template>
@@ -152,6 +148,10 @@ onMounted(() => {
 <style lang="scss">
 .nc-cell {
   .nc-attachment-cell {
+    .nc-attachment {
+      @apply w-[50px] h-[50px] min-h-[50px] min-w-[50px];
+    }
+
     .ghost,
     .ghost > * {
       @apply !pointer-events-none;
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 76fd005ab4..de3a6763a2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -10,14 +10,13 @@ interface Props {
   column: ColumnType
   modelValue: any
   editEnabled: boolean
-}
-
-interface Emits {
-  (event: 'update:modelValue', value: any): void
+  rowIndex: number
 }
 
 const props = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
+
 const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
@@ -25,6 +24,7 @@ provide(ColumnInj, column)
 provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
 let changed = $ref(false)
+
 const syncValue = useDebounceFn(function () {
   changed = false
   emit('save')
@@ -114,7 +114,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
   >
     <CellTextArea v-if="isTextArea" v-model="vModel" />
     <CellCheckbox v-else-if="isBoolean" v-model="vModel" />
-    <CellAttachment v-else-if="isAttachment" v-model="vModel" />
+    <CellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />
     <CellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
     <CellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
     <CellDatePicker v-else-if="isDate" v-model="vModel" />
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ab3f79a9dd..39105df9ad 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -255,7 +255,7 @@ const onNavigate = (dir: NavigateDir) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-            <tr class="group">
+            <tr>
               <th>
                 <div class="flex align-center w-[80px]">
                   <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
@@ -264,6 +264,7 @@ const onNavigate = (dir: NavigateDir) => {
                     class="group-hover:flex w-full align-center"
                   >
                     <a-checkbox v-model:checked="selectedAllRecords" />
+
                     <span class="flex-1" />
                   </div>
                 </div>
@@ -279,6 +280,7 @@ const onNavigate = (dir: NavigateDir) => {
                 @xcresized="resizingCol = null"
               >
                 <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+
                 <SmartsheetHeaderCell v-else :column="col" />
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
@@ -287,6 +289,7 @@ const onNavigate = (dir: NavigateDir) => {
                   <div class="h-full w-[60px] flex align-center justify-center">
                     <MdiPlus class="text-sm" />
                   </div>
+
                   <template #overlay>
                     <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
                   </template>
@@ -313,10 +316,11 @@ const onNavigate = (dir: NavigateDir) => {
               <td
                 v-for="(columnObj, colIndex) of fields"
                 :key="rowIndex + columnObj.title"
-                class="cell pointer nc-grid-cell"
+                class="cell relative cursor-pointer nc-grid-cell"
                 :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
+                :data-key="rowIndex + columnObj.id"
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"
@@ -338,6 +342,7 @@ const onNavigate = (dir: NavigateDir) => {
                     v-model="row.row[columnObj.title]"
                     :column="columnObj"
                     :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                    :row-index="rowIndex"
                     @update:edit-enabled="editEnabled = false"
                     @save="updateOrSaveRow(row, columnObj.title)"
                     @navigate="onNavigate"

From 1846ef4d687efbbba65d47f4393799698a9c709e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 9 Aug 2022 17:07:18 +0200
Subject: [PATCH 02/31] chore(gui-v2): add max-height & overflow scroll to
 attachment cell

---
 packages/nc-gui-v2/components/cell/attachment/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 6c6c8d36d9..3390e9dc57 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -99,7 +99,7 @@ onMounted(() => {
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull"
+        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-scroll"
       >
         <div
           v-for="(item, i) of visibleItems"

From 2534c43a599d37750c8f81996f4211b8c179b0a0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 9 Aug 2022 17:41:36 +0200
Subject: [PATCH 03/31] chore(gui-v2): prevent overflow

---
 packages/nc-gui-v2/components.d.ts  | 1 +
 packages/nc-gui-v2/layouts/base.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 208e7f88ab..102e3199c9 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -47,6 +47,7 @@ declare module '@vue/runtime-core' {
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index a8c2b5e131..41d7a556a5 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -83,7 +83,7 @@ const logout = () => {
         </template>
       </a-layout-header>
 
-      <div class="w-full" style="height: calc(100% - var(--header-height))">
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
         <slot />
       </div>
     </a-layout>

From 83e99a1baf8d672d06a94a751c87c964f825cfe4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 15:56:16 +0530
Subject: [PATCH 04/31] fix/solved issues with rollup and lookup

---
 .../smartsheet-column/EditOrAdd.vue           | 15 +++++++---
 .../smartsheet-column/LookupOptions.vue       | 29 ++++++++++++++-----
 .../smartsheet-column/RollupOptions.vue       | 18 ++++++++----
 .../smartsheet-header/VirtualCellIcon.vue     |  3 +-
 4 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 64e3dda69e..ed61814398 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -35,6 +35,8 @@ const {
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
+const onlyNameUpdateOnEditColumns = [UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup]
+
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
     ...uiTypes.filter((t) => !isEdit.value || !t.virtual),
@@ -80,6 +82,8 @@ watchEffect(() => {
       antInput.value.focus()
       antInput.value.select()
     }, 300)
+
+    advancedOptions.value = false
   }
 })
 
@@ -96,7 +100,7 @@ watch(
 </script>
 
 <template>
-  <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
+  <div class="max-w-[550px] min-w-[450px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
       <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
         <a-input
@@ -107,7 +111,10 @@ watch(
           @input="onAlter(8)"
         />
       </a-form-item>
-      <a-form-item :label="$t('labels.columnType')">
+      <a-form-item
+        v-if="!editColumnDropdown && onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt)"
+        :label="$t('labels.columnType')"
+      >
         <a-select
           v-model:value="formState.uidt"
           show-search
@@ -129,9 +136,9 @@ watch(
       <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
       <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
       <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
-      <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
+      <SmartsheetColumnLookupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Lookup" />
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
-      <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
+      <SmartsheetColumnRollupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Rollup" />
       <SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
       <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
       <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index 441ad7636f..87bb1ead8d 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -38,6 +38,14 @@ const refTables = $computed(() => {
       }))
       .filter((table: any) => table.col?.fk_related_model_id === table.id && !table.mm) ?? []
   )
+  return meta.columns
+    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    .map((c) => ({
+      col: c.colOptions,
+      column: c,
+      ...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
+    }))
+    .filter((table) => table.col.fk_related_model_id === table.id && !table.mm)
 })
 
 const columns = $computed(() => {
@@ -46,7 +54,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
 })
 </script>
 
@@ -54,17 +62,22 @@ const columns = $computed(() => {
   <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
-          <a-select-option v-for="(table, index) of refTables" :key="index" :value="table.col.fk_column_id">
-            <div class="flex flex-row items-center space-x-0.5 h-full">
-              <div class="font-weight-bold text-[0.7rem]">{{ table.column.title }}</div>
-
-              <div class="text-[0.5rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
+        <a-select
+          v-model:value="formState.fk_relation_column_id"
+          size="small"
+          dropdown-class-name="!w-64"
+          @change="onDataTypeChange"
+        >
+          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+            <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
+              <div class="font-semibold text-xs">{{ table.column.title }}</div>
+              <div class="text-[0.65rem] text-gray-600">
+                {{ relationNames[table.col.type] }} {{ table.title || table.table_name }}
+              </div>
             </div>
           </a-select-option>
         </a-select>
       </a-form-item>
-
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
         <a-select
           v-model:value="formState.fk_lookup_column_id"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
index 8273973062..86a9b9be54 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
@@ -4,7 +4,6 @@ import { inject, useColumnCreateStoreOrThrow, useMetas, useProject } from '#impo
 import { MetaInj } from '~/context'
 
 const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
-
 const { tables } = $(useProject())
 
 const meta = $(inject(MetaInj)!)
@@ -69,11 +68,18 @@ const columns = $computed(() => {
   <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
-          <a-select-option v-for="(table, index) of refTables" :key="index" :value="table.col.fk_column_id">
-            <div class="flex flex-row items-center space-x-0.5">
-              <div class="font-weight-bold text-xs">{{ table.column.title }}</div>
-              <div class="text-[0.45rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
+        <a-select
+          v-model:value="formState.fk_relation_column_id"
+          size="small"
+          dropdown-class-name="!w-64"
+          @change="onDataTypeChange"
+        >
+          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+            <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
+              <div class="font-semibold text-xs">{{ table.column.title }}</div>
+              <div class="text-[0.65rem] text-gray-600">
+                ({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})
+              </div>
             </div>
           </a-select-option>
         </a-select>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 99b6eb6aca..33c48863b5 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -11,6 +11,7 @@ import FormulaIcon from '~icons/mdi/math-integral'
 import RollupIcon from '~icons/mdi/movie-roll'
 import CountIcon from '~icons/mdi/counter'
 import SpecificDBTypeIcon from '~icons/mdi/database-settings'
+import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 
 const props = defineProps<{ columnMeta?: ColumnType }>()
 const columnMeta = toRef(props, 'columnMeta')
@@ -34,7 +35,7 @@ const icon = computed(() => {
     case UITypes.Formula:
       return FormulaIcon
     case UITypes.Lookup:
-      return GenericIcon
+      return TableColumnPlusBefore
     case UITypes.Rollup:
       return RollupIcon
     case UITypes.Count:

From 5de83162fc931e2e39da4c6fd6cce300d9cc1aed Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 16:55:44 +0530
Subject: [PATCH 05/31] fix/resolved issue regarding EditOrAdd

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index ed61814398..5d2572b376 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -112,7 +112,7 @@ watch(
         />
       </a-form-item>
       <a-form-item
-        v-if="!editColumnDropdown && onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt)"
+        v-if="!(editColumnDropdown && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
         :label="$t('labels.columnType')"
       >
         <a-select

From 0c690589f9672fcdf494c863d2792d0544077c7b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 17:07:05 +0530
Subject: [PATCH 06/31] fix/improved advancedOption flag reset logic and
 improved LTAR column

---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 5d2572b376..350036f72d 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -82,9 +82,8 @@ watchEffect(() => {
       antInput.value.focus()
       antInput.value.select()
     }, 300)
-
-    advancedOptions.value = false
   }
+  advancedOptions.value = false
 })
 
 watch(
@@ -139,7 +138,9 @@ watch(
       <SmartsheetColumnLookupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Lookup" />
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
       <SmartsheetColumnRollupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Rollup" />
-      <SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
+      <SmartsheetColumnLinkedToAnotherRecordOptions
+        v-if="!editColumnDropdown && formState.uidt === UITypes.LinkToAnotherRecord"
+      />
       <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
       <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
 

From 509f8fd9f517283d198c3c6307512592dc86483f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 17:20:12 +0530
Subject: [PATCH 07/31] fix/removed issue where hidden form elements comes up
 when edit column is closed

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

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index bc73968e60..54028073f7 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -61,7 +61,7 @@ function onVisibleChange() {
   <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange">
     <span />
     <template #overlay>
-      <SmartsheetColumnEditOrAdd :edit-column-dropdown="editColumnDropdown" @click.stop @cancel="editColumnDropdown = false" />
+      <SmartsheetColumnEditOrAdd :edit-column-dropdown="true" @click.stop @cancel="editColumnDropdown = false" />
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">

From fccb728da97d0c860a953dc0dae8eb51a573028f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 17:44:30 +0530
Subject: [PATCH 08/31] fix/now related table meta is reloaded when ltar is
 created

---
 packages/nc-gui-v2/composables/useColumnCreateStore.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index dc1b715725..3f4b1cbd28 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -24,7 +24,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
   (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
     const { sqlUi } = useProject()
     const { $api } = useNuxtApp()
-
+    const { getMeta } = useMetas()
     const toast = useToast()
 
     const idType = null
@@ -196,6 +196,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
           }
           await $api.dbTableColumn.create(meta.value.id as string, formState.value)
 
+          if (formState.value.uidt === UITypes.LinkToAnotherRecord) {
+            await getMeta(formState.value.childId, true)
+          }
           toast.success('Column created')
         }
         onSuccess()

From 2d814191136b59d6db20765f5ff8b217fcf3a760 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 17:51:49 +0530
Subject: [PATCH 09/31] fix/improved form submission of Add column

---
 .../components/smartsheet-column/EditOrAdd.vue  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 350036f72d..c69bc749d0 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -66,6 +66,11 @@ function onCancel() {
   }
 }
 
+async function onSubmit() {
+  await addOrUpdate(reloadMetaAndData)
+  advancedOptions.value = false
+}
+
 // create column meta if it's a new column
 watchEffect(() => {
   if (!isEdit.value) {
@@ -171,17 +176,7 @@ watch(
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
-          <a-button
-            html-type="submit"
-            type="primary"
-            size="small"
-            @click="
-              () => {
-                addOrUpdate(reloadMetaAndData)
-                advancedOptions = false
-              }
-            "
-          >
+          <a-button html-type="submit" type="primary" size="small" @click="onSubmit">
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>

From b5914425afdc6ad656528704718becfbc8349aeb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 15:28:26 +0530
Subject: [PATCH 10/31] feat(gui-v2): make active table selected in treeview

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../components/dashboard/TreeView.vue         | 56 ++++++++++++-------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 208e7f88ab..8706c282ff 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -41,12 +41,14 @@ declare module '@vue/runtime-core' {
     AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 1d897f9975..565a314a00 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,15 +1,23 @@
 <script setup lang="ts">
+import { useNuxtApp, useRoute } from '#app'
+import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { useToast } from 'vue-toastification'
-import { useProject, useTable, useTabs, watchEffect } from '#imports'
-import { useNuxtApp, useRoute } from '#app'
+import { TabType } from '~/composables'
 import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuDown from '~icons/mdi/chevron-down'
-import MdiPlus from '~icons/mdi/plus-circle-outline'
+import MdiSettingIcon from '~icons/mdi/cog'
+import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiDrag from '~icons/mdi/drag-vertical'
+import MdiView from '~icons/mdi/eye-circle-outline'
+import MdiAPIDocIcon from '~icons/mdi/open-in-new'
+import MdiPlus from '~icons/mdi/plus-circle-outline'
+import MdiTable from '~icons/mdi/table'
+import MdiTableLarge from '~icons/mdi/table-large'
+import SettingsModal from './settings/SettingsModal.vue'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 
 const { addTab } = useTabs()
@@ -21,9 +29,10 @@ const { $api, $e } = useNuxtApp()
 const route = useRoute()
 
 const { tables, loadTables } = useProject(route.params.projectId as string)
-
+const { closeTab, activeTab } = useTabs()
 const { deleteTable } = useTable()
 
+
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
     acc[table.id as string] = table
@@ -31,14 +40,12 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
+const settingsDlg = ref(false)
 const showTableList = ref(true)
-
 const tableCreateDlg = ref(false)
-
+const tableDeleteDlg = ref(false)
 const menuRef = $ref<HTMLLIElement>()
-
 let key = $ref(0)
-
 let sortable: Sortable
 
 // todo: replace with vuedraggable
@@ -106,13 +113,11 @@ const icon = (table: TableType) => {
 }
 
 const filterQuery = $ref('')
-
 const filteredTables = $computed(() => {
   return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
 })
 
 const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
-
 const setMenuContext = (type: 'table' | 'main', value?: any) => {
   contextMenuTarget.type = type
   contextMenuTarget.value = value
@@ -120,24 +125,25 @@ const setMenuContext = (type: 'table' | 'main', value?: any) => {
 }
 
 const renameTableDlg = ref(false)
-
 const renameTableMeta = ref()
-
 const showRenameTableDlg = (table: TableType, rightClick = false) => {
   $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
   renameTableMeta.value = table
   renameTableDlg.value = true
 }
-
 const reloadTables = async () => {
   $e('a:table:refresh:navdraw')
   await loadTables()
 }
-
 const addTableTab = (table: TableType) => {
   $e('a:table:open')
   addTab({ title: table.title, id: table.id, type: table.type as any })
 }
+
+const activeTable = computed(() => {
+  return [TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null
+})
+
 </script>
 
 <template>
@@ -185,12 +191,9 @@ const addTableTab = (table: TableType) => {
                 v-for="table of tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="[
-                  { hidden: !filteredTables?.includes(table) },
-                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                  route.params.title && route.params.title.includes(table.title) ? 'bg-blue-500/15' : '',
-                ]"
-                class="pl-5 pr-3 py-2 text-sm cursor-pointer group"
+                :class="[{ hidden: !filteredTables?.includes(table),
+                 'active': activeTable === table.title,}, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,]"
+                class="nc-tree-item pl-5 pr-3 py-2 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
                 @click="addTableTab(table)"
@@ -299,4 +302,17 @@ const addTableTab = (table: TableType) => {
     @apply !bg-primary/25 text-primary;
   }
 }
+
+.nc-tree-item{
+  @apply relative  cursor-pointer after:(content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
+}
+
+.nc-tree-item.active{
+  @apply !text-primary after:(!opacity-10);
+}
+
+.nc-tree-item:hover{
+  @apply !text-grey after:(!opacity-5);
+}
+
 </style>

From cf42def81d664404d321a102af19ad1e82016920 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 15:32:17 +0530
Subject: [PATCH 11/31] refactor(gui-v2): `add new row` size correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ab3f79a9dd..c8cf24defa 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -126,7 +126,7 @@ const makeEditable = (row: Row, col: ColumnType) => {
     return
   }
   if (!isPkAvail.value && !row.rowMeta.new) {
-    message.info("Update not allowed for table which doesn't have primary Key")
+    message.info('Update not allowed for table which doesn\'t have primary Key')
     return
   }
   if (col.ai) {
@@ -190,35 +190,34 @@ const onKeyDown = async (e: KeyboardEvent) => {
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
-    default:
-      {
-        const rowObj = data.value[selected.row]
-        const columnObj = fields.value[selected.col]
-
-        if (e.metaKey || e.ctrlKey) {
-          switch (e.keyCode) {
-            // copy - ctrl/cmd +c
-            case 67:
-              await copy(rowObj.row[columnObj.title] || '')
-              break
-          }
+    default: {
+      const rowObj = data.value[selected.row]
+      const columnObj = fields.value[selected.col]
+
+      if (e.metaKey || e.ctrlKey) {
+        switch (e.keyCode) {
+          // copy - ctrl/cmd +c
+          case 67:
+            await copy(rowObj.row[columnObj.title] || '')
+            break
         }
+      }
 
-        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
-          return
-        }
+      if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+        return
+      }
 
-        /** on letter key press make cell editable and empty */
-        if (e?.key?.length === 1) {
-          if (!isPkAvail && !rowObj.rowMeta.new) {
-            return message.info("Update not allowed for table which doesn't have primary Key")
-          }
-          if (makeEditable(rowObj, columnObj)) {
-            rowObj.row[columnObj.title] = ''
-          }
-          // editEnabled = true
+      /** on letter key press make cell editable and empty */
+      if (e?.key?.length === 1) {
+        if (!isPkAvail && !rowObj.rowMeta.new) {
+          return message.info('Update not allowed for table which doesn\'t have primary Key')
         }
+        if (makeEditable(rowObj, columnObj)) {
+          rowObj.row[columnObj.title] = ''
+        }
+        // editEnabled = true
       }
+    }
       break
   }
 }
@@ -253,7 +252,8 @@ const onNavigate = (dir: NavigateDir) => {
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
+        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault"
+               @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="group">
               <th>
@@ -304,6 +304,7 @@ const onNavigate = (dir: NavigateDir) => {
                     class="group-hover:flex w-full items-center justify-between p-1"
                   >
                     <a-checkbox v-model:checked="row.rowMeta.selected" />
+                    <span class="flex-1" />
                     <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
                       <MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" />
                     </div>

From b7c3f032d8839bea3b1242d1ee15ef6d27d3835d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 16:04:31 +0530
Subject: [PATCH 12/31] refactor(gui-v2): skip outside click handler if active
 cell is json or virtual

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         | 25 +++-----
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 61 +++++++++++--------
 2 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 565a314a00..60528bf2b7 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,38 +1,28 @@
 <script setup lang="ts">
-import { useNuxtApp, useRoute } from '#app'
-import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { useToast } from 'vue-toastification'
+import { useNuxtApp, useRoute } from '#app'
+import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
 import { TabType } from '~/composables'
 import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuDown from '~icons/mdi/chevron-down'
-import MdiSettingIcon from '~icons/mdi/cog'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiDrag from '~icons/mdi/drag-vertical'
-import MdiView from '~icons/mdi/eye-circle-outline'
-import MdiAPIDocIcon from '~icons/mdi/open-in-new'
 import MdiPlus from '~icons/mdi/plus-circle-outline'
-import MdiTable from '~icons/mdi/table'
-import MdiTableLarge from '~icons/mdi/table-large'
-import SettingsModal from './settings/SettingsModal.vue'
-import MdiMenuIcon from '~icons/mdi/dots-vertical'
 
 const { addTab } = useTabs()
 
-const toast = useToast()
-
 const { $api, $e } = useNuxtApp()
 
 const route = useRoute()
 
 const { tables, loadTables } = useProject(route.params.projectId as string)
-const { closeTab, activeTab } = useTabs()
+const { activeTab } = useTabs()
 const { deleteTable } = useTable()
 
-
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
     acc[table.id as string] = table
@@ -40,10 +30,8 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
-const settingsDlg = ref(false)
 const showTableList = ref(true)
 const tableCreateDlg = ref(false)
-const tableDeleteDlg = ref(false)
 const menuRef = $ref<HTMLLIElement>()
 let key = $ref(0)
 let sortable: Sortable
@@ -143,7 +131,6 @@ const addTableTab = (table: TableType) => {
 const activeTable = computed(() => {
   return [TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null
 })
-
 </script>
 
 <template>
@@ -191,8 +178,10 @@ const activeTable = computed(() => {
                 v-for="table of tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="[{ hidden: !filteredTables?.includes(table),
-                 'active': activeTable === table.title,}, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,]"
+                :class="[
+                  { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                ]"
                 class="nc-tree-item pl-5 pr-3 py-2 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index c8cf24defa..403ef2dfd1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
-import { isVirtualCol } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
@@ -190,34 +190,35 @@ const onKeyDown = async (e: KeyboardEvent) => {
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
-    default: {
-      const rowObj = data.value[selected.row]
-      const columnObj = fields.value[selected.col]
-
-      if (e.metaKey || e.ctrlKey) {
-        switch (e.keyCode) {
-          // copy - ctrl/cmd +c
-          case 67:
-            await copy(rowObj.row[columnObj.title] || '')
-            break
+    default:
+      {
+        const rowObj = data.value[selected.row]
+        const columnObj = fields.value[selected.col]
+
+        if (e.metaKey || e.ctrlKey) {
+          switch (e.keyCode) {
+            // copy - ctrl/cmd +c
+            case 67:
+              await copy(rowObj.row[columnObj.title] || '')
+              break
+          }
         }
-      }
-
-      if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
-        return
-      }
 
-      /** on letter key press make cell editable and empty */
-      if (e?.key?.length === 1) {
-        if (!isPkAvail && !rowObj.rowMeta.new) {
-          return message.info('Update not allowed for table which doesn\'t have primary Key')
+        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+          return
         }
-        if (makeEditable(rowObj, columnObj)) {
-          rowObj.row[columnObj.title] = ''
+
+        /** on letter key press make cell editable and empty */
+        if (e?.key?.length === 1) {
+          if (!isPkAvail && !rowObj.rowMeta.new) {
+            return message.info("Update not allowed for table which doesn't have primary Key")
+          }
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
-        // editEnabled = true
       }
-    }
       break
   }
 }
@@ -227,6 +228,12 @@ useEventListener(document, 'keydown', onKeyDown)
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
 onClickOutside(smartTable, () => {
+  if (selected.col === null) return
+
+  const activeCol = fields.value[selected.col]
+
+  if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
+
   selected.row = null
   selected.col = null
 })
@@ -295,7 +302,7 @@ const onNavigate = (dir: NavigateDir) => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
+            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row group">
               <td key="row-index" class="caption nc-grid-cell group">
                 <div class="flex items-center w-[80px]">
                   <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
@@ -316,8 +323,8 @@ const onNavigate = (dir: NavigateDir) => {
                 :key="rowIndex + columnObj.title"
                 class="cell pointer nc-grid-cell"
                 :class="{
-                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                }"
+                    active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                  }"
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"

From ca99585bf89f8635f43bf1b0a53de49fe1444204 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 16:14:24 +0530
Subject: [PATCH 13/31] fix(gui-v2): force-reload related table meta on LTAR
 column creation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useColumnCreateStore.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 3f4b1cbd28..2ede66d9ba 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -196,9 +196,11 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
           }
           await $api.dbTableColumn.create(meta.value.id as string, formState.value)
 
-          if (formState.value.uidt === UITypes.LinkToAnotherRecord) {
-            await getMeta(formState.value.childId, true)
+          /** if LTAR column then force reload related table meta */
+          if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value.id !== formState.value.childId) {
+            getMeta(formState.value.childId, true)
           }
+
           toast.success('Column created')
         }
         onSuccess()

From 5a39c5fa8890ebe2352040857f8ef6212ff52b64 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 16:19:27 +0530
Subject: [PATCH 14/31] fix(gui-v2): close edit/add column window on click
 outside

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/Menu.vue          | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 54028073f7..9fc38ce5fe 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onClickOutside } from '@vueuse/core'
 import { Modal } from 'ant-design-vue'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -55,13 +56,24 @@ function onVisibleChange() {
   // by clicking cancel button
   editColumnDropdown.value = true
 }
+
+const editOrAddCard = ref()
+
+onClickOutside(editOrAddCard, () => {
+  editColumnDropdown.value = false
+})
 </script>
 
 <template>
   <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange">
     <span />
     <template #overlay>
-      <SmartsheetColumnEditOrAdd :edit-column-dropdown="true" @click.stop @cancel="editColumnDropdown = false" />
+      <SmartsheetColumnEditOrAdd
+        ref="editOrAddCard"
+        :edit-column-dropdown="editColumnDropdown"
+        @click.stop
+        @cancel="editColumnDropdown = false"
+      />
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">

From 4883d87b2a4b876780c003bf358c8ea0f5c1b8b4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 16:24:11 +0530
Subject: [PATCH 15/31] fix(gui-v2): active item color in tree view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/TreeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 60528bf2b7..9cd3285018 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -246,7 +246,7 @@ const activeTable = computed(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .nc-treeview-container {
   @apply h-[calc(100vh_-_var(--header-height))];
 }
@@ -296,11 +296,11 @@ const activeTable = computed(() => {
   @apply relative  cursor-pointer after:(content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
 }
 
-.nc-tree-item.active{
+.nc-tree-item.active {
   @apply !text-primary after:(!opacity-10);
 }
 
-.nc-tree-item:hover{
+.nc-tree-item:hover {
   @apply !text-grey after:(!opacity-5);
 }
 

From cfdb26fe9772613cfdc2f45d4b8fcd2aa915e658 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 17:19:54 +0530
Subject: [PATCH 16/31] chore(swagger): add missing column props

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

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 909ba74e72..446b338e07 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -234,6 +234,8 @@ export interface ColumnType {
   deleted?: boolean;
   visible?: boolean;
   order?: number;
+  system?: number | boolean;
+  meta?: any;
   colOptions?:
     | LinkToAnotherRecordType
     | FormulaType
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 741f09f841..edb0bc7433 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6579,6 +6579,13 @@
           "order": {
             "type": "number"
           },
+          "system": {
+            "type": [
+              "number",
+              "boolean"
+            ]
+          },
+          "meta": {},
           "colOptions": {
             "oneOf": [
               {

From 83be973007f1dc831883e7880374a4f09723ca6c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 17:30:45 +0530
Subject: [PATCH 17/31] fix(swagger): ignore system fields from filter and sort

- ignore hasmany and manytomany fields from sort

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         | 11 ++++--
 .../FieldListAutoCompleteDropdown.vue         | 36 +++++++++++++------
 .../smartsheet-toolbar/SortListMenu.vue       |  1 +
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 9cd3285018..4cedb9a1a1 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -296,12 +296,19 @@ const activeTable = computed(() => {
   @apply relative  cursor-pointer after:(content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
 }
 
+.nc-tree-item svg{
+  @apply text-gray-500
+}
+
 .nc-tree-item.active {
-  @apply !text-primary after:(!opacity-10);
+  @apply !text-primary after:(!opacity-5);
+  svg {
+    @apply !text-primary
+  }
 }
 
 .nc-tree-item:hover {
-  @apply !text-grey after:(!opacity-5);
+  @apply !text-grey after:(!opacity-2);
 }
 
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index 5ba26d223a..8936e8ac7e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SelectProps } from 'ant-design-vue'
-import { isVirtualCol } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { computed } from 'vue'
 import { MetaInj } from '~/context'
 import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
@@ -8,9 +9,10 @@ import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 
 interface Props {
   modelValue?: string
+  isSort?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, isSort } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -48,14 +50,25 @@ const localValue = computed({
   },
 } */
 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,
-  })),
+  meta?.value?.columns
+    ?.filter(
+      (c: ColumnType) =>
+        c &&
+        (isSort
+          ? !(
+              c.uidt === UITypes.LinkToAnotherRecord &&
+              (c.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO
+            )
+          : !c.colOptions || !c.system),
+    )
+    .map((c: ColumnType) => ({
+      value: c.id,
+      label: c.title,
+      icon: h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+        columnMeta: c,
+      }),
+      c,
+    })),
 )
 
 const filterOption = (input: string, option: any) => {
@@ -75,7 +88,8 @@ const filterOption = (input: string, option: any) => {
   >
     <a-select-option v-for="option in options" :key="option.value" :value="option.value">
       <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>
+        <component :is="option.icon" class="min-w-5 !mx-0" />
+        <span class="min-w-0"> {{ option.label }}</span>
       </div>
     </a-select-option>
   </a-select>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index bd4004c55c..35958a0745 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -59,6 +59,7 @@ watch(
               v-model="sort.fk_column_id"
               class="caption nc-sort-field-select"
               :columns="columns"
+              is-sort
               @click.stop
               @update:model-value="saveOrUpdate(sort, i)"
             />

From b7ece5e8a919c78667393ebbd9edbeee2041552f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 17:45:11 +0530
Subject: [PATCH 18/31] chore(gui-v2): make editColumnDropdown optional

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index c69bc749d0..cee05fdec2 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -8,7 +8,7 @@ import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
 
 interface Props {
-  editColumnDropdown: boolean
+  editColumnDropdown?: boolean
 }
 
 const { editColumnDropdown } = defineProps<Props>()

From 73a8f9099f21a7d688b9663c9d7ee6fe9c8beea7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 18:06:27 +0530
Subject: [PATCH 19/31] chore(gui-v2): include hm and mm columns in lookup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-column/LookupOptions.vue       | 23 +++++++------------
 scripts/sdk/swagger.json                      |  3 +++
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index 87bb1ead8d..4057a6d246 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import { useColumnCreateStoreOrThrow } from '#imports'
 import { MetaInj } from '~/context'
@@ -27,25 +28,17 @@ const refTables = $computed(() => {
     return []
   }
 
-  // todo: type issues with ColumnType so we have to cast to any
-  return (
-    meta.columns
-      ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions?.type !== 'bt' && !c.system)
-      .map((c) => ({
-        col: c.colOptions,
-        column: c,
-        ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
-      }))
-      .filter((table: any) => table.col?.fk_related_model_id === table.id && !table.mm) ?? []
-  )
   return meta.columns
-    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map((c) => ({
+    .filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    .map<TableType & { col: LinkToAnotherRecordType; column: ColumnType }>((c: ColumnType) => ({
       col: c.colOptions,
       column: c,
-      ...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
+      ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter((table) => table.col.fk_related_model_id === table.id && !table.mm)
+    .filter(
+      (table: TableType & { col: LinkToAnotherRecordType; column: ColumnType }) =>
+        table.col.fk_related_model_id === table.id && !table.mm,
+    )
 })
 
 const columns = $computed(() => {
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index edb0bc7433..1fbb4fbb86 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6233,6 +6233,9 @@
           "order": {
             "type": "number"
           },
+          "mm": {
+            "type": "boolean"
+          },
           "columns": {
             "type": "array",
             "items": {

From 85debd814f10222d8156896f70e669e1b8b66efa Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 19:35:06 +0530
Subject: [PATCH 20/31] chore(gui-v2): remove `alias` prop of view which is no
 longer exist

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue   | 2 +-
 packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue | 5 ++---
 packages/nocodb-sdk/src/lib/Api.ts                           | 1 +
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index e5f17f339e..c23ae557ec 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -32,7 +32,7 @@ async function loadTableList() {
     isLoading = true
     // TODO includeM2M
     tables = await $api.project.modelVisibilityList(project.value?.id, {
-      includeM2M: true,
+      includeM2M: false,
     })
   } catch (e) {
     console.error(e)
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 911da6e0d3..1ca1420520 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -66,7 +66,7 @@ function validate(value?: string) {
     return 'View name is required'
   }
 
-  if (views.value.every((v1) => ((v1 as GridType | KanbanType | GalleryType).alias || v1.title) !== value)) {
+  if (views.value.every((v1) => v1.title !== value)) {
     return 'View name should be unique'
   }
 
@@ -134,10 +134,9 @@ const initSortable = (el: HTMLElement) => {
 
 onMounted(() => menuRef && initSortable(menuRef.$el))
 
-// todo: fix view type, alias is missing for some reason?
 /** Navigate to view by changing url param */
 function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) {
-  router.push({ params: { viewTitle: (view.alias ?? view.title) || '' } })
+  router.push({ params: { viewTitle: view.title || '' } })
 }
 
 /** Rename a view */
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 446b338e07..eea755013a 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -163,6 +163,7 @@ export interface TableReqType {
   pinned?: boolean;
   deleted?: boolean;
   order?: number;
+  mm?: boolean;
   columns?: ColumnType[];
 }
 

From 50645333fef8e0c21de8a7790bd67cdab6597961 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 20:11:50 +0530
Subject: [PATCH 21/31] chore(gui-v2): type correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue   | 8 ++++----
 packages/nocodb-sdk/src/lib/Api.ts                        | 6 +++---
 scripts/sdk/swagger.json                                  | 7 ++++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 1ca1420520..1800b9e3b7 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import type { SortableEvent } from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
 import { notification } from 'ant-design-vue'
@@ -45,7 +45,7 @@ let isMarked = $ref<string | false>(false)
 
 /** Watch currently active view, so we can mark it in the menu */
 watch(activeView, (nextActiveView) => {
-  const _nextActiveView = nextActiveView as GridType | FormType | KanbanType
+  const _nextActiveView = nextActiveView as ViewType
 
   if (_nextActiveView && _nextActiveView.id) {
     selected.value = [_nextActiveView.id]
@@ -140,7 +140,7 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi
 }
 
 /** Rename a view */
-async function onRename(view: Record<string, any>) {
+async function onRename(view: ViewType) {
   const valid = validate(view.title)
 
   if (valid !== true) {
@@ -152,7 +152,7 @@ async function onRename(view: Record<string, any>) {
 
   try {
     // todo typing issues, order and id do not exist on all members of ViewTypes (Kanban, Gallery, Form, Grid)
-    await api.dbView.update(view.id, {
+    await api.dbView.update(view.id!, {
       title: view.title,
       order: view.order,
     })
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index eea755013a..f3d6548d06 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -122,7 +122,7 @@ export interface TableType {
 
 export interface ViewType {
   id?: string;
-  title?: string;
+  title: string;
   deleted?: boolean;
   order?: number;
   fk_model_id?: string;
@@ -1518,7 +1518,7 @@ export class Api<
      */
     reorder: (
       tableId: string,
-      data: { order?: string },
+      data: { order?: number },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
@@ -1632,7 +1632,7 @@ export class Api<
     update: (
       viewId: string,
       data: {
-        order?: string;
+        order?: number;
         title?: string;
         show_system_fields?: boolean;
         lock_type?: 'collaborative' | 'locked' | 'personal';
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 1fbb4fbb86..97f7a52a62 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -1334,7 +1334,7 @@
                 "type": "object",
                 "properties": {
                   "order": {
-                    "type": "string"
+                    "type": "number"
                   }
                 }
               }
@@ -1506,7 +1506,7 @@
                 "type": "object",
                 "properties": {
                   "order": {
-                    "type": "string"
+                    "type": "number"
                   },
                   "title": {
                     "type": "string"
@@ -6011,7 +6011,8 @@
             "type": "string"
           },
           "title": {
-            "type": "string"
+            "type": "string",
+            "required": true
           },
           "deleted": {
             "type": "boolean"

From e8d797c6149e10e783f0586b46d9de7461113e5e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 20:20:46 +0530
Subject: [PATCH 22/31] fix(gui-v2): make title property required

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/models/View.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index 844bcfaf95..8941b27a14 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/packages/nocodb/src/lib/models/View.ts
@@ -23,7 +23,7 @@ import extractProps from '../meta/helpers/extractProps';
 const { v4: uuidv4 } = require('uuid');
 export default class View implements ViewType {
   id?: string;
-  title?: string;
+  title: string;
   uuid?: string;
   password?: string;
   show: boolean;

From 947e9ec02ed7cfb649a1f020ab04e94440238db9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 22:49:47 +0530
Subject: [PATCH 23/31] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/cell/MultiSelect.vue |  4 +---
 .../components/cell/attachment/Carousel.vue   |  2 +-
 .../components/dashboard/TreeView.vue         | 10 ++++----
 .../components/dlg/AirtableImport.vue         |  6 ++---
 .../nc-gui-v2/components/dlg/QuickImport.vue  |  2 +-
 .../nc-gui-v2/components/dlg/TableCreate.vue  | 23 +++++++------------
 .../nc-gui-v2/components/dlg/TableRename.vue  |  6 ++---
 .../components/general/MiniSidebar.vue        |  8 +++----
 .../smartsheet-column/CurrencyOptions.vue     |  2 +-
 .../smartsheet-column/DurationOptions.vue     |  2 +-
 .../smartsheet-column/EditOrAdd.vue           | 13 ++---------
 .../smartsheet-column/RatingOptions.vue       |  2 +-
 .../smartsheet-header/VirtualCell.vue         |  2 +-
 .../smartsheet-toolbar/ColumnFilter.vue       |  3 +--
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  2 --
 .../smartsheet-toolbar/MoreActions.vue        |  8 +++----
 .../smartsheet-toolbar/ShareView.vue          |  1 -
 .../smartsheet-toolbar/SharedViewList.vue     | 10 ++++----
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  6 ++---
 .../components/smartsheet/Gallery.vue         |  5 +---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  9 ++++----
 .../components/smartsheet/sidebar/index.vue   |  4 +---
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |  3 +--
 .../nc-gui-v2/components/webhook/Test.vue     |  4 ++--
 packages/nc-gui-v2/layouts/base.vue           |  8 +++----
 packages/nc-gui-v2/pages/index/user/index.vue | 10 --------
 .../pages/index/user/index/index.vue          |  4 ++--
 .../pages/nc/[projectId]/index/index.vue      |  6 -----
 .../nc-gui-v2/pages/project/index/[id].vue    |  4 ++--
 .../nc-gui-v2/pages/project/index/create.vue  |  6 +----
 packages/nc-gui-v2/pages/projects/index.vue   |  2 --
 31 files changed, 59 insertions(+), 118 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index f43f62fc8f..d33373e547 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
+import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string | null
@@ -11,8 +11,6 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
-const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject(EditModeInj, ref(false))
 
 const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index cc92d6daf5..0b3b91cf3f 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -2,7 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { isImage } from '~/utils'
-import { computed, onClickOutside, ref, watch } from '#imports'
+import { computed, onClickOutside, ref } from '#imports'
 import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
 import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
 import MdiCloseCircle from '~icons/mdi/close-circle'
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 4cedb9a1a1..3b1c67522b 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
-import { useToast } from 'vue-toastification'
 import { useNuxtApp, useRoute } from '#app'
 import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
 import { TabType } from '~/composables'
@@ -292,23 +291,22 @@ const activeTable = computed(() => {
   }
 }
 
-.nc-tree-item{
+.nc-tree-item {
   @apply relative  cursor-pointer after:(content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
 }
 
-.nc-tree-item svg{
-  @apply text-gray-500
+.nc-tree-item svg {
+  @apply text-gray-500;
 }
 
 .nc-tree-item.active {
   @apply !text-primary after:(!opacity-5);
   svg {
-    @apply !text-primary
+    @apply !text-primary;
   }
 }
 
 .nc-tree-item:hover {
   @apply !text-grey after:(!opacity-2);
 }
-
 </style>
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 6b5ce40636..4b21d3be0e 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -25,9 +25,7 @@ const { $state } = useNuxtApp()
 
 const toast = useToast()
 
-const { sqlUi, project, loadTables } = useProject()
-
-const loading = ref(false)
+const { project, loadTables } = useProject()
 
 const showGoToDashboardButton = ref(false)
 
@@ -78,7 +76,7 @@ const dialogShow = computed({
 
 const useForm = Form.useForm
 
-const { resetFields, validate, validateInfos } = useForm(syncSource, validators)
+const { validateInfos } = useForm(syncSource, validators)
 
 const disableImportButton = computed(() => {
   return !syncSource.value.details.apiKey || !syncSource.value.details.syncSourceUrlOrId
diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index c9ccf6dd6b..0f9e6fcdbb 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -68,7 +68,7 @@ const validators = computed(() => {
   }
 })
 
-const { resetFields, validate, validateInfos } = useForm(importState, validators)
+const { validate, validateInfos } = useForm(importState, validators)
 
 const importMeta = computed(() => {
   if (IsImportTypeExcel.value) {
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 1ad2835612..7fd815f2ce 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Form } from 'ant-design-vue'
-import { useToast } from 'vue-toastification'
 import { onMounted, useProject, useTable, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
 import { TabType } from '~/composables'
@@ -15,12 +14,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
-const toast = useToast()
-
-const valid = ref(false)
-
-const isIdToggleAllowed = ref(false)
-
 const isAdvanceOptVisible = ref(false)
 
 const { addTab } = useTabs()
@@ -38,17 +31,17 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
   dialogShow.value = false
 })
 
-const prefix = computed(() => project?.value?.prefix || '')
+// const prefix = computed(() => project?.value?.prefix || '')
 
 const validateDuplicateAlias = (v: string) => {
   return (tables?.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
 }
-const validateLeadingOrTrailingWhiteSpace = (v: string) => {
-  return !/^\s+|\s+$/.test(v) || 'Leading or trailing whitespace not allowed in table name'
-}
-const validateDuplicate = (v: string) => {
-  return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
-}
+// const validateLeadingOrTrailingWhiteSpace = (v: string) => {
+//   return !/^\s+|\s+$/.test(v) || 'Leading or trailing whitespace not allowed in table name'
+// }
+// const validateDuplicate = (v: string) => {
+//   return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
+// }
 
 const inputEl = ref<HTMLInputElement>()
 
@@ -60,7 +53,7 @@ const validators = computed(() => {
     table_name: [validateTableName],
   }
 })
-const { resetFields, validate, validateInfos } = useForm(table, validators)
+const { validateInfos } = useForm(table, validators)
 
 onMounted(() => {
   generateUniqueTitle()
diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index 180b6f9b10..1e4fffac4f 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -28,9 +28,9 @@ const dialogShow = computed({
 
 const { updateTab } = useTabs()
 const { loadTables } = useProject()
-const { project, tables } = useProject()
+const { tables } = useProject()
 
-const prefix = computed(() => project?.value?.prefix || '')
+// const prefix = computed(() => project?.value?.prefix || '')
 
 const inputEl = $ref<any>()
 let loading = $ref(false)
@@ -60,7 +60,7 @@ const validators = computed(() => {
     ],
   }
 })
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
+const { validateInfos } = useForm(formState, validators)
 
 watchEffect(() => {
   if (tableMeta?.title) formState.title = tableMeta?.title
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index ff218455c4..2fdfa98a5b 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { breakpointsTailwind } from '@vueuse/core'
+// import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
-import { computed, useBreakpoints, useGlobal, useProject, useRoute, useSidebar } from '#imports'
+import { computed, useGlobal, useProject, useRoute, useSidebar } from '#imports'
 
 /** get current breakpoints (for enabling sidebar) */
-const breakpoints = useBreakpoints(breakpointsTailwind)
+// const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const { signOut, signedIn, isLoading, user } = useGlobal()
+const { signOut, signedIn, user } = useGlobal()
 
 const { isOpen } = useSidebar({ isOpen: true })
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue
index 0ac430a8f0..c99055881a 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue
@@ -7,7 +7,7 @@ interface Option {
   value: string
 }
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState, validateInfos, setAdditionalValidations } = useColumnCreateStoreOrThrow()
 
 const validators = {
   'meta.currency_locale': [
diff --git a/packages/nc-gui-v2/components/smartsheet-column/DurationOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/DurationOptions.vue
index 6c9c4d2047..080c4901f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/DurationOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/DurationOptions.vue
@@ -2,7 +2,7 @@
 import { useColumnCreateStoreOrThrow } from '#imports'
 import { durationOptions } from '@/utils'
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState } = useColumnCreateStoreOrThrow()
 
 const durationOptionList =
   durationOptions.map((o) => ({
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index cee05fdec2..607e899f2d 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -21,17 +21,8 @@ const { getMeta } = useMetas()
 
 const formulaOptionsRef = ref()
 
-const {
-  formState,
-  resetFields,
-  validate,
-  validateInfos,
-  onUidtOrIdTypeChange,
-  onAlter,
-  addOrUpdate,
-  generateNewColumnMeta,
-  isEdit,
-} = useColumnCreateStoreOrThrow()
+const { formState, validateInfos, onUidtOrIdTypeChange, onAlter, addOrUpdate, generateNewColumnMeta, isEdit } =
+  useColumnCreateStoreOrThrow()
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index b5d4bf9640..55e780efac 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -3,7 +3,7 @@ import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
 import { enumColor, getMdiIcon } from '@/utils'
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState } = useColumnCreateStoreOrThrow()
 
 // cater existing v1 cases
 const iconList = [
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 2da6fd20ce..589e9963bf 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -16,7 +16,7 @@ provide(ColumnInj, column)
 const { metas } = useMetas()
 const meta = inject(MetaInj)
 
-const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
+const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
 
 const colOptions = $computed(() => column.value?.colOptions)
 const tableTile = $computed(() => meta?.value?.title)
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 1de9644763..49b2485012 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -5,7 +5,7 @@ import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { useNuxtApp } from '#app'
 import { inject, useViewFilters } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
-import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
@@ -16,7 +16,6 @@ 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/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 40b644614e..afa5379404 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
-import { useState } from '#app'
 import { ActiveViewInj, IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
-const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 const activeView = inject(ActiveViewInj)
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 99c3ec34da..967b067295 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -18,10 +18,10 @@ const sharedViewListDlg = ref(false)
 // todo : replace with inject
 const publicViewId = null
 
-// TODO:: identify based on meta
-const isView = ref(false)
-
-const { isUIAllowed } = useUIPermission()
+// // TODO:: identify based on meta
+// const isView = ref(false)
+//
+// const { isUIAllowed } = useUIPermission()
 
 const { project } = useProject()
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 957ca05138..d2a6484f22 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -10,7 +10,6 @@ import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 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()
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 2f041568f6..6d350ba68b 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -3,7 +3,6 @@ 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'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
@@ -20,18 +19,17 @@ interface SharedViewType {
   showPassword?: boolean
 }
 
-const { view, $api, meta } = useSmartsheetStoreOrThrow()
+const { $api, meta } = useSmartsheetStoreOrThrow()
 const { copy } = useClipboard()
 const toast = useToast()
-const route = useRoute()
 const { dashboardUrl } = useDashboard()
 
-let isLoading = $ref(false)
+// let isLoading = $ref(false)
 // let activeSharedView = $ref(null)
 const sharedViewList = ref<SharedViewType[]>()
 
 const loadSharedViewsList = async () => {
-  isLoading = true
+  // isLoading = true
   const list = await $api.dbViewShare.list(meta.value?.id as string)
 
   console.log(unref(sharedViewList))
@@ -50,7 +48,7 @@ const loadSharedViewsList = async () => {
   //   activeSharedView = null
   // }
 
-  isLoading = false
+  // isLoading = false
 }
 
 onMounted(loadSharedViewsList)
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 76fd005ab4..bba80bba88 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -12,9 +12,9 @@ interface Props {
   editEnabled: boolean
 }
 
-interface Emits {
-  (event: 'update:modelValue', value: any): void
-}
+// interface Emits {
+//   (event: 'update:modelValue', value: any): void
+// }
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 144fa1b2f6..11ea16cf53 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -12,10 +12,7 @@ const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
 
 // todo: get from parent ( inject or use prop )
-const isPublicView = false
-
-const selected = reactive<{ row?: number | null; col?: number | null }>({})
-const editEnabled = ref(false)
+// const isPublicView = false
 
 const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 403ef2dfd1..d7c1957d5d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -126,7 +126,7 @@ const makeEditable = (row: Row, col: ColumnType) => {
     return
   }
   if (!isPkAvail.value && !row.rowMeta.new) {
-    message.info('Update not allowed for table which doesn\'t have primary Key')
+    message.info("Update not allowed for table which doesn't have primary Key")
     return
   }
   if (col.ai) {
@@ -259,8 +259,7 @@ const onNavigate = (dir: NavigateDir) => {
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault"
-               @contextmenu.prevent="contextMenu = true">
+        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="group">
               <th>
@@ -323,8 +322,8 @@ const onNavigate = (dir: NavigateDir) => {
                 :key="rowIndex + columnObj.title"
                 class="cell pointer nc-grid-cell"
                 :class="{
-                    active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                  }"
+                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                }"
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index ec8682807f..6985fa1b12 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -3,7 +3,7 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useRoute, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 
 const meta = inject(MetaInj, ref())
@@ -12,8 +12,6 @@ const activeView = inject(ActiveViewInj, ref())
 
 const { views, loadViews } = useViews(meta)
 
-const { api } = useApi()
-
 const route = useRoute()
 
 provide(ViewListInj, views)
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 744559aa1a..e1dbca365d 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
-import { ViewTypes } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import { computed, inject, provide, useMetas, useProvideSmartsheetStore, watch, watchEffect } from '#imports'
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index e1ab3cc54a..06ca930d0b 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -10,7 +10,7 @@ interface Props {
 
 const { hook } = defineProps<Props>()
 
-const { $state, $api, $e } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const toast = useToast()
 
@@ -23,7 +23,7 @@ const activeKey = ref(0)
 
 watch(
   () => hook?.operation,
-  async (v) => {
+  async (_v) => {
     await loadSampleData()
   },
 )
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index a8c2b5e131..d9918be88f 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -1,15 +1,13 @@
 <script lang="ts" setup>
-import { breakpointsTailwind } from '@vueuse/core'
+// import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
-import { computed, useBreakpoints, useGlobal, useProject, useRoute } from '#imports'
+import { computed, useGlobal, useRoute } from '#imports'
 
 /** get current breakpoints (for enabling sidebar) */
-const breakpoints = useBreakpoints(breakpointsTailwind)
+// const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const { signOut, signedIn, isLoading, user } = useGlobal()
 
-const { project } = useProject()
-
 const route = useRoute()
 
 const email = computed(() => user.value?.email ?? '---')
diff --git a/packages/nc-gui-v2/pages/index/user/index.vue b/packages/nc-gui-v2/pages/index/user/index.vue
index 28af9beac1..f8eacfa737 100644
--- a/packages/nc-gui-v2/pages/index/user/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index.vue
@@ -1,13 +1,3 @@
-<script setup lang="ts">
-import { navigateTo, useNuxtApp, useRoute } from '#app'
-import MdiAccountCog from '~icons/mdi/account-cog'
-import MdiFolderOutline from '~icons/mdi/folder-outline'
-
-const { $api } = useNuxtApp()
-
-const route = useRoute()
-</script>
-
 <template>
   <NuxtLayout>
     <NuxtPage />
diff --git a/packages/nc-gui-v2/pages/index/user/index/index.vue b/packages/nc-gui-v2/pages/index/user/index/index.vue
index 06ed2d8c12..8835749bcd 100644
--- a/packages/nc-gui-v2/pages/index/user/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index/index.vue
@@ -6,7 +6,7 @@ import { reactive, ref, useApi } from '#imports'
 import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 import MdiKeyChange from '~icons/mdi/key-change'
 
-const { api, isLoading } = useApi()
+const { api } = useApi()
 
 const { t } = useI18n()
 
@@ -34,7 +34,7 @@ const formRules = {
     { required: true, message: t('msg.error.signUpRules.passwdRequired') },
     // Passwords match
     {
-      validator: (_: unknown, v: string) => {
+      validator: (_: unknown, _v: string) => {
         return new Promise((resolve, reject) => {
           if (form.password === form.passwordRepeat) return resolve(true)
           reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index fc64b769e1..9256d50063 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -21,12 +21,6 @@ const currentMenu = ref<string[]>(['addORImport'])
 
 provide(TabMetaInj, activeTab)
 
-function onEdit(targetKey: number, action: string) {
-  if (action !== 'add') {
-    closeTab(targetKey)
-  }
-}
-
 function openQuickImportDialog(type: string) {
   quickImportDialog.value = true
   importType.value = type
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index cbf745bd24..35b04df940 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -4,13 +4,13 @@ import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
-import { navigateTo, useNuxtApp, useRoute } from '#app'
+import { navigateTo, useRoute } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 import { nextTick, reactive, useSidebar } from '#imports'
 
-const { api, isLoading } = useApi()
+const { api } = useApi()
 
 useSidebar({ hasSidebar: false })
 
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index 9e9289aed1..b765696412 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUpdated } from '@vue/runtime-core'
+import { onMounted } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { nextTick, reactive, ref, useApi, useSidebar } from '#imports'
@@ -8,10 +8,6 @@ import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
-const name = ref('')
-
-const valid = ref(false)
-
 const { $e } = useNuxtApp()
 
 const { api, isLoading } = useApi()
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index 3180393d24..ef7d2cf038 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -56,8 +56,6 @@ const deleteProject = (project: ProjectType) => {
     },
   })
 }
-
-const visible = ref(true)
 </script>
 
 <template>

From 99a71d0096c321955a97c7cffe60f78645709856 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 23:07:04 +0530
Subject: [PATCH 24/31] fix(gui-v2): grid contextmenu - use a-menu within
 a-dropdown

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index d7c1957d5d..910eeefdcd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -373,14 +373,14 @@ const onNavigate = (dir: NavigateDir) => {
           </tbody>
         </table>
         <template #overlay>
-          <div class="bg-white shadow" @click="contextMenu = false">
-            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
-            <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
-            <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
-            <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
-              Insert new row
-            </div>
-          </div>
+          <a-menu class="bg-white shadow" @click="contextMenu = false">
+            <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)"><span class="text-xs">Delete row</span></a-menu-item>
+            <a-menu-item @click="deleteSelectedRows"><span class="text-xs">Delete all selected rows</span></a-menu-item>
+            <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)"><span class="text-xs">Clear cell</span></a-menu-item>
+            <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">
+              <span class="text-xs">Insert new row</span>
+            </a-menu-item>
+          </a-menu>
         </template>
       </a-dropdown>
     </div>

From e9d4e278356905b265c92766af4c1461c9a15686 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 23:14:40 +0530
Subject: [PATCH 25/31] fix(gui-v2): fix issue with column header menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/Menu.vue     | 48 ++++++++++++-------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  8 +++-
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 9fc38ce5fe..3879cb06ab 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -79,26 +79,38 @@ onClickOutside(editOrAddCard, () => {
   <a-dropdown :trigger="['hover']">
     <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
     <template #overlay>
-      <div class="shadow bg-white">
-        <div class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
-          <MdiEditIcon class="text-primary" />
-          <!-- Edit -->
-          {{ $t('general.edit') }}
-        </div>
-        <div v-if="!virtual" v-t="['a:column:set-primary']" class="nc-menu-item" @click="setAsPrimaryValue">
-          <MdiStarIcon class="text-primary" />
+      <a-menu class="shadow bg-white">
+        <a-menu-item @click="editColumnDropdown = true">
+          <div class="nc-column-edit nc-header-menu-item">
+            <MdiEditIcon class="text-primary" />
+            <!-- Edit -->
+            {{ $t('general.edit') }}
+          </div>
+        </a-menu-item>
+        <a-menu-item v-if="!virtual" v-t="['a:column:set-primary']" @click="setAsPrimaryValue">
+          <div class="nc-column-edit nc-header-menu-item">
+            <MdiStarIcon class="text-primary" />
 
-          <!--       todo : tooltip -->
-          <!-- Set as Primary value -->
-          {{ $t('activity.setPrimary') }}
+            <!--       todo : tooltip -->
+            <!-- Set as Primary value -->
+            {{ $t('activity.setPrimary') }}
+          </div>
           <!--        <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span> -->
-        </div>
-        <div class="nc-column-delete nc-menu-item" @click="deleteColumn">
-          <MdiDeleteIcon class="text-error" />
-          <!-- Delete -->
-          {{ $t('general.delete') }}
-        </div>
-      </div>
+        </a-menu-item>
+        <a-menu-item @click="deleteColumn">
+          <div class="nc-column-delete nc-header-menu-item">
+            <MdiDeleteIcon class="text-error" />
+            <!-- Delete -->
+            {{ $t('general.delete') }}
+          </div>
+        </a-menu-item>
+      </a-menu>
     </template>
   </a-dropdown>
 </template>
+
+<style scoped>
+.nc-header-menu-item {
+  @apply text-xs flex items-center px-1 py-2 gap-1;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 910eeefdcd..599cb4312a 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -374,9 +374,13 @@ const onNavigate = (dir: NavigateDir) => {
         </table>
         <template #overlay>
           <a-menu class="bg-white shadow" @click="contextMenu = false">
-            <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)"><span class="text-xs">Delete row</span></a-menu-item>
+            <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)"
+              ><span class="text-xs">Delete row</span></a-menu-item
+            >
             <a-menu-item @click="deleteSelectedRows"><span class="text-xs">Delete all selected rows</span></a-menu-item>
-            <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)"><span class="text-xs">Clear cell</span></a-menu-item>
+            <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)"
+              ><span class="text-xs">Clear cell</span></a-menu-item
+            >
             <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">
               <span class="text-xs">Insert new row</span>
             </a-menu-item>

From 7a8d89b3d754f9f0b0806e90a87058cdf383745e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 01:18:28 +0530
Subject: [PATCH 26/31] refactor(gui-v2): code cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts                       | 2 ++
 packages/nc-gui-v2/components/dashboard/TreeView.vue     | 4 +++-
 packages/nc-gui-v2/components/dlg/TableCreate.vue        | 9 ---------
 packages/nc-gui-v2/components/dlg/TableRename.vue        | 2 --
 packages/nc-gui-v2/components/general/MiniSidebar.vue    | 4 ----
 .../components/smartsheet-toolbar/MoreActions.vue        | 5 -----
 .../components/smartsheet-toolbar/SharedViewList.vue     | 5 -----
 packages/nc-gui-v2/components/smartsheet/Cell.vue        | 4 ----
 packages/nc-gui-v2/components/smartsheet/Gallery.vue     | 3 ---
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 4 ++--
 packages/nc-gui-v2/components/webhook/Test.vue           | 2 +-
 packages/nc-gui-v2/composables/useColumnCreateStore.ts   | 2 +-
 packages/nc-gui-v2/layouts/base.vue                      | 4 ----
 13 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 8706c282ff..e41983c665 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -91,6 +91,7 @@ declare module '@vue/runtime-core' {
     MdiDatabase: typeof import('~icons/mdi/database')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
+    MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -115,6 +116,7 @@ declare module '@vue/runtime-core' {
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 3b1c67522b..5723611ff5 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -31,8 +31,10 @@ const tablesById = $computed<Record<string, TableType>>(() =>
 
 const showTableList = ref(true)
 const tableCreateDlg = ref(false)
-const menuRef = $ref<HTMLLIElement>()
 let key = $ref(0)
+
+const menuRef = $ref<HTMLLIElement>()
+
 let sortable: Sortable
 
 // todo: replace with vuedraggable
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index 7fd815f2ce..596eb44adc 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -31,18 +31,9 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
   dialogShow.value = false
 })
 
-// const prefix = computed(() => project?.value?.prefix || '')
-
 const validateDuplicateAlias = (v: string) => {
   return (tables?.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
 }
-// const validateLeadingOrTrailingWhiteSpace = (v: string) => {
-//   return !/^\s+|\s+$/.test(v) || 'Leading or trailing whitespace not allowed in table name'
-// }
-// const validateDuplicate = (v: string) => {
-//   return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
-// }
-
 const inputEl = ref<HTMLInputElement>()
 
 const useForm = Form.useForm
diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index 1e4fffac4f..bf4c35fa83 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -30,8 +30,6 @@ const { updateTab } = useTabs()
 const { loadTables } = useProject()
 const { tables } = useProject()
 
-// const prefix = computed(() => project?.value?.prefix || '')
-
 const inputEl = $ref<any>()
 let loading = $ref(false)
 const useForm = Form.useForm
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 2fdfa98a5b..48cd9416c5 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-// import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
 import { computed, useGlobal, useProject, useRoute, useSidebar } from '#imports'
 
-/** get current breakpoints (for enabling sidebar) */
-// const breakpoints = useBreakpoints(breakpointsTailwind)
-
 const { signOut, signedIn, user } = useGlobal()
 
 const { isOpen } = useSidebar({ isOpen: true })
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 967b067295..cd988a65fb 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -18,11 +18,6 @@ const sharedViewListDlg = ref(false)
 // todo : replace with inject
 const publicViewId = null
 
-// // TODO:: identify based on meta
-// const isView = ref(false)
-//
-// const { isUIAllowed } = useUIPermission()
-
 const { project } = useProject()
 
 const { $api } = useNuxtApp()
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 6d350ba68b..9156919d1f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -24,12 +24,9 @@ const { copy } = useClipboard()
 const toast = useToast()
 const { dashboardUrl } = useDashboard()
 
-// 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)
 
   console.log(unref(sharedViewList))
@@ -47,8 +44,6 @@ const loadSharedViewsList = async () => {
   // } else {
   //   activeSharedView = null
   // }
-
-  // isLoading = false
 }
 
 onMounted(loadSharedViewsList)
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index bba80bba88..1769cdd9c4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -12,10 +12,6 @@ interface Props {
   editEnabled: boolean
 }
 
-// interface Emits {
-//   (event: 'update:modelValue', value: any): void
-// }
-
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
 const column = toRef(props, 'column')
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 11ea16cf53..21cd416d98 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -11,9 +11,6 @@ interface Attachment {
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
 
-// todo: get from parent ( inject or use prop )
-// const isPublicView = false
-
 const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
 provide(IsFormInj, false)
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 599cb4312a..61f5b4c911 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -379,8 +379,8 @@ const onNavigate = (dir: NavigateDir) => {
             >
             <a-menu-item @click="deleteSelectedRows"><span class="text-xs">Delete all selected rows</span></a-menu-item>
             <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)"
-              ><span class="text-xs">Clear cell</span></a-menu-item
-            >
+              ><span class="text-xs">Clear cell</span>
+            </a-menu-item>
             <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">
               <span class="text-xs">Insert new row</span>
             </a-menu-item>
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 06ca930d0b..501d4c4480 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -23,7 +23,7 @@ const activeKey = ref(0)
 
 watch(
   () => hook?.operation,
-  async (_v) => {
+  async () => {
     await loadSampleData()
   },
 )
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 2ede66d9ba..2a99849b50 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -198,7 +198,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
           /** if LTAR column then force reload related table meta */
           if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value.id !== formState.value.childId) {
-            getMeta(formState.value.childId, true)
+            getMeta(formState.value.childId, true).then(() => {})
           }
 
           toast.success('Column created')
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index d9918be88f..72d3aee78a 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-// import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
 import { computed, useGlobal, useRoute } from '#imports'
 
-/** get current breakpoints (for enabling sidebar) */
-// const breakpoints = useBreakpoints(breakpointsTailwind)
-
 const { signOut, signedIn, isLoading, user } = useGlobal()
 
 const route = useRoute()

From a5c3e0c5edaf5f804f4dd2e6d34e2a76d0b943ca Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 01:23:11 +0530
Subject: [PATCH 27/31] refactor(gui-v2): replace ternary with `if...else`

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../FieldListAutoCompleteDropdown.vue         | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index 8936e8ac7e..20fd185de0 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -51,16 +51,17 @@ const localValue = computed({
 } */
 const options = computed<SelectProps['options']>(() =>
   meta?.value?.columns
-    ?.filter(
-      (c: ColumnType) =>
-        c &&
-        (isSort
-          ? !(
-              c.uidt === UITypes.LinkToAnotherRecord &&
-              (c.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO
-            )
-          : !c.colOptions || !c.system),
-    )
+    ?.filter((c: ColumnType) => {
+      /** ignore hasmany and manytomany relations if it's using within sort menu */
+      if (isSort) {
+        return (
+          c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO
+        )
+        /** ignore vutual fields which are system fields ( mm relation ) */
+      } else {
+        return !c.colOptions || !c.system
+      }
+    })
     .map((c: ColumnType) => ({
       value: c.id,
       label: c.title,

From a2545a2816d7ed5cd34caa39009e22bb3fce403e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 11:15:08 +0530
Subject: [PATCH 28/31] fis(gui-v2): ignor onlye mm and hm fields in fields

re #3063

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

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index 20fd185de0..2266c38b05 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -54,7 +54,7 @@ const options = computed<SelectProps['options']>(() =>
     ?.filter((c: ColumnType) => {
       /** ignore hasmany and manytomany relations if it's using within sort menu */
       if (isSort) {
-        return (
+        return !(
           c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO
         )
         /** ignore vutual fields which are system fields ( mm relation ) */

From f4057424d8eef3b5d9431ea672a700de0a0abf0f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 11:15:08 +0530
Subject: [PATCH 29/31] fix(gui-v2): ignore only mm and hm fields in fields

re #3063

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

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index 20fd185de0..2266c38b05 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -54,7 +54,7 @@ const options = computed<SelectProps['options']>(() =>
     ?.filter((c: ColumnType) => {
       /** ignore hasmany and manytomany relations if it's using within sort menu */
       if (isSort) {
-        return (
+        return !(
           c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== RelationTypes.BELONGS_TO
         )
         /** ignore vutual fields which are system fields ( mm relation ) */

From c8be09ec61cb87c431a10cbd5e4c50631fcc5cbd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 11:25:11 +0530
Subject: [PATCH 30/31] fix(gui-v2): add relative position to menu item element

re #3053

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

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 9bc1f12ce1..5c55ae5c33 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -75,7 +75,7 @@ html {
 
 // menu item styling
 .nc-menu-item {
-  @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+  @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
 }
 
 .nc-sidebar-right-item {

From 86a4b5dd6d363397240888cb7a922063263c637f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 11:31:51 +0530
Subject: [PATCH 31/31] fix(gui-v2): set pointer events to none for after
 pseudo element

re #3064

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

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 5723611ff5..ddd290b453 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -294,7 +294,7 @@ const activeTable = computed(() => {
 }
 
 .nc-tree-item {
-  @apply relative  cursor-pointer after:(content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
+  @apply relative  cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
 }
 
 .nc-tree-item svg {