feat(nc-gui): gallery share view

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>

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" />

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"

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>