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.

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

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

Merged
merged 4 commits into from
Feb 15, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
96 changes: 96 additions & 0 deletions components/IscnEditBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<template>
<div
:class="[
'flex',
'justify-end',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that in /new, the items should be aligned to the center instead of to the right.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'items-center',
'w-full',
'pt-[24px]',
'gap-[8px]',
'lg:pt-0',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the padding-top is depends on parent, please inject it in parent

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

]"
>
<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>
41 changes: 29 additions & 12 deletions components/IscnUploadedInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this prop and how is it different from is show mint button above?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@click-edit="handleEdit"
@click-download="handleClickDownload"
@click-mint-book="clickMintNFTBook"
/>

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

Expand Down Expand Up @@ -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>
66 changes: 15 additions & 51 deletions pages/view/_iscnId/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do? Can we just get route query in component instead of passing prop?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

: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 +928,7 @@ export default class ViewIscnIdPage extends Vue {
}

handleClickDownload() {
logTrackerEvent(this, 'ISCNView', 'ClickDownload', this.iscnId, 1)
const generateData = {
contentMetadata: {
...this.metadata,
Expand All @@ -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',
Expand Down
Loading