Skip to content

Commit

Permalink
💄 Reorder status ui component
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamchong
williamchong committed Mar 8, 2024
1 parent b0ac6a9 commit b565ca9
Show file tree
Hide file tree
Showing 2 changed files with 146 additions and 146 deletions.
102 changes: 51 additions & 51 deletions pages/nft-book-store/collection/status/[collectionId].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,57 +21,6 @@
</UProgress>

<template v-if="bookStoreApiStore.isAuthenticated">
<UCard :ui="{ body: { padding: '' } }">
<template #header>
<h3 class="font-bold font-mono">
Books in Collection
</h3>
</template>
<UFormGroup>
<UTable
:columns="[{ key: 'classId', label: 'Class ID' }, { key: 'name', label: 'Book Name'}]"
:rows="collectionListingInfo?.classIds?.map((classId, index) => ({ index, classId, name: getClassMetadataById(classId)?.name }))"
/>
</UFormGroup>
<table class="w-full divide-y text-sm">
<thead class="border-b-2">
<tr class="text-left">
<th class="px-3 py-4 text-right">
Price (USD)
</th>
<th class="px-3 py-4 text-right">
Edit
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-3 py-4 text-right">
{{ collectionListingInfo.priceInDecimal / 100 }}
</td>
<td class="text-center">
<UButton
icon="i-heroicons-document-magnifying-glass"
:to="{
name: 'nft-book-store-collection-status-collectionId-edit',
params: { collectionId }
}"
variant="soft"
color="gray"
/>
</td>
</tr>
</tbody>
</table>
</UCard>

<ShippingRatesRateTable
:read-only="false"
:is-loading="isUpdatingShippingRates"
:shipping-info="collectionListingInfo.shippingRates"
@on-update-shipping-rates="updateShippingRates"
/>

<UCard :ui="{ body: { padding: '' } }">
<template #header>
<h3 class="font-bold font-mono">
Expand Down Expand Up @@ -167,6 +116,57 @@
</UTable>
</UCard>

<UCard :ui="{ body: { padding: '' } }">
<template #header>
<h3 class="font-bold font-mono">
Books in Collection
</h3>
</template>
<UFormGroup>
<UTable
:columns="[{ key: 'classId', label: 'Class ID' }, { key: 'name', label: 'Book Name'}]"
:rows="collectionListingInfo?.classIds?.map((classId, index) => ({ index, classId, name: getClassMetadataById(classId)?.name }))"
/>
</UFormGroup>
<table class="w-full divide-y text-sm">
<thead class="border-b-2">
<tr class="text-left">
<th class="px-3 py-4 text-right">
Price (USD)
</th>
<th class="px-3 py-4 text-right">
Edit
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-3 py-4 text-right">
{{ collectionListingInfo.priceInDecimal / 100 }}
</td>
<td class="text-center">
<UButton
icon="i-heroicons-document-magnifying-glass"
:to="{
name: 'nft-book-store-collection-status-collectionId-edit',
params: { collectionId }
}"
variant="soft"
color="gray"
/>
</td>
</tr>
</tbody>
</table>
</UCard>

<ShippingRatesRateTable
:read-only="false"
:is-loading="isUpdatingShippingRates"
:shipping-info="collectionListingInfo.shippingRates"
@on-update-shipping-rates="updateShippingRates"
/>

<UCard
v-if="userIsOwner"
:ui="{
Expand Down
190 changes: 95 additions & 95 deletions pages/nft-book-store/status/[classId].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,101 @@
</UProgress>

<template v-if="bookStoreApiStore.isAuthenticated">
<UCard :ui="{ body: { padding: '' } }">
<template #header>
<h3 class="font-bold font-mono">
Status
</h3>
</template>

<UTable
:columns="[
{ key: 'pendingAction', label: 'Pending Action' },
{ key: 'sold', label: 'Sold' },
{ key: 'stock', label: 'Stock' },
]"
:rows="[
{
pendingAction: classListingInfo.pendingNFTCount || 0,
sold: classListingInfo.sold || 0,
stock: classListingInfo.stock || 0
},
]"
>
<template #pendingAction-data="{ row }">
<UBadge
v-if="row.pendingAction"
:label="`${row.pendingAction}`"
color="red"
:ui="{ rounded: 'rounded-full' }"
/>
<template v-else>
{{ row.pendingAction }}
</template>
</template>
</UTable>
</UCard>

