From 5e60516d168fdf88e586a0f3bed95cf506e282ae Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 27 Aug 2022 17:01:10 +0300
Subject: [PATCH 01/12] fix: add new row from gallery view

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet/Gallery.vue         | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 91538a992d..a62afae855 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/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()
 
@@ -68,6 +87,11 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
   expandedFormRowState.value = state
   expandedFormDlg.value = true
 }
+
+openNewRecordFormHook?.on(async () => {
+  const newRow = await addEmptyRow()
+  expandForm(newRow)
+})
 </script>
 
 <template>

From d7df473be867632ba78ab7d9961729050fbabee7 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 28 Aug 2022 16:49:01 +0300
Subject: [PATCH 02/12] fix: gallery view css

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet/Gallery.vue         | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index a62afae855..17143a9abe 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -95,28 +95,19 @@ openNewRecordFormHook?.on(async () => {
 </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 class="flex flex-col h-full w-full overflow-auto">
+    <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-x-2 my-4 px-3">
       <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">
+          <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all">
             <template #cover>
               <a-carousel v-if="attachments(record).length !== 0" autoplay>
-                <img
-                  v-for="(attachment, index) in attachments(record)"
-                  :key="index"
-                  class="h-52 rounded-t-lg"
-                  :src="attachment.url"
-                />
+                <img v-for="(attachment, index) in attachments(record)" :key="index" class="h-52" :src="attachment.url" />
               </a-carousel>
               <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
             </template>
 
-            <div
-              v-for="(col, colIndex) in fields"
-              :key="colIndex"
-              class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
-            >
+            <div v-for="col in fields" :key="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">
                 <div class="w-full text-gray-600">
                   <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
@@ -149,6 +140,6 @@ openNewRecordFormHook?.on(async () => {
 
 <style scoped>
 .nc-gallery-container {
-  overflow: auto;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
 </style>

From 25d47c1dcae4e9ac33e426298f4086da70d6f590 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 28 Aug 2022 21:04:46 +0300
Subject: [PATCH 03/12] fix: use columnsById instead of find in fields

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 17143a9abe..fc8ab9e6bf 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -49,7 +49,13 @@ 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 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],
@@ -71,7 +77,7 @@ const isRowEmpty = (record: any, col: any) => {
 
 const attachments = (record: any): Array<Attachment> => {
   try {
-    return JSON.parse(record.row[coverImageColumn?.title]) ?? []
+    return coverImageColumn?.title ? JSON.parse(record.row[coverImageColumn.title]) : []
   } catch (e) {
     return []
   }

From 8d4cf85c15b2b4ce429cf1184afd02ffb315da49 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 28 Aug 2022 21:58:03 +0300
Subject: [PATCH 04/12] feat: initial field count for gallery view

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/models/View.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index c51fed4aaf..19504033ad 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/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)

From 728930c77f480de96c62eded4c145a2453084e29 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 28 Aug 2022 21:59:20 +0300
Subject: [PATCH 05/12] feat: hide cover field from card

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index fc8ab9e6bf..75b249c440 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -49,6 +49,8 @@ provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 const fields = inject(FieldsInj, ref([]))
 
+const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
+
 const coverImageColumn: any = $(
   computed(() =>
     meta?.value.columnsById
@@ -102,7 +104,7 @@ openNewRecordFormHook?.on(async () => {
 
 <template>
   <div class="flex flex-col h-full w-full overflow-auto">
-    <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-x-2 my-4 px-3">
+    <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-2 my-4 px-3">
       <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 overflow-hidden break-all">
@@ -113,7 +115,11 @@ openNewRecordFormHook?.on(async () => {
               <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
             </template>
 
-            <div v-for="col in fields" :key="col.id" class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full">
+            <div
+              v-for="col in fieldsWithoutCover"
+              :key="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">
                 <div class="w-full text-gray-600">
                   <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />

From 7bd580158dfbe58460ce1a8ae05ae1d4d907934a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 12:07:58 +0300
Subject: [PATCH 06/12] fix: gallery carousel

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 75b249c440..25a7bbc5a6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -79,7 +79,7 @@ const isRowEmpty = (record: any, col: any) => {
 
 const attachments = (record: any): Array<Attachment> => {
   try {
-    return coverImageColumn?.title ? JSON.parse(record.row[coverImageColumn.title]) : []
+    return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
   } catch (e) {
     return []
   }
@@ -105,19 +105,24 @@ openNewRecordFormHook?.on(async () => {
 <template>
   <div class="flex flex-col h-full w-full overflow-auto">
     <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-2 my-4 px-3">
-      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col" @click="expandForm(record)">
+      <div v-for="record in data" :key="`record-${record.row.id}`" class="flex flex-col" @click="expandForm(record)">
         <Row :row="record">
-          <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all">
+          <a-card hoverable class="!rounded-lg overflow-hidden break-all">
             <template #cover>
-              <a-carousel v-if="attachments(record).length !== 0" autoplay>
-                <img v-for="(attachment, index) in attachments(record)" :key="index" class="h-52" :src="attachment.url" />
+              <a-carousel v-if="attachments(record).length" autoplay>
+                <img
+                  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>
               <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
             </template>
 
             <div
               v-for="col in fieldsWithoutCover"
-              :key="col.id"
+              :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">

From 7c8967c19f07557467888428f703126bbc8d8831 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 12:25:50 +0300
Subject: [PATCH 07/12] fix: disable expand form for carousel navigation

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 25a7bbc5a6..cd6c4f57e3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -96,6 +96,13 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
   expandedFormDlg.value = true
 }
 
+const expandFormClick = async (e: MouseEvent, row: RowType) => {
+  const target = e.target as HTMLElement
+  if (target && !target.closest('.slick-dots')) {
+    expandForm(row)
+  }
+}
+
 openNewRecordFormHook?.on(async () => {
   const newRow = await addEmptyRow()
   expandForm(newRow)
@@ -105,7 +112,7 @@ openNewRecordFormHook?.on(async () => {
 <template>
   <div class="flex flex-col h-full w-full overflow-auto">
     <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-2 my-4 px-3">
-      <div v-for="record in data" :key="`record-${record.row.id}`" class="flex flex-col" @click="expandForm(record)">
+      <div v-for="record in data" :key="`record-${record.row.id}`" class="flex flex-col" @click="expandFormClick($event, record)">
         <Row :row="record">
           <a-card hoverable class="!rounded-lg overflow-hidden break-all">
             <template #cover>

From 4ec65e5c41d367b87c3b924cdd382febdf553aee Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 16:46:37 +0300
Subject: [PATCH 08/12] feat: cover image selector for gallery view

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet-toolbar/FieldsMenu.vue         | 36 +++++++++++++++++--
 .../components/smartsheet/Gallery.vue         |  9 ++++-
 packages/nocodb-sdk/src/lib/Api.ts            |  2 ++
 scripts/sdk/swagger.json                      | 16 +++++++++
 4 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 0adc4306ce..1fc84102f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index cd6c4f57e3..2926e46db0 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -85,8 +85,15 @@ const attachments = (record: any): Array<Attachment> => {
   }
 }
 
+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>) => {
@@ -116,7 +123,7 @@ openNewRecordFormHook?.on(async () => {
         <Row :row="record">
           <a-card hoverable class="!rounded-lg overflow-hidden break-all">
             <template #cover>
-              <a-carousel v-if="attachments(record).length" autoplay>
+              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay>
                 <img
                   v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)"
                   :key="`carousel-${record.row.id}-${index}`"
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index f4fd0461da..9de5ee536d 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/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 {
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 30a3308270..3e14b096c5 100644
--- a/scripts/sdk/swagger.json
+++ b/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"
+              }
+            ]
           }
         }
       },

From 1eb7a38285eae79322601020b9e122c6f8eab079 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 16:51:29 +0300
Subject: [PATCH 09/12] fix: expand form on clicking card instead of parent

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 2926e46db0..b355564b11 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -119,9 +119,9 @@ openNewRecordFormHook?.on(async () => {
 <template>
   <div class="flex flex-col h-full w-full overflow-auto">
     <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-2 my-4 px-3">
-      <div v-for="record in data" :key="`record-${record.row.id}`" class="flex flex-col" @click="expandFormClick($event, record)">
+      <div v-for="record in data" :key="`record-${record.row.id}`" class="flex flex-col">
         <Row :row="record">
-          <a-card hoverable class="!rounded-lg overflow-hidden break-all">
+          <a-card hoverable class="!rounded-lg overflow-hidden break-all" @click="expandFormClick($event, record)">
             <template #cover>
               <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay>
                 <img

From ef8a700c95301833b57dfab0bb575ac71115f906 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 17:00:04 +0300
Subject: [PATCH 10/12] fix: keep same row height for all gallery items

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index b355564b11..61f749b4e2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -118,10 +118,10 @@ openNewRecordFormHook?.on(async () => {
 
 <template>
   <div class="flex flex-col h-full w-full overflow-auto">
-    <div class="nc-gallery-container grid w-full min-h-0 flex-1 gap-2 my-4 px-3">
-      <div v-for="record in data" :key="`record-${record.row.id}`" class="flex flex-col">
+    <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 overflow-hidden break-all" @click="expandFormClick($event, record)">
+          <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all" @click="expandFormClick($event, record)">
             <template #cover>
               <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay>
                 <img
@@ -158,6 +158,7 @@ openNewRecordFormHook?.on(async () => {
         </Row>
       </div>
     </div>
+    <div class="flex-1" />
     <SmartsheetPagination />
     <SmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"
@@ -171,6 +172,7 @@ openNewRecordFormHook?.on(async () => {
 
 <style scoped>
 .nc-gallery-container {
+  grid-auto-rows: 1fr;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
 </style>

From 402935604bf84142f0a2a2c6ffd15d032e835b19 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 20:33:21 +0300
Subject: [PATCH 11/12] fix: move carousel under cover image

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet/Gallery.vue         | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 61f749b4e2..9fcf9f2f78 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -123,7 +123,12 @@ openNewRecordFormHook?.on(async () => {
         <Row :row="record">
           <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all" @click="expandFormClick($event, record)">
             <template #cover>
-              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay>
+              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel">
+                <template #customPaging>
+                  <a>
+                    <div class="pt-[12px]"><div></div></div>
+                  </a>
+                </template>
                 <img
                   v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)"
                   :key="`carousel-${record.row.id}-${index}`"
@@ -175,4 +180,30 @@ openNewRecordFormHook?.on(async () => {
   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;
+}
 </style>

From f8ee8c2b49f3c265793c2473a02d7996362ee24e Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 20:58:36 +0300
Subject: [PATCH 12/12] feat: navigate carousel by clicking cover image

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet/Gallery.vue         | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 9fcf9f2f78..2f56d14cb4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -105,7 +105,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
 
 const expandFormClick = async (e: MouseEvent, row: RowType) => {
   const target = e.target as HTMLElement
-  if (target && !target.closest('.slick-dots')) {
+  if (target && !target.closest('.gallery-carousel')) {
     expandForm(row)
   }
 }
@@ -123,12 +123,18 @@ openNewRecordFormHook?.on(async () => {
         <Row :row="record">
           <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all" @click="expandFormClick($event, record)">
             <template #cover>
-              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel">
+              <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).filter((attachment) => attachment.url)"
                   :key="`carousel-${record.row.id}-${index}`"
@@ -206,4 +212,16 @@ openNewRecordFormHook?.on(async () => {
 .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>