From 443d5824bd8bff9d87dccb8c7b97e7d876dd6231 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 20 Aug 2022 23:59:41 +0300
Subject: [PATCH 1/5] fix(gui-v2): gallery view reload hook

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 6da33d8c37..4c5a6bc4e0 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -11,6 +11,7 @@ interface Attachment {
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
 
 const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
@@ -49,6 +50,10 @@ const attachments = (record: any): Array<Attachment> => {
     return []
   }
 }
+
+reloadViewDataHook?.on(async () => {
+  await loadData()
+})
 </script>
 
 <template>
@@ -84,7 +89,7 @@ const attachments = (record: any): Array<Attachment> => {
               <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
                 <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
                 <template v-else>
-                  <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" />
+                  <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" :row="record" />
                   <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
                 </template>
               </div>

From 682f938d36a79ba8cd7d87685b7171aa65614e2c Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 21 Aug 2022 02:07:00 +0300
Subject: [PATCH 2/5] fix(gui-v2): attachment prop warning

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

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 7d534b761a..2d21896300 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -17,7 +17,7 @@ import {
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
-  rowIndex: number
+  rowIndex?: number
 }
 
 interface Emits {

From c5232f188122141e29be309490a5bfc3292111bb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 21 Aug 2022 02:14:43 +0300
Subject: [PATCH 3/5] feat(gui-v2): gallery expanded form

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  7 +++++
 .../components/smartsheet/Gallery.vue         | 27 ++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 4175fb2b4c..26b9087cdd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -23,6 +23,7 @@ interface Props {
   column: ColumnType
   modelValue: any
   editEnabled: boolean
+  readOnly?: boolean
   rowIndex?: number
   active?: boolean
   virtual?: boolean
@@ -38,12 +39,18 @@ const active = toRef(props, 'active', false)
 
 const virtual = toRef(props, 'virtual', false)
 
+const readOnly = toRef(props, 'readOnly', undefined)
+
 provide(ColumnInj, column)
 
 provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
 provide(ActiveCellInj, active)
 
+if (readOnly?.value) {
+  provide(ReadonlyInj, readOnly.value)
+}
+
 const isForm = inject(IsFormInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 4c5a6bc4e0..f271b87fc6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -2,6 +2,7 @@
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, provide, useViewData } from '#imports'
 import Row from '~/components/smartsheet/Row.vue'
+import type { Row as RowType } from '~/composables'
 import { ActiveViewInj, ChangePageInj, FieldsInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
 import ImageIcon from '~icons/mdi/file-image-box'
 
@@ -13,13 +14,19 @@ const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref<RowType>()
+const expandedFormRowState = ref<Record<string, any>>()
+
 const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
+const { isUIAllowed } = useUIPermission()
+
 provide(IsFormInj, ref(false))
 provide(IsGridInj, false)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
 
@@ -54,12 +61,19 @@ const attachments = (record: any): Array<Attachment> => {
 reloadViewDataHook?.on(async () => {
   await loadData()
 })
+
+const expandForm = (row: RowType, state?: Record<string, any>) => {
+  if (!isUIAllowed('xcDatatableEditable')) return
+  expandedFormRow.value = row
+  expandedFormRowState.value = state
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
   <div class="flex flex-col h-full w-full">
     <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-4 my-4 px-3 overflow-auto">
-      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
+      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col" @dblclick="expandForm(record)">
         <Row :row="record">
           <a-card hoverable class="!rounded-lg h-full">
             <template #cover>
@@ -90,7 +104,7 @@ reloadViewDataHook?.on(async () => {
                 <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
                 <template v-else>
                   <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" :row="record" />
-                  <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
+                  <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" :read-only="true" />
                 </template>
               </div>
             </div>
@@ -99,6 +113,13 @@ reloadViewDataHook?.on(async () => {
       </div>
     </div>
     <SmartsheetPagination />
+    <SmartsheetExpandedForm
+      v-if="expandedFormRow && expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+      :meta="meta"
+    />
   </div>
 </template>
 

From e82fa79658dc5c7040f1fac3bb557d70d325bd20 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 21 Aug 2022 12:02:32 +0300
Subject: [PATCH 4/5] fix(gui-v2): isAnyFieldHidden indicator

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/composables/useViewColumns.ts   | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 9923839ed0..c3dd6a5b38 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -23,6 +23,18 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     () => isPublic.value || !isUIAllowed('hideAllColumns') || !isUIAllowed('showAllColumns') || isSharedBase.value,
   )
 
+  const metaColumnById = computed<Record<string, ColumnType>>(() => {
+    if (!meta.value?.columns) return {}
+
+    return meta.value?.columns?.reduce(
+      (acc: ColumnType, curr: ColumnType) => ({
+        ...acc,
+        [curr.id!]: curr,
+      }),
+      {} as any,
+    )
+  })
+
   const loadViewColumns = async () => {
     if (!meta || !view) return
 
@@ -48,7 +60,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
             fk_column_id: column.id,
             ...currentColumnField,
             order: currentColumnField.order || order++,
-            system: isSystemColumn(currentColumnField.type || false),
+            system: isSystemColumn(metaColumnById?.value?.[currentColumnField.fk_column_id!]),
           }
         })
         .sort((a: Field, b: Field) => a.order - b.order)
@@ -129,18 +141,6 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
 
-  const metaColumnById = computed<Record<string, ColumnType>>(() => {
-    if (!meta.value?.columns) return {}
-
-    return meta.value?.columns?.reduce(
-      (acc: ColumnType, curr: ColumnType) => ({
-        ...acc,
-        [curr.id!]: curr,
-      }),
-      {} as any,
-    )
-  })
-
   const showSystemFields = computed({
     get() {
       // todo: show_system_fields missing from ViewType

From 56ccba236db483f6c70c949a399933d3d0c2845a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 21 Aug 2022 13:43:11 +0300
Subject: [PATCH 5/5] fix(gui-v2): use click instead of dblclick to expand
 gallery card

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index f271b87fc6..91538a992d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -73,7 +73,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
 <template>
   <div class="flex flex-col h-full w-full">
     <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-4 my-4 px-3 overflow-auto">
-      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col" @dblclick="expandForm(record)">
+      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col" @click="expandForm(record)">
         <Row :row="record">
           <a-card hoverable class="!rounded-lg h-full">
             <template #cover>