<UCard
:ui="{
header: { base: 'flex justify-between items-center gap-4' },
body: { padding: '' },
}"
>
<template #header>
<h3 class="font-bold font-mono">
Orders
</h3>

<UInput v-model="searchInput" icon="i-heroicons-magnifying-glass-20-solid" placeholder="Search..." />
</template>

<UTable
:columns="orderTableColumns"
:rows="ordersTableRows"
>
<template #email-data="{ row }">
<UButton
:label="row.email"
:to="`mailto:${row.email}`"
variant="link"
:padded="false"
/>
</template>
<template #wallet-data="{ row }">
<UTooltip :text="row.wallet">
<UButton
class="font-mono"
:label="row.shortenWallet"
:to="row.walletLink"
variant="link"
:padded="false"
size="xs"
target="_blank"
/>
</UTooltip>
</template>
<template #status-data="{ row }">
<UBadge
:color="row.statusLabelColor"
:label="row.statusLabel"
variant="outline"
:ui="{ rounded: 'rounded-full' }"
/>
</template>
<template #actions-data="{ row }">
<UDropdown :items="row.actions">
<UButton
:class="{ hidden: !row.actions.length }"
icon="i-heroicons-ellipsis-horizontal-20-solid"
color="gray"
variant="ghost"
/>
</UDropdown>
</template>
</UTable>
</UCard>

<UCard :ui="{ body: { padding: '' } }">
<template #header>
<div class="flex justify-between items-center">
Expand Down Expand Up @@ -161,101 +256,6 @@
@on-update-shipping-rates="updateShippingRates"
/>

<UCard :ui="{ body: { padding: '' } }">
<template #header>
<h3 class="font-bold font-mono">
Status
</h3>
</template>

<UTable
:columns="[
{ key: 'pendingAction', label: 'Pending Action' },
{ key: 'sold', label: 'Sold' },
{ key: 'stock', label: 'Stock' },
]"
:rows="[
{
pendingAction: classListingInfo.pendingNFTCount || 0,
sold: classListingInfo.sold || 0,
stock: classListingInfo.stock || 0
},
]"
>
<template #pendingAction-data="{ row }">
<UBadge
v-if="row.pendingAction"
:label="`${row.pendingAction}`"
color="red"
:ui="{ rounded: 'rounded-full' }"
/>
<template v-else>
{{ row.pendingAction }}
</template>
</template>
</UTable>
</UCard>

<UCard
:ui="{
header: { base: 'flex justify-between items-center gap-4' },
body: { padding: '' },
}"
>
<template #header>
<h3 class="font-bold font-mono">
Orders
</h3>

<UInput v-model="searchInput" icon="i-heroicons-magnifying-glass-20-solid" placeholder="Search..." />
</template>

<UTable
:columns="orderTableColumns"
:rows="ordersTableRows"
>
<template #email-data="{ row }">
<UButton
:label="row.email"
:to="`mailto:${row.email}`"
variant="link"
:padded="false"
/>
</template>
<template #wallet-data="{ row }">
<UTooltip :text="row.wallet">
<UButton
class="font-mono"
:label="row.shortenWallet"
:to="row.walletLink"
variant="link"
:padded="false"
size="xs"
target="_blank"
/>
</UTooltip>
</template>
<template #status-data="{ row }">
<UBadge
:color="row.statusLabelColor"
:label="row.statusLabel"
variant="outline"
:ui="{ rounded: 'rounded-full' }"
/>
</template>
<template #actions-data="{ row }">
<UDropdown :items="row.actions">
<UButton
:class="{ hidden: !row.actions.length }"
icon="i-heroicons-ellipsis-horizontal-20-solid"
color="gray"
variant="ghost"
/>
</UDropdown>
</template>
</UTable>
</UCard>

<UCard
v-if="userIsOwner"
:ui="{
Expand Down

0 comments on commit b565ca9

Please sign in to comment.