markomarkovic/pca-pijac
1
0
Fork 0
Code Releases Activity

vendors page and pagination

Browse Source
This commit is contained in:
Marko Marković
2023-06-14 23:36:34 +04:00
parent d7ed76ae6e
commit 0bd0c0acb2
5 changed files with 9815 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/components/layout.js
View File

@@ -1,47 +1,13 @@
import Header from '~/components/header'
import { Container } from '@chakra-ui/react'
import Footer from '~/components/footer'
import directus from '~/lib/directus'
import { Html, Head, Main, NextScript } from 'next/document'
// async function getGlobals() {
// return directus.items('globals').readOne(process.env.GLOBALS_ID)
// }
// export async function generateMetadata() {
// const globals = await getGlobals()
// return {
// title: globals.meta_title,
// description: globals.meta_description,
// }
// }
// export default async function RootLayout({ children }) {
// const globals = await getGlobals()
// return (
// <H lang="en">
// <body>
// <Providers>
// <Container maxW="3xl">
// <Header siteName={globals.site_name} />
// {children}
// <Footer />
// </Container>
// </Providers>
// </body>
// </H>
// )
// }
import Header from '~/components/header'
export default function Layout({ children }) {
return (
<>
<Container maxW={'8xl'}>
<Header />
<main>{children}</main>
<Footer />
</>
</Container>
)
}

1
frontend/package.json
View File

@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@ajna/pagination": "1.4.19",
"@chakra-ui/icons": "2.0.19",
"@chakra-ui/next-js": "2.1.4",
"@chakra-ui/react": "2.7.0",

108
frontend/pages/vendors/index.js vendored Normal file
View File

@@ -0,0 +1,108 @@
import {
Pagination,
PaginationContainer,
PaginationNext,
PaginationPage,
PaginationPageGroup,
PaginationPrevious,
usePagination,
} from '@ajna/pagination'
import { Link } from '@chakra-ui/next-js'
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Text } from '@chakra-ui/react'
import { useRouter } from 'next/navigation'
import directus from '~/lib/directus'
const PER_PAGE = 12
export const getServerSideProps = async ({ query }) => {
const page = query?.page || 1
const sort = query?.sort || 'name'
const { data: vendors, meta } = await directus.items('vendors').readByQuery({
fields: [
//
'*',
],
limit: PER_PAGE,
page,
meta: ['filter_count'],
sort,
})
return { props: { vendors, meta, page } }
}
export default function VendorsPage({ vendors, meta, page }) {
const router = useRouter()
const { pages, pagesCount, currentPage, setCurrentPage, isDisabled } = usePagination({
total: meta.filter_count,
limits: {
outer: 1,
inner: 1,
},
initialState: {
pageSize: PER_PAGE,
isDisabled: false,
currentPage: page,
},
})
const handlePageChange = (nextPage) => {
setCurrentPage(nextPage)
router.replace(`/vendors?page=${nextPage}`)
}
return (
<div>
<Heading size="lg" my={8}>
Vendors
</Heading>
<SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
{vendors.map((v) => (
<LinkBox as={Card} rounded={4} key={v.id}>
<Image
roundedTop={4}
objectFit="cover"
src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
alt="Chakra UI"
/>
<CardBody>
<LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
{v.name}
</LinkOverlay>
</CardBody>
</LinkBox>
))}
</SimpleGrid>
<Pagination
pagesCount={pagesCount}
currentPage={currentPage}
isDisabled={isDisabled}
onPageChange={handlePageChange}
>
<PaginationContainer align="center" my={4} w={'full'} justifyContent={'space-between'}>
<PaginationPrevious>
<Text>«</Text>
</PaginationPrevious>
<PaginationPageGroup align="center" mx={4}>
{pages.map((page) => (
<PaginationPage
w={10}
key={`pagination_page_${page}`}
page={page}
fontSize="sm"
_current={{
bg: 'gray.400',
}}
/>
))}
</PaginationPageGroup>
<PaginationNext>
<Text>»</Text>
</PaginationNext>
</PaginationContainer>
</Pagination>
</div>
)
}

46
frontend/pages/vendors/page.js vendored
View File

@@ -1,46 +0,0 @@
import { Link } from '@chakra-ui/next-js'
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid } from '@chakra-ui/react'
import directus from '~/lib/directus'
const PER_PAGE = 50
async function getVendors(page = 1) {
return directus.items('vendors').readByQuery({
fields: [
//
'*',
],
limit: PER_PAGE,
page,
meta: ['filter_count'],
})
}
export default async function VendorsPage({ params }) {
const { data: vendors, meta } = await getVendors()
return (
<div>
<Heading size="lg" my={8}>
Vendors <small>({meta.filter_count} total)</small>
</Heading>
<SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
{vendors.map((v) => (
<LinkBox as={Card} rounded={4}>
<Image
roundedTop={4}
objectFit="cover"
src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
alt="Chakra UI"
/>
<CardBody>
<LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
{v.name}
</LinkOverlay>
</CardBody>
</LinkBox>
))}
</SimpleGrid>
</div>
)
}

9707
frontend/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff