Skip to content

Commit 9dffc35

Browse files
rdhwanrdhwan
committed
fix(details):conditional modal, make logo optional
Adjust for organisator: cuma bisa ganti logo dan desc Preview for current Logo others optimization...
1 parent 8dcafe9 commit 9dffc35

File tree

1 file changed

+90
-79
lines changed
  • app/dashboard/state/details/[stateID]

1 file changed

+90
-79
lines changed

‎app/dashboard/state/details/[stateID]/page.tsx

Lines changed: 90 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export default function Details() {
110110
register,
111111
handleSubmit,
112112
control,
113+
reset,
113114
formState: { errors },
114115
} = useForm<UpdateStateActivities>();
115116

@@ -307,7 +308,10 @@ export default function Details() {
307308
bgColor={"#185C99"}
308309
borderRadius={"full"}
309310
_hover={{ bgColor: "#295278" }}
310-
onClick={onOpen}
311+
onClick={() => {
312+
reset();
313+
onOpen();
314+
}}
311315
>
312316
<Flex alignItems={"center"} color={"white"}>
313317
<Icon as={MdEdit} boxSize={4} />
@@ -431,16 +435,25 @@ export default function Details() {
431435
<Modal size={"2xl"} onClose={onClose} isOpen={isOpen} isCentered>
432436
<ModalOverlay />
433437
<ModalContent borderRadius={"xl"}>
438+
<ModalHeader>Sunting STATE {dataState?.name}</ModalHeader>
439+
<ModalCloseButton />
440+
434441
<form
435442
// to handle multipart, please use formData :)
436443
onSubmit={handleSubmit((data) => {
437444
const formData = new FormData();
438-
formData.append("name", data.name);
439-
formData.append("day", data.day);
445+
formData.append("name", data.name ?? dataState?.name);
446+
formData.append("day", data.day ?? dataState?.day);
440447
formData.append("stateDesc", data.stateDesc);
441-
formData.append("location", data.location);
442-
formData.append("quota", data.quota.toString());
443-
formData.append("test_file", data.stateLogo);
448+
formData.append("location", data.location ?? dataState?.location);
449+
formData.append(
450+
"quota",
451+
data.quota ? data.quota.toString() : dataState!.quota.toString()
452+
);
453+
454+
if (data.stateLogo) {
455+
formData.append("test_file", data.stateLogo);
456+
}
444457

445458
api
446459
.put(`/stateAct/update/${params.stateID}`, formData, {
@@ -460,86 +473,84 @@ export default function Details() {
460473
onClose();
461474
})}
462475
>
463-
<ModalBody>
464-
<Center w={"full"} my={"1em"}>
465-
<Text fontSize={"2xl"} fontWeight={"semibold"} color={"#11D22"}>
466-
Sunting
467-
</Text>
468-
</Center>
469-
<Box w={"full"}>
470-
<ModalBody textColor="#1e1d22">
471-
<FormControl isInvalid={!!errors.stateLogo}>
472-
<Box w={"full"} mb={"2em"}>
473-
<FormLabel
474-
fontSize={"md"}
475-
fontWeight={"semibold"}
476-
color={"#11D22"}
477-
>
478-
Logo
479-
</FormLabel>
480-
481-
<Box
482-
padding={"1em"}
483-
border={"solid #CBD5E0"}
484-
width={"100%"}
485-
height={"100%"}
486-
borderRadius={10}
487-
transition={"0.1s ease-in-out"}
488-
_hover={{ border: "solid #CBD5E0" }}
489-
>
490-
<DropZone
491-
control={control}
492-
name="stateLogo"
493-
rules={{
494-
required: "Logo STATE tidak boleh kosong.",
495-
}}
496-
/>
497-
{/* <Input
476+
<ModalBody textColor="#1e1d22">
477+
<FormControl isInvalid={!!errors.stateLogo}>
478+
<Box w={"full"} mb={"2em"}>
479+
<FormLabel
480+
fontSize={"md"}
481+
fontWeight={"semibold"}
482+
color={"#11D22"}
483+
>
484+
Ganti Logo
485+
</FormLabel>
486+
487+
<Box
488+
padding={"1em"}
489+
border={"solid #CBD5E0"}
490+
width={"100%"}
491+
height={"100%"}
492+
borderRadius={10}
493+
transition={"0.1s ease-in-out"}
494+
_hover={{ border: "solid #CBD5E0" }}
495+
>
496+
<DropZone
497+
control={control}
498+
name="stateLogo"
499+
defaultValue={dataState?.stateLogo}
500+
// rules={{
501+
// required: "Logo STATE tidak boleh kosong.",
502+
// }}
503+
/>
504+
{/* <Input
498505
id="stateLogo"
499506
type="file"
500507
{...register("stateLogo", {
501508
required: "Logo STATE tidak boleh kosong.",
502509
})}
503510
/> */}
504-
</Box>
505-
<FormErrorMessage>
506-
{errors.stateLogo && errors.stateLogo.message}
507-
</FormErrorMessage>
508-
</Box>
509-
</FormControl>
511+
</Box>
512+
<FormErrorMessage>
513+
{errors.stateLogo && errors.stateLogo.message}
514+
</FormErrorMessage>
515+
</Box>
516+
</FormControl>
510517

511-
<FormControl isInvalid={!!errors.name}>
512-
<FormLabel>Name</FormLabel>
513-
<Input
514-
id="name"
515-
{...register("name", {
516-
value: dataState?.name,
517-
required: "Nama STATE tidak boleh kosong.",
518-
pattern: {
519-
value: /^[A-Za-z .]*$/,
520-
message: "Nama STATE tidak valid",
521-
},
522-
})}
523-
/>
524-
<FormErrorMessage>
525-
{errors.name && errors.name.message}
526-
</FormErrorMessage>
527-
</FormControl>
518+
{auth.role !== "organisator" && (
519+
<FormControl isInvalid={!!errors.name}>
520+
<FormLabel>Name</FormLabel>
521+
<Input
522+
id="name"
523+
{...register("name", {
524+
value: dataState?.name,
525+
required: "Nama STATE tidak boleh kosong.",
526+
pattern: {
527+
value: /^[A-Za-z .]*$/,
528+
message: "Nama STATE tidak valid",
529+
},
530+
})}
531+
/>
532+
<FormErrorMessage>
533+
{errors.name && errors.name.message}
534+
</FormErrorMessage>
535+
</FormControl>
536+
)}
528537

529-
<FormControl isInvalid={!!errors.stateDesc}>
530-
<FormLabel>Deksripsi</FormLabel>
531-
<Textarea
532-
id="stateDesc"
533-
{...register("stateDesc", {
534-
value: dataState?.stateDesc,
535-
required: "Deskripsi STATE tidak boleh kosong",
536-
})}
537-
/>
538-
<FormErrorMessage>
539-
{errors.stateDesc && errors.stateDesc.message}
540-
</FormErrorMessage>
541-
</FormControl>
538+
<FormControl isInvalid={!!errors.stateDesc}>
539+
<FormLabel>Deksripsi</FormLabel>
540+
<Textarea
541+
id="stateDesc"
542+
{...register("stateDesc", {
543+
value: dataState?.stateDesc,
544+
required: "Deskripsi STATE tidak boleh kosong",
545+
})}
546+
/>
547+
<FormErrorMessage>
548+
{errors.stateDesc && errors.stateDesc.message}
549+
</FormErrorMessage>
550+
</FormControl>
542551

552+
{auth.role !== "organisator" && (
553+
<>
543554
<FormControl isInvalid={!!errors.location}>
544555
<FormLabel>Lokasi</FormLabel>
545556
<Input
@@ -600,8 +611,8 @@ export default function Details() {
600611
{errors.quota && errors.quota.message}
601612
</FormErrorMessage>
602613
</FormControl>
603-
</ModalBody>
604-
</Box>
614+
</>
615+
)}
605616
</ModalBody>
606617
<ModalFooter>
607618
<Button type="submit" color="#185C99" mr={3}>

0 commit comments

Comments
 (0)