mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: edit checkbox in create task

This commit is contained in:
Sabda Yagra 2025-07-21 10:43:40 +07:00
parent fd021426d1
commit 6c5bb50661
2 changed files with 152 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/form/task/task-edit-form.tsx
View File

@ -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 [broadcastType, setBroadcastType] = useState<string>(""); // untuk Tipe Penugasan
const [taskType, setTaskType] = useState<string>("");
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}

213
components/form/task/task-form.tsx
View File

@ -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) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
id={key}
checked={unitSelection[key as keyof typeof unitSelection]}
onCheckedChange={(value) =>
handleUnitChange(
key as keyof typeof unitSelection,
value as boolean
)
}
/>
<Label htmlFor={key}>
{key.charAt(0).toUpperCase() + key.slice(1)}
</Label>
</div>
))}
{Object.keys(unitSelection).map((key) => {
const isDisabled = key === "polres" && !unitSelection.polda;
return (
<div className="flex items-center gap-2" key={key}>
<Checkbox
id={key}
checked={
unitSelection[key as keyof typeof unitSelection]
}
disabled={isDisabled}
onCheckedChange={(value) =>
handleUnitChange(
key as keyof typeof unitSelection,
value as boolean
)
}
/>
<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) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
{listDest.map((polda: any) => {
const poldaChecked = unitSelection.polda; // kontrol polda luar
const polresChecked = unitSelection.polres; // kontrol polres luar
const isPoldaDisabled = poldaChecked; // lock checkbox polda dialog jika polda luar dicentang
const isPolresDisabled = polresChecked; // lock checkbox polres dialog jika polres luar dicentang
return (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={
poldaChecked || checkedLevels.has(polda.id)
}
disabled={isPoldaDisabled}
onCheckedChange={() => {
if (isPoldaDisabled) return;
handleCheckboxChange(polda.id);
}}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={
polresChecked ||
checkedLevels.has(polres.id)
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(polres.id)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
))}
disabled={isPolresDisabled}
onCheckedChange={() => {
if (isPolresDisabled) return;
handleCheckboxChange(polres.id);
}}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
);
})}
</div>
</DialogContent>
</Dialog>