From b03da630ba2810e64cf84c3f8dd012e2ce324e16 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Mon, 21 Jul 2025 13:55:24 +0700 Subject: [PATCH] fix: fixing point 1 -4 --- .../task/components/task-table.tsx | 6 +- components/form/content/image-update-form.tsx | 168 ++++++++------ components/form/task/task-edit-form.tsx | 218 ++++++++++-------- 3 files changed, 227 insertions(+), 165 deletions(-) diff --git a/app/[locale]/(protected)/contributor/task/components/task-table.tsx b/app/[locale]/(protected)/contributor/task/components/task-table.tsx index 9c49eb99..4a658623 100644 --- a/app/[locale]/(protected)/contributor/task/components/task-table.tsx +++ b/app/[locale]/(protected)/contributor/task/components/task-table.tsx @@ -74,7 +74,7 @@ const TaskTable = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); - const [showData, setShowData] = React.useState("50"); + const [showData, setShowData] = React.useState("10"); const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: Number(showData), @@ -206,7 +206,7 @@ const TaskTable = () => { { className={` ${ !isSpecificAttention - ? "bg-default-900 text-white" + ? "bg-default-900 text-white dark:text-black" : " dark:text-default-700 border-2" } px-[18px] py-1 transition duration-100 rounded diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx index 4f6f0f1a..40e378ac 100644 --- a/components/form/content/image-update-form.tsx +++ b/components/form/content/image-update-form.tsx @@ -105,12 +105,10 @@ interface FileWithPreview extends File { export default function FormImageUpdate() { const MySwal = withReactContent(Swal); const router = useRouter(); - const { id } = useParams() as { id: string }; console.log(id); const editor = useRef(null); type ImageSchema = z.infer; - let progressInfo: any = []; let counterUpdateProgress = 0; const [progressList, setProgressList] = useState([]); @@ -122,7 +120,6 @@ export default function FormImageUpdate() { const taskId = Cookies.get("taskId"); const scheduleId = Cookies.get("scheduleId"); const scheduleType = Cookies.get("scheduleType"); - const [categories, setCategories] = useState([]); const [selectedCategory, setSelectedCategory] = useState(); const [tags, setTags] = useState([]); @@ -133,11 +130,19 @@ export default function FormImageUpdate() { const [files, setFiles] = useState([]); const [filesTemp, setFilesTemp] = useState([]); const [publishedFor, setPublishedFor] = useState([]); + const [thumbnailFile, setThumbnailFile] = useState(null); const inputRef = useRef(null); const [selectedOptions, setSelectedOptions] = useState<{ [fileId: number]: string[]; }>({}); + const handleThumbnailChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + setThumbnailFile(file); + } + }; + const options: Option[] = [ { id: "all", name: "SEMUA" }, { id: "5", name: "UMUM" }, @@ -176,35 +181,6 @@ export default function FormImageUpdate() { resolver: zodResolver(imageSchema), }); - // const handleKeyDown = (e: any) => { - // const newTag = e.target.value.trim(); // Ambil nilai input - // if (e.key === "Enter" && newTag) { - // e.preventDefault(); // Hentikan submit form - // if (!tags.includes(newTag)) { - // setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru - // setValue("tags", ""); // Kosongkan input - // } - // } - // }; - - const handleImageChange = (event: ChangeEvent) => { - if (event.target.files) { - const files = Array.from(event.target.files); - setSelectedFiles((prevImages: any) => [...prevImages, ...files]); - console.log("DATAFILE::", selectedFiles); - } - }; - - const handleRemoveImage = (index: number) => { - setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index)); - }; - - // const handleCheckboxChange = (id: number) => { - // setSelectedPublishers((prev) => - // prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id] - // ); - // }; - useEffect(() => { async function initState() { getCategories(); @@ -218,9 +194,9 @@ export default function FormImageUpdate() { e.preventDefault(); const newTag = e.currentTarget.value.trim(); if (!tags.includes(newTag)) { - setTags((prevTags) => [...prevTags, newTag]); // Tambahkan tag baru + setTags((prevTags) => [...prevTags, newTag]); if (inputRef.current) { - inputRef.current.value = ""; // Kosongkan input + inputRef.current.value = ""; } } } @@ -251,7 +227,7 @@ export default function FormImageUpdate() { if (findCategory) { // setValue("categoryId", findCategory.id); - setSelectedCategory(findCategory.id); // Set the selected category + setSelectedCategory(findCategory.id); const response = await getTagsBySubCategoryId(findCategory.id); setTags(response?.data?.data); } @@ -268,16 +244,13 @@ export default function FormImageUpdate() { const details = response?.data?.data; setDetail(details); - - // Set the selected target to the category ID from details + setSelectedTarget(String(details.category.id)); - // Set form values immediately and then again after a delay to ensure editor is ready setValue("title", details.title); setValue("description", details.htmlDescription); setValue("creatorName", details.creatorName); - // Set again after delay to ensure editor has loaded setTimeout(() => { setValue("title", details.title); setValue("description", details.htmlDescription); @@ -307,7 +280,7 @@ export default function FormImageUpdate() { } } initState(); - }, [id, setValue]); // Remove refresh dependency and add id + }, [id, setValue]); const mapPlacementsToOptions = (placements: string): string[] => { const mapping: Record = { @@ -317,7 +290,6 @@ export default function FormImageUpdate() { polres: "internasional", }; - // Jika placements hanya "all", langsung aktifkan semua checkbox if (placements.trim() === "all") { return ["all", "nasional", "wilayah", "internasional"]; } @@ -336,7 +308,6 @@ export default function FormImageUpdate() { const handleCheckboxChange = (id: string) => { if (id === "all") { - // Select all options except "all" const allOptions = options .filter((opt) => opt.id !== "all") .map((opt) => opt.id); @@ -344,7 +315,6 @@ export default function FormImageUpdate() { publishedFor.length === allOptions.length ? [] : allOptions ); } else { - // Toggle individual option setPublishedFor((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id] ); @@ -380,9 +350,11 @@ export default function FormImageUpdate() { } const formMedia = new FormData(); - const thumbnail = files[0]; + const thumbnail = thumbnailFile || files[0]; formMedia.append("file", thumbnail); + const responseThumbnail = await uploadThumbnail(id, formMedia); + if (responseThumbnail?.error == true) { error(responseThumbnail?.message); return false; @@ -448,7 +420,7 @@ export default function FormImageUpdate() { filename: file.name, filetype: file.type, duration, - isWatermark: "true", // hardcode + isWatermark: "true", }, onBeforeRequest: function (req) { var xhr = req.getUnderlyingObject(); @@ -554,7 +526,7 @@ export default function FormImageUpdate() { const fileList = files.map((file: any) => (
@@ -579,7 +551,7 @@ export default function FormImageUpdate() { color="destructive" variant="outline" className="border-none rounded-full" - onClick={() => handleDeleteFile(file.id)} // Kirim ID spesifik + onClick={() => handleDeleteFile(file.id)} > @@ -590,21 +562,18 @@ export default function FormImageUpdate() { setSelectedOptions((prev: any) => { const currentSelections = prev[fileId] || []; if (value === "all") { - // If "all" is clicked, toggle all options if (currentSelections.includes("all")) { - return { ...prev, [fileId]: [] }; // Deselect all + return { ...prev, [fileId]: [] }; } return { ...prev, [fileId]: ["all", "nasional", "wilayah", "internasional"], - }; // Select all + }; } else { - // If any other checkbox is clicked, toggle that checkbox const updatedSelections = currentSelections.includes(value) ? currentSelections.filter((option: any) => option !== value) : [...currentSelections, value]; - // If all individual options are selected, include "all" automatically const isAllSelected = ["nasional", "wilayah", "internasional"].every( (opt) => updatedSelections.includes(opt) ); @@ -671,7 +640,9 @@ export default function FormImageUpdate() {
-

{t("form-image", { defaultValue: "Form Image" })}

+

+ {t("form-image", { defaultValue: "Form Image" })} +

{/* Input Title */}
@@ -710,14 +681,18 @@ export default function FormImageUpdate() { {/* Show the category from details if it doesn't exist in categories list */} - {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && ( - - {detail.category.name} - - )} + {detail && + !categories.find( + (cat) => + String(cat.id) === String(detail.category.id) + ) && ( + + {detail.category.name} + + )} {categories.map((category) => (
- + ( - + )} /> {errors.description?.message && ( @@ -747,7 +727,9 @@ export default function FormImageUpdate() { )}
- + {/*
- {t("upload-file-max", { defaultValue: "Upload File Max" })} + {t("upload-file-max", { + defaultValue: "Upload File Max", + })}
@@ -772,7 +756,9 @@ export default function FormImageUpdate() {
{fileList}
- +
@@ -812,7 +798,9 @@ export default function FormImageUpdate() { rel="noopener noreferrer" className="text-blue-500 text-sm" > - {t("view-file", { defaultValue: "View File" })} + {t("view-file", { + defaultValue: "View File", + })}
@@ -830,7 +818,9 @@ export default function FormImageUpdate() { } className="form-checkbox" /> - {t("all", { defaultValue: "All" })} + + {t("all", { defaultValue: "All" })} +
@@ -899,7 +889,7 @@ export default function FormImageUpdate() {
- +
@@ -923,7 +913,7 @@ export default function FormImageUpdate() { )}
-
+ {/*
+
*/} +
+ + + { + const file = e.target.files?.[0]; + if (file) { + setThumbnailFile(file); + } + }} + className="dark:border dark:border-gray-500 dark:rounded-lg" + /> + + + Thumbnail Preview +
+
@@ -980,7 +1000,9 @@ export default function FormImageUpdate() {
- + {options.map((option: Option) => (
-

{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)

+

+ {t("suggestion-box", { defaultValue: "Suggestion Box" })} (0) +

{t("information", { defaultValue: "Information" })}:

diff --git a/components/form/task/task-edit-form.tsx b/components/form/task/task-edit-form.tsx index c1792959..d0304471 100644 --- a/components/form/task/task-edit-form.tsx +++ b/components/form/task/task-edit-form.tsx @@ -90,6 +90,17 @@ interface FileUploaded { url: string; } +interface Destination { + id: string; + name: string; + subDestination?: SubDestination[]; +} + +interface SubDestination { + id: string; + name: string; +} + type Url = { id: number; attachmentUrl: string; @@ -137,7 +148,7 @@ export default function FormTaskEdit() { const [detail, setDetail] = useState(); const [urlInputs, setUrlInputs] = useState([]); 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); @@ -177,6 +188,12 @@ export default function FormTaskEdit() { resolver: zodResolver(taskSchema), }); + useEffect(() => { + if (detail?.taskType) { + setTaskType(detail.taskType.toString()); + } + }, [detail]); + // const handleRadioChange = (event: React.ChangeEvent) => { // const selectedValue = Number(event.target.value); // setMainType(selectedValue); @@ -425,7 +442,7 @@ export default function FormTaskEdit() { console.log("Form Data Submitted:", requestData); console.log("response", response); const id = response?.data?.data.id; - loading(); + // loading(); if (imageFiles?.length == 0) { setIsImageUploadFinish(true); } @@ -471,6 +488,26 @@ export default function FormTaskEdit() { // }); }; + 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", @@ -732,25 +769,29 @@ export default function FormTaskEdit() {
- {Object.keys(unitSelection).map((key) => ( -
- - handleUnitChange( - key as keyof typeof unitSelection, - value as boolean - ) - } - /> - -
- ))} + {Object.keys(unitSelection).map((key) => { + const isDisabled = key === "polres" && !unitSelection.polda; + return ( +
+ + handleUnitChange( + key as keyof typeof unitSelection, + value as boolean + ) + } + /> + +
+ ); + })}
@@ -766,71 +807,67 @@ export default function FormTaskEdit() {
- {listDest.map((polda: any) => ( -
- - {expandedPolda[polda.id] && ( -
- - {polda?.subDestination?.map((polres: any) => ( - - ))} -
- )} -
- ))} + {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 ( +
+ + + {expandedPolda[polda.id] && ( +
+ {polda?.subDestination?.map((polres: any) => ( + + ))} +
+ )} +
+ ); + })}
@@ -856,14 +893,15 @@ export default function FormTaskEdit() { {t("assigment-type", { defaultValue: "Assigment Type" })}{" "} setTaskType(String(value))} + value={taskType} // ✅ controlled + onValueChange={(value) => setTaskType(value)} className="flex flex-wrap gap-3" > - + + - +
{/* RadioGroup Assignment Category */}