Merge branch 'dev-sabda-v2' of https://gitlab.com/hanifsalafi/mediahub_redesign

components/form/task/task-edit-form.tsx

@@ -130,14 +130,14 @@ export default function FormTaskEdit() {
   const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
   const [voiceNoteLink, setVoiceNoteLink] = useState("");
   const [mainType, setMainType] = useState<string>("1");
-  const [taskType, setTaskType] = useState<string>("atensi-khusus");
+  const [taskType, setTaskType] = useState<string>("");
-  const [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
+  const [broadcastType, setBroadcastType] = useState<string>("");
   const [type, setType] = useState<string>("1");
   const [selectedTarget, setSelectedTarget] = useState("3,4");
   const [detail, setDetail] = useState<taskDetail>();
   const [urlInputs, setUrlInputs] = useState<Url[]>([]);
   const [refresh] = useState(false);
-  const [listDest, setListDest] = useState([]); // Data Polda dan Polres
+  const [listDest, setListDest] = useState([]); 
   const [checkedLevels, setCheckedLevels] = useState(new Set());
   const [expandedPolda, setExpandedPolda] = useState([{}]);
   const [isLoading, setIsLoading] = useState(false);
@@ -712,7 +712,11 @@ export default function FormTaskEdit() {
               </div>
               <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
                 <div className="mt-5  space-y-2">
-                  <Label>{t("assignment-selection", { defaultValue: "Assignment Selection" })}</Label>
+                  <Label>
+                    {t("assignment-selection", {
+                      defaultValue: "Assignment Selection",
+                    })}
+                  </Label>
                   <Select
                     onValueChange={setSelectedTarget}
                     value={detail.assignedToRole}
@@ -848,7 +852,9 @@ export default function FormTaskEdit() {
                 </RadioGroup>
               </div>
               <div className="mt-5 space-y-2">
-                <Label>{t("assigment-type", { defaultValue: "Assigment Type" })} </Label>
+                <Label>
+                  {t("assigment-type", { defaultValue: "Assigment Type" })}{" "}
+                </Label>
                 <RadioGroup
                   defaultValue={detail.taskType.toString()}
                   onValueChange={(value) => setTaskType(String(value))}
@@ -862,7 +868,9 @@ export default function FormTaskEdit() {
               </div>
               {/* RadioGroup Assignment Category */}
               <div className="mt-5 space-y-2">
-                <Label>{t("type-of-task", { defaultValue: "Type Of Task" })}</Label>
+                <Label>
+                  {t("type-of-task", { defaultValue: "Type Of Task" })}
+                </Label>
                 <RadioGroup
                   defaultValue={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
                   onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
@@ -883,7 +891,9 @@ export default function FormTaskEdit() {
                 </RadioGroup>
               </div>
               <div className="mt-5 space-y-2">
-                <Label>{t("output-task", { defaultValue: "Output Task" })}</Label>
+                <Label>
+                  {t("output-task", { defaultValue: "Output Task" })}
+                </Label>
                 <div className="flex flex-wrap gap-4">
                   {Object.keys(taskOutput).map((key) => (
                     <div className="flex items-center gap-2" key={key}>
@@ -905,7 +915,9 @@ export default function FormTaskEdit() {
                 </div>
               </div>
               <div className="mt-5 space-y-2">
-                <Label>{t("description", { defaultValue: "Description" })}</Label>
+                <Label>
+                  {t("description", { defaultValue: "Description" })}
+                </Label>
                 <Controller
                   control={control}
                   name="naration"
@@ -923,10 +935,14 @@ export default function FormTaskEdit() {
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
-                <Label htmlFor="attachments">{t("attachment", { defaultValue: "Attachment" })}</Label>
+                <Label htmlFor="attachments">
+                  {t("attachment", { defaultValue: "Attachment" })}
+                </Label>
                 <div className="space-y-3">
                   <div className="space-y-2">
-                    <Label>{t("audio-visual", { defaultValue: "Audio Visual" })}</Label>
+                    <Label>
+                      {t("audio-visual", { defaultValue: "Audio Visual" })}
+                    </Label>
                     <FileUploader
                       accept={{
                         "mp4/*": [],
@@ -1115,7 +1131,9 @@ export default function FormTaskEdit() {
                   {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
                   {/* Display remaining time */}
                   <div className="mt-4 space-y-2">
-                    <h2 className="text-lg font-bold">{t("news-links", { defaultValue: "News Links" })}</h2>
+                    <h2 className="text-lg font-bold">
+                      {t("news-links", { defaultValue: "News Links" })}
+                    </h2>
                     {urlInputs.map((url: any, index: any) => (
                       <div
                         key={url.id}

components/form/task/task-form.tsx

@@ -41,6 +41,7 @@ import { getCsrfToken } from "@/service/auth";
 import { loading } from "@/lib/swal";
 import { useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
+import UpdateSection from "@/app/[locale]/(public)/inbox/update/page";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -54,6 +55,17 @@ interface FileWithPreview extends File {
   preview: string;
 }
 
+interface Destination {
+  id: string;
+  name: string;
+  subDestination?: SubDestination[];
+}
+
+interface SubDestination {
+  id: string;
+  name: string;
+}
+
 export type taskDetail = {
   id: number;
   title: string;
@@ -86,9 +98,11 @@ export default function FormTask() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
   const editor = useRef(null);
+
   type TaskSchema = z.infer<typeof taskSchema>;
   const { id } = useParams() as { id: string };
   console.log(id);
+  const [listDest, setListDest] = useState<Destination[]>([]);
 
   // State for various form fields
   const [taskOutput, setTaskOutput] = useState({
@@ -98,7 +112,6 @@ export default function FormTask() {
     image: false,
     text: false,
   });
-
   // const [assignmentType, setAssignmentType] = useState("mediahub");
   // const [assignmentCategory, setAssignmentCategory] = useState("publication");
   const [mainType, setMainType] = useState<string>("1");
@@ -108,14 +121,13 @@ export default function FormTask() {
   const [selectedTarget, setSelectedTarget] = useState("3,4");
   const [detail, setDetail] = useState<taskDetail>();
   const [refresh] = useState(false);
-  const [listDest, setListDest] = useState([]);
+  // const [listDest, setListDest] = useState([]);
   const [checkedLevels, setCheckedLevels] = useState(new Set());
   const [expandedPolda, setExpandedPolda] = useState([{}]);
   const [isLoading, setIsLoading] = useState(false);
   const [audioFile, setAudioFile] = useState<File | null>(null);
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
-
   const t = useTranslations("Form");
   const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
   const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
@@ -126,7 +138,6 @@ export default function FormTask() {
   const [isTextUploadFinish, setIsTextUploadFinish] = useState(false);
   const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
   const [voiceNoteLink, setVoiceNoteLink] = useState("");
-
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
@@ -136,7 +147,6 @@ export default function FormTask() {
     satker: false,
   });
   const [links, setLinks] = useState<string[]>([""]);
-
   const {
     register,
     control,
@@ -180,6 +190,7 @@ export default function FormTask() {
   }, []);
 
   // };
+
   const handleCheckboxChange = (levelId: number) => {
     setCheckedLevels((prev) => {
       const updatedLevels = new Set(prev);
@@ -193,7 +204,7 @@ export default function FormTask() {
   };
 
   const handlePoldaPolresChange = () => {
-    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+    return Array.from(checkedLevels).join(",");
   };
 
   const handleUnitChange = (
@@ -209,6 +220,7 @@ export default function FormTask() {
         satker: value,
       };
       setUnitSelection(newState);
+      console.log("QQQ", newState);
     } else {
       const updatedSelection = {
         ...unitSelection,
@@ -222,6 +234,7 @@ export default function FormTask() {
       updatedSelection.allUnit = allChecked;
 
       setUnitSelection(updatedSelection);
+      console.log("AAA", updatedSelection);
     }
   };
 
@@ -275,6 +288,7 @@ export default function FormTask() {
         .filter((key) => unitSelection[key as keyof typeof unitSelection])
         .map((key) => unitMapping[key as keyof typeof unitMapping])
         .join(",");
+
       const selectedOutputs = Object.keys(taskOutput)
         .filter((key) => taskOutput[key as keyof typeof taskOutput])
         .map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
@@ -326,14 +340,34 @@ export default function FormTask() {
           async (item, idx) =>
             await uploadResumableFile(idx, String(id), item, "4", "0")
         );
-
+      console.log("PPPPP", requestData);
     } catch (err) {
       console.error("Error saat kirim data:", err);
-      close(); 
+      close();
       error("Terjadi kesalahan saat mengirim data.");
     }
   };
 
+  useEffect(() => {
+    const updated = new Set(checkedLevels);
+
+    if (unitSelection.polda) {
+      listDest.forEach((polda) => {
+        updated.add(polda.id); // hanya id polda
+      });
+    }
+
+    if (unitSelection.polres) {
+      listDest.forEach((polda) => {
+        polda?.subDestination?.forEach((polres: any) => {
+          updated.add(polres.id); // hanya id polres
+        });
+      });
+    }
+
+    setCheckedLevels(updated);
+  }, [unitSelection.polda, unitSelection.polres, listDest]);
+
   const onSubmit = (data: TaskSchema) => {
     MySwal.fire({
       title: "Simpan Data",
@@ -379,7 +413,7 @@ export default function FormTask() {
 
   const handleStopRecording = () => {
     setIsRecording(false);
-    setTimer(120); 
+    setTimer(120);
   };
 
   const addAudioElement = (blob: Blob) => {
@@ -569,23 +603,29 @@ export default function FormTask() {
                 </Select>
               </div>
               <div className="flex flex-wrap gap-3 mt-5 lg:pt-7 lg:ml-3 ">
-                {Object.keys(unitSelection).map((key) => (
+                {Object.keys(unitSelection).map((key) => {
-                  <div className="flex items-center gap-2" key={key}>
+                  const isDisabled = key === "polres" && !unitSelection.polda;
-                    <Checkbox
+                  return (
-                      id={key}
+                    <div className="flex items-center gap-2" key={key}>
-                      checked={unitSelection[key as keyof typeof unitSelection]}
+                      <Checkbox
-                      onCheckedChange={(value) =>
+                        id={key}
-                        handleUnitChange(
+                        checked={
-                          key as keyof typeof unitSelection,
+                          unitSelection[key as keyof typeof unitSelection]
-                          value as boolean
+                        }
-                        )
+                        disabled={isDisabled}
-                      }
+                        onCheckedChange={(value) =>
-                    />
+                          handleUnitChange(
-                    <Label htmlFor={key}>
+                            key as keyof typeof unitSelection,
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
+                            value as boolean
-                    </Label>
+                          )
-                  </div>
+                        }
-                ))}
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  );
+                })}
               </div>
               <div className="mt-6 lg:pt-6 lg:pl-3">
                 <Dialog>
@@ -599,71 +639,64 @@ export default function FormTask() {
                       <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                     </DialogHeader>
                     <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
-                      {listDest.map((polda: any) => (
+                      {listDest.map((polda: any) => {
-                        <div key={polda.id} className="border p-2">
+                        const poldaChecked = unitSelection.polda; // kontrol polda luar
-                          <Label className="flex items-center">
+                        const polresChecked = unitSelection.polres; // kontrol polres luar
-                            <Checkbox
+
-                              checked={checkedLevels.has(polda.id)}
+                        const isPoldaDisabled = poldaChecked; // lock checkbox polda dialog jika polda luar dicentang
-                              onCheckedChange={() =>
+                        const isPolresDisabled = polresChecked; // lock checkbox polres dialog jika polres luar dicentang
-                                handleCheckboxChange(polda.id)
+
-                              }
+                        return (
-                              className="mr-3"
+                          <div key={polda.id} className="border p-2">
-                            />
+                            <Label className="flex items-center">
-                            {polda.name}
+                              <Checkbox
-                            <button
+                                checked={
-                              onClick={() => toggleExpand(polda.id)}
+                                  poldaChecked || checkedLevels.has(polda.id)
-                              className="ml-2 focus:outline-none"
+                                }
-                            >
+                                disabled={isPoldaDisabled}
-                              {expandedPolda[polda.id] ? (
+                                onCheckedChange={() => {
-                                <ChevronUp size={16} />
+                                  if (isPoldaDisabled) return;
-                              ) : (
+                                  handleCheckboxChange(polda.id);
-                                <ChevronDown size={16} />
+                                }}
-                              )}
+                                className="mr-3"
-                            </button>
+                              />
-                          </Label>
+                              {polda.name}
-                          {expandedPolda[polda.id] && (
+                              <button
-                            <div className="ml-6 mt-2">
+                                onClick={() => toggleExpand(polda.id)}
-                              <Label className="block">
+                                className="ml-2 focus:outline-none"
-                                <Checkbox
+                              >
-                                  checked={polda?.subDestination?.every(
+                                {expandedPolda[polda.id] ? (
-                                    (polres: any) =>
+                                  <ChevronUp size={16} />
-                                      checkedLevels.has(polres.id)
+                                ) : (
-                                  )}
+                                  <ChevronDown size={16} />
-                                  onCheckedChange={(isChecked) => {
+                                )}
-                                    const updatedLevels = new Set(
+                              </button>
-                                      checkedLevels
+                            </Label>
-                                    );
+
-                                    polda?.subDestination?.forEach(
+                            {expandedPolda[polda.id] && (
-                                      (polres: any) => {
+                              <div className="ml-6 mt-2">
-                                        if (isChecked) {
+                                {polda?.subDestination?.map((polres: any) => (
-                                          updatedLevels.add(polres.id);
+                                  <Label key={polres.id} className="block mt-1">
-                                        } else {
+                                    <Checkbox
-                                          updatedLevels.delete(polres.id);
+                                      checked={
-                                        }
+                                        polresChecked ||
+                                        checkedLevels.has(polres.id)
                                       }
-                                    );
+                                      disabled={isPolresDisabled}
-                                    setCheckedLevels(updatedLevels);
+                                      onCheckedChange={() => {
-                                  }}
+                                        if (isPolresDisabled) return;
-                                  className="mr-2"
+                                        handleCheckboxChange(polres.id);
-                                />
+                                      }}
-                                Pilih Semua Polres
+                                      className="mr-2"
-                              </Label>
+                                    />
-                              {polda?.subDestination?.map((polres: any) => (
+                                    {polres.name}
-                                <Label key={polres.id} className="block mt-1">
+                                  </Label>
-                                  <Checkbox
+                                ))}
-                                    checked={checkedLevels.has(polres.id)}
+                              </div>
-                                    onCheckedChange={() =>
+                            )}
-                                      handleCheckboxChange(polres.id)
+                          </div>
-                                    }
+                        );
-                                    className="mr-2"
+                      })}
-                                  />
-                                  {polres.name}
-                                </Label>
-                              ))}
-                            </div>
-                          )}
-                        </div>
-                      ))}
                     </div>
                   </DialogContent>
                 </Dialog>