Skip to content

Commit 558f0e5

Browse files
sanjaypinnasanjaypinna
committed
integrate charts image
1 parent a8fe3a5 commit 558f0e5

File tree

1 file changed

+257
-67
lines changed
  • app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components

1 file changed

+257
-67
lines changed

‎app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsImage.tsx‎

Lines changed: 257 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
import React, { useState } from 'react';
1+
import { UUID } from 'crypto';
2+
import React, { useCallback, useEffect, useState } from 'react';
3+
import { useParams } from 'next/navigation';
24
import { graphql } from '@/gql';
5+
import { ResourceChartImageInputPartial } from '@/gql/generated/graphql';
6+
import { useMutation, useQuery } from '@tanstack/react-query';
37
import {
48
Button,
59
Divider,
610
DropZone,
711
Icon,
812
Sheet,
13+
Spinner,
914
Text,
1015
TextField,
16+
toast,
1117
} from 'opub-ui';
1218

19+
import { GraphQL } from '@/lib/api';
1320
import { Icons } from '@/components/icons';
21+
import { Loading } from '@/components/loading';
1422

1523
interface ImageProps {
1624
setType: any;
@@ -32,85 +40,267 @@ const getResourceChartImageDetails: any = graphql(`
3240
}
3341
`);
3442

43+
const AddResourceChartimage: any = graphql(`
44+
mutation GenerateResourceChartimage($dataset: UUID!) {
45+
addResourceChartImage(dataset: $dataset) {
46+
__typename
47+
... on TypeResourceChartImage {
48+
id
49+
name
50+
}
51+
}
52+
}
53+
`);
54+
55+
const UpdateChartImageMutation: any = graphql(`
56+
mutation updateChartImage($data: ResourceChartImageInputPartial!) {
57+
updateResourceChartImage(data: $data) {
58+
__typename
59+
id
60+
name
61+
description
62+
image {
63+
name
64+
path
65+
}
66+
}
67+
}
68+
`);
69+
3570
const ChartsImage: React.FC<ImageProps> = ({
3671
setType,
3772
setImageId,
3873
imageId,
3974
}) => {
40-
console.log(setType);
75+
const params = useParams<{
76+
entityType: string;
77+
entitySlug: string;
78+
id: string;
79+
}>();
80+
81+
const { data: chartImageDetails, refetch }: { data: any; refetch: any } =
82+
useQuery(
83+
[`chartsdata_${params.id}`, imageId],
84+
() =>
85+
GraphQL(
86+
getResourceChartImageDetails,
87+
{
88+
[params.entityType]: params.entitySlug,
89+
},
90+
{
91+
filters: {
92+
id: imageId,
93+
},
94+
}
95+
),
96+
{}
97+
);
98+
99+
const resourceChartImageMutation: {
100+
mutate: any;
101+
isLoading: any;
102+
} = useMutation(
103+
(data: { dataset: UUID }) =>
104+
GraphQL(
105+
AddResourceChartimage,
106+
{
107+
[params.entityType]: params.entitySlug,
108+
},
109+
data
110+
),
111+
{
112+
onSuccess: (res: any) => {
113+
toast('Resource ChartImage Created Successfully');
114+
setType('img');
115+
setImageId(res.addResourceChartImage.id);
116+
setIsSheetOpen(false);
117+
},
118+
onError: (err: any) => {
119+
toast(`Received ${err} while deleting chart `);
120+
},
121+
}
122+
);
123+
124+
const initialFormData = {
125+
id: '',
126+
name: '',
127+
description: '',
128+
image: null,
129+
};
130+
131+
const [formData, setFormData] = useState(initialFormData);
132+
const [previousFormData, setPreviousFormData] = useState(initialFormData);
133+
41134
const [isSheetOpen, setIsSheetOpen] = useState(false);
42135

136+
useEffect(() => {
137+
if (chartImageDetails?.resourceChartImages[0]) {
138+
const updatedData = {
139+
name: chartImageDetails?.resourceChartImages[0].name || '',
140+
description:
141+
chartImageDetails?.resourceChartImages[0].description || '',
142+
image: chartImageDetails?.resourceChartImages[0].image || null,
143+
id: chartImageDetails?.resourceChartImages[0].id,
144+
};
145+
setFormData(updatedData);
146+
setPreviousFormData(updatedData);
147+
}
148+
}, [chartImageDetails]);
149+
150+
151+
152+
const { mutate, isLoading: editMutationLoading } = useMutation(
153+
(data: { data: ResourceChartImageInputPartial }) =>
154+
GraphQL(UpdateChartImageMutation, {}, data),
155+
{
156+
onSuccess: () => {
157+
toast('ChartImage updated successfully');
158+
// Optionally, reset form or perform other actions
159+
refetch();
160+
},
161+
onError: (error: any) => {
162+
toast(`Error: ${error.message}`);
163+
},
164+
}
165+
);
166+
167+
const handleChange = useCallback((field: string, value: any) => {
168+
setFormData((prevData) => ({
169+
...prevData,
170+
[field]: value,
171+
}));
172+
}, []);
173+
174+
const onDrop = React.useCallback(
175+
(_dropFiles: File[], acceptedFiles: File[]) => {
176+
mutate({
177+
data: {
178+
id: imageId,
179+
image: acceptedFiles[0],
180+
},
181+
});
182+
{
183+
refetch();
184+
}
185+
},
186+
[]
187+
);
188+
189+
const handleSave = (updatedData: any) => {
190+
if (JSON.stringify(formData) !== JSON.stringify(previousFormData)) {
191+
setPreviousFormData(updatedData);
192+
193+
mutate({
194+
data: {
195+
id: imageId,
196+
name: updatedData.name,
197+
description: updatedData.description,
198+
},
199+
});
200+
}
201+
};
202+
43203
return (
44204
<>
45-
<div className="rounded-2 border-2 border-solid border-baseGraySlateSolid6 px-6 py-8">
46-
<div className="mb-6 flex flex-wrap items-center justify-between gap-6">
47-
<Button
48-
onClick={(e) => {
49-
setType('list');
50-
}}
51-
kind="tertiary"
52-
className="flex text-start"
53-
>
54-
<span className="flex items-center gap-2">
55-
<Icon source={Icons.back} color="interactive" size={24} />
56-
<Text color="interactive">Charts Listing</Text>
57-
</span>
58-
</Button>
59-
<Sheet open={isSheetOpen}>
60-
<Sheet.Trigger>
61-
<Button onClick={() => setIsSheetOpen(true)}>
62-
Select Charts
63-
</Button>
64-
</Sheet.Trigger>
65-
<Sheet.Content side="bottom">
66-
<div className=" flex flex-col gap-6 p-10">
67-
<div className="flex items-center justify-between">
68-
<Text variant="bodyLg">Select Charts</Text>
69-
<div className="flex items-center gap-3">
70-
<Button onClick={(e) => setType('visualize')}>
71-
Visualize Data
72-
</Button>
73-
<Button onClick={(e) => setType('img')}>Add Image</Button>
74-
<Button
75-
kind="tertiary"
76-
onClick={() => setIsSheetOpen(false)}
77-
>
78-
<Icon source={Icons.cross} size={24} />
79-
</Button>
205+
{!imageId ? (
206+
<Loading />
207+
) : (
208+
<div className="rounded-2 border-2 border-solid border-baseGraySlateSolid6 px-6 py-8">
209+
<div className="mb-6 flex flex-wrap items-center justify-between gap-6">
210+
<Button
211+
onClick={(e) => {
212+
setType('list');
213+
setImageId('');
214+
}}
215+
kind="tertiary"
216+
className="flex text-start"
217+
>
218+
<span className="flex items-center gap-2">
219+
<Icon source={Icons.back} color="interactive" size={24} />
220+
<Text color="interactive">Charts Listing</Text>
221+
</span>
222+
</Button>
223+
<Sheet open={isSheetOpen}>
224+
<Sheet.Trigger>
225+
<Button onClick={() => setIsSheetOpen(true)}>
226+
Select ChartImage
227+
</Button>
228+
</Sheet.Trigger>
229+
<Sheet.Content side="bottom">
230+
<div className=" flex flex-col gap-6 p-10">
231+
<div className="flex items-center justify-between">
232+
<Text variant="bodyLg">Select Charts</Text>
233+
<div className="flex items-center gap-3">
234+
<Button
235+
onClick={(e) =>
236+
resourceChartImageMutation.mutate({
237+
dataset: params.id,
238+
})
239+
}
240+
>
241+
Add Image
242+
</Button>
243+
<Button
244+
kind="tertiary"
245+
onClick={() => setIsSheetOpen(false)}
246+
>
247+
<Icon source={Icons.cross} size={24} />
248+
</Button>
249+
</div>
80250
</div>
81251
</div>
82-
</div>
83-
</Sheet.Content>
84-
</Sheet>
85-
</div>
86-
<Divider />
87-
<div className="mt-8 flex w-full gap-8">
88-
<div className="flex w-4/5 flex-col gap-8">
89-
<TextField
90-
// onChange={(e) => handleChange('name', e)}
91-
label="Chart Name"
92-
name="name"
93-
required
94-
helpText="To know about best practices for naming Visualizations go to our User Guide"
95-
// onBlur={() => handleSave(chartData)}
96-
/>
97-
<TextField
98-
// onChange={(e) => handleChange('description', e)}
99-
label="Description"
100-
name="description"
101-
multiline={4}
102-
// onBlur={() => handleSave(chartData)}
103-
/>
252+
</Sheet.Content>
253+
</Sheet>
254+
</div>
255+
<Divider />
256+
<div className="mt-8 flex justify-end gap-2">
257+
<Text color="highlight">Auto Save </Text>
258+
{editMutationLoading ? (
259+
<Spinner />
260+
) : (
261+
<Icon source={Icons.checkmark} />
262+
)}
263+
</div>
264+
<div className="mt-4 flex w-full flex-wrap gap-8">
265+
<div className="flex w-full flex-col gap-8 ">
266+
<TextField
267+
label="Title"
268+
name="name"
269+
value={formData.name}
270+
onChange={(e) => handleChange('name', e)}
271+
onBlur={() => handleSave(formData)}
272+
/>
273+
<TextField
274+
label="Description"
275+
name="description"
276+
value={formData.description}
277+
multiline={4}
278+
onChange={(e) => handleChange('description', e)}
279+
onBlur={() => handleSave(formData)}
280+
/>
281+
<DropZone
282+
label={
283+
!chartImageDetails?.resourceChartImages[0]?.image
284+
? 'Logo'
285+
: 'Change Logo'
286+
}
287+
onDrop={onDrop}
288+
name={'Logo'}
289+
>
290+
<DropZone.FileUpload
291+
actionHint="Accepts .gif, .jpg, and .png"
292+
actionTitle={
293+
chartImageDetails &&
294+
chartImageDetails?.resourceChartImages[0]?.image?.name
295+
.split('/')
296+
.pop()
297+
}
298+
/>
299+
</DropZone>
300+
</div>
104301
</div>
105-
<DropZone
106-
name={'drop'}
107-
label="File associated with resource"
108-
onDrop={(e) => console.log(e)}
109-
>
110-
<DropZone.FileUpload actionHint="Accepts .gif, .jpg, and .png" />
111-
</DropZone>
112302
</div>
113-
</div>
303+
)}
114304
</>
115305
);
116306
};

0 commit comments

Comments
 (0)