Skip to content

Commit

Permalink
Merge pull request kodadot#3502 from kodadot/feat-pagination-global-o…
Browse files Browse the repository at this point in the history 
…ffers

kodadot#3501 Pagination for global offers for Basilisk
  • Loading branch information
@yangwao
yangwao committed Jul 23, 2022
2 parents a760c24 + d393b23 commit 408e197
Showing 1 changed file with 136 additions and 114 deletions.
250 changes: 136 additions & 114 deletions components/bsx/Offer/OfferTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,128 @@
<template>
<b-table :data="displayOffers">
<div class="has-text-centered offer-title">
{{ $t('nft.offer.title') }}
</div>
<b-table-column
v-if="isBsxStats"
cell-class="is-vcentered is-narrow"
:label="$t('offer.collection')"
v-slot="props"
field="nft.collection.name"
sortable>
<nuxt-link :to="`/bsx/collection/${props.row.nft.collection.id}`">
<p
class="limit-width-text"
:title="
props.row.nft.collection.name
? props.row.nft.collection.name
: props.row.nft.collection.id
">
{{
props.row.nft.collection.name
? props.row.nft.collection.name
: props.row.nft.collection.id
}}
</p>
</nuxt-link>
</b-table-column>
<b-table-column
v-if="isBsxStats"
cell-class="is-vcentered is-narrow"
:label="$t('offer.nftName')"
v-slot="props"
field="nft.name"
sortable>
<nuxt-link :to="`/bsx/gallery/${props.row.nft.id}`">
<p
class="limit-width-text"
:title="props.row.nft.name ? props.row.nft.name : props.row.nft.id">
{{ props.row.nft.name ? props.row.nft.name : props.row.nft.id }}
</p>
</nuxt-link>
</b-table-column>
<b-table-column
cell-class="is-vcentered is-narrow"
field="caller"
:label="$t('offer.caller')"
v-slot="props"
sortable>
<nuxt-link :to="{ name: 'bsx-u-id', params: { id: props.row.caller } }">
<Identity :address="props.row.caller" inline noOverflow />
</nuxt-link>
</b-table-column>

<b-table-column
cell-class="is-vcentered is-narrow"
field="formatPrice"
:label="$t('offer.price')"
v-slot="props"
sortable>
<Money :value="props.row.price" inline />
</b-table-column>
<b-table-column
v-if="!isBsxStats"
cell-class="is-vcentered is-narrow"
field="expiration"
:label="$t('offer.expiration')"
v-slot="props"
sortable>
{{ calcExpirationTime(props.row.expiration) }}
</b-table-column>
<b-table-column
v-if="!isBsxStats"
cell-class="is-vcentered is-narrow"
:label="$t('offer.action')"
v-slot="props"
width="120"
sortable>
<b-button
v-if="props.row.caller === accountId"
type="is-orange"
outlined
icon-left="times"
@click="tellFrens(props.row.caller)" />
<b-button
v-else-if="isOwner"
type="is-success"
outlined
icon-left="money-bill"
@click="tellFrens(props.row.caller)" />
</b-table-column>
<b-table-column
v-if="isBsxStats"
field="status"
cell-class="is-vcentered is-narrow"
:label="$t('nft.offer.status')"
v-slot="props"
sortable>
<p>{{ props.row.status }}</p></b-table-column
>
<b-table-column
v-if="isBsxStats"
field="Date"
cell-class="is-vcentered is-narrow"
:label="$t('nft.offer.date')"
v-slot="props"
><p>
{{ new Date(props.row.createdAt) | formatDistanceToNow }}
</p></b-table-column
>
<template #empty>
<div class="has-text-centered">
{{ $t('nft.offer.empty') }}
<div>
<Pagination
:total="total"
:perPage="itemsPerPage"
v-model="currentPage"
replace
enableListenKeyboardEvent
preserveScroll />
<b-table :data="showList">
<div class="has-text-centered offer-title">
{{ $t('nft.offer.title') }}
</div>
</template>
</b-table>
<b-table-column
v-if="isBsxStats"
cell-class="is-vcentered is-narrow"
:label="$t('offer.collection')"
v-slot="props"
field="nft.collection.name"
sortable>
<nuxt-link :to="`/bsx/collection/${props.row.nft.collection.id}`">
<p
class="limit-width-text"
:title="
props.row.nft.collection.name
? props.row.nft.collection.name
: props.row.nft.collection.id
">
{{
props.row.nft.collection.name
? props.row.nft.collection.name
: props.row.nft.collection.id
}}
</p>
</nuxt-link>
</b-table-column>
<b-table-column
v-if="isBsxStats"
cell-class="is-vcentered is-narrow"
:label="$t('offer.nftName')"
v-slot="props"
field="nft.name"
sortable>
<nuxt-link :to="`/bsx/gallery/${props.row.nft.id}`">
<p
class="limit-width-text"
:title="props.row.nft.name ? props.row.nft.name : props.row.nft.id">
{{ props.row.nft.name ? props.row.nft.name : props.row.nft.id }}
</p>
</nuxt-link>
</b-table-column>
<b-table-column
cell-class="is-vcentered is-narrow"
field="caller"
:label="$t('offer.caller')"
v-slot="props"
sortable>
<nuxt-link :to="{ name: 'bsx-u-id', params: { id: props.row.caller } }">
<Identity :address="props.row.caller" inline noOverflow />
</nuxt-link>
</b-table-column>

