From e834ba87298ab5499e5beda6d3e4940aa73befa3 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 29 Dec 2023 15:52:13 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20code=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadedInfo.vue | 314 ++++++++++++++------------------
 1 file changed, 139 insertions(+), 175 deletions(-)

diff --git a/components/IscnUploadedInfo.vue b/components/IscnUploadedInfo.vue
index 39dc834c..6d32e1b8 100644
--- a/components/IscnUploadedInfo.vue
+++ b/components/IscnUploadedInfo.vue
@@ -1,38 +1,38 @@
 <template>
-    <Card
-      :class="[
-        'p-[32px]',
-        'border-[2px]',
-        'border-like-cyan',
-      ]"
-      :has-padding="false"
-    >
-      <!-- header -->
-      <IscnFormHeader :step="step" :total-step="4"/>
-      <!-- guide title -->
-      <div class="flex items-center justify-between mt-[12px] mb-[28px]">
-        <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>
-
-      <!-- ISCN card -->
-      <IscnCard
-        v-if="record"
-        :key="`${record.id}-landscape`"
-        class="mb-[16px]"
-        :record="record"
-        :is-animated="true"
-        orientation="landscape"
+  <Card
+    :class="['p-[32px]', 'border-[2px]', 'border-like-cyan']"
+    :has-padding="false"
+  >
+    <!-- header -->
+    <IscnFormHeader :step="step" :total-step="4" />
+    <!-- guide title -->
+    <div class="flex items-center justify-between mt-[12px] mb-[28px]">
+      <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>
+
+    <!-- ISCN card -->
+    <IscnCard
+      v-if="record"
+      :key="`${record.id}-landscape`"
+      class="mb-[16px]"
+      :record="record"
+      :is-animated="true"
+      orientation="landscape"
+    />
+    <!--
       <div class="flex flex-row justify-center items-center my-[16px]">
         <Button circle size="small" preset="tertiary" class="mx-[8px]">
           <IconUploadMini />
@@ -45,148 +45,113 @@
         </Button>
       </div>
       -->
-      <slot name="card-footer" />
-      <Divider class="mb-[24px]" />
-      <div
-        :class="[
-          'sm:flex',
-          'items-start',
-          'justify-between',
-          'mb-[28px]',
-        ]"
-      >
-        <Label
-          :text="type"
-          tag="div"
-          preset="p5"
-          content-class="font-semibold whitespace-nowrap text-like-green"
-          prepend-class="text-like-green"
-        >
-          <template #prepend>
-            <ISCNTypeIcon :type="type" />
-          </template>
-        </Label>
-        <Label
-          :text="recordTimestamp"
-          :class="[
-            'mt-[8px]',
-            'sm:mt-0',
-          ]"
-          tag="div"
-          preset="p6"
-          content-class="text-medium-gray"
-        />
-      </div>
-      <FormField
-        v-if="name"
-        :label="$t('iscn.meta.name')"
-        content-type="strong"
-        class="mb-[12px]"
-      >
-        {{ name }}
-      </FormField>
-      <FormField
-        v-if="description"
-        :label="$t('iscn.meta.description')"
-        class="mb-[12px]"
-      >
-        {{ description }}
-      </FormField>
-      <Divider class="mb-[12px]" />
-      <FormField
-        v-if="owner"
-        :label="$t('iscn.meta.owner')"
-        :class="[
-          'mb-[12px]',
-          'text-[14px]',
-        ]"
-      >
-        {{ owner }}
-      </FormField>
-      <FormField
-        :label="$t('iscn.meta.transaction')"
-        class="mb-[12px]"
-      >
-        <Link
-          v-if="iscnHash"
-          :class="[
-            'text-[14px]',
-            'break-all',
-          ]"
-          nofollow="true"
-          :href="transactionsURL"
-        >
-          {{ iscnHash }}
-        </Link>
-        <ProgressIndicator
-          v-else
-          class="my-[4px]"
-          preset="thin"
-        />
-      </FormField>
-      <IconDiverMini
-        :class="[
-          'mb-[12px]',
-          'text-shade-gray',
-        ]"
-      />
-      <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"
-        :label="$t('iscn.meta.content.fingerprints')"
-        class="mb-[12px]"
-      >
-        <ContentFingerprintLink
-          v-for="item in contentFingerprints"
-          :key="item.key"
-          :item="item"
-          :class="[
-            'mb-[8px]',
-            'break-all',
-            'text-[14px]',
-          ]"
-        />
-      </FormField>
-      <Divider class="mb-[24px]" />
-      <FormField
-        v-if="keywords.length"
-        :label="$t('iscn.meta.tags.title')"
-        class="mb-[12px]"
-      >
-        <Keyword
-          v-for="item in keywords"
-          :key="item.key"
-          :keyword="item"
-          :class="[
-            'mr-[8px]',
-            'mb-[4px]',
-          ]"
-        />
-      </FormField>
-      <slot name="footer" />
-       <Snackbar
-        v-model="isOpenCopiedAlert"
-        :text="$t('iscn.meta.stakeholders.wallet.copied')"
-        preset="success"
-        :timeout="2000"
+    <slot name="card-footer" />
+    <Divider class="mb-[24px]" />
+    <div :class="['sm:flex', 'items-start', 'justify-between', 'mb-[28px]']">
+      <Label
+        :text="type"
+        tag="div"
+        preset="p5"
+        content-class="font-semibold whitespace-nowrap text-like-green"
+        prepend-class="text-like-green"
       >
         <template #prepend>
