From fb43daab2af86d1ac69bc9f5b1ee05ff7f75b441 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 12:13:46 +0530
Subject: [PATCH 01/15] fix(gui-v2): allow resetting column size of newly
 created column

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

diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index 6bd4bb5f2d..ebf2f3af81 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -19,7 +19,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
 
   watch(
     // todo : update type in swagger
-    () => [gridViewCols, resizingCol, resizingColWidth, columns],
+    [gridViewCols, resizingCol, resizingColWidth],
     () => {
       let style = ''
       for (const c of columns?.value || []) {
@@ -49,6 +49,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     loadCss()
   }
 
+  /** when columns changes(create/delete) reload grid columns */
+  watch(columns, loadGridViewColumns)
+
   const updateWidth = (id: string, width: string) => {
     if (gridViewCols?.value?.[id]) {
       gridViewCols.value[id].width = width

From 4f4b979b4a545a3506e502403b7b11d78f7f5fa8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 15:26:13 +0530
Subject: [PATCH 02/15] fix(gui-v2): avoid triggering datepicker on contextmenu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/cell/DatePicker.vue  | 24 +++++++++++++++----
 .../components/cell/DateTimePicker.vue        | 17 ++++++++++++-
 .../nc-gui-v2/components/cell/TimePicker.vue  | 21 ++++++++++++++--
 3 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index d69202b6ee..a492c25581 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { vOnClickOutside } from '@vueuse/components'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
-interface Props {
-  modelValue: string | null
-}
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+interface Props {
+  modelValue: string | null
+}
+
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
@@ -39,10 +41,23 @@ const localState = $computed({
     }
   },
 })
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <a-date-picker
+    @click="open = !open"
     v-model:value="localState"
     :bordered="false"
     class="!w-full px-1"
@@ -50,7 +65,8 @@ const localState = $computed({
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :dropdown-class-name="randonClass"
+    :open="readOnlyMode ? false : open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 038e218c95..b72a0bc298 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -41,10 +41,24 @@ const localState = $computed({
     }
   },
 })
+
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <a-date-picker
+    @click="open = !open"
     v-model:value="localState"
     :show-time="true"
     :bordered="false"
@@ -53,7 +67,8 @@ const localState = $computed({
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :dropdown-class-name="randonClass"
+    :open="readOnlyMode ? false : open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index ec36b5774a..e9c755e654 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue?: string | null
 }
 
 const { modelValue } = defineProps<Props>()
@@ -50,10 +50,26 @@ const localState = $computed({
     }
   },
 })
+
+
+
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <a-time-picker
+    @click="open = !open"
     v-model:value="localState"
     autofocus
     :show-time="true"
