feat: update edit media
This commit is contained in:
parent
bffe869f32
commit
82e8dfafc9
File diff suppressed because it is too large
Load Diff
|
|
@ -35,6 +35,7 @@ import {
|
|||
deleteMedia,
|
||||
getTagsBySubCategoryId,
|
||||
listEnableCategory,
|
||||
updateFilePlacements,
|
||||
uploadThumbnail,
|
||||
} from "@/service/content/content";
|
||||
import { detailMedia } from "@/service/curated-content/curated-content";
|
||||
|
|
@ -147,6 +148,9 @@ export default function FormImageUpdate() {
|
|||
let counterUpdateProgress = 0;
|
||||
const [progressList, setProgressList] = useState<any>([]);
|
||||
let uploadPersen = 0;
|
||||
|
||||
const isDetailOfRegionShowed = false;
|
||||
|
||||
const [isStartUpload, setIsStartUpload] = useState(false);
|
||||
const [counterProgress, setCounterProgress] = useState(0);
|
||||
const t = useTranslations("Form");
|
||||
|
|
@ -166,9 +170,6 @@ export default function FormImageUpdate() {
|
|||
const [publishedFor, setPublishedFor] = useState<string[]>([]);
|
||||
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [selectedOptions, setSelectedOptions] = useState<{
|
||||
[fileId: number]: string[];
|
||||
}>({});
|
||||
|
||||
const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
|
|
@ -183,7 +184,6 @@ export default function FormImageUpdate() {
|
|||
wilayah: boolean;
|
||||
international: boolean;
|
||||
polda: boolean;
|
||||
polres: boolean;
|
||||
satker: boolean;
|
||||
}>
|
||||
>([]);
|
||||
|
|
@ -194,7 +194,6 @@ export default function FormImageUpdate() {
|
|||
wilayah: false,
|
||||
international: false,
|
||||
polda: false,
|
||||
polres: false,
|
||||
satker: false,
|
||||
});
|
||||
const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
|
||||
|
|
@ -264,18 +263,6 @@ export default function FormImageUpdate() {
|
|||
checkedLevels.has(Number(item.id))
|
||||
).length;
|
||||
|
||||
const checkedPolresCount = listDest.reduce((total: number, item: any) => {
|
||||
if (item.subDestination && item.name !== "SATKER POLRI") {
|
||||
// Hanya hitung sub-item dari POLDA (bukan dari SATKER POLRI)
|
||||
return (
|
||||
total +
|
||||
item.subDestination.filter((sub: any) =>
|
||||
checkedLevels.has(Number(sub.id))
|
||||
).length
|
||||
);
|
||||
}
|
||||
return total;
|
||||
}, 0);
|
||||
|
||||
const satkerItem: any = listDest.find(
|
||||
(item: any) => item.name === "SATKER POLRI"
|
||||
|
|
@ -289,7 +276,6 @@ export default function FormImageUpdate() {
|
|||
|
||||
// Checkbox aktif jika ADA item yang dipilih dalam kategori tersebut
|
||||
const hasSelectedPolda = checkedPoldaCount > 0;
|
||||
const hasSelectedPolres = checkedPolresCount > 0;
|
||||
const hasSelectedSatker = checkedSatkerCount > 0;
|
||||
|
||||
// Update unitSelection berdasarkan yang dipilih di modal
|
||||
|
|
@ -298,7 +284,6 @@ export default function FormImageUpdate() {
|
|||
|
||||
// Update individual checkboxes
|
||||
newState.polda = hasSelectedPolda;
|
||||
newState.polres = hasSelectedPolres;
|
||||
newState.satker = hasSelectedSatker;
|
||||
|
||||
// Update checkbox "semua" berdasarkan semua checkbox yang aktif
|
||||
|
|
@ -307,7 +292,6 @@ export default function FormImageUpdate() {
|
|||
newState.wilayah &&
|
||||
newState.international &&
|
||||
hasSelectedPolda &&
|
||||
hasSelectedPolres &&
|
||||
hasSelectedSatker;
|
||||
|
||||
return newState;
|
||||
|
|
@ -328,28 +312,6 @@ export default function FormImageUpdate() {
|
|||
newCheckedLevels.add(Number(item.id));
|
||||
}
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "polres_checked") {
|
||||
// Checklist semua polres, tapi hanya yang poldanya sudah di-checklist
|
||||
// Jangan checklist sub-item SATKER POLRI
|
||||
listDest.forEach((item: any) => {
|
||||
if (
|
||||
item.levelNumber === 2 &&
|
||||
item.name !== "SATKER POLRI" &&
|
||||
newCheckedLevels.has(Number(item.id))
|
||||
) {
|
||||
if (item.subDestination) {
|
||||
item.subDestination.forEach((polres: any) => {
|
||||
newCheckedLevels.add(Number(polres.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Tidak perlu menghapus SATKER ketika POLRES di-checklist
|
||||
// Biarkan keduanya bisa aktif bersamaan
|
||||
// SATKER dan POLRES adalah konsep yang berbeda:
|
||||
// - SATKER: unit-unit seperti ITWASUM, BAINTELKAM, dll.
|
||||
// - POLRES: unit-unit seperti POLRES METRO JAKARTA PUSAT, dll.
|
||||
} else if (mainCheckboxChangeType === "satker_checked") {
|
||||
// Checklist satker
|
||||
const satkerItem: any = listDest.find(
|
||||
|
|
@ -375,27 +337,11 @@ export default function FormImageUpdate() {
|
|||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// Handle unchecklist actions - menghapus item dari modal
|
||||
else if (mainCheckboxChangeType === "polres_unchecked") {
|
||||
// Clear polres dari checkedLevels, tapi jangan hapus sub-item SATKER POLRI
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.subDestination && item.name !== "SATKER POLRI") {
|
||||
item.subDestination.forEach((polres: any) => {
|
||||
newCheckedLevels.delete(Number(polres.id));
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "polda_unchecked") {
|
||||
// Clear polda dan polres dari checkedLevels, tapi jangan hapus SATKER POLRI
|
||||
// Clear polda dari checkedLevels, tapi jangan hapus SATKER POLRI
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
|
||||
newCheckedLevels.delete(Number(item.id));
|
||||
if (item.subDestination) {
|
||||
item.subDestination.forEach((polres: any) => {
|
||||
newCheckedLevels.delete(Number(polres.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "satker_unchecked") {
|
||||
|
|
@ -441,7 +387,6 @@ export default function FormImageUpdate() {
|
|||
currentSelection.wilayah = value;
|
||||
currentSelection.international = value;
|
||||
currentSelection.polda = value;
|
||||
currentSelection.polres = value;
|
||||
currentSelection.satker = value;
|
||||
|
||||
// Update fileCheckedLevels untuk sinkronisasi dengan modal
|
||||
|
|
@ -470,36 +415,90 @@ export default function FormImageUpdate() {
|
|||
return newArray;
|
||||
});
|
||||
} else {
|
||||
// Validasi khusus untuk POLRES - harus ada POLDA yang ter-checklist
|
||||
if (key === "polres" && value) {
|
||||
const currentFileCheckedLevels = fileCheckedLevels[fileIndex];
|
||||
const hasSelectedPolda =
|
||||
currentFileCheckedLevels &&
|
||||
listDest.some(
|
||||
(item: any) =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name !== "SATKER POLRI" &&
|
||||
currentFileCheckedLevels.has(Number(item.id))
|
||||
);
|
||||
// Jika wilayah dicentang, auto centang POLDA, SATKER
|
||||
if (key === "wilayah") {
|
||||
currentSelection.wilayah = value;
|
||||
|
||||
if (value) {
|
||||
// Ketika wilayah dicentang, auto centang POLDA, SATKER
|
||||
currentSelection.polda = true;
|
||||
currentSelection.satker = true;
|
||||
|
||||
if (!hasSelectedPolda) {
|
||||
alert(
|
||||
"Harap pilih POLDA di Modal terlebih dahulu sebelum mengaktifkan checkbox POLRES."
|
||||
);
|
||||
return prev; // Batalkan perubahan
|
||||
// Update fileCheckedLevels untuk mengisi semua POLDA dan SATKER POLRI ketika wilayah dicentang
|
||||
setFileCheckedLevels((prevLevels) => {
|
||||
const newArray = [...prevLevels];
|
||||
const currentFileLevels = new Set<number>(
|
||||
newArray[fileIndex] || new Set()
|
||||
);
|
||||
|
||||
// Checklist semua POLDA di modal
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
|
||||
currentFileLevels.add(Number(item.id));
|
||||
}
|
||||
});
|
||||
|
||||
// Checklist SATKER POLRI dan semua sub-itemsnya
|
||||
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI");
|
||||
if (satkerItem) {
|
||||
currentFileLevels.add(Number(satkerItem.id));
|
||||
// Checklist semua sub-items di bawah SATKER POLRI
|
||||
if (satkerItem.subDestination) {
|
||||
satkerItem.subDestination.forEach((sub: any) => {
|
||||
currentFileLevels.add(Number(sub.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
newArray[fileIndex] = currentFileLevels;
|
||||
return newArray;
|
||||
});
|
||||
} else {
|
||||
// Ketika wilayah di-uncheck, uncheck POLDA, SATKER dan hapus data POLDA dari fileCheckedLevels
|
||||
currentSelection.polda = false;
|
||||
currentSelection.satker = false;
|
||||
|
||||
// Update fileCheckedLevels untuk menghapus semua POLDA dan SATKER POLRI ketika wilayah di-uncheck
|
||||
setFileCheckedLevels((prevLevels) => {
|
||||
const newArray = [...prevLevels];
|
||||
const currentFileLevels = new Set<number>(
|
||||
newArray[fileIndex] || new Set()
|
||||
);
|
||||
|
||||
// Hapus semua POLDA dari modal
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
|
||||
currentFileLevels.delete(Number(item.id));
|
||||
}
|
||||
});
|
||||
|
||||
// Hapus SATKER POLRI dan semua sub-itemsnya
|
||||
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI");
|
||||
if (satkerItem) {
|
||||
currentFileLevels.delete(Number(satkerItem.id));
|
||||
// Hapus semua sub-items di bawah SATKER POLRI
|
||||
if (satkerItem.subDestination) {
|
||||
satkerItem.subDestination.forEach((sub: any) => {
|
||||
currentFileLevels.delete(Number(sub.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
newArray[fileIndex] = currentFileLevels;
|
||||
return newArray;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Update salah satu saja
|
||||
currentSelection[key] = value;
|
||||
}
|
||||
|
||||
// Update salah satu saja
|
||||
currentSelection[key] = value;
|
||||
|
||||
// Cek apakah semua selain "semua" sudah dicentang
|
||||
const allChecked = [
|
||||
"nasional",
|
||||
"wilayah",
|
||||
"international",
|
||||
"polda",
|
||||
"polres",
|
||||
"satker",
|
||||
].every((k) => currentSelection[k as keyof typeof unitSelection]);
|
||||
|
||||
|
|
@ -595,34 +594,6 @@ export default function FormImageUpdate() {
|
|||
return total;
|
||||
}, 0);
|
||||
|
||||
// Hitung total POLRES yang ada dari POLDA yang ter-checklist
|
||||
const totalPolresFromCheckedPolda = listDest.reduce(
|
||||
(total: number, item: any) => {
|
||||
if (
|
||||
item.subDestination &&
|
||||
item.name !== "SATKER POLRI" &&
|
||||
currentFileLevels.has(Number(item.id))
|
||||
) {
|
||||
return total + item.subDestination.length;
|
||||
}
|
||||
return total;
|
||||
},
|
||||
0
|
||||
);
|
||||
|
||||
// Hitung berapa banyak POLRES yang ter-checklist
|
||||
const checkedPolresCount = listDest.reduce((total: number, item: any) => {
|
||||
if (item.subDestination && item.name !== "SATKER POLRI") {
|
||||
// Hanya hitung sub-item dari POLDA (bukan dari SATKER POLRI)
|
||||
return (
|
||||
total +
|
||||
item.subDestination.filter((sub: any) =>
|
||||
currentFileLevels.has(Number(sub.id))
|
||||
).length
|
||||
);
|
||||
}
|
||||
return total;
|
||||
}, 0);
|
||||
|
||||
// Cek apakah SATKER POLRI ter-checklist
|
||||
const satkerItem = listDest.find(
|
||||
|
|
@ -634,8 +605,6 @@ export default function FormImageUpdate() {
|
|||
// Update checkbox berdasarkan kondisi
|
||||
// POLDA aktif jika ada minimal 1 POLDA ter-checklist
|
||||
currentSelection.polda = checkedPoldaCount > 0;
|
||||
// POLRES aktif jika ada minimal 1 POLRES ter-checklist
|
||||
currentSelection.polres = checkedPolresCount > 0;
|
||||
currentSelection.satker = Boolean(isSatkerChecked);
|
||||
|
||||
// Update checkbox "semua" berdasarkan semua checkbox yang aktif
|
||||
|
|
@ -644,7 +613,6 @@ export default function FormImageUpdate() {
|
|||
currentSelection.wilayah &&
|
||||
currentSelection.international &&
|
||||
currentSelection.polda &&
|
||||
currentSelection.polres &&
|
||||
currentSelection.satker;
|
||||
|
||||
newSelections[fileIndex] = currentSelection;
|
||||
|
|
@ -659,7 +627,7 @@ export default function FormImageUpdate() {
|
|||
}));
|
||||
};
|
||||
|
||||
// Fungsi untuk menangani "Pilih Semua" sub-items di bawah POLDA
|
||||
// Fungsi untuk menangani "Pilih Semua" sub-items di bawah SATKER POLRI
|
||||
const handleSelectAllSubItems = (fileIndex: number, polda: any) => {
|
||||
setFileCheckedLevels((prev) => {
|
||||
const newArray = [...prev];
|
||||
|
|
@ -677,7 +645,7 @@ export default function FormImageUpdate() {
|
|||
});
|
||||
} else {
|
||||
// Jika belum semua ter-checklist, checklist semuanya
|
||||
// Checklist POLDA juga jika belum ter-checklist
|
||||
// Checklist SATKER POLRI juga jika belum ter-checklist
|
||||
if (!currentFileLevels.has(Number(polda.id))) {
|
||||
currentFileLevels.add(Number(polda.id));
|
||||
}
|
||||
|
|
@ -696,6 +664,7 @@ export default function FormImageUpdate() {
|
|||
});
|
||||
};
|
||||
|
||||
|
||||
const options: Option[] = [
|
||||
{ id: "all", name: "SEMUA" },
|
||||
{ id: "5", name: "UMUM" },
|
||||
|
|
@ -836,17 +805,6 @@ export default function FormImageUpdate() {
|
|||
setValue("creatorName", details.creatorName);
|
||||
}, 500);
|
||||
|
||||
if (details?.files) {
|
||||
setFiles(details.files);
|
||||
|
||||
const initialOptions: { [key: number]: string[] } = {};
|
||||
details.files.forEach((file: any) => {
|
||||
if (file.placements) {
|
||||
initialOptions[file.id] = mapPlacementsToOptions(file.placements);
|
||||
}
|
||||
});
|
||||
setSelectedOptions(initialOptions);
|
||||
}
|
||||
|
||||
if (details?.files) {
|
||||
const formattedFiles = details.files.map((file: any) => ({
|
||||
|
|
@ -859,6 +817,87 @@ export default function FormImageUpdate() {
|
|||
}));
|
||||
|
||||
setFiles(formattedFiles);
|
||||
|
||||
// Inisialisasi filePlacements dari detail
|
||||
const initialFilePlacements = details.files.map((file: any) => {
|
||||
if (file.placements) {
|
||||
// Map dari format backend ke format internal
|
||||
const mappedPlacements = file.placements
|
||||
.split(",")
|
||||
.map((p: string) => {
|
||||
const trimmed = p.trim();
|
||||
switch (trimmed) {
|
||||
case "all": return "all";
|
||||
case "mabes": return "nasional";
|
||||
case "polda": return "wilayah";
|
||||
case "satker": return "satker";
|
||||
case "international": return "international";
|
||||
default: return trimmed;
|
||||
}
|
||||
});
|
||||
return mappedPlacements;
|
||||
}
|
||||
return [];
|
||||
});
|
||||
setFilePlacements(initialFilePlacements);
|
||||
|
||||
// Inisialisasi fileCheckedLevels dari detail
|
||||
const initialFileCheckedLevels = details.files.map((file: any) => {
|
||||
if (file.customLocationPlacements) {
|
||||
const levelIds = file.customLocationPlacements
|
||||
.split(",")
|
||||
.map((id: string) => Number(id.trim()))
|
||||
.filter((id: number) => !isNaN(id));
|
||||
return new Set(levelIds);
|
||||
}
|
||||
return new Set<number>();
|
||||
});
|
||||
setFileCheckedLevels(initialFileCheckedLevels);
|
||||
|
||||
// Inisialisasi fileUnitSelections dari detail
|
||||
const initialFileUnitSelections = details.files.map((file: any) => {
|
||||
const selection = {
|
||||
semua: false,
|
||||
nasional: false,
|
||||
wilayah: false,
|
||||
international: false,
|
||||
polda: false,
|
||||
satker: false,
|
||||
};
|
||||
|
||||
if (file.placements) {
|
||||
const placements = file.placements.split(",").map((p: string) => p.trim());
|
||||
|
||||
// Map dari format backend ke checkbox
|
||||
if (placements.includes("all")) {
|
||||
selection.semua = true;
|
||||
selection.nasional = true;
|
||||
selection.wilayah = true;
|
||||
selection.international = true;
|
||||
selection.polda = true;
|
||||
selection.satker = true;
|
||||
} else {
|
||||
if (placements.includes("mabes")) {
|
||||
selection.nasional = true;
|
||||
}
|
||||
if (placements.includes("wilayah")) {
|
||||
selection.wilayah = true;
|
||||
}
|
||||
if (placements.includes("polda")) {
|
||||
selection.polda = true;
|
||||
}
|
||||
if (placements.includes("satker")) {
|
||||
selection.satker = true;
|
||||
}
|
||||
if (placements.includes("international")) {
|
||||
selection.international = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return selection;
|
||||
});
|
||||
setFileUnitSelections(initialFileUnitSelections);
|
||||
}
|
||||
|
||||
if (details?.publishedFor) {
|
||||
|
|
@ -874,29 +913,6 @@ export default function FormImageUpdate() {
|
|||
initState();
|
||||
}, [id, setValue]);
|
||||
|
||||
const mapPlacementsToOptions = (placements: string): string[] => {
|
||||
const mapping: Record<string, string> = {
|
||||
all: "all",
|
||||
mabes: "nasional",
|
||||
polda: "wilayah",
|
||||
polres: "internasional",
|
||||
};
|
||||
|
||||
if (placements.trim() === "all") {
|
||||
return ["all", "nasional", "wilayah", "internasional"];
|
||||
}
|
||||
|
||||
const options = placements
|
||||
.split(",")
|
||||
.map((p) => mapping[p.trim()])
|
||||
.filter(Boolean);
|
||||
|
||||
const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
|
||||
options.includes(opt)
|
||||
);
|
||||
|
||||
return allSelected ? ["all", ...options] : options;
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (id: string) => {
|
||||
if (id === "all") {
|
||||
|
|
@ -920,8 +936,8 @@ export default function FormImageUpdate() {
|
|||
for (let i = 0; i < filePlacements?.length; i++) {
|
||||
if (filePlacements[i]?.length !== 0) {
|
||||
const now = filePlacements[i];
|
||||
let nowArr = now?.join(",")?.replaceAll("wilayah", "polda");
|
||||
nowArr = nowArr?.replaceAll("nasional", "mabes");
|
||||
let nowArr = now?.join(",")?.replaceAll("nasional", "mabes");
|
||||
nowArr = nowArr?.replaceAll("wilayah", "polda");
|
||||
nowArr = nowArr?.replaceAll("semua", "all");
|
||||
|
||||
// Dapatkan checked levels untuk file ini
|
||||
|
|
@ -959,10 +975,11 @@ export default function FormImageUpdate() {
|
|||
tags: finalTags,
|
||||
isYoutube: false,
|
||||
isInternationalMedia: false,
|
||||
files: getPlacement(),
|
||||
};
|
||||
|
||||
console.log("Form Data Submitted:", requestData);
|
||||
console.log("getPlacement(): ", getPlacement());
|
||||
|
||||
const response = await createMedia(requestData);
|
||||
if (response?.error) {
|
||||
error(response?.message);
|
||||
|
|
@ -974,7 +991,6 @@ export default function FormImageUpdate() {
|
|||
const thumbnail = thumbnailFile || files[0];
|
||||
formMedia.append("file", thumbnail);
|
||||
const responseThumbnail = await uploadThumbnail(id, formMedia);
|
||||
|
||||
if (responseThumbnail?.error) {
|
||||
error(responseThumbnail?.message);
|
||||
return false;
|
||||
|
|
@ -988,6 +1004,13 @@ export default function FormImageUpdate() {
|
|||
setIsStartUpload(true);
|
||||
setProgressList(progressInfoArr);
|
||||
|
||||
// Update file placements
|
||||
const responseFilePlacements = await updateFilePlacements(getPlacement());
|
||||
if (responseFilePlacements?.error) {
|
||||
error(responseFilePlacements?.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
close();
|
||||
|
||||
files.map(async (item: any, index: number) => {
|
||||
|
|
@ -1260,7 +1283,7 @@ export default function FormImageUpdate() {
|
|||
let temp = [...filePlacements];
|
||||
if (checked) {
|
||||
if (placement === "all") {
|
||||
temp[index] = ["all", "mabes", "polda", "international"];
|
||||
temp[index] = ["all", "mabes", "polda", "satker", "international"];
|
||||
|
||||
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
|
||||
setFileCheckedLevels((prevLevels) => {
|
||||
|
|
@ -1293,7 +1316,6 @@ export default function FormImageUpdate() {
|
|||
currentSelection.wilayah = true;
|
||||
currentSelection.international = true;
|
||||
currentSelection.polda = true;
|
||||
currentSelection.polres = true;
|
||||
currentSelection.satker = true;
|
||||
currentSelection.semua = true;
|
||||
|
||||
|
|
@ -1302,23 +1324,40 @@ export default function FormImageUpdate() {
|
|||
});
|
||||
} else if (placement === "satker") {
|
||||
// Ketika satker di-checklist, HANYA tambahkan satker saja
|
||||
// JANGAN otomatis checklist polres
|
||||
const now = temp[index] || [];
|
||||
if (!now.includes("satker")) {
|
||||
now.push("satker");
|
||||
}
|
||||
temp[index] = now;
|
||||
} else if (placement === "polda") {
|
||||
// Ketika polda di-checklist, tambahkan polda ke filePlacements
|
||||
const now = temp[index] || [];
|
||||
if (!now.includes("polda")) {
|
||||
now.push("polda");
|
||||
}
|
||||
temp[index] = now;
|
||||
} else if (placement === "wilayah") {
|
||||
// Ketika wilayah dicentang, tambahkan wilayah, polda, dan satker
|
||||
const now = temp[index] || [];
|
||||
if (!now.includes("wilayah")) {
|
||||
now.push("wilayah");
|
||||
}
|
||||
if (!now.includes("polda")) {
|
||||
now.push("polda");
|
||||
}
|
||||
if (!now.includes("satker")) {
|
||||
now.push("satker");
|
||||
}
|
||||
temp[index] = now;
|
||||
} else {
|
||||
const now = temp[index] || [];
|
||||
if (!now.includes(placement)) {
|
||||
now.push(placement);
|
||||
}
|
||||
// Hanya auto-checklist "all" jika polda, polres, dan mabes ter-checklist
|
||||
// JANGAN include satker dalam perhitungan auto "all"
|
||||
const nonSatkerItems = now.filter(
|
||||
(item) => item !== "satker" && item !== "all"
|
||||
);
|
||||
if (nonSatkerItems.length === 3 && !now.includes("all")) {
|
||||
// Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist
|
||||
const requiredItems = ["nasional", "wilayah", "international"];
|
||||
const hasAllRequired = requiredItems.every(item => now.includes(item));
|
||||
if (hasAllRequired && !now.includes("all")) {
|
||||
now.push("all");
|
||||
}
|
||||
temp[index] = now;
|
||||
|
|
@ -1351,7 +1390,6 @@ export default function FormImageUpdate() {
|
|||
currentSelection.wilayah = false;
|
||||
currentSelection.international = false;
|
||||
currentSelection.polda = false;
|
||||
currentSelection.polres = false;
|
||||
currentSelection.satker = false;
|
||||
currentSelection.semua = false;
|
||||
|
||||
|
|
@ -1359,16 +1397,32 @@ export default function FormImageUpdate() {
|
|||
return newSelections;
|
||||
});
|
||||
} else {
|
||||
const now = temp[index]?.filter((a) => a !== placement);
|
||||
console.log("now", now);
|
||||
temp[index] = now;
|
||||
// Hapus "all" jika tidak semua item ter-checklist
|
||||
if (now.includes("all")) {
|
||||
const nonSatkerItems = now.filter(
|
||||
(item) => item !== "satker" && item !== "all"
|
||||
if (placement === "wilayah") {
|
||||
// Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker
|
||||
const now = temp[index]?.filter((a) =>
|
||||
a !== "wilayah" && a !== "polda" && a !== "satker"
|
||||
);
|
||||
if (nonSatkerItems.length < 3) {
|
||||
const newData = now.filter((b) => b !== "all");
|
||||
temp[index] = now;
|
||||
} else if (placement === "polda") {
|
||||
// Ketika polda di-uncheck, hapus polda dari filePlacements
|
||||
const now = temp[index]?.filter((a) => a !== "polda");
|
||||
temp[index] = now;
|
||||
} else if (placement === "satker") {
|
||||
// Ketika satker di-uncheck, hapus satker dari filePlacements
|
||||
const now = temp[index]?.filter((a) => a !== "satker");
|
||||
temp[index] = now;
|
||||
} else {
|
||||
const now = temp[index]?.filter((a) => a !== placement);
|
||||
temp[index] = now;
|
||||
}
|
||||
|
||||
// Hapus "all" jika tidak semua item ter-checklist
|
||||
const currentNow = temp[index] || [];
|
||||
if (currentNow.includes("all")) {
|
||||
const requiredItems = ["nasional", "wilayah", "international"];
|
||||
const hasAllRequired = requiredItems.every(item => currentNow.includes(item));
|
||||
if (!hasAllRequired) {
|
||||
const newData = currentNow.filter((b) => b !== "all");
|
||||
temp[index] = newData;
|
||||
}
|
||||
}
|
||||
|
|
@ -1400,20 +1454,6 @@ export default function FormImageUpdate() {
|
|||
currentFileLevels.add(Number(item.id));
|
||||
}
|
||||
});
|
||||
} else if (placement === "polres") {
|
||||
// Checklist POLRES hanya dari POLDA yang sudah ter-checklist
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
|
||||
// Hanya checklist POLRES jika POLDA-nya sudah ter-checklist
|
||||
if (currentFileLevels.has(Number(item.id))) {
|
||||
if (item.subDestination) {
|
||||
item.subDestination.forEach((polres: any) => {
|
||||
currentFileLevels.add(Number(polres.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (placement === "satker") {
|
||||
// Checklist SATKER POLRI dan semua sub-item di bawahnya
|
||||
const satkerItem: any = listDest.find(
|
||||
|
|
@ -1430,24 +1470,10 @@ export default function FormImageUpdate() {
|
|||
}
|
||||
} else {
|
||||
if (placement === "polda") {
|
||||
// Unchecklist semua POLDA dan POLRES di bawahnya
|
||||
// Unchecklist semua POLDA
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
|
||||
currentFileLevels.delete(Number(item.id));
|
||||
if (item.subDestination) {
|
||||
item.subDestination.forEach((polres: any) => {
|
||||
currentFileLevels.delete(Number(polres.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (placement === "polres") {
|
||||
// Unchecklist semua POLRES
|
||||
listDest.forEach((item: any) => {
|
||||
if (item.subDestination && item.name !== "SATKER POLRI") {
|
||||
item.subDestination.forEach((polres: any) => {
|
||||
currentFileLevels.delete(Number(polres.id));
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (placement === "satker") {
|
||||
|
|
@ -1527,34 +1553,6 @@ export default function FormImageUpdate() {
|
|||
// console.log("FileDestination.leng::", finalPlacements);
|
||||
// };
|
||||
|
||||
const handleCheckboxChangeImage = (fileId: number, value: string) => {
|
||||
setSelectedOptions((prev: any) => {
|
||||
const currentSelections = prev[fileId] || [];
|
||||
if (value === "all") {
|
||||
if (currentSelections.includes("all")) {
|
||||
return { ...prev, [fileId]: [] };
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
[fileId]: ["all", "nasional", "wilayah", "internasional"],
|
||||
};
|
||||
} else {
|
||||
const updatedSelections = currentSelections.includes(value)
|
||||
? currentSelections.filter((option: any) => option !== value)
|
||||
: [...currentSelections, value];
|
||||
|
||||
const isAllSelected = ["nasional", "wilayah", "internasional"].every(
|
||||
(opt) => updatedSelections.includes(opt)
|
||||
);
|
||||
return {
|
||||
...prev,
|
||||
[fileId]: isAllSelected
|
||||
? ["all", ...updatedSelections]
|
||||
: updatedSelections.filter((opt: any) => opt !== "all"),
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function success() {
|
||||
MySwal.fire({
|
||||
|
|
@ -1742,119 +1740,8 @@ export default function FormImageUpdate() {
|
|||
</Fragment>
|
||||
) : null}
|
||||
{files.length > 0 && (
|
||||
<div className="mt-4 space-y-2">
|
||||
<Label className="text-lg font-semibold">
|
||||
{" "}
|
||||
{t("file-media", { defaultValue: "File Media" })}
|
||||
</Label>
|
||||
<div className="grid gap-4">
|
||||
{files.map((file: any) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex items-center border p-2 rounded-md"
|
||||
>
|
||||
<img
|
||||
src={file.thumbnailFileUrl}
|
||||
alt={file.fileName}
|
||||
className="w-16 h-16 object-cover rounded-md mr-4"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-3 items-center ">
|
||||
<div className="flex-grow">
|
||||
<p className="font-medium">{file.fileName}</p>
|
||||
<a
|
||||
href={file.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 text-sm"
|
||||
>
|
||||
{t("view-file", {
|
||||
defaultValue: "View File",
|
||||
})}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("all")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"all"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>
|
||||
{t("all", { defaultValue: "All" })}
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("nasional")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"nasional"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("wilayah")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"wilayah"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Wilayah</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("internasional")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"internasional"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Internasional</span>
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* {files.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<Label className="text-lg font-semibold">
|
||||
<Label className="text-md font-semibold">
|
||||
{" "}
|
||||
{t("file-media", { defaultValue: "File Media" })}
|
||||
</Label>
|
||||
|
|
@ -1884,78 +1771,75 @@ export default function FormImageUpdate() {
|
|||
</a>
|
||||
</div>
|
||||
<div className="bg-white rounded-md p-4 border">
|
||||
<h5 className="font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
{/* <h5 className="font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Icon
|
||||
icon="material-symbols:settings-outline"
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
Pengaturan Distribusi
|
||||
</h5>
|
||||
</h5> */}
|
||||
|
||||
{/* Checkbox Tingkat Utama */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-700 mb-3">
|
||||
Tingkat Distribusi:
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ key: "semua", label: "Semua" },
|
||||
{
|
||||
key: "nasional",
|
||||
label: "Nasional",
|
||||
},
|
||||
{ key: "wilayah", label: "Wilayah" },
|
||||
{
|
||||
key: "international",
|
||||
label: "Internasional",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<div
|
||||
key={item.key}
|
||||
className="flex items-center gap-2 p-2 border border-gray-200 rounded-md hover:bg-gray-50"
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ key: "semua", label: "Semua" },
|
||||
{
|
||||
key: "nasional",
|
||||
label: "Nasional",
|
||||
},
|
||||
{ key: "wilayah", label: "Wilayah" },
|
||||
{
|
||||
key: "international",
|
||||
label: "Internasional",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<div
|
||||
key={item.key}
|
||||
className="flex items-center gap-2 p-2 border border-gray-200 rounded-md hover:bg-gray-50"
|
||||
>
|
||||
<Checkbox
|
||||
// id={`${item.key}-${index}`}
|
||||
checked={
|
||||
fileUnitSelections[index]?.[
|
||||
item.key as keyof typeof unitSelection
|
||||
] || false
|
||||
}
|
||||
onCheckedChange={(value) => {
|
||||
handleFileUnitChange(
|
||||
index,
|
||||
item.key as keyof typeof unitSelection,
|
||||
value as boolean
|
||||
);
|
||||
setupPlacement(
|
||||
index,
|
||||
item.key,
|
||||
Boolean(value)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`${item.key}-${index}`}
|
||||
className="text-sm font-medium cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
// id={`${item.key}-${index}`}
|
||||
checked={
|
||||
fileUnitSelections[index]?.[
|
||||
item.key as keyof typeof unitSelection
|
||||
] || false
|
||||
}
|
||||
onCheckedChange={(value) => {
|
||||
handleFileUnitChange(
|
||||
index,
|
||||
item.key as keyof typeof unitSelection,
|
||||
value as boolean
|
||||
);
|
||||
setupPlacement(
|
||||
index,
|
||||
item.key,
|
||||
Boolean(value)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`${item.key}-${index}`}
|
||||
className="text-sm font-medium cursor-pointer"
|
||||
>
|
||||
{item.label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{item.label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{fileUnitSelections[index]?.wilayah && (
|
||||
{/* Detail Wilayah */}
|
||||
{fileUnitSelections[index]?.wilayah && isDetailOfRegionShowed && (
|
||||
<div className="border-t border-gray-200 pt-2">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">
|
||||
Detail Wilayah:
|
||||
</p>
|
||||
|
||||
{/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ key: "polda", label: "POLDA" },
|
||||
{ key: "polres", label: "POLRES" },
|
||||
{ key: "satker", label: "SATKER" },
|
||||
].map((item, idx) => (
|
||||
<div
|
||||
|
|
@ -1991,6 +1875,7 @@ export default function FormImageUpdate() {
|
|||
</div>
|
||||
))}
|
||||
|
||||
{/* Tombol Kustom sejajar dengan checkbox */}
|
||||
<div className="flex items-center justify-center p-3">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
|
|
@ -2012,8 +1897,7 @@ export default function FormImageUpdate() {
|
|||
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
|
||||
<DialogHeader className="border-b border-gray-200 pb-4">
|
||||
<DialogTitle className="text-lg font-semibold">
|
||||
Daftar Wilayah POLDA dan
|
||||
POLRES
|
||||
Daftar Wilayah POLDA dan SATKER
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
|
||||
|
|
@ -2023,6 +1907,7 @@ export default function FormImageUpdate() {
|
|||
key={polda.id}
|
||||
className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
|
||||
>
|
||||
{/* Header POLDA */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="flex items-center gap-3 flex-1 cursor-pointer">
|
||||
<Checkbox
|
||||
|
|
@ -2048,7 +1933,8 @@ export default function FormImageUpdate() {
|
|||
{polda.name}
|
||||
</span>
|
||||
</Label>
|
||||
{polda.subDestination && (
|
||||
{/* Tombol expand hanya untuk SATKER POLRI */}
|
||||
{polda.name === "SATKER POLRI" && polda.subDestination && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -2074,11 +1960,13 @@ export default function FormImageUpdate() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{polda.subDestination &&
|
||||
{/* Sub-items hanya untuk SATKER POLRI */}
|
||||
{polda.name === "SATKER POLRI" && polda.subDestination &&
|
||||
expandedPolda[
|
||||
polda.id
|
||||
] && (
|
||||
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
|
||||
{/* Tombol Pilih Semua untuk sub-items */}
|
||||
<div className="mb-2 flex justify-start">
|
||||
{(() => {
|
||||
const allSubItemsChecked =
|
||||
|
|
@ -2183,6 +2071,7 @@ export default function FormImageUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
|
@ -2212,7 +2101,7 @@ export default function FormImageUpdate() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
)}
|
||||
</Fragment>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -25,6 +25,7 @@ import {
|
|||
} from "@/components/ui/select";
|
||||
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 { register } from "module";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
|
@ -35,7 +36,9 @@ import {
|
|||
getTagsBySubCategoryId,
|
||||
listEnableCategory,
|
||||
uploadThumbnail,
|
||||
updateFilePlacements,
|
||||
} from "@/service/content/content";
|
||||
import { getUserLevelForAssignments } from "@/service/task";
|
||||
import { detailMedia } from "@/service/curated-content/curated-content";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { CloudUpload, MailIcon } from "lucide-react";
|
||||
|
|
@ -57,6 +60,7 @@ import { error, loading } from "@/lib/swal";
|
|||
import { useTranslations } from "next-intl";
|
||||
import dynamic from "next/dynamic";
|
||||
import { htmlToString } from "@/utils/globals";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
const videoSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -97,6 +101,35 @@ type Option = {
|
|||
name: string;
|
||||
};
|
||||
|
||||
type PlacementType = "all" | "mabes" | "wilayah" | "polda" | "satker" | "international";
|
||||
|
||||
interface FilePlacement {
|
||||
id: string;
|
||||
placements: PlacementType[];
|
||||
}
|
||||
|
||||
interface TempFileItem {
|
||||
id: string;
|
||||
fileName: string;
|
||||
url: string;
|
||||
thumbnailFileUrl: string;
|
||||
placements: string;
|
||||
customLocationPlacements: string;
|
||||
}
|
||||
|
||||
interface Destination {
|
||||
id: number;
|
||||
name: string;
|
||||
levelNumber: number;
|
||||
subDestination: SubDestination[];
|
||||
}
|
||||
|
||||
interface SubDestination {
|
||||
id: number;
|
||||
name: string;
|
||||
levelNumber: number;
|
||||
}
|
||||
|
||||
const CustomEditor = dynamic(
|
||||
() => {
|
||||
return import("@/components/editor/custom-editor");
|
||||
|
|
@ -132,17 +165,42 @@ export default function FormVideoUpdate() {
|
|||
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||
const [files, setFiles] = useState<FileWithPreview[]>([]);
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
allUnit: false,
|
||||
mabes: false,
|
||||
polda: false,
|
||||
polres: false,
|
||||
});
|
||||
const [publishedFor, setPublishedFor] = useState<string[]>([]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [selectedOptions, setSelectedOptions] = useState<{
|
||||
[fileId: number]: string[];
|
||||
}>({});
|
||||
const [fileUnitSelections, setFileUnitSelections] = useState<{
|
||||
[fileId: string]: {
|
||||
semua: boolean;
|
||||
nasional: boolean;
|
||||
wilayah: boolean;
|
||||
international: boolean;
|
||||
polda: boolean;
|
||||
satker: boolean;
|
||||
};
|
||||
}>({});
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
semua: false,
|
||||
nasional: false,
|
||||
wilayah: false,
|
||||
international: false,
|
||||
polda: false,
|
||||
satker: false,
|
||||
});
|
||||
const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
|
||||
const [listDest, setListDest] = useState<Destination[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [expandedPolda, setExpandedPolda] = useState<Set<number>>(new Set());
|
||||
const [fileCheckedLevels, setFileCheckedLevels] = useState<{
|
||||
[fileId: string]: Set<number>;
|
||||
}>({});
|
||||
const [isUpdatingFromMainCheckbox, setIsUpdatingFromMainCheckbox] = useState(false);
|
||||
const [mainCheckboxChangeType, setMainCheckboxChangeType] = useState<string | null>(null);
|
||||
const [filePlacements, setFilePlacements] = useState<{
|
||||
[fileId: string]: PlacementType[];
|
||||
}>({});
|
||||
const [tempFile, setTempFile] = useState<TempFileItem | null>(null);
|
||||
|
||||
const options: Option[] = [
|
||||
{ id: "all", name: "SEMUA" },
|
||||
|
|
@ -156,7 +214,10 @@ export default function FormVideoUpdate() {
|
|||
|
||||
const { getRootProps, getInputProps } = useDropzone({
|
||||
onDrop: (acceptedFiles) => {
|
||||
setFiles(acceptedFiles.map((file) => Object.assign(file)));
|
||||
setFiles(acceptedFiles.map((file) => Object.assign(file, {
|
||||
id: uuidv4(),
|
||||
preview: URL.createObjectURL(file)
|
||||
})));
|
||||
},
|
||||
accept: {
|
||||
"video/*": [],
|
||||
|
|
@ -203,6 +264,36 @@ export default function FormVideoUpdate() {
|
|||
initState();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPoldaPolres = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await getUserLevelForAssignments();
|
||||
if (response?.data?.data) {
|
||||
setListDest(response.data.data.list);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user levels:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPoldaPolres();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isUpdatingFromMainCheckbox && mainCheckboxChangeType) {
|
||||
syncModalWithMainCheckbox();
|
||||
setIsUpdatingFromMainCheckbox(false);
|
||||
setMainCheckboxChangeType(null);
|
||||
}
|
||||
}, [isUpdatingFromMainCheckbox, mainCheckboxChangeType]);
|
||||
|
||||
useEffect(() => {
|
||||
updateMainCheckboxFromModalLegacy();
|
||||
}, [checkedLevels]);
|
||||
|
||||
const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" && e.currentTarget.value.trim()) {
|
||||
e.preventDefault();
|
||||
|
|
@ -274,13 +365,43 @@ export default function FormVideoUpdate() {
|
|||
|
||||
if (details?.files) {
|
||||
setFiles(details.files);
|
||||
const initialOptions: { [key: number]: string[] } = {};
|
||||
|
||||
// Initialize filePlacements
|
||||
const initialFilePlacements: { [key: string]: PlacementType[] } = {};
|
||||
details.files.forEach((file: any) => {
|
||||
if (file.placements) {
|
||||
initialOptions[file.id] = mapPlacementsToOptions(file.placements);
|
||||
const placements = file.placements.split(",").map((p: string) => p.trim() as PlacementType);
|
||||
initialFilePlacements[file.id] = placements;
|
||||
}
|
||||
});
|
||||
setSelectedOptions(initialOptions);
|
||||
setFilePlacements(initialFilePlacements);
|
||||
|
||||
// Initialize fileCheckedLevels
|
||||
const initialFileCheckedLevels: { [key: string]: Set<number> } = {};
|
||||
details.files.forEach((file: any) => {
|
||||
if (file.customLocationPlacements) {
|
||||
const levelIds = file.customLocationPlacements.split(",").map((id: string) => parseInt(id.trim()));
|
||||
initialFileCheckedLevels[file.id] = new Set(levelIds);
|
||||
}
|
||||
});
|
||||
setFileCheckedLevels(initialFileCheckedLevels);
|
||||
|
||||
// Initialize fileUnitSelections
|
||||
const initialFileUnitSelections: { [key: string]: any } = {};
|
||||
details.files.forEach((file: any) => {
|
||||
if (file.placements) {
|
||||
const placements = file.placements.split(",").map((p: string) => p.trim());
|
||||
initialFileUnitSelections[file.id] = {
|
||||
semua: placements.includes("all"),
|
||||
nasional: placements.includes("mabes"),
|
||||
wilayah: placements.includes("wilayah") || placements.includes("polda") || placements.includes("satker"),
|
||||
international: placements.includes("international"),
|
||||
polda: placements.includes("polda"),
|
||||
satker: placements.includes("satker"),
|
||||
};
|
||||
}
|
||||
});
|
||||
setFileUnitSelections(initialFileUnitSelections);
|
||||
}
|
||||
|
||||
if (details?.publishedFor) {
|
||||
|
|
@ -312,29 +433,206 @@ export default function FormVideoUpdate() {
|
|||
initState();
|
||||
}, [refresh, setValue]);
|
||||
|
||||
const mapPlacementsToOptions = (placements: string): string[] => {
|
||||
const mapping: Record<string, string> = {
|
||||
all: "all",
|
||||
mabes: "nasional",
|
||||
polda: "wilayah",
|
||||
polres: "internasional",
|
||||
};
|
||||
const updateMainCheckboxFromModalLegacy = () => {
|
||||
const checkedPoldaCount = listDest.filter(
|
||||
(item) => item.levelNumber === 2 && item.name !== "SATKER POLRI" && checkedLevels.has(item.id)
|
||||
).length;
|
||||
const hasSelectedPolda = checkedPoldaCount > 0;
|
||||
const allPoldaChecked = checkedPoldaCount === listDest.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI").length;
|
||||
|
||||
// Jika placements hanya "all", langsung aktifkan semua checkbox
|
||||
if (placements.trim() === "all") {
|
||||
return ["all", "nasional", "wilayah", "internasional"];
|
||||
const checkedSatkerCount = listDest.filter(
|
||||
(item) => item.levelNumber === 2 && item.name === "SATKER POLRI" && checkedLevels.has(item.id)
|
||||
).length;
|
||||
const hasSelectedSatker = checkedSatkerCount > 0;
|
||||
const allSatkerChecked = checkedSatkerCount === listDest.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI").length;
|
||||
|
||||
setUnitSelection(prev => ({
|
||||
...prev,
|
||||
polda: hasSelectedPolda,
|
||||
satker: hasSelectedSatker,
|
||||
wilayah: hasSelectedPolda || hasSelectedSatker,
|
||||
}));
|
||||
};
|
||||
|
||||
const syncModalWithMainCheckbox = () => {
|
||||
if (mainCheckboxChangeType === "wilayah_checked") {
|
||||
const poldaIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
const satkerIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
const allSatkerSubIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.flatMap(item => item.subDestination.map(sub => sub.id));
|
||||
|
||||
setCheckedLevels(prev => {
|
||||
const newSet = new Set(prev);
|
||||
[...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach(id => newSet.add(id));
|
||||
return newSet;
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "wilayah_unchecked") {
|
||||
const poldaIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
const satkerIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
const allSatkerSubIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.flatMap(item => item.subDestination.map(sub => sub.id));
|
||||
|
||||
setCheckedLevels(prev => {
|
||||
const newSet = new Set(prev);
|
||||
[...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach(id => newSet.delete(id));
|
||||
return newSet;
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "polda_checked") {
|
||||
const poldaIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
setCheckedLevels(prev => {
|
||||
const newSet = new Set(prev);
|
||||
poldaIds.forEach(id => newSet.add(id));
|
||||
return newSet;
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "polda_unchecked") {
|
||||
const poldaIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
setCheckedLevels(prev => {
|
||||
const newSet = new Set(prev);
|
||||
poldaIds.forEach(id => newSet.delete(id));
|
||||
return newSet;
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "satker_checked") {
|
||||
const satkerIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
const allSatkerSubIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.flatMap(item => item.subDestination.map(sub => sub.id));
|
||||
setCheckedLevels(prev => {
|
||||
const newSet = new Set(prev);
|
||||
[...satkerIds, ...allSatkerSubIds].forEach(id => newSet.add(id));
|
||||
return newSet;
|
||||
});
|
||||
} else if (mainCheckboxChangeType === "satker_unchecked") {
|
||||
const satkerIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.map(item => item.id);
|
||||
const allSatkerSubIds = listDest
|
||||
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI")
|
||||
.flatMap(item => item.subDestination.map(sub => sub.id));
|
||||
setCheckedLevels(prev => {
|
||||
const newSet = new Set(prev);
|
||||
[...satkerIds, ...allSatkerSubIds].forEach(id => newSet.delete(id));
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const options = placements
|
||||
.split(",")
|
||||
.map((p) => mapping[p.trim()])
|
||||
.filter(Boolean);
|
||||
const handleFileUnitChange = (fileId: string, key: string, value: boolean) => {
|
||||
setFileUnitSelections(prev => {
|
||||
const currentSelection = prev[fileId] || {
|
||||
semua: false,
|
||||
nasional: false,
|
||||
wilayah: false,
|
||||
international: false,
|
||||
polda: false,
|
||||
satker: false,
|
||||
};
|
||||
|
||||
const allSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
|
||||
options.includes(opt)
|
||||
);
|
||||
const newSelection = { ...currentSelection, [key]: value };
|
||||
|
||||
return allSelected ? ["all", ...options] : options;
|
||||
if (key === "wilayah" && value) {
|
||||
newSelection.polda = true;
|
||||
newSelection.satker = true;
|
||||
|
||||
// Update fileCheckedLevels for wilayah
|
||||
setFileCheckedLevels(prevLevels => {
|
||||
const currentFileLevels = prevLevels[fileId] || new Set<number>();
|
||||
const newFileLevels = new Set(currentFileLevels);
|
||||
|
||||
// Add all POLDA items
|
||||
listDest.forEach(item => {
|
||||
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
|
||||
newFileLevels.add(item.id);
|
||||
}
|
||||
});
|
||||
|
||||
// Add SATKER POLRI items and their sub-destinations
|
||||
listDest.forEach(item => {
|
||||
if (item.levelNumber === 2 && item.name === "SATKER POLRI") {
|
||||
newFileLevels.add(item.id);
|
||||
item.subDestination.forEach(satkerItem => {
|
||||
newFileLevels.add(satkerItem.id);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return { ...prevLevels, [fileId]: newFileLevels };
|
||||
});
|
||||
} else if (key === "wilayah" && !value) {
|
||||
newSelection.polda = false;
|
||||
newSelection.satker = false;
|
||||
|
||||
// Clear fileCheckedLevels for wilayah
|
||||
setFileCheckedLevels(prevLevels => {
|
||||
const newFileLevels = new Set<number>();
|
||||
return { ...prevLevels, [fileId]: newFileLevels };
|
||||
});
|
||||
} else if (key === "semua") {
|
||||
newSelection.nasional = value;
|
||||
newSelection.wilayah = value;
|
||||
newSelection.international = value;
|
||||
newSelection.polda = value;
|
||||
newSelection.satker = value;
|
||||
}
|
||||
|
||||
return { ...prev, [fileId]: newSelection };
|
||||
});
|
||||
|
||||
// Update filePlacements
|
||||
setFilePlacements(prev => {
|
||||
const currentPlacements = prev[fileId] || [];
|
||||
let newPlacements = [...currentPlacements];
|
||||
|
||||
if (key === "semua" && value) {
|
||||
newPlacements = ["all", "mabes", "wilayah", "polda", "satker", "international"];
|
||||
} else if (key === "semua" && !value) {
|
||||
newPlacements = [];
|
||||
} else if (key === "nasional" && value) {
|
||||
if (!newPlacements.includes("mabes")) newPlacements.push("mabes");
|
||||
} else if (key === "nasional" && !value) {
|
||||
newPlacements = newPlacements.filter(p => p !== "mabes");
|
||||
} else if (key === "wilayah" && value) {
|
||||
if (!newPlacements.includes("wilayah")) newPlacements.push("wilayah");
|
||||
if (!newPlacements.includes("polda")) newPlacements.push("polda");
|
||||
if (!newPlacements.includes("satker")) newPlacements.push("satker");
|
||||
} else if (key === "wilayah" && !value) {
|
||||
newPlacements = newPlacements.filter(p => !["wilayah", "polda", "satker"].includes(p));
|
||||
} else if (key === "international" && value) {
|
||||
if (!newPlacements.includes("international")) newPlacements.push("international");
|
||||
} else if (key === "international" && !value) {
|
||||
newPlacements = newPlacements.filter(p => p !== "international");
|
||||
} else if (key === "polda" && value) {
|
||||
if (!newPlacements.includes("polda")) newPlacements.push("polda");
|
||||
} else if (key === "polda" && !value) {
|
||||
newPlacements = newPlacements.filter(p => p !== "polda");
|
||||
} else if (key === "satker" && value) {
|
||||
if (!newPlacements.includes("satker")) newPlacements.push("satker");
|
||||
} else if (key === "satker" && !value) {
|
||||
newPlacements = newPlacements.filter(p => p !== "satker");
|
||||
}
|
||||
|
||||
// Remove "all" if any individual option is unchecked
|
||||
if (newPlacements.includes("all") && !value && key !== "semua") {
|
||||
newPlacements = newPlacements.filter(p => p !== "all");
|
||||
}
|
||||
|
||||
return { ...prev, [fileId]: newPlacements };
|
||||
});
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (id: string) => {
|
||||
|
|
@ -354,6 +652,192 @@ export default function FormVideoUpdate() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleFileCheckboxChangePlacement = (fileId: string, poldaItem: Destination, isChecked: boolean) => {
|
||||
setFileCheckedLevels(prev => {
|
||||
const currentFileLevels = prev[fileId] || new Set<number>();
|
||||
const newFileLevels = new Set(currentFileLevels);
|
||||
|
||||
if (isChecked) {
|
||||
newFileLevels.add(poldaItem.id);
|
||||
// Add all sub-destinations for SATKER POLRI
|
||||
if (poldaItem.name === "SATKER POLRI") {
|
||||
poldaItem.subDestination.forEach((satkerItem: SubDestination) => {
|
||||
newFileLevels.add(satkerItem.id);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
newFileLevels.delete(poldaItem.id);
|
||||
// Remove all sub-destinations for SATKER POLRI
|
||||
if (poldaItem.name === "SATKER POLRI") {
|
||||
poldaItem.subDestination.forEach((satkerItem: SubDestination) => {
|
||||
newFileLevels.delete(satkerItem.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return { ...prev, [fileId]: newFileLevels };
|
||||
});
|
||||
|
||||
// Update fileUnitSelections based on checked levels
|
||||
const updatedFileLevels = fileCheckedLevels[fileId] || new Set<number>();
|
||||
const hasPolda = listDest.some(item =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name !== "SATKER POLRI" &&
|
||||
updatedFileLevels.has(item.id)
|
||||
);
|
||||
const hasSatker = listDest.some(item =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name === "SATKER POLRI" &&
|
||||
updatedFileLevels.has(item.id)
|
||||
);
|
||||
|
||||
setFileUnitSelections(prev => ({
|
||||
...prev,
|
||||
[fileId]: {
|
||||
...prev[fileId],
|
||||
polda: hasPolda,
|
||||
satker: hasSatker,
|
||||
wilayah: hasPolda || hasSatker,
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const updateMainCheckboxFromModal = (fileId: string) => {
|
||||
const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
|
||||
const hasPolda = listDest.some(item =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name !== "SATKER POLRI" &&
|
||||
fileLevels.has(item.id)
|
||||
);
|
||||
const hasSatker = listDest.some(item =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name === "SATKER POLRI" &&
|
||||
fileLevels.has(item.id)
|
||||
);
|
||||
|
||||
setFileUnitSelections(prev => ({
|
||||
...prev,
|
||||
[fileId]: {
|
||||
...prev[fileId],
|
||||
polda: hasPolda,
|
||||
satker: hasSatker,
|
||||
wilayah: hasPolda || hasSatker,
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleExpand = (poldaId: number) => {
|
||||
setExpandedPolda(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(poldaId)) {
|
||||
newSet.delete(poldaId);
|
||||
} else {
|
||||
newSet.add(poldaId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectAllSubItems = (fileId: string, poldaItem: Destination) => {
|
||||
const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
|
||||
const allSubItemsSelected = poldaItem.subDestination.every(subItem =>
|
||||
fileLevels.has(subItem.id)
|
||||
);
|
||||
|
||||
setFileCheckedLevels(prev => {
|
||||
const currentFileLevels = prev[fileId] || new Set<number>();
|
||||
const newFileLevels = new Set(currentFileLevels);
|
||||
|
||||
if (allSubItemsSelected) {
|
||||
// Unselect all sub-items
|
||||
poldaItem.subDestination.forEach(subItem => {
|
||||
newFileLevels.delete(subItem.id);
|
||||
});
|
||||
} else {
|
||||
// Select all sub-items
|
||||
poldaItem.subDestination.forEach(subItem => {
|
||||
newFileLevels.add(subItem.id);
|
||||
});
|
||||
}
|
||||
|
||||
return { ...prev, [fileId]: newFileLevels };
|
||||
});
|
||||
};
|
||||
|
||||
const getPlacement = (fileId?: string): string => {
|
||||
if (fileId && filePlacements[fileId]) {
|
||||
const placements = filePlacements[fileId];
|
||||
let nowArr = placements.join(",");
|
||||
nowArr = nowArr?.replaceAll("all", "all");
|
||||
nowArr = nowArr?.replaceAll("mabes", "mabes");
|
||||
nowArr = nowArr?.replaceAll("wilayah", "polda");
|
||||
nowArr = nowArr?.replaceAll("polda", "polda");
|
||||
nowArr = nowArr?.replaceAll("satker", "satker");
|
||||
nowArr = nowArr?.replaceAll("international", "international");
|
||||
return nowArr;
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const setupPlacement = (fileId: string, placement: string, isChecked: boolean) => {
|
||||
setFilePlacements(prev => {
|
||||
const currentPlacements = prev[fileId] || [];
|
||||
let temp = { ...prev };
|
||||
|
||||
if (isChecked) {
|
||||
if (placement === "all") {
|
||||
temp[fileId] = ["all", "mabes", "wilayah", "polda", "satker", "international"];
|
||||
} else if (placement === "wilayah") {
|
||||
temp[fileId] = [...currentPlacements, "wilayah", "polda", "satker"];
|
||||
} else if (placement === "polda") {
|
||||
temp[fileId] = [...currentPlacements, "polda"];
|
||||
} else if (placement === "satker") {
|
||||
temp[fileId] = [...currentPlacements, "satker"];
|
||||
} else {
|
||||
temp[fileId] = [...currentPlacements, placement as PlacementType];
|
||||
}
|
||||
} else {
|
||||
if (placement === "all") {
|
||||
temp[fileId] = [];
|
||||
} else if (placement === "wilayah") {
|
||||
temp[fileId] = currentPlacements.filter(p => !["wilayah", "polda", "satker"].includes(p));
|
||||
} else if (placement === "polda") {
|
||||
temp[fileId] = currentPlacements.filter(p => p !== "polda");
|
||||
} else if (placement === "satker") {
|
||||
temp[fileId] = currentPlacements.filter(p => p !== "satker");
|
||||
} else {
|
||||
temp[fileId] = currentPlacements.filter(p => p !== placement);
|
||||
}
|
||||
}
|
||||
|
||||
return temp;
|
||||
});
|
||||
};
|
||||
|
||||
const updateModalChecklistLevels = (fileId: string) => {
|
||||
const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
|
||||
const hasPolda = listDest.some(item =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name !== "SATKER POLRI" &&
|
||||
fileLevels.has(item.id)
|
||||
);
|
||||
const hasSatker = listDest.some(item =>
|
||||
item.levelNumber === 2 &&
|
||||
item.name === "SATKER POLRI" &&
|
||||
fileLevels.has(item.id)
|
||||
);
|
||||
|
||||
setFileUnitSelections(prev => ({
|
||||
...prev,
|
||||
[fileId]: {
|
||||
...prev[fileId],
|
||||
polda: hasPolda,
|
||||
satker: hasSatker,
|
||||
wilayah: hasPolda || hasSatker,
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
// const save = async (data: VideoSchema) => {
|
||||
// loading();
|
||||
// const finalTags = tags.join(", ");
|
||||
|
|
@ -441,6 +925,15 @@ export default function FormVideoUpdate() {
|
|||
return false;
|
||||
}
|
||||
|
||||
// Update file placements
|
||||
if (files.length > 0) {
|
||||
files.forEach((file: any) => {
|
||||
if (file.id) {
|
||||
updateFilePlacements(getPlacement(file.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selectedFiles.length > 0) {
|
||||
const thumbnail = selectedFiles[0];
|
||||
const formMedia = new FormData();
|
||||
|
|
@ -638,37 +1131,6 @@ export default function FormVideoUpdate() {
|
|||
</div>
|
||||
));
|
||||
|
||||
const handleCheckboxChangeImage = (fileId: number, value: string) => {
|
||||
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]: ["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)
|
||||
);
|
||||
return {
|
||||
...prev,
|
||||
[fileId]: isAllSelected
|
||||
? ["all", ...updatedSelections]
|
||||
: updatedSelections.filter((opt: any) => opt !== "all"),
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function success() {
|
||||
MySwal.fire({
|
||||
|
|
@ -885,79 +1347,137 @@ export default function FormVideoUpdate() {
|
|||
})}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("all")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"all"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>
|
||||
{t("all", { defaultValue: "All" })}
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("nasional")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"nasional"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("wilayah")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"wilayah"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Wilayah</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedOptions[
|
||||
file.id
|
||||
]?.includes("internasional")}
|
||||
onChange={() =>
|
||||
handleCheckboxChangeImage(
|
||||
file.id,
|
||||
"internasional"
|
||||
)
|
||||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Internasional</span>
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={fileUnitSelections[file.id]?.semua || false}
|
||||
onCheckedChange={(checked) =>
|
||||
handleFileUnitChange(file.id, "semua", checked as boolean)
|
||||
}
|
||||
/>
|
||||
<span>
|
||||
{t("all", { defaultValue: "All" })}
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={fileUnitSelections[file.id]?.nasional || false}
|
||||
onCheckedChange={(checked) =>
|
||||
handleFileUnitChange(file.id, "nasional", checked as boolean)
|
||||
}
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={fileUnitSelections[file.id]?.wilayah || false}
|
||||
onCheckedChange={(checked) =>
|
||||
handleFileUnitChange(file.id, "wilayah", checked as boolean)
|
||||
}
|
||||
/>
|
||||
<span>Wilayah</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={fileUnitSelections[file.id]?.international || false}
|
||||
onCheckedChange={(checked) =>
|
||||
handleFileUnitChange(file.id, "international", checked as boolean)
|
||||
}
|
||||
/>
|
||||
<span>Internasional</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setTempFile(file)}
|
||||
>
|
||||
Detail Wilayah
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Daftar Wilayah POLDA dan SATKER</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{listDest?.filter((item) => item.levelNumber === 2)
|
||||
.map((poldaItem) => (
|
||||
<div key={poldaItem.id} className="mb-4">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<Checkbox
|
||||
checked={fileCheckedLevels[file.id]?.has(poldaItem.id) || false}
|
||||
onCheckedChange={(checked) =>
|
||||
handleFileCheckboxChangePlacement(file.id, poldaItem, checked as boolean)
|
||||
}
|
||||
/>
|
||||
<Label className="font-medium">
|
||||
{poldaItem.name}
|
||||
</Label>
|
||||
{poldaItem.name === "SATKER POLRI" && poldaItem.subDestination.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleExpand(poldaItem.id)}
|
||||
>
|
||||
{expandedPolda.has(poldaItem.id) ? "Tutup" : "Buka"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{poldaItem.name === "SATKER POLRI" && expandedPolda.has(poldaItem.id) && (
|
||||
<div className="ml-6 space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSelectAllSubItems(file.id, poldaItem)}
|
||||
>
|
||||
Pilih Semua
|
||||
</Button>
|
||||
</div>
|
||||
{poldaItem.subDestination.map((satkerItem) => (
|
||||
<div key={satkerItem.id} className="flex items-center space-x-2 ml-4">
|
||||
<Checkbox
|
||||
checked={fileCheckedLevels[file.id]?.has(satkerItem.id) || false}
|
||||
onCheckedChange={(checked) => {
|
||||
setFileCheckedLevels(prev => {
|
||||
const currentFileLevels = prev[file.id] || new Set<number>();
|
||||
const newFileLevels = new Set(currentFileLevels);
|
||||
if (checked) {
|
||||
newFileLevels.add(satkerItem.id);
|
||||
} else {
|
||||
newFileLevels.delete(satkerItem.id);
|
||||
}
|
||||
return { ...prev, [file.id]: newFileLevels };
|
||||
});
|
||||
updateMainCheckboxFromModal(file.id);
|
||||
}}
|
||||
/>
|
||||
<Label className="text-sm">
|
||||
{satkerItem.name}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue