From 97fa9ef1e2af34a9999bd4bca8c6b89d09883910 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 11 Oct 2022 17:34:25 +0800
Subject: [PATCH] feat(nc-gui): gallery share view

---
 .../nc-gui/components/shared-view/Gallery.vue | 32 +++++++++++++++++
 .../nc-gui/components/smartsheet/Toolbar.vue  |  2 +-
 .../smartsheet/toolbar/ShareView.vue          |  8 ++++-
 .../[projectType]/gallery/[viewId]/index.vue  | 35 +++++++++++++++++++
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui/components/shared-view/Gallery.vue
 create mode 100644 packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue

diff --git a/packages/nc-gui/components/shared-view/Gallery.vue b/packages/nc-gui/components/shared-view/Gallery.vue
new file mode 100644
index 0000000000..7d7bbb5e2c
--- /dev/null
+++ b/packages/nc-gui/components/shared-view/Gallery.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '#imports'
+
+const { sharedView, meta, sorts, nestedFilters } = useSharedView()
+
+const reloadEventHook = createEventHook()
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+
+provide(ReadonlyInj, true)
+
+provide(MetaInj, meta)
+
+provide(ActiveViewInj, sharedView)
+
+provide(FieldsInj, ref(meta.value?.columns || []))
+
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
+</script>
+
+<template>
+  <div class="nc-container h-full mt-1.5 px-12">
+    <div class="flex flex-col h-full flex-1 min-w-0">
+      <LazySmartsheetToolbar />
+      <div class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
+        <LazySmartsheetGallery />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index d96e88327c..d28c91773a 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -35,7 +35,7 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
 
-    <LazySmartsheetToolbarShareView v-if="(isForm || isGrid || isKanban) && !isPublic" />
+    <LazySmartsheetToolbarShareView v-if="(isForm || isGrid || isKanban || isGallery) && !isPublic" />
 
     <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
     <div class="flex-1" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 99afe07c3a..fd0878f974 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -98,6 +98,9 @@ const sharedViewUrl = computed(() => {
     case ViewTypes.KANBAN:
       viewType = 'kanban'
       break
+    case ViewTypes.GALLERY:
+      viewType = 'gallery'
+      break
     default:
       viewType = 'view'
   }
@@ -314,7 +317,10 @@ watch(passwordProtected, (value) => {
           <div>
             <!-- Allow Download -->
             <a-checkbox
-              v-if="shared && (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN)"
+              v-if="
+                shared &&
+                (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN || shared.type === ViewTypes.GALLERY)
+              "
               v-model:checked="allowCSVDownload"
               data-cy="nc-modal-share-view__with-csv-download"
               class="!text-sm"
diff --git a/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
new file mode 100644
index 0000000000..d4e4e9852a
--- /dev/null
+++ b/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { definePageMeta } from '#imports'
+
+definePageMeta({
+  public: true,
+  requiresAuth: false,
+  layout: 'shared-view',
+})
+
+const route = useRoute()
+
+const { loadSharedView } = useSharedView()
+
+const showPassword = ref(false)
+
+try {
+  await loadSharedView(route.params.viewId as string)
+} catch (e: any) {
+  if (e?.response?.status === 403) {
+    showPassword.value = true
+  } else {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex" name="shared-view">
+    <div v-if="showPassword">
+      <LazySharedViewAskPassword v-model="showPassword" />
+    </div>
+    <LazySharedViewGallery v-else />
+  </NuxtLayout>
+</template>