From ebd8e55c980526cbd435b04a0eb1ad9349845783 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 5 Aug 2022 19:55:24 +0530
Subject: [PATCH 1/7] refactor/gui-v2 added galllery view

---
 packages/nc-gui-v2/components.d.ts            |   1 +
 .../components/smartsheet-header/Cell.vue     |   6 +-
 .../smartsheet-header/VirtualCell.vue         |   6 +-
 .../components/smartsheet/Gallery.vue         | 242 +++---------------
 packages/nc-gui-v2/composables/useViewData.ts |  12 +-
 5 files changed, 60 insertions(+), 207 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 0e5864cd54..5a44075de4 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 26cb6cf922..4d98cf0e1d 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -20,8 +20,10 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
 
-    <div class="flex-1" />
-    <SmartsheetHeaderMenu />
+    <template v-if="!hideMenu">
+      <div class="flex-1" />
+      <SmartsheetHeaderMenu />
+    </template>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 5ecb20bbab..04462d7f20 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -95,9 +95,11 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <!--    <span class="caption" v-html="tooltipMsg" /> -->
 
     <!--    </v-tooltip> -->
-    <v-spacer />
+    <template v-if="!hideMenu">
+      <v-spacer />
 
-    <SmartsheetHeaderMenu :virtual="true" />
+      <SmartsheetHeaderMenu :virtual="true" />
+    </template>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index f3173664b3..7122525e93 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, provide, useViewData } from '#imports'
-import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
+import { ActiveViewInj, ChangePageInj, FieldsInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
+import ImageIcon from '~icons/mdi/file-image-box'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -12,7 +13,7 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
-const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view as any)
+const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any)
 
 provide(IsFormInj, false)
 provide(IsGridInj, false)
@@ -20,11 +21,24 @@ provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 provide(ReadonlyInj, true)
 
