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

fix:penugasan redirect, approval image

This commit is contained in:
Rama Priyanto 2025-06-09 14:16:37 +07:00
parent 30a97afcfb
commit 8515a9956e
4 changed files with 222 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,6 +66,7 @@ import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setti
import SuggestionModal from "@/components/modal/suggestions-modal"; import SuggestionModal from "@/components/modal/suggestions-modal";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
import ApprovalHistoryModal from "@/components/modal/approval-history-modal"; import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
import Image from "next/image";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -437,6 +438,22 @@ export default function FormImageDetail() {
successCallback(); successCallback();
}; };
const [portraitMap, setPortraitMap] = useState<any>({});
const handleImageLoad = (e: any, index: number) => {
const { naturalWidth, naturalHeight } = e.target;
const isPortrait = naturalHeight > naturalWidth;
setPortraitMap((prev: any) => ({
...prev,
[index]: isPortrait,
}));
};
useEffect(() => {
console.log("portrai", portraitMap);
}, [portraitMap]);
return ( return (
<form> <form>
{detail !== undefined ? ( {detail !== undefined ? (
@ -513,19 +530,19 @@ export default function FormImageDetail() {
thumbs={{ swiper: thumbsSwiper }} thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]} modules={[FreeMode, Navigation, Thumbs]}
navigation={false} navigation={false}
className="w-full" className="h-[480px] object-cover w-full"
> >
{detailThumb?.map((data: any) => ( {detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}> <SwiperSlide key={data.id}>
<img <img
className="object-fill h-full w-full rounded-md" className="h-[480px] max-w-[600px] rounded-md object-cover mx-auto border-2"
src={data} src={data}
alt={` ${data.id}`} alt={` ${data.id}`}
/> />
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
<div className=" mt-2 "> <div className="mt-2 mx-auto min-w-fit max-w-[600px]">
<Swiper <Swiper
onSwiper={setThumbsSwiper} onSwiper={setThumbsSwiper}
slidesPerView={6} slidesPerView={6}
@ -539,7 +556,7 @@ export default function FormImageDetail() {
{detailThumb?.map((data: any) => ( {detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}> <SwiperSlide key={data.id}>
<img <img
className="object-cover h-[60px] w-[80px]" className="object-cover h-[60px] w-[80px] border-2 border-slate-100"
src={data} src={data}
alt={` ${data.id}`} alt={` ${data.id}`}
/> />
@ -579,11 +596,11 @@ export default function FormImageDetail() {
</div> </div>
<div className="mt-3 px-3 space-y-2"> <div className="mt-3 px-3 space-y-2">
<Label>{t("preview")}</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2 w-fit">
<img <img
src={detail.thumbnailLink} src={detail.thumbnailLink}
alt="Thumbnail Gambar Utama" alt="Thumbnail Gambar Utama"
className="w-full h-auto rounded" className="h-[200px] rounded"
/> />
</Card> </Card>
</div> </div>
@ -699,119 +716,139 @@ export default function FormImageDetail() {
)} */} )} */}
<Dialog open={modalOpen} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent className="min-w-max h-[600px] overflow-y-auto"> <DialogContent size="md" className="max-h-[600px]">
<DialogHeader> <DialogHeader>
<DialogTitle>{t("leave-comment")}</DialogTitle> <DialogTitle>{t("leave-comment")}</DialogTitle>
</DialogHeader> </DialogHeader>
{status == "2" <div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
? files?.map((file, index) => ( {status == "2"
<div ? files?.map((file, index) => (
key={file.id} <div
className="flex flex-row gap-2 items-center" key={file.id}
> className="flex flex-row gap-5 items-center w-full"
<img src={file.url} className="w-[200px]" /> >
<div className="flex flex-col gap-2 w-full"> <div className="w-[200px] h-[100px] flex justify-center items-center">
<div className="flex justify-between text-sm"> <img
{file.fileName} key={index}
<a alt={`files-${index + 1}`}
onClick={() => src={file.url}
handleDeleteFileApproval(file.id) onLoad={(e) => handleImageLoad(e, index)}
} className={`h-[100px] object-cover ${
> portraitMap[index] ? "w-auto" : "!w-[200px]"
<Icon icon="humbleicons:times" color="red" /> }`}
</a> />
</div> </div>
{isUserMabesApprover && ( <div className="flex flex-col gap-2 w-full">
<div className="flex flex-row gap-2"> <div className="flex justify-between text-sm">
<div className="flex items-center space-x-2"> {file.fileName}
<Checkbox <a
id="terms" onClick={() =>
value="all" handleDeleteFileApproval(file.id)
checked={filePlacements[index]?.includes( }
"all" >
)} <Icon icon="humbleicons:times" color="red" />
onCheckedChange={(e) => </a>
setupPlacement(index, "all", Boolean(e)) </div>
} {isUserMabesApprover && (
/> <div className="flex flex-row gap-2">
<label <div className="flex items-center space-x-2">
htmlFor="terms" <Checkbox
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" id="terms"
> value="all"
{t("all")} checked={filePlacements[index]?.includes(
</label> "all"
</div> )}
<div className="flex items-center space-x-2"> onCheckedChange={(e) =>
<Checkbox setupPlacement(index, "all", Boolean(e))
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>
{wilayahPublish.polda && (
<UnitMapping
unit="Polda"
isDetail={false}
sendDataToParent={(data: any) =>
setSelectedPolda(data)
} }
/> />
)} <label
</div> htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
<div className="flex items-center space-x-2"> >
<Checkbox {t("all")}
id="terms" </label>
checked={filePlacements[index]?.includes( </div>
"international" <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>
{wilayahPublish.polda && (
<UnitMapping
unit="Polda"
isDetail={false}
sendDataToParent={(data: any) =>
setSelectedPolda(data)
}
/>
)} )}
onCheckedChange={(e) => </div>
setupPlacement(
index, <div className="flex items-center space-x-2">
"international", <Checkbox
Boolean(e) id="terms"
) checked={filePlacements[index]?.includes(
} "international"
/> )}
<label onCheckedChange={(e) =>
htmlFor="terms" setupPlacement(
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" index,
> "international",
Internasional Boolean(e)
</label> )
}
/>
<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> ))
)) : ""}
: ""} </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<Textarea <Textarea
placeholder="Type your message here." placeholder="Type your message here."
@ -821,7 +858,8 @@ export default function FormImageDetail() {
</div> </div>
{status == "3" || status == "4" ? ( {status == "3" || status == "4" ? (
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<Badge <Button
size="sm"
color={ color={
description === "Kualitas media kurang baik" description === "Kualitas media kurang baik"
? "primary" ? "primary"
@ -833,9 +871,10 @@ export default function FormImageDetail() {
} }
> >
Kualitas media kurang baik Kualitas media kurang baik
</Badge> </Button>
<Badge <Button
size="sm"
color={ color={
description === "Deskripsi kurang lengkap" description === "Deskripsi kurang lengkap"
? "primary" ? "primary"
@ -847,8 +886,9 @@ export default function FormImageDetail() {
} }
> >
Deskripsi kurang lengkap Deskripsi kurang lengkap
</Badge> </Button>
<Badge <Button
size="sm"
color={ color={
description === "Judul kurang tepat" description === "Judul kurang tepat"
? "primary" ? "primary"
@ -858,11 +898,12 @@ export default function FormImageDetail() {
onClick={() => setDescription("Judul kurang tepat")} onClick={() => setDescription("Judul kurang tepat")}
> >
Judul kurang tepat Judul kurang tepat
</Badge> </Button>
</div> </div>
) : ( ) : (
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<Badge <Button
size="sm"
color={ color={
description === "Konten sangat bagus" description === "Konten sangat bagus"
? "primary" ? "primary"
@ -872,8 +913,9 @@ export default function FormImageDetail() {
onClick={() => setDescription("Konten sangat bagus")} onClick={() => setDescription("Konten sangat bagus")}
> >
Konten sangat bagus Konten sangat bagus
</Badge> </Button>
<Badge <Button
size="sm"
color={ color={
description === "Konten menarik" description === "Konten menarik"
? "primary" ? "primary"
@ -883,26 +925,29 @@ export default function FormImageDetail() {
onClick={() => setDescription("Konten menarik")} onClick={() => setDescription("Konten menarik")}
> >
Konten menarik Konten menarik
</Badge> </Button>
</div> </div>
)} )}
<DialogFooter> <DialogFooter>
<Button <div className="flex flex-row gap-2 justify-end">
type="button" {" "}
color="primary" <Button
onClick={() => submit()} type="button"
> color="primary"
{t("submit")} onClick={() => submit()}
</Button> >
<Button {t("submit")}
type="button" </Button>
color="destructive" <Button
onClick={() => { type="button"
setModalOpen(false); color="destructive"
}} onClick={() => {
> setModalOpen(false);
{t("cancel")} }}
</Button> >
{t("cancel")}
</Button>
</div>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

8
components/form/task/task-detail-form.tsx
View File

@ -1361,20 +1361,22 @@ export default function FormTaskDetail() {
<div className="mt-4"> <div className="mt-4">
<Label>Link Url</Label> <Label>Link Url</Label>
{urlInputs.map((url: any, index: any) => ( {urlInputs.map((url: any, index: any) => (
<div <Link
key={url.id} key={url.id}
href={url}
target="_blank"
className="flex items-center gap-2 mt-2" className="flex items-center gap-2 mt-2"
> >
<input <input
type="url" type="url"
className="border rounded p-2 w-full" className="border rounded p-2 w-full cursor-pointer"
value={url} value={url}
// onChange={(e) => // onChange={(e) =>
// handleLinkChange(index, e.target.value) // handleLinkChange(index, e.target.value)
// } // }
placeholder={`Masukkan link berita ${index + 1}`} placeholder={`Masukkan link berita ${index + 1}`}
/> />
</div> </Link>
))} ))}
</div> </div>
</div> </div>

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

@ -36,7 +36,7 @@ import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
import { AudioRecorder } from "react-audio-voice-recorder"; import { AudioRecorder } from "react-audio-voice-recorder";
import FileUploader from "@/components/form/shared/file-uploader"; import FileUploader from "@/components/form/shared/file-uploader";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import { error } from "@/config/swal"; import { close, error } from "@/config/swal";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { loading } from "@/lib/swal"; import { loading } from "@/lib/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@ -320,37 +320,42 @@ export default function FormTask() {
loading(); loading();
if (imageFiles?.length == 0) { if (imageFiles?.length == 0) {
setIsImageUploadFinish(true); setIsImageUploadFinish(true);
} else {
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
} }
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
if (videoFiles?.length == 0) { if (videoFiles?.length == 0) {
setIsVideoUploadFinish(true); setIsVideoUploadFinish(true);
} else {
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
} }
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
if (textFiles?.length == 0) { if (textFiles?.length == 0) {
setIsTextUploadFinish(true); setIsTextUploadFinish(true);
} else {
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
} }
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
if (audioFiles?.length == 0) { if (audioFiles?.length == 0) {
setIsAudioUploadFinish(true); setIsAudioUploadFinish(true);
} else {
audioFiles.map(async (item: FileWithPreview, index: number) => {
await uploadResumableFile(
index,
String(id),
item, // Use .file to access the actual File object
"4",
"0" // Optional: Replace with actual duration if available
);
});
} }
audioFiles.map(async (item: FileWithPreview, index: number) => { close();
await uploadResumableFile(
index,
String(id),
item, // Use .file to access the actual File object
"4",
"0" // Optional: Replace with actual duration if available
);
});
}; };
const onSubmit = (data: TaskSchema) => { const onSubmit = (data: TaskSchema) => {
@ -479,7 +484,8 @@ export default function FormTask() {
successTodo(); successTodo();
if (fileTypeId == "1") { if (fileTypeId == "1") {
setIsImageUploadFinish(true); setIsImageUploadFinish(true);
} else if (fileTypeId == "2") { }
if (fileTypeId == "2") {
setIsVideoUploadFinish(true); setIsVideoUploadFinish(true);
} }
if (fileTypeId == "3") { if (fileTypeId == "3") {

19
components/partials/auth/login-form.tsx
View File

@ -281,16 +281,17 @@ const LoginForm = () => {
return false; return false;
} }
const msg = response?.data?.message; const msg = response?.data?.message;
onSubmit(data);
if (msg == "Continue to setup email") { // if (msg == "Continue to setup email") {
setStep(2); // setStep(2);
} else if (msg == "Email is valid and OTP has been sent") { // } else if (msg == "Email is valid and OTP has been sent") {
setStep(3); // setStep(3);
} else if (msg == "Username & password valid") { // } else if (msg == "Username & password valid") {
onSubmit(data); // onSubmit(data);
} else { // } else {
error("Username / password incorrect"); // error("Username / password incorrect");
} // }
// else { // else {
// setStep(1); // setStep(1);
// } // }