fix: button cancel in all form

This commit is contained in:
Sabda Yagra 2025-07-20 18:10:49 +07:00
parent 0b420bdef4
commit 07c7a93b18
9 changed files with 259 additions and 136 deletions

View File

@ -647,7 +647,7 @@ export default function FormAudio() {
filename: file.name,
filetype: file.type,
duration,
isWatermark: "false",
isWatermark: "false",
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
@ -1444,9 +1444,11 @@ export default function FormAudio() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/audio"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>

View File

@ -50,6 +50,7 @@ import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import { Link } from "@/i18n/routing";
const audioSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -667,7 +668,9 @@ export default function FormAudioUpdate() {
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">{t("form-audio", { defaultValue: "Form Audio" })}</p>
<p className="text-lg font-semibold mb-3">
{t("form-audio", { defaultValue: "Form Audio" })}
</p>
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
@ -706,14 +709,18 @@ export default function FormAudioUpdate() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem
key={String(category.id)}
@ -729,7 +736,9 @@ export default function FormAudioUpdate() {
</div>
<div className="py-3 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="description"
@ -744,7 +753,9 @@ export default function FormAudioUpdate() {
)}
</div>
<div className="py-3 space-y-2">
<Label>{t("select-file", { defaultValue: "Select File" })}</Label>
<Label>
{t("select-file", { defaultValue: "Select File" })}
</Label>
{/* <Input
id="fileInput"
type="file"
@ -760,7 +771,9 @@ export default function FormAudioUpdate() {
{t("drag-file", { defaultValue: "Drag File" })}
</h4>
<div className=" text-xs text-muted-foreground">
{t("upload-file-audio-max", { defaultValue: "Upload File Audio Max" })}
{t("upload-file-audio-max", {
defaultValue: "Upload File Audio Max",
})}
</div>
</div>
</div>
@ -1009,7 +1022,9 @@ export default function FormAudioUpdate() {
</div>
<div className="px-3 py-3">
<div className="flex flex-col gap-6 space-y-2">
<Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
<Label>
{t("publish-target", { defaultValue: "Publish Target" })}
</Label>
{options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center">
<Checkbox
@ -1043,9 +1058,11 @@ export default function FormAudioUpdate() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/audio"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>

View File

@ -48,6 +48,7 @@ import { error, loading } from "@/lib/swal";
import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/routing";
const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -268,7 +269,7 @@ export default function FormImageUpdate() {
const details = response?.data?.data;
setDetail(details);
// Set the selected target to the category ID from details
setSelectedTarget(String(details.category.id));
@ -554,7 +555,7 @@ export default function FormImageUpdate() {
const fileList = files.map((file: any) => (
<div
key={file.id} // Gunakan ID file sebagai key
key={file.id}
className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div className="flex gap-3 items-center">
@ -671,7 +672,9 @@ export default function FormImageUpdate() {
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">{t("form-image", { defaultValue: "Form Image" })}</p>
<p className="text-lg font-semibold mb-3">
{t("form-image", { defaultValue: "Form Image" })}
</p>
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
@ -710,14 +713,18 @@ export default function FormImageUpdate() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem
key={String(category.id)}
@ -732,12 +739,17 @@ export default function FormImageUpdate() {
</div>
<div className="py-3 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="description"
render={({ field }) => (
<CustomEditor onChange={field.onChange} initialData={field.value} />
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
)}
/>
{errors.description?.message && (
@ -747,7 +759,9 @@ export default function FormImageUpdate() {
)}
</div>
<div className="py-3 space-y-2">
<Label>{t("select-file", { defaultValue: "Select File" })}</Label>
<Label>
{t("select-file", { defaultValue: "Select File" })}
</Label>
{/* <Input
id="fileInput"
type="file"
@ -763,7 +777,9 @@ export default function FormImageUpdate() {
{t("drag-file", { defaultValue: "Drag File" })}
</h4>
<div className=" text-xs text-muted-foreground">
{t("upload-file-max", { defaultValue: "Upload File Max" })}
{t("upload-file-max", {
defaultValue: "Upload File Max",
})}
</div>
</div>
</div>
@ -772,7 +788,9 @@ export default function FormImageUpdate() {
<div>{fileList}</div>
<div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3">
<Label>{t("watermark", { defaultValue: "Watermark" })}</Label>
<Label>
{t("watermark", { defaultValue: "Watermark" })}
</Label>
<div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" />
</div>
@ -812,7 +830,9 @@ export default function FormImageUpdate() {
rel="noopener noreferrer"
className="text-blue-500 text-sm"
>
{t("view-file", { defaultValue: "View File" })}
{t("view-file", {
defaultValue: "View File",
})}
</a>
</div>
<div>
@ -830,7 +850,9 @@ export default function FormImageUpdate() {
}
className="form-checkbox"
/>
<span>{t("all", { defaultValue: "All" })}</span>
<span>
{t("all", { defaultValue: "All" })}
</span>
</Label>
</div>
<div>
@ -980,7 +1002,9 @@ export default function FormImageUpdate() {
</div>
<div className="px-3 py-3">
<div className="flex flex-col gap-6 space-y-2">
<Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
<Label>
{t("publish-target", { defaultValue: "Publish Target" })}
</Label>
{options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center">
<Checkbox
@ -1000,7 +1024,9 @@ export default function FormImageUpdate() {
</div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon />
<p className="">{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)</p>
<p className="">
{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)
</p>
</div>
<div className="px-3 py-3">
<p>{t("information", { defaultValue: "Information" })}:</p>
@ -1014,9 +1040,11 @@ export default function FormImageUpdate() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/image"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>

View File

@ -18,10 +18,6 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { register } from "module";
import { Switch } from "@/components/ui/switch";
import Cookies from "js-cookie";
import {
createMedia,
@ -119,13 +115,13 @@ export default function FormTeksDetail() {
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie");
const userLevelName = Cookies.get("state");
const userLevelNumber = getCookiesDecrypt("ulne");
const [modalOpen, setModalOpen] = useState(false);
const { id } = useParams() as { id: string };
console.log(id);
const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>;
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId");
@ -472,16 +468,23 @@ export default function FormTeksDetail() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem key={String(category.id)} value={String(category.id)}>
<SelectItem
key={String(category.id)}
value={String(category.id)}
>
{category.name}
</SelectItem>
))}
@ -873,7 +876,11 @@ export default function FormTeksDetail() {
</DialogContent>
</Dialog>
</Card>
{Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
{Number(detail?.needApprovalFromLevel) == Number(userLevelId) ||
(detail?.needApprovalFromLevel && Number(userLevelNumber) == 1) ||
(detail?.isInternationalMedia == true &&
detail?.isForwardFromNational == true &&
Number(detail?.statusId) == 1) ? (
Number(detail?.uploadedById) == Number(userId) ? (
""
) : (

View File

@ -1492,9 +1492,11 @@ export default function FormTeks() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/teks"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>

View File

@ -46,6 +46,7 @@ import { Upload } from "tus-js-client";
import { getCsrfToken } from "@/service/auth";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import { Link } from "@/i18n/routing";
const teksSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -623,7 +624,9 @@ export default function FormTeksUpdate() {
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">{t("form-text", { defaultValue: "Form Text" })}</p>
<p className="text-lg font-semibold mb-3">
{t("form-text", { defaultValue: "Form Text" })}
</p>
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
@ -662,14 +665,18 @@ export default function FormTeksUpdate() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem
key={String(category.id)}
@ -684,7 +691,9 @@ export default function FormTeksUpdate() {
</div>
</div>
<div className="py-3 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="description"
@ -699,7 +708,9 @@ export default function FormTeksUpdate() {
)}
</div>
<div className="py-3 space-y-2">
<Label>{t("select-file", { defaultValue: "Select File" })}</Label>
<Label>
{t("select-file", { defaultValue: "Select File" })}
</Label>
{/* <Input
id="fileInput"
type="file"
@ -715,7 +726,9 @@ export default function FormTeksUpdate() {
{t("drag-file", { defaultValue: "Drag File" })}
</h4>
<div className=" text-xs text-muted-foreground">
{t("upload-file-text-max", { defaultValue: "Upload File Text Max" })}
{t("upload-file-text-max", {
defaultValue: "Upload File Text Max",
})}
</div>
</div>
</div>
@ -724,7 +737,9 @@ export default function FormTeksUpdate() {
<div>{fileList}</div>
<div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3">
<Label>{t("watermark", { defaultValue: "Watermark" })}</Label>
<Label>
{t("watermark", { defaultValue: "Watermark" })}
</Label>
<div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" />
</div>
@ -764,7 +779,9 @@ export default function FormTeksUpdate() {
rel="noopener noreferrer"
className="text-blue-500 text-sm"
>
{t("view-file", { defaultValue: "View File" })}
{t("view-file", {
defaultValue: "View File",
})}
</a>
</div>
<div>
@ -782,7 +799,9 @@ export default function FormTeksUpdate() {
}
className="form-checkbox"
/>
<span>{t("all", { defaultValue: "All" })}</span>
<span>
{t("all", { defaultValue: "All" })}
</span>
</Label>
</div>
<div>
@ -922,7 +941,9 @@ export default function FormTeksUpdate() {
</div>
<div className="px-3 py-3">
<div className="flex flex-col gap-6">
<Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
<Label>
{t("publish-target", { defaultValue: "Publish Target" })}
</Label>
{options.map((option) => (
<div key={option.id} className="flex gap-2 items-center">
<Checkbox
@ -943,7 +964,9 @@ export default function FormTeksUpdate() {
</div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon />
<p className="">{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)</p>
<p className="">
{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)
</p>
</div>
<div className="px-3 py-3">
<p>{t("information", { defaultValue: "Information" })}:</p>
@ -957,9 +980,11 @@ export default function FormTeksUpdate() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/teks"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>

View File

@ -119,13 +119,13 @@ export default function FormVideoDetail() {
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie");
const userLevelName = Cookies.get("state");
const userLevelNumber = getCookiesDecrypt("ulne");
const [modalOpen, setModalOpen] = useState(false);
const { id } = useParams() as { id: string };
console.log(id);
const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>;
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId");
@ -141,7 +141,6 @@ export default function FormVideoDetail() {
const [main, setMain] = useState<any>([]);
const [detailVideo, setDetailVideo] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const t = useTranslations("Form");
const [filePlacements, setFilePlacements] = useState<string[][]>([]);
const [selectedTarget, setSelectedTarget] = useState("");
@ -149,9 +148,7 @@ export default function FormVideoDetail() {
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
const [approval, setApproval] = useState<any>();
let fileTypeId = "2";
const {
control,
handleSubmit,
@ -212,7 +209,7 @@ export default function FormVideoDetail() {
if (findCategory) {
// setValue("categoryId", findCategory.id);
setSelectedCategory(findCategory.id);
setSelectedCategory(findCategory.id);
const response = await getTagsBySubCategoryId(findCategory.id);
setTags(response?.data?.data);
}
@ -245,7 +242,7 @@ export default function FormVideoDetail() {
}
// Set the selected target to the category ID from details
setSelectedTarget(String(details.category.id));
setSelectedTarget(String(details.category.id));
const filesData = details?.files || [];
const fileUrls = filesData.map((files: { url: string }) =>
@ -418,7 +415,9 @@ export default function FormVideoDetail() {
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">{t("form-video", { defaultValue: "Form Video" })}</p>
<p className="text-lg font-semibold mb-3">
{t("form-video", { defaultValue: "Form Video" })}
</p>
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
@ -458,16 +457,23 @@ export default function FormVideoDetail() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem key={String(category.id)} value={String(category.id)}>
<SelectItem
key={String(category.id)}
value={String(category.id)}
>
{category.name}
</SelectItem>
))}
@ -477,7 +483,9 @@ export default function FormVideoDetail() {
</div>
<div className="py-3 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="description"
@ -492,7 +500,10 @@ export default function FormVideoDetail() {
)}
</div>
<div className="space-y-2">
<Label className="text-xl "> {t("file-media", { defaultValue: "File Media" })}</Label>
<Label className="text-xl ">
{" "}
{t("file-media", { defaultValue: "File Media" })}
</Label>
<div className="w-full">
<Swiper
thumbs={{ swiper: thumbsSwiper }}
@ -506,7 +517,7 @@ export default function FormVideoDetail() {
className="object-fill h-full w-full"
src={data.secondaryUrl}
controls
title={`Video ${data.id}`}
title={`Video ${data.id}`}
/>
</SwiperSlide>
))}
@ -528,7 +539,7 @@ export default function FormVideoDetail() {
className="object-cover h-[60px] w-[80px] cursor-pointer"
src={data.secondaryUrl}
muted
title={`Video ${data.id}`}
title={`Video ${data.id}`}
/>
</SwiperSlide>
))}
@ -593,7 +604,9 @@ export default function FormVideoDetail() {
</div>
<div className="px-3 py-3">
<div className="flex flex-col gap-6 space-y-2">
<Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
<Label>
{t("publish-target", { defaultValue: "Publish Target" })}
</Label>
<div className="flex gap-2 items-center">
<Checkbox
id="5"
@ -655,7 +668,9 @@ export default function FormVideoDetail() {
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>{t("leave-comment", { defaultValue: "Leave Comment" })}</DialogTitle>
<DialogTitle>
{t("leave-comment", { defaultValue: "Leave Comment" })}
</DialogTitle>
</DialogHeader>
{status == "2"
? files?.map((file, index) => (
@ -864,7 +879,11 @@ export default function FormVideoDetail() {
</DialogContent>
</Dialog>
</Card>
{Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
{Number(detail?.needApprovalFromLevel) == Number(userLevelId) ||
(detail?.needApprovalFromLevel && Number(userLevelNumber) == 1) ||
(detail?.isInternationalMedia == true &&
detail?.isForwardFromNational == true &&
Number(detail?.statusId) == 1) ? (
Number(detail?.uploadedById) == Number(userId) ? (
""
) : (
@ -874,7 +893,8 @@ export default function FormVideoDetail() {
color="primary"
type="button"
>
<Icon icon="fa:check" className="mr-3" /> {t("accept", { defaultValue: "Accept" })}
<Icon icon="fa:check" className="mr-3" />{" "}
{t("accept", { defaultValue: "Accept" })}
</Button>
<Button
onClick={() => actionApproval("3")}

View File

@ -1515,9 +1515,11 @@ export default function FormVideo() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/video"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>

View File

@ -56,6 +56,7 @@ import { getCsrfToken } from "@/service/auth";
import { error, loading } from "@/lib/swal";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import { Link } from "@/i18n/routing";
const videoSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -106,25 +107,21 @@ const CustomEditor = dynamic(
export default function FormVideoUpdate() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const { id } = useParams() as { id: string };
console.log(id);
const editor = useRef(null);
type VideoSchema = z.infer<typeof videoSchema>;
let progressInfo: any = [];
let counterUpdateProgress = 0;
const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0);
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType");
const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]);
@ -133,7 +130,6 @@ export default function FormVideoUpdate() {
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
const [detailVideo, setDetailVideo] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [files, setFiles] = useState<FileWithPreview[]>([]);
const [selectedTarget, setSelectedTarget] = useState("");
const [unitSelection, setUnitSelection] = useState({
@ -263,7 +259,7 @@ export default function FormVideoUpdate() {
setDetail(details);
setSelectedTarget(String(details.category.id));
// Set form values immediately and then again after a delay to ensure editor is ready
setValue("title", details.title);
setValue("description", details.htmlDescription);
@ -728,7 +724,9 @@ export default function FormVideoUpdate() {
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">{t("form-video", { defaultValue: "Form Video" })}</p>
<p className="text-lg font-semibold mb-3">
{t("form-video", { defaultValue: "Form Video" })}
</p>
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
@ -767,14 +765,18 @@ export default function FormVideoUpdate() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem
key={String(category.id)}
@ -789,7 +791,9 @@ export default function FormVideoUpdate() {
</div>
<div className="py-3 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="description"
@ -804,7 +808,9 @@ export default function FormVideoUpdate() {
)}
</div>
<div className="py-3 space-y-2">
<Label>{t("select-file", { defaultValue: "Select File" })}</Label>
<Label>
{t("select-file", { defaultValue: "Select File" })}
</Label>
{/* <Input
id="fileInput"
type="file"
@ -820,7 +826,9 @@ export default function FormVideoUpdate() {
{t("drag-file", { defaultValue: "Drag File" })}
</h4>
<div className=" text-xs text-muted-foreground">
{t("upload-file-video-max", { defaultValue: "Upload File Video Max" })}
{t("upload-file-video-max", {
defaultValue: "Upload File Video Max",
})}
</div>
</div>
</div>
@ -829,7 +837,9 @@ export default function FormVideoUpdate() {
<div>{fileList}</div>
<div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3">
<Label>{t("watermark", { defaultValue: "Watermark" })}</Label>
<Label>
{t("watermark", { defaultValue: "Watermark" })}
</Label>
<div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" />
</div>
@ -869,7 +879,9 @@ export default function FormVideoUpdate() {
rel="noopener noreferrer"
className="text-blue-500 text-sm"
>
{t("view-file", { defaultValue: "View File" })}
{t("view-file", {
defaultValue: "View File",
})}
</a>
</div>
<div>
@ -887,7 +899,9 @@ export default function FormVideoUpdate() {
}
className="form-checkbox"
/>
<span>{t("all", { defaultValue: "All" })}</span>
<span>
{t("all", { defaultValue: "All" })}
</span>
</Label>
</div>
<div>
@ -1027,7 +1041,9 @@ export default function FormVideoUpdate() {
</div>
<div className="px-3 py-3">
<div className="flex flex-col gap-6 space-y-2">
<Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
<Label>
{t("publish-target", { defaultValue: "Publish Target" })}
</Label>
{options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center">
<Checkbox
@ -1047,7 +1063,9 @@ export default function FormVideoUpdate() {
</div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon />
<p className="">{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)</p>
<p className="">
{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)
</p>
</div>
<div className="px-3 py-3">
<p>{t("information", { defaultValue: "Information" })}:</p>
@ -1061,9 +1079,11 @@ export default function FormVideoUpdate() {
</Button>
</div>
<div className="mt-4">
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
<Link href={"/contributor/content/video"}>
<Button type="submit" color="primary" variant="outline">
{t("cancel", { defaultValue: "Cancel" })}
</Button>
</Link>
</div>
</div>
</div>