Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TAS-1062]💄 Add ISCN edit bar to the /new page #438

Merged
merged 4 commits into from
Feb 15, 2024
Merged

[TAS-1062]💄 Add ISCN edit bar to the /new page #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8981e2c
💄 Add ISCN edit bar to the /new page
AuroraHuang22 Jan 31, 2024
33a09c1
🎨 Remove duplicate props
AuroraHuang22 Feb 7, 2024
07e3a68
🐛 Fix missing data
AuroraHuang22 Feb 7, 2024
c589794
💄 Adjust UI of edit bar
AuroraHuang22 Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions components/IscnEditBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template>
<div
:class="[
'flex',
'justify-center',
'items-center',
'gap-[8px]',
]"
>
<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
class="flex flex-shrink-0"
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="handleClickMintNFTBook"
/>
<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(String) readonly classId!: string
@Prop(String) readonly likerlandNftUrl!: string

get mintQueries() {
return this.$route.query;
}

handleClickDownload() {
this.$emit('click-download', this.iscnId)
}

handleEdit() {
this.$emit('click-edit', this.iscnId)
}

handleClickMintNFTBook() {
this.$emit('click-mint-book', this.iscnId)
}
}
</script>
40 changes: 28 additions & 12 deletions components/IscnUploadedInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@
<!-- 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'"
@click-edit="handleEdit"
@click-download="handleClickDownload"
@click-mint-book="clickMintNFTBook"
/>

<!-- ISCN card -->
<IscnCard
Expand Down Expand Up @@ -159,7 +160,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'

Expand Down Expand Up @@ -228,12 +229,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>
67 changes: 16 additions & 51 deletions pages/view/_iscnId/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,60 +79,23 @@
'max-w-[960px]',
'mx-auto',
'px-[8px]',
'py-[24px]',
'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
class="ml-auto"
:is-iscn-owner="isIscnOwner"
:iscn-id="iscnId"
:is-show-mint-button="isShowMintButton"
:is-nft-book="isNFTBook"
: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',
Expand Down Expand Up @@ -966,6 +929,7 @@ export default class ViewIscnIdPage extends Vue {
}

handleClickDownload() {
logTrackerEvent(this, 'ISCNView', 'ClickDownload', this.iscnId, 1)
const generateData = {
contentMetadata: {
...this.metadata,
Expand All @@ -990,6 +954,7 @@ export default class ViewIscnIdPage extends Vue {
}

handleEdit() {
logTrackerEvent(this, 'ISCNView', 'ClickEdit', this.iscnId, 1)
this.$router.replace(
this.localeLocation({
name: 'edit-iscnId',
Expand Down
Loading