Skip to content

Commit 41b4de9

Browse files
sanjaypinnasanjaypinna
committed
update dataset listing page
1 parent 13e845c commit 41b4de9

File tree

4 files changed

+125
-51
lines changed

4 files changed

+125
-51
lines changed

‎app/[locale]/(user)/datasets/dataset.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
border-radius: 8px;
1010
}
1111
}
12+

‎app/[locale]/(user)/datasets/page.tsx‎

Lines changed: 116 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
'use client';
22

33
import React, { useEffect, useReducer, useState } from 'react';
4+
import Link from 'next/link';
45
import { useRouter } from 'next/navigation';
56
import { fetchDatasets } from '@/fetch';
67
import {
78
Button,
9+
ButtonGroup,
10+
Card,
811
Divider,
12+
Icon,
913
Pill,
1014
SearchInput,
1115
Select,
@@ -16,8 +20,8 @@ import {
1620

1721
import { cn } from '@/lib/utils';
1822
import BreadCrumbs from '@/components/BreadCrumbs';
23+
import { Icons } from '@/components/icons';
1924
import GraphqlPagination from '../../dashboard/components/GraphqlPagination/graphqlPagination';
20-
import Card from './components/Card';
2125
import Filter from './components/FIlter/Filter';
2226
import Styles from './dataset.module.scss';
2327

@@ -183,6 +187,7 @@ const DatasetsListing = () => {
183187
const count = facets?.total ?? 0;
184188
const datasetDetails = facets?.results ?? [];
185189
const [queryParams, setQueryParams] = useReducer(queryReducer, initialState);
190+
const [view, setView] = useState<'collapsed' | 'expanded'>('collapsed');
186191

187192
useUrlParams(queryParams, setQueryParams, setVariables);
188193

@@ -234,7 +239,8 @@ const DatasetsListing = () => {
234239
},
235240
{}
236241
);
237-
const pageSizeOptions = [5, 10, 20];
242+
const pageSizeOptions = [9, 18, 36];
243+
console.log(datasetDetails);
238244

239245
return (
240246
<main className=" bg-greyExtralight">
@@ -251,15 +257,6 @@ const DatasetsListing = () => {
251257
) : (
252258
<section className="m-5 md:m-8 lg:m-10">
253259
<div className="flex flex-wrap items-center justify-between gap-5 rounded-2 p-2 lg:flex-nowrap">
254-
{/* <div>
255-
<Text
256-
className="text-primaryBlue"
257-
variant="bodyLg"
258-
fontWeight="semibold"
259-
>
260-
Showing {datasetDetails?.length} of {count} Datasets
261-
</Text>
262-
</div> */}
263260
<div className=" w-full md:block">
264261
<SearchInput
265262
label="Search"
@@ -270,7 +267,34 @@ const DatasetsListing = () => {
270267
onClear={(value) => handleSearch(value)}
271268
/>
272269
</div>
273-
<div className="flex gap-5">
270+
<div className="flex flex-wrap justify-between gap-5 lg:flex-nowrap lg:justify-normal">
271+
<div className="flex items-center gap-2">
272+
<Text
273+
variant="bodyLg"
274+
fontWeight="semibold"
275+
className="whitespace-nowrap text-primaryBlue"
276+
>
277+
View:
278+
</Text>
279+
<ButtonGroup noWrap spacing="tight">
280+
<Button
281+
kind={view === 'collapsed' ? 'secondary' : 'tertiary'}
282+
size="slim"
283+
className=" h-fit w-fit"
284+
onClick={() => setView('collapsed')}
285+
>
286+
<Icon source={Icons.grid} />
287+
</Button>
288+
<Button
289+
onClick={() => setView('expanded')}
290+
kind={view === 'expanded' ? 'secondary' : 'tertiary'}
291+
className=" h-fit w-fit"
292+
size="slim"
293+
>
294+
<Icon source={Icons.list} />
295+
</Button>
296+
</ButtonGroup>
297+
</div>
274298
<div className="flex items-center gap-2">
275299
<Text
276300
variant="bodyLg"
@@ -315,28 +339,28 @@ const DatasetsListing = () => {
315339
}))}
316340
/>
317341
</div>
342+
<Tray
343+
size="narrow"
344+
open={open}
345+
onOpenChange={setOpen}
346+
trigger={
347+
<Button
348+
kind="secondary"
349+
className="lg:hidden"
350+
onClick={() => setOpen(true)}
351+
>
352+
Filter
353+
</Button>
354+
}
355+
>
356+
<Filter
357+
setOpen={setOpen}
358+
options={filterOptions}
359+
setSelectedOptions={handleFilterChange}
360+
selectedOptions={queryParams.filters}
361+
/>
362+
</Tray>
318363
</div>
319-
<Tray
320-
size="narrow"
321-
open={open}
322-
onOpenChange={setOpen}
323-
trigger={
324-
<Button
325-
kind="secondary"
326-
className="lg:hidden"
327-
onClick={() => setOpen(true)}
328-
>
329-
Filter
330-
</Button>
331-
}
332-
>
333-
<Filter
334-
setOpen={setOpen}
335-
options={filterOptions}
336-
setSelectedOptions={handleFilterChange}
337-
selectedOptions={queryParams.filters}
338-
/>
339-
</Tray>
340364
</div>
341365
<div className="row mg:mt-8 mb-16 mt-5 flex gap-5 lg:mt-10">
342366
<div className="hidden min-w-64 max-w-64 lg:block">
@@ -373,21 +397,65 @@ const DatasetsListing = () => {
373397
</>
374398
)}
375399

376-
<div className="flex flex-col gap-6">
377-
{facets && datasetDetails?.length > 0 && (
378-
<GraphqlPagination
379-
totalRows={count}
380-
pageSize={queryParams.pageSize}
381-
currentPage={queryParams.currentPage}
382-
onPageChange={handlePageChange}
383-
onPageSizeChange={handlePageSizeChange}
384-
>
385-
{datasetDetails.map((item: any, index: any) => (
386-
<Card key={index} data={item} />
387-
))}
388-
</GraphqlPagination>
389-
)}
390-
</div>
400+
{facets && datasetDetails?.length > 0 && (
401+
<GraphqlPagination
402+
totalRows={count}
403+
pageSize={queryParams.pageSize}
404+
currentPage={queryParams.currentPage}
405+
onPageChange={handlePageChange}
406+
onPageSizeChange={handlePageSizeChange}
407+
view={view}
408+
>
409+
{datasetDetails.map((item: any, index: any) => {
410+
const commonProps = {
411+
key: `${item.id}-${view}`,
412+
title: item.title,
413+
description: item.description,
414+
metadataContent: [
415+
{
416+
icon: Icons.calendar,
417+
label: 'Date',
418+
value: '19 July 2024',
419+
},
420+
{
421+
icon: Icons.download,
422+
label: 'Download',
423+
value: '500',
424+
},
425+
{
426+
icon: Icons.globe,
427+
label: 'Geography',
428+
value: 'India',
429+
},
430+
],
431+
tag: item.tags,
432+
formats: item.formats,
433+
footerContent: [
434+
{
435+
icon: '',
436+
label: 'Sectors',
437+
},
438+
{
439+
icon: '',
440+
label: 'Published by',
441+
},
442+
],
443+
};
444+
445+
return (
446+
<Link href={`/datasets/${item.id}`} key={item.id}>
447+
<Card
448+
{...commonProps}
449+
variation={
450+
view === 'expanded' ? 'expanded' : 'collapsed'
451+
}
452+
iconColor="warning"
453+
/>
454+
</Link>
455+
);
456+
})}
457+
</GraphqlPagination>
458+
)}
391459
</div>
392460
</div>
393461
</section>

‎app/[locale]/dashboard/components/GraphqlPagination/footer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
} from '@tabler/icons-react';
88
import { IconButton, Select, Text } from 'opub-ui';
99

