From 07de0ef768f2e58cc49f6a5930e761d9b3ca927d Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:19:52 +0530 Subject: [PATCH 01/33] add access type icons --- components/icons.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/icons.tsx b/components/icons.tsx index c711d2a1..fb755321 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -10,6 +10,7 @@ import { IconDatabaseEdit, IconDatabasePlus, IconFilePlus, + IconFileUpload, IconFolder, IconInfoCircle, IconLayoutSidebarLeftCollapse, @@ -21,12 +22,13 @@ import { IconSearch, IconShare3, IconShieldCheck, + IconShieldLock, + IconShieldStar, IconTerminal, IconTrash, IconUserCog, IconUsers, IconX, - IconFileUpload // TablerIconsProps, } from '@tabler/icons-react'; @@ -57,8 +59,11 @@ export const Icons: { cross: IconX, menu: IconMenu2, access: IconShieldCheck, + openAccess: IconShieldCheck, + registeredAccess: IconShieldStar, + restrictedAccess: IconShieldLock, share: IconShare3, - pencil:IconPencil, + pencil: IconPencil, fileUpload: IconFileUpload, plus: IconPlus, }; From d4abafa6da71da7830be6bf67b764333012a9403 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:20:00 +0530 Subject: [PATCH 02/33] modify data --- app/[locale]/(user)/datasets/data.tsx | 57 ++++++++++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/app/[locale]/(user)/datasets/data.tsx b/app/[locale]/(user)/datasets/data.tsx index 7f2d1bdc..9f13eb7e 100644 --- a/app/[locale]/(user)/datasets/data.tsx +++ b/app/[locale]/(user)/datasets/data.tsx @@ -31,6 +31,7 @@ export const data = [ source: 'OGD', licence: 'Government Open Data License ', policy: 'National Data Sharing and Accessibility Policy', + organization: 'Open Budget India', }, }, { @@ -60,17 +61,71 @@ export const data = [ }, { type: 'Restricted' }, ], + accessModelsCount: '2', location: 'India', source: 'OGD', licence: 'Government Open Data License ', policy: 'National Data Sharing and Accessibility Policy (NDSAP)', + organization: 'Open Budget India', }, + visualization: [ + { + title: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Preview', + description: + 'Daily weather summaries for Guwahati, Assam, India, covering 2011-2015. Variables available for this period include Max Temperature, Min Temperature, and Total Precipitation.', + images: [ + '/visualization.svg', + '/visualization.svg', + '/visualization.svg', + '/visualization.svg', + ], + }, + { + title: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Preview', + description: + 'Daily weather summaries for Guwahati, Assam, India, covering 2011-2015. Variables available for this period include Max Temperature, Min Temperature, and Total Precipitation.', + images: ['/visualization.svg', '/visualization.svg'], + }, + ], resources: [ { title: 'Telangana Budget 2020-21', description: - 'This section provides budget documents of Telangana for the year 2020-21.', + 'Daily weather summaries for Guwahati, Assam, India, in the year 2011. Variables available for this period include Max Temperature, Min Temperature, and Total Precipitation.', + + schema: [], + accessModelData: [ + { + accessType: 'Open', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: '121', + rows: '1-10', + count: '10(out of 100)', + preview: [], + }, + { + accessType: 'Registered', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [{}], + rows: '1-10', + count: '10(out of 100)', + preview: [], + }, + { + accessType: 'Restricted', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [{}], + rows: '1-10', + count: '10(out of 100)', + preview: [], + }, + ], }, { title: 'Telangana Budget 2021-22', From c71b22f2052ce89166b2b7ccba685a71592b879d Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:20:25 +0530 Subject: [PATCH 03/33] modify the page as per the designs and add visualization section --- .../datasets/[datasetIdentifier]/page.tsx | 141 +++++++++++------- 1 file changed, 90 insertions(+), 51 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx index ff861f92..ddcf67cf 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx @@ -1,6 +1,8 @@ 'use client'; -import React, { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; import { Button, Icon, Tab, TabList, TabPanel, Tabs, Tray } from 'opub-ui'; import BreadCrumbs from '@/components/BreadCrumbs'; @@ -10,10 +12,20 @@ import AccessModels from './components/AccessModels'; import Metadata from './components/Metadata'; import PrimaryData from './components/PrimaryData'; import Resources from './components/Resources'; +import Visualization from './components/Visualizations'; const DatasetDetailsPage = () => { const DatasetInfo = data[1]; const [open, setOpen] = useState(false); + const primaryDataRef = useRef(null); // Explicitly specify the type of ref + const [primaryDataHeight, setPrimaryDataHeight] = useState(0); + + useEffect(() => { + if (primaryDataRef.current) { + const height = primaryDataRef.current.clientHeight; + setPrimaryDataHeight(height); + } + }, [primaryDataRef]); const TabsList = [ { @@ -26,63 +38,90 @@ const DatasetDetailsPage = () => { value: 'accessmodels', component: , }, + { + label: 'Visualizations', + value: 'visualizations', + component: , + }, ]; + return ( -
-
- {' '} - -
- -
- - - - } +
+ +
+
+
+
+ +
+
- - -
-
- - + + + + } + > + + +
+
+ + + {TabsList.map((item, index) => ( + + {item.label} + + ))} + {TabsList.map((item, index) => ( - - {item.label} - + + {item.component} + ))} - - {TabsList.map((item, index) => ( - - {item.component} - - ))} - + +
+
+
+
+
+ {'Organization + + Visualizations + +
+
+ +
+
+ Org Logo
-
-
-
); From b7fe8d2f35003ef727635fd034995005a3fad95b Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:21:06 +0530 Subject: [PATCH 04/33] modify customTags component --- components/CustomTags.tsx | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/components/CustomTags.tsx b/components/CustomTags.tsx index 7752e9a5..27631ecd 100644 --- a/components/CustomTags.tsx +++ b/components/CustomTags.tsx @@ -5,24 +5,29 @@ import { Icons } from './icons'; interface TagProps { type: 'open' | 'registered' | 'restricted'; - icon: true | false; + icon?: boolean; } const CustomTags: React.FC = ({ type, icon = false }) => { let bgColor; let label; + let iconName; switch (type.toLowerCase()) { case 'open': bgColor = 'var(--base-green-solid-7)'; label = 'Open Access'; + iconName = Icons.openAccess; break; case 'registered': bgColor = 'var(--base-amber-solid-6)'; label = 'Registered Access'; + iconName = Icons.registeredAccess; + break; case 'restricted': bgColor = 'var(--base-red-solid-7)'; label = 'Restricted Access'; + iconName = Icons.restrictedAccess; break; default: bgColor = 'white'; @@ -34,23 +39,16 @@ const CustomTags: React.FC = ({ type, icon = false }) => {
- {icon && } - - {label} - + {icon && iconName && } + {label}
); }; export default CustomTags; -// 12px padding 8x 2 y - -// 14px p 4 - -// size icon From 6ac91ee43aa9b6eb57f99785092b62aeef01e74d Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:21:23 +0530 Subject: [PATCH 05/33] modify breadcrumbs as per the hifi designs --- components/BreadCrumbs/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/BreadCrumbs/index.tsx b/components/BreadCrumbs/index.tsx index 6052d2b0..c1d4fd2c 100644 --- a/components/BreadCrumbs/index.tsx +++ b/components/BreadCrumbs/index.tsx @@ -14,7 +14,7 @@ interface BreadCrumbsProps { const BreadCrumbs: React.FC = ({ data }) => { return ( - <> +
{data.map((item, index) => ( @@ -33,7 +33,7 @@ const BreadCrumbs: React.FC = ({ data }) => { ))} - +
); }; From 483c20ec31f62d7d74e4882ef164a6b9d3c485e4 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:22:31 +0530 Subject: [PATCH 06/33] add visualization component --- .../components/Visualizations/index.tsx | 42 +++++++++++++++++++ public/visualization.svg | 12 ++++++ 2 files changed, 54 insertions(+) create mode 100644 app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx create mode 100644 public/visualization.svg diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx new file mode 100644 index 00000000..3d761dbb --- /dev/null +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import Image from 'next/image'; +import { Button, Text } from 'opub-ui'; + +interface VisualizationProps { + data: any; +} + +const Visualization: React.FC = ({ data }) => { + console.log(data); + + return ( +
+ {data.map((item: any, index: any) => ( +
+ {item.title} + {item.description} + +
+ {item.images.map((image: string, index: number) => ( + visualization + ))} +
+
+ ))} +
+ ); +}; + +export default Visualization; diff --git a/public/visualization.svg b/public/visualization.svg new file mode 100644 index 00000000..56196b64 --- /dev/null +++ b/public/visualization.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From 13eb5de913b7946da7dfd8f7d06c6bca3f4411e8 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:23:05 +0530 Subject: [PATCH 07/33] add ResourceTable component --- .../components/ResourceTable/index.tsx | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 app/[locale]/(user)/datasets/components/ResourceTable/index.tsx diff --git a/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx new file mode 100644 index 00000000..1c2573f0 --- /dev/null +++ b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { Dialog, Table } from 'opub-ui'; + +interface ColumnData { + accessorKey: string; + header: string; + isModalTrigger?: boolean; +} + +interface RowData { + [key: string]: any; +} + +interface ResourceTableProps { + ColumnsData: ColumnData[]; + RowsData: RowData[]; +} + +interface CellProps { + row: RowData; +} + +const ResourceTable: React.FC = ({ + ColumnsData, + RowsData, +}) => { + const columnsWithModal = ColumnsData.map((column) => { + if (column.isModalTrigger) { + return { + ...column, + cell: ({ row }: CellProps) => { + const rowData = row.original as unknown as RowData; + const accessorKey = column.accessorKey as keyof RowData; + const cellValue = rowData[accessorKey]; + console.log(cellValue); + return ( + + + + + + {cellValue[0]?.count} + + + ); + return null; + }, + }; + } + return column; + }); + + return ( +
+ + + ); +}; + +export default ResourceTable; From dca25e2fe5c32a4539978b534694158dfb071928 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 1 May 2024 19:23:28 +0530 Subject: [PATCH 08/33] modify components --- .../components/AccessModels/index.tsx | 2 +- .../components/Metadata/index.tsx | 46 +++++---- .../components/PrimaryData/index.tsx | 22 ++--- .../components/Resources/index.tsx | 95 ++++++++++++++++++- 4 files changed, 127 insertions(+), 38 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx index ab4782e4..bc1f58c7 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx @@ -20,7 +20,7 @@ const AccessModels: React.FC = ({ data }) => { {data.map((item: any, index: any) => (
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx index 12570115..88247bd8 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx @@ -17,13 +17,13 @@ const MetadataComponent: React.FC = ({ data, setOpen }) => { return ( <> -
-
- +
+
+ About the Dataset -
- (METADATA) +
+ METADATA
{setOpen && (
@@ -33,27 +33,31 @@ const MetadataComponent: React.FC = ({ data, setOpen }) => {
)}
-
+
{/*
*/} -
- Source : -  {metadata.source} +
+ Source + {metadata.source}
-
- Location : -  {metadata.location} +
+ Location + {metadata.location}
-
- Update : -  {metadata.update} +
+ Update + {metadata.update}
-
- Licence : -  {metadata.licence} +
+ Licence + {metadata.licence}
-
- Policy : -  {metadata.policy} +
+ Policy + {metadata.policy} +
+
+ Organization + {metadata.organization}
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx index 17bf7640..dc7b09a8 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx @@ -11,30 +11,30 @@ const PrimaryData: React.FC = ({ data }) => {
{data.datasetTitle}
-
- {data.description} -
-
- Categories : -  {data.metadata.category} -
- Tags :  + {/* Tags :  */}
{data.metadata.tags.map((item: any, index: any) => ( {item.title} ))}
-
+
+ {data.description} +
+ {/*
+ Categories : +  {data.metadata.category} +
*/} + + {/*
Formats :  - {/*  Monthly */}
{data.metadata.formats.map((item: any, index: any) => ( {item.type} ))}
-
+
*/} ); }; diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx index f2da7296..ef9e7fd0 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx @@ -1,18 +1,103 @@ import React from 'react'; -import { Text } from 'opub-ui'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, + Button, + Text, +} from 'opub-ui'; + +import ResourceTable from '../../../components/ResourceTable'; interface ResourceProps { data: any; } +const generateColumnData = () => { + return [ + { + accessorKey: 'accessType', + header: 'Access Type', + }, + { + accessorKey: 'accessModelTitle', + header: 'Access Model Title', + }, + { + accessorKey: 'fields', + header: 'Fields', + }, + { + accessorKey: 'rows', + header: 'Rows', + }, + { + accessorKey: 'count', + header: 'Count', + }, + // Add more columns if needed + ]; +}; + +const generateTableData = (accessModelData: any[]) => { + return accessModelData.map((accessModel: any) => ({ + accessType: accessModel.accessType, + accessModelTitle: accessModel.accessModelTitle, + fields: accessModel.fields, + rows: accessModel.rows, + count: accessModel.count, + // Add more data from accessModel if needed + })); +}; + const Resources: React.FC = ({ data }) => { + console.log(data); + return ( <> {data.map((item: any, index: any) => ( -
-
- {item.title} - {item.description} +
+
+
+ {item.title} +
+
+ {item.description} +
+
+
+ +
+
+ + + +
+ See Access Type +
+ + + {item.accessModelData && item.accessModelData.length > 0 && ( + + )} + + +
))} From 650aa0a77f4bbb766eaa863b231d8b36a2ba3ea1 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 10:14:50 +0530 Subject: [PATCH 09/33] fix breadcrumbs --- app/[locale]/(user)/datasets/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[locale]/(user)/datasets/page.tsx b/app/[locale]/(user)/datasets/page.tsx index f06c0164..4d385fc2 100644 --- a/app/[locale]/(user)/datasets/page.tsx +++ b/app/[locale]/(user)/datasets/page.tsx @@ -12,7 +12,7 @@ const DatasetsListing = () => { const [open, setOpen] = useState(false); return ( -
+
Date: Thu, 2 May 2024 15:02:31 +0530 Subject: [PATCH 10/33] modify data --- app/[locale]/(user)/datasets/data.tsx | 189 ++++++++++++++++++++++++-- 1 file changed, 178 insertions(+), 11 deletions(-) diff --git a/app/[locale]/(user)/datasets/data.tsx b/app/[locale]/(user)/datasets/data.tsx index 9f13eb7e..53aae344 100644 --- a/app/[locale]/(user)/datasets/data.tsx +++ b/app/[locale]/(user)/datasets/data.tsx @@ -102,28 +102,118 @@ export const data = [ accessType: 'Open', accessModelTitle: 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', - fields: '121', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], rows: '1-10', count: '10(out of 100)', - preview: [], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], }, { accessType: 'Registered', accessModelTitle: 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', - fields: [{}], + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 13', description: 'Desc 13' }, + { title: 'Res 23', description: 'Desc 23' }, + ], + ], rows: '1-10', count: '10(out of 100)', - preview: [], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 14', description: 'Desc 14' }, + { title: 'Res 24', description: 'Desc 24' }, + ], + ], }, { accessType: 'Restricted', accessModelTitle: 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', - fields: [{}], + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 15', description: 'Desc 15' }, + { title: 'Res 25', description: 'Desc 25' }, + ], + ], rows: '1-10', count: '10(out of 100)', - preview: [], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 16', description: 'Desc 16' }, + { title: 'Res 26', description: 'Desc 26' }, + ], + ], }, ], }, @@ -131,16 +221,93 @@ export const data = [ title: 'Telangana Budget 2021-22', description: 'This section provides budget documents of Telangana for the year 2021-22', - }, - { - title: 'Telangana Budget 2022-23', - description: - 'This section provides budget documents of Telangana for the year 2022-23.', + accessModelData: [ + { + accessType: 'Open', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + }, + ], }, { title: 'Telangana Budget 2023-24', description: 'This section provides budget documents of Telangana for the year 2023-24.', + accessModelData: [ + { + accessType: 'Open', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + }, + ], }, ], accessModels: [ From 61ae1b6a1dd0e320987497bf69207a4e2cac3001 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 15:02:48 +0530 Subject: [PATCH 11/33] add table and extra props --- .../components/ResourceTable/index.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx index 1c2573f0..5377b3f5 100644 --- a/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx +++ b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx @@ -1,10 +1,13 @@ import React from 'react'; -import { Dialog, Table } from 'opub-ui'; +import { Button, Dialog, Table } from 'opub-ui'; interface ColumnData { accessorKey: string; header: string; isModalTrigger?: boolean; + label?: string; + table?: boolean; + modalHeader?: string; } interface RowData { @@ -36,12 +39,18 @@ const ResourceTable: React.FC = ({ return ( - + - - {cellValue[0]?.count} + + {column?.table ? ( +
+ ) : ( + cellValue + )} ); From 734653cfd71d4ca2c4ec8ef6ac5f204555aa5af9 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 15:03:08 +0530 Subject: [PATCH 12/33] add dialog --- .../components/Resources/index.tsx | 60 +++++++++++++++---- 1 file changed, 48 insertions(+), 12 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx index ef9e7fd0..088b9cb4 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx @@ -1,3 +1,4 @@ +import { table } from 'console'; import React from 'react'; import { Accordion, @@ -5,6 +6,8 @@ import { AccordionItem, AccordionTrigger, Button, + Dialog, + Table, Text, } from 'opub-ui'; @@ -16,17 +19,22 @@ interface ResourceProps { const generateColumnData = () => { return [ - { - accessorKey: 'accessType', - header: 'Access Type', - }, { accessorKey: 'accessModelTitle', header: 'Access Model Title', }, + { + accessorKey: 'accessType', + header: 'Access Type', + }, + { accessorKey: 'fields', header: 'Fields', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Fields', }, { accessorKey: 'rows', @@ -36,7 +44,14 @@ const generateColumnData = () => { accessorKey: 'count', header: 'Count', }, - // Add more columns if needed + { + accessorKey: 'preview', + header: 'Preview', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Preview', + }, ]; }; @@ -47,13 +62,11 @@ const generateTableData = (accessModelData: any[]) => { fields: accessModel.fields, rows: accessModel.rows, count: accessModel.count, - // Add more data from accessModel if needed + preview: accessModel.preview, })); }; const Resources: React.FC = ({ data }) => { - console.log(data); - return ( <> {data.map((item: any, index: any) => ( @@ -70,9 +83,32 @@ const Resources: React.FC = ({ data }) => {
- + + + + + +
+ +
@@ -83,7 +119,7 @@ const Resources: React.FC = ({ data }) => {
Date: Thu, 2 May 2024 16:37:51 +0530 Subject: [PATCH 13/33] remove log --- .../[datasetIdentifier]/components/Visualizations/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx index 3d761dbb..b29d9532 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx @@ -7,8 +7,6 @@ interface VisualizationProps { } const Visualization: React.FC = ({ data }) => { - console.log(data); - return (
{data.map((item: any, index: any) => ( From 3b8c42eb2d1a8b678520e1b08cece526605cf222 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 16:37:59 +0530 Subject: [PATCH 14/33] remove log --- app/[locale]/(user)/datasets/components/ResourceTable/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx index 5377b3f5..669e8f80 100644 --- a/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx +++ b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx @@ -35,7 +35,6 @@ const ResourceTable: React.FC = ({ const rowData = row.original as unknown as RowData; const accessorKey = column.accessorKey as keyof RowData; const cellValue = rowData[accessorKey]; - console.log(cellValue); return ( From 945c2e782cc673a590aacab731a3298a9126b3ca Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 16:39:25 +0530 Subject: [PATCH 15/33] add resource table in accessmodel component --- .../components/AccessModels/index.tsx | 60 +++++++++++++++++-- 1 file changed, 54 insertions(+), 6 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx index bc1f58c7..6c2600de 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx @@ -9,11 +9,56 @@ import { } from 'opub-ui'; import CustomTags from '@/components/CustomTags'; +import ResourceTable from '../../../components/ResourceTable'; interface AccessModelProps { data: any; } +const generateColumnData = () => { + return [ + { + accessorKey: 'resourceName', + header: 'Resource Name', + }, + + { + accessorKey: 'fields', + header: 'Fields', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Fields', + }, + { + accessorKey: 'rows', + header: 'Rows', + }, + { + accessorKey: 'count', + header: 'Count', + }, + { + accessorKey: 'preview', + header: 'Preview', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Preview', + }, + ]; +}; + +const generateTableData = (resource: any[]) => { + return resource.map((item: any) => ({ + resourceName: item.resourceName, + fields: item.fields, + preview: item.preview, + rows: item.rows, + count: item.count, + })); +}; + const AccessModels: React.FC = ({ data }) => { return ( <> @@ -43,7 +88,9 @@ const AccessModels: React.FC = ({ data }) => { {/*
*/} -
See Resources
+
+ See Resources +
= ({ data }) => { outline: '1px solid var( --base-pure-white)', }} > - {item.resource.map((item: any, index: any) => ( -
- {item.title} -
- ))} + {item.resource && item.resource.length > 0 && ( + + )} From 4d9e12bebe730966e9d56b183ca9ec82e2d95b6d Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 16:39:30 +0530 Subject: [PATCH 16/33] modify data --- app/[locale]/(user)/datasets/data.tsx | 110 +++++++++++++++++++++++++- 1 file changed, 106 insertions(+), 4 deletions(-) diff --git a/app/[locale]/(user)/datasets/data.tsx b/app/[locale]/(user)/datasets/data.tsx index 53aae344..ae3c4488 100644 --- a/app/[locale]/(user)/datasets/data.tsx +++ b/app/[locale]/(user)/datasets/data.tsx @@ -320,9 +320,43 @@ export const data = [ 'Open access model helps you to view data without login', resource: [ { - title: 'Telangana Budget 2021-22', + resourceName: 'Telangana Budget 2021-22', description: 'This section provides budget documents of Telangana for the year 2021-22', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', }, ], }, @@ -335,9 +369,43 @@ export const data = [ 'Registered access model helps you to view data after login', resource: [ { - title: 'Telangana Budget 2023-24', + resourceName: 'Telangana Budget 2021-22', description: - 'This section provides budget documents of Telangana for the year 2023-24', + 'This section provides budget documents of Telangana for the year 2021-22', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', }, ], }, @@ -350,9 +418,43 @@ export const data = [ 'Restricted access model helps you to view data after login', resource: [ { - title: 'Telangana Budget 2021-22', + resourceName: 'Telangana Budget 2021-22', description: 'This section provides budget documents of Telangana for the year 2021-22', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', }, ], }, From 4d40ff234d89b0ebef744d744a903a0a34620f79 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 2 May 2024 16:40:01 +0530 Subject: [PATCH 17/33] change tab on click of visualization button --- .../datasets/[datasetIdentifier]/page.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx index ddcf67cf..e5d00855 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx @@ -44,6 +44,7 @@ const DatasetDetailsPage = () => { component: , }, ]; + const [activeTab, setActiveTab] = useState('resources'); // State to manage active tab return (
@@ -84,10 +85,14 @@ const DatasetDetailsPage = () => {
- + {TabsList.map((item, index) => ( - + setActiveTab(item.value)} // Update active tab on click + > {item.label} ))} @@ -111,9 +116,15 @@ const DatasetDetailsPage = () => { // sizes="100vw" // style={{ width: '80%' }} /> - + {/* + Visualizations + */} +
From 4cdef13d1f1d1333fd2d8e9249410c9caf058741 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Mon, 6 May 2024 17:08:57 +0530 Subject: [PATCH 18/33] modify custom tags component --- .../components/AccessModels/index.tsx | 4 +- components/CustomTags.tsx | 41 ++++++++++++------- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx index 6c2600de..71c59e38 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx @@ -76,9 +76,9 @@ const AccessModels: React.FC = ({ data }) => {
- +
diff --git a/components/CustomTags.tsx b/components/CustomTags.tsx index 27631ecd..8f3b82d4 100644 --- a/components/CustomTags.tsx +++ b/components/CustomTags.tsx @@ -5,28 +5,32 @@ import { Icons } from './icons'; interface TagProps { type: 'open' | 'registered' | 'restricted'; - icon?: boolean; + iconOnly?: boolean; } -const CustomTags: React.FC = ({ type, icon = false }) => { +const CustomTags: React.FC = ({ type, iconOnly = true }) => { let bgColor; let label; let iconName; + let helpText; switch (type.toLowerCase()) { case 'open': bgColor = 'var(--base-green-solid-7)'; - label = 'Open Access'; + label = 'OPEN ACCESS'; + helpText = 'Can be downloaded directly'; iconName = Icons.openAccess; break; case 'registered': bgColor = 'var(--base-amber-solid-6)'; - label = 'Registered Access'; + label = 'REGISTERED ACCESS'; + helpText = 'Register/ Login to download'; iconName = Icons.registeredAccess; break; case 'restricted': bgColor = 'var(--base-red-solid-7)'; - label = 'Restricted Access'; + label = 'RESTRICTED ACCESS'; + helpText = 'Request access for download'; iconName = Icons.restrictedAccess; break; default: @@ -36,17 +40,24 @@ const CustomTags: React.FC = ({ type, icon = false }) => { } return ( -
-
- {icon && iconName && } - {label} +
+
+
+ {iconName && } +
+ {iconOnly && ( +
+ {label} + {helpText && {helpText}} +
+ )}
); }; From 5a3a2761cf88de1d3b6313441481318c08569147 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Mon, 6 May 2024 21:02:41 +0530 Subject: [PATCH 19/33] add visualization --- .../datasets/[datasetIdentifier]/page.tsx | 48 ++++++++++++------- 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx index e5d00855..543ac6db 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx @@ -2,12 +2,13 @@ import { useEffect, useRef, useState } from 'react'; import Image from 'next/image'; -import Link from 'next/link'; +import { useParams } from 'next/navigation'; import { Button, Icon, Tab, TabList, TabPanel, Tabs, Tray } from 'opub-ui'; +import { BarChart } from 'opub-ui/viz'; import BreadCrumbs from '@/components/BreadCrumbs'; import { Icons } from '@/components/icons'; -import { data } from '../data'; +import { data as datainfo } from '../data'; import AccessModels from './components/AccessModels'; import Metadata from './components/Metadata'; import PrimaryData from './components/PrimaryData'; @@ -15,11 +16,13 @@ import Resources from './components/Resources'; import Visualization from './components/Visualizations'; const DatasetDetailsPage = () => { - const DatasetInfo = data[1]; + const DatasetInfo = datainfo[1]; const [open, setOpen] = useState(false); const primaryDataRef = useRef(null); // Explicitly specify the type of ref const [primaryDataHeight, setPrimaryDataHeight] = useState(0); + const id = useParams(); + useEffect(() => { if (primaryDataRef.current) { const height = primaryDataRef.current.clientHeight; @@ -31,21 +34,40 @@ const DatasetDetailsPage = () => { { label: 'Resources', value: 'resources', - component: , + component: , }, { label: 'Access Models', value: 'accessmodels', - component: , + component: , }, { label: 'Visualizations', value: 'visualizations', - component: , + component: , }, ]; const [activeTab, setActiveTab] = useState('resources'); // State to manage active tab + const barOptions = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + name: 'Sales', + color: 'rgb(55,162,218)', + }, + ], + }; + console.log(primaryDataHeight.toString() + 'px'); + return (
{ ]} />
-
+
@@ -108,17 +130,7 @@ const DatasetDetailsPage = () => {
- - {/* - Visualizations - */} + -
- {item.images.map((image: string, index: number) => ( - - ))} +
+ + + +
))} From 0a3943a6b4faf064386ff2384c5d0efc3fa42815 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Tue, 7 May 2024 18:36:25 +0530 Subject: [PATCH 21/33] add query --- .../datasets/[datasetIdentifier]/page.tsx | 25 ++++++++++++++++--- gql/generated/gql.ts | 6 ++--- gql/generated/graphql.ts | 12 ++++----- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx index 543ac6db..70928e97 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx @@ -2,10 +2,12 @@ import { useEffect, useRef, useState } from 'react'; import Image from 'next/image'; -import { useParams } from 'next/navigation'; +import { graphql } from '@/gql'; +import { useQuery } from '@tanstack/react-query'; import { Button, Icon, Tab, TabList, TabPanel, Tabs, Tray } from 'opub-ui'; import { BarChart } from 'opub-ui/viz'; +import { GraphQL } from '@/lib/api'; import BreadCrumbs from '@/components/BreadCrumbs'; import { Icons } from '@/components/icons'; import { data as datainfo } from '../data'; @@ -15,13 +17,27 @@ import PrimaryData from './components/PrimaryData'; import Resources from './components/Resources'; import Visualization from './components/Visualizations'; +const datasetQuery: any = graphql(` + query GetDatasetData { + dataset { + id + created + modified + } + } +`); + const DatasetDetailsPage = () => { const DatasetInfo = datainfo[1]; const [open, setOpen] = useState(false); const primaryDataRef = useRef(null); // Explicitly specify the type of ref const [primaryDataHeight, setPrimaryDataHeight] = useState(0); - const id = useParams(); + const { data, error, isLoading, refetch } = useQuery([], () => + GraphQL(datasetQuery, []) + ); + + console.log(data, error, isLoading); useEffect(() => { if (primaryDataRef.current) { @@ -49,6 +65,10 @@ const DatasetDetailsPage = () => { ]; const [activeTab, setActiveTab] = useState('resources'); // State to manage active tab + useEffect(() => { + refetch(); + }, [activeTab]); + const barOptions = { xAxis: { type: 'category', @@ -66,7 +86,6 @@ const DatasetDetailsPage = () => { }, ], }; - console.log(primaryDataHeight.toString() + 'px'); return (
diff --git a/gql/generated/gql.ts b/gql/generated/gql.ts index 31e1201b..5c9fdbcd 100644 --- a/gql/generated/gql.ts +++ b/gql/generated/gql.ts @@ -13,8 +13,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ * Therefore it is highly recommended to use the babel or swc plugin for production. */ const documents = { + "\n query GetDatasetData {\n dataset {\n id\n created\n modified\n }\n }\n": types.GetDatasetDataDocument, "\n mutation GenerateDatasetName {\n addDataset {\n __typename\n ... on TypeDataset {\n id\n created\n }\n ... on OperationInfo {\n messages {\n kind\n message\n }\n }\n }\n }\n": types.GenerateDatasetNameDocument, - "\n query allDatasetsQuery {\n dataset {\n id\n }\n }\n": types.AllDatasetsQueryDocument, }; /** @@ -34,11 +34,11 @@ export function graphql(source: string): unknown; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n mutation GenerateDatasetName {\n addDataset {\n __typename\n ... on TypeDataset {\n id\n created\n }\n ... on OperationInfo {\n messages {\n kind\n message\n }\n }\n }\n }\n"): (typeof documents)["\n mutation GenerateDatasetName {\n addDataset {\n __typename\n ... on TypeDataset {\n id\n created\n }\n ... on OperationInfo {\n messages {\n kind\n message\n }\n }\n }\n }\n"]; +export function graphql(source: "\n query GetDatasetData {\n dataset {\n id\n created\n modified\n }\n }\n"): (typeof documents)["\n query GetDatasetData {\n dataset {\n id\n created\n modified\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query allDatasetsQuery {\n dataset {\n id\n }\n }\n"): (typeof documents)["\n query allDatasetsQuery {\n dataset {\n id\n }\n }\n"]; +export function graphql(source: "\n mutation GenerateDatasetName {\n addDataset {\n __typename\n ... on TypeDataset {\n id\n created\n }\n ... on OperationInfo {\n messages {\n kind\n message\n }\n }\n }\n }\n"): (typeof documents)["\n mutation GenerateDatasetName {\n addDataset {\n __typename\n ... on TypeDataset {\n id\n created\n }\n ... on OperationInfo {\n messages {\n kind\n message\n }\n }\n }\n }\n"]; export function graphql(source: string) { return (documents as any)[source] ?? {}; diff --git a/gql/generated/graphql.ts b/gql/generated/graphql.ts index 42741a2a..106abb37 100644 --- a/gql/generated/graphql.ts +++ b/gql/generated/graphql.ts @@ -166,16 +166,16 @@ export type UpdateMetadataInput = { metadata: Array; }; -export type GenerateDatasetNameMutationVariables = Exact<{ [key: string]: never; }>; +export type GetDatasetDataQueryVariables = Exact<{ [key: string]: never; }>; -export type GenerateDatasetNameMutation = { __typename?: 'Mutation', addDataset: { __typename: 'OperationInfo', messages: Array<{ __typename?: 'OperationMessage', kind: OperationMessageKind, message: string }> } | { __typename: 'TypeDataset', id: any, created: any } }; +export type GetDatasetDataQuery = { __typename?: 'Query', dataset: Array<{ __typename?: 'TypeDataset', id: any, created: any, modified: any }> }; -export type AllDatasetsQueryQueryVariables = Exact<{ [key: string]: never; }>; +export type GenerateDatasetNameMutationVariables = Exact<{ [key: string]: never; }>; -export type AllDatasetsQueryQuery = { __typename?: 'Query', dataset: Array<{ __typename?: 'TypeDataset', id: any }> }; +export type GenerateDatasetNameMutation = { __typename?: 'Mutation', addDataset: { __typename: 'OperationInfo', messages: Array<{ __typename?: 'OperationMessage', kind: OperationMessageKind, message: string }> } | { __typename: 'TypeDataset', id: any, created: any } }; -export const GenerateDatasetNameDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"GenerateDatasetName"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addDataset"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TypeDataset"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"created"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"OperationInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode; -export const AllDatasetsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allDatasetsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"dataset"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file +export const GetDatasetDataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetDatasetData"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"dataset"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"modified"}}]}}]}}]} as unknown as DocumentNode; +export const GenerateDatasetNameDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"GenerateDatasetName"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addDataset"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TypeDataset"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"created"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"OperationInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file From 87e899ad4c02f0b82710d32333d4790fa5c7ed9a Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Tue, 7 May 2024 18:36:52 +0530 Subject: [PATCH 22/33] modify CustomTags component and fix css --- .../datasets/components/Cards/index.tsx | 35 ++++++++++--------- components/CustomTags.tsx | 23 +++++++++--- 2 files changed, 37 insertions(+), 21 deletions(-) diff --git a/app/[locale]/(user)/datasets/components/Cards/index.tsx b/app/[locale]/(user)/datasets/components/Cards/index.tsx index 9b81c467..afa94a9d 100644 --- a/app/[locale]/(user)/datasets/components/Cards/index.tsx +++ b/app/[locale]/(user)/datasets/components/Cards/index.tsx @@ -2,6 +2,8 @@ import React from 'react'; import Link from 'next/link'; import { Tag, Text } from 'opub-ui'; +import CustomTags from '@/components/CustomTags'; + interface Dataset { datasetTitle: string; description: string; @@ -22,7 +24,7 @@ const Cards = ({ data }: { data: Dataset }) => { const { datasetTitle, description, metadata, id } = data; return ( <> -
+
@@ -33,29 +35,24 @@ const Cards = ({ data }: { data: Dataset }) => { {description}
-
+
-
- Frequency of Update : -  {metadata.update} -
-
- Categories : -  {metadata.category} -
-
- Tags :  +
+ Tags:
{metadata.tags.map((item, index) => ( {item.title} ))}
+
+ Categories : +  {metadata.category} +
-
- Formats :  - {/*  Monthly */} +
+ Formats:
{metadata.formats.map((item, index) => ( {item.type} @@ -67,7 +64,13 @@ const Cards = ({ data }: { data: Dataset }) => {  {metadata.accessModelsCount} in total 
{metadata.accessModels.map((item, index) => ( - {item.type} + ))}
diff --git a/components/CustomTags.tsx b/components/CustomTags.tsx index 8f3b82d4..bab93abb 100644 --- a/components/CustomTags.tsx +++ b/components/CustomTags.tsx @@ -4,11 +4,18 @@ import { Icon, Text } from 'opub-ui'; import { Icons } from './icons'; interface TagProps { - type: 'open' | 'registered' | 'restricted'; + type: 'open' | 'registered' | 'restricted' | string; iconOnly?: boolean; + size?: 24 | 40; + background?: boolean; } -const CustomTags: React.FC = ({ type, iconOnly = true }) => { +const CustomTags: React.FC = ({ + type, + iconOnly, + size = 40, + background = true, +}) => { let bgColor; let label; let iconName; @@ -44,15 +51,21 @@ const CustomTags: React.FC = ({ type, iconOnly = true }) => {
- {iconName && } + {iconName && ( + + )}
- {iconOnly && ( + {!iconOnly && (
{label} {helpText && {helpText}} From 05df3e865688d6cdc33e2b5e06c63a36103bc67b Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Tue, 7 May 2024 18:37:07 +0530 Subject: [PATCH 23/33] fix css --- .../[datasetIdentifier]/components/AccessModels/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx index 71c59e38..ec8dfd6b 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx @@ -75,7 +75,7 @@ const AccessModels: React.FC = ({ data }) => { {item.description}
-
+
-
- )} -
+ )} +
+
{filtersData.map((item, index) => (
-
- - {item.title} - -
-
- ({ - label: Option.label, - value: Option.value, - }))} - title={undefined} - /> -
+ + + + {item.title} + + + ({ + label: Option.label, + value: Option.value, + }))} + title={undefined} + value={selectedOptions} + onChange={(e) => { + setSelectedOptions(e), console.log(e); + }} + /> + + +
))}
- +
); }; From cdfbc3e017e2131092eb286d20fd33621ab393db Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 8 May 2024 17:52:18 +0530 Subject: [PATCH 25/33] rename cards component to card component --- .../(user)/datasets/components/Card/index.tsx | 77 +++++++++++++++++ .../datasets/components/Cards/index.tsx | 83 ------------------- 2 files changed, 77 insertions(+), 83 deletions(-) create mode 100644 app/[locale]/(user)/datasets/components/Card/index.tsx delete mode 100644 app/[locale]/(user)/datasets/components/Cards/index.tsx diff --git a/app/[locale]/(user)/datasets/components/Card/index.tsx b/app/[locale]/(user)/datasets/components/Card/index.tsx new file mode 100644 index 00000000..5c13de98 --- /dev/null +++ b/app/[locale]/(user)/datasets/components/Card/index.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import Link from 'next/link'; +import { Tag, Text } from 'opub-ui'; + +import CustomTags from '@/components/CustomTags'; + +interface Dataset { + datasetTitle: string; + description: string; + id: number; + metadata: Metadata; +} + +interface Metadata { + update: string; + category: string; + tags: { title: string }[]; + formats: { type: string }[]; + accessModels: { type: string }[]; + accessModelsCount: string; +} + +const Cards = ({ data }: { data: Dataset }) => { + const { datasetTitle, description, metadata, id } = data; + return ( + <> +
+
+
+ + {datasetTitle} + +
+
+ {description} +
+
+ Tags: +
+ {metadata.tags.map((item, index) => ( + {item.title} + ))} +
+
+
+ Categories : +  {metadata.category} +
+
+ Formats: +
+ {metadata.formats.map((item, index) => ( + {item.type} + ))} +
+
+
+ Access Models : +  {metadata.accessModelsCount} in total  +
+ {metadata.accessModels.map((item, index) => ( + + ))} +
+
+
+
+ + ); +}; +export default Cards; diff --git a/app/[locale]/(user)/datasets/components/Cards/index.tsx b/app/[locale]/(user)/datasets/components/Cards/index.tsx deleted file mode 100644 index afa94a9d..00000000 --- a/app/[locale]/(user)/datasets/components/Cards/index.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { Tag, Text } from 'opub-ui'; - -import CustomTags from '@/components/CustomTags'; - -interface Dataset { - datasetTitle: string; - description: string; - id: number; - metadata: Metadata; -} - -interface Metadata { - update: string; - category: string; - tags: { title: string }[]; - formats: { type: string }[]; - accessModels: { type: string }[]; - accessModelsCount: string; -} - -const Cards = ({ data }: { data: Dataset }) => { - const { datasetTitle, description, metadata, id } = data; - return ( - <> -
-
-
- - {datasetTitle} - -
-
- {description} -
-
-
-
-
- Tags: -
- {metadata.tags.map((item, index) => ( - {item.title} - ))} -
-
-
- Categories : -  {metadata.category} -
-
-
-
- Formats: -
- {metadata.formats.map((item, index) => ( - {item.type} - ))} -
-
-
- Access Models : -  {metadata.accessModelsCount} in total  -
- {metadata.accessModels.map((item, index) => ( - - ))} -
-
-
-
-
- - ); -}; -export default Cards; From 971fe4c124b0ba3d2d5c9d22ce53ea4b10822807 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 8 May 2024 17:54:53 +0530 Subject: [PATCH 26/33] update datasets page as per hifi design --- app/[locale]/(user)/datasets/page.tsx | 95 +++++++++++++++------------ 1 file changed, 54 insertions(+), 41 deletions(-) diff --git a/app/[locale]/(user)/datasets/page.tsx b/app/[locale]/(user)/datasets/page.tsx index 4d385fc2..ae04d165 100644 --- a/app/[locale]/(user)/datasets/page.tsx +++ b/app/[locale]/(user)/datasets/page.tsx @@ -1,10 +1,10 @@ 'use client'; -import React, { useState } from 'react'; -import { Button, SearchInput, Select, Text, Tray } from 'opub-ui'; +import { useState } from 'react'; +import { Button, Pill, SearchInput, Select, Text, Tray } from 'opub-ui'; import BreadCrumbs from '@/components/BreadCrumbs'; -import Cards from './components/Cards'; +import Card from './components/Card'; import Filter from './components/FIlter/Filter'; import { data } from './data'; @@ -19,25 +19,26 @@ const DatasetsListing = () => { { href: '#', label: 'Dataset Listing' }, ]} /> - -
-
- -
-
-
-
- Showing {data.length} Datasets -
-
- -
+
+
+
+ + Showing {data.length} of {data.length} Datasets + +
+
+ +
+
+ + Sort by: +