From ee72e4e0110e98ae39fe83201aa90399455d43ff Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 11:29:37 +0530
Subject: [PATCH 01/77] fix(gui-v2): show form items in editable state and
 handle LTAR columns

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 41 ++++++++++++-------
 .../components/ListChildItems.vue             |  2 +-
 packages/nc-gui-v2/composables/useViewData.ts |  1 +
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index b75673fc52..4c1271cd7f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -22,9 +22,12 @@ import {
   useViewData,
   watch,
 } from '#imports'
+import { EditModeInj } from '~/context'
 
 provide(IsFormInj, ref(true))
 
+provide(EditModeInj, ref(true))
+
 // todo: generate hideCols based on default values
 const hiddenCols = ['created_at', 'updated_at']
 
@@ -53,6 +56,13 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
   setFormData()
 })
 
+
+const { syncLTARRefs } = useProvideSmartsheetRowStore(meta!, ref({
+  row: formState,
+  oldRow: {},
+  rowMeta: { new: true },
+}))
+
 const columns = computed(() => meta?.value?.columns || [])
 
 const localColumns = ref<Record<string, any>[]>([])
@@ -92,7 +102,11 @@ async function submitForm() {
     return
   }
 
-  await insertRow(formState)
+  const insertedRowData = await insertRow(formState)
+
+  if (insertedRowData) {
+    await syncLTARRefs(insertedRowData)
+  }
 
   submitted.value = true
 }