10-
const pageSizeOptions = [5, 10, 20];
10+
const pageSizeOptions = [9, 18, 36];
11+
1112

1213
interface FooterProps {
1314
totalRows: number;
@@ -53,7 +54,7 @@ const Footer: React.FC<FooterProps> = ({
5354
};
5455

5556
return (
56-
<div className="flex w-auto items-center gap-8 overflow-x-auto bg-baseGraySlateSolid3 px-4 py-2 sm:px-6 sm:py-4 md:justify-end lg:justify-end">
57+
<div className="flex w-auto mt-4 items-center gap-8 overflow-x-auto bg-surfaceDefault rounded-4 px-4 py-2 sm:px-6 sm:py-4 md:justify-end lg:justify-end">
5758
<Select
5859
labelInline
5960
label="Rows: "

‎app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface GraphqlTableProps {
99
onPageChange: (newPage: number) => void;
1010
onPageSizeChange: (newSize: number) => void;
1111
children: React.ReactNode;
12+
view? : string
1213
}
1314

1415
const GraphqlPagination: React.FC<GraphqlTableProps> = ({
@@ -18,10 +19,13 @@ const GraphqlPagination: React.FC<GraphqlTableProps> = ({
1819
onPageChange,
1920
onPageSizeChange,
2021
children,
22+
view
2123
}) => {
2224
return (
2325
<div>
24-
{children}
26+
<div className={`${view === 'collapsed' ? 'grid grid-cols-1 w-full gap-4 md:grid-cols-2 lg:grid-cols-3' : 'flex flex-col gap-4'}`}>
27+
{children}
28+
</div>
2529
<Footer
2630
totalRows={totalRows}
2731
pageSize={pageSize}

0 commit comments

Comments
 (0)