💄 Add ISCN edit bar to the /new page

likecoin · Jan 31, 2024 · 8981e2c · 8981e2c
1 parent 8bec8cb
commit 8981e2c
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 63 deletions.
diff --git a/components/IscnEditBar.vue b/components/IscnEditBar.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    :class="[
+      'flex',
+      'justify-end',
+      'items-center',
+      'w-full',
+      'pt-[24px]',
+      'gap-[8px]',
+      'lg:pt-0',
+    ]"
+  >
+    <div
+      v-if="isIscnOwner"
+      class="flex justify-center items-center gap-[4px] mr-[8px]"
+    >
+      <Button preset="plain" text="Edit ISCN" @click="handleEdit">
+        <template #prepend>
+          <IconEdit />
+        </template>
+      </Button>
+      <div class="h-[20px] w-[2px] bg-medium-gray" />
+    </div>
+    <Button
+      preset="tertiary"
+      :text="$t('NFTPortal.button.download.iscn')"
+      @click="handleClickDownload"
+    >
+      <template #prepend>
+        <IconDownload />
+      </template>
+    </Button>
+    <Button
+      v-if="isShowMintButton && isNftBook"
+      preset="secondary"
+      class="w-full lg:w-auto"
+      :text="$t('NFTPortal.button.mint.book')"
+      @click="clickMintNFTBook"
+    />
+    <Button
+      v-if="isShowMintButton && !isNftBook"
+      preset="secondary"
+      class="w-full lg:w-auto"
+      :to="
+        localeLocation({
+          name: 'nft-iscn-iscnId',
+          params: { iscnId: iscnId },
+          query: mintQueries,
+        })
+      "
+      :text="$t('NFTPortal.button.mint')"
+    />
+    <div
+      v-if="!!classId"
+      class="flex justify-center items-center p-[4px] rounded-[12px] border-like-cyan-light border-[2px]"
+    >
+      <Button
+        preset="tertiary"
+        :text="$t('NFTPortal.button.check.nft')"
+        :href="likerlandNftUrl"
+        target="_blank"
+      >
+        <template #append>
+          <IconArrowRight />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class IscnEditBar extends Vue {
+  @Prop({ default: false }) readonly isIscnOwner!: boolean
+  @Prop({ default: false }) readonly isShowMintButton!: boolean
+  @Prop({ default: false }) readonly isNftBook!: boolean
+  @Prop(String) readonly iscnId: string | undefined
+  @Prop({ default: null }) readonly mintQueries!: any | null
+  @Prop(String) readonly classId!: string
+  @Prop(String) readonly likerlandNftUrl!: string
+
+  handleClickDownload() {
+    this.$emit('click-download', this.iscnId)
+  }
+
+  handleEdit() {
+    this.$emit('click-edit', this.iscnId)
+  }
+
+  handleClickMintNFTBook() {
+    this.$emit('click-mint-book', this.iscnId)
+  }
+}
+</script>
diff --git a/components/IscnUploadedInfo.vue b/components/IscnUploadedInfo.vue
@@ -6,22 +6,24 @@
     <!-- header -->
     <IscnFormHeader :step="step" :total-step="4" />
     <!-- guide title -->
-    <div class="flex items-center justify-between mt-[12px] mb-[28px]">
+    <div class="flex items-center justify-start mt-[12px]">
       <Label
         align="middle"
         :text="$t('IscnUploaded.guide.title')"
         class="text-medium-gray"
       />
-      <Button
-        preset="plain"
-        :text="$t('NFTPortal.button.download.iscn')"
-        @click="handleClickDownload"
-      >
-        <template #prepend>
-          <IconDownload />
-        </template>
-      </Button>
     </div>
+    <IscnEditBar
+      class="my-[24px]"
+      :is-iscn-owner="true"
+      :iscn-id="iscnId"
+      :is-show-mint-button="true"
+      :is-nft-book="type === 'Book'"
+      :should-show-mint-button="true"
+      @click-edit="handleEdit"
+      @click-download="handleClickDownload"
+      @click-mint-book="clickMintNFTBook"
+    />
 
     <!-- ISCN card -->
     <IscnCard
@@ -159,7 +161,7 @@ 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 { BIG_DIPPER_TX_BASE_URL, NFT_BOOK_PRESS_URL } from '~/constant'
 import { logTrackerEvent } from '~/utils/logger'
 import { copyToClipboard, extractIscnIdPrefix } from '~/utils/ui'
 
