diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx index d7fd5b5b..1c621ca3 100644 --- a/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx @@ -60,11 +60,21 @@ const columns: ColumnDef[] = [ Detail + + + Edit + + + + Delete + ); diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx new file mode 100644 index 00000000..b8fbf39a --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx @@ -0,0 +1,775 @@ +"use client"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { Input } from "@/components/ui/input"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { Link, useRouter } from "@/i18n/routing"; +import { CalendarIcon } from "lucide-react"; +import React, { useEffect, useRef, useState } from "react"; +import { cn } from "@/lib/utils"; +import { format } from "date-fns"; +import JoditEditor from "jodit-react"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { z } from "zod"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserLevelForAssignments } from "@/service/task"; +import { list } from "postcss"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { close, error, loading } from "@/config/swal"; +import { id } from "date-fns/locale"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { getOnlyDate } from "@/utils/globals"; +import { useParams } from "next/navigation"; +import { getPlanningById } from "@/service/planning/planning"; + +const FormSchema = z.object({ + date: z.date({ + required_error: "Required", + }), + title: z.string({ + required_error: "Required", + }), + detail: z.string({ + required_error: "Required", + }), + output: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + unit: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ + required_error: "Required", + }), +}); + +const items = [ + { + id: "2", + label: "Audio Visual", + }, + { + id: "1", + label: "Foto", + }, + { + id: "4", + label: "Audio", + }, + { + id: "3", + label: "Text", + }, +]; + +const units = [ + { + id: "1", + label: "Mabes Polri", + }, + { + id: "2", + label: "Polda", + }, + { + id: "3", + label: "Polres", + }, +]; +export default function DetailDaily() { + const id = useParams()?.id; + const MySwal = withReactContent(Swal); + const [listDest, setListDest] = useState([]); + const router = useRouter(); + const [weeklyList, setWeeklyList] = useState(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + + useEffect(() => { + initFetch(); + }, [id]); + + async function initFetch() { + if (id != undefined) { + loading(); + const res = await getPlanningById(id); + close(); + + if (res?.data?.data != undefined) { + const data = res?.data?.data; + console.log("data"); + console.log("Data :", data); + form.setValue("title", data.title); + form.setValue("detail", data.description); + form.setValue("date", new Date(data.date)); + form.setValue( + "output", + data.fileTypeOutput.split(",")?.length > 1 + ? data.fileTypeOutput.split(",") + : [data.fileTypeOutput] + ); + form.setValue( + "unit", + data.assignedToLevel.split(",")?.length > 1 + ? data.assignedToLevel.split(",") + : [data.assignedToLevel] + ); + form.setValue("type", String(data?.assignmentTypeId)); + form.setValue("parentId", String(data?.parentId)); + } + } + } + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } + + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + unit: [], + output: [], + detail: "", + }, + }); + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + console.log("data", data); + if (form.getValues("detail") == "") { + form.setError("detail", { + type: "manual", + message: "Required", + }); + } else { + MySwal.fire({ + title: "Simpan Data", + text: "Apakah Anda yakin ingin menyimpan data ini?", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); + } + }; + + const save = async (data: z.infer) => { + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + console.log("data", data, selected); + loading(); + + const reqData = { + planningTypeId: 1, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + // date: + // isPublish || isUpdate + // ? selectedDate?.length > 10 + // ? data.date?.toISOString().slice(0, 10) + // : selectedDate + // : data.date?.toISOString().slice(0, 10), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 1, + }; + + console.log("req =>", reqData); + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/mediahub"); + } + }); + }; + + const output = form.watch("output"); + + const isAllChecked = items.every((item) => output?.includes(item.id)); + + const unit = form.watch("unit"); + + const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); + + const handleAllCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "output", + items.map((item) => item.id) + ); + } else { + form.setValue("output", []); + } + }; + + const handleItemCheckedChange = (id: string, checked: boolean | string) => { + form.setValue( + "output", + checked ? [...output, id] : output.filter((value) => value !== id) + ); + }; + + const handleAllUnitCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "unit", + units.map((item) => item.id) + ); + } else { + form.setValue("unit", []); + } + }; + + const handleUnitCheckedChange = (id: string, checked: boolean | string) => { + if (checked) { + form.setValue("unit", [...unit, id]); + } else { + if (id == "2") { + const temp = []; + for (const element of unit) { + if (element == "1") { + temp.push("1"); + } + } + form.setValue("unit", temp); + } else { + form.setValue( + "unit", + unit.filter((value) => value !== id) + ); + } + } + }; + + useEffect(() => { + async function initState() { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + } + + initState(); + }, []); + + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; + + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); + + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; + + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); + }; + + return ( +
+ +
+
+ + Bulanan + + + Mingguan + + +
+ Harian +
+
+
+

Perencanaan MediaHub

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + +
+ Output Tugas +
+
+
+ + handleAllCheckedChange(checked) + } + disabled + /> + +
+ + {items.map((item) => ( + { + return ( + + + + handleItemCheckedChange(item.id, checked) + } + disabled + /> + + + {item.label} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + +
+ Pelaksana Tugas +
+
+
+ + handleAllUnitCheckedChange(checked) + } + disabled + /> + +
+ + {units.map((item) => ( + { + return ( + + + + handleUnitCheckedChange(item.id, checked) + } + disabled + /> + + + {item.label} + + + ); + }} + /> + ))} + + + + {`[Kustom]`} + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest?.map((list: any) => ( +
+ + +
+ + handleParentChange(list.id) + } + disabled={unit.includes("2")} + /> + + +
+ +
+
+ + handleSelectAllPolres( + list.id, + Boolean(e) + ) + } + disabled={unit.includes("3")} + /> + +
+ {list.subDestination.map( + (subDes: any) => ( +
+ + handleChildChange( + `${list.id}${subDes.id}` + ) + } + disabled={unit.includes("3")} + /> + +
+ ) + )} +
+ + + +
+ ))} +
+ + +
+ + + )} + /> + ( + + Jenis Penugasan + + + + + + + + Publikasi + + + + + + + + Amplifikasi + + + + + + + Kontra + + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Perencanaan Mingguan + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx new file mode 100644 index 00000000..1dddd7aa --- /dev/null +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx @@ -0,0 +1,777 @@ +"use client"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { Input } from "@/components/ui/input"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { Link, useRouter } from "@/i18n/routing"; +import { CalendarIcon } from "lucide-react"; +import React, { useEffect, useRef, useState } from "react"; +import { cn } from "@/lib/utils"; +import { format } from "date-fns"; +import JoditEditor from "jodit-react"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { z } from "zod"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { getUserLevelForAssignments } from "@/service/task"; +import { list } from "postcss"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { close, error, loading } from "@/config/swal"; +import { id, te } from "date-fns/locale"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { getOnlyDate } from "@/utils/globals"; +import { useParams } from "next/navigation"; +import { getPlanningById } from "@/service/planning/planning"; + +const FormSchema = z.object({ + date: z.date({ + required_error: "Required", + }), + title: z.string({ + required_error: "Required", + }), + detail: z.string({ + required_error: "Required", + }), + output: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + unit: z.array(z.string()).refine((value) => value.some((item) => item), { + message: "Required", + }), + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ + required_error: "Required", + }), +}); + +const items = [ + { + id: "2", + label: "Audio Visual", + }, + { + id: "1", + label: "Foto", + }, + { + id: "4", + label: "Audio", + }, + { + id: "3", + label: "Text", + }, +]; + +const units = [ + { + id: "1", + label: "Mabes Polri", + }, + { + id: "2", + label: "Polda", + }, + { + id: "3", + label: "Polres", + }, +]; +export default function EditDaily() { + const id = useParams()?.id; + const MySwal = withReactContent(Swal); + const [listDest, setListDest] = useState([]); + const router = useRouter(); + const [weeklyList, setWeeklyList] = useState(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + + useEffect(() => { + initFetch(); + }, [id]); + + async function initFetch() { + if (id != undefined) { + loading(); + const res = await getPlanningById(id); + close(); + + if (res?.data?.data != undefined) { + const data = res?.data?.data; + console.log("data"); + console.log("Data :", data); + form.setValue("title", data.title); + form.setValue("detail", data.description); + form.setValue("date", new Date(data.date)); + form.setValue( + "output", + data.fileTypeOutput.split(",")?.length > 1 + ? data.fileTypeOutput.split(",") + : [data.fileTypeOutput] + ); + form.setValue("type", String(data?.assignmentTypeId)); + form.setValue("parentId", String(data?.parentId)); + mapTopDestination(data?.assignedToLevel); + mapDestination(data?.assignedToTopLevel); + } + } + } + + const mapTopDestination = (data: string) => { + const temp: string[] = []; + data.split(",").map((list) => { + if (list.length < 2) { + temp.push(list); + } + }); + form.setValue("unit", temp); + }; + + const mapDestination = (data: string) => { + const temp: { [key: number]: boolean } = {}; + data.split(",").forEach((list) => { + temp[Number(list)] = true; + }); + setSelected(temp); + }; + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } + + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + unit: [], + output: [], + detail: "", + }, + }); + const editor = useRef(null); + + const onSubmit = async (data: z.infer) => { + console.log("data", data); + if (form.getValues("detail") == "") { + form.setError("detail", { + type: "manual", + message: "Required", + }); + } else { + MySwal.fire({ + title: "Simpan Data", + text: "Apakah Anda yakin ingin menyimpan data ini?", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); + } + }; + + const save = async (data: z.infer) => { + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + console.log("data", data, selected); + loading(); + + const reqData = { + id: id, + planningTypeId: 1, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + // date: + // isPublish || isUpdate + // ? selectedDate?.length > 10 + // ? data.date?.toISOString().slice(0, 10) + // : selectedDate + // : data.date?.toISOString().slice(0, 10), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 1, + }; + + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/mediahub"); + } + }); + }; + + const output = form.watch("output"); + + const isAllChecked = items.every((item) => output?.includes(item.id)); + + const unit = form.watch("unit"); + + const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); + + const handleAllCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "output", + items.map((item) => item.id) + ); + } else { + form.setValue("output", []); + } + }; + + const handleItemCheckedChange = (id: string, checked: boolean | string) => { + form.setValue( + "output", + checked ? [...output, id] : output.filter((value) => value !== id) + ); + }; + + const handleAllUnitCheckedChange = (checked: boolean | string) => { + if (checked) { + form.setValue( + "unit", + units.map((item) => item.id) + ); + } else { + form.setValue("unit", []); + } + }; + + const handleUnitCheckedChange = (id: string, checked: boolean | string) => { + if (checked) { + form.setValue("unit", [...unit, id]); + } else { + if (id == "2") { + const temp = []; + for (const element of unit) { + if (element == "1") { + temp.push("1"); + } + } + form.setValue("unit", temp); + } else { + form.setValue( + "unit", + unit.filter((value) => value !== id) + ); + } + } + }; + + useEffect(() => { + async function initState() { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + } + + initState(); + }, []); + + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; + + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); + + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; + + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); + }; + + return ( +
+ +
+
+ + Bulanan + + + Mingguan + + +
+ Harian +
+
+
+

Perencanaan MediaHub

+ +
+ + ( + + Judul Perencanaan + + + + + )} + /> + ( + +
+ Output Tugas +
+
+
+ + handleAllCheckedChange(checked) + } + /> + +
+ + {items.map((item) => ( + { + return ( + + + + handleItemCheckedChange(item.id, checked) + } + /> + + + {item.label} + + + ); + }} + /> + ))} +
+ + + )} + /> + ( + +
+ Pelaksana Tugas +
+
+
+ + handleAllUnitCheckedChange(checked) + } + /> + +
+ + {units.map((item) => ( + { + return ( + + + + handleUnitCheckedChange(item.id, checked) + } + /> + + + {item.label} + + + ); + }} + /> + ))} + + + + {`[Kustom]`} + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest?.map((list: any) => ( +
+ + +
+ + handleParentChange(list.id) + } + disabled={unit.includes("2")} + /> + + +
+ +
+
+ + handleSelectAllPolres( + list.id, + Boolean(e) + ) + } + disabled={unit.includes("3")} + /> + +
+ {list.subDestination.map( + (subDes: any) => ( +
+ + handleChildChange( + `${list.id}${subDes.id}` + ) + } + disabled={unit.includes("3")} + /> + +
+ ) + )} +
+ + + +
+ ))} +
+ + +
+ + + )} + /> + ( + + Jenis Penugasan + + + + + + + + Publikasi + + + + + + + + Amplifikasi + + + + + + + Kontra + + + + + + )} + /> + ( + + Pilih Tanggal + + + + + + + + + + + )} + /> + ( + + Perencanaan Mingguan + + + + + )} + /> + ( + + Detail Perencanaan + + + + + )} + /> +
+ + +
+ + +
+
+
+ ); +} diff --git a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx index a14dcb8f..beb07552 100644 --- a/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx +++ b/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx @@ -8,7 +8,7 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { Link } from "@/i18n/routing"; +import { Link, useRouter } from "@/i18n/routing"; import { CalendarIcon } from "lucide-react"; import React, { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; @@ -45,6 +45,20 @@ import { AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; +import { close, error, loading } from "@/config/swal"; +import { id } from "date-fns/locale"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + getWeeklyPlanList, + savePlanning, +} from "@/service/agenda-setting/agenda-setting"; +import { getOnlyDate } from "@/utils/globals"; const FormSchema = z.object({ date: z.date({ @@ -62,26 +76,29 @@ const FormSchema = z.object({ unit: z.array(z.string()).refine((value) => value.some((item) => item), { message: "Required", }), - type: z.enum(["publication", "amplification", "contra"], { + type: z.string({ + required_error: "Required", + }), + parentId: z.string({ required_error: "Required", }), }); const items = [ { - id: "video", + id: "2", label: "Audio Visual", }, { - id: "image", + id: "1", label: "Foto", }, { - id: "audio", + id: "4", label: "Audio", }, { - id: "text", + id: "3", label: "Text", }, ]; @@ -103,7 +120,28 @@ const units = [ export default function CreateDaily() { const MySwal = withReactContent(Swal); const [listDest, setListDest] = useState([]); - const [destination, setDestination] = useState([]); + const router = useRouter(); + const [weeklyList, setWeeklyList] = useState(); + const [selected, setSelected] = useState<{ [key: string]: boolean }>({}); + const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({}); + + useEffect(() => { + getWeeklyPlanning(); + }, []); + + async function getWeeklyPlanning() { + const res = await getWeeklyPlanList(new Date().getDate(), 1); + + if (res.data !== null) { + const rawUser = res.data?.data; + const optionArr = rawUser.map((option: any) => ({ + id: option.id, + label: option.title, + value: String(option.id), + })); + setWeeklyList(optionArr); + } + } const form = useForm>({ resolver: zodResolver(FormSchema), @@ -140,7 +178,54 @@ export default function CreateDaily() { }; const save = async (data: z.infer) => { - console.log("data", data); + const getSelectedString = () => { + return Object.keys(selected) + .filter((key) => selected[key]) + .join(", "); + }; + console.log("data", data, selected); + loading(); + + const reqData = { + planningTypeId: 1, + time: "1", + title: data.title, + assignmentTypeId: data.type, //string + description: data.detail, + assignedToLevel: unit?.join(","), //string + assignmentPurpose: getSelectedString(), //string + fileTypeOutput: data.output?.join(","), //string + status: "Open", + date: getOnlyDate(data.date), + // date: + // isPublish || isUpdate + // ? selectedDate?.length > 10 + // ? data.date?.toISOString().slice(0, 10) + // : selectedDate + // : data.date?.toISOString().slice(0, 10), + parentId: Number(data.parentId), //number + assignmentMainTypeId: 1, + }; + + console.log("req =>", reqData); + const response = await savePlanning(reqData); + + if (response.error) { + error(response.message); + return false; + } + + close(); + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + router.push("/curator/task-plan/mediahub"); + } + }); }; const output = form.watch("output"); @@ -204,59 +289,41 @@ export default function CreateDaily() { useEffect(() => { async function initState() { const response = await getUserLevelForAssignments(); - console.log("response", response); setListDest(response.data.data.list); } initState(); }, []); - const handleDestination = (e: any) => { - let arrayDestination = []; + const handleParentChange = (listId: string) => { + setSelected((prev) => ({ + ...prev, + [listId]: !prev[listId], + })); + }; - for (const element of destination) { - arrayDestination.push(element); - } + const handleSelectAllPolres = (listId: string, isChecked: boolean) => { + setSelectAll((prev) => ({ + ...prev, + [listId]: isChecked, + })); - if (e.target.name == "all") { - if (e.target.checked == true) { - const count = document.querySelectorAll(".input-all"); - for (const element of Array.from(count)) { - arrayDestination.push((element as HTMLInputElement).value); - } - } else { - arrayDestination = []; - } - } else if (e.target.name == `subAll${e.target.value}`) { - if (e.target.checked == true) { - const count = document.getElementsByClassName( - `input-suball-${e.target.value}` - ); - arrayDestination.push(e.target.value); - for (const element of Array.from(count)) { - arrayDestination.push((element as HTMLInputElement).value); - } - } else { - const count = document.getElementsByClassName( - `input-suball-${e.target.value}` - ); + setSelected((prev) => { + const updatedState = { ...prev }; + listDest + .find((list: any) => list.id === listId) + ?.subDestination.forEach((subDes: any) => { + updatedState[`${listId}${subDes.id}`] = isChecked; + }); + return updatedState; + }); + }; - arrayDestination.splice(destination.indexOf(e.target.value), 1); - for (const element of Array.from(count)) { - const index = arrayDestination.indexOf( - (element as HTMLInputElement).value - ); - if (index > -1) { - arrayDestination.splice(index, 1); - } - } - } - } else if (e.target.checked == true) { - arrayDestination.push(e.target.value); - } else { - arrayDestination.splice(destination.indexOf(e.target.value), 1); - } - setDestination(arrayDestination); + const handleChildChange = (childId: string) => { + setSelected((prev) => ({ + ...prev, + [childId]: !prev[childId], + })); }; return ( @@ -414,13 +481,13 @@ export default function CreateDaily() { {`[Kustom]`} - + Daftar Wilayah Polda dan Polres -
+
{listDest?.map((list: any) => (
+ handleParentChange(list.id) } - onChange={handleDestination} disabled={unit.includes("2")} - className="input-all input-polda" />