-
-
Notifications
You must be signed in to change notification settings - Fork 367
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10911 from hassnian/issue-10845-0
feat: Offers tab in `profile` and `gallery item`
- Loading branch information
Showing
33 changed files
with
1,334 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <template> | ||
| <div class="h-full flex flex-col"> | ||
| <GalleryItemOffersTable | ||
| :nft-id="nftId" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import GalleryItemOffersTable from './GalleryItemOffersTable.vue' | ||
| defineProps<{ | ||
| nftId: string | ||
| }>() | ||
| </script> |
198 changes: 198 additions & 0 deletions
198
components/gallery/GalleryItemTabsPanel/GalleryItemOffersTable.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| <template> | ||
| <div | ||
| class="gallery-item-offers-table flex flex-col !py-6" | ||
| data-testid="gallery-item-offers-table" | ||
| > | ||
| <div | ||
| v-if="loading" | ||
| class="p-5" | ||
| > | ||
| <NeoSkeleton | ||
| animated | ||
| size="large" | ||
| :count="3" | ||
| /> | ||
| </div> | ||
| <NeoTable | ||
| v-else-if="offers.length" | ||
| :data="offers" | ||
| hoverable | ||
| class="py-5 max-md:!top-0" | ||
| > | ||
| <!-- price --> | ||
| <NeoTableColumn | ||
| v-slot="{ row }: {row: NFTOfferItem}" | ||
| width="20%" | ||
| field="price" | ||
| :label="$t('amount')" | ||
| > | ||
| <p | ||
| v-if="Number(row.price)" | ||
| class="flex gap-2" | ||
| > | ||
| <span> {{ format(row.price).amount }} </span> | ||
| <span class="text-k-grey"> {{ format(row.price).price }} </span> | ||
| </p> | ||
| </NeoTableColumn> | ||
|
|
||
| <!-- expiration --> | ||
| <NeoTableColumn | ||
| v-slot="{ row }: {row: NFTOfferItem}" | ||
| width="15%" | ||
| field="expiration" | ||
| :label="$t('expiration')" | ||
| > | ||
| <p class="capitalize"> | ||
| {{ row.expirationDate ? formatToNow(row.expirationDate, false) : '--' }} | ||
| </p> | ||
| </NeoTableColumn> | ||
|
|
||
| <!-- from --> | ||
| <NeoTableColumn | ||
| v-slot="{ row }: {row: NFTOfferItem}" | ||
| width="20%" | ||
| field="caller" | ||
| :label="$t('tabs.tabActivity.from')" | ||
| > | ||
| <div class="flex items-center gap-2"> | ||
| <ProfileAvatar | ||
| :size="24" | ||
| :address="row.caller" | ||
| /> | ||
|
|
||
| <nuxt-link | ||
| :to="`/${urlPrefix}/u/${row.caller}`" | ||
| class="text-k-blue hover:text-k-blue-hover" | ||
| > | ||
| <Identity | ||
| :address="row.caller" | ||
| /> | ||
| </nuxt-link> | ||
| </div> | ||
| </NeoTableColumn> | ||
|
|
||
| <!-- action --> | ||
| <NeoTableColumn | ||
| v-slot="{ row }" | ||
| width="10%" | ||
| > | ||
| <OfferOwnerButton | ||
| class="max-md:!w-full" | ||
| :offer="row as NFTOfferItem" | ||
| @click="selectOffer" | ||
| /> | ||
| </NeoTableColumn> | ||
| </NeoTable> | ||
| <div | ||
| v-else | ||
| class="p-5" | ||
| > | ||
| {{ $t('tabs.tabActivity.empty') }} | ||
| </div> | ||
| </div> | ||
|
|
||
| <OfferOverviewModal | ||
| v-model="isWithdrawOfferModalOpen" | ||
| :offer="selectedOffer!" | ||
| @close="closeOfferOverviewModal" | ||
| /> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { | ||
| NeoSkeleton, | ||
| NeoTable, | ||
| NeoTableColumn, | ||
| } from '@kodadot1/brick' | ||
| import type { UnwrapRef } from 'vue' | ||
| import { formatToNow } from '@/utils/format/time' | ||
| import Identity from '@/components/identity/IdentityIndex.vue' | ||
| import useSubscriptionGraphql from '@/composables/useSubscriptionGraphql' | ||
| const props = defineProps<{ | ||
| nftId: string | ||
| }>() | ||
| const { urlPrefix } = usePrefix() | ||
| const { format } = useFormatAmount() | ||
| const isWithdrawOfferModalOpen = ref(false) | ||
| const loading = ref(false) | ||
| const offers = ref<UnwrapRef<ReturnType<typeof useOffers>['offers']>>([]) | ||
| const selectedOffer = ref<NFTOfferItem>() | ||
| const stopWatch = ref(() => {}) | ||
| useSubscriptionGraphql({ | ||
| query: ` | ||
| offers ( | ||
| where: { status_eq: ACTIVE, desired: { id_eq: "${props.nftId}" } } | ||
| orderBy: blockNumber_DESC | ||
| ) { | ||
| id | ||
| }`, | ||
| onChange: ({ data: { offers: newOffers } }) => { | ||
| stopWatch.value?.() | ||
| offers.value = [] | ||
| const { offers: offersData, loading: offersLoading } = useOffers({ | ||
| where: { id_in: newOffers.map(offer => offer.id) }, | ||
| }) | ||
| stopWatch.value = watchEffect(() => { | ||
| loading.value = offersLoading.value | ||
| offers.value = offersData.value | ||
| }) | ||
| }, | ||
| }) | ||
| const selectOffer = (offer: NFTOfferItem) => { | ||
| selectedOffer.value = offer | ||
| isWithdrawOfferModalOpen.value = true | ||
| } | ||
| const closeOfferOverviewModal = () => { | ||
| isWithdrawOfferModalOpen.value = false | ||
| selectedOffer.value = undefined | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import '@/assets/styles/abstracts/variables'; | ||
| .gallery-item-offers-table { | ||
| overflow-y: auto; | ||
| @include desktop { | ||
| :deep(table tr > *:first-child) { | ||
| padding-left: 2rem; | ||
| } | ||
| :deep(table tbody > tr > td) { | ||
| vertical-align: middle; | ||
| height: 3.25rem; | ||
| &:last-child { | ||
| padding: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| @include touch { | ||
| .gallery-item-offers-table { | ||
| :deep(.o-table__td) { | ||
| @apply border-inherit; | ||
| padding: 0; | ||
| &:before { | ||
| font-weight: 400 !important; | ||
| } | ||
| } | ||
| :deep(.o-table__td:not(:nth-last-child(1)):not(:nth-last-child(2))) { | ||
| padding: 0 0 1rem 0; | ||
| } | ||
| .o-table__td:last-child button { | ||
| margin-top: 1.5rem | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.