From fad3707f180cd05f1be37a112b78c74dc8d27939 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 20:09:38 +0530
Subject: [PATCH] wip(gui-v2): share view list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/MoreActions.vue        | 76 +++++++++-------
 .../smartsheet-toolbar/SharedViewList.vue     | 89 +++++++++++++++++++
 2 files changed, 131 insertions(+), 34 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index bd45f04b3b..f1255ec183 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -13,6 +13,8 @@ import MdiUploadIcon from '~icons/mdi/upload-outline'
 import MdiHookIcon from '~icons/mdi/hook'
 import MdiViewListIcon from '~icons/mdi/view-list-outline'
 
+const sharedViewListDlg = ref(false)
+
 // todo : replace with inject
 const publicViewId = null
 const { project } = useProject()
@@ -87,40 +89,46 @@ const exportCsv = async () => {
 </script>
 
 <template>
-  <a-dropdown>
-    <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
-      <div class="flex gap-1 align-center">
-        <MdiFlashIcon class="text-grey" />
-        <!-- More -->
-        {{ $t('general.more') }}
-        <MdiMenuDownIcon class="text-grey" />
-      </div>
-    </a-button>
-    <template #overlay>
-      <div class="bg-white shadow">
-        <div>
-          <div class="nc-menu-item" @click.stop="exportCsv">
-            <MdiDownloadIcon />
-            <!-- Download as CSV -->
-            {{ $t('activity.downloadCSV') }}
-          </div>
-          <div class="nc-menu-item" @click.stop>
-            <MdiUploadIcon />
-            <!-- Upload CSV -->
-            {{ $t('activity.uploadCSV') }}
-          </div>
-          <div class="nc-menu-item" @click.stop>
-            <MdiViewListIcon />
-            <!-- Shared View List -->
-            {{ $t('activity.listSharedView') }}
-          </div>
-          <div class="nc-menu-item" @click.stop>
-            <MdiHookIcon />
-            <!-- todo: i18n -->
-            Webhook
+  <div>
+    <a-dropdown>
+      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+        <div class="flex gap-1 align-center">
+          <MdiFlashIcon class="text-grey" />
+          <!-- More -->
+          {{ $t('general.more') }}
+          <MdiMenuDownIcon class="text-grey" />
+        </div>
+      </a-button>
+      <template #overlay>
+        <div class="bg-white shadow">
+          <div>
+            <div class="nc-menu-item" @click.stop="exportCsv">
+              <MdiDownloadIcon />
+              <!-- Download as CSV -->
+              {{ $t('activity.downloadCSV') }}
+            </div>
+            <div class="nc-menu-item" @click.stop>
+              <MdiUploadIcon />
+              <!-- Upload CSV -->
+              {{ $t('activity.uploadCSV') }}
+            </div>
+            <div class="nc-menu-item" @click.stop="sharedViewListDlg = true">
+              <MdiViewListIcon />
+              <!-- Shared View List -->
+              {{ $t('activity.listSharedView') }}
+            </div>
+            <div class="nc-menu-item" @click.stop>
+              <MdiHookIcon />
+              <!-- todo: i18n -->
+              Webhook
+            </div>
           </div>
         </div>
-      </div>
-    </template>
-  </a-dropdown>
+      </template>
+    </a-dropdown>
+
+    <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="90vw">
+      <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
+    </a-modal>
+  </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
new file mode 100644
index 0000000000..fc4fd9f036
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { onMounted } from '#imports'
+
+const { view, $api, meta } = useSmartsheetStoreOrThrow()
+
+let isLoading = $ref(false)
+// let activeSharedView = $ref(null)
+const sharedViewList = ref()
+
+const loadSharedViewsList = async () => {
+  isLoading = true
+  const list = await $api.dbViewShare.list(meta.value?.id as string)
+
+  console.log(unref(sharedViewList))
+  console.log(list)
+
+  sharedViewList.value = list
+
+  // todo: show active view in list separately
+  // const index = sharedViewList.value.findIndex((v) => {
+  //   return view?.value?.id === v.id
+  // })
+  //
+  // if (index > -1) {
+  //   activeSharedView = sharedViewList.value.splice(index, 1)[0]
+  // } else {
+  //   activeSharedView = null
+  // }
+
+  isLoading = false
+}
+
+onMounted(loadSharedViewsList)
+const test = (t) => console.log(t)
+</script>
+
+<template>
+  <div class="w-full">
+    <a-table class="" size="small" :data-source="sharedViewList" :pagination="{ position: ['bottomCenter'] }">
+      <!-- View name -->
+      <a-table-column key="title" :title="$t('labels.viewName')" data-index="title">
+        <template #default="{ text }">
+          <div class="text-xs" :title="text">
+            {{ text }}
+          </div>
+        </template>
+      </a-table-column>
+      <!-- View Link -->
+      <a-table-column key="title" :title="$t('labels.viewLink')" data-index="title">
+        <template #default="{ record }">
+          <div @click="test(rest)">click</div>
+          <!--          <nuxt-link :to="sharedViewUrl(currentView)">
+            {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
+          </nuxt-link> -->
+        </template>
+      </a-table-column>
+      <!-- Password -->
+      <a-table-column key="password" :title="$t('labels.password')" data-index="title">
+        <template #default="{ text }">
+          {{ text }}
+          <!--          <span>{{ currentView.showPassword ? currentView.password : '***************************' }}</span>
+          <v-icon small @click="$set(currentView, 'showPassword', !currentView.showPassword)">
+            {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
+          </v-icon> -->
+        </template>
+      </a-table-column>
+      <!-- Password -->
+      <a-table-column key="meta" title="Download allowed" data-index="title">
+        <template #default="{ text }">
+          {{ text }}
+          <!--          <template v-if="'meta' in currentView"> -->
+          <!--            <span>{{ renderAllowCSVDownload(currentView) }}</span> -->
+          <!--          </template> -->
+        </template>
+      </a-table-column>
+      <!-- Actions -->
+      <a-table-column key="id" :title="$t('labels.actions')" data-index="title">
+        <template #default="{ record }">
+          <div class="text-xs" :title="text">
+            <!--            <v-icon small @click="copyLink(currentView)"> mdi-content-copy </v-icon> -->
+            <!--            <v-icon small @click="deleteLink(currentView.id)"> mdi-delete-outline </v-icon> -->
+          </div>
+        </template>
+      </a-table-column>
+    </a-table>
+  </div>
+</template>
+
+<style scoped></style>