From 8a9d61b5049b3eeca0dd40429b05dc7e60e26671 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 24 May 2023 15:42:31 +0700 Subject: Update table-data style --- .../components/TransactionStatusBadge.jsx | 14 ++++---- src/pages/google_merchant/products/index.js | 39 +++++++++++++--------- src/styles/globals.css | 7 ++-- 3 files changed, 34 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/lib/transaction/components/TransactionStatusBadge.jsx b/src/lib/transaction/components/TransactionStatusBadge.jsx index 88467c2b..e061587c 100644 --- a/src/lib/transaction/components/TransactionStatusBadge.jsx +++ b/src/lib/transaction/components/TransactionStatusBadge.jsx @@ -1,32 +1,32 @@ const TransactionStatusBadge = ({ status }) => { let badgeProps = { - className: ['h-fit md:text-caption-2'], + className: ['h-fit md:text-caption-2 whitespace-nowrap'], text: '' } switch (status) { case 'cancel': badgeProps.className.push('badge-solid-red') - badgeProps.text = 'Pesanan batal' + badgeProps.text = 'Pesanan Batal' break case 'draft': badgeProps.className.push('badge-red') - badgeProps.text = 'Pending quotation' + badgeProps.text = 'Pending Quotation' break case 'waiting': badgeProps.className.push('badge-yellow') - badgeProps.text = 'Pesanan diterima' + badgeProps.text = 'Pesanan Diterima' break case 'sale': badgeProps.className.push('badge-yellow') - badgeProps.text = 'Pesanan diproses' + badgeProps.text = 'Pesanan Diproses' break case 'shipping': badgeProps.className.push('badge-green') - badgeProps.text = 'Pesanan dikirim' + badgeProps.text = 'Pesanan Dikirim' break case 'partial_shipping': badgeProps.className.push('badge-green') - badgeProps.text = 'Dikirim sebagian' + badgeProps.text = 'Dikirim Sebagian' break case 'done': badgeProps.className.push('badge-solid-green') diff --git a/src/pages/google_merchant/products/index.js b/src/pages/google_merchant/products/index.js index 38b37d29..a1f59d39 100644 --- a/src/pages/google_merchant/products/index.js +++ b/src/pages/google_merchant/products/index.js @@ -1,35 +1,42 @@ import productSearchApi from '@/lib/product/api/productSearchApi' import _ from 'lodash-contrib' +const limit = 5000 + export async function getServerSideProps() { - const limit = 5000 const queries = { limit: 1, priceFrom: 1, fq: 'image_s:["" TO *]' } const products = await productSearchApi({ query: _.toQuery(queries) }) - const pageTotal = Math.ceil(products.response.numFound / limit) + const { numFound } = products.response + const pageTotal = Math.ceil(numFound / limit) - return { props: { pageTotal } } + return { props: { pageTotal, numFound } } } -export default function GoogleMerchantPage({ pageTotal }) { +export default function GoogleMerchantPage({ pageTotal, numFound }) { const numberArray = Array.from({ length: pageTotal }, (_, index) => index) return (
-

Google Merchant:

- {numberArray.map((number) => ( - - Page {number + 1} - - ))} +

Google Merchant:

+ {numberArray.map((number) => { + const currentPage = number + 1 + const remainingProducts = numFound - limit * number + const productCount = currentPage == pageTotal ? remainingProducts : limit + return ( + + Page {currentPage} - ({productCount}) Products + + ) + })}
) } diff --git a/src/styles/globals.css b/src/styles/globals.css index f1e9f5b1..00c4d08f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -465,17 +465,18 @@ button { } .table-data thead th { - @apply font-medium; + @apply font-medium whitespace-nowrap; } .table-data thead th, .table-data tbody td { - @apply p-3 + @apply px-3 + py-4 text-center; } .table-data tbody td { - @apply text-gray_r-12/90; + @apply text-gray_r-12/90 first:whitespace-nowrap; } .table-data tbody tr { -- cgit v1.2.3