Skip to content

Commit dc74ea5

Browse files
sanjaypinnasanjaypinna
committed
refactor: improve layout and styling in Details, Resources, and UseCase components
1 parent ceed033 commit dc74ea5

5 files changed

Lines changed: 102 additions & 56 deletions

File tree

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ const DetailsQuery: any = graphql(`
4949
}
5050
`);
5151

52-
5352
const Details: React.FC = () => {
5453
const params = useParams();
5554
const chartRef = useRef<ReactECharts>(null);
@@ -59,8 +58,6 @@ const Details: React.FC = () => {
5958
() => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
6059
);
6160

62-
63-
6461
const renderChart = (item: any) => {
6562
if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
6663
// Register the map
@@ -77,13 +74,13 @@ const Details: React.FC = () => {
7774
const toggleDescription = () => setIsexpanded(!isexpanded);
7875

7976
return (
80-
<div className=" flex w-full flex-col gap-4 py-10">
77+
<>
8178
{isLoading ? (
8279
<div className=" mt-8 flex justify-center">
8380
<Spinner />
8481
</div>
8582
) : data?.getChartData?.length > 0 ? (
86-
<>
83+
<div className=" flex w-full flex-col gap-4 py-10">
8784
<div className="relative w-full ">
8885
<Carousel className="w-full">
8986
<div className=" px-12">
@@ -126,22 +123,22 @@ const Details: React.FC = () => {
126123
</Link>
127124
</div>
128125
</div>
129-
<div className="lg:p-10">
126+
<div className="p-4 lg:p-10">
130127
{item.__typename === 'TypeResourceChart' &&
131128
item?.chart?.options ? (
132129
renderChart(item)
133130
) : (
134131
<Image
135132
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart_image/${item.id}`}
136133
alt={''}
137-
width={300}
138-
height={300}
134+
width={100}
135+
height={100}
139136
unoptimized
137+
className=" h-full w-full object-contain"
140138
/>
141139
)}
142140
{/* Call the renderChart function */}
143141
</div>
144-
145142
</div>
146143
</CarouselItem>
147144
))}
@@ -155,11 +152,11 @@ const Details: React.FC = () => {
155152
</div>
156153
</Carousel>
157154
</div>
158-
</>
155+
</div>
159156
) : (
160157
''
161158
)}
162-
</div>
159+
</>
163160
);
164161
};
165162

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

Lines changed: 86 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ const Resources = () => {
210210
</div>
211211
) : getResourceDetails.data &&
212212
getResourceDetails.data?.datasetResources?.length > 0 ? (
213-
<div className=" py-10 flex flex-col gap-8">
213+
<div className=" flex flex-col gap-8 py-10">
214214
<div className="flex flex-col gap-1">
215215
<Text variant="headingLg">Files in this Dataset </Text>
216216
<Text variant="bodyLg">
@@ -224,34 +224,37 @@ const Resources = () => {
224224
key={index}
225225
className="mt-5 flex flex-col gap-6 border-1 border-solid border-greyExtralight bg-surfaceDefault p-4 lg:mx-0 lg:p-6"
226226
>
227-
<div className="flex flex-wrap justify-between gap-4">
228-
<div className="flex w-full flex-col gap-4 ">
229-
<div className=" flex flex-wrap items-center justify-between gap-2 lg:flex-nowrap">
230-
<div className="flex items-start gap-2 lg:items-center">
231-
{item.fileDetails?.format && (
232-
<Format fileType={item.fileDetails?.format} />
233-
)}
234-
<Text variant="headingMd" className='truncate' >{item.name}</Text>
235-
</div>
236-
</div>
237-
<Accordion type="single" collapsible className="w-full">
238-
<AccordionItem value="item-1" className=" border-none">
239-
<div className="flex flex-wrap items-center justify-end gap-4">
240-
<AccordionTrigger className="flex w-full flex-wrap items-center gap-2 p-0 hover:no-underline">
241-
<Text className=" text-secondaryText">
227+
<div>
228+
<Accordion type="single" collapsible className="w-full">
229+
<AccordionItem value="item-1" className=" border-none">
230+
<div className="flex flex-wrap md:flex-nowrap items-center justify-between gap-4">
231+
<div className="flex flex-wrap md:flex-nowrap items-center gap-2 ">
232+
{item.fileDetails?.format && (
233+
<Format fileType={item.fileDetails?.format} />
234+
)}
235+
<Text variant="headingMd" className=" line-clamp-1">
236+
{item.name}
237+
</Text>
238+
</div>
239+
<div className="flex items-center gap-4">
240+
<AccordionTrigger className="flex w-full items-center gap-2 p-0 hover:no-underline">
241+
<Text
242+
variant="bodyLg"
243+
className=" w-[100px] text-secondaryText"
244+
>
242245
{' '}
243246
View Details
244247
</Text>
245248
</AccordionTrigger>
246-
<div>
247-
<Link
248-
href={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/resource/${item.id}`}
249-
target="_blank"
250-
className="flex justify-center"
251-
>
252-
<Button kind="tertiary">
249+
<Link
250+
href={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/resource/${item.id}`}
251+
target="_blank"
252+
className="flex justify-center"
253+
>
254+
<Button kind="tertiary">
253255
<div className="flex gap-1">
254256
<Text
257+
variant="bodyLg"
255258
className=" text-primaryText"
256259
fontWeight="semibold"
257260
>
@@ -263,23 +266,22 @@ const Resources = () => {
263266
</Button>
264267
</Link>
265268
</div>
266-
</div>
267-
<AccordionContent
268-
className="flex w-full flex-col py-5"
269-
style={{
270-
backgroundColor: 'var( --base-pure-white)',
271-
outline: '1px solid var( --base-pure-white)',
272-
}}
273-
>
274-
<Table
275-
columns={generateColumnData()}
276-
rows={generateTableData(item)}
277-
hideFooter
278-
/>
279-
</AccordionContent>
280-
</AccordionItem>
281-
</Accordion>
282-
</div>
269+
</div>
270+
<AccordionContent
271+
className="flex w-full flex-col py-5"
272+
style={{
273+
backgroundColor: 'var( --base-pure-white)',
274+
outline: '1px solid var( --base-pure-white)',
275+
}}
276+
>
277+
<Table
278+
columns={generateColumnData()}
279+
rows={generateTableData(item)}
280+
hideFooter
281+
/>
282+
</AccordionContent>
283+
</AccordionItem>
284+
</Accordion>
283285
</div>
284286
</div>
285287
)
@@ -294,3 +296,47 @@ const Resources = () => {
294296
};
295297

296298
export default Resources;
299+
300+
{
301+
/* <Accordion type="single" collapsible className="w-full">
302+
<AccordionItem value="item-1" className=" border-none">
303+
<div className="flex flex-wrap items-center justify-between gap-4">
304+
<div className="flex flex-col lg:w-3/4">
305+
<div
306+
ref={(el) => (descriptionRefs.current[index] = el)}
307+
className={!showMore[index] ? 'line-clamp-2' : ''}
308+
>
309+
<Text>{item.description}</Text>
310+
</div>
311+
{isDescriptionLong[index] && (
312+
<Button
313+
className="self-start p-2"
314+
onClick={() => toggleShowMore(index)}
315+
variant="interactive"
316+
size="slim"
317+
kind="tertiary"
318+
>
319+
{showMore[index] ? 'Show less' : 'Show more'}
320+
</Button>
321+
)}
322+
</div>
323+
<AccordionTrigger className="flex w-full flex-wrap items-center gap-2 p-0 hover:no-underline">
324+
View Details
325+
</AccordionTrigger>
326+
</div>
327+
<AccordionContent
328+
className="flex w-full flex-col py-5"
329+
style={{
330+
backgroundColor: 'var( --base-pure-white)',
331+
outline: '1px solid var( --base-pure-white)',
332+
}}
333+
>
334+
<Table
335+
columns={generateColumnData()}
336+
rows={generateTableData(item)}
337+
hideFooter
338+
/>
339+
</AccordionContent>
340+
</AccordionItem>
341+
</Accordion> */
342+
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const UseCasedetails: any = graphql(`
6464
url
6565
}
6666
}
67-
platformUrl
67+
platformUrl
6868
logo {
6969
name
7070
path
@@ -190,13 +190,14 @@ const UseCaseDetailPage = () => {
190190
</div>
191191
</div>
192192
<div className="container py-8 lg:py-14">
193-
<div className=" flex flex-col gap-1 pb-10">
193+
<div className=" flex flex-col gap-1 ">
194194
<Text variant="headingXl">Datasets in this Use Case</Text>
195195
<Text variant="bodyLg" fontWeight="regular">
196196
All Datasets related to this Use Case
197197
</Text>
198198
</div>
199-
<div className="grid grid-cols-1 p-4 gap-6 overflow-y-auto md:grid-cols-2 lg:grid-cols-3 max-h-[calc(100vh-250px)]">
199+
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
200+
{/* <div className="grid grid-cols-1 p-4 gap-6 overflow-y-auto md:grid-cols-2 lg:grid-cols-3 max-h-[calc(100vh-250px)]"> */}
200201
{datasets.length > 0 &&
201202
datasets.map((dataset: TypeDataset) => (
202203
<Card

‎app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/assign/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const Assign = () => {
129129
toast('Dataset Assigned Successfully');
130130
UseCaseDetails.refetch();
131131
router.push(
132-
`/dashboard/${params.entityType}/${params.entitySlug}/usecases/edit/${params.id}/contributors`
132+
`/dashboard/${params.entityType}/${params.entitySlug}/usecases/edit/${params.id}/dashboards`
133133
);
134134
},
135135
onError: (err: any) => {

‎app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,9 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
7373

7474
const { mutate, isLoading: editMutationLoading } = useMutation(
7575
(data: { data: UseCaseInputPartial }) =>
76-
GraphQL(UpdateUseCaseTitleMutation, {}, data),
76+
GraphQL(UpdateUseCaseTitleMutation, {
77+
[params.entityType]: params.entitySlug,
78+
}, data),
7779
{
7880
onSuccess: () => {
7981
toast('Use case updated successfully');

0 commit comments

Comments
 (0)