From 33592e5ab9f8d94d37734b9f15843e0ea97e7d71 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 29 Dec 2023 15:51:37 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Enable=20copy=20iscnId=20on=20ne?=
 =?UTF-8?q?w=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadedInfo.vue | 53 ++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/components/IscnUploadedInfo.vue b/components/IscnUploadedInfo.vue
index 5282aa2e..39dc834c 100644
--- a/components/IscnUploadedInfo.vue
+++ b/components/IscnUploadedInfo.vue
@@ -130,23 +130,18 @@
           'text-shade-gray',
         ]"
       />
-      <FormField
-        v-if="iscnId"
-        :label="$t('iscn.meta.id')"
-        :class="[
-          'mb-[12px]',
-          'text-[14px]',
-        ]"
-      >
-        <Link
-          :to="localeLocation({
-            name: 'view-iscnId',
-            params: { iscnId: iscnId },
-          })"
-          class="text-[14px]"
-        >
-          {{ iscnId }}
-        </Link>
+      <FormField v-if="iscnId" :label="$t('iscn.meta.id.copy')" class="mb-[12px]">
+        <Button
+          size="mini"
+          preset="tertiary"
+          tag="div"
+          text-preset="h6"
+          type="button"
+          content-class="font-medium ml-[-4px]"
+          prepend-class="font-bold"
+          :text="iscnId"
+          @click="handleCopyIscnId"
+        />
       </FormField>
       <FormField
         v-if="contentFingerprints"
@@ -181,6 +176,16 @@
         />
       </FormField>
       <slot name="footer" />
+       <Snackbar
+        v-model="isOpenCopiedAlert"
+        :text="$t('iscn.meta.stakeholders.wallet.copied')"
+        preset="success"
+        :timeout="2000"
+      >
+        <template #prepend>
+          <IconDone />
+        </template>
+      </Snackbar>
     </Card>
 </template>
 
@@ -190,6 +195,9 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
 import { downloadJSON } from '~/utils/misc'
 import { BIG_DIPPER_TX_BASE_URL } from '~/constant'
+import { logTrackerEvent } from '~/utils/logger'
+import { copyToClipboard, extractIscnIdPrefix } from '~/utils/ui'
+
 
 @Component({
   components: { IscnCard: () => import('~/components/IscnCard.vue') },
@@ -202,6 +210,8 @@ export default class IscnUploadedInfo extends Vue {
   @Prop({ default: null }) readonly exifInfo: any | null | undefined
   @Prop(Number) readonly step: number | undefined
 
+  isOpenCopiedAlert: boolean = false
+
   get recordData() {
     return this.record?.data
   }
@@ -252,5 +262,14 @@ export default class IscnUploadedInfo extends Vue {
 
     downloadJSON(generateData, 'iscn.json')
   }
+
+  handleCopyIscnId() {
+    logTrackerEvent(this, 'ISCNView', 'CopyISCNID', this.iscnId, 1)
+    const iscnIdPrefix = extractIscnIdPrefix(this.iscnId)
+    if (iscnIdPrefix) {
+      copyToClipboard(iscnIdPrefix)
+      this.isOpenCopiedAlert = true
+    }
+  }
 }
 </script>