-          <IconDone />
+          <ISCNTypeIcon :type="type" />
         </template>
-      </Snackbar>
-    </Card>
+      </Label>
+      <Label
+        :text="recordTimestamp"
+        :class="['mt-[8px]', 'sm:mt-0']"
+        tag="div"
+        preset="p6"
+        content-class="text-medium-gray"
+      />
+    </div>
+    <FormField
+      v-if="name"
+      :label="$t('iscn.meta.name')"
+      content-type="strong"
+      class="mb-[12px]"
+    >
+      {{ name }}
+    </FormField>
+    <FormField
+      v-if="description"
+      :label="$t('iscn.meta.description')"
+      class="mb-[12px]"
+    >
+      {{ description }}
+    </FormField>
+    <Divider class="mb-[12px]" />
+    <FormField
+      v-if="owner"
+      :label="$t('iscn.meta.owner')"
+      :class="['mb-[12px]', 'text-[14px]']"
+    >
+      {{ owner }}
+    </FormField>
+    <FormField :label="$t('iscn.meta.transaction')" class="mb-[12px]">
+      <Link
+        v-if="iscnHash"
+        :class="['text-[14px]', 'break-all']"
+        nofollow="true"
+        :href="transactionsURL"
+      >
+        {{ iscnHash }}
+      </Link>
+      <ProgressIndicator v-else class="my-[4px]" preset="thin" />
+    </FormField>
+    <IconDiverMini :class="['mb-[12px]', 'text-shade-gray']" />
+    <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"
+      :label="$t('iscn.meta.content.fingerprints')"
+      class="mb-[12px]"
+    >
+      <ContentFingerprintLink
+        v-for="item in contentFingerprints"
+        :key="item.key"
+        :item="item"
+        :class="['mb-[8px]', 'break-all', 'text-[14px]']"
+      />
+    </FormField>
+    <Divider class="mb-[24px]" />
+    <FormField
+      v-if="keywords.length"
+      :label="$t('iscn.meta.tags.title')"
+      class="mb-[12px]"
+    >
+      <Keyword
+        v-for="item in keywords"
+        :key="item.key"
+        :keyword="item"
+        :class="['mr-[8px]', 'mb-[4px]']"
+      />
+    </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>
 
 <script lang="ts">
@@ -198,7 +163,6 @@ 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') },
 })
@@ -237,7 +201,7 @@ export default class IscnUploadedInfo extends Vue {
   }
 
   get keywords(): Array<string> {
-    return this.metadata?.keywords && this.metadata?.keywords.split(',') || []
+    return (this.metadata?.keywords && this.metadata?.keywords.split(',')) || []
   }
 
   get contentFingerprints() {
@@ -253,7 +217,7 @@ export default class IscnUploadedInfo extends Vue {
       contentMetadata: {
         ...this.metadata,
         '@type': this.type,
-        '@context': "http://schema.org/",
+        '@context': 'http://schema.org/',
       },
       stakeholders: this.recordData?.stakeholders,
       contentFingerprints: this.contentFingerprints,