Merge pull request #3379 from nocodb/feat/gallery-rework

feat: gallery rework

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { ColumnType } from 'nocodb-sdk'
-import { isVirtualCol } from 'nocodb-sdk'
+import type { ColumnType, GalleryType } from 'nocodb-sdk'
+import { UITypes, ViewTypes, isVirtualCol } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
+import type { SelectProps } from 'ant-design-vue'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -31,7 +32,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const { $e } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
 const {
   showSystemFields,
@@ -82,6 +83,32 @@ const onMove = (event: { moved: { newIndex: number } }) => {
   $e('a:fields:reorder')
 }
 
+const coverImageColumnId = computed({
+  get: () =>
+    activeView.value?.type === ViewTypes.GALLERY ? (activeView.value?.view as GalleryType).fk_cover_image_col_id : undefined,
+  set: async (val) => {
+    if (val && activeView.value.type === ViewTypes.GALLERY && activeView.value.id && activeView.value.view) {
+      await $api.dbView.galleryUpdate(activeView.value.id, {
+        ...activeView.value.view,
+        fk_cover_image_col_id: val,
+      })
+      ;(activeView.value?.view as GalleryType).fk_cover_image_col_id = val
+      reloadDataHook.trigger()
+    }
+  },
+})
+
+const coverOptions = computed<SelectProps['options']>(() => {
+  return fields.value
+    ?.filter((el) => el.fk_column_id && metaColumnById.value[el.fk_column_id].uidt === UITypes.Attachment)
+    .map((field) => {
+      return {
+        value: field.fk_column_id,
+        label: field.title,
+      }
+    })
+})
+
 const getIcon = (c: ColumnType) =>
   h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
     columnMeta: c,
@@ -107,6 +134,9 @@ const getIcon = (c: ColumnType) =>
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
         @click.stop
       >
+        <a-card v-if="activeView.type === ViewTypes.GALLERY" size="small" title="Cover image">
+          <a-select v-model:value="coverImageColumnId" class="w-full" :options="coverOptions" @click.stop></a-select>
+        </a-card>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>

packages/nc-gui-v2/components/smartsheet/Gallery.vue

@@ -3,7 +3,17 @@ 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 {
+  ActiveViewInj,
+  ChangePageInj,
+  FieldsInj,
+  IsFormInj,
+  IsGridInj,
+  MetaInj,
+  OpenNewRecordFormHookInj,
+  PaginationDataInj,
+  ReadonlyInj,
+} from '~/context'
 import ImageIcon from '~icons/mdi/file-image-box'
 
 interface Attachment {
@@ -13,12 +23,21 @@ interface Attachment {
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
 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 {
+  loadData,
+  paginationData,
+  formattedData: data,
+  loadGalleryData,
+  galleryData,
+  changePage,
+  addEmptyRow,
+} = useViewData(meta, view as any)
 
 const { isUIAllowed } = useUIPermission()
 
@@ -30,7 +49,15 @@ provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
 
-const coverImageColumn = $(computed(() => fields.value.find((col) => col.id === galleryData.value?.fk_cover_image_col_id)))
+const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
+
+const coverImageColumn: any = $(
+  computed(() =>
+    meta?.value.columnsById
+      ? meta.value.columnsById[galleryData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
+      : {},
+  ),
+)
 
 watch(
   [meta, view],
@@ -52,14 +79,21 @@ const isRowEmpty = (record: any, col: any) => {
 
 const attachments = (record: any): Array<Attachment> => {
   try {
-    return JSON.parse(record.row[coverImageColumn?.title]) ?? []
+    return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
   } catch (e) {
     return []
   }
 }
 
+const reloadAttachments = ref(false)
+
 reloadViewDataHook?.on(async () => {
   await loadData()
+  await loadGalleryData()
+  reloadAttachments.value = true
+  nextTick(() => {
+    reloadAttachments.value = false
+  })
 })
 
 const expandForm = (row: RowType, state?: Record<string, any>) => {
@@ -68,20 +102,43 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
   expandedFormRowState.value = state
   expandedFormDlg.value = true
 }
+
+const expandFormClick = async (e: MouseEvent, row: RowType) => {
+  const target = e.target as HTMLElement
+  if (target && !target.closest('.gallery-carousel')) {
+    expandForm(row)
+  }
+}
+
+openNewRecordFormHook?.on(async () => {
+  const newRow = await addEmptyRow()
+  expandForm(newRow)
+})
 </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" @click="expandForm(record)">
+  <div class="flex flex-col h-full w-full overflow-auto">
+    <div class="nc-gallery-container grid w-full min-h-0 gap-2 my-4 px-3">
+      <div v-for="record in data" :key="`record-${record.row.id}`">
         <Row :row="record">
-          <a-card hoverable class="!rounded-lg h-full">
+          <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all" @click="expandFormClick($event, record)">
             <template #cover>
-              <a-carousel v-if="attachments(record).length !== 0" autoplay>
+              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
+                <template #customPaging>
+                  <a>
+                    <div class="pt-[12px]"><div></div></div>
+                  </a>
+                </template>
+                <template #prevArrow>
+                  <div style="z-index: 1"></div>
+                </template>
+                <template #nextArrow>
+                  <div style="z-index: 1"></div>
+                </template>
                 <img
-                  v-for="(attachment, index) in attachments(record)"
-                  :key="index"
-                  class="h-52 rounded-t-lg"
+                  v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)"
+                  :key="`carousel-${record.row.id}-${index}`"
+                  class="h-52"
                   :src="attachment.url"
                 />
               </a-carousel>
@@ -89,8 +146,8 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
             </template>
 
             <div
-              v-for="(col, colIndex) in fields"
-              :key="colIndex"
+              v-for="col in fieldsWithoutCover"
+              :key="`record-${record.row.id}-${col.id}`"
               class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
             >
               <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
@@ -112,6 +169,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
         </Row>
       </div>
     </div>
+    <div class="flex-1" />
     <SmartsheetPagination />
     <SmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"
@@ -125,6 +183,45 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
 
 <style scoped>
 .nc-gallery-container {
-  overflow: auto;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+}
+:depp(.slick-dots li button) {
+  background-color: black;
+}
+.ant-carousel.gallery-carousel :deep(.slick-dots) {
+  position: relative;
+  height: auto;
+  bottom: 0px;
+}
+.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
+  background: #000;
+  border: 0;
+  border-radius: 1px;
+  color: transparent;
+  cursor: pointer;
+  display: block;
+  font-size: 0;
+  height: 3px;
+  opacity: .3;
+  outline: none;
+  padding: 0;
+  transition: all .5s;
+  width: 100%;
+}
+.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
+  opacity: 1;
+}
+.ant-carousel.gallery-carousel :deep(.slick-prev) {
+  left: 0;
+  height: 100%;
+  top: 12px;
+  width: 50%;
+}
+.ant-carousel.gallery-carousel :deep(.slick-next) {
+  right: 0;
+  height: 100%;
+  top: 12px;
+  width: 50%;
 }
 </style>

packages/nocodb-sdk/src/lib/Api.ts

@@ -134,6 +134,8 @@ export interface ViewType {
   uuid?: string;
   show_system_fields?: boolean;
   lock_type?: 'collaborative' | 'locked' | 'personal';
+  type?: number;
+  view?: FormType | GridType | GalleryType;
 }
 
 export interface TableInfoType {

packages/nocodb/src/lib/models/View.ts

@@ -337,9 +337,20 @@ export default class View implements ViewType {
     }
     {
       let order = 1;
+      let galleryShowLimit = 0;
       for (const vCol of columns) {
         let show = 'show' in vCol ? vCol.show : true;
 
+        if (view.type === ViewTypes.GALLERY) {
+          const galleryView = await GalleryView.get(view_id, ncMeta);
+          if (vCol.id === galleryView.fk_cover_image_col_id || vCol.pv || galleryShowLimit < 3) {
+            show = true;
+            galleryShowLimit++;
+          } else {
+            show = false;
+          }
+        }
+
         // if columns is list of virtual columns then get the parent column
         const col = vCol.fk_column_id
           ? await Column.get({ colId: vCol.fk_column_id }, ncMeta)

scripts/sdk/swagger.json

@@ -6183,6 +6183,22 @@
               "locked",
               "personal"
             ]
+          },
+          "type": {
+            "type": "number"
+          },
+          "view": {
+            "oneOf": [
+              {
+                "$ref": "#/components/schemas/Form"
+              },
+              {
+                "$ref": "#/components/schemas/Grid"
+              },
+              {
+                "$ref": "#/components/schemas/Gallery"
+              }
+            ]
           }
         }
       },