Skip to content

Commit ed1d653

Browse files
Deepthi-ChandDeepthi-Chand
authored
Merge pull request #216 from CivicDataLab/215-update-dataset-details-page-as-per-hifi-designs
215 update dataset details page as per hifi designs
2 parents ed450c2 + e383ef1 commit ed1d653

File tree

20 files changed

+765
-1051
lines changed

20 files changed

+765
-1051
lines changed

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef } from 'react';
1+
import { useEffect, useRef, useState } from 'react';
22
import Image from 'next/image';
33
import Link from 'next/link';
44
import { useParams } from 'next/navigation';
@@ -49,7 +49,11 @@ const DetailsQuery: any = graphql(`
4949
}
5050
`);
5151

52-
const Details = () => {
52+
interface DetailsProps {
53+
setShowcharts: (vars: boolean) => void;
54+
}
55+
56+
const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
5357
const params = useParams();
5458
const chartRef = useRef<ReactECharts>(null);
5559

@@ -58,6 +62,12 @@ const Details = () => {
5862
() => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
5963
);
6064

65+
useEffect(() => {
66+
if (data && data?.getChartData.length <= 0) {
67+
setShowcharts(false);
68+
}
69+
}, [data]);
70+
6171
const renderChart = (item: any) => {
6272
if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
6373
// Register the map
@@ -70,17 +80,17 @@ const Details = () => {
7080
return <ReactECharts option={item?.chart?.options} ref={chartRef} />;
7181
};
7282

83+
const [isexpanded, setIsexpanded] = useState(false);
84+
const toggleDescription = () => setIsexpanded(!isexpanded);
85+
7386
return (
74-
<div className="mb-8 flex w-full flex-col gap-4 p-2">
87+
<div className=" flex w-full flex-col gap-4 p-2">
7588
{isLoading ? (
7689
<div className=" mt-8 flex justify-center">
7790
<Spinner />
7891
</div>
7992
) : data?.getChartData?.length > 0 ? (
8093
<>
81-
<Text variant="bodyLg" className="mx-6 lg:mx-0">
82-
Visualizations
83-
</Text>
8494
<div className="relative w-full ">
8595
<Carousel className="w-full">
8696
<div className=" px-12">
@@ -106,12 +116,26 @@ const Details = () => {
106116
<div className="flex items-center justify-between gap-2 max-sm:flex-wrap">
107117
<div className="flex flex-col gap-1 py-2 text-start">
108118
<Text className="font-semi-bold">{item.name}</Text>
109-
<Text>{item.description}</Text>
119+
<Text className=" hidden lg:block">
120+
{item.description.length > 260 && !isexpanded
121+
? `${item.description.slice(0, 260)}...`
122+
: item.description}
123+
{item.description.length > 260 && (
124+
<Button
125+
kind="tertiary"
126+
size="slim"
127+
onClick={toggleDescription}
128+
className="text-blue-600 w-fit"
129+
>
130+
{isexpanded ? 'See Less' : 'See More'}
131+
</Button>
132+
)}
133+
</Text>
110134
</div>
111135
<div className="flex gap-2">
112136
<Button kind="secondary" className="p-2">
113137
<Icon
114-
source={Icons.share}
138+
source={Icons.diagonal}
115139
size={20}
116140
color="default"
117141
/>
@@ -137,10 +161,10 @@ const Details = () => {
137161
</CarouselContent>
138162
</div>
139163
<div className="absolute inset-y-0 left-0 flex items-center">
140-
<CarouselPrevious />
164+
<CarouselPrevious className=" bg-secondaryOrange" />
141165
</div>
142166
<div className="absolute inset-y-0 right-0 flex items-center">
143-
<CarouselNext />
167+
<CarouselNext className=" bg-secondaryOrange" />
144168
</div>
145169
</Carousel>
146170
</div>

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx‎

Lines changed: 110 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
2-
import Link from 'next/link';
3-
import { Button, Icon, Text } from 'opub-ui';
4-
import { toTitleCase } from '@/lib/utils';
1+
import Image from 'next/image';
2+
import { Button, Divider, Icon, Text } from 'opub-ui';
3+
import React, { useState } from 'react';
4+
55
import { Icons } from '@/components/icons';
66

77
interface MetadataProps {
@@ -10,90 +10,121 @@ interface MetadataProps {
1010
}
1111

1212
const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
13-
const filteredMetadataArray = data?.metadata.filter(
14-
(item: any) =>
15-
item.metadataItem.label !== 'Source Website' &&
16-
item.metadataItem.label !== 'Github Repo Link' &&
17-
item.metadataItem.label !== 'Source' &&
18-
item.value.trim() !== '' // Ensure the value is not empty
19-
);
2013

14+
const Metadata = (
15+
data.metadata as Array<{ metadataItem: { label: string }; value: string }>
16+
)
17+
.filter((item) =>
18+
['Geography', 'Update Frequency', 'License'].includes(
19+
item.metadataItem.label
20+
)
21+
)
22+
.map((item) => ({
23+
label:
24+
item.metadataItem.label === 'Geography'
25+
? 'Location'
26+
: item.metadataItem.label,
27+
value: item.value,
28+
}));
29+
const [isexpanded, setIsexpanded] = useState(false);
30+
const toggleDescription = () => setIsexpanded(!isexpanded);
2131
return (
22-
<div className="rounded-md shadow-md flex flex-col gap-6 bg-surfaceDefault px-6 py-4 lg:px-8 lg:py-6">
23-
<div className="flex items-center justify-between">
24-
<Text variant="headingMd" fontWeight="semibold">
25-
Metadata
26-
</Text>
27-
{setOpen && (
28-
<Button onClick={() => setOpen(false)} kind="tertiary">
29-
<Icon source={Icons.cross} size={24} color="default" />
30-
</Button>
31-
)}
32+
<div className="flex flex-col gap-10">
33+
<div className=" flex items-center justify-between">
34+
<div className="flex flex-col gap-2">
35+
<Text
36+
variant="headingLg"
37+
fontWeight="semibold"
38+
className=" text-primaryBlue"
39+
>
40+
ABOUT THE DATASET{' '}
41+
</Text>
42+
<Text variant="bodyLg">METADATA</Text>
43+
</div>
44+
<div className="flex items-center justify-between">
45+
{setOpen && (
46+
<Button onClick={() => setOpen(false)} kind="tertiary">
47+
<Icon source={Icons.cross} size={24} color="default" />
48+
</Button>
49+
)}
50+
</div>
3251
</div>
33-
<div className="flex flex-col gap-5 align-baseline">
34-
{filteredMetadataArray?.map((item: any, index: any) => (
35-
<div
36-
className="flex items-center gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2"
37-
key={index}
52+
<Divider />
53+
<div className=" flex flex-col gap-8">
54+
<div className=" rounded-2 border-1 border-solid border-greyExtralight p-2 hidden lg:block">
55+
{data?.organization?.logo?.url ? (
56+
<Image
57+
height={140}
58+
width={100}
59+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.organization?.logo?.url}`}
60+
alt={`${data.organization?.name} logo`}
61+
className="w-full object-contain"
62+
/>
63+
) : (
64+
<Image
65+
height={140}
66+
width={100}
67+
src={'/fallback.svg'}
68+
alt={'fallback logo'}
69+
className="fill-current w-full object-contain"
70+
/>
71+
)}
72+
</div>
73+
<div className="flex items-center gap-2 ">
74+
<Text className="min-w-[120px] basis-1/4 uppercase" variant="bodyMd">
75+
Organization
76+
</Text>
77+
<Text
78+
className="max-w-xs truncate "
79+
variant="bodyLg"
80+
fontWeight="medium"
3881
>
39-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
40-
{toTitleCase(item.metadataItem.label)}:
82+
{data.organization.name}
83+
</Text>
84+
</div>
85+
<div className="flex items-center gap-2 ">
86+
<Text className="min-w-[120px] basis-1/4 uppercase" variant="bodyMd">
87+
Sector
88+
</Text>
89+
<Text
90+
className="max-w-xs truncate "
91+
variant="bodyLg"
92+
fontWeight="medium"
93+
>
94+
{data.categories[0].name}
95+
</Text>
96+
</div>
97+
{Metadata.map((item, index) => (
98+
<div className="flex items-center gap-2 " key={index}>
99+
<Text
100+
className="min-w-[120px] basis-1/4 uppercase"
101+
variant="bodyMd"
102+
>
103+
{item.label}
41104
</Text>
42-
<Text className="text-base truncate max-w-xs " title={item.value}>
105+
<Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
43106
{item.value}
44107
</Text>
45108
</div>
46109
))}
47-
{data?.formats.length > 0 && (
48-
<div className="flex items-baseline gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2">
49-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
50-
Formats:
51-
</Text>
52-
<div className="flex flex-wrap gap-2">
53-
{data?.formats.map((item: any, index: any) => (
54-
<Text key={index}>{item}</Text>
55-
))}
56-
</div>
57-
</div>
58-
)}
59-
{data?.categories.length > 0 && (
60-
<div className="flex items-baseline gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2">
61-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
62-
Category:
63-
</Text>
64-
<div className="flex flex-wrap gap-2">
65-
{data?.categories.map((item: any, index: any) => (
66-
<Link
67-
href={`/datasets?categories=${item.name}`}
68-
target="_blank"
69-
className="flex justify-center"
70-
key={index}
71-
>
72-
<Text className="underline">{item.name}</Text>
73-
</Link>
74-
))}
75-
</div>
76-
</div>
77-
)}
78-
{data?.tags.length > 0 && (
79-
<div className="flex items-baseline gap-2 pb-2">
80-
<Text className="text-base min-w-[120px] basis-1/4 font-medium">
81-
Tags:
82-
</Text>
83-
<div className="flex flex-wrap gap-2">
84-
{data?.tags.map((item: any, index: any) => (
85-
<Link
86-
href={`/datasets?tags=${item.value}`}
87-
target="_blank"
88-
className="flex justify-center"
89-
key={index}
90-
>
91-
<Text className="underline">{item.value}</Text>
92-
</Link>
93-
))}
94-
</div>
95-
</div>
96-
)}
110+
<div className="flex flex-col gap-4">
111+
<Text variant="bodyMd">Description</Text>
112+
<Text variant="bodyMd">
113+
{data.description.length > 260 && !isexpanded
114+
? `${data.description.slice(0, 260)}...`
115+
: data.description}
116+
{data.description.length > 260 && (
117+
<Button
118+
kind="tertiary"
119+
size="slim"
120+
onClick={toggleDescription}
121+
className="text-blue-600 w-fit"
122+
>
123+
{isexpanded ? 'See Less' : 'See More'}
124+
</Button>
125+
)}
126+
</Text>
127+
</div>
97128
</div>
98129
</div>
99130
);

0 commit comments

Comments
 (0)