@@ -64,7 +80,8 @@ const localState = $computed({
     :placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :open="readOnlyMode ? false : open"
+    :dropdown-class-name="randonClass"
   >
     <template #suffixIcon></template>
   </a-time-picker>

From 1816dc60fca5668c6b78cdb9bcb9fe4530eb57ab Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 16:44:17 +0530
Subject: [PATCH 03/15] fix(gui-v2): reload filters on column delete

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../nc-gui-v2/components/cell/DatePicker.vue  |  3 +--
 .../components/cell/DateTimePicker.vue        |  2 +-
 .../nc-gui-v2/components/cell/TimePicker.vue  |  4 +---
 .../nc-gui-v2/composables/useViewFilters.ts   | 22 +++++++++++++++++--
 packages/nc-gui-v2/composables/useViews.ts    |  5 +++--
 packages/nc-gui-v2/context/index.ts           |  6 ++---
 7 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 66d7e13522..870ebe047e 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -100,6 +100,7 @@ declare module '@vue/runtime-core' {
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
+    MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index a492c25581..37a6050c03 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { vOnClickOutside } from '@vueuse/components'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
 const { modelValue } = defineProps<Props>()
@@ -57,7 +56,6 @@ watch(
 
 <template>
   <a-date-picker
-    @click="open = !open"
     v-model:value="localState"
     :bordered="false"
     class="!w-full px-1"
@@ -67,6 +65,7 @@ watch(
     :input-read-only="true"
     :dropdown-class-name="randonClass"
     :open="readOnlyMode ? false : open"
+    @click="open = !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index b72a0bc298..10a30dad1e 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -58,7 +58,6 @@ watch(
 
 <template>
   <a-date-picker
-    @click="open = !open"
     v-model:value="localState"
     :show-time="true"
     :bordered="false"
@@ -69,6 +68,7 @@ watch(
     :input-read-only="true"
     :dropdown-class-name="randonClass"
     :open="readOnlyMode ? false : open"
+    @click="open = !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index e9c755e654..bde4044130 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -51,8 +51,6 @@ const localState = $computed({
   },
 })
 
-
-
 const open = ref(false)
 
 const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
@@ -69,7 +67,6 @@ watch(
 
 <template>
   <a-time-picker
-    @click="open = !open"
     v-model:value="localState"
     autofocus
     :show-time="true"
@@ -82,6 +79,7 @@ watch(
     :input-read-only="true"
     :open="readOnlyMode ? false : open"
     :dropdown-class-name="randonClass"
+    @click="open = !open"
   >
     <template #suffixIcon></template>
   </a-time-picker>
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 1007b3ba92..aba040db8f 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,9 +1,10 @@
-import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
+import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
+import { useMetas } from '~/composables/useMetas'
 
 export function useViewFilters(
-  view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
+  view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
@@ -14,6 +15,7 @@ export function useViewFilters(
 
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
+  const { metas } = useMetas()
 
   const loadFilters = async () => {
     if (parentId) {
@@ -106,5 +108,21 @@ export function useViewFilters(
     await saveOrUpdate(filters.value[index], index, true)
   }
 
+  /** on column delete reload filters, identify by checking columns count */
+  watch(
+    () => {
+      if (!view?.value || !metas?.value?.[view?.value?.fk_model_id as string]) {
+        return 0
+      }
+
+      return metas?.value?.[view?.value?.fk_model_id as string]?.columns?.length || 0
+    },
+    async (nextColsLength, oldColsLength) => {
+      if (nextColsLength < oldColsLength) {
+        await loadFilters()
+      }
+    },
+  )
+
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }
diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts
index b7c9277609..40fc4ddc93 100644
--- a/packages/nc-gui-v2/composables/useViews.ts
+++ b/packages/nc-gui-v2/composables/useViews.ts
@@ -1,15 +1,16 @@
-import type { FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
+import type { TableType, ViewType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp } from '#app'
 
 export function useViews(meta: MaybeRef<TableType | undefined>) {
-  let views = $ref<(GridType | FormType | KanbanType | GalleryType)[]>([])
+  let views = $ref<ViewType[]>([])
   const { $api } = useNuxtApp()
 
   const loadViews = async () => {
     const _meta = unref(meta)
 
     if (_meta && _meta.id) {
+      // todo: swagger type correction
       const response = (await $api.dbView.list(_meta.id)).list as any[]
       if (response) {
         views = response.sort((a, b) => a.order - b.order)
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 4ef530da15..2ef6c4a3cb 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -1,4 +1,4 @@
-import type { ColumnType, FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
@@ -18,11 +18,11 @@ export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
-export const ActiveViewInj: InjectionKey<Ref<GridType | FormType | KanbanType | GalleryType>> = Symbol('active-view-injection')
+export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
-export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
+export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
 export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')

From 75d7bd344f1f3979bdfab3635e973e57265ea4b1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 19:45:01 +0530
Subject: [PATCH 04/15] fix(gui-v2): accept urls with no scheme

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Url.vue | 10 +++++++++-
 packages/nc-gui-v2/utils/urlUtils.ts       |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index a5686bfef2..f7b13dd0db 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -27,12 +27,20 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
+const url = computed<string | null>(() => {
+  if (!value || !isValidURL(value)) return null
+  /** add url scheme if missing */
+  if (/^https?:\/\//.test(value)) return value
+  return `https://${value}`
+})
+
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
-  <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value || ''" target="_blank">{{ value }}</nuxt-link>
+  <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="url" target="_blank">{{ value }}
+  </nuxt-link>
   <span v-else>{{ value }}</span>
 </template>
 
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index 5f9427c98b..88c29e3760 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -24,7 +24,7 @@ export const dashboardUrl = () => {
 // ref : https://stackoverflow.com/a/5717133
 export const isValidURL = (str: string) => {
   const pattern =
-    /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)(?:\.(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)*(?:\.(?:[a-z\u00A1-\uFFFF]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
+    /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)(?:\.(?:[a-z\u00A1-\uFFFF0-9]-*)*[a-z\u00A1-\uFFFF0-9]+)*(?:\.(?:[a-z\u00A1-\uFFFF]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
   return !!pattern.test(str)
 }
 

From eec7e0494c20862f6923eb397a084b0829863344 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 20:03:33 +0530
Subject: [PATCH 05/15] fix(gui-v2): show plus icon for adding belongs to cell
 if empty

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Url.vue    |  3 +--
 .../components/virtual-cell/BelongsTo.vue     | 20 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index f7b13dd0db..56e0e7ae3e 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -39,8 +39,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
-  <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="url" target="_blank">{{ value }}
-  </nuxt-link>
+  <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
   <span v-else>{{ value }}</span>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 90eab444a0..9a39419209 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -4,7 +4,9 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {ActiveCellInj,  CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import MdiArrowExpand from '~icons/mdi/arrow-expand'
+import MdiPlus from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)
 
@@ -14,7 +16,7 @@ const cellValue = inject(CellValueInj, ref<any>(null))
 
 const row = inject(RowInj)
 
-const active = false
+const active = inject(ActiveCellInj)
 
 const listItemsDlg = ref(false)
 
@@ -28,6 +30,8 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
+const addIcon = computed(() => (cellValue?.value ? MdiArrowExpand : MdiPlus))
+
 const value = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
@@ -54,7 +58,8 @@ const unlinkRef = async (rec: Record<string, any>) => {
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiArrowExpand
+      <component
+        :is="addIcon"
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
         @click="listItemsDlg = true"
       />
@@ -63,12 +68,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .nc-action-icon {
   @apply hidden cursor-pointer;
 }
 
-.chips-wrapper:hover .nc-action-icon {
-  @apply inline-block;
+.chips-wrapper:hover,
+.chips-wrapper.active {
+  .nc-action-icon {
+    @apply inline-block;
+  }
 }
 </style>

From 52a6527c9b704c48e8ed8fc7a3925aa2e978f33a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 20:07:53 +0530
Subject: [PATCH 06/15] fix(gui-v2): avoid flickering menu while hiding

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 0a0080b41d..da7c4578de 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -59,7 +59,11 @@ function onCancel() {
 
 async function onSubmit() {
   await addOrUpdate(reloadMetaAndData)
-  advancedOptions.value = false
+
+  // add delay to complete the minimize transition
+  setTimeout(() => {
+    advancedOptions.value = false
+  }, 500)
 }
 
 // create column meta if it's a new column
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 2a99849b50..20df294c4b 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -174,7 +174,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       if (cdf) formState.value.cdf = formState.value.cdf || null
     }
 
-    const addOrUpdate = async (onSuccess: () => {}) => {
+    const addOrUpdate = async (onSuccess: () => void) => {
       try {
         console.log(formState, validators)
         if (!(await validate())) return

From b330834604a50904c538d86f3f981ad5a50096bc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 20:33:23 +0530
Subject: [PATCH 07/15] fix(gui-v2): LTAR and other virtual column rename

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/EditOrAdd.vue        | 11 +++--------
 .../nc-gui-v2/composables/useColumnCreateStore.ts     | 11 +++++++++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index da7c4578de..a0375579e0 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -106,15 +106,10 @@ if (!formState.value?.column_name) {
 <template>
   <div class="min-w-[350px] 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
-          ref="antInput"
-          v-model:value="formState.column_name"
-          size="small"
-          class="nc-column-name-input"
-          @input="onAlter(8)"
-        />
+      <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
+        <a-input ref="antInput" v-model:value="formState.title" size="small" class="nc-column-name-input" @input="onAlter(8)" />
       </a-form-item>
+
       <a-form-item
         v-if="!(editColumnDropdown && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
         :label="$t('labels.columnType')"
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 20df294c4b..751dbb4e8c 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -43,7 +43,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const validators = computed(() => {
       return {
-        column_name: [
+        title: [
           {
             required: true,
             message: 'Column name is required',
@@ -88,6 +88,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const generateNewColumnMeta = () => {
       setAdditionalValidations({})
       formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
+      formState.value.title = formState.value.title || formState.value.column_name
     }
 
     const onUidtOrIdTypeChange = () => {
@@ -180,7 +181,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
         if (!(await validate())) return
 
         formState.value.table_name = meta.value.table_name
-        formState.value.title = formState.value.column_name
+        // formState.value.title = formState.value.column_name
         if (column?.value) {
           await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
           toast.success('Column updated')
@@ -210,6 +211,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
     }
 
+    /** set column name same as title which is actual name in db */
+    watch(
+      () => formState.value?.title,
+      (newTitle) => (formState.value.column_name = newTitle),
+    )
+
     return {
       formState,
       resetFields,

From 504872bc9858bf46bab94e92d21d385da2ac7ae7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 23:11:19 +0530
Subject: [PATCH 08/15] fix(gui-v2): sync time and year field and avoid opening
 on context menu event

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/cell/TimePicker.vue  |  2 ++
 .../nc-gui-v2/components/cell/YearPicker.vue  | 19 ++++++++++++++++++-
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index bde4044130..a49055fbfb 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
@@ -80,6 +81,7 @@ watch(
     :open="readOnlyMode ? false : open"
     :dropdown-class-name="randonClass"
     @click="open = !open"
+    @ok="open = !open"
   >
     <template #suffixIcon></template>
   </a-time-picker>
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 1b8133bfca..0e57ae313e 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
@@ -39,6 +40,19 @@ const localState = $computed({
     }
   },
 })
+
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
@@ -50,7 +64,10 @@ const localState = $computed({
     :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :open="readOnlyMode ? false : open"
+    :dropdown-class-name="randonClass"
+    @click="open = !open"
+    @change="open = !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 6e2451f4a7..2c4bddf357 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -53,7 +53,7 @@ const isAutoSaved = $computed(() => {
 })
 
 const isManualSaved = $computed(() => {
-  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column?.value?.uidt as UITypes)
+  return [UITypes.Currency, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
 const vModel = computed({

From db9e029ca2bee3b8f53a0ccc9ed65bab82597fb3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 23:42:26 +0530
Subject: [PATCH 09/15] fix(swagger): type corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/sidebar/MenuTop.vue |  1 -
 .../components/tabs/auth/UserManagement.vue   |  2 +-
 .../tabs/auth/user-management/ShareBase.vue   |  6 +-
 .../nc-gui-v2/composables/useViewColumns.ts   |  4 +-
 packages/nc-gui-v2/composables/useViews.ts    |  5 +-
 packages/nocodb-sdk/src/lib/Api.ts            | 26 +++---
 packages/nocodb/src/lib/models/User.ts        |  2 +-
 scripts/sdk/swagger.json                      | 82 ++++++++++++-------
 .../http-clients/axios-http-client.eta        |  2 +-
 .../http-clients/fetch-http-client.eta        |  4 +-
 10 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 1800b9e3b7..a59f8c94f9 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -151,7 +151,6 @@ async function onRename(view: ViewType) {
   }
 
   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!, {
       title: view.title,
       order: view.order,
diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index 69797b8f40..7b6c35106e 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -39,7 +39,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
     if (!project.value?.id) return
 
     // TODO: Types of api is not correct
-    const response = await $api.auth.projectUserList(project.value?.id, {
+    const response: any = await $api.auth.projectUserList(project.value?.id, {
       query: {
         limit,
         offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index cdd6506c1c..a255015511 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -32,8 +32,7 @@ const loadBase = async () => {
   try {
     if (!project.value.id) return
 
-    // todo: result is missing roles in return-type
-    const res: any = await $api.project.sharedBaseGet(project.value.id)
+    const res = await $api.project.sharedBaseGet(project.value.id)
     base = {
       uuid: res.uuid,
       url: res.url,
@@ -50,8 +49,7 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
-    // todo: returns void?
-    const res: any = await $api.project.sharedBaseUpdate(project.value.id, {
+    const res = await $api.project.sharedBaseUpdate(project.value.id, {
       roles: role,
     })
 
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 5f4fb26b7d..406620b745 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -1,11 +1,11 @@
 import { isSystemColumn } from 'nocodb-sdk'
-import type { ColumnType, FormType, GalleryType, GridType, TableType } from 'nocodb-sdk'
+import type { ColumnType, FormType, GalleryType, GridType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 
 export function useViewColumns(
-  view: Ref<(GridType | FormType | GalleryType) & { id?: string }> | undefined,
+  view: Ref<ViewType> | undefined,
   meta: ComputedRef<TableType>,
   isPublic = false,
   reloadData?: () => void,
diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts
index 40fc4ddc93..854852f003 100644
--- a/packages/nc-gui-v2/composables/useViews.ts
+++ b/packages/nc-gui-v2/composables/useViews.ts
@@ -10,10 +10,9 @@ export function useViews(meta: MaybeRef<TableType | undefined>) {
     const _meta = unref(meta)
 
     if (_meta && _meta.id) {
-      // todo: swagger type correction
-      const response = (await $api.dbView.list(_meta.id)).list as any[]
+      const response = (await $api.dbView.list(_meta.id)).list
       if (response) {
-        views = response.sort((a, b) => a.order - b.order)
+        views = response.sort((a, b) => a.order! - b.order!)
       }
     }
   }
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index f8ff88bfb5..2953e6a899 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -11,13 +11,16 @@
 
 export interface UserType {
   /** Unique identifier for the given user. */
-  id: number;
+  id: string;
   firstname: string;
   lastname: string;
 
   /** @format email */
   email: string;
 
+  /** @format email */
+  roles?: string;
+
   /**
    * @format date
    * @example 1997-10-31
@@ -127,6 +130,7 @@ export interface ViewType {
   order?: number;
   fk_model_id?: string;
   slug?: string;
+  show_system_fields?: boolean;
   lock_type?: 'collaborative' | 'locked' | 'personal';
 }
 
@@ -436,7 +440,7 @@ export interface SharedViewListType {
 }
 
 export interface ViewListType {
-  list?: GridType | FormType | KanbanType | GalleryType;
+  list?: ViewType[];
   pageInfo?: PaginatedType;
 }
 
@@ -661,10 +665,7 @@ export interface FullRequestParams
   body?: unknown;
 }
 
-export type RequestParams = Omit<
-  FullRequestParams,
-  'body' | 'method' | 'query' | 'path'
->;
+export type RequestParams = Omit<FullRequestParams, 'body' | 'method' | 'path'>;
 
 export interface ApiConfig<SecurityDataType = unknown>
   extends Omit<AxiosRequestConfig, 'data' | 'cancelToken'> {
@@ -1271,10 +1272,10 @@ export class Api<
      * @tags Project
      * @name SharedBaseGet
      * @request GET:/api/v1/db/meta/projects/{projectId}/shared
-     * @response `200` `{ uuid?: string, url?: string }` OK
+     * @response `200` `{ uuid?: string, url?: string, roles?: string }` OK
      */
     sharedBaseGet: (projectId: string, params: RequestParams = {}) =>
-      this.request<{ uuid?: string; url?: string }, any>({
+      this.request<{ uuid?: string; url?: string; roles?: string }, any>({
         path: `/api/v1/db/meta/projects/${projectId}/shared`,
         method: 'GET',
         format: 'json',
@@ -1302,14 +1303,14 @@ export class Api<
      * @tags Project
      * @name SharedBaseCreate
      * @request POST:/api/v1/db/meta/projects/{projectId}/shared
-     * @response `200` `{ url?: string, uuid?: string }` OK
+     * @response `200` `{ uuid?: string, url?: string, roles?: string }` OK
      */
     sharedBaseCreate: (
       projectId: string,
       data: { roles?: string; password?: string },
       params: RequestParams = {}
     ) =>
-      this.request<{ url?: string; uuid?: string }, any>({
+      this.request<{ uuid?: string; url?: string; roles?: string }, any>({
         path: `/api/v1/db/meta/projects/${projectId}/shared`,
         method: 'POST',
         body: data,
@@ -1324,18 +1325,19 @@ export class Api<
      * @tags Project
      * @name SharedBaseUpdate
      * @request PATCH:/api/v1/db/meta/projects/{projectId}/shared
-     * @response `200` `void` OK
+     * @response `200` `{ uuid?: string, url?: string, roles?: string }` OK
      */
     sharedBaseUpdate: (
       projectId: string,
       data: { roles?: string; password?: string },
       params: RequestParams = {}
     ) =>
-      this.request<void, any>({
+      this.request<{ uuid?: string; url?: string; roles?: string }, any>({
         path: `/api/v1/db/meta/projects/${projectId}/shared`,
         method: 'PATCH',
         body: data,
         type: ContentType.Json,
+        format: 'json',
         ...params,
       }),
 
diff --git a/packages/nocodb/src/lib/models/User.ts b/packages/nocodb/src/lib/models/User.ts
index c983a5ae25..3e24027f60 100644
--- a/packages/nocodb/src/lib/models/User.ts
+++ b/packages/nocodb/src/lib/models/User.ts
@@ -4,7 +4,7 @@ import Noco from '../Noco';
 import extractProps from '../meta/helpers/extractProps';
 import NocoCache from '../cache/NocoCache';
 export default class User implements UserType {
-  id: number;
+  id: string;
 
   /** @format email */
   email: string;
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index ae0930d643..b6656f5b49 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -916,6 +916,9 @@
                     },
                     "url": {
                       "type": "string"
+                    },
+                    "roles": {
+                      "type": "string"
                     }
                   }
                 }
@@ -939,25 +942,27 @@
       "post": {
         "summary": "",
         "operationId": "project-shared-base-create",
-        "responses": {
-          "200": {
-            "description": "OK",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "url": {
-                      "type": "string"
-                    },
-                    "uuid": {
-                      "type": "string"
-                    }
+        "responses": {  "200": {
+          "description": "OK",
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "uuid": {
+                    "type": "string"
+                  },
+                  "url": {
+                    "type": "string"
+                  },
+                  "roles": {
+                    "type": "string"
                   }
                 }
               }
             }
           }
+        }
         },
         "tags": [
           "Project"
@@ -985,7 +990,25 @@
         "operationId": "project-shared-base-update",
         "responses": {
           "200": {
-            "description": "OK"
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "uuid": {
+                      "type": "string"
+                    },
+                    "url": {
+                      "type": "string"
+                    },
+                    "roles": {
+                      "type": "string"
+                    }
+                  }
+                }
+              }
+            }
           }
         },
         "requestBody": {
@@ -5444,7 +5467,7 @@
         "description": "",
         "examples": [
           {
-            "id": 142,
+            "id": "142",
             "firstName": "Alice",
             "lastName": "Smith",
             "email": "alice.smith@gmail.com",
@@ -5456,7 +5479,7 @@
         "x-internal": false,
         "properties": {
           "id": {
-            "type": "integer",
+            "type": "string",
             "description": "Unique identifier for the given user."
           },
           "firstname": {
@@ -5469,6 +5492,10 @@
             "type": "string",
             "format": "email"
           },
+          "roles": {
+            "type": "string",
+            "format": "email"
+          },
           "date_of_birth": {
             "type": "string",
             "format": "date",
@@ -6026,6 +6053,9 @@
           "slug": {
             "type": "string"
           },
+          "show_system_fields": {
+            "type": "boolean"
+          },
           "lock_type": {
             "type": "string",
             "enum": [
@@ -7356,20 +7386,10 @@
         },
         "properties": {
           "list": {
-            "oneOf": [
-              {
-                "$ref": "#/components/schemas/Grid"
-              },
-              {
-                "$ref": "#/components/schemas/Form"
-              },
-              {
-                "$ref": "#/components/schemas/Kanban"
-              },
-              {
-                "$ref": "#/components/schemas/Gallery"
-              }
-            ]
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/View"
+            }
           },
           "pageInfo": {
             "$ref": "#/components/schemas/Paginated"
diff --git a/scripts/sdk/templates/http-clients/axios-http-client.eta b/scripts/sdk/templates/http-clients/axios-http-client.eta
index c81bdc4e4d..3bcd3c75f2 100644
--- a/scripts/sdk/templates/http-clients/axios-http-client.eta
+++ b/scripts/sdk/templates/http-clients/axios-http-client.eta
@@ -23,7 +23,7 @@ export interface FullRequestParams extends Omit<AxiosRequestConfig, "data" | "pa
   body?: unknown;
 }
 
-export type RequestParams = Omit<FullRequestParams, "body" | "method" | "query" | "path">;
+export type RequestParams = Omit<FullRequestParams, "body" | "method" | "path">;
 
 export interface ApiConfig<SecurityDataType = unknown> extends Omit<AxiosRequestConfig, "data" | "cancelToken"> {
   securityWorker?: (securityData: SecurityDataType | null) => Promise<AxiosRequestConfig | void> | AxiosRequestConfig | void;
diff --git a/scripts/sdk/templates/http-clients/fetch-http-client.eta b/scripts/sdk/templates/http-clients/fetch-http-client.eta
index 0477e0b70f..b811731543 100644
--- a/scripts/sdk/templates/http-clients/fetch-http-client.eta
+++ b/scripts/sdk/templates/http-clients/fetch-http-client.eta
@@ -24,7 +24,7 @@ export interface FullRequestParams extends Omit<RequestInit, "body"> {
   cancelToken?: CancelToken;
 }
 
-export type RequestParams = Omit<FullRequestParams, "body" | "method" | "query" | "path">
+export type RequestParams = Omit<FullRequestParams, "body" | "method" | "path">
 
 
 export interface ApiConfig<SecurityDataType = unknown> {
@@ -68,7 +68,7 @@ export class HttpClient<SecurityDataType = unknown> {
     public setSecurityData = (data: SecurityDataType | null) => {
         this.securityData = data;
     }
-    
+
     private encodeQueryParam(key: string, value: any) {
         const encodedKey = encodeURIComponent(key);
         return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;

From 696fd020a441a4dc137f0b32d75da6b292e46927 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 10 Aug 2022 23:43:06 +0530
Subject: [PATCH 10/15] chore(gui-v2): lint

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

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 406620b745..302dcb1372 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -1,5 +1,5 @@
 import { isSystemColumn } from 'nocodb-sdk'
-import type { ColumnType, FormType, GalleryType, GridType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'

From 4710022fed735265ea3f405b92f0b2e4b43f3c1f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 11:25:29 +0530
Subject: [PATCH 11/15] chore(gui-v2): typo correction and linting

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/DatePicker.vue  | 14 +++++++-------
 .../nc-gui-v2/components/cell/DateTimePicker.vue   |  6 +++---
 packages/nc-gui-v2/components/cell/TimePicker.vue  |  6 +++---
 packages/nc-gui-v2/components/cell/YearPicker.vue  |  6 +++---
 .../components/virtual-cell/BelongsTo.vue          |  2 +-
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 37a6050c03..8bb9bee22e 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
 interface Props {
   modelValue: string | null
 }
 
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
@@ -42,12 +42,12 @@ const localState = $computed({
 })
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -63,7 +63,7 @@ watch(
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     :open="readOnlyMode ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 10a30dad1e..385078a193 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -44,12 +44,12 @@ const localState = $computed({
 
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -66,7 +66,7 @@ watch(
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     :open="readOnlyMode ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index a49055fbfb..09763085f2 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -54,12 +54,12 @@ const localState = $computed({
 
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -79,7 +79,7 @@ watch(
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
     :open="readOnlyMode ? false : open"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 0e57ae313e..819e37a688 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -43,12 +43,12 @@ const localState = $computed({
 
 const open = ref(false)
 
-const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
     }
   },
   { flush: 'post' },
@@ -65,7 +65,7 @@ watch(
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
     :open="readOnlyMode ? false : open"
-    :dropdown-class-name="randonClass"
+    :dropdown-class-name="randomClass"
     @click="open = !open"
     @change="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 9a39419209..284fb9cad6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import {ActiveCellInj,  CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { ActiveCellInj, CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 

From 3fa129ea82e566aa493d267a0d8707c70ad82866 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 12:06:13 +0530
Subject: [PATCH 12/15] chore(swagger): typo correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ShareView.vue          |  5 +-
 .../composables/useColumnCreateStore.ts       |  3 +-
 .../composables/useExpandedFormStore.ts       |  3 +-
 .../composables/useGridViewColumnWidth.ts     |  2 -
 .../nc-gui-v2/composables/useLTARStore.ts     |  6 +-
 .../nc-gui-v2/composables/useViewColumns.ts   |  8 +-
 .../nc-gui-v2/composables/useViewFilters.ts   |  6 +-
 .../nc-gui-v2/composables/useViewSorts.ts     |  3 +-
 packages/nocodb-sdk/src/lib/Api.ts            | 23 +++--
 scripts/sdk/swagger.json                      | 94 +++++++++++++------
 10 files changed, 95 insertions(+), 58 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index d2a6484f22..b610f9af32 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -65,12 +65,11 @@ async function saveAllowCSVDownload() {
   try {
     const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
 
-    // todo: update swagger
     await $api.dbViewShare.update(shared.value.id, {
       meta,
-    } as any)
+    })
     toast.success('Successfully updated')
-  } catch (e) {
+  } catch (e: any) {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
   if (allowCSVDownload?.value) {
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 751dbb4e8c..dd26990689 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -35,8 +35,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       title: 'title',
       uidt: UITypes.SingleLineText,
       ...(column?.value || {}),
-      // todo: swagger json update - include meta
-      meta: (column?.value as any)?.meta || {},
+      meta: column?.value?.meta || {},
     })
 
     const additionalValidations = ref<Record<string, any>>({})
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 6c78f9f150..6db77e2669 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -84,9 +84,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
-        // todo: swagger type correction
         description: comment.value,
-      } as any)
+      })
 
       comment.value = ''
       message.success('Comment added successfully')
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index ebf2f3af81..1e365cc54d 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -4,7 +4,6 @@ import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useUIPermission } from './useUIPermission'
 
-// todo: update swagger
 export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
   const { isUIAllowed } = useUIPermission()
@@ -18,7 +17,6 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
 
   watch(
-    // todo : update type in swagger
     [gridViewCols, resizingCol, resizingColWidth],
     () => {
       let style = ''
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 4a77b149de..d247346e0c 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -94,14 +94,13 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             rowId.value,
             colOptions.type as 'mm' | 'hm',
             column?.value?.title,
-            // todo: swagger type correction
             {
               limit: childrenExcludedListPagination.size,
               offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
               where:
                 childrenExcludedListPagination.query &&
                 `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-            } as any,
+            },
           )
         }
       } catch (e: any) {
@@ -123,12 +122,11 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           rowId.value,
           colOptions.type as 'mm' | 'hm',
           column?.value?.title,
-          // todo: swagger type correction
           {
             limit: childrenListPagination.size,
             offset: childrenListPagination.size * (childrenListPagination.page - 1),
             where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
-          } as any,
+          },
         )
       } catch (e: any) {
         notification.error({
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 302dcb1372..c234383141 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -94,16 +94,14 @@ export function useViewColumns(
 
   const showSystemFields = computed({
     get() {
-      // todo: update swagger
-      return (view?.value as any)?.show_system_fields || false
+      return view?.value?.show_system_fields || false
     },
-    set(v) {
+    set(v: boolean) {
       if (view?.value?.id) {
         $api.dbView
           .update(view.value.id, {
-            // todo: update swagger
             show_system_fields: v,
-          } as any)
+          })
           .finally(() => reloadData?.())
         ;(view.value as any).show_system_fields = v
       }
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index aba040db8f..444e22df2a 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -10,7 +10,6 @@ export function useViewFilters(
   reloadData?: () => void,
   shared = false,
 ) {
-  // todo: update swagger
   const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
   const { $api } = useNuxtApp()
@@ -79,11 +78,10 @@ export function useViewFilters(
         fk_parent_id: parentId,
       })
     } else {
-      // todo: return type correction
-      filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+      filters.value[i] = await $api.dbTableFilter.create(view?.value?.id as string, {
         ...filter,
         fk_parent_id: parentId,
-      })) as any
+      })
     }
     reloadData?.()
   }
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 7d1bcf00f7..b55e4c209b 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -12,8 +12,7 @@ export function useViewSorts(
 
   const loadSorts = async () => {
     if (!view?.value) return
-    // todo: api correction
-    sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list as any[]
+    sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
   }
 
   const saveOrUpdate = async (sort: SortType, i: number) => {
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 2953e6a899..e1a5172b05 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -1938,7 +1938,7 @@ export class Api<
      */
     update: (
       viewId: string,
-      data: { password?: string },
+      data: { password?: string; meta?: any },
       params: RequestParams = {}
     ) =>
       this.request<SharedViewType, any>({
@@ -2026,10 +2026,10 @@ export class Api<
      * @tags DB table sort
      * @name List
      * @request GET:/api/v1/db/meta/views/{viewId}/sorts
-     * @response `200` `{ uuid?: string, url?: string }` OK
+     * @response `200` `{ sorts?: { list?: (SortType)[] } }` OK
      */
     list: (viewId: string, params: RequestParams = {}) =>
-      this.request<{ uuid?: string; url?: string }, any>({
+      this.request<{ sorts?: { list?: SortType[] } }, any>({
         path: `/api/v1/db/meta/views/${viewId}/sorts`,
         method: 'GET',
         format: 'json',
@@ -2124,14 +2124,15 @@ export class Api<
      * @tags DB table filter
      * @name Create
      * @request POST:/api/v1/db/meta/views/{viewId}/filters
-     * @response `200` `void` OK
+     * @response `200` `FilterType` OK
      */
     create: (viewId: string, data: FilterType, params: RequestParams = {}) =>
-      this.request<void, any>({
+      this.request<FilterType, any>({
         path: `/api/v1/db/meta/views/${viewId}/filters`,
         method: 'POST',
         body: data,
         type: ContentType.Json,
+        format: 'json',
         ...params,
       }),
 
@@ -2594,7 +2595,11 @@ export class Api<
       rowId: string,
       relationType: 'mm' | 'hm',
       columnName: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string | number;
+        offset?: string | number;
+        where?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
@@ -2675,7 +2680,11 @@ export class Api<
       rowId: string,
       relationType: 'mm' | 'hm',
       columnName: string,
-      query?: { limit?: string; offset?: string },
+      query?: {
+        limit?: string | number;
+        offset?: string | number;
+        where?: string;
+      },
       params: RequestParams = {}
     ) =>
       this.request<any, any>({
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index b6656f5b49..cc86c31a03 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -942,27 +942,28 @@
       "post": {
         "summary": "",
         "operationId": "project-shared-base-create",
-        "responses": {  "200": {
-          "description": "OK",
-          "content": {
-            "application/json": {
-              "schema": {
-                "type": "object",
-                "properties": {
-                  "uuid": {
-                    "type": "string"
-                  },
-                  "url": {
-                    "type": "string"
-                  },
-                  "roles": {
-                    "type": "string"
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "uuid": {
+                      "type": "string"
+                    },
+                    "url": {
+                      "type": "string"
+                    },
+                    "roles": {
+                      "type": "string"
+                    }
                   }
                 }
               }
             }
           }
-        }
         },
         "tags": [
           "Project"
@@ -1726,7 +1727,8 @@
                 "properties": {
                   "password": {
                     "type": "string"
-                  }
+                  },
+                  "meta": {}
                 }
               }
             }
@@ -1851,11 +1853,16 @@
                 "schema": {
                   "type": "object",
                   "properties": {
-                    "uuid": {
-                      "type": "string"
-                    },
-                    "url": {
-                      "type": "string"
+                    "sorts": {
+                      "type": "object",
+                      "properties": {
+                        "list": {
+                          "type": "array",
+                          "items": {
+                            "$ref": "#/components/schemas/Sort"
+                          }
+                        }
+                      }
                     }
                   }
                 }
@@ -1991,7 +1998,14 @@
         "operationId": "db-table-filter-create",
         "responses": {
           "200": {
-            "description": "OK"
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Filter"
+                }
+              }
+            }
           }
         },
         "tags": [
@@ -3831,17 +3845,30 @@
         "parameters": [
           {
             "schema": {
-              "type": "string"
+              "type": [
+                "string",
+                "number"
+              ]
             },
             "in": "query",
             "name": "limit"
           },
           {
             "schema": {
-              "type": "string"
+              "type": [
+                "string",
+                "number"
+              ]
             },
             "in": "query",
             "name": "offset"
+          },
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "query",
+            "name": "where"
           }
         ]
       }
@@ -4035,17 +4062,30 @@
         "parameters": [
           {
             "schema": {
-              "type": "string"
+              "type": [
+                "string",
+                "number"
+              ]
             },
             "in": "query",
             "name": "limit"
           },
           {
             "schema": {
-              "type": "string"
+              "type": [
+                "string",
+                "number"
+              ]
             },
             "in": "query",
             "name": "offset"
+          },
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "query",
+            "name": "where"
           }
         ]
       }

From 075c19c5073c34683cffe40e4080f17b8c52773f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 12:19:52 +0530
Subject: [PATCH 13/15] fix(gui-v2): tab navigation bug

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useTabs.ts | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 384e20e15f..99817e6b5a 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -61,15 +61,7 @@ export function useTabs() {
         const tab = tabs.value[index]
 
         if (!tab) return
-
-        switch (tab.type) {
-          case TabType.TABLE:
-            return navigateTo(`/nc/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
-          case TabType.VIEW:
-            return navigateTo(`/nc/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
-          case TabType.AUTH:
-            return navigateTo(`/nc/${route.params.projectId}/auth`)
-        }
+        return navigateToTab(tab)
       }
     },
   })
@@ -101,12 +93,23 @@ export function useTabs() {
       if (newTabIndex === -1) {
         await navigateTo(`/nc/${route.params.projectId}`)
       } else {
-        await navigateTo(`/nc/${route.params.projectId}/table/${tabs.value?.[newTabIndex]?.title}`)
+        await navigateToTab(tabs.value?.[newTabIndex])
       }
     }
     tabs.value.splice(index, 1)
   }
 
+  function navigateToTab(tab: TabItem) {
+    switch (tab.type) {
+      case TabType.TABLE:
+        return navigateTo(`/nc/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
+      case TabType.VIEW:
+        return navigateTo(`/nc/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
+      case TabType.AUTH:
+        return navigateTo(`/nc/${route.params.projectId}/auth`)
+    }
+  }
+
   const updateTab = (key: number | Partial<TabItem>, newTabItemProps: Partial<TabItem>) => {
     const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key))
     if (tab) {

From da349ef0db2eea907b49303987efa872a80ddf7c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 12:44:30 +0530
Subject: [PATCH 14/15] fix(gui-v2): avoid duplicate meta api invocation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/ManyToMany.vue    |  4 +--
 .../components/ListChildItems.vue             | 20 ++++++-----
 packages/nc-gui-v2/composables/useMetas.ts    | 36 +++++++++++++++++--
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 5275a8d3ba..5db431b837 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -66,9 +66,9 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
-          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+          <span v-if="cells?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
       </div>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index b23650caa3..4e4c940ca7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
+import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
-const isForm = inject(IsFormInj, false)
+const isForm = ref(inject(IsFormInj, false))
 const column = inject(ColumnInj)
 
 const {
@@ -25,11 +25,15 @@ const {
 
 const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
-watch([vModel, isForm], (nextVal) => {
-  if (nextVal[0] || nextVal[1]) {
-    loadChildrenList()
-  }
-})
+watch(
+  [vModel, isForm],
+  (nextVal) => {
+    if (nextVal[0] || nextVal[1]) {
+      loadChildrenList()
+    }
+  },
+  { immediate: true },
+)
 
 const unlinkRow = async (row: Record<string, any>) => {
   if (isNew.value) {
@@ -41,7 +45,7 @@ const unlinkRow = async (row: Record<string, any>) => {
 }
 
 const container = computed(() =>
-  isForm
+  isForm?.value
     ? h('div', {
         class: 'w-full p-2',
       })
diff --git a/packages/nc-gui-v2/composables/useMetas.ts b/packages/nc-gui-v2/composables/useMetas.ts
index b5f0a4548d..c1225e225b 100644
--- a/packages/nc-gui-v2/composables/useMetas.ts
+++ b/packages/nc-gui-v2/composables/useMetas.ts
@@ -1,3 +1,4 @@
+import type { WatchStopHandle } from 'vue'
 import type { TableInfoType, TableType } from 'nocodb-sdk'
 import { useProject } from './useProject'
 import { useNuxtApp, useState } from '#app'
@@ -7,24 +8,55 @@ export function useMetas() {
   const { tables } = useProject()
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
+  const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
-    if (!force && metas.value[tableIdOrTitle as string]) return metas.value[tableIdOrTitle as string]
+    if (!force && metas.value[tableIdOrTitle]) return metas.value[tableIdOrTitle]
 
     const modelId = (tables.value.find((t) => t.title === tableIdOrTitle || t.id === tableIdOrTitle) || {}).id
+
     if (!modelId) {
       console.warn(`Table '${tableIdOrTitle}' is not found in the table list`)
       return null
     }
 
-    const model = await $api.dbTable.read(modelId)
+    /** wait until loading is finished if requesting same meta */
+    if (!force) {
+      await new Promise((resolve) => {
+        let unwatch: WatchStopHandle
+
+        const timeout = setTimeout(() => {
+          unwatch?.()
+          clearTimeout(timeout)
+          resolve(null)
+        }, 20000)
+
+        unwatch = watch(
+          () => loadingState.value[modelId],
+          (isLoading) => {
+            if (!isLoading) {
+              clearTimeout(timeout)
+              resolve(null)
+              unwatch?.()
+            }
+          },
+          { immediate: true },
+        )
+      })
+      if (metas.value[modelId]) return metas.value[modelId]
+    }
+
+    loadingState.value[modelId] = true
 
+    const model = await $api.dbTable.read(modelId)
     metas.value = {
       ...metas.value,
       [model.id!]: model,
       [model.title]: model,
     }
 
+    loadingState.value[modelId] = false
+
     return model
   }
 

From d64ac24aef7c6c4db29bcb70ff8add29ae3ea0b3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 14:01:54 +0530
Subject: [PATCH 15/15] rafactor(gui-v2): replace with reactive variable

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue        | 2 +-
 packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue | 2 +-
 packages/nc-gui-v2/components/smartsheet/Gallery.vue            | 2 +-
 packages/nc-gui-v2/components/smartsheet/Grid.vue               | 2 +-
 .../nc-gui-v2/components/smartsheet/expanded-form/index.vue     | 2 +-
 .../components/virtual-cell/components/ListChildItems.vue       | 2 +-
 packages/nc-gui-v2/context/index.ts                             | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 90fdef48a7..1d8fd71b52 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -11,7 +11,7 @@ const hideMenu = toRef(props, 'hideMenu')
 provide(ColumnInj, column)
 
 const meta = inject(MetaInj)
-const isForm = inject(IsFormInj, false)
+const isForm = inject(IsFormInj, ref(false))
 
 // instantiate column update store
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 0385b34647..edc6900de3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -12,7 +12,7 @@ const hideMenu = toRef(props, 'hideMenu')
 provide(ColumnInj, column)
 const { metas } = useMetas()
 const meta = inject(MetaInj)
-const isForm = inject(IsFormInj, false)
+const isForm = inject(IsFormInj, ref(false))
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 21cd416d98..c4c4e7e002 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -13,7 +13,7 @@ const view = inject(ActiveViewInj)
 
 const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
-provide(IsFormInj, false)
+provide(IsFormInj, ref(false))
 provide(IsGridInj, false)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 178530aab6..615fb1cefb 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -82,7 +82,7 @@ const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useG
 
 onMounted(loadGridViewColumns)
 
-provide(IsFormInj, false)
+provide(IsFormInj, ref(false))
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index 8fd52089f9..25550ddd1a 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -59,7 +59,7 @@ if (props.loadRow) {
 
 useProvideSmartsheetStore(ref({}) as any, meta)
 
-provide(IsFormInj, true)
+provide(IsFormInj, ref(true))
 
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 4e4c940ca7..7aea43a9c5 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -8,7 +8,7 @@ const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
-const isForm = ref(inject(IsFormInj, false))
+const isForm = inject(IsFormInj, ref(false))
 const column = inject(ColumnInj)
 
 const {
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 2ef6c4a3cb..7dc6d976ed 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -14,7 +14,7 @@ export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-i
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =
   Symbol('pagination-data-injection')
 export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changePage']> = Symbol('pagination-data-injection')
-export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
+export const IsFormInj: InjectionKey<Ref<boolean>> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')