From 990d6ca1db83311bc42388b561b15a76e4990ee4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:07:54 +0530
Subject: [PATCH 1/9] fix(gui-v2): fields menu showall/hideall bug

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

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 076303d07a..55cc86b8e9 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -107,11 +107,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           </a-checkbox>
         </div>
         <div class="p-2 flex gap-2" @click.stop>
-          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="showAll">
+          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="showAll()">
             <!-- Show All -->
             {{ $t('general.showAll') }}
           </a-button>
-          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
+          <a-button size="small" class="!text-xs text-gray-500 text-capitalize" @click.stop="hideAll()">
             <!-- Hide All -->
             {{ $t('general.hideAll') }}
           </a-button>
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 9558a15985..c0fc06149e 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -41,7 +41,6 @@ export function useViewColumns(
           [curr.fk_column_id]: curr,
         }
       }, {})
-
       fields.value = meta.value?.columns
         ?.map((column) => {
           const currentColumnField = fieldById[column.id!] || {}

From 6809c022001f61f7d3717eb5644695d2376e741f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:13:23 +0530
Subject: [PATCH 2/9] refactor(gui-v2): inactive tab text color

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 309a188b47..f384ad639c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -174,7 +174,7 @@ const icon = (tab: TabItem) => {
         @apply font-weight-medium;
       }
       & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
-        @apply bg-gray-100;
+        @apply bg-gray-100 text-gray-500;
       }
     }
   }

