Merge pull request #3268 from nocodb/fix/gui-v2-gallery

fix(gui-v2): gallery view

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 {

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))

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'
 
@@ -11,14 +12,21 @@ interface Attachment {
 
 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([]))
 
@@ -49,12 +57,23 @@ const attachments = (record: any): Array<Attachment> => {
     return []
   }
 }
+
+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" @click="expandForm(record)">
         <Row :row="record">
           <a-card hoverable class="!rounded-lg h-full">
             <template #cover>
@@ -84,8 +103,8 @@ 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" />
-                  <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
+                  <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" :read-only="true" />
                 </template>
               </div>
             </div>
@@ -94,6 +113,13 @@ const attachments = (record: any): Array<Attachment> => {
       </div>
     </div>
     <SmartsheetPagination />
+    <SmartsheetExpandedForm
+      v-if="expandedFormRow && expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+      :meta="meta"
+    />
   </div>
 </template>
 

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