@@ -119,10 +133,7 @@ function isDbRequired(column: Record<string, any>) {
     // primary column
     (column.pk && !column.ai && !column.cdf)
   if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<
-      string,
-      any
-    >
+    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<string, any>
     if (col.rqd && !col.default) {
       isRequired = true
     }
@@ -159,7 +170,7 @@ function onMove(event: any) {
 
 function hideColumn(idx: number) {
   if (isDbRequired(localColumns.value[idx]) || localColumns.value[idx].required) {
-    message.info("Required field can't be moved")
+    message.info('Required field can\'t be moved')
     return
   }
 
@@ -257,10 +268,8 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
-      string,
-      any
-    >
+    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,
+      any>
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
@@ -404,7 +413,8 @@ onMounted(async () => {
           </a-card>
         </template>
         <template #footer>
-          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
+          <div
+            class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
@@ -568,9 +578,11 @@ onMounted(async () => {
                     </a-form-item>
 
                     <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
+                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required')
+                        }}</span>
 
-                      <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
+                      <a-switch v-model:checked="element.required" size="small" class="my-2"
+                                @change="updateColMeta(element)" />
                     </div>
                   </div>
 
@@ -653,7 +665,8 @@ onMounted(async () => {
               />
               <!-- Email me at <email> -->
               <span class="ml-4">
-                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
+                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email
+                }}</span>
               </span>
             </div>
           </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 c8211f0643..187d536aef 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -43,7 +43,7 @@ const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 watch(
   [vModel, isForm],
   (nextVal) => {
-    if (nextVal[0] || nextVal[1]) {
+    if ((nextVal[0] || nextVal[1]) && !isNew.value) {
       loadChildrenList()
     }
   },
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 0be745f83c..c42a566a24 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -133,6 +133,7 @@ export function useViewData(
       })
 
       await syncCount()
+      return insertedData
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
     }

From 2a71202c727e3b65b2b222b2aa0c4fbf187bd1e7 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 10:55:08 +0530
Subject: [PATCH 02/77] refactor/fixed url generation for swagger

---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 4 +++-
 packages/nc-gui-v2/utils/urlUtils.ts                         | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9b5f91a176..9a447e0639 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -15,6 +15,8 @@ import { TabType } from '~/composables'
 
 const route = useRoute()
 
+const { appInfo } = useGlobal()
+
 const { project, loadProject, loadTables, isSharedBase } = useProject()
 
 const { addTab, clearTabs } = useTabs()
@@ -152,7 +154,7 @@ const isHovered = useElementHover(sidebar)
                       v-if="isUIAllowed('apiDocs')"
                       v-t="['e:api-docs']"
                       class="nc-project-menu-item group"
-                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`)"
+                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
                       <MdiApi class="group-hover:text-pink-500 nc-swagger-api-docs" />
                       Swagger: Rest APIs
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index ac9d7fc0f4..95c3aeb41a 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -24,6 +24,7 @@ export const isValidURL = (str: string) => {
   return !!pattern.test(str)
 }
 
-export const openLink = (url: string, target = '_blank') => {
-  window.open(url, target)
+export const openLink = (path: string, baseURL: string, target = '_blank') => {
+  const url = new URL(path, baseURL)
+  window.open(url.href, target)
 }

From 2d22bff82af45db8146c82808d825fe78d24b87f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 11:21:45 +0530
Subject: [PATCH 03/77] refactor/Added project info copy

---
 packages/nc-gui-v2/composables/useProject.ts  | 24 +++++++++++++++++--
 packages/nc-gui-v2/lib/types.ts               | 11 +++++++++
 .../pages/[projectType]/[projectId]/index.vue | 24 ++++++++++++++++---
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 8c830507f3..31cf3e2eb7 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -2,6 +2,7 @@ import { SqlUiFactory } from 'nocodb-sdk'
 import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useRoute, useState } from '#app'
+import type { ProjectMetaInfo } from '~/lib'
 import { USER_PROJECT_ROLES } from '~/lib'
 
 export function useProject(projectId?: MaybeRef<string>) {
@@ -13,10 +14,17 @@ export function useProject(projectId?: MaybeRef<string>) {
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
   const { includeM2M } = useGlobal()
-
+  const projectMetaInfo = useState<ProjectMetaInfo | undefined>('projectMetaInfo')
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
 
+  async function loadProjectMetaInfo(force?: boolean) {
+    if (!projectMetaInfo.value || force) {
+      const data = await $api.project.metaGet(project.value.id!, {}, {})
+      projectMetaInfo.value = data
+    }
+  }
+
   async function loadProjectRoles() {
     projectRoles.value = {}
 
@@ -59,5 +67,17 @@ export function useProject(projectId?: MaybeRef<string>) {
   )
   const isSharedBase = computed(() => projectType === 'base')
 
-  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi, isSharedBase }
+  return {
+    project,
+    tables,
+    loadProjectRoles,
+    loadProject,
+    loadTables,
+    isMysql,
+    isPg,
+    sqlUi,
+    isSharedBase,
+    loadProjectMetaInfo,
+    projectMetaInfo,
+  }
 }
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index f468954e5f..c8f5869047 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -10,4 +10,15 @@ export interface User {
   project_id?: string
 }
 
+export interface ProjectMetaInfo {
+  Node?: string
+  Arch?: string
+  Platform?: string
+  Docker?: boolean
+  Database?: string
+  ProjectOnRootDB?: string
+  RootDB?: string
+  PackageVersion?: string
+}
+
 export type Roles = Record<Role, boolean>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9a447e0639..b7cf9bfab6 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue'
 import {
   navigateTo,
   onKeyStroke,
   openLink,
   provideSidebar,
   ref,
+  useClipboard,
   useElementHover,
   useProject,
   useRoute,
@@ -12,17 +14,18 @@ import {
   useUIPermission,
 } from '#imports'
 import { TabType } from '~/composables'
-
 const route = useRoute()
 
 const { appInfo } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase } = useProject()
+const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
 
 const { addTab, clearTabs } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
+const { copy } = useClipboard()
+
 // create a new sidebar state
 const { isOpen, toggle } = provideSidebar({ isOpen: true })
 
@@ -59,6 +62,21 @@ await loadProject()
 await loadTables()
 
 const isHovered = useElementHover(sidebar)
+
+const copyProjectInfo = async () => {
+  try {
+    await loadProjectMetaInfo()
+    copy(
+      Object.entries(projectMetaInfo.value!)
+        .map(([k, v]) => `${k}: **${v}**`)
+        .join('\n'),
+    )
+    message.info('Copied project info to clipboard')
+  } catch (e: any) {
+    console.log(e)
+    message.error(e.message)
+  }
+}
 </script>
 
 <template>
@@ -143,7 +161,7 @@ const isHovered = useElementHover(sidebar)
                   </template>
 
                   <a-menu-item key="copy">
-                    <div class="nc-project-menu-item group">
+                    <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
                       <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Project Info
                     </div>

From 9f0408cd89884c9811a472310c0a444ebeec8b7c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 11:28:08 +0530
Subject: [PATCH 04/77] refactor/Added copy auth token

---
 .../pages/[projectType]/[projectId]/index.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index b7cf9bfab6..9fe9d493e1 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -16,7 +16,7 @@ import {
 import { TabType } from '~/composables'
 const route = useRoute()
 
-const { appInfo } = useGlobal()
+const { appInfo, token } = useGlobal()
 
 const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
 
@@ -77,6 +77,16 @@ const copyProjectInfo = async () => {
     message.error(e.message)
   }
 }
+
+const copyAuthToken = async () => {
+  try {
+    copy(token.value!)
+    message.info('Copied auth token to clipboard')
+  } catch (e: any) {
+    console.log(e)
+    message.error(e.message)
+  }
+}
 </script>
 
 <template>
@@ -179,6 +189,13 @@ const copyProjectInfo = async () => {
                     </div>
                   </a-menu-item>
 
+                  <a-menu-item key="copy">
+                    <div class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
+                      Copy Auth Token
+                    </div>
+                  </a-menu-item>
+
                   <a-menu-divider />
 
                   <a-menu-item key="teamAndAuth">

From 54a006bfab72b3a1abc34bfc2393a2489b89fbcd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 11:44:45 +0530
Subject: [PATCH 05/77] chore(gui-v2): lint

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 4c1271cd7f..79cf0d1d8f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -5,6 +5,7 @@ import { message } from 'ant-design-vue'
 import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 import {
   ActiveViewInj,
+  EditModeInj,
   IsFormInj,
   MetaInj,
   computed,
@@ -22,7 +23,6 @@ import {
   useViewData,
   watch,
 } from '#imports'
-import { EditModeInj } from '~/context'
 
 provide(IsFormInj, ref(true))
 
@@ -45,7 +45,7 @@ const secondsRemain = ref(0)
 
 const isEditable = isUIAllowed('editFormView' as Permission)
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj)!
 
 const view = inject(ActiveViewInj)
 
@@ -56,12 +56,14 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
   setFormData()
 })
 
-
-const { syncLTARRefs } = useProvideSmartsheetRowStore(meta!, ref({
-  row: formState,
-  oldRow: {},
-  rowMeta: { new: true },
-}))
+const { syncLTARRefs } = useProvideSmartsheetRowStore(
+  meta,
+  ref({
+    row: formState,
+    oldRow: {},
+    rowMeta: { new: true },
+  }),
+)
 
 const columns = computed(() => meta?.value?.columns || [])
 
@@ -133,7 +135,10 @@ function isDbRequired(column: Record<string, any>) {
     // primary column
     (column.pk && !column.ai && !column.cdf)
   if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<string, any>
+    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
     if (col.rqd && !col.default) {
       isRequired = true
     }
@@ -170,7 +175,7 @@ function onMove(event: any) {
 
 function hideColumn(idx: number) {
   if (isDbRequired(localColumns.value[idx]) || localColumns.value[idx].required) {
-    message.info('Required field can\'t be moved')
+    message.info("Required field can't be moved")
     return
   }
 
@@ -268,8 +273,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     columnObj.colOptions &&
     columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,
-      any>
+    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
@@ -413,8 +420,7 @@ onMounted(async () => {
           </a-card>
         </template>
         <template #footer>
-          <div
-            class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
+          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
@@ -578,11 +584,9 @@ onMounted(async () => {
                     </a-form-item>
 
                     <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required')
-                        }}</span>
+                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
 
-                      <a-switch v-model:checked="element.required" size="small" class="my-2"
-                                @change="updateColMeta(element)" />
+                      <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
                     </div>
                   </div>
 
@@ -625,8 +629,8 @@ onMounted(async () => {
             v-model:value="formViewData.success_msg"
             :rows="3"
             hide-details
-            @change="updateView"
             class="nc-form-after-submit-msg"
+            @change="updateView"
           />
 
           <!-- Other options -->
@@ -637,8 +641,8 @@ onMounted(async () => {
                 v-model:checked="formViewData.submit_another_form"
                 v-t="[`a:form-view:submit-another-form`]"
                 size="small"
-                @change="updateView"
                 class="nc-form-checkbox-submit-another-form"
+                @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
             </div>
@@ -649,8 +653,8 @@ onMounted(async () => {
                 v-model:checked="formViewData.show_blank_form"
                 v-t="[`a:form-view:show-blank-form`]"
                 size="small"
-                @change="updateView"
                 class="nc-form-checkbox-show-blank-form"
+                @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
@@ -660,13 +664,12 @@ onMounted(async () => {
                 v-model:checked="emailMe"
                 v-t="[`a:form-view:email-me`]"
                 size="small"
-                @change="onEmailChange"
                 class="nc-form-checkbox-send-email"
+                @change="onEmailChange"
               />
               <!-- Email me at <email> -->
               <span class="ml-4">
-                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email
-                }}</span>
+                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
               </span>
             </div>
           </div>

From 5bc4f6df7aae058ebc09fc1c36a7cb344ccd9c08 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 21:13:19 +0300
Subject: [PATCH 06/77] fix(gui-v2): virtual column header edit dropdown
 location

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 9a989e41f4..fec0ec70ea 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -114,6 +114,7 @@ function onVisibleChange() {
     <span v-if="column.rqd || required" class="text-red-500">&nbsp;*</span>
 
     <template v-if="!hideMenu">
+      <div class="flex-1" />
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 

From 9368c62119a0f5bb53af661dd7e8f9783456d812 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 21:25:21 +0300
Subject: [PATCH 07/77] fix(gui-v2): column header menu improvements

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue      | 2 +-
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue      | 4 ++--
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 30a67fe9df..78e660326a 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -24,7 +24,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal">
+  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 24e3d8b0ee..dae5688e07 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -53,8 +53,8 @@ const setAsPrimaryValue = async () => {
 </script>
 
 <template>
-  <a-dropdown placement="bottomRight" :trigger="['hover']">
-    <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
+  <a-dropdown placement="bottomRight" :trigger="['click']">
+    <MdiMenuDownIcon class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
     <template #overlay>
       <a-menu class="shadow bg-white">
         <a-menu-item @click="emit('edit')">
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index fec0ec70ea..25f19b45cf 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -101,7 +101,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal">
+  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
 
     <a-tooltip placement="bottom">

From 44e37862dc31f7ee7ec464a807ad44f02781a997 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 21:34:12 +0300
Subject: [PATCH 08/77] fix(gui-v2): column edit menu placement

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue      | 4 ++++
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 78e660326a..4198159263 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -62,4 +62,8 @@ function onVisibleChange() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+:deep(.ant-dropdown-trigger) {
+  @apply h-full;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 25f19b45cf..d0c81c38f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -146,4 +146,8 @@ function onVisibleChange() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+:deep(.ant-dropdown-trigger) {
+  @apply h-full;
+}
 </style>

From e32c1f0924c54218c14fea3f623e71a1ec38ee7d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 22:14:08 +0300
Subject: [PATCH 09/77] feat(gui-v2): column header icon colors for relational
 types

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet-header/VirtualCellIcon.vue     | 55 +++++++++++++++----
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 33c48863b5..15a53e5515 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
@@ -16,35 +17,65 @@ import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 const props = defineProps<{ columnMeta?: ColumnType }>()
 const columnMeta = toRef(props, 'columnMeta')
 
-const column = inject(ColumnInj, ref(columnMeta))
+const column = inject(ColumnInj, ref(columnMeta)) as Ref<ColumnType & { colOptions: LookupType }>
+
+let relationColumn: ColumnType & { colOptions: LookupType }
+
+if (column) {
+  const { isLookup, isBt, isRollup, isMm, isHm } = useVirtualCell(column as Ref<ColumnType>)
+
+  if (isLookup || isBt || isRollup || isMm || isHm) {
+    const meta = inject(MetaInj)
+
+    relationColumn = meta?.value.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
+      colOptions: LinkToAnotherRecordType
+    }
+  }
+}
 
 const icon = computed(() => {
   switch (column?.value?.uidt) {
     case UITypes.LinkToAnotherRecord:
       switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return MMIcon
+          return { icon: MMIcon, color: 'text-pink-500' }
         case RelationTypes.HAS_MANY:
-          return HMIcon
+          return { icon: HMIcon, color: 'text-yellow-500' }
         case RelationTypes.BELONGS_TO:
-          return BTIcon
+          return { icon: BTIcon, color: 'text-sky-500' }
       }
       break
     case UITypes.SpecificDBType:
-      return SpecificDBTypeIcon
+      return { icon: SpecificDBTypeIcon, color: 'text-grey' }
     case UITypes.Formula:
-      return FormulaIcon
+      return { icon: FormulaIcon, color: 'text-grey' }
     case UITypes.Lookup:
-      return TableColumnPlusBefore
+      switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
+        case RelationTypes.MANY_TO_MANY:
+          return { icon: TableColumnPlusBefore, color: 'text-pink-500' }
+        case RelationTypes.HAS_MANY:
+          return { icon: TableColumnPlusBefore, color: 'text-yellow-500' }
+        case RelationTypes.BELONGS_TO:
+          return { icon: TableColumnPlusBefore, color: 'text-sky-500' }
+      }
+      return { icon: TableColumnPlusBefore, color: 'text-grey' }
     case UITypes.Rollup:
-      return RollupIcon
+      switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
+        case RelationTypes.MANY_TO_MANY:
+          return { icon: RollupIcon, color: 'text-pink-500' }
+        case RelationTypes.HAS_MANY:
+          return { icon: RollupIcon, color: 'text-yellow-500' }
+        case RelationTypes.BELONGS_TO:
+          return { icon: RollupIcon, color: 'text-sky-500' }
+      }
+      return { icon: RollupIcon, color: 'text-grey' }
     case UITypes.Count:
-      return CountIcon
+      return { icon: CountIcon, color: 'text-grey' }
   }
-  return GenericIcon
+  return { icon: GenericIcon, color: 'text-grey' }
 })
 </script>
 
 <template>
-  <component :is="icon" class="text-grey mx-1 !text-sm" />
+  <component :is="icon.icon" class="mx-1 !text-sm" :class="icon.color" />
 </template>

From aa9ff45d5043f652ad912e2018c7f001ca6c97d4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 15 Aug 2022 23:34:41 +0300
Subject: [PATCH 10/77] feat(gui-v2): colored primary value

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Cell.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 2e2324a762..deef47af35 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -54,6 +54,10 @@ const isManualSaved = $computed(() => {
   return [UITypes.Currency, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
+const isPrimary = computed(() => {
+  return column?.value?.pv
+})
+
 const vModel = computed({
   get: () => props.modelValue,
   set: (val) => {
@@ -108,6 +112,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 <template>
   <div
     class="nc-cell w-full h-full"
+    :class="{ 'text-blue-600': isPrimary }"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up

From fbbaf0f67d25dddbb946d67351c7a09a8dfde83a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 11:49:09 +0530
Subject: [PATCH 11/77] refactor(gui-v2): reset filter query and page on
 re-opening list modal

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

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 25d512da45..241ad11770 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -47,8 +47,10 @@ const linkRow = async (row: Record<string, any>) => {
   vModel.value = false
 }
 
-watch(vModel, () => {
-  if (vModel.value) {
+watch(vModel, (nextVal, prevVal) => {
+  if (nextVal && !prevVal) {
+    childrenExcludedListPagination.query = ''
+    childrenExcludedListPagination.page = 1
     loadChildrenExcludedList()
   }
 })

From a1bda9ef7324925d13b647e07b29f2b216929146 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 00:31:48 +0300
Subject: [PATCH 12/77] fix(gui-v2): project dropdown location

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9b5f91a176..4e4f596cca 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -286,4 +286,8 @@ const isHovered = useElementHover(sidebar)
 :deep(.ant-dropdown-menu-item) {
   @apply !py-0 active:(ring ring-pink-500);
 }
+
+:deep(.ant-dropdown-trigger) {
+  @apply h-full;
+}
 </style>

From d9b1280bc2afad1171df1e74b95606168a885c9b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 09:29:43 +0300
Subject: [PATCH 13/77] feat(gui-v2): treeview active tab border

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/TreeView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 7e5ad0f52a..b2b5761a04 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -150,7 +150,7 @@ const activeTable = computed(() => {
 
     <a-dropdown :trigger="['contextmenu']">
       <div
-        class="p-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
+        class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
         :class="{ 'mb-[20px]': isSharedBase }"
         style="direction: rtl"
       >
@@ -334,6 +334,7 @@ const activeTable = computed(() => {
 
 .nc-tree-item.active {
   @apply !text-primary font-weight-bold after:(!opacity-20);
+  @apply border-r-3 border-indigo-500;
 
   svg {
     @apply !text-primary;

From 55bb3bbcfabd5951ac485ef0a5bbd108d3ed2701 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 09:30:57 +0300
Subject: [PATCH 14/77] fix(gui-v2): relation chip bg

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/components/virtual-cell/components/ItemChip.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 48d79a6f8a..82dcf87df4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -31,7 +31,7 @@ export default {
 
 <template>
   <div
-    class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]"
+    class="group py-1 px-2 mr-1 my-1 flex align-center bg-blue-100/60 hover:bg-blue-100/40 rounded-[2px]"
     :class="{ active }"
     @click="expandedFormDlg = true"
   >

From 44897b363bbb0cbab201b50b2270f6339162e004 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 12:13:49 +0530
Subject: [PATCH 15/77] fix(gui-v2): handle linked row delete in proper way if
 it's a new record

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../virtual-cell/components/ListChildItems.vue           | 8 +++++++-
 .../components/virtual-cell/components/ListItems.vue     | 2 ++
 packages/nc-gui-v2/composables/useLTARStore.ts           | 9 +++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

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 187d536aef..a8e9fba8b6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -59,6 +59,12 @@ const unlinkRow = async (row: Record<string, any>) => {
   }
 }
 
+const unlinkIfNewRow = async (row: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(row, column?.value as ColumnType)
+  }
+}
+
 const container = computed(() =>
   isForm?.value
     ? h('div', {
@@ -112,7 +118,7 @@ const expandedFormRow = ref()
                 />
                 <MdiDeleteOutline
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
-                  @click.stop="deleteRelatedRow(row)"
+                  @click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
                 />
               </div>
             </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 241ad11770..00c8680f09 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -47,8 +47,10 @@ const linkRow = async (row: Record<string, any>) => {
   vModel.value = false
 }
 
+/** reload list on modal open */
 watch(vModel, (nextVal, prevVal) => {
   if (nextVal && !prevVal) {
+    /** reset query and limit */
     childrenExcludedListPagination.query = ''
     childrenExcludedListPagination.page = 1
     loadChildrenExcludedList()
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index b89ab6896b..6904f9f43f 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -139,7 +139,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       }
     }
 
-    const deleteRelatedRow = async (row: Record<string, any>) => {
+    const deleteRelatedRow = async (row: Record<string, any>, onSuccess?: (row: Record<string, any>) => void) => {
       Modal.confirm({
         title: 'Do you want to delete the record?',
         type: 'warning',
@@ -148,7 +148,12 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           try {
             $api.dbTableRow.delete(NOCO, project.value.id as string, relatedTableMeta.value.id as string, id as string)
             reloadData?.()
-            await loadChildrenList()
+
+            /** reload child list if not a new row */
+            if (!isNewRow?.value) {
+              await loadChildrenList()
+            }
+            onSuccess?.(row)
           } catch (e: any) {
             message.error(`Delete failed: ${await extractSdkResponseErrorMsg(e)}`)
           }

From bb71a2eb157995c385061e1dc843f5b436c03c02 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 12:14:05 +0530
Subject: [PATCH 16/77] fix/added directive to copy auth token

---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9fe9d493e1..24883c6944 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -190,7 +190,7 @@ const copyAuthToken = async () => {
                   </a-menu-item>
 
                   <a-menu-item key="copy">
-                    <div class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                    <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
                       <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Auth Token
                     </div>

From e84a6b516881ba726ef095675c86fdee96ed85d3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 09:45:09 +0300
Subject: [PATCH 17/77] fix(gui-v2): merge team & settings in project dropdown

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../pages/[projectType]/[projectId]/index.vue | 46 ++-----------------
 2 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 2c8304ace6..546d2a6a69 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -105,6 +105,7 @@ declare module '@vue/runtime-core' {
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
+    MdiCog: typeof import('~icons/mdi/cog')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 4e4f596cca..e26887926c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -161,51 +161,15 @@ const isHovered = useElementHover(sidebar)
 
                   <a-menu-divider />
 
-                  <a-menu-item key="teamAndAuth">
+                  <a-menu-item key="teamAndSettings">
                     <div
-                      v-if="isUIAllowed('teamAndAuth')"
-                      v-t="['c:navdraw:team-and-auth']"
+                      v-if="isUIAllowed('settings')"
+                      v-t="['c:navdraw:project-settings']"
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiAccountGroup class="group-hover:text-pink-500 nc-team-and-auth" />
-                      Team & Auth
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="appStore">
-                    <div
-                      v-if="isUIAllowed('appStore')"
-                      v-t="['c:navdraw:app-store']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'appStore')"
-                    >
-                      <MdiStore class="group-hover:text-pink-500 nc-app-store" />
-                      App Store
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="metaData">
-                    <div
-                      v-if="isUIAllowed('projectMetadata')"
-                      v-t="['c:navdraw:project-metadata']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'metaData')"
-                    >
-                      <MdiTableBorder class="group-hover:text-pink-500 nc-meta-data" />
-                      Project Metadata
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="audit">
-                    <div
-                      v-if="isUIAllowed('audit')"
-                      v-t="['c:navdraw:audit']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'audit')"
-                    >
-                      <MdiNotebookCheckOutline class="group-hover:text-pink-500 nc-audit" />
-                      Audit
+                      <MdiCog class="group-hover:text-pink-500 nc-team-settings" />
+                      Team & Settings
                     </div>
                   </a-menu-item>
 

From c3dc19da501b0e4b892b2a26c810eef551fd14d0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 12:20:58 +0530
Subject: [PATCH 18/77] enhancement(gui-v2): block user from adding same
 relation twice in new row

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

diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 8bb3135a89..de2987577e 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -5,7 +5,7 @@ import type { Ref } from 'vue'
 import type { Row } from './useViewData'
 import { useInjectionState, useMetas, useNuxtApp, useProject, useVirtualCell } from '#imports'
 import { NOCO } from '~/lib'
-import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+import { deepCompare, extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   const { $api } = useNuxtApp()
@@ -23,6 +23,11 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
     if (isHm || isMm) {
       state.value[column.title!] = state.value[column.title!] || []
+
+      if (state.value[column.title!]!.find((ln: Record<string, any>) => deepCompare(ln, value))) {
+        return message.info('This value is already in the list')
+      }
+
       state.value[column.title!]!.push(value)
     } else if (isBt) {
       state.value[column.title!] = value

From 1d5a68234289c9b9e274516285584f4df816a80a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 12:31:06 +0530
Subject: [PATCH 19/77] refactor(gui-v2): reduce empty child card height in
 form view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/components/ListChildItems.vue  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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 a8e9fba8b6..8fd432bba8 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -134,7 +134,12 @@ const expandedFormRow = ref()
           show-less-items
         />
       </template>
-      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+      <a-empty
+        v-else
+        :class="{ 'my-10': !isForm, 'my-1 !text-xs': isForm }"
+        :image="Empty.PRESENTED_IMAGE_SIMPLE"
+        :image-style="isForm ? { height: '20px' } : {}"
+      />
     </div>
 
     <Suspense>

From e6611e577cd3c6ec4e8cccc41cf714cfd61a6495 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 12:42:49 +0530
Subject: [PATCH 20/77] fix(gui-v2): use ReadonlyInj in date and time pickers
 since those are in editable state by default

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/DatePicker.vue     | 10 +++++-----
 packages/nc-gui-v2/components/cell/DateTimePicker.vue |  9 ++++-----
 packages/nc-gui-v2/components/cell/TimePicker.vue     |  9 ++++-----
 packages/nc-gui-v2/components/cell/YearPicker.vue     | 10 +++++-----
 packages/nc-gui-v2/components/smartsheet/Form.vue     |  3 ---
 packages/nc-gui-v2/context/index.ts                   |  2 +-
 6 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 3b17503d6b..5553453741 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, EditModeInj, computed, inject, ref, watch } from '#imports'
+import { ColumnInj, ReadonlyInj, computed, inject, ref, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const columnMeta = inject(ColumnInj, null)!
 
-const editEnabled = inject(EditModeInj)!
+const readOnly = inject(ReadonlyInj, false)
 
 let isDateInvalid = $ref(false)
 
@@ -55,7 +55,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : editEnabled.value ? 'Select date' : ''))
+const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : readOnly ? 'Select date' : ''))
 </script>
 
 <template>
@@ -65,10 +65,10 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : editEnabled
     class="!w-full px-1"
     :format="dateFormat"
     :placeholder="placeholder"
-    :allow-clear="!editEnabled"
+    :allow-clear="!readOnly"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
-    :open="editEnabled ? false : open"
+    :open="readOnly ? false : open"
     @click="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 7aa0100bd2..3233103c4f 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null | undefined
@@ -12,7 +11,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const editEnabled = inject(EditModeInj)
+const readOnly = inject(ReadonlyInj, false)
 
 let isDateInvalid = $ref(false)
 
@@ -64,11 +63,11 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     format="YYYY-MM-DD HH:mm"
-    :placeholder="isDateInvalid ? 'Invalid date' : !editEnabled ? 'Select date and time' : ''"
-    :allow-clear="!editEnabled"
+    :placeholder="isDateInvalid ? 'Invalid date' : !readOnly ? 'Select date and time' : ''"
+    :allow-clear="!readOnly"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
-    :open="editEnabled ? false : open"
+    :open="readOnly ? false : open"
     :disabled="!editEnabled"
     @click="open = !open"
     @ok="open = !open"
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index a86f07d47c..a8f42c5163 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -13,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const editEnabled = inject(EditModeInj)
+const readOnly = inject(ReadonlyInj, false)
 
 let isTimeInvalid = $ref(false)
 
@@ -76,10 +75,10 @@ watch(
     use12-hours
     format="HH:mm"
     class="!w-full px-1"
-    :placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''"
-    :allow-clear="!editEnabled"
+    :placeholder="isTimeInvalid ? 'Invalid time' : !readOnly ? 'Select time' : ''"
+    :allow-clear="!readOnly"
     :input-read-only="true"
-    :open="editEnabled ? false : open"
+    :open="readOnly ? false : open"
     :popup-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 039331df24..dda9255047 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { EditModeInj, computed, inject, onClickOutside, ref, watch } from '#imports'
+import { computed, inject, onClickOutside, ref, watch } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -10,7 +10,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj)!
+const readOnly = inject(ReadonlyInj, false)
 
 let isYearInvalid = $ref(false)
 
@@ -53,7 +53,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : editEnabled.value ? 'Select year' : ''))
+const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : readOnly ? 'Select year' : ''))
 </script>
 
 <template>
@@ -63,9 +63,9 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : editEnabled
     :bordered="false"
     class="!w-full px-1"
     :placeholder="placeholder"
-    :allow-clear="!editEnabled"
+    :allow-clear="!readOnly"
     :input-read-only="true"
-    :open="editEnabled ? false : open"
+    :open="readOnly ? false : open"
     :dropdown-class-name="randomClass"
     @click="open = !open"
     @change="open = !open"
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 79cf0d1d8f..218e3b22f9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -5,7 +5,6 @@ import { message } from 'ant-design-vue'
 import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 import {
   ActiveViewInj,
-  EditModeInj,
   IsFormInj,
   MetaInj,
   computed,
@@ -26,8 +25,6 @@ import {
 
 provide(IsFormInj, ref(true))
 
-provide(EditModeInj, ref(true))
-
 // todo: generate hideCols based on default values
 const hiddenCols = ['created_at', 'updated_at']
 
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d955c93802..86806c0909 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -18,7 +18,7 @@ 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<ViewType>> = Symbol('active-view-injection')
-export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
+export const ReadonlyInj: InjectionKey<boolean> = 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<ViewType[]>> = Symbol('view-list-injection')

From adb10581a5468e04d2f24077003d7c2f1c117808 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 12:50:34 +0530
Subject: [PATCH 21/77] fix(gui-v2): use ReadonlyInj in LTAR since editEnabled
 is not the right one

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue  | 6 +++---
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue    | 6 +++---
 packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue | 6 +++---
 .../components/virtual-cell/components/ItemChip.vue       | 8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 0967f6886a..7fea01946c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -5,7 +5,7 @@ import {
   ActiveCellInj,
   CellValueInj,
   ColumnInj,
-  EditModeInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
   RowInj,
   defineAsyncComponent,
@@ -31,7 +31,7 @@ const row = inject(RowInj)!
 
 const active = inject(ActiveCellInj)!
 
-const editEnabled = inject(EditModeInj)
+const readonly = inject(ReadonlyInj, false)
 
 const listItemsDlg = ref(false)
 
@@ -72,7 +72,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
-    <div v-if="editEnabled" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+    <div v-if="!readonly" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
       <component
         :is="addIcon"
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index cb54162498..d0dfc6189f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,8 +4,8 @@ import type { Ref } from 'vue'
 import {
   CellValueInj,
   ColumnInj,
-  EditModeInj,
   IsFormInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
   RowInj,
   computed,
@@ -32,7 +32,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(EditModeInj)
+const readonly = inject(ReadonlyInj)
 
 const listItemsDlg = ref(false)
 
@@ -94,7 +94,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
           @click="childListDlg = true"
         />
         <MdiPlus
-          v-if="editEnabled"
+          v-if="!readonly"
           class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
           @click="listItemsDlg = true"
         />
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 12a4290210..ef274f5e62 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,8 +4,8 @@ import type { Ref } from 'vue'
 import {
   CellValueInj,
   ColumnInj,
-  EditModeInj,
   IsFormInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
   RowInj,
   computed,
@@ -31,7 +31,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(EditModeInj)
+const readonly = inject(ReadonlyInj, false)
 
 const listItemsDlg = ref(false)
 
@@ -92,7 +92,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
         <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
 
         <MdiPlus
-          v-if="editEnabled"
+          v-if="!readonly"
           class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
           @click="listItemsDlg = true"
         />
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 48d79a6f8a..1e37ea6dd2 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ActiveCellInj, EditModeInj, IsFormInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
+import { ActiveCellInj, IsFormInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -14,7 +14,7 @@ const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/ex
 
 const { relatedTableMeta } = useLTARStoreOrThrow()!
 
-const editEnabled = inject(EditModeInj)!
+const readonly = inject(ReadonlyInj, false)
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -37,13 +37,13 @@ export default {
   >
     <span class="name">{{ value }}</span>
 
-    <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
+    <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <Suspense>
       <ExpandedForm
-        v-if="editEnabled"
+        v-if="!readonly"
         v-model="expandedFormDlg"
         :row="{ row: item }"
         :meta="relatedTableMeta"

From 11953f76bea0da8d2de4c5f55caf3ddac5a130ba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 12:53:18 +0530
Subject: [PATCH 22/77] chore(gui-v2): add missing import

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

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 1e37ea6dd2..21f2135923 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ActiveCellInj, IsFormInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
+import { ActiveCellInj, IsFormInj, ReadonlyInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
 
 interface Props {
   value?: string | number | boolean

From 0c1f79beb1d9e4f9b0e24b28ddfbadd2adda4239 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 11:03:06 +0300
Subject: [PATCH 23/77] fix(gui-v2): prop type for github-button

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

diff --git a/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
index c154eb1618..e0ec0a793e 100644
--- a/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
+++ b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
@@ -3,7 +3,7 @@ import GithubButton from 'vue-github-button'
 </script>
 
 <template>
-  <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" :data-show-count="true" data-size="large"
+  <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large"
     >Star</GithubButton
   >
 </template>

From 993d72dfb9a956cf814a8116a46414de39ae5d06 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 11:30:49 +0300
Subject: [PATCH 24/77] fix(gui-v2): select cells use readOnly instead of
 editEnabled

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue  | 10 +++++-----
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 528e08c106..dd114415a4 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -4,7 +4,7 @@ import type { SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
-  EditModeInj,
+  ReadonlyInj,
   computed,
   h,
   inject,
@@ -28,7 +28,7 @@ const { isMysql } = useProject()
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)!
+const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -129,12 +129,12 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
-    placeholder="Select an option"
+    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
-    show-arrow
+    :show-arrow="!readOnly"
     :show-search="false"
     :open="isOpen"
-    :disabled="!editEnabled"
+    :disabled="readOnly"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index e25f73e5f4..5b4881126b 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionsType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)!
+const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -69,11 +69,11 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     class="w-full"
     :allow-clear="!column.rqd && active"
-    placeholder="Select an option"
+    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :open="isOpen"
-    :disabled="!editEnabled"
-    :show-arrow="active || vModel === null"
+    :disabled="readOnly"
+    :show-arrow="!readOnly && (active || vModel === null)"
     @select="isOpen = false"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"

From 0d8f5ff07ef97df8b45118462c0bab58431794e6 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 11:39:38 +0300
Subject: [PATCH 25/77] fix(gui-v2): disable edit mode if role is not allowed

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5d85cf3ae3..0120b85ec4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -410,7 +410,12 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         v-else
                         v-model="row.row[columnObj.title]"
                         :column="columnObj"
-                        :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :edit-enabled="
+                          isUIAllowed('xcDatatableEditable') &&
+                          editEnabled &&
+                          selected.col === colIndex &&
+                          selected.row === rowIndex
+                        "
                         :row-index="rowIndex"
                         :active="selected.col === colIndex && selected.row === rowIndex"
                         @update:edit-enabled="editEnabled = false"

From 54c8e88591a8349641a542ff3e4053408522156d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 16:43:15 +0800
Subject: [PATCH 26/77] fix(gui-v2): open menu box only when clicked outside
 the input box

---
 packages/nc-gui-v2/components/smartsheet/Form.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 218e3b22f9..4fa177a529 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -540,6 +540,7 @@ onMounted(async () => {
                       class="nc-input"
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"
+                      @click.stop.prevent
                     />
                   </a-form-item>
 
@@ -555,6 +556,7 @@ onMounted(async () => {
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"
                       :edit-enabled="true"
+                      @click.stop.prevent
                     />
                   </a-form-item>
 

From c194e36a0973fbaeda94db68d7a5da5bbfbf82a0 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 11 Aug 2022 16:59:50 +0530
Subject: [PATCH 27/77] fix/Added share view

---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 16 ++++++----
 .../composables/useGridViewColumnWidth.ts     | 10 ++++---
 packages/nc-gui-v2/composables/useMetas.ts    | 10 ++++++-
 .../nc-gui-v2/composables/useSharedView.ts    | 22 ++++++++++++++
 packages/nc-gui-v2/composables/useViewData.ts | 17 ++++++++++-
 packages/nc-gui-v2/context/index.ts           |  1 +
 .../pages/[projectType]/view/[viewId].vue     | 30 +++++++++++++++++++
 8 files changed, 96 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useSharedView.ts
 create mode 100644 packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 2c8304ace6..40939c6f17 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -61,6 +61,7 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 0120b85ec4..cd90ac9fe6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -23,6 +23,7 @@ import {
   IsFormInj,
   IsGridInj,
   IsLockedInj,
+  IsPublicInj,
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
@@ -34,6 +35,8 @@ const meta = inject(MetaInj)
 
 const view = inject(ActiveViewInj)
 
+const isPublicView = inject(IsPublicInj, ref(false))
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
@@ -45,8 +48,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const { isUIAllowed } = useUIPermission()
 
 // todo: get from parent ( inject or use prop )
-const isPublicView = false
-
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
@@ -80,8 +81,13 @@ const {
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
-
-onMounted(loadGridViewColumns)
+onMounted(() => {
+  if (!isPublicView.value) {
+    loadGridViewColumns()
+  } else {
+    loadGridViewColumns(fields.value)
+  }
+})
 
 provide(IsFormInj, ref(false))
 
@@ -149,7 +155,7 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 const { copy } = useClipboard()
 
 const makeEditable = (row: Row, col: ColumnType) => {
-  if (isPublicView || editEnabled || isView) {
+  if (isPublicView.value || editEnabled || isView) {
     return
   }
   if (!isPkAvail.value && !row.rowMeta.new) {
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index 1e365cc54d..26820d311b 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -3,6 +3,7 @@ import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useUIPermission } from './useUIPermission'
+import { IsPublicInj } from '~/context'
 
 export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
@@ -13,6 +14,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const gridViewCols = ref<Record<string, GridColumnType>>({})
   const resizingCol = ref('')
   const resizingColWidth = ref('200px')
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
 
@@ -34,9 +36,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     { deep: true, immediate: true },
   )
 
-  const loadGridViewColumns = async () => {
-    if (!view.value?.id) return
-    const colsData: GridColumnType[] = await $api.dbView.gridColumnsList(view.value.id)
+  const loadGridViewColumns = async (cols?: GridColumnType[] | undefined) => {
+    if (!view.value?.id && !cols) return
+    const colsData: GridColumnType[] = cols ?? (await $api.dbView.gridColumnsList(view.value.id))
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,
@@ -56,7 +58,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     }
 
     // sync with server if allowed
-    if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
+    if (!isPublic.value && isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
       $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
         width,
       })
diff --git a/packages/nc-gui-v2/composables/useMetas.ts b/packages/nc-gui-v2/composables/useMetas.ts
index 732f5393fe..8a780f1793 100644
--- a/packages/nc-gui-v2/composables/useMetas.ts
+++ b/packages/nc-gui-v2/composables/useMetas.ts
@@ -12,6 +12,14 @@ export function useMetas() {
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
+  const setMeta = async (model: any) => {
+    metas.value = {
+      ...metas.value,
+      [model.id!]: model,
+      [model.title]: model,
+    }
+  }
+
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
     if (!tableIdOrTitle) return null
     /** wait until loading is finished if requesting same meta */
@@ -83,5 +91,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, removeMeta }
+  return { getMeta, clearAllMeta, metas, removeMeta, setMeta }
 }
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
new file mode 100644
index 0000000000..7200acdd23
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -0,0 +1,22 @@
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import { useNuxtApp } from '#app'
+
+export function useSharedView(viewId: string) {
+  const sharedView = ref<ViewType>()
+  const meta = computed<TableType>(() => sharedView.value.model)
+  const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+
+  const { $api } = useNuxtApp()
+  const { setMeta } = useMetas()
+
+  const loadSharedView = async () => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId)
+    sharedView.value = viewMeta
+    setMeta(viewMeta.model)
+
+    const relatedMetas = { ...viewMeta.relatedMetas }
+    Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
+  }
+
+  return { sharedView, loadSharedView, meta, columns }
+}
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 0be745f83c..2a33377ff6 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,7 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
+import { IsPublicInj, NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -39,6 +39,7 @@ export function useViewData(
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const selectedAllRecords = computed({
     get() {
@@ -59,6 +60,14 @@ export function useViewData(
     paginationData.value.totalRows = count
   }
 
+  const loadPublicData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    const { data } = await $api.public.dataList(viewMeta?.value?.uuid, {
+      ...params,
+    })
+    formattedData.value = formatData(data.list)
+    paginationData.value = data.pageInfo
+  }
+
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
@@ -92,7 +101,13 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    if (isPublic.value) {
+      loadPublicData(params)
+      return
+    }
+
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
+
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
       ...params,
       where: where?.value,
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d955c93802..c9d3ce92e6 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -6,6 +6,7 @@ import type { Row } from '~/composables'
 import type { TabItem } from '~/composables/useTabs'
 
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
+export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
 export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
new file mode 100644
index 0000000000..44f27701c5
--- /dev/null
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, columns } = useSharedView(route.params.viewId as string)
+
+await loadSharedView()
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, ref(columns))
+provide(IsPublicInj, ref(true))
+
+const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <SmartsheetGrid :is-public-view="true" />
+  </NuxtLayout>
+</template>

From 3b4eb683325e0bf6f533c655f6dd03da7dc2db36 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 11 Aug 2022 19:08:13 +0530
Subject: [PATCH 28/77] refactor/gui-v2-added hiding column to Share view

---
 .../smartsheet-toolbar/FieldsMenu.vue         |  2 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  4 +-
 .../components/smartsheet/Toolbar.vue         |  8 ++--
 .../nc-gui-v2/composables/useSharedView.ts    |  7 +++-
 .../nc-gui-v2/composables/useViewColumns.ts   | 41 ++++++++++++-------
 .../pages/[projectType]/view/[viewId].vue     |  3 +-
 6 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 55cc86b8e9..abd0573159 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -21,7 +21,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-} = useViewColumns(activeView, meta, false, () => reloadDataHook.trigger())
+} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
   () => (activeView.value as any)?.id,
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index cd90ac9fe6..26e159418e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -100,8 +100,10 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
+  if (!isPublicView) {
+    loadAggCommentsCount()
+  }
   await loadData()
-  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index d4d9bfb4ca..f817b260b4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { useSmartsheetStoreOrThrow } from '~/composables'
+import { IsPublicInj } from '~/context'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
-    <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+    <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
-    <SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
+    <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
 
-    <SmartsheetToolbarShareView v-if="isForm || isGrid" />
+    <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
     <SmartsheetToolbarMoreActions v-if="isGrid" />
     <div class="flex-1" />
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 7200acdd23..5bd73019b9 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -3,8 +3,8 @@ import { useNuxtApp } from '#app'
 
 export function useSharedView(viewId: string) {
   const sharedView = ref<ViewType>()
-  const meta = computed<TableType>(() => sharedView.value.model)
-  const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const meta = ref<TableType>(() => sharedView.value.model)
+  const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
@@ -12,6 +12,9 @@ export function useSharedView(viewId: string) {
   const loadSharedView = async () => {
     const viewMeta = await $api.public.sharedViewMetaGet(viewId)
     sharedView.value = viewMeta
+    meta.value = sharedView.value.model
+    columns.value = sharedView.value.model.columns
+
     setMeta(viewMeta.model)
 
     const relatedMetas = { ...viewMeta.relatedMetas }
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 7c7b9bc191..6cc390ef37 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -3,13 +3,10 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
+import { IsPublicInj } from '~/context'
 
-export function useViewColumns(
-  view: Ref<ViewType> | undefined,
-  meta: ComputedRef<TableType>,
-  isPublic = false,
-  reloadData?: () => void,
-) {
+export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
+  const isPublic = inject(IsPublicInj, ref(false))
   const fields = ref<
     {
       order: number
@@ -31,7 +28,7 @@ export function useViewColumns(
 
     let order = 1
     if (view.value?.id) {
-      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
+      const data = (isPublic.value ? meta.value?.columns : await $api.dbViewColumn.list(view.value.id)) as any[]
 
       const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
         curr.show = !!curr.show
@@ -54,8 +51,6 @@ export function useViewColumns(
           }
         })
         .sort((a, b) => a.order - b.order)
-    } else if (isPublic) {
-      fields.value = meta.value.columns as any
     }
   }
 
@@ -89,6 +84,22 @@ export function useViewColumns(
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
+    if (isPublic && fields.value) {
+      fields.value[index] = field
+      meta.value.columns = meta.value?.columns?.map((column) => {
+        if (column.id === field.fk_column_id) {
+          return {
+            ...column,
+            ...field,
+          }
+        }
+        return column
+      })
+
+      reloadData?.()
+      return
+    }
+
     if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
@@ -118,11 +129,13 @@ export function useViewColumns(
     },
     set(v: boolean) {
       if (view?.value?.id) {
-        $api.dbView
-          .update(view.value.id, {
-            show_system_fields: v,
-          })
-          .finally(() => reloadData?.())
+        if (!isPublic.value) {
+          $api.dbView
+            .update(view.value.id, {
+              show_system_fields: v,
+            })
+            .finally(() => reloadData?.())
+        }
         ;(view.value as any).show_system_fields = v
       }
     },
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 44f27701c5..f891d7b423 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -17,7 +17,7 @@ await loadSharedView()
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, ref(columns))
+provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 
 const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
@@ -25,6 +25,7 @@ const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 
 <template>
   <NuxtLayout id="content" class="flex">
+    <SmartsheetToolbar />
     <SmartsheetGrid :is-public-view="true" />
   </NuxtLayout>
 </template>

From f13003bcfca641f6f593e518187a8fd25182841f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 12:41:27 +0530
Subject: [PATCH 29/77] refactor/gui-v2-added filter to Share view

---
 .../components/smartsheet/Toolbar.vue         |  2 +-
 .../nc-gui-v2/composables/useSharedView.ts    | 32 ++++++++---
 packages/nc-gui-v2/composables/useViewData.ts | 46 ++++++++-------
 .../nc-gui-v2/composables/useViewFilters.ts   | 56 +++++++++++++------
 .../pages/[projectType]/view/[viewId].vue     |  4 +-
 5 files changed, 89 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index f817b260b4..e83eb46d0e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -10,7 +10,7 @@ const isPublic = inject(IsPublicInj, ref(false))
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
 
-    <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
+    <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
 
     <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
 
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 5bd73019b9..4e05bb23cd 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,19 +1,23 @@
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-export function useSharedView(viewId: string) {
-  const sharedView = ref<ViewType>()
-  const meta = ref<TableType>(() => sharedView.value.model)
+const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+const sharedView = ref<ViewType>()
+
+export function useSharedView() {
+  const meta = ref<TableType>(() => sharedView.value?.model)
   const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
 
-  const loadSharedView = async () => {
+  const loadSharedView = async (viewId: string) => {
     const viewMeta = await $api.public.sharedViewMetaGet(viewId)
     sharedView.value = viewMeta
-    meta.value = sharedView.value.model
-    columns.value = sharedView.value.model.columns
+
+    meta.value = viewMeta.model
+    columns.value = viewMeta.model.columns
 
     setMeta(viewMeta.model)
 
@@ -21,5 +25,17 @@ export function useSharedView(viewId: string) {
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
   }
 
-  return { sharedView, loadSharedView, meta, columns }
+  const fetchSharedViewData = async () => {
+    const page = paginationData.value.page || 1
+    const pageSize = paginationData.value.pageSize || 25
+
+    const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
+      offset: (page - 1) * pageSize,
+      filterArrJson: JSON.stringify(filters.value),
+    } as any)
+
+    return data
+  }
+
+  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData }
 }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 2a33377ff6..146f9ccf4c 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -19,6 +19,7 @@ export interface Row {
     commentCount?: number
   }
 }
+const formattedData = ref<Row[]>([])
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
@@ -29,7 +30,6 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -38,8 +38,9 @@ export function useViewData(
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
   const { project } = useProject()
+  const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
-  const isPublic = inject(IsPublicInj, ref(false))
+  let isPublic = inject(IsPublicInj, ref(false))
 
   const selectedAllRecords = computed({
     get() {
@@ -60,14 +61,6 @@ export function useViewData(
     paginationData.value.totalRows = count
   }
 
-  const loadPublicData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    const { data } = await $api.public.dataList(viewMeta?.value?.uuid, {
-      ...params,
-    })
-    formattedData.value = formatData(data.list)
-    paginationData.value = data.pageInfo
-  }
-
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
@@ -77,9 +70,7 @@ export function useViewData(
   /** load row comments count */
   const loadAggCommentsCount = async () => {
     // todo: handle in public api
-    // if (this.isPublicView) {
-    //   return;
-    // }
+    if (isPublic.value) return
 
     const ids = formattedData.value
       ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@@ -100,18 +91,16 @@ export function useViewData(
     }
   }
 
-  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    if (isPublic.value) {
-      loadPublicData(params)
-      return
-    }
-
-    if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
+  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}, isPublicMode = false) => {
+    isPublic = isPublic ?? ref(isPublicMode)
+    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
-    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
-      ...params,
-      where: where?.value,
-    })
+    const response = !isPublic.value
+      ? await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
+          ...params,
+          where: where?.value,
+        })
+      : await fetchSharedViewData()
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
 
@@ -333,6 +322,15 @@ export function useViewData(
     }
   }
 
+  watch(
+    () => paginationData.value,
+    () => {
+      if (!isPublic.value) return
+
+      sharedPaginationData.value = paginationData.value
+    },
+  )
+
   return {
     loadData,
     paginationData,
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 1733df1ded..689b42892d 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -2,21 +2,28 @@ import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
+import { IsPublicInj, MetaInj } from '~/context'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  shared = false,
 ) {
+  const { filters: sharedViewFilter } = useSharedView()
+  const meta = inject(MetaInj)
+  const { loadData } = useViewData(meta, view)
+
   const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
+  const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
   const loadFilters = async (hookId?: string) => {
+    if (isPublic.value) return
+
     if (hookId) {
       if (parentId) {
         filters.value = await $api.dbTableFilter.childrenRead(parentId)
@@ -55,12 +62,13 @@ export function useViewFilters(
         }
       }
     }
+    }
     reloadData?.()
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
       reloadData?.()
     } else {
@@ -83,7 +91,7 @@ export function useViewFilters(
 
   const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
     if (!view?.value) return
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -103,21 +111,27 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value = [
+      ...filters.value,
+      {
+        comparison_op: 'eq',
+        value: '',
+        status: 'create',
+        logical_op: 'and',
+      },
+    ]
   }
 
-  const addFilterGroup = async (parentId?: string) => {
-    filters.value.push({
-      parentId,
-      is_group: true,
-      status: 'create',
-      logical_op: 'and',
-    })
+  const addFilterGroup = async () => {
+    filters.value = [
+      ...filters.value,
+      {
+        parentId,
+        is_group: true,
+        status: 'create',
+        logical_op: 'and',
+      },
+    ]
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
@@ -138,5 +152,15 @@ export function useViewFilters(
     },
   )
 
+  watch(
+    () => filters.value,
+    () => {
+      if (!isPublic.value) return
+
+      sharedViewFilter.value = filters.value
+      loadData()
+    },
+  )
+
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index f891d7b423..65ff8c17ab 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -10,9 +10,9 @@ definePageMeta({
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, columns } = useSharedView(route.params.viewId as string)
+const { sharedView, loadSharedView, meta, columns } = useSharedView()
 
-await loadSharedView()
+await loadSharedView(route.params.viewId as string)
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(MetaInj, meta)

From 9c44490cda183fec749f51a653c7f6792d80dec4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 13:45:24 +0530
Subject: [PATCH 30/77] refactor/gui-v2-Share view minor cleanup

---
 packages/nc-gui-v2/composables/useViewData.ts | 24 ++++----
 .../nc-gui-v2/composables/useViewFilters.ts   | 60 +++++++++----------
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 146f9ccf4c..56df5eff00 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -30,17 +30,28 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
   const formColumnData = ref<FormType>()
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
+  let isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
-  let isPublic = inject(IsPublicInj, ref(false))
+
+  const paginationData = computed({
+    get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedPaginationData.value = value
+      } else {
+        _paginationData.value = value
+      }
+    },
+  })
 
   const selectedAllRecords = computed({
     get() {
@@ -322,15 +333,6 @@ export function useViewData(
     }
   }
 
-  watch(
-    () => paginationData.value,
-    () => {
-      if (!isPublic.value) return
-
-      sharedPaginationData.value = paginationData.value
-    },
-  )
-
   return {
     loadData,
     paginationData,
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 689b42892d..ed3f342e1f 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -2,7 +2,7 @@ import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
-import { IsPublicInj, MetaInj } from '~/context'
+import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
@@ -11,16 +11,28 @@ export function useViewFilters(
   reloadData?: () => void,
 ) {
   const { filters: sharedViewFilter } = useSharedView()
-  const meta = inject(MetaInj)
-  const { loadData } = useViewData(meta, view)
 
-  const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+  const reloadHook = inject(ReloadViewDataHookInj)
+
+  const _filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
+  const filters = computed({
+    get: () => (isPublic.value ? sharedViewFilter.value : _filters.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedViewFilter.value = value
+        reloadHook?.trigger()
+      } else {
+        _filters.value = value
+      }
+    },
+  })
+
   const loadFilters = async (hookId?: string) => {
     if (isPublic.value) return
 
@@ -111,27 +123,21 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value = [
-      ...filters.value,
-      {
-        comparison_op: 'eq',
-        value: '',
-        status: 'create',
-        logical_op: 'and',
-      },
-    ]
+    filters.value.push({
+      comparison_op: 'eq',
+      value: '',
+      status: 'create',
+      logical_op: 'and',
+    })
   }
 
   const addFilterGroup = async () => {
-    filters.value = [
-      ...filters.value,
-      {
-        parentId,
-        is_group: true,
-        status: 'create',
-        logical_op: 'and',
-      },
-    ]
+    filters.value.push({
+      parentId,
+      is_group: true,
+      status: 'create',
+      logical_op: 'and',
+    })
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
@@ -152,15 +158,5 @@ export function useViewFilters(
     },
   )
 
-  watch(
-    () => filters.value,
-    () => {
-      if (!isPublic.value) return
-
-      sharedViewFilter.value = filters.value
-      loadData()
-    },
-  )
-
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }

From c2d4b6619b9b5a4f93575437944813fbf78b7193 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 13:46:45 +0530
Subject: [PATCH 31/77] refactor/gui-v2-Share view minor cleanup

---
 packages/nc-gui-v2/composables/useViewData.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 56df5eff00..1a00842f27 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -37,7 +37,7 @@ export function useViewData(
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
-  let isPublic = inject(IsPublicInj, ref(false))
+  const isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
@@ -102,8 +102,7 @@ export function useViewData(
     }
   }
 
-  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}, isPublicMode = false) => {
-    isPublic = isPublic ?? ref(isPublicMode)
+  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
     const response = !isPublic.value

From 4b51c73dcd54fce5d3a5de1f1011010663315d40 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 13:51:42 +0530
Subject: [PATCH 32/77] refactor/gui-v2-added readonly mode to Share view

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 4 +---
 packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 26e159418e..c1b3275bb2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -100,9 +100,7 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
-  if (!isPublicView) {
-    loadAggCommentsCount()
-  }
+  loadAggCommentsCount()
   await loadData()
 })
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 65ff8c17ab..ffd3b34d81 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TableType } from 'nocodb-sdk/build/main'
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
 definePageMeta({
   requiresAuth: false,
@@ -19,6 +19,7 @@ provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
 provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
+provide(ReadonlyInj, ref(true))
 
 const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>

From 71976bca727a38898fc1aee6d6ba2bb158e28b65 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 14:31:49 +0530
Subject: [PATCH 33/77] refactor/gui-v2-added sort to Share view

---
 .../nc-gui-v2/composables/useSharedView.ts    |  6 ++-
 .../nc-gui-v2/composables/useViewSorts.ts     | 46 +++++++++++++++++--
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 4e05bb23cd..7175d0b152 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,9 +1,10 @@
-import type { ColumnType, FilterType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
+const sorts = ref<SortType[]>([])
 
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
@@ -32,10 +33,11 @@ export function useSharedView() {
     const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
       offset: (page - 1) * pageSize,
       filterArrJson: JSON.stringify(filters.value),
+      sortArrJson: JSON.stringify(sorts.value),
     } as any)
 
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData }
+  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData, sorts }
 }
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 31e4a998e4..b7d712a255 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -1,18 +1,41 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#imports'
+import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   reloadData?: () => void,
 ) {
-  const sorts = ref<SortType[]>([])
+  const _sorts = ref<SortType[]>([])
+  const { sorts: sharedViewSorts, sharedView } = useSharedView()
+
+  const reloadHook = inject(ReloadViewDataHookInj)
+  const isPublic = inject(IsPublicInj, ref(false))
+
+  const sorts = computed<SortType[]>({
+    get: () => (isPublic.value ? sharedViewSorts.value : _sorts.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedViewSorts.value = value
+      } else {
+        _sorts.value = value
+      }
+      reloadHook?.trigger()
+    },
+  })
 
   const { $api } = useNuxtApp()
 
   const { isUIAllowed } = useUIPermission()
 
   const loadSorts = async () => {
+    if (isPublic.value) {
+      console.log('load sorts public', sharedView.value?.sorts)
+      const sharedSorts = sharedView.value?.sorts || []
+      sorts.value = [...sharedSorts]
+      return
+    }
     if (!view?.value) return
     sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
   }
@@ -20,6 +43,12 @@ export function useViewSorts(
   const saveOrUpdate = async (sort: SortType, i: number) => {
     // TODO:
     // if (!this.shared && this._isUIAllowed('sortSync')) {
+    if (isPublic.value) {
+      sorts.value[i] = sort
+      sorts.value = [...sorts.value]
+      return
+    }
+
     if (isUIAllowed('sortSync')) {
       if (sort.id) {
         await $api.dbTableSort.update(sort.id, sort)
@@ -30,14 +59,23 @@ export function useViewSorts(
     reloadData?.()
   }
   const addSort = () => {
-    sorts.value.push({
-      direction: 'asc',
-    })
+    sorts.value = [
+      ...sorts.value,
+      {
+        direction: 'asc',
+      },
+    ]
   }
 
   const deleteSort = async (sort: SortType, i: number) => {
     // TOOD:
     // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
+    if (isPublic.value) {
+      sorts.value.splice(i, 1)
+      sorts.value = [...sorts.value]
+      return
+    }
+
     if (isUIAllowed('sortSync') && sort.id) {
       await $api.dbTableSort.delete(sort.id)
     } else {

From b92f8263adfb4f976f0b0ab7a9b8f4c97fcb0b38 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 14:35:52 +0530
Subject: [PATCH 34/77] refactor/gui-v2-Share view minor cleanup

---
 packages/nc-gui-v2/composables/useViewSorts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index b7d712a255..a1e8f2bc99 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -31,7 +31,6 @@ export function useViewSorts(
 
   const loadSorts = async () => {
     if (isPublic.value) {
-      console.log('load sorts public', sharedView.value?.sorts)
       const sharedSorts = sharedView.value?.sorts || []
       sorts.value = [...sharedSorts]
       return

From 6072e9e354ba3b5a96106aeeb52cbdaf756352a5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 17:41:28 +0530
Subject: [PATCH 35/77] refactor/gui-v2-Share view added group filter

---
 .../smartsheet-toolbar/ColumnFilter.vue       |  6 ++-
 .../nc-gui-v2/composables/useSharedView.ts    |  6 +--
 .../nc-gui-v2/composables/useViewFilters.ts   | 51 ++++++++++++-------
 packages/nc-gui-v2/lib/types.ts               |  4 +-
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index d3f413b030..816ae9c15a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -8,12 +8,14 @@ import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
+import type { Filter } from '~/lib/types'
 
 const {
   nested = false,
   parentId,
   autoSave = true,
   hookId = null,
+  modelValue: Filter[]
 } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
 
 const emit = defineEmits(['update:filtersLength'])
@@ -25,7 +27,6 @@ const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 // todo: replace with inject or get from state
-const shared = ref(false)
 
 const { $e } = useNuxtApp()
 
@@ -36,6 +37,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   () => {
     reloadDataHook?.trigger()
   },
+  modelValue,
 )
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
@@ -152,7 +154,7 @@ defineExpose({
             <span class="col-span-3" />
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
-                v-if="filter.id || shared"
+                v-if="filter.id || filter.children"
                 ref="nestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 7175d0b152..aeabc9f06f 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,7 +1,7 @@
 import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
@@ -32,12 +32,12 @@ export function useSharedView() {
 
     const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
       offset: (page - 1) * pageSize,
-      filterArrJson: JSON.stringify(filters.value),
+      filterArrJson: JSON.stringify(nestedFilters.value),
       sortArrJson: JSON.stringify(sorts.value),
     } as any)
 
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData, sorts }
+  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts }
 }
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index ed3f342e1f..6e22b9690e 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,20 +1,22 @@
-import type { FilterType, ViewType } from 'nocodb-sdk'
+import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
 import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import type { Filter } from '~/lib'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
+  siblingFilters?: Filter[],
 ) {
-  const { filters: sharedViewFilter } = useSharedView()
+  const { nestedFilters } = useSharedView()
 
   const reloadHook = inject(ReloadViewDataHookInj)
 
-  const _filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+  const _filters = ref<Filter[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
@@ -22,10 +24,15 @@ export function useViewFilters(
   const { metas } = useMetas()
 
   const filters = computed({
-    get: () => (isPublic.value ? sharedViewFilter.value : _filters.value),
+    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value),
     set: (value) => {
       if (isPublic.value) {
-        sharedViewFilter.value = value
+        if (siblingFilters) {
+          siblingFilters = value
+        } else {
+          nestedFilters.value = value
+        }
+        nestedFilters.value = [...nestedFilters.value]
         reloadHook?.trigger()
       } else {
         _filters.value = value
@@ -33,6 +40,13 @@ export function useViewFilters(
     },
   })
 
+  const placeholderFilter: Filter = {
+    comparison_op: 'eq',
+    value: '',
+    status: 'create',
+    logical_op: 'and',
+  }
+
   const loadFilters = async (hookId?: string) => {
     if (isPublic.value) return
 
@@ -78,7 +92,7 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+  const deleteFilter = async (filter: Filter, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
     if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
@@ -101,9 +115,14 @@ export function useViewFilters(
     }
   }
 
-  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
+  const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
+    if (isPublic.value) {
+      filters.value[i] = { ...filter } as any
+      filters.value = [...filters.value]
+      return
+    }
     if (!view?.value) return
-    if (isPublic.value || !isUIAllowed('filterSync')) {
+    if (!isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -123,21 +142,19 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value.push(placeholderFilter)
   }
 
   const addFilterGroup = async () => {
-    filters.value.push({
-      parentId,
+    const child = placeholderFilter
+    const placeHolderGroupFilter: Filter = {
       is_group: true,
       status: 'create',
       logical_op: 'and',
-    })
+    }
+    if (isPublic.value) placeHolderGroupFilter.children = [child]
+
+    filters.value.push(placeHolderGroupFilter)
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index c8f5869047..7b006d67f7 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -1,5 +1,5 @@
+import type { FilterType } from 'nocodb-sdk'
 import type { Role } from './enums'
-
 export interface User {
   id: string
   email: string
@@ -22,3 +22,5 @@ export interface ProjectMetaInfo {
 }
 
 export type Roles = Record<Role, boolean>
+
+export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }

From d6fbce8a59f23f90b2d476e10aa06fc1b0bcc8c0 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 20:27:14 +0530
Subject: [PATCH 36/77] refactor/gui-v2 added more options

---
 .../smartsheet-toolbar/MoreActions.vue        | 37 +++++--------------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  9 +++--
 .../components/smartsheet/Toolbar.vue         |  4 +-
 .../nc-gui-v2/composables/useSharedView.ts    | 26 ++++++++++++-
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 13f9a376c5..54eaa310fb 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -6,6 +6,8 @@ import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
 import {
   ActiveViewInj,
+  FieldsInj,
+  IsPublicInj,
   MetaInj,
   extractSdkResponseErrorMsg,
   inject,
@@ -22,7 +24,7 @@ enum ExportTypes {
 
 const sharedViewListDlg = ref(false)
 
-const publicViewId = null
+const isPublicView = inject(IsPublicInj, ref(false))
 
 const isView = false
 
@@ -33,7 +35,7 @@ const { project } = useProject()
 const { $api } = useNuxtApp()
 
 const meta = inject(MetaInj)
-
+const fields = inject(FieldsInj, ref([]))
 const selectedView = inject(ActiveViewInj)
 
 const showWebhookDrawer = ref(false)
@@ -46,31 +48,12 @@ const exportFile = async (exportType: ExportTypes) => {
   let offset = 0
   let c = 1
   const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
+
   try {
     while (!isNaN(offset) && offset > -1) {
       let res
-      if (publicViewId) {
-        // TODO: pending for shared view
-        // const { data, headers } = await $api.public.csvExport(publicViewId, exportType, {
-        //   format: responseType,
-        //   query: {
-        //     fields:
-        //       queryParams && queryParams.fieldsOrder && queryParams.fieldsOrder.filter((c: number) => queryParams.showFields[c]),
-        //     offset,
-        //     sortArrJson: JSON.stringify(
-        //       reqPayload &&
-        //         reqPayload.sorts &&
-        //         reqPayload.sorts.map(({ fk_column_id, direction }) => ({
-        //           direction,
-        //           fk_column_id,
-        //         })),
-        //     ),
-        //     filterArrJson: JSON.stringify(reqPayload && reqPayload.filters),
-        //   },
-        //   headers: {
-        //     'xc-password': reqPayload && reqPayload.password,
-        //   },
-        // } as Record<string, any>)
+      if (isPublicView.value) {
+        res = await exportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
           'noco',
@@ -137,7 +120,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('csvImport') && !isView"
+              v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
               v-t="['a:actions:upload-csv']"
               class="nc-menu-item"
               @click="quickImportDialog = true"
@@ -148,7 +131,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('SharedViewList') && !isView"
+              v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
               v-t="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
@@ -159,7 +142,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('webhook') && !isView"
+              v-if="isUIAllowed('webhook') && !isView && !isPublicView"
               v-t="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index c1b3275bb2..6e071e5d17 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -26,6 +26,7 @@ import {
   IsPublicInj,
   MetaInj,
   PaginationDataInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
 } from '~/context'
 import { NavigateDir } from '~/lib'
@@ -40,7 +41,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-
+const readonly = inject(ReadonlyInj, ref(false))
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -325,14 +326,14 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 @xcresized="resizingCol = null"
               >
                 <div class="w-full h-full bg-gray-100 flex items-center">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readonly" />
 
-                  <SmartsheetHeaderCell v-else :column="col" />
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
                 </div>
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th
-                v-if="isUIAllowed('add-column')"
+                v-if="!readonly && isUIAllowed('add-column')"
                 v-t="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index e83eb46d0e..d895f47221 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -7,8 +7,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
-    <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
+    <SmartsheetToolbarSearchData v-if="isGrid && !isPublic" class="flex-shrink" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
 
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index aeabc9f06f..04ddc5996f 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,10 +1,11 @@
-import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
+const password = ref<string | undefined>()
 
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
@@ -39,5 +40,26 @@ export function useSharedView() {
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts }
+  const exportFile = async (
+    fields: any[],
+    offset: number,
+    type: ExportTypes.EXCEL | ExportTypes.CSV,
+    responseType: 'base64' | 'blob',
+  ) => {
+    return await $api.public.csvExport(sharedView.value?.uuid, type, {
+      format: responseType as any,
+      query: {
+        fields: fields.map((field) => field.title),
+        offset,
+        sortArrJson: JSON.stringify(sorts.value),
+
+        filterArrJson: JSON.stringify(nestedFilters.value),
+      },
+      headers: {
+        'xc-password': password,
+      },
+    })
+  }
+
+  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts, exportFile }
 }

From bc0553d38184a48af2ae4c10708d866658b8b22f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 22:36:28 +0530
Subject: [PATCH 37/77] fix/fixed scroll of shared view

---
 .../pages/[projectType]/view/[viewId].vue         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index ffd3b34d81..57a68e193b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TableType } from 'nocodb-sdk/build/main'
+
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
+import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
 })
@@ -26,7 +28,16 @@ const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 
 <template>
   <NuxtLayout id="content" class="flex">
-    <SmartsheetToolbar />
-    <SmartsheetGrid :is-public-view="true" />
+    <div class="nc-container flex flex-col h-full mt-2 px-6">
+      <SmartsheetToolbar />
+      <SmartsheetGrid :is-public-view="true" />
+    </div>
   </NuxtLayout>
 </template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>

From d13fe53d63cb6036416d07b0b48253265d485412 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 14:19:51 +0530
Subject: [PATCH 38/77] fix/added shared view form

---
 .../nc-gui-v2/components/shared-view/Form.vue | 94 +++++++++++++++++++
 .../nc-gui-v2/composables/useSharedView.ts    | 24 ++++-
 packages/nc-gui-v2/composables/useViewData.ts |  2 +-
 .../pages/[projectType]/form/[viewId].vue     | 42 +++++++++
 .../pages/[projectType]/view/[viewId].vue     |  2 +-
 5 files changed, 161 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/shared-view/Form.vue
 create mode 100644 packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
new file mode 100644
index 0000000000..89db748be6
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { FieldsInj, MetaInj } from '~/context'
+
+const fields = inject(FieldsInj, ref([]))
+const meta = inject(MetaInj)
+const { sharedView } = useSharedView()
+
+const formState = ref(fields.value.reduce((a, v) => ({ ...a, [v.title]: undefined }), {}))
+
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+  ) {
+    columnObj = fields.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
+  }
+
+  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
+}
+
+useSmartsheetStoreOrThrow()
+useProvideSmartsheetRowStore(meta, formState)
+
+const formRef = ref()
+
+watch(
+  () => formState,
+  () => {
+    console.log('formData', formState.value)
+  },
+)
+
+console.log(fields)
+</script>
+
+<template>
+  <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
+    <div class="flex w-2/3 flex-col mt-10">
+      <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
+        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">{{
+          sharedView.view.heading
+        }}</a-typography-title>
+        <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
+      </div>
+
+      <a-form ref="formRef" :model="formState" class="mt-8 pb-12 mb-8 px-3 bg-gray-50 rounded-md">
+        <div v-for="(field, index) in fields" :key="index" class="flex flex-col mt-4 px-10 pt-6 space-y-2">
+          <div class="flex">
+            <SmartsheetHeaderVirtualCell
+              v-if="isVirtualCol(field)"
+              :column="{ ...field, title: field.label || field.title }"
+              :required="isRequired(field, field.required)"
+              :hide-menu="true"
+            />
+            <SmartsheetHeaderCell
+              v-else
+              :column="{ ...field, title: field.label || field.title }"
+              :required="isRequired(field, field.required)"
+              :hide-menu="true"
+            />
+          </div>
+          <a-form-item
+            v-if="isVirtualCol(field)"
+            class="ma-0 gap-0 pa-0"
+            :name="field.title"
+            :rules="[{ required: field.required, message: `${field.title} is required` }]"
+          >
+            <SmartsheetVirtualCell v-model="formState[field.title]" class="nc-input" :column="field" />
+          </a-form-item>
+          <a-form-item
+            v-else
+            class="ma-0 gap-0 pa-0"
+            :name="field.title"
+            :rules="[{ required: field.required, message: `${field.title} is required` }]"
+          >
+            <SmartsheetCell v-model="formState[field.title]" class="nc-input" :column="field" :edit-enabled="true" />
+          </a-form-item>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nc-input {
+  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
+}
+</style>
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 04ddc5996f..8b702bbb48 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,4 +1,5 @@
 import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -10,6 +11,16 @@ const password = ref<string | undefined>()
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
   const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const formColumns = computed(
+    () =>
+      columns.value
+        .filter(
+          (f: Record<string, any>) =>
+            f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
+        )
+        .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
+        .map((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) })) ?? [],
+  )
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
@@ -61,5 +72,16 @@ export function useSharedView() {
     })
   }
 
-  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts, exportFile }
+  return {
+    sharedView,
+    loadSharedView,
+    meta,
+    columns,
+    nestedFilters,
+    fetchSharedViewData,
+    paginationData,
+    sorts,
+    exportFile,
+    formColumns,
+  }
 }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 1a00842f27..43f6ca6db3 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -19,7 +19,6 @@ export interface Row {
     commentCount?: number
   }
 }
-const formattedData = ref<Row[]>([])
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
@@ -36,6 +35,7 @@ export function useViewData(
   const formColumnData = ref<FormType>()
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
+  const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
new file mode 100644
index 0000000000..ab6206ad97
--- /dev/null
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+
+import { useRoute } from '#imports'
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
+console.log(sharedView)
+await loadSharedView(route.params.viewId as string)
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, formColumns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+// useSmartsheetRowStore()
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <div class="nc-container flex flex-col h-full mt-2 px-6">
+      <SharedViewForm />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 57a68e193b..035cdc8930 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -23,7 +23,7 @@ provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 provide(ReadonlyInj, ref(true))
 
-const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>

From e9b62481b14895640384416dea0be90c752f3373 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 14:46:52 +0530
Subject: [PATCH 39/77] fix/minor cleanup

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 6 +-----
 packages/nc-gui-v2/composables/useGridViewColumnWidth.ts | 6 +++---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6e071e5d17..115b590036 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -83,11 +83,7 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
 onMounted(() => {
-  if (!isPublicView.value) {
-    loadGridViewColumns()
-  } else {
-    loadGridViewColumns(fields.value)
-  }
+  loadGridViewColumns()
 })
 
 provide(IsFormInj, ref(false))
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index 26820d311b..f26da87d31 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -36,9 +36,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     { deep: true, immediate: true },
   )
 
-  const loadGridViewColumns = async (cols?: GridColumnType[] | undefined) => {
-    if (!view.value?.id && !cols) return
-    const colsData: GridColumnType[] = cols ?? (await $api.dbView.gridColumnsList(view.value.id))
+  const loadGridViewColumns = async () => {
+    if (!view.value?.id && !isPublic.value) return
+    const colsData: GridColumnType[] = isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value.id)
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,

From f1f33b5a24720dab29ae75a1f799ea48c5042069 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 14:52:48 +0530
Subject: [PATCH 40/77] fix/export fix shared view

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

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 54eaa310fb..f852b05a24 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -53,7 +53,8 @@ const exportFile = async (exportType: ExportTypes) => {
     while (!isNaN(offset) && offset > -1) {
       let res
       if (isPublicView.value) {
-        res = await exportFile(fields.value, offset, exportType, responseType)
+        const { exportFile: sharedViewExportFile } = useSharedView()
+        res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
           'noco',

From 5ec2b687eb2129026ad76d3cdc30adf15aa6c283 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 17:02:31 +0530
Subject: [PATCH 41/77] refactor/gui-v2 added password login to shared grid
 view

---
 .../components/shared-view/AskPassword.vue    | 51 +++++++++++++++++++
 .../nc-gui-v2/components/shared-view/Grid.vue | 32 ++++++++++++
 .../nc-gui-v2/composables/useSharedView.ts    | 36 +++++++++----
 .../pages/[projectType]/view/[viewId].vue     | 35 +++++--------
 4 files changed, 120 insertions(+), 34 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/shared-view/AskPassword.vue
 create mode 100644 packages/nc-gui-v2/components/shared-view/Grid.vue

diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
new file mode 100644
index 0000000000..8dc57a3e71
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { notification } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg } from '~/utils'
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+interface Props {
+  modelValue: boolean
+}
+
+const route = useRoute()
+const { loadSharedView } = useSharedView()
+
+const formState = ref({ password: undefined })
+const vModel = useVModel(props, 'modelValue', emit)
+
+const onFinish = async () => {
+  try {
+    await loadSharedView(route.params.viewId as string, formState.value.password)
+    vModel.value = false
+  } catch (e: any) {
+    console.error(e)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="vModel"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    :mask-closable="false"
+    @close="vModel = false"
+  >
+    <div class="w-full flex flex-col">
+      <a-typography-title :level="4">This shared view is protected</a-typography-title>
+      <a-form ref="formRef" :model="formState" class="mt-2" @finish="onFinish">
+        <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
+          <a-input-password v-model:value="formState.password" placeholder="Enter password" />
+        </a-form-item>
+        <a-button type="primary" html-type="submit">Unlock</a-button>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
new file mode 100644
index 0000000000..2c7eb73b56
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+
+const { sharedView, meta, columns } = useSharedView()
+
+const reloadEventHook = createEventHook<void>()
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(ReadonlyInj, ref(true))
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, columns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <div class="nc-container flex flex-col h-full mt-2 px-6">
+    <SmartsheetToolbar />
+    <SmartsheetGrid />
+  </div>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 8b702bbb48..db8027ebc9 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,5 +1,5 @@
 import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -9,8 +9,8 @@ const sorts = ref<SortType[]>([])
 const password = ref<string | undefined>()
 
 export function useSharedView() {
-  const meta = ref<TableType>(() => sharedView.value?.model)
-  const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const meta = ref<TableType>(sharedView.value?.model)
+  const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
   const formColumns = computed(
     () =>
       columns.value
@@ -25,8 +25,14 @@ export function useSharedView() {
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
 
-  const loadSharedView = async (viewId: string) => {
-    const viewMeta = await $api.public.sharedViewMetaGet(viewId)
+  const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId, {
+      headers: {
+        'xc-password': localPassword ?? password.value,
+      },
+    })
+
+    if (localPassword) password.value = localPassword
     sharedView.value = viewMeta
 
     meta.value = viewMeta.model
@@ -42,11 +48,19 @@ export function useSharedView() {
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || 25
 
-    const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
-      offset: (page - 1) * pageSize,
-      filterArrJson: JSON.stringify(nestedFilters.value),
-      sortArrJson: JSON.stringify(sorts.value),
-    } as any)
+    const { data } = await $api.public.dataList(
+      sharedView?.value?.uuid,
+      {
+        offset: (page - 1) * pageSize,
+        filterArrJson: JSON.stringify(nestedFilters.value),
+        sortArrJson: JSON.stringify(sorts.value),
+      } as any,
+      {
+        headers: {
+          'xc-password': password.value,
+        },
+      },
+    )
 
     return data
   }
@@ -67,7 +81,7 @@ export function useSharedView() {
         filterArrJson: JSON.stringify(nestedFilters.value),
       },
       headers: {
-        'xc-password': password,
+        'xc-password': password.value,
       },
     })
   }
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 035cdc8930..09668bcf02 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
-
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
 import { useRoute } from '#imports'
 definePageMeta({
@@ -12,32 +9,24 @@ definePageMeta({
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, columns } = useSharedView()
-
-await loadSharedView(route.params.viewId as string)
-
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(MetaInj, meta)
-provide(ActiveViewInj, sharedView)
-provide(FieldsInj, columns)
-provide(IsPublicInj, ref(true))
 provide(ReadonlyInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+const { loadSharedView } = useSharedView()
+const showPassword = ref(false)
+
+try {
+  await loadSharedView(route.params.viewId as string)
+} catch (e) {
+  showPassword.value = true
+}
 </script>
 
 <template>
   <NuxtLayout id="content" class="flex">
-    <div class="nc-container flex flex-col h-full mt-2 px-6">
-      <SmartsheetToolbar />
-      <SmartsheetGrid :is-public-view="true" />
+    <div v-if="showPassword">
+      <SharedViewAskPassword v-model="showPassword" />
     </div>
+    <SharedViewGrid v-else />
   </NuxtLayout>
 </template>
-
-<style scoped>
-.nc-container {
-  height: calc(100% - var(--header-height));
-  flex: 1 1 100%;
-}
-</style>

From 25ddcb70e8505f8c7647758f370bae7f19056d0b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 17:15:38 +0530
Subject: [PATCH 42/77] refactor/gui-v2 added allowcsv flag to shared grid view

---
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 4 +++-
 packages/nc-gui-v2/composables/useSharedView.ts      | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index d895f47221..1d92b96763 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -3,6 +3,7 @@ import { useSmartsheetStoreOrThrow } from '~/composables'
 import { IsPublicInj } from '~/context'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const { allowCSVDownload } = useSharedView()
 const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
@@ -16,7 +17,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
-    <SmartsheetToolbarMoreActions v-if="isGrid" />
+    <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
+
     <div class="flex-1" />
     <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
   </div>
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index db8027ebc9..e033103bad 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -7,6 +7,7 @@ const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
 const password = ref<string | undefined>()
+const allowCSVDownload = ref<boolean>(false)
 
 export function useSharedView() {
   const meta = ref<TableType>(sharedView.value?.model)
@@ -32,6 +33,8 @@ export function useSharedView() {
       },
     })
 
+    allowCSVDownload.value = JSON.parse(viewMeta.meta).allowCSVDownload
+
     if (localPassword) password.value = localPassword
     sharedView.value = viewMeta
 
@@ -97,5 +100,6 @@ export function useSharedView() {
     sorts,
     exportFile,
     formColumns,
+    allowCSVDownload,
   }
 }

From 8f37225eb6dd33cb55063dd67263fa088037f29b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 12:46:58 +0530
Subject: [PATCH 43/77] refactor/added shared-view layout

---
 packages/nc-gui-v2/layouts/shared-view.vue | 45 ++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
new file mode 100644
index 0000000000..5874cba716
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app'
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SharedView',
+}
+</script>
+
+<template>
+  <a-layout id="nc-app">
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex-1" />
+
+        <a-tooltip placement="left">
+          <template #title> Switch language </template>
+
+          <div class="flex pr-4 items-center">
+            <GeneralLanguage class="cursor-pointer text-2xl" />
+          </div>
+        </a-tooltip>
+      </a-layout-header>
+
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>

From c24a946e93b88cea49564d70f7b6a307ea9b0166 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 18:06:46 +0530
Subject: [PATCH 44/77] refactor/added show and hide all option to shared view

---
 .../smartsheet-toolbar/ColumnFilterMenu.vue     |  5 +++--
 .../nc-gui-v2/components/smartsheet/Toolbar.vue |  7 +++----
 .../nc-gui-v2/composables/useViewColumns.ts     | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 6afb92c9fc..3274d16ecd 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
-import { ActiveViewInj, IsLockedInj } from '~/context'
+import { ActiveViewInj, IsLockedInj, IsPublicInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const isLocked = inject(IsLockedInj)
 const activeView = inject(ActiveViewInj)
+const isPublic = inject(IsPublicInj)
 
 const { filterAutoSave } = useGlobal()
 
@@ -50,7 +51,7 @@ const applyChanges = async () => {
         :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >
-        <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
+        <div v-if="!isPublic" class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
           <a-checkbox id="col-filter-checkbox" v-model:checked="filterAutoSave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 1d92b96763..27cc2fa2c4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -9,16 +9,15 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
-    <SmartsheetToolbarSearchData v-if="isGrid && !isPublic" class="flex-shrink" />
+    <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
-    <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
+    <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
-    <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
+    <SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
     <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
-
     <div class="flex-1" />
     <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
   </div>
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 6cc390ef37..cdd19b9afb 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -55,6 +55,15 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const showAll = async (ignoreIds?: any) => {
+    if (isPublic.value) {
+      fields.value = fields.value?.map((field) => ({
+        ...field,
+        show: true,
+      }))
+      reloadData?.()
+      return
+    }
+
     if (view?.value?.id) {
       if (ignoreIds) {
         await $api.dbView.showAllColumn(view.value.id, {
@@ -69,6 +78,14 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
   const hideAll = async (ignoreIds?: any) => {
+    if (isPublic.value) {
+      fields.value = fields.value?.map((field) => ({
+        ...field,
+        show: false,
+      }))
+      reloadData?.()
+      return
+    }
     if (view?.value?.id) {
       if (ignoreIds) {
         await $api.dbView.hideAllColumn(view.value.id, {

From 64f62be536d695141977b7daa66b157d2f87ea8e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 18:31:23 +0530
Subject: [PATCH 45/77] fix/fixed rebase regressions

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue    | 6 ++----
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 115b590036..79566809f2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -82,9 +82,7 @@ const {
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
-onMounted(() => {
-  loadGridViewColumns()
-})
+onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
 
@@ -97,8 +95,8 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
-  loadAggCommentsCount()
   await loadData()
+  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 27cc2fa2c4..85f80385a6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -8,7 +8,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
@@ -19,7 +19,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
     <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
     <div class="flex-1" />
-    <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
+    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2" />
   </div>
 </template>
 

From 9910fc7bbbc1d463036d5e67d8c1e13b27bc7a1a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 18:40:13 +0530
Subject: [PATCH 46/77] fix/minor import fix

---
 packages/nc-gui-v2/components/shared-view/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 2c7eb73b56..0c4bb3f5d1 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
+import type { TableType } from 'nocodb-sdk'
 
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 

From 31b628767e2c74ca5483aa9ef3d8a9dbf405d15b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 10:08:11 +0530
Subject: [PATCH 47/77] fix/removed unnecassary layout

---
 packages/nc-gui-v2/layouts/shared-view.vue | 45 ----------------------
 1 file changed, 45 deletions(-)
 delete mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
deleted file mode 100644
index 5874cba716..0000000000
--- a/packages/nc-gui-v2/layouts/shared-view.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import { navigateTo } from '#app'
-</script>
-
-<script lang="ts">
-export default {
-  name: 'SharedView',
-}
-</script>
-
-<template>
-  <a-layout id="nc-app">
-    <a-layout class="!flex-col">
-      <a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
-        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
-          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-        </div>
-
-        <div class="flex-1" />
-
-        <a-tooltip placement="left">
-          <template #title> Switch language </template>
-
-          <div class="flex pr-4 items-center">
-            <GeneralLanguage class="cursor-pointer text-2xl" />
-          </div>
-        </a-tooltip>
-      </a-layout-header>
-
-      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
-        <slot />
-      </div>
-    </a-layout>
-  </a-layout>
-</template>
-
-<style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-</style>

From 287c145bb02522572f0e5635942b4e0477d83450 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 11:55:23 +0530
Subject: [PATCH 48/77] fix/added shared view layout

---
 .../nc-gui-v2/components/shared-view/Grid.vue |  4 +-
 packages/nc-gui-v2/layouts/shared-view.vue    | 37 +++++++++++++++++++
 .../pages/[projectType]/view/[viewId].vue     |  3 +-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 0c4bb3f5d1..7a39c09f98 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -18,9 +18,9 @@ useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>
-  <div class="nc-container flex flex-col h-full mt-2 px-6">
+  <div class="nc-container flex flex-col h-full mt-4 px-6">
     <SmartsheetToolbar />
-    <SmartsheetGrid />
+    <SmartsheetGrid class="px-3" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
new file mode 100644
index 0000000000..a6d2aef876
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app'
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SharedView',
+}
+</script>
+
+<template>
+  <a-layout id="nc-app">
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex-1" />
+      </a-layout-header>
+
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 09668bcf02..9ba0c0d68e 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -4,6 +4,7 @@ import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
+  layout: 'shared-view',
 })
 
 const route = useRoute()
@@ -23,7 +24,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex">
+  <NuxtLayout id="content" class="flex" name="shared-view">
     <div v-if="showPassword">
       <SharedViewAskPassword v-model="showPassword" />
     </div>

From 1c2beca95722f275172c84c8966c8fd50061fbca Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 12:01:35 +0530
Subject: [PATCH 49/77] fix/replaced usage of shared state with useState

---
 packages/nc-gui-v2/composables/useSharedView.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index e033103bad..ce8faa3d5c 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -2,14 +2,17 @@ import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, Tabl
 import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
-const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
-const sharedView = ref<ViewType>()
-const sorts = ref<SortType[]>([])
-const password = ref<string | undefined>()
-const allowCSVDownload = ref<boolean>(false)
-
 export function useSharedView() {
+  const nestedFilters = useState<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>(
+    'nestedFilters',
+    () => [],
+  )
+  const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: 25 }))
+  const sharedView = useState<ViewType>('sharedView')
+  const sorts = useState<SortType[]>('sorts', () => [])
+  const password = useState<string | undefined>('password')
+  const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
+
   const meta = ref<TableType>(sharedView.value?.model)
   const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
   const formColumns = computed(

From 4745c9d810bdbb90bf1ddfda0f9dc42777c7075f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 12:06:07 +0530
Subject: [PATCH 50/77] fix/pr review included

---
 packages/nc-gui-v2/components/shared-view/AskPassword.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
index 8dc57a3e71..ef50960515 100644
--- a/packages/nc-gui-v2/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils'
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
@@ -19,9 +19,7 @@ const onFinish = async () => {
     vModel.value = false
   } catch (e: any) {
     console.error(e)
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 </script>

From 9a6480928458722ae309ca1f80eea511ea30c303 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 14:11:45 +0530
Subject: [PATCH 51/77] fix/removed unnecassary imports

---
 .../components/shared-view/AskPassword.vue      |  5 +++--
 .../nc-gui-v2/components/shared-view/Form.vue   | 17 ++++-------------
 .../nc-gui-v2/components/smartsheet/Toolbar.vue |  3 +--
 .../nc-gui-v2/composables/useViewColumns.ts     |  2 +-
 packages/nc-gui-v2/composables/useViewData.ts   |  3 ++-
 .../nc-gui-v2/composables/useViewFilters.ts     |  4 +---
 packages/nc-gui-v2/composables/useViewSorts.ts  |  3 +--
 .../pages/[projectType]/form/[viewId].vue       |  9 +++------
 .../pages/[projectType]/view/[viewId].vue       |  3 +--
 9 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
index ef50960515..83f0481245 100644
--- a/packages/nc-gui-v2/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils'
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+
 interface Props {
   modelValue: boolean
 }
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
 
 const route = useRoute()
 const { loadSharedView } = useSharedView()
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 89db748be6..c8ab68b353 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { FieldsInj, MetaInj } from '~/context'
+import { FieldsInj, MetaInj } from '#imports'
 
 const fields = inject(FieldsInj, ref([]))
 const meta = inject(MetaInj)
@@ -28,24 +28,15 @@ useSmartsheetStoreOrThrow()
 useProvideSmartsheetRowStore(meta, formState)
 
 const formRef = ref()
-
-watch(
-  () => formState,
-  () => {
-    console.log('formData', formState.value)
-  },
-)
-
-console.log(fields)
 </script>
 
 <template>
   <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
     <div class="flex w-2/3 flex-col mt-10">
       <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
-        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">{{
-          sharedView.view.heading
-        }}</a-typography-title>
+        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">
+          {{ sharedView.view.heading }}
+        </a-typography-title>
         <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
       </div>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 85f80385a6..96d0d002c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useSmartsheetStoreOrThrow } from '~/composables'
-import { IsPublicInj } from '~/context'
+import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
 const { allowCSVDownload } = useSharedView()
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index cdd19b9afb..c775d36dc3 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -3,7 +3,7 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
-import { IsPublicInj } from '~/context'
+import { IsPublicInj } from '#imports'
 
 export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
   const isPublic = inject(IsPublicInj, ref(false))
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 43f6ca6db3..16a769269f 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,7 +1,8 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { IsPublicInj, NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
+import { useNuxtApp } from '#app'
+import { IsPublicInj, NOCO, extractPkFromRow, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 6e22b9690e..a5b7e2e199 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,8 +1,6 @@
 import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp, useUIPermission } from '#imports'
-import { useMetas } from '~/composables/useMetas'
-import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import { IsPublicInj, ReloadViewDataHookInj, useMetas, useNuxtApp, useUIPermission } from '#imports'
 import type { Filter } from '~/lib'
 
 export function useViewFilters(
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index a1e8f2bc99..3926eb467c 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -1,7 +1,6 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#imports'
-import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import { IsPublicInj, ReloadViewDataHookInj, useNuxtApp } from '#imports'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index ab6206ad97..aa46ab0e85 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
+import type { TableType } from 'nocodb-sdk'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj, useRoute } from '#imports'
 
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-
-import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
 })
@@ -13,7 +11,7 @@ const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
-console.log(sharedView)
+
 await loadSharedView(route.params.viewId as string)
 
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -23,7 +21,6 @@ provide(FieldsInj, formColumns)
 provide(IsPublicInj, ref(true))
 
 useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
-// useSmartsheetRowStore()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 9ba0c0d68e..2be1b26654 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ReadonlyInj, ReloadViewDataHookInj, useRoute } from '#imports'
 
-import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
   layout: 'shared-view',

From 6b2a84d19e63f53439a5fff6201b976ca5498397 Mon Sep 17 00:00:00 2001
From: Naveen MR <oof1lab@gmail.com>
Date: Tue, 16 Aug 2022 10:29:17 +0100
Subject: [PATCH 52/77] fix : header text will be gray

---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue        | 2 +-
 packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 4198159263..c2eaec027a 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -24,7 +24,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
+  <div class="flex items-center w-full text-xs text-normal text-gray-500 font-weight-medium" :class="{ 'h-full': column }">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index d0c81c38f3..b05f934a2d 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -101,7 +101,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex items-center w-full text-xs text-normal" :class="{ 'h-full': column }">
+  <div class="flex items-center w-full text-xs text-gray-500 font-weight-medium" :class="{ 'h-full': column }">
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
 
     <a-tooltip placement="bottom">

From 72bc08704966052112608f643657875a54b24d0b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:06:35 +0530
Subject: [PATCH 53/77] fix(gui-v2): overwrite ant-dropdown height

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5d85cf3ae3..5889014f18 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -292,7 +292,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   <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 !h-auto" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>

From 24f68ae9b18154229e955b17fbcf4f049199ce37 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:14:50 +0530
Subject: [PATCH 54/77] refactor(gui-v2): reduce spacing between expand icon
 and checkbox

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5889014f18..afcf6543a1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -292,11 +292,15 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   <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 !h-auto" @contextmenu.prevent="contextMenu = true">
+        <table
+          ref="smartTable"
+          class="xc-row-table nc-grid backgroundColorDefault !h-auto"
+          @contextmenu.prevent="contextMenu = true"
+        >
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
-                <div class="w-full h-full bg-gray-100 flex min-w-[80px] pl-5 pr-1 items-center">
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -354,8 +358,10 @@ const expandForm = (row: Row, state: Record<string, any>) => {
               <template #default="{ state }">
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
-                    <div class="align-center flex min-w-[80px]">
-                      <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                    <div class="align-center flex gap-1 min-w-[55px]">
+                      <div class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                        {{ rowIndex + 1 }}
+                      </div>
                       <div
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"

From 9d3f3ec9001ee4e13f41c448837953d1254350bf Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 17:46:20 +0800
Subject: [PATCH 55/77] fix(gui-v2): date time picker disable

---
 packages/nc-gui-v2/components/cell/DateTimePicker.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 3233103c4f..c1895ec2f3 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
@@ -68,7 +69,7 @@ watch(
     :input-read-only="true"
     :dropdown-class-name="randomClass"
     :open="readOnly ? false : open"
-    :disabled="!editEnabled"
+    :disabled="readOnly"
     @click="open = !open"
     @ok="open = !open"
   >

From 23cbd6fe98503f85d74810c6db4e032c689c8fc4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 15:17:26 +0530
Subject: [PATCH 56/77] fix/fixed rebase regressions

---
 .../components/smartsheet-toolbar/ColumnFilter.vue    |  4 ++--
 packages/nc-gui-v2/composables/useViewData.ts         |  2 +-
 packages/nc-gui-v2/composables/useViewFilters.ts      |  2 +-
 packages/nc-gui-v2/composables/useViewSorts.ts        | 11 +++--------
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 816ae9c15a..09231feb10 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -15,8 +15,8 @@ const {
   parentId,
   autoSave = true,
   hookId = null,
-  modelValue: Filter[]
-} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
+  modelValue,
+} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string; modelValue?: Filter[] }>()
 
 const emit = defineEmits(['update:filtersLength'])
 
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 16a769269f..8c37a085bf 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -107,7 +107,7 @@ export function useViewData(
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
     const response = !isPublic.value
-      ? await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
+      ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
           ...params,
           where: where?.value,
         })
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index a5b7e2e199..4d1372a460 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -86,7 +86,7 @@ export function useViewFilters(
         }
       }
     }
-    }
+
     reloadData?.()
   }
 
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 3926eb467c..b6a3fa6bc0 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -68,17 +68,12 @@ export function useViewSorts(
   const deleteSort = async (sort: SortType, i: number) => {
     // TOOD:
     // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
-    if (isPublic.value) {
-      sorts.value.splice(i, 1)
-      sorts.value = [...sorts.value]
-      return
-    }
 
-    if (isUIAllowed('sortSync') && sort.id) {
+    if (isUIAllowed('sortSync') && sort.id && !isPublic.value) {
       await $api.dbTableSort.delete(sort.id)
-    } else {
-      sorts.value.splice(i, 1)
     }
+    sorts.value.splice(i, 1)
+    sorts.value = [...sorts.value]
   }
   return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }

From 6f08a90ec22cac9b738fce295a2338b6953fde8c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 15:21:44 +0530
Subject: [PATCH 57/77] fix/removed row edit in public mode

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 79566809f2..8aabffe927 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -356,15 +356,17 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex min-w-[80px]">
-                      <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div v-if="!readonly" class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div v-else>{{ rowIndex + 1 }}</div>
                       <div
+                        v-if="!readonly"
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!readonly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"

From 1d20b7ffa89784bef921327774c2a05e3b40219c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:40:37 +0530
Subject: [PATCH 58/77] fix(gui-v2): use readonlyInj in linked records list
 modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/virtual-cell/HasMany.vue   |  2 +-
 .../virtual-cell/components/ListChildItems.vue      | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index d0dfc6189f..f565dec83c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -32,7 +32,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const readonly = inject(ReadonlyInj)
+const readonly = inject(ReadonlyInj, false)
 
 const listItemsDlg = ref(false)
 
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 8fd432bba8..73dc823451 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -3,8 +3,8 @@ import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import {
   ColumnInj,
-  EditModeInj,
   IsFormInj,
+  ReadonlyInj,
   computed,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
@@ -24,7 +24,7 @@ const isForm = inject(IsFormInj, ref(false))
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject(EditModeInj)
+const readonly = inject(ReadonlyInj, false)
 
 const {
   childrenList,
@@ -85,7 +85,7 @@ const expandedFormRow = ref()
 
         <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
-        <a-button v-if="editEnabled" type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
+        <a-button v-if="!readonly" type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
             <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
@@ -107,16 +107,17 @@ const expandedFormRow = ref()
           >
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
-                {{ row[relatedTablePrimaryValueProp]
-                }}<span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
+                {{ row[relatedTablePrimaryValueProp] }}
+                <span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
               <div class="flex-1"></div>
-              <div v-if="editEnabled" class="flex gap-2">
+              <div v-if="!readonly" class="flex gap-2">
                 <MdiLinkVariantRemove
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="unlinkRow(row)"
                 />
                 <MdiDeleteOutline
+                  v-if="!readonly"
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
                 />

From 7342b9511d489516c9aa23e96c72d5753d4b6a93 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:49:10 +0530
Subject: [PATCH 59/77] fix(gui-v2): if form view and not in expanded state
 then hide save/cancel button of json cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Json.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 3e621b870f..c415fb97ad 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -2,7 +2,7 @@
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
 import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, IsFormInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -18,22 +18,29 @@ const emits = defineEmits<Emits>()
 
 const editEnabled = inject(EditModeInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const readonly = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 
 const localValueState = ref<string | undefined>()
 
+let error = $ref<string | undefined>()
+
+let isExpanded = $ref(false)
+
 const localValue = computed<string | Record<string, any> | undefined>({
   get: () => localValueState.value,
   set: (val: undefined | string | Record<string, any>) => {
     localValueState.value = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
+    /** if form and not expanded then sync directly */
+    if (isForm.value && !isExpanded) {
+      vModel.value = val
+    }
   },
 })
 
-let error = $ref<string | undefined>()
-
-let isExpanded = $ref(false)
 
 const clear = () => {
   error = undefined
@@ -98,7 +105,7 @@ watch(editEnabled, () => {
           <CilFullscreen v-else class="h-2.5" />
         </a-button>
 
-        <div class="flex flex-row">
+        <div v-if="!isForm || isExpanded" class="flex flex-row">
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
 
           <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">

From d5a7e606bc8c095f082b4107dd91bdfe926db79a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 15:32:38 +0530
Subject: [PATCH 60/77] refactor(gui-v2): comments style update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 ++
 .../smartsheet/expanded-form/Comments.vue     | 27 ++++++++++---------
 .../smartsheet/expanded-form/index.vue        |  6 ++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 546d2a6a69..6ff3d158bd 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -61,6 +61,7 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
@@ -156,6 +157,7 @@ declare module '@vue/runtime-core' {
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['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']
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index 93012ce369..ee7b430cff 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { enumColor, nextTick, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
+import { enumColor, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
@@ -13,52 +13,53 @@ const showborder = ref(false)
 watch(
   commentsAndLogs,
   () => {
-    nextTick(() => {
+    // todo: replace setTimeout
+    setTimeout(() => {
       if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
-    })
+    }, 200)
   },
   { immediate: true },
 )
 </script>
 
 <template>
-  <div class="h-full d-flex flex-column w-full">
-    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2">
+  <div class="h-full flex flex-col w-full bg-[#eceff1] p-2">
+    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2 space-y-2">
       <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
       <template v-else>
         <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
           <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
           <div class="flex-grow">
-            <p class="mb-1 caption edited-text text-[10px] text-gray">
+            <p class="mb-1 caption edited-text text-[10px] text-gray-500">
               {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
               {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
             </p>
             <p
               v-if="log.op_type === 'COMMENT'"
-              class="caption mb-0 nc-chip w-full min-h-20px"
+              class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded"
               :style="{ backgroundColor: enumColor.light[2] }"
             >
               {{ log.description }}
             </p>
 
-            <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+            <p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" />
 
-            <p class="time text-right text-[10px] mb-0">
+            <p class="time text-right text-[10px] mb-0 mt-1 text-gray-500">
               {{ timeAgo(log.created_at) }}
             </p>
           </div>
         </div>
       </template>
     </div>
-    <div class="border-1 my-2 w-full ml-6" />
+    <div class="border-1 my-2 w-full" />
     <div class="p-0">
       <div class="flex justify-center">
         <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
           ><span class="text-[11px] text-gray-500">Comments only</span>
         </a-checkbox>
       </div>
-      <div class="flex-shrink-1 mt-2 d-flex pl-4">
+      <div class="flex-shrink-1 mt-2 d-flex">
         <a-input
           v-model:value="comment"
           class="!text-xs"
@@ -84,10 +85,10 @@ watch(
 
 <style scoped>
 :deep(.red.lighten-4) {
-  @apply bg-red-100;
+  @apply bg-red-100 p-1;
 }
 
 :deep(.green.lighten-4) {
-  @apply bg-green-100;
+  @apply bg-green-100 p-1;
 }
 </style>
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 691f9369a3..e3e1af89fd 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -102,7 +102,7 @@ export default {
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
-    <a-card class="!bg-gray-100">
+    <div class="!bg-gray-100 rounded">
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
@@ -131,7 +131,7 @@ export default {
           </div>
         </div>
       </div>
-    </a-card>
+    </div>
   </a-modal>
 </template>
 
@@ -154,7 +154,7 @@ export default {
 }
 
 .nc-form-wrapper {
-  max-height: max(calc(90vh - 100px), 600px);
+  max-height: max(calc(90vh - 150px), 600px);
   height: max-content !important;
 }
 </style>

From e4c97225707325bc16ac3c183b85de60f81b0341 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 16:19:52 +0530
Subject: [PATCH 61/77] refactor(gui-v2): remove padding

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

diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index ee7b430cff..5bd9ce2745 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -85,10 +85,10 @@ watch(
 
 <style scoped>
 :deep(.red.lighten-4) {
-  @apply bg-red-100 p-1;
+  @apply bg-red-100;
 }
 
 :deep(.green.lighten-4) {
-  @apply bg-green-100 p-1;
+  @apply bg-green-100;
 }
 </style>

From 79adb0e350ffeba994d2d44f30692fd73c5d1418 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 19:18:55 +0800
Subject: [PATCH 62/77] fix(gui-v2): add @click.stop on toolbar buttons

---
 .../components/smartsheet/sidebar/toolbar/index.vue         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 9af373d4c3..0086d4f89d 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -39,15 +39,15 @@ const clickCount = $ref(0)
       <div class="dot" />
     </template>
 
-    <LockMenu v-if="isUIAllowed('view-type')" />
+    <LockMenu v-if="isUIAllowed('view-type')" @click.stop />
 
     <div v-if="isUIAllowed('view-type')" class="dot" />
 
-    <Reload />
+    <Reload @click.stop />
 
     <div class="dot" />
 
-    <AddRow v-if="isUIAllowed('xcDatatableEditable')" />
+    <AddRow v-if="isUIAllowed('xcDatatableEditable')" @click.stop />
 
     <slot name="end" />
   </div>

From 3f1bb1f8cfa102a5071e573f946f22fe4a5c5df1 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 16 Aug 2022 16:52:27 +0530
Subject: [PATCH 63/77] test:CY markers for sidebar items

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

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index ac0010f7d7..c4cdf49d02 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
@@ -11,7 +11,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
   <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.addRow') }} </template>
 
-    <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">
+    <div class="nc-sidebar-right-item hover:after:bg-primary/75 group nc-sidebar-add-row">
       <MdiPlusOutline class="cursor-pointer group-hover:(!text-white)" @click="emits('addRow')" />
     </div>
   </a-tooltip>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
index 917c62bc37..e3b4404a7c 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
@@ -49,7 +49,7 @@ const Icon = computed(() => {
 
 <template>
   <a-dropdown max-width="350" :trigger="['click']">
-    <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
+    <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group nc-sidebar-lock-menu">
       <Icon class="cursor-pointer group-hover:(!text-white)" />
     </div>
 

From d8e4ce078ef1e6de55704da5ce57f081a5153b3d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 14:39:10 +0300
Subject: [PATCH 64/77] fix(gui-v2): dropdown placement

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue    | 5 +----
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue  | 5 +----
 .../nc-gui-v2/pages/[projectType]/[projectId]/index.vue     | 6 +-----
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index c2eaec027a..5199cb5474 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -36,6 +36,7 @@ function onVisibleChange() {
 
     <a-dropdown
       v-model:visible="editColumnDropdown"
+      class="h-full"
       :trigger="['click']"
       placement="bottomRight"
       @visible-change="onVisibleChange"
@@ -62,8 +63,4 @@ function onVisibleChange() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-:deep(.ant-dropdown-trigger) {
-  @apply h-full;
-}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index b05f934a2d..c1a5068775 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -120,6 +120,7 @@ function onVisibleChange() {
 
     <a-dropdown
       v-model:visible="editColumnDropdown"
+      class="h-full"
       :trigger="['click']"
       placement="bottomRight"
       @visible-change="onVisibleChange"
@@ -146,8 +147,4 @@ function onVisibleChange() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-:deep(.ant-dropdown-trigger) {
-  @apply h-full;
-}
 </style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index f0e74f07b2..ec74385639 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -134,7 +134,7 @@ const copyAuthToken = async () => {
             </template>
           </div>
 
-          <a-dropdown v-else :trigger="['click']" placement="bottom">
+          <a-dropdown v-else class="h-full" :trigger="['click']" placement="bottom">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
@@ -287,8 +287,4 @@ const copyAuthToken = async () => {
 :deep(.ant-dropdown-menu-item) {
   @apply !py-0 active:(ring ring-pink-500);
 }
-
-:deep(.ant-dropdown-trigger) {
-  @apply h-full;
-}
 </style>

From d5ed6c9eb2ba19eb453e91af63fad5ef64f824a5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 17:12:51 +0530
Subject: [PATCH 65/77] refactor(gui-v2): load expanded form component only if
 expanded

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/virtual-cell/components/ItemChip.vue   | 2 +-
 .../components/virtual-cell/components/ListChildItems.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 4e463caf62..b185e6e7af 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -43,7 +43,7 @@ export default {
 
     <Suspense>
       <ExpandedForm
-        v-if="!readonly"
+        v-if="!readonly && expandedFormDlg"
         v-model="expandedFormDlg"
         :row="{ row: item }"
         :meta="relatedTableMeta"
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 73dc823451..bf938dd849 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -145,7 +145,7 @@ const expandedFormRow = ref()
 
     <Suspense>
       <ExpandedForm
-        v-if="expandedFormRow"
+        v-if="expandedFormRow && expandedFormDlg"
         v-model="expandedFormDlg"
         :row="{ row: expandedFormRow }"
         :meta="relatedTableMeta"

From 0d0ed7da57aa024c0b1c82087ab1b42c20c57f8a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 17:14:02 +0530
Subject: [PATCH 66/77] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Json.vue       | 1 -
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index c415fb97ad..4677bb68b3 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -41,7 +41,6 @@ const localValue = computed<string | Record<string, any> | undefined>({
   },
 })
 
-
 const clear = () => {
   error = undefined
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index fc1d0c2d89..718f90fd56 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -360,7 +360,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex gap-1 min-w-[55px]">
-                      <div  v-if="!readonly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                      <div v-if="!readonly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
                         {{ rowIndex + 1 }}
                       </div>
                       <div

From 062e2a67cb37d0e7b498fe02f7cc748730deb5cc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 16 Aug 2022 17:22:42 +0530
Subject: [PATCH 67/77] fix(gui-v2): if bt/hm cell value is null/undefined
 treat it as empty array

re #3176

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue    | 8 ++++----
 packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index f565dec83c..075d2f1777 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -49,9 +49,9 @@ await loadRelatedTableMeta()
 
 const localCellValue = computed(() => {
   if (cellValue?.value) {
-    return cellValue?.value
+    return cellValue?.value ?? []
   } else if (isNew.value) {
-    return state?.value?.[column?.value.title as string]
+    return state?.value?.[column?.value.title as string] ?? []
   }
   return []
 })
@@ -83,8 +83,8 @@ const unlinkRef = async (rec: Record<string, any>) => {
       <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="cell.item" :value="cell.value" @unlink="unlinkRef(cell.item)" />
-          <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
-            >more...
+          <span v-if="cellValue?.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/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index ef274f5e62..a5bc3ffbdc 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -49,9 +49,9 @@ await loadRelatedTableMeta()
 
 const localCellValue = computed(() => {
   if (cellValue?.value) {
-    return cellValue?.value
+    return cellValue?.value ?? []
   } else if (isNew.value) {
-    return state?.value?.[column?.value.title as string]
+    return state?.value?.[column?.value.title as string] ?? []
   }
   return []
 })

From ac945713405f2b2c2efccdb1cb338857359435ea Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 20:55:24 +0800
Subject: [PATCH 68/77] fix(gui-v2): wrong import component for formula. ref:
 #3176

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

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index a0f0ebf549..ef95924993 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -16,7 +16,7 @@ const BelongsTo = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.v
 
 const Rollup = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
 
-const Formula = defineAsyncComponent(() => import('../virtual-cell/ManyToMany.vue'))
+const Formula = defineAsyncComponent(() => import('../virtual-cell/Formula.vue'))
 
 const Count = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
 

From 80177ee16d6b58ed3f5bc6f3c61fcb2461134ea3 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 16 Aug 2022 23:18:26 +0530
Subject: [PATCH 69/77] test: CY markers for virtual columns

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/shared-view/Form.vue          | 6 ++++--
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue    | 2 +-
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue      | 4 ++--
 packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue   | 4 ++--
 .../components/virtual-cell/components/ListItems.vue        | 2 +-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index c8ab68b353..2a73cd22f5 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -34,10 +34,10 @@ const formRef = ref()
   <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
     <div class="flex w-2/3 flex-col mt-10">
       <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
-        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">
+        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3 nc-share-form-title" :level="1">
           {{ sharedView.view.heading }}
         </a-typography-title>
-        <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
+        <a-typography class="pl-1 text-sm nc-share-form-desc">{{ sharedView.view.subheading }}</a-typography>
       </div>
 
       <a-form ref="formRef" :model="formState" class="mt-8 pb-12 mb-8 px-3 bg-gray-50 rounded-md">
@@ -59,6 +59,7 @@ const formRef = ref()
           <a-form-item
             v-if="isVirtualCol(field)"
             class="ma-0 gap-0 pa-0"
+            :class="`nc-form-field-${field.title}`"
             :name="field.title"
             :rules="[{ required: field.required, message: `${field.title} is required` }]"
           >
@@ -67,6 +68,7 @@ const formRef = ref()
           <a-form-item
             v-else
             class="ma-0 gap-0 pa-0"
+            :class="`nc-form-field-${field.title}`"
             :name="field.title"
             :rules="[{ required: field.required, message: `${field.title} is required` }]"
           >
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 7fea01946c..e0531b2b3b 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -75,7 +75,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <div v-if="!readonly" class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
       <component
         :is="addIcon"
-        class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
+        class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500) nc-plus"
         @click="listItemsDlg = true"
       />
     </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 075d2f1777..cd32fd0812 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -90,12 +90,12 @@ const unlinkRef = async (rec: Record<string, any>) => {
       </div>
       <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
         <MdiArrowExpand
-          class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
           @click="childListDlg = true"
         />
         <MdiPlus
           v-if="!readonly"
-          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
           @click="listItemsDlg = true"
         />
       </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index a5bc3ffbdc..54e73a81e2 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -89,11 +89,11 @@ const unlinkRef = async (rec: Record<string, any>) => {
       </div>
 
       <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand" @click="childListDlg = true" />
 
         <MdiPlus
           v-if="!readonly"
-          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
           @click="listItemsDlg = true"
         />
       </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 00c8680f09..f7a5d1863e 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -104,7 +104,7 @@ const newRowState = computed(() => {
           size="small"
         ></a-input>
         <div class="flex-1" />
-        <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
+        <MdiReload class="cursor-pointer text-gray-500 nc-reload" @click="loadChildrenExcludedList" />
         <a-button type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">

From d846e538930e738bb070fa85c54a036836f3f508 Mon Sep 17 00:00:00 2001
From: Naveen MR <oof1lab@gmail.com>
Date: Tue, 16 Aug 2022 18:54:03 +0100
Subject: [PATCH 70/77] fix : icons

---
 packages/nc-gui-v2/components.d.ts                          | 3 +++
 .../nc-gui-v2/pages/[projectType]/[projectId]/index.vue     | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 6ff3d158bd..fabc254fa9 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -127,6 +127,7 @@ declare module '@vue/runtime-core' {
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
+    MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
@@ -137,6 +138,7 @@ declare module '@vue/runtime-core' {
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
     MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
+    MdiKeyPlus: typeof import('~icons/mdi/key-plus')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
@@ -155,6 +157,7 @@ declare module '@vue/runtime-core' {
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
+    MdiScriptTextKeyOutline: typeof import('~icons/mdi/script-text-key-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index ec74385639..7e337fe864 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -177,6 +177,8 @@ const copyAuthToken = async () => {
                     </div>
                   </a-menu-item>
 
+                  <a-menu-divider />
+
                   <a-menu-item key="api">
                     <div
                       v-if="isUIAllowed('apiDocs')"
@@ -191,7 +193,7 @@ const copyAuthToken = async () => {
 
                   <a-menu-item key="copy">
                     <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
-                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
+                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Auth Token
                     </div>
                   </a-menu-item>
@@ -215,7 +217,7 @@ const copyAuthToken = async () => {
                   <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <MdiContentCopy class="group-hover:text-pink-500 nc-project-preview" />
+                        <MdiFileEyeOutline class="group-hover:text-pink-500 nc-project-preview" />
                         Preview Project As
 
                         <div class="flex-1" />

From 69dbf96467e127cea89de3928e2cd4ee83f2e3d8 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 17 Aug 2022 00:39:50 +0530
Subject: [PATCH 71/77] test: CY markers for user-mgmt modal

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/tabs/auth/UserManagement.vue        | 14 +++++++-------
 .../tabs/auth/user-management/UsersModal.vue       |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index 45bd40e11f..c888571b86 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -192,7 +192,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <div class="text-gray-500">Reload</div>
           </div>
         </a-button>
-        <a-button v-if="isUIAllowed('newUser')" size="middle" type="primary" ghost @click="onInvite">
+        <a-button v-if="isUIAllowed('newUser')" size="middle" type="primary" ghost class="nc-invite-team" @click="onInvite">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MdiAccountPlusOutline class="mr-1" />
             <div>{{ $t('activity.inviteTeam') }}</div>
@@ -217,13 +217,13 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </div>
       </div>
 
-      <div v-for="(user, index) of users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2">
-        <div class="flex w-4/6 flex-wrap">
+      <div v-for="(user, index) of users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2 nc-user-row">
+        <div class="flex w-4/6 flex-wrap nc-user-email">
           {{ user.email }}
         </div>
 
         <div class="flex w-1/6 justify-center flex-wrap ml-4">
-          <div class="rounded-full px-2 py-1" :style="{ backgroundColor: projectRoleTagColors[user.roles] }">
+          <div class="rounded-full px-2 py-1 nc-user-role" :style="{ backgroundColor: projectRoleTagColors[user.roles] }">
             {{ user.roles }}
           </div>
         </div>
@@ -232,7 +232,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>{{ $t('activity.editUser') }}</span>
             </template>
-            <a-button type="text" class="!rounded-md" @click="onEdit(user)">
+            <a-button type="text" class="!rounded-md nc-user-edit" @click="onEdit(user)">
               <template #icon>
                 <IcRoundEdit class="flex mx-auto h-[1rem] text-gray-500" />
               </template>
@@ -242,7 +242,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>Add user to the project</span>
             </template>
-            <a-button type="text" class="!rounded-md" @click="inviteUser(user)">
+            <a-button type="text" class="!rounded-md nc-user-invite" @click="inviteUser(user)">
               <template #icon>
                 <MdiPlus class="flex mx-auto h-[1.1rem] text-gray-500" />
               </template>
@@ -253,7 +253,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>Remove user from the project</span>
             </template>
-            <a-button type="text" class="!rounded-md" @click="onDelete(user)">
+            <a-button type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
               <template #icon>
                 <MdiDeleteOutline class="flex mx-auto h-[1.1rem] text-gray-500" />
               </template>
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index cac1f3fe8e..29ced03638 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -205,8 +205,8 @@ const clickInviteMore = () => {
                 <div class="flex flex-col w-1/4">
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
-                    <a-select v-model:value="usersData.role">
-                      <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role">
+                    <a-select v-model:value="usersData.role" class="nc-user-roles">
+                      <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
                         <div class="flex flex-row h-full justify-start items-center">
                           <div
                             class="px-2 py-1 flex rounded-full text-xs"

From 465c96a5cc6528bee61e222dbdde06c1766b2a29 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 17 Aug 2022 11:11:30 +0800
Subject: [PATCH 72/77] chore(gui-v2): remove placeholders for *Picker cells

---
 packages/nc-gui-v2/components/cell/DatePicker.vue     | 2 +-
 packages/nc-gui-v2/components/cell/DateTimePicker.vue | 2 +-
 packages/nc-gui-v2/components/cell/TimePicker.vue     | 2 +-
 packages/nc-gui-v2/components/cell/YearPicker.vue     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 5553453741..bda3ee48c2 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -55,7 +55,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : readOnly ? 'Select date' : ''))
+const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index c1895ec2f3..43d507ba4a 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -64,7 +64,7 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     format="YYYY-MM-DD HH:mm"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnly ? 'Select date and time' : ''"
+    :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index a8f42c5163..a41d06c9b1 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -75,7 +75,7 @@ watch(
     use12-hours
     format="HH:mm"
     class="!w-full px-1"
-    :placeholder="isTimeInvalid ? 'Invalid time' : !readOnly ? 'Select time' : ''"
+    :placeholder="isTimeInvalid ? 'Invalid time' : ''"
     :allow-clear="!readOnly"
     :input-read-only="true"
     :open="readOnly ? false : open"
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index dda9255047..a677e0d354 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -53,7 +53,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : readOnly ? 'Select year' : ''))
+const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
 </script>
 
 <template>

From 67be2c000f86addab53e5f1b60a3d22e2d4c7960 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 17 Aug 2022 12:07:47 +0800
Subject: [PATCH 73/77] chore(gui-v2): hide some right toolbar buttons in form
 view

---
 .../components/smartsheet/sidebar/index.vue   | 25 +++++++++++++++----
 .../smartsheet/sidebar/toolbar/index.vue      |  7 ++++++
 .../nc-gui-v2/components/tabs/Smartsheet.vue  | 16 +++++++++---
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 92ab9dd635..a3f5efd14e 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -3,13 +3,29 @@ 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, useElementHover, useRoute, useRouter, useViews, watch } from '#imports'
-import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
+import {
+  ActiveViewInj,
+  IsFormInj,
+  MetaInj,
+  RightSidebarInj,
+  ViewListInj,
+  computed,
+  inject,
+  provide,
+  ref,
+  useElementHover,
+  useRoute,
+  useRouter,
+  useViews,
+  watch,
+} from '#imports'
 
 const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
+const isForm = inject(IsFormInj)
+
 const { views, loadViews } = useViews(meta)
 
 const { isUIAllowed } = useUIPermission()
@@ -109,8 +125,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         </div>
       </Transition>
     </a-tooltip>
-
-    <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
+    <Toolbar v-if="sidebarOpen" :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }" />
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
@@ -132,7 +147,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
           </div>
         </a-tooltip>
 
-        <div class="dot" />
+        <div v-if="!isForm" class="dot" />
       </template>
     </Toolbar>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 0086d4f89d..5418c57772 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -5,9 +5,12 @@ import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
+import { IsFormInj } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
+const isForm = inject(IsFormInj)
+
 const debug = $ref(false)
 
 const clickCount = $ref(0)
@@ -15,6 +18,7 @@ const clickCount = $ref(0)
 
 <template>
   <div
+    v-if="!isForm"
     class="flex gap-2"
     @click="
       () => {
@@ -51,6 +55,9 @@ const clickCount = $ref(0)
 
     <slot name="end" />
   </div>
+  <div v-else>
+    <slot name="start" />
+  </div>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 012e0a4b38..2b632042b7 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -3,7 +3,16 @@ 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'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsFormInj,
+  IsLockedInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  RightSidebarInj,
+  TabMetaInj,
+} from '~/context'
 import type { TabItem } from '~/composables'
 
 const { getMeta, metas } = useMetas()
@@ -27,6 +36,8 @@ watchEffect(async () => {
 
 const reloadEventHook = createEventHook<void>()
 
+const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+
 // todo: move to store
 provide(MetaInj, meta)
 provide(TabMetaInj, tabMeta)
@@ -35,8 +46,7 @@ provide(IsLockedInj, false)
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
 provide(RightSidebarInj, ref(false))
-
-const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+provide(IsFormInj, isForm)
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)

From 9ff49523edb05d9ace27019253d85b898224f3a5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 17 Aug 2022 13:07:06 +0800
Subject: [PATCH 74/77] fix(gui-v2): formula AC tree

---
 packages/nc-gui-v2/utils/NcAutocompleteTree.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
index 23faeaca4f..96f1675a0b 100644
--- a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
+++ b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
@@ -37,6 +37,7 @@ export class NcAutocompleteTree {
     }
     root.value = root.value || []
     root.value.push(word)
+    root.isLeaf = true
   }
 
   find(word: string) {
@@ -48,12 +49,11 @@ export class NcAutocompleteTree {
         return null // if not found return null
       }
     }
-
     return root // return the root where it ends search
   }
 
   traverse(root: Node) {
-    if (root.value && root.value.length) {
+    if (root.isLeaf) {
       this.suggestions.push(...root.value)
     }
 
@@ -70,6 +70,8 @@ export class NcAutocompleteTree {
       return this.suggestions
     } // cannot suggest anything
 
+    this.suggestions.push(...root.value)
+
     const children = root.children
 
     let spread = 0

From 22f082f3a560e7bb7dbc42f815aea176c41d3601 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 17 Aug 2022 14:34:09 +0800
Subject: [PATCH 75/77] fix(gui-v2): remove false from useViewColumns

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 4fa177a529..5a541e8a65 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -48,7 +48,7 @@ const view = inject(ActiveViewInj)
 
 const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, false, async () => {
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, async () => {
   await loadFormView()
   setFormData()
 })

From 836fb69a39164e22e1ccd0fe8fce6adfacc77b98 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 17 Aug 2022 10:59:35 +0300
Subject: [PATCH 76/77] fix(gui-v2): typo on RollupOptions

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/RollupOptions.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
index 91ba6ee0c0..f048f0176d 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
@@ -43,7 +43,7 @@ const aggrFunctionsList = [
 ]
 
 if (!vModel.value.fk_relation_column_id) vModel.value.fk_relation_column_id = null
-if (!vModel.value.fk_rollup_column_id) vModel.value.value.fk_rollup_column_id = null
+if (!vModel.value.fk_rollup_column_id) vModel.value.fk_rollup_column_id = null
 if (!vModel.value.rollup_function) vModel.value.rollup_function = null
 
 const refTables = $computed(() => {

From 6248ab1a5584af07070870e03495b515626fc582 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 17 Aug 2022 11:05:09 +0300
Subject: [PATCH 77/77] fix(gui-v2): remove placeholder for select cells

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue  | 1 -
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index dd114415a4..004f3e7eb1 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -129,7 +129,6 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
-    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :show-arrow="!readOnly"
     :show-search="false"
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 5b4881126b..72078b651e 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -69,7 +69,6 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     class="w-full"
     :allow-clear="!column.rqd && active"
-    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :open="isOpen"
     :disabled="readOnly"