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/49] 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/49] 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/49] 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/49] 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/49] 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 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 06/49] 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 2112cc7d1129847605ae07cdb304675169377731 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 12:07:23 +0530
Subject: [PATCH 07/49] fix/Added users reloading after user creation

---
 .../components/tabs/auth/user-management/UsersModal.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 d557eeea40..cac1f3fe8e 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
@@ -85,7 +85,6 @@ const saveUser = async () => {
         project_id: project.value.id,
         projectName: project.value.title,
       })
-      emit('reload')
       emit('closed')
     } else {
       const res = await $api.auth.projectUserAdd(project.value.id, {
@@ -96,6 +95,7 @@ const saveUser = async () => {
       })
       usersData.invitationToken = res.invite_token
     }
+    emit('reload')
     message.success('Successfully updated the user details')
   } catch (e: any) {
     console.error(e)

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 08/49] 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 09/49] 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 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 10/49] 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 11/49] 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 12/49] 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 67bebbf32414c597da3b7b2e269e99a6599dea4e Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 16 Aug 2022 12:46:49 +0530
Subject: [PATCH 13/49] test: CY marker for sidebar toggle

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index e9e0e00b93..92ab9dd635 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -97,13 +97,13 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         >
           <MaterialSymbolsChevronRightRounded
             v-if="sidebarOpen"
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
             @click="sidebarOpen = false"
           />
 
           <MaterialSymbolsChevronLeftRounded
             v-else
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
             @click="sidebarOpen = true"
           />
         </div>

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 14/49] 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 15/49] 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 16/49] 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 17/49] 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 18/49] 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 19/49] 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 20/49] 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 21/49] 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 22/49] 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 23/49] 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 24/49] 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 25/49] 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 26/49] 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 27/49] 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 28/49] 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 29/49] 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 30/49] 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 31/49] 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 32/49] 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 33/49] 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 34/49] 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 35/49] 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 36/49] 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 37/49] 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 38/49] 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 39/49] 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 40/49] 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 41/49] 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 42/49] 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 43/49] 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 44/49] 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 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 45/49] 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 46/49] 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 47/49] 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 48/49] 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 49/49] 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">