Skip to content

Commit a132bdd

Browse files
bhavabhuthibhavabhuthi
committed
Restructure the chart preview page along with
- add mutations to edit name and publich for chart image preview - Chart name refresh on query refresh - Image adjust dimentions according to max width
1 parent 9467516 commit a132bdd

File tree

3 files changed

+319
-155
lines changed

3 files changed

+319
-155
lines changed

‎app/[locale]/dashboard/[entityType]/[entitySlug]/charts/[chartID]/components/ChartGenVizPreview.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { useState } from 'react';
2+
import Image from 'next/image';
3+
import { Select, Tab, TabList, Tabs } from 'opub-ui';
4+
5+
import TitleBar from '../../../components/title-bar';
6+
7+
const ChartGenVizPreview = ({ params }: { params: any }) => {
8+
type TabValue = 'DATA' | 'CUSTOMIZE';
9+
const [selectedTab, setSelectedTab] = useState<TabValue>('DATA');
10+
11+
const handleTabClick = (item: { label: string; id: TabValue }) => {
12+
setSelectedTab(item.id);
13+
};
14+
15+
return (
16+
<div>
17+
<TitleBar
18+
label={'Chart Name'}
19+
title={'Placeholder'}
20+
goBackURL={`/dashboard/${params.entityType}/${params.entitySlug}/charts`}
21+
onSave={(val: any) => {
22+
console.log(val);
23+
}}
24+
loading={false}
25+
status={'success'}
26+
setStatus={() => {}}
27+
/>
28+
29+
<div className="border-t-2 border-solid border-greyExtralight pt-8">
30+
<div className="flex flex-row justify-center gap-6">
31+
<div className="flex flex-[7] justify-center">
32+
<Image
33+
src=""
34+
alt="Chart Image"
35+
className="w-full rounded-4 border-1 border-solid border-greyExtralight object-contain"
36+
/>
37+
</div>
38+
<div className="flex flex-[3] flex-col rounded-4 border-2 border-solid border-greyExtralight p-3">
39+
<Tabs value={selectedTab}>
40+
<TabList fitted border>
41+
<Tab
42+
theme="dataSpace"
43+
value="DATA"
44+
onClick={() => handleTabClick({ label: 'DATA', id: 'DATA' })}
45+
>
46+
DATA
47+
</Tab>
48+
<Tab
49+
theme="dataSpace"
50+
value="CUSTOMIZE"
51+
onClick={() =>
52+
handleTabClick({ label: 'CUSTOMIZE', id: 'CUSTOMIZE' })
53+
}
54+
>
55+
CUSTOMIZE
56+
</Tab>
57+
</TabList>
58+
</Tabs>
59+
60+
{selectedTab === 'DATA' ? (
61+
<div>
62+
<Select
63+
name="selectDataset"
64+
label="Select Dataset"
65+
options={[]}
66+
required
67+
/>
68+
<Select
69+
name="selectResource"
70+
label="Select Resource"
71+
options={[]}
72+
required
73+
/>
74+
<Select
75+
name="selectChartType"
76+
label="Select Chart Type"
77+
options={[]}
78+
required
79+
/>
80+
</div>
81+
) : (
82+
<div></div>
83+
)}
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
);
89+
};
90+
91+
export default ChartGenVizPreview;

