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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/[locale]/(public)/polda/[polda_name]/page.tsx → app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
View File

0
app/[locale]/(public)/polda/layout.tsx → app/[locale]/(public)/(polda)/polda/layout.tsx
View File

0
app/[locale]/(public)/satker/[satker_name]/page.tsx → app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx
View File

0
app/[locale]/(public)/satker/layout.tsx → app/[locale]/(public)/(satker)/satker/layout.tsx
View File

166
components/form/content/image-detail-form.tsx
View File

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

193
components/form/content/video-detail-form.tsx
View File

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

4
components/landing-page/division.tsx
View File

@ -94,7 +94,7 @@ const Division = () => {
filteredList.map((region, index) => filteredList.map((region, index) =>
!seeAllValue ? ( !seeAllValue ? (
index < 7 ? ( 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"> <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" /> <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> </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"> <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" /> <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> </div>

5
components/landing-page/new-content.tsx
View File

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

4
service/landing/landing.ts
View File

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