@@ -228,12 +230,27 @@ export default class IscnUploadedInfo extends Vue {
   }
 
   handleCopyIscnId() {
-    logTrackerEvent(this, 'ISCNView', 'CopyISCNID', this.iscnId, 1)
+    logTrackerEvent(this, 'ISCNUploaded', 'CopyISCNID', this.iscnId, 1)
     const iscnIdPrefix = extractIscnIdPrefix(this.iscnId)
     if (iscnIdPrefix) {
       copyToClipboard(iscnIdPrefix)
       this.isOpenCopiedAlert = true
     }
   }
+
+  clickMintNFTBook() {
+    logTrackerEvent(this, 'ISCNUploaded', 'RedirectToBookPress', this.iscnId, 1);
+    window.open(`${NFT_BOOK_PRESS_URL}/mint-nft?iscn_id=${this.iscnId}`, '_blank', 'noopener');
+  }
+
+   handleEdit() {
+    logTrackerEvent(this, 'ISCNUploaded', 'ClickEdit', this.iscnId, 1)
+    this.$router.replace(
+      this.localeLocation({
+        name: 'edit-iscnId',
+        params: { iscnId: this.iscnId },
+      })!,
+    )
+  }
 }
 </script>
diff --git a/pages/view/_iscnId/index.vue b/pages/view/_iscnId/index.vue
@@ -82,57 +82,19 @@
       'lg:px-0',
     ]"
   >
-    <div
-      :class="[
-        'flex',
-        'justify-end',
-        'items-center',
-        'w-full',
-        'pt-[24px]',
-        'gap-[8px]',
-        'lg:pt-0',
-      ]"
-    >
-      <div v-if="isIscnOwner" class="flex justify-center items-center gap-[4px] mr-[8px]">
-        <Button preset="plain" text="Edit ISCN" @click="handleEdit">
-          <template #prepend>
-            <IconEdit />
-          </template>
-        </Button>
-        <div class="h-[20px] w-[2px] bg-medium-gray" />
-      </div>
-      <Button preset="tertiary" :text="$t('NFTPortal.button.download.iscn')" @click="handleClickDownload">
-        <template #prepend>
-          <IconDownload />
-        </template>
-      </Button>
-      <Button
-        v-if="isShowMintButton && isNFTBook"
-        preset="secondary"
-        class="w-full lg:w-auto"
-        :text="$t('NFTPortal.button.mint.book')"
-        @click="clickMintNFTBook"
-      />
-      <Button
-        v-if="isShowMintButton && !isNFTBook"
-        preset="secondary"
-        class="w-full lg:w-auto"
-        :to="localeLocation({ name: 'nft-iscn-iscnId', params: { iscnId: iscnId }, query: mintQueries })"
-        :text="$t('NFTPortal.button.mint')"
-      />
-      <div v-if="!!classId" class="flex justify-center items-center p-[4px] rounded-[12px] border-like-cyan-light border-[2px]">
-        <Button
-          preset="tertiary"
-          :text="$t('NFTPortal.button.check.nft')"
-          :href="likerlandNftUrl"
-          target="_blank"
-        >
-          <template #append>
-            <IconArrowRight />
-          </template>
-        </Button>
-      </div>
-    </div>
+    <IscnEditBar
+      :is-iscn-owner="isIscnOwner"
+      :iscn-id="iscnId"
+      :is-show-mint-button="isShowMintButton"
+      :is-nft-book="isNFTBook"
+      :mint-queries="mintQueries"
+      :class-id="classId"
+      :likerland-nft-url="likerlandNftUrl"
+      :should-show-mint-button="isShowMintButton"
+      @click-edit="handleEdit"
+      @click-download="handleClickDownload"
+      @click-mint-book="clickMintNFTBook"
+    />
     <div
       :class="[
         'flex',
@@ -966,6 +928,7 @@ export default class ViewIscnIdPage extends Vue {
   }
 
   handleClickDownload() {
+    logTrackerEvent(this, 'ISCNView', 'ClickDownload', this.iscnId, 1)
     const generateData = {
       contentMetadata: {
         ...this.metadata,
@@ -990,6 +953,7 @@ export default class ViewIscnIdPage extends Vue {
   }
 
   handleEdit() {
+    logTrackerEvent(this, 'ISCNView', 'ClickEdit', this.iscnId, 1)
     this.$router.replace(
       this.localeLocation({
         name: 'edit-iscnId',