‎app/[locale]/dashboard/[entityType]/[entitySlug]/charts/[chartID]/components/ChartImagePreview.tsx‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
'use client';
2+
3+
import { useEffect, useState } from 'react';
4+
import Image from 'next/image';
5+
import { graphql } from '@/gql';
6+
import { ResourceChartImageInputPartial } from '@/gql/generated/graphql';
7+
import { useMutation, useQuery } from '@tanstack/react-query';
8+
import { Button, Text, toast } from 'opub-ui';
9+
10+
import { GraphQL } from '@/lib/api';
11+
import { Loading } from '@/components/loading';
12+
import TitleBar from '../../../components/title-bar';
13+
14+
const getResourceChartImageDetailsDoc: any = graphql(`
15+
query getResourceChartImageDetails($imageId: UUID!) {
16+
resourceChartImage(imageId: $imageId) {
17+
description
18+
dataset {
19+
id
20+
title
21+
slug
22+
}
23+
id
24+
name
25+
image {
26+
name
27+
path
28+
size
29+
url
30+
width
31+
height
32+
}
33+
status
34+
}
35+
}
36+
`);
37+
38+
const updateResourceChartImageDoc: any = graphql(`
39+
mutation updateResourceCHartImage($input: ResourceChartImageInputPartial!) {
40+
updateResourceChartImage(input: $input) {
41+
__typename
42+
... on TypeResourceChartImage {
43+
id
44+
name
45+
}
46+
}
47+
}
48+
`);
49+
50+
const publishResourceChartImageDoc: any = graphql(`
51+
mutation publishResourceChartImage($resourceChartImageId: UUID!) {
52+
publishResourceChartImage(resourceChartImageId: $resourceChartImageId)
53+
}
54+
`);
55+
56+
/**
57+
* Renders a page for chart image preview.
58+
*
59+
* @param {{ params: { entityType: string, entitySlug: string, chartID: string } }} props
60+
* @returns {JSX.Element}
61+
*/
62+
const ChartImagePreview = ({ params }: { params: any }) => {
63+
const getResourceChartDetailsRes: {
64+
data: any;
65+
isLoading: boolean;
66+
refetch: any;
67+
error: any;
68+
isError: boolean;
69+
} = useQuery([`getResourceChartImageDetails_${params.chartID}`], () =>
70+
GraphQL(
71+
getResourceChartImageDetailsDoc,
72+
{
73+
[params.entityType]: params.entitySlug,
74+
},
75+
{
76+
imageId: params.chartID,
77+
}
78+
)
79+
);
80+
81+
const [chartTitle, setChartTitle] = useState('');
82+
83+
useEffect(() => {
84+
setChartTitle(getResourceChartDetailsRes?.data?.resourceChartImage?.name);
85+
}, [getResourceChartDetailsRes?.data]);
86+
87+
const updateResourceChartImageMutation: { mutate: any; isLoading: any } =
88+
useMutation(
89+
(data: { input: ResourceChartImageInputPartial }) =>
90+
GraphQL(
91+
updateResourceChartImageDoc,
92+
{
93+
[params.entityType]: params.entitySlug,
94+
},
95+
data
96+
),
97+
{
98+
onSuccess: () => {
99+
toast('ChartImage Updated Successfully');
100+
getResourceChartDetailsRes.refetch();
101+
},
102+
onError: (err: any) => {
103+
toast(`Received ${err} while updating chart `);
104+
},
105+
}
106+
);
107+
108+
const publishResourceChartImageMutation: { mutate: any; isLoading: any } =
109+
useMutation(
110+
(data: { resourceChartImageId: string }) =>
111+
GraphQL(
112+
publishResourceChartImageDoc,
113+
{
114+
[params.entityType]: params.entitySlug,
115+
},
116+
data
117+
),
118+
{
119+
onSuccess: () => {
120+
toast('Chart Image Published Successfully');
121+
getResourceChartDetailsRes.refetch();
122+
},
123+
onError: (err: any) => {
124+
toast(`Received ${err} while publishing chart `);
125+
},
126+
}
127+
);
128+
129+
return (
130+
<div>
131+
<TitleBar
132+
label={'CHART NAME'}
133+
title={chartTitle}
134+
goBackURL={`/dashboard/${params.entityType}/${params.entitySlug}/charts`}
135+
onSave={(val: any) => {
136+
console.log(val);
137+
updateResourceChartImageMutation.mutate({
138+
input: {
139+
id: params.chartID,
140+
dataset:
141+
getResourceChartDetailsRes?.data?.resourceChartImage?.dataset
142+
?.id,
143+
name: val,
144+
},
145+
});
146+
}}
147+
loading={getResourceChartDetailsRes.isLoading}
148+
status={
149+
updateResourceChartImageMutation.isLoading ? 'loading' : 'success'
150+
}
151+
setStatus={() => {}}
152+
/>
153+
154+
{getResourceChartDetailsRes?.isError ? (
155+
<div>
156+
<Text variant="heading2xl">Something went wrong</Text>
157+
</div>
158+
) : getResourceChartDetailsRes?.isLoading ? (
159+
<Loading />
160+
) : (
161+
<div className="border-t-2 border-solid border-greyExtralight pt-8">
162+
<div className="flex flex-col items-center justify-center gap-4">
163+
<div className="relative aspect-video w-full max-w-5xl">
164+
<Image
165+
src={
166+
process.env.NEXT_PUBLIC_BACKEND_URL +
167+
getResourceChartDetailsRes?.data?.resourceChartImage?.image
168+
?.url
169+
}
170+
alt={getResourceChartDetailsRes?.data?.resourceChartImage?.name}
171+
// width={
172+
// getResourceChartDetailsRes?.data?.resourceChartImage?.image
173+
// ?.width
174+
// }
175+
// height={
176+
// getResourceChartDetailsRes?.data?.resourceChartImage?.image
177+
// ?.height
178+
// }
179+
fill
180+
className="rounded-4 border-1 border-solid border-greyExtralight object-contain"
181+
/>
182+
</div>
183+
184+
{getResourceChartDetailsRes?.data?.resourceChartImage?.status ===
185+
'DRAFT' ? (
186+
<Button
187+
kind="primary"
188+
onClick={() => {
189+
publishResourceChartImageMutation.mutate({
190+
resourceChartImageId: params.chartID,
191+
});
192+
}}
193+
>
194+
Publish Chart
195+
</Button>
196+
) : getResourceChartDetailsRes?.data?.resourceChartImage?.status ===
197+
'PUBLISHED' ? (
198+
<Button
199+
kind="primary"
200+
onClick={() => {
201+
console.log('unpublish');
202+
}}
203+
>
204+
UnPublish Chart
205+
</Button>
206+
) : (
207+
<Button kind="primary" disabled>
208+
Publish Chart
209+
</Button>
210+
)}
211+
</div>
212+
</div>
213+
)}
214+
</div>
215+
);
216+
};
217+
218+
export default ChartImagePreview;

0 commit comments

Comments
 (0)