Skip to content

Commit 53b9b62

Browse files
bhavabhuthibhavabhuthi
committed
Disable three chart viz types along with simple validation for both the forms
1 parent efe135b commit 53b9b62

File tree

1 file changed

+167
-135
lines changed
  • app/[locale]/dashboard/[entityType]/[entitySlug]/charts/components

1 file changed

+167
-135
lines changed

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

Lines changed: 167 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
DropZone,
1515
Form,
1616
Icon,
17-
Label,
17+
Labelled,
1818
Select,
1919
Spinner,
2020
Tag,
@@ -173,6 +173,8 @@ const ChartImageUpload = ({
173173
dataset: selectedDataset,
174174
image: files,
175175
});
176+
} else {
177+
toast('Required fields missing. Please fill all required fields.');
176178
}
177179
};
178180

@@ -187,91 +189,100 @@ const ChartImageUpload = ({
187189

188190
<Form>
189191
<div className="flex flex-col gap-4">
190-
<Combobox
191-
label="Select Dataset"
192-
name="selectDataset"
193-
list={allDatasetsRes?.data?.datasets?.map((item: any) => {
194-
return {
195-
label: item.title,
196-
value: item.id,
197-
};
198-
})}
199-
displaySelected
200-
// selectedValue={selectedDataset}
201-
onChange={(e) => {
202-
setSelectedDataset(e);
203-
}}
204-
required
205-
/>
206-
207-
<DropZone
208-
name={'chartImage'}
209-
label="Select Chart Image"
210-
accept=".png,.jpg,.jpeg,.svg,.tiff"
211-
onDrop={(val) => {
212-
setFiles(val[0]);
213-
}}
214-
outline
215-
allowMultiple={false}
216-
className="bg-greyExtralight"
217-
errorOverlayText={files ? undefined : 'Please select a file'}
218-
required
219-
>
220-
{files ? (
221-
<div className="mt-4 flex items-center justify-between">
222-
<Text variant="bodyMd" color="subdued">
223-
{files.name}
224-
</Text>
225-
<Button
226-
icon={<Icons.delete />}
227-
kind="tertiary"
228-
onClick={() => setFiles(undefined)}
229-
/>
230-
</div>
231-
) : (
232-
<DropZone.FileUpload
233-
actionHint={
234-
<div className="flex flex-col items-center gap-2 p-2">
235-
<Text variant="bodyMd" color="subdued">
236-
Drag and drop
237-
</Text>
238-
<div className="font-color-textDefault w-fit rounded-1 bg-tertiaryAccent px-2 py-1">
239-
Select File
240-
</div>
241-
<Text variant="bodyMd" color="subdued">
242-
*only one image can be added.
243-
</Text>
244-
<Text variant="bodyMd" color="subdued">
245-
Recommended resolution of 16:9 - (1280x720), (1920x1080)
246-
</Text>
247-
<Text variant="bodyMd" color="subdued">
248-
Maximum file size: 100MB
249-
</Text>
250-
<div className="flex flex-row items-center gap-2">
192+
<Labelled label="Select Dataset" requiredIndicator>
193+
<Combobox
194+
label=""
195+
name="selectDataset"
196+
list={allDatasetsRes?.data?.datasets?.map((item: any) => {
197+
return {
198+
label: item.title,
199+
value: item.id,
200+
};
201+
})}
202+
displaySelected
203+
// selectedValue={selectedDataset}
204+
onChange={(e) => {
205+
setSelectedDataset(e);
206+
}}
207+
required
208+
/>
209+
</Labelled>
210+
211+
<Labelled label="Select Chart Image" requiredIndicator>
212+
<DropZone
213+
name={'chartImage'}
214+
label=""
215+
accept=".png,.jpg,.jpeg,.svg,.tiff"
216+
onDrop={(val) => {
217+
setFiles(val[0]);
218+
}}
219+
outline
220+
allowMultiple={false}
221+
className="bg-greyExtralight"
222+
errorOverlayText={files ? undefined : 'Please select a file'}
223+
required
224+
>
225+
{files ? (
226+
<div className="mt-4 flex items-center justify-between">
227+
<Text variant="bodyMd" color="subdued">
228+
{files.name}
229+
</Text>
230+
<Button
231+
icon={<Icons.delete />}
232+
kind="tertiary"
233+
onClick={() => setFiles(undefined)}
234+
/>
235+
</div>
236+
) : (
237+
<DropZone.FileUpload
238+
actionHint={
239+
<div className="flex flex-col items-center gap-2 p-2">
251240
<Text variant="bodyMd" color="subdued">
252-
Supported File Types:
241+
Drag and drop
253242
</Text>
254-
<div className="flex flex-row gap-1">
255-
{['PNG', 'JPG', 'SVG', 'TIFF'].map((item, index) => (
256-
<Tag
257-
fillColor="white"
258-
textColor="baseDefault"
259-
key={index}
260-
>
261-
{item}
262-
</Tag>
263-
))}
243+
<div className="font-color-textDefault w-fit rounded-1 bg-tertiaryAccent px-2 py-1">
244+
Select File
245+
</div>
246+
<Text variant="bodyMd" color="subdued">
247+
*only one image can be added.
248+
</Text>
249+
<Text variant="bodyMd" color="subdued">
250+
Recommended resolution of 16:9 - (1280x720), (1920x1080)
251+
</Text>
252+
<Text variant="bodyMd" color="subdued">
253+
Maximum file size: 100MB
254+
</Text>
255+
<div className="flex flex-row items-center gap-2">
256+
<Text variant="bodyMd" color="subdued">
257+
Supported File Types:
258+
</Text>
259+
<div className="flex flex-row gap-1">
260+
{['PNG', 'JPG', 'SVG', 'TIFF'].map((item, index) => (
261+
<Tag
262+
fillColor="white"
263+
textColor="baseDefault"
264+
key={index}
265+
>
266+
{item}
267+
</Tag>
268+
))}
269+
</div>
264270
</div>
265271
</div>
266-
</div>
267-
}
268-
actionTitle={''}
269-
/>
270-
)}
271-
</DropZone>
272+
}
273+
actionTitle={''}
274+
/>
275+
)}
276+
</DropZone>
277+
</Labelled>
272278

273279
<div className="flex items-center justify-center">
274-
<Button kind="primary" size="large" onClick={handleAddImage}>
280+
<Button
281+
kind="primary"
282+
size="large"
283+
onClick={handleAddImage}
284+
disabled={createResourceChartImageMutation.isLoading}
285+
>
275286
Add Image
276287
</Button>
277288
</div>
@@ -537,31 +548,37 @@ const ChartCreateViz = ({
537548
label: 'BAR',
538549
value: 'BAR',
539550
icon: 'chartBar',
551+
disabled: false,
540552
},
541553
{
542554
label: 'LINE',
543555
value: 'LINE',
544556
icon: 'chartLine',
557+
disabled: false,
545558
},
546559
{
547560
label: 'TREEMAP',
548561
value: 'TREEMAP',
549562
icon: 'chartTreeMap',
563+
disabled: false,
550564
},
551565
{
552566
label: 'BIG NUMBER',
553567
value: 'BIG_NUMBER',
554568
icon: 'chartBigNumber',
569+
disabled: true,
555570
},
556571
{
557572
label: 'MAP',
558573
value: 'MAP',
559574
icon: 'chartMap',
575+
disabled: true,
560576
},
561577
{
562578
label: 'MAP POLYGON',
563579
value: 'MAP_POLYGON',
564580
icon: 'chartMapPolygon',
581+
disabled: true,
565582
},
566583
];
567584

@@ -572,7 +589,7 @@ const ChartCreateViz = ({
572589
type: selectedChartType,
573590
});
574591
} else {
575-
toast('Please select a resource and chart type');
592+
toast('Required fields missing. Please fill all required fields.');
576593
}
577594
};
578595

