feat: move satker and polda, update detail video and image on contributor

This commit is contained in:
hanif salafi 2025-01-07 23:53:22 +07:00
parent 83e419b5f2
commit e00c1f3326
9 changed files with 240 additions and 132 deletions

View File

@ -133,11 +133,11 @@ export default function FormImageDetail() {
const [filePlacements, setFilePlacements] = useState<string[][]>([]);
const [detailThumb, setDetailThumb] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
const [selectedTarget, setSelectedTarget] = useState("");
const [files, setFiles] = useState<FileType[]>([]);
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
const [isMabesApprover, setIsMabesApprover] = useState(false);
let fileTypeId = "1";
@ -157,7 +157,7 @@ export default function FormImageDetail() {
userLevelId == "216" &&
roleId == "3"
) {
setIsMabesApprover(true);
setIsUserMabesApprover(true);
}
}, [userLevelId, roleId]);
@ -306,7 +306,7 @@ export default function FormImageDetail() {
mediaUploadId: id,
statusId: status,
message: description,
files: isMabesApprover ? getPlacement() : [],
files: isUserMabesApprover ? getPlacement() : [],
};
loading();
const response = await submitApproval(data);
@ -330,9 +330,11 @@ export default function FormImageDetail() {
}
close();
submitApprovalSuccesss();
return false;
}
const setupPlacement = (
index: number,
placement: string,
@ -396,8 +398,10 @@ export default function FormImageDetail() {
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push("/in/contributor/content/image");
}).then((result) => {
if (result.isConfirmed) {
router.push("/contributor/content/image");
}
});
};
@ -516,7 +520,7 @@ export default function FormImageDetail() {
</div>
</Card>
<div className="w-4/12">
<Card className=" h-[800px]">
<Card className=" h-[900px]">
<div className="px-3 py-3">
<div className="space-y-2">
<Label>Kreator</Label>
@ -675,82 +679,84 @@ export default function FormImageDetail() {
<Icon icon="humbleicons:times" color="red" />
</a>
</div>
<div className="flex flex-row gap-2">
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
value="all"
checked={filePlacements[index]?.includes(
"all"
)}
onCheckedChange={(e) =>
setupPlacement(index, "all", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Semua
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"mabes"
)}
onCheckedChange={(e) =>
setupPlacement(index, "mabes", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Nasional
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"polda"
)}
onCheckedChange={(e) =>
setupPlacement(index, "polda", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Wilayah
</label>
</div>
{isUserMabesApprover &&
<div className="flex flex-row gap-2">
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
value="all"
checked={filePlacements[index]?.includes(
"all"
)}
onCheckedChange={(e) =>
setupPlacement(index, "all", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Semua
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"mabes"
)}
onCheckedChange={(e) =>
setupPlacement(index, "mabes", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Nasional
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"polda"
)}
onCheckedChange={(e) =>
setupPlacement(index, "polda", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Wilayah
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"international"
)}
onCheckedChange={(e) =>
setupPlacement(
index,
"international",
Boolean(e)
)
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Internasional
</label>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"international"
)}
onCheckedChange={(e) =>
setupPlacement(
index,
"international",
Boolean(e)
)
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Internasional
</label>
</div>
</div>
</div>
}
</div>
</div>
))

View File

@ -134,10 +134,11 @@ export default function FormVideoDetail() {
const [detailVideo, setDetailVideo] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [filePlacements, setFilePlacements] = useState<string[][]>([]);
const [selectedTarget, setSelectedTarget] = useState("");
const [files, setFiles] = useState<FileType[]>([]);
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
const [isMabesApprover, setIsMabesApprover] = useState(false);
const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
let fileTypeId = "2";
@ -168,7 +169,7 @@ export default function FormVideoDetail() {
userLevelId == "216" &&
roleId == "3"
) {
setIsMabesApprover(true);
setIsUserMabesApprover(true);
}
}, [userLevelId, roleId]);
@ -254,9 +255,16 @@ export default function FormVideoDetail() {
}, [refresh, setValue]);
const actionApproval = (e: string) => {
const temp = [];
for (const element of detail.files) {
temp.push([]);
}
setFilePlacements(temp);
setStatus(e);
setModalOpen(true);
setFiles(detail.files);
setDescription("");
setModalOpen(true);
};
const submit = async () => {
@ -286,8 +294,7 @@ export default function FormVideoDetail() {
mediaUploadId: id,
statusId: status,
message: description,
files: [],
// files: isMabesApprover ? getPlacement() : [],
files: isUserMabesApprover ? getPlacement() : [],
};
loading();
@ -310,10 +317,57 @@ export default function FormVideoDetail() {
}
close();
submitApprovalSuccesss();
return false;
}
const getPlacement = () => {
console.log("getPlaa", filePlacements);
const temp = [];
for (let i = 0; i < filePlacements?.length; i++) {
if (filePlacements[i].length !== 0) {
const now = filePlacements[i].filter((a) => a !== "all");
const data = { mediaFileId: files[i].id, placement: now.join(",") };
temp.push(data);
}
}
return temp;
};
const setupPlacement = (
index: number,
placement: string,
checked: boolean
) => {
let temp = [...filePlacements];
if (checked) {
if (placement === "all") {
temp[index] = ["all", "mabes", "polda", "international"];
} else {
const now = temp[index];
now.push(placement);
if (now.length === 3 && !now.includes("all")) {
now.push("all");
}
temp[index] = now;
}
} else {
if (placement === "all") {
temp[index] = [];
} else {
const now = temp[index].filter((a) => a !== placement);
console.log("now", now);
temp[index] = now;
if (now.length === 3 && now.includes("all")) {
const newData = now.filter((b) => b !== "all");
temp[index] = newData;
}
}
}
setFilePlacements(temp);
};
function handleDeleteFileApproval(id: number) {
const selectedFiles = files.filter((file) => file.id != id);
setFiles(selectedFiles);
@ -344,8 +398,10 @@ export default function FormVideoDetail() {
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push("/in/contributor/content/video");
}).then((result) => {
if (result.isConfirmed) {
router.push("/contributor/content/video");
}
});
};
@ -610,7 +666,7 @@ export default function FormVideoDetail() {
<DialogTitle>Berikan Komentar</DialogTitle>
</DialogHeader>
{status == "2"
? files?.map((file) => (
? files?.map((file, index) => (
<div
key={file.id}
className="flex flex-row gap-2 items-center"
@ -619,49 +675,92 @@ export default function FormVideoDetail() {
<div className="flex flex-col gap-2 w-full">
<div className="flex justify-between text-sm">
{file.fileName}
<a>
<a
onClick={() =>
handleDeleteFileApproval(file.id)
}
>
<Icon icon="humbleicons:times" color="red" />
</a>
</div>
<div className="flex flex-row gap-2">
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Semua
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Nasional
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Wilayah
</label>
</div>
{isUserMabesApprover &&
<div className="flex flex-row gap-2">
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
value="all"
checked={filePlacements[index]?.includes(
"all"
)}
onCheckedChange={(e) =>
setupPlacement(index, "all", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Semua
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"mabes"
)}
onCheckedChange={(e) =>
setupPlacement(index, "mabes", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Nasional
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"polda"
)}
onCheckedChange={(e) =>
setupPlacement(index, "polda", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Wilayah
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Internasional
</label>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"international"
)}
onCheckedChange={(e) =>
setupPlacement(
index,
"international",
Boolean(e)
)
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Internasional
</label>
</div>
</div>
</div>
}
</div>
</div>
))
@ -744,7 +843,7 @@ export default function FormVideoDetail() {
<Button
type="button"
color="primary"
onClick={submitApprovalSuccesss}
onClick={() => submit()}
>
Submit
</Button>

View File

@ -94,7 +94,7 @@ const Division = () => {
filteredList.map((region, index) =>
!seeAllValue ? (
index < 7 ? (
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</div>
@ -104,7 +104,7 @@ const Division = () => {
""
)
) : (
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
</div>

View File

@ -18,17 +18,22 @@ const NewContent = (props: { type: string }) => {
const pathname = usePathname();
const params = useParams();
const locale = params?.locale;
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
const t = useTranslations("LandingPage");
useEffect(() => {
initFetch();
}, [selectedTab]);
const initFetch = async () => {
console.log("Satker Name : ", satkerName);
const request = {
title: "",
page: 0,
size: 5,
sortBy: props.type == "popular" ? "clickCount" : "createdAt",
contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "",
group: poldaName && String(poldaName)?.length > 1 ? poldaName : "",
};
const response = await getListContent(request);
console.log("category", response);

View File

@ -10,9 +10,7 @@ export async function getCategoryData() {
export async function getListContent(props: any) {
return await httpGetInterceptor(
`media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${
props.title ? props.title : ""
}&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
`media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&group=${props.group}&categoryId=&fileFormats=&tags=&startDate=&endDate=&month=&year=`
);
}