From 1bb01fbd56b7b9fe157c4798586845e9ee2ba89e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:15:18 +0530
Subject: [PATCH 3/9] refactor(gui-v2): remove add table and menu down icons

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

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 551c1d4529..931d18b861 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -165,17 +165,6 @@ const activeTable = computed(() => {
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
           </span>
-          <MdiPlus
-            v-if="isUIAllowed('treeview-add-button')"
-            v-t="['c:table:create:navdraw']"
-            class="transform text-gray-500 hover:(text-pink-500 scale-105) nc-btn-tbl-add"
-            @click.stop="tableCreateDlg = true"
-          />
-
-          <MdiMenuDown
-            class="transition-transform !duration-100 text-gray-500 hover:text-pink-500"
-            :class="{ 'transform rotate-180': showTableList }"
-          />
         </div>
         <div style="direction: ltr" class="flex-1">
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">

From 1693aa0b46621fd0332f873bcc0aa25b6cf9b3e6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:20:17 +0530
Subject: [PATCH 4/9] refactor(gui-v2): align pagination component at bottom

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index f384ad639c..f659ea0410 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -144,7 +144,7 @@ const icon = (tab: TabItem) => {
           </template>
         </a-tabs>
       </div>
-      <div class="w-full min-h-[300px] grow">
+      <div class="w-full min-h-[300px] flex-grow">
         <NuxtPage />
       </div>
     </div>

From afb097604b39c0d91760a8655c557a07d3adb0bd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:24:19 +0530
Subject: [PATCH 5/9] refactor(gui-v2): pagination inactive items color

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 3f20bf6b71..4dc0540034 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -19,7 +19,7 @@ const page = computed({
 
 <template>
   <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
+    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
 
     <div class="flex-1" />
 
@@ -51,4 +51,11 @@ const page = computed({
   line-height: 21px !important;
   @apply text-sm;
 }
+:deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
+  line-height: 21px !important;
+  @apply text-sm text-gray-500;
+}
+:deep(.ant-pagination-item-link){
+  @apply text-gray-500;
+}
 </style>

From b52045e0a9bf93ece232a2a9c6f9a7a456a4d55e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:33:20 +0530
Subject: [PATCH 6/9] feat(gui-v2): sticky grid view header

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 76939b0c64..9391040ecf 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -298,7 +298,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-            <tr class="nc-grid-header">
+            <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
                 <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
@@ -420,9 +420,9 @@ const expandForm = (row: Row, state: Record<string, any>) => {
               </template>
             </SmartsheetRow>
 
-            <!-- 
+            <!--
               TODO: add relationType !== 'bt' ?
-              v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'"> 
+              v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
             -->
             <tr v-if="!isView && !isLocked && !isPublicView && isUIAllowed('xcDatatableEditable')">
               <td
@@ -554,6 +554,11 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 }
 
 .nc-grid-header {
+  position: sticky;
+  top:-1px;
+
+  @apply z-1;
+
   &:hover {
     .nc-no-label {
       @apply hidden;

From b8ae47f7ae16a1039a595361ebe51645f979f6b2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:48:00 +0530
Subject: [PATCH 7/9] feat(gui-v2): row number cell correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 52 ++++++++++---------
 .../components/smartsheet/Pagination.vue      |  6 ++-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 9391040ecf..57be5f45dd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -300,7 +300,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
-                <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
+                <div class="w-full h-full bg-gray-100 flex min-w-[80px] pl-5 pr-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -346,33 +346,30 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
-                  <td key="row-index" class="caption nc-grid-cell">
-                    <div class="align-center flex w-[80px]">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
+                    <div class="align-center flex min-w-[80px]">
                       <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
                       <div
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
-                        <span class="flex-1" />
-                        <div class="nc-expand">
-                          <span
-                            v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs"
-                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                      </div>
+                      <span class="flex-1" />
+                      <div 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)"
+                          :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                          @click="expandForm(row, state)"
+                        >
+                          {{ row.rowMeta.commentCount }}
+                        </span>
+                        <div v-else class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                          <MdiArrowExpand
+                            class="select-none transform hover:(text-pink-500 scale-120)"
                             @click="expandForm(row, state)"
-                          >
-                            {{ row.rowMeta.commentCount }}
-                          </span>
-                          <div
-                            v-else
-                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"
-                          >
-                            <MdiArrowExpand
-                              class="select-none transform hover:(text-pink-500 scale-120)"
-                              @click="expandForm(row, state)"
-                            />
-                          </div>
+                          />
                         </div>
                       </div>
                     </div>
@@ -482,7 +479,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
     position: relative;
   }
 
-  td > div {
+  td:not(:first-child) > div {
     overflow: hidden;
     @apply flex align-center h-auto px-1;
   }
@@ -532,10 +529,15 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 .nc-grid-row {
   .nc-row-expand-and-checkbox {
-    @apply w-full items-center justify-between p-1;
+    @apply w-full items-center justify-between;
   }
   .nc-expand {
-    @apply hidden;
+    &:not(.nc-comment) {
+      @apply hidden;
+    }
+    &.nc-comment {
+      display: flex;
+    }
   }
 
   &:hover {
@@ -555,7 +557,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 .nc-grid-header {
   position: sticky;
-  top:-1px;
+  top: -1px;
 
   @apply z-1;
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 4dc0540034..3c711d0e15 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -19,7 +19,9 @@ const page = computed({
 
 <template>
   <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
+    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500">
+      {{ count }} record{{ count !== 1 ? 's' : '' }}
+    </span>
 
     <div class="flex-1" />
 
@@ -55,7 +57,7 @@ const page = computed({
   line-height: 21px !important;
   @apply text-sm text-gray-500;
 }
-:deep(.ant-pagination-item-link){
+:deep(.ant-pagination-item-link) {
   @apply text-gray-500;
 }
 </style>

From 8c5bd64990c21d39a14e281d33b47e41cea32bcb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:53:05 +0530
Subject: [PATCH 8/9] refactor(gui-v2): expanded form ui corrections

- space between label and cell
- comment section take full height

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/TreeView.vue        | 2 --
 .../components/smartsheet/expanded-form/Header.vue          | 2 +-
 .../nc-gui-v2/components/smartsheet/expanded-form/index.vue | 6 +++---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 931d18b861..2d3775cc60 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -29,8 +29,6 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
-const showTableList = ref(true)
-
 const tableCreateDlg = ref(false)
 
 let key = $ref(0)
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index d7d7f536ad..3c0f54621d 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -54,7 +54,7 @@ const iconColor = '#1890ff'
       v-if="isUIAllowed('rowComments')"
       class="cursor-pointer select-none"
       @click="commentsDrawer = !commentsDrawer"
-    />>
+    />
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index a98dfcb4b9..6d46b8d4ca 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -82,15 +82,15 @@ const isExpanded = useVModel(props, 'modelValue', emits)
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
-    <a-card class="!bg-gray-100 min-h-[70vh]">
-      <div class="flex h-full nc-form-wrapper items-stretch">
+    <a-card class="!bg-gray-100">
+      <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
             <div v-for="col in fields" :key="col.title" class="mt-2 py-2">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
 
-              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
+              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center mt-2">
                 <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
                 <SmartsheetCell
                   v-else

From 91e2b06a4ef437c5572dd30ad65f37b0c001d7da Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 14 Aug 2022 00:04:08 +0530
Subject: [PATCH 9/9] refactor(gui-v2): use edit and readonly injection keys
 properly

- add `undefined` type for all cell value since initially(new row) model value for all cell will be undefined

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Currency.vue       | 2 +-
 packages/nc-gui-v2/components/cell/DatePicker.vue     | 2 +-
 packages/nc-gui-v2/components/cell/DateTimePicker.vue | 2 +-
 packages/nc-gui-v2/components/cell/Decimal.vue        | 2 +-
 packages/nc-gui-v2/components/cell/Duration.vue       | 2 +-
 packages/nc-gui-v2/components/cell/Email.vue          | 2 +-
 packages/nc-gui-v2/components/cell/Float.vue          | 2 +-
 packages/nc-gui-v2/components/cell/Integer.vue        | 2 +-
 packages/nc-gui-v2/components/cell/Json.vue           | 7 +++++--
 packages/nc-gui-v2/components/cell/MultiSelect.vue    | 2 +-
 packages/nc-gui-v2/components/cell/Percent.vue        | 2 +-
 packages/nc-gui-v2/components/cell/Rating.vue         | 2 +-
 packages/nc-gui-v2/components/cell/SingleSelect.vue   | 2 +-
 packages/nc-gui-v2/components/cell/Text.vue           | 2 +-
 packages/nc-gui-v2/components/cell/TextArea.vue       | 2 +-
 packages/nc-gui-v2/components/cell/TimePicker.vue     | 2 +-
 packages/nc-gui-v2/components/cell/Url.vue            | 2 +-
 packages/nc-gui-v2/components/cell/YearPicker.vue     | 2 +-
 packages/nc-gui-v2/components/smartsheet/Grid.vue     | 2 +-
 packages/nc-gui-v2/context/index.ts                   | 3 +--
 20 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index fa6c0a6b22..789ef8457e 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 const props = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 412626ddff..2ff27e5000 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 8b76ef12c2..22e15ed384 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index c29f365437..bada15abc1 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null | string
+  modelValue: number | null | string | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 5182e3514f..b267e13dce 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -11,7 +11,7 @@ import {
 } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index e59cb95992..f85ef871ee 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 09f23fa791..ff9b02b877 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 2fe13c4d0c..f3686409c1 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | undefined
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 14297ffa9f..3e621b870f 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -2,6 +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'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -15,7 +16,9 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj, ref(false))
+
+const readonly = inject(ReadonlyInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 
@@ -87,7 +90,7 @@ watch(editEnabled, () => {
 
 <template>
   <component :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
-    <div v-if="editEnabled" class="flex flex-col w-full">
+    <div v-if="editEnabled && !readonly" class="flex flex-col w-full">
       <div class="flex flex-row justify-between pt-1 pb-2">
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
           <CilFullscreenExit v-if="isExpanded" class="h-2.5" />
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 4a6e90b403..7450b851cd 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -5,7 +5,7 @@ import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#import
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue?: string | string[]
+  modelValue?: string | string[] | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index 0aa05f2f40..45655e9657 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -2,7 +2,7 @@
 import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 7a5c0fdaf4..7125c6051e 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -2,7 +2,7 @@
 import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue?: number | null
+  modelValue?: number | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 9dd259f97c..35325a777d 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -4,7 +4,7 @@ import type { SelectOptionType } from 'nocodb-sdk'
 import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue?: string
+  modelValue?: string | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 76a8689d5a..9636897ff6 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, inject } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const props = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index 47fdbed547..73b193f35b 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index 81f5318733..a1fccd25aa 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue?: string | null
+  modelValue?: string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 9ae7a1251a..cfbfd0727c 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | null | undefined
 }
 
 const { modelValue: value } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 13d1d81fd7..39ca6edaf1 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '#imports'
 
 interface Props {
-  modelValue: number | string | null
+  modelValue: number | string | null | undefined
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 57be5f45dd..81f2b65a8e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -92,7 +92,7 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
-provide(ReadonlyInj, isUIAllowed('xcDatatableEditable'))
+provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
   await loadData()
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index a20176ca5a..d955c93802 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -22,6 +22,5 @@ export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
-
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
-export const EditModeInj: InjectionKey<ComputedRef<boolean>> = Symbol('edit-mode-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')