@@ -586,69 +603,84 @@ const ChartCreateViz = ({
586603
</div>
587604
<Form>
588605
<div className="flex flex-col gap-4">
589-
<Select
590-
name={'chartCreateSelectDataset'}
591-
label="Select Dataset"
592-
options={allDatasetsRes?.data?.datasets?.map((item: any) => {
593-
return {
594-
label: item.title,
595-
value: item.id,
596-
};
597-
})}
598-
onChange={(e) => {
599-
setChartDataset(e);
600-
setChartResource('');
601-
}}
602-
/>
603-
604-
<Select
605-
name={'chartCreateSelectResource'}
606-
label="Select Resource"
607-
options={allDatasetsRes?.data?.datasets
608-
?.find((item: any) => item.id === chartDataset)
609-
?.resources?.map((item: any) => {
606+
<Labelled label="Select Dataset" requiredIndicator>
607+
<Select
608+
name={'chartCreateSelectDataset'}
609+
label=""
610+
options={allDatasetsRes?.data?.datasets?.map((item: any) => {
610611
return {
611-
label: item.name,
612+
label: item.title,
612613
value: item.id,
613614
};
614615
})}
615-
onChange={(e) => {
616-
setChartResource(e);
617-
}}
618-
value={chartResource || ''}
619-
/>
616+
required
617+
onChange={(e) => {
618+
setChartDataset(e);
619+
setChartResource('');
620+
}}
621+
/>
622+
</Labelled>
623+
624+
<Labelled label="Select Resource" requiredIndicator>
625+
<Select
626+
name={'chartCreateSelectResource'}
627+
label=""
628+
required
629+
options={allDatasetsRes?.data?.datasets
630+
?.find((item: any) => item.id === chartDataset)
631+
?.resources?.map((item: any) => {
632+
return {
633+
label: item.name,
634+
value: item.id,
635+
};
636+
})}
637+
onChange={(e) => {
638+
setChartResource(e);
639+
}}
640+
value={chartResource || ''}
641+
/>
642+
</Labelled>
643+
620644
<div>
621-
<Label>Select Chart type</Label>
645+
<Labelled label="Select Chart type" requiredIndicator>
646+
<div className="grid grid-cols-2 gap-4 pt-2">
647+
{chartTypes.map((chartType, index) => (
648+
<Button
649+
key={index}
650+
kind="tertiary"
651+
className={cn(
652+
'border rounded-lg hover:bg-gray-50 flex cursor-pointer flex-row items-center justify-start gap-2 px-1 py-2',
653+
selectedChartType === chartType.value &&
654+
'bg-greyExtralight hover:bg-greyExtralight'
655+
)}
656+
icon={
657+
<Icon
658+
source={Icons[chartType.icon]}
659+
size={48}
660+
className="svg:text-primaryDefault"
661+
/>
662+
}
663+
onClick={() => {
664+
setSelectedChartType(chartType.value);
665+
}}
666+
disabled={chartType.disabled || false}
667+
>
668+
{chartType.label}
669+
</Button>
670+
))}
671+
</div>
672+
</Labelled>
673+
622674
{/* <ChartTypeDialog /> */}
623-
<div className="mt-2 grid grid-cols-2 gap-4">
624-
{chartTypes.map((chartType, index) => (
625-
<Button
626-
key={index}
627-
kind="tertiary"
628-
className={cn(
629-
'border rounded-lg hover:bg-gray-50 flex cursor-pointer flex-row items-center justify-start gap-2 px-1 py-2',
630-
selectedChartType === chartType.value &&
631-
'bg-greyExtralight hover:bg-greyExtralight'
632-
)}
633-
icon={
634-
<Icon
635-
source={Icons[chartType.icon]}
636-
size={48}
637-
className="svg:text-primaryDefault"
638-
/>
639-
}
640-
onClick={() => {
641-
setSelectedChartType(chartType.value);
642-
}}
643-
>
644-
{chartType.label}
645-
</Button>
646-
))}
647-
</div>
648675
</div>
649676

650677
<div className="flex items-center justify-center">
651-
<Button kind="primary" size="large" onClick={handleChartCreateViz}>
678+
<Button
679+
kind="primary"
680+
size="large"
681+
onClick={handleChartCreateViz}
682+
disabled={createResourceChartVizMutation.isLoading}
683+
>
652684
Create Chart
653685
</Button>
654686
</div>

0 commit comments

Comments
 (0)