From 45a33a9b8950205debfba1f81630407db48c2083 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 15:52:00 +0530
Subject: [PATCH] refactor(gui-v2): share view link correction and ui updates

- icon color
- link
- toast on copy

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ShareView.vue          | 20 ++++++++++++-------
 .../smartsheet-toolbar/SharedViewList.vue     |  7 +------
 .../nc-gui-v2/composables/useDashboard.ts     | 10 ++++++++++
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useDashboard.ts

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 74f6b3c48c..75081e55fe 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -15,6 +15,7 @@ const { view, $api } = useSmartsheetStoreOrThrow()
 const { copy } = useClipboard()
 const toast = useToast()
 const { $e } = useNuxtApp()
+const { dashboardUrl } = useDashboard()
 
 let showShareModel = $ref(false)
 const passwordProtected = $ref(false)
@@ -57,7 +58,7 @@ const sharedViewUrl = computed(() => {
   }
 
   // todo: get dashboard url
-  return `#/nc/${viewType}/${shared.value.uuid}`
+  return `${dashboardUrl?.value}/nc/${viewType}/${shared.value.uuid}`
 })
 
 async function saveAllowCSVDownload() {
@@ -91,6 +92,11 @@ const saveShareLinkPassword = async () => {
 
   $e('a:view:share:enable-pwd')
 }
+
+const copyLink = () => {
+  copy(sharedViewUrl?.value as string)
+  toast.info('Copied to clipboard')
+}
 </script>
 
 <template>
@@ -105,13 +111,13 @@ const saveShareLinkPassword = async () => {
 
     <!-- This view is shared via a private link -->
     <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null">
-      <div class="share-link-box nc-share-link-box">
+      <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
         <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
-          <MdiOpenInNewIcon class="text-sm text-grey mt-1" />
+          <MdiOpenInNewIcon class="text-sm text-gray-500 mt-1" />
         </a>
-        <MdiCopyIcon class="text-grey text-sm cursor-pointer" @click="copy(sharedViewUrl)" />
+        <MdiCopyIcon class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
       <a-collapse ghost>
@@ -127,9 +133,9 @@ const saveShareLinkPassword = async () => {
                 type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
-              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">{{
-                $t('placeholder.password.save')
-              }}</a-button>
+              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword"
+                >{{ $t('placeholder.password.save') }}
+              </a-button>
             </div>
           </div>
           <div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 7b5aa775c7..3dcc32218f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
 import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
@@ -25,6 +24,7 @@ const { view, $api, meta } = useSmartsheetStoreOrThrow()
 const { copy } = useClipboard()
 const toast = useToast()
 const route = useRoute()
+const { dashboardUrl } = useDashboard()
 
 let isLoading = $ref(false)
 // let activeSharedView = $ref(null)
@@ -55,11 +55,6 @@ const loadSharedViewsList = async () => {
 
 onMounted(loadSharedViewsList)
 
-// todo: get correct dashboard url
-const dashboardUrl = computed(() => {
-  return `${location.origin}`
-})
-
 const sharedViewUrl = (view: SharedViewType) => {
   let viewType
   switch (view.type) {
diff --git a/packages/nc-gui-v2/composables/useDashboard.ts b/packages/nc-gui-v2/composables/useDashboard.ts
new file mode 100644
index 0000000000..7cde85e020
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useDashboard.ts
@@ -0,0 +1,10 @@
+export default () => {
+  const route = useRoute()
+  const dashboardUrl = computed(() => {
+    // todo: test in different scenarios
+    // get base path of app
+    return `${location.origin}${(location.pathname || '').replace(route.path, '')}`
+  })
+
+  return { dashboardUrl }
+}