<b-table-column
cell-class="is-vcentered is-narrow"
field="formatPrice"
:label="$t('offer.price')"
v-slot="props"
sortable>
<Money :value="props.row.price" inline />
</b-table-column>
<b-table-column
v-if="!isBsxStats"
cell-class="is-vcentered is-narrow"
field="expiration"
:label="$t('offer.expiration')"
v-slot="props"
sortable>
{{ calcExpirationTime(props.row.expiration) }}
</b-table-column>
<b-table-column
v-if="!isBsxStats"
cell-class="is-vcentered is-narrow"
:label="$t('offer.action')"
v-slot="props"
width="120"
sortable>
<b-button
v-if="props.row.caller === accountId"
type="is-orange"
outlined
icon-left="times"
@click="tellFrens(props.row.caller)" />
<b-button
v-else-if="isOwner"
type="is-success"
outlined
icon-left="money-bill"
@click="tellFrens(props.row.caller)" />
</b-table-column>
<b-table-column
v-if="isBsxStats"
field="status"
cell-class="is-vcentered is-narrow"
:label="$t('nft.offer.status')"
v-slot="props"
sortable>
<p>{{ props.row.status }}</p></b-table-column
>
<b-table-column
v-if="isBsxStats"
field="Date"
cell-class="is-vcentered is-narrow"
:label="$t('nft.offer.date')"
v-slot="props"
><p>
{{ new Date(props.row.createdAt) | formatDistanceToNow }}
</p></b-table-column
>
<template #empty>
<div class="has-text-centered">
{{ $t('nft.offer.empty') }}
</div>
</template>
</b-table>
</div>
</template>

<script lang="ts">
Expand All @@ -127,6 +136,7 @@ import { formatBsxBalanceToNumber } from '~/utils/format/balance'
const components = {
Identity: () => import('@/components/shared/format/Identity.vue'),
Money: () => import('@/components/shared/format/Money.vue'),
Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
}
@Component({ components, filters: { formatDistanceToNow } })
Expand All @@ -135,6 +145,9 @@ export default class OfferTable extends mixins(OfferMixin) {
public offers!: Offer[]
@Prop(Boolean) public isOwner!: boolean
@Prop(Boolean) public isBsxStats!: boolean
public currentBlock = 0
public itemsPerPage = 20
private currentPage = parseInt(this.$route.query?.page as string) || 1
get displayOffers() {
return this.offers.map((offer) => ({
Expand All @@ -150,6 +163,15 @@ export default class OfferTable extends mixins(OfferMixin) {
get urlPrefix() {
return this.$store.getters.currentUrlPrefix
}
get total(): number {
return this.offers.length
}
get showList(): any[] {
const endIndex = this.currentPage * this.itemsPerPage
return this.displayOffers.slice(endIndex - this.itemsPerPage, endIndex)
}
}
</script>
<style scoped>
Expand Down

1 comment on commit 408e197

@vercel
Copy link

@vercel vercel bot commented on 408e197 Jul 23, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

nft-gallery – ./

nft-gallery-git-main-preschian.vercel.app
nft-gallery-ruddy.vercel.app
nft-gallery-preschian.vercel.app

Please sign in to comment.