+const fields = inject(FieldsInj, ref([]))
+
+const coverImageColumn = $(computed(() => fields.value.find((col) => col.id === galleryData.value?.fk_cover_image_col_id)))
+
+const coverUrl = (record: any) => {
+  try {
+    return JSON.parse(record.row[coverImageColumn?.title])[0].url
+  } catch (e) {
+    return null
+  }
+}
+
 watch(
   [meta, view],
   async () => {
     if (meta?.value && view?.value) {
       await loadData()
+      await loadGalleryData()
     }
   },
   { immediate: true },
@@ -32,212 +46,36 @@ watch(
 </script>
 
 <template>
-  <v-container fluid class="nc-gallery-container">
-    <!--    <v-row class="align-stretch">
-      <v-col v-for="({ row }, rowIndex) in data" :key="rowIndex"
-             md="4"
-             lg="3"
-             sm="6"
-             xs="12"> -->
-
-    <!--        <v-hover v-slot="{hover}"> -->
+  <div class="grid grid-cols-4 gap-x-4 gap-y-4 pt-4 overflow-y-scroll h-full px-3">
+    <div v-for="(record, i) in data" :key="i" class="flex flex-col">
+      <a-card hoverable class="!rounded-lg">
+        <template #cover>
+          <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
+          <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
+        </template>
+        <template v-for="(col, colIndex) in fields" :key="colIndex">
+          <div 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" />
+                <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+              </div>
+            </div>
 
-    <div class="flex flex-wrap gap-4 justify-center">
-      <div v-for="({ row }, rowIndex) in data" :key="rowIndex" class="md:w-[300px] lg:w-[400px] xl:w-[500px]">
-        <v-card class="h-100">
-          <!--     :elevation="hover ? 4 : 1"
-                 :ripple="!isLocked"
-                 @click="!isLocked && $emit('expandForm', {row,rowIndex,rowMeta})"
-               > -->
-          <!--          <v-carousel
-                v-if="attachmentColumn"
-                :continuous="false"
-                :cycle="true"
-                :show-arrows="false"
-                hide-delimiter-background
-                delimiter-icon="mdi-minus"
-                height="200"
-              >
-                <v-carousel-item
-                  v-for="(cover, i) in getCovers(row)"
-                  :key="i"
-                >
-                  <v-img
-                    height="200"
-                    :src="cover.url"
-                    :alt="cover.title"
-                  />
-                </v-carousel-item>
-              </v-carousel> -->
+            <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+              <div v-if="!record.row[col.title]" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
 
-          <!--            <v-card-title -->
-          <!--              class="text-capitalize" -->
-          <!--              v-text="row[primaryValueColumn]" -->
-          <!--            /> -->
-          <v-card-text>
-            <v-container fluid>
-              <!--              <v-row class="">
-                    <v-col v-for="col in meta.columns" :key="col.title"
-                           class="col-12"> -->
-              <div v-for="col in meta.columns" :key="col.title" class="my-8">
-                <!--                <v-col v-for="col in fields" v-show="showFields[col.title]" :key="col.title" class="col-12 mt-1 mb-2"> -->
-                <!--
-    todo:header cell
-    -->
-                <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
-                  <SmartsheetHeaderCell v-else :column="col" />
-                  <!--                    <virtual-header-cell
-                          v-if="isVirtualCol(col)"
-                          :column="col"
-                          :nodes="nodes"
-                          :is-form="true"
-                          :meta="meta"
-                        />
-                        <header-cell
-                          v-else
-                          :is-form="true"
-                          :value="col.title"
-                          :column="col"
-                        /> -->
-                </label>
-                <div class="mt-2">
-                  <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row[col.title]" :edit-enabled="false" :column="col" />
+              <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" />
 
-                  <SmartsheetCell
-                    v-else
-                    v-model="row[col.title]"
-                    :edit-enabled="false"
-                    :column="col"
-                    @update:model-value="updateRowProperty(row, col.title)"
-                  />
-                </div>
-                <!--                  <virtual-cell
-                        v-if="isVirtualCol(col)"
-                        ref="virtual"
-                        :column="col"
-                        :row="row"
-                        :nodes="nodes"
-                        :meta="meta"
-                      />
-                      <table-cell
-                        v-else
-                        :value="row[col.title]"
-                        :column="col"
-                        :sql-ui="sqlUi"
-                        :is-locked="isLocked"
-                        class="xc-input body-2"
-                        :meta="meta"
-                      /> -->
-                <!--                </v-col> -->
-                <!--              </v-row> -->
-              </div>
-            </v-container>
-          </v-card-text>
-        </v-card>
-      </div>
+              <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
+            </div>
+          </div>
+        </template>
+      </a-card>
     </div>
-
-    <!--        </v-hover> -->
-    <!--      </v-col>
-    </v-row> -->
-  </v-container>
+  </div>
 </template>
 
-<!--
-<script>
-import { isVirtualCol } from "nocodb-sdk";
-import VirtualHeaderCell from "../components/VirtualHeaderCell";
-import HeaderCell from "../components/HeaderCell";
-import VirtualCell from "../components/VirtualCell";
-import TableCell from "../components/Cell";
-
-export default {
-  name: "GalleryView",
-  components: {
-    TableCell,
-    VirtualCell,
-    HeaderCell,
-    VirtualHeaderCell
-  },
-  props: [
-    "nodes",
-    "table",
-    "showFields",
-    "availableColumns",
-    "meta",
-    "data",
-    "primaryValueColumn",
-    "showSystemFields",
-    "sqlUi",
-    "coverImageField",
-    "viewId",
-    "isLocked"
-  ],
-  data() {
-    return {
-      galleryView: {}
-    };
-  },
-  computed: {
-    attachmentColumn() {
-      return this.coverImageField && this.meta && this.meta.columns && this.meta.columns.find(c => c.id === this.coverImageField);
-    },
-    fields() {
-      if (this.availableColumns) {
-        return this.availableColumns;
-      }
-
-      const hideCols = ["created_at", "updated_at"];
-
-      if (this.showSystemFields) {
-        return this.meta.columns || [];
-      } else {
-        return this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.title) &&
-          !((this.meta.v || []).some(v => v.bt && v.bt.title === c.title))
-        ) || [];
-      }
-    }
-  },
-  watch: {
-    async coverImageField(v) {
-      if (this.galleryView && v !== this.galleryView.fk_cover_image_col_id) {
-        (await this.$api.dbView.galleryUpdate(this.viewId, {
-          ...this.galleryView,
-          fk_cover_image_col_id: v
-        }));
-      }
-    }
-  },
-  created() {
-    this.loadView();
-  },
-  methods: {
-    isVirtualCol,
-    async loadView() {
-      this.galleryView = (await this.$api.dbView.galleryRead(this.viewId));
-      this.$emit("update:coverImageField", this.galleryView.fk_cover_image_col_id);
-    },
-    getCovers(row) {
-      if (this.attachmentColumn &&
-        row[this.attachmentColumn.title] && row[this.attachmentColumn.title][0] &&
-        row[this.attachmentColumn.title]) {
-        try {
-          return JSON.parse(row[this.attachmentColumn.title]);
-        } catch (e) {
-
-        }
-      }
-      return [{ url: "https://via.placeholder.com/700?text=No%20image%20found" }];
-    }
-  }
-};
-</script>
-
-<style scoped>
-
-</style>
--->
 <style scoped>
 .nc-gallery-container {
   height: calc(100vh - 160px);
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 950833a1f1..a4dc0541a2 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,4 +1,4 @@
-import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { Api, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
@@ -26,6 +26,7 @@ export function useViewData(
 ) {
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const galleryData = ref<GalleryType | undefined>(undefined)
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
@@ -58,6 +59,13 @@ export function useViewData(
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
   }
+
+  const loadGalleryData = async () => {
+    if (!viewMeta?.value?.id) return
+
+    galleryData.value = await $api.dbView.galleryRead(viewMeta.value.id)
+  }
+
   const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.length) => {
     try {
       const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
@@ -248,5 +256,7 @@ export function useViewData(
     updateOrSaveRow,
     selectedAllRecords,
     syncCount,
+    galleryData,
+    loadGalleryData,
   }
 }

From 5316f0cfc4d63ef12bffb1cb60e7349b608703f7 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 6 Aug 2022 11:34:27 +0530
Subject: [PATCH 2/7] fix/fixed styling of gallery view and removed some case
 of empty record coming up

---
 .../components/smartsheet/Gallery.vue         | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 7122525e93..0a4203a6c3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -43,34 +43,44 @@ watch(
   },
   { immediate: true },
 )
+
+const isRowEmpty = (record: any, col: any) => {
+  const val = record.row[col.title]
+  if (!val) return true
+
+  return Array.isArray(val) && val.length === 0
+}
 </script>
 
 <template>
   <div class="grid grid-cols-4 gap-x-4 gap-y-4 pt-4 overflow-y-scroll h-full px-3">
-    <div v-for="(record, i) in data" :key="i" class="flex flex-col">
-      <a-card hoverable class="!rounded-lg">
+    <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
+      <a-card hoverable class="!rounded-lg h-full">
         <template #cover>
           <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
           <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
         </template>
-        <template v-for="(col, colIndex) in fields" :key="colIndex">
-          <div 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" />
-                <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
-              </div>
-            </div>
 
-            <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
-              <div v-if="!record.row[col.title]" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
+        <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 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" />
+              <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+            </div>
+          </div>
 
+          <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" />
-            </div>
+            </template>
           </div>
-        </template>
+        </div>
       </a-card>
     </div>
   </div>

From 230d14315bd4766b40e3e045c9daea7354b26088 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 6 Aug 2022 11:56:03 +0530
Subject: [PATCH 3/7] fix/added pagination

---
 .../components/smartsheet/Gallery.vue         | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 0a4203a6c3..60a3e73b39 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -53,42 +53,45 @@ const isRowEmpty = (record: any, col: any) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-4 gap-x-4 gap-y-4 pt-4 overflow-y-scroll h-full px-3">
-    <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
-      <a-card hoverable class="!rounded-lg h-full">
-        <template #cover>
-          <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
-          <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
-        </template>
+  <div class="flex flex-col h-100 min-h-0 w-100">
+    <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-x-4 gap-y-4 my-4 px-3">
+      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
+        <a-card hoverable class="!rounded-lg h-full">
+          <template #cover>
+            <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
+            <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 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" />
-              <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+          <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 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" />
+                <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+              </div>
             </div>
-          </div>
 
-          <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" />
-            </template>
+            <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" />
+              </template>
+            </div>
           </div>
-        </div>
-      </a-card>
+        </a-card>
+      </div>
     </div>
+    <SmartsheetPagination />
   </div>
 </template>
 
 <style scoped>
 .nc-gallery-container {
-  height: calc(100vh - 160px);
+  height: calc(100vh - 250px);
   overflow: auto;
 }
 </style>

From 6e2029071e0a9e7eb9fe377d9316bcf70699862a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 6 Aug 2022 12:07:15 +0530
Subject: [PATCH 4/7] chore/added todo for scrolling issue in gallery

---
 packages/nc-gui-v2/components/smartsheet/Gallery.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 60a3e73b39..d896964a9d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -52,6 +52,7 @@ const isRowEmpty = (record: any, col: any) => {
 }
 </script>
 
+<!-- TODO: Fix scrolling -->
 <template>
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-x-4 gap-y-4 my-4 px-3">

From b5d801a13dd7a0ba65026015bc6f57826b0ba15b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 18:00:06 +0530
Subject: [PATCH 5/7] fix/added carousel to gallery view

---
 .../components/smartsheet/Gallery.vue         | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index d896964a9d..3139c37452 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -4,6 +4,10 @@ import { inject, provide, useViewData } from '#imports'
 import { ActiveViewInj, ChangePageInj, FieldsInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
 import ImageIcon from '~icons/mdi/file-image-box'
 
+interface Attachment {
+  url: string
+}
+
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
 
@@ -25,14 +29,6 @@ const fields = inject(FieldsInj, ref([]))
 
 const coverImageColumn = $(computed(() => fields.value.find((col) => col.id === galleryData.value?.fk_cover_image_col_id)))
 
-const coverUrl = (record: any) => {
-  try {
-    return JSON.parse(record.row[coverImageColumn?.title])[0].url
-  } catch (e) {
-    return null
-  }
-}
-
 watch(
   [meta, view],
   async () => {
@@ -50,6 +46,14 @@ const isRowEmpty = (record: any, col: any) => {
 
   return Array.isArray(val) && val.length === 0
 }
+
+const attachments = (record: any): Array<Attachment> => {
+  try {
+    return JSON.parse(record.row[coverImageColumn?.title]) ?? []
+  } catch (e) {
+    return []
+  }
+}
 </script>
 
 <!-- TODO: Fix scrolling -->
@@ -59,7 +63,14 @@ const isRowEmpty = (record: any, col: any) => {
       <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
         <a-card hoverable class="!rounded-lg h-full">
           <template #cover>
-            <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
+            <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"
+              />
+            </a-carousel>
             <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
           </template>
 

From e5318f9b3283c8b3e8185267583a2a247c4c09fc Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 18:03:25 +0530
Subject: [PATCH 6/7] fix/removed redundant css class names

---
 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 3139c37452..144fa1b2f6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -58,8 +58,8 @@ const attachments = (record: any): Array<Attachment> => {
 
 <!-- TODO: Fix scrolling -->
 <template>
-  <div class="flex flex-col h-100 min-h-0 w-100">
-    <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-x-4 gap-y-4 my-4 px-3">
+  <div class="flex flex-col h-full min-h-0 w-full">
+    <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-4 my-4 px-3">
       <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
         <a-card hoverable class="!rounded-lg h-full">
           <template #cover>

From 40b22356561c608712014c0728303518060f0129 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 18:11:02 +0530
Subject: [PATCH 7/7] fix/solved merge conflicts

---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue      | 3 ++-
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue    | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 4d98cf0e1d..b03027765b 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -5,8 +5,9 @@ import { inject, toRef } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean }>()
 const column = toRef(props, 'column')
+const hideMenu = toRef(props, 'hideMenu')
 provide(ColumnInj, column)
 
 const meta = inject(MetaInj)
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 04462d7f20..2da6fd20ce 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -8,8 +8,10 @@ import { useMetas } from '~/composables'
 import { ColumnInj, MetaInj } from '~/context'
 import { provide, useProvideColumnCreateStore } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean }>()
 const column = toRef(props, 'column')
+const hideMenu = toRef(props, 'hideMenu')
+
 provide(ColumnInj, column)
 const { metas } = useMetas()
 const meta = inject(MetaInj)