feat(gui-v2): add gallery view

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/index.ts

@@ -12,3 +12,4 @@ export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const ValueInj: InjectionKey<any> = Symbol('value-injection')
 export const ActiveViewInj: InjectionKey<any> = Symbol('active-view-injection')
+export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')

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

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { isVirtualCol } from 'nocodb-sdk'
+import { inject, onKeyStroke, onMounted, provide } from '#imports'
+import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/components'
+import useViewData from '~/composables/useViewData'
+
+const meta = inject(MetaInj)
+const view = inject(ActiveViewInj)
+
+// todo: get from parent ( inject or use prop )
+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)
+
+provide(IsFormInj, false)
+provide(IsGridInj, false)
+provide(PaginationDataInj, paginationData)
+provide(ChangePageInj, changePage)
+provide(ReadonlyInj, true)
+
+watch(
+  [meta, view],
+  async () => {
+    if (meta?.value && view?.value) {
+      await loadData()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <v-container fluid>
+    <v-row class="align-stretch">
+      <v-col v-for="({ row }, rowIndex) in data" :key="rowIndex" class="col-md-4 col-lg-3 col-sm-6 col-12">
+        <!--        <v-hover v-slot="{hover}"> -->
+        <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> -->
+
+          <!--            <v-card-title -->
+          <!--              class="text-capitalize" -->
+          <!--              v-text="row[primaryValueColumn]" -->
+          <!--            /> -->
+          <v-card-text>
+            <v-container>
+              <v-row class="">
+                <v-col v-for="col in meta.columns" :key="col.title" cols="3" class="col-12 mt-1 mb-2">
+                  <!--                <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&#45;&#45;text">
+                    <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>
+-->
+                  <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row[col.title]" :edit-enabled="false" :column="col" />
+
+                  <SmartsheetCell
+                    v-else
+                    v-model="row[col.title]"
+                    :edit-enabled="false"
+                    :column="col"
+                    @update:model-value="updateRowProperty(row, col.title)"
+                  />
+                  <!--                  <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>
+            </v-container>
+          </v-card-text>
+        </v-card>
+        <!--        </v-hover> -->
+      </v-col>
+    </v-row>
+  </v-container>
+</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>
+-->

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -37,6 +37,7 @@ watch(
       <div class="d-flex">
         <div v-if="activeView" class="flex-grow-1 min-w-0">
           <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" />
+          <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
         </div>
         <SmartsheetSidebar />
       </div>