Skip to content

Commit

Permalink
🚸 Enable copy iscnId on new page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AuroraHuang22 @williamchong
AuroraHuang22 authored and williamchong committed Dec 29, 2023
1 parent 92cf94f commit 0c39a47
Showing 1 changed file with 152 additions and 169 deletions.
321 changes: 152 additions & 169 deletions components/IscnUploadedInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -45,143 +45,113 @@
</Button>
</div>
-->
<slot name="card-footer" />
<Divider class="mb-[24px]" />
<div
:class="[
'sm:flex',
'items-start',
'justify-between',
'mb-[28px]',
]"
<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"
>
<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',
]"
<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"
/>
<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>
<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]"
</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"
>
<Keyword
v-for="item in keywords"
:key="item.key"
:keyword="item"
:class="[
'mr-[8px]',
'mb-[4px]',
]"
/>
</FormField>
<slot name="footer" />
</Card>
{{ 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">
Expand All @@ -190,6 +160,8 @@ 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') },
Expand All @@ -202,6 +174,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
}
Expand All @@ -227,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() {
Expand All @@ -243,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,
Expand All @@ -252,5 +226,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>

0 comments on commit 0c39a47

Please sign in to comment.