feat:update bahasa form,ui form
This commit is contained in:
parent
cd80247170
commit
982aa92294
|
|
@ -57,6 +57,7 @@ import { error } from "@/lib/swal";
|
|||
import dynamic from "next/dynamic";
|
||||
import WavesurferPlayer from "@wavesurfer/react";
|
||||
import WaveSurfer from "wavesurfer.js";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -135,6 +136,7 @@ export default function FormAudioDetail() {
|
|||
const [detailThumb, setDetailThumb] = useState<any>([]);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [files, setFiles] = useState<FileType[]>([]);
|
||||
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
|
||||
|
|
@ -452,11 +454,11 @@ export default function FormAudioDetail() {
|
|||
<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">Form Konten Audio</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -477,8 +479,8 @@ export default function FormAudioDetail() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={detail?.category.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -500,8 +502,8 @@ export default function FormAudioDetail() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -516,7 +518,7 @@ export default function FormAudioDetail() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<Label className="text-xl text-black">File Mediaaa</Label>
|
||||
<Label className="text-xl space-y-2">{t("file-media")}</Label>
|
||||
<div className="w-full">
|
||||
<div className={"container example"}>
|
||||
{detailThumb?.map((url: any, index: number) => (
|
||||
|
|
@ -561,7 +563,7 @@ export default function FormAudioDetail() {
|
|||
<Card className=" h-[600px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -585,7 +587,7 @@ export default function FormAudioDetail() {
|
|||
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail?.tags
|
||||
?.split(",")
|
||||
|
|
@ -601,8 +603,8 @@ export default function FormAudioDetail() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
id="5"
|
||||
|
|
@ -639,10 +641,10 @@ export default function FormAudioDetail() {
|
|||
</div>
|
||||
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||
<MailIcon />
|
||||
<p className="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")}(0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3 border mx-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
<p className="text-sm text-slate-400">{detail?.statusName}</p>
|
||||
</div>
|
||||
{/* {detail?.isPublish == false ? (
|
||||
|
|
@ -662,14 +664,15 @@ export default function FormAudioDetail() {
|
|||
color="primary"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:check" className="mr-3" /> Setujui
|
||||
<Icon icon="fa:check" className="mr-3" /> {t("accept")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("3")}
|
||||
className="bg-orange-400 hover:bg-orange-300"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:comment-o" className="mr-3" /> Revisi
|
||||
<Icon icon="fa:comment-o" className="mr-3" />{" "}
|
||||
{t("revision")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("4")}
|
||||
|
|
@ -677,7 +680,7 @@ export default function FormAudioDetail() {
|
|||
type="button"
|
||||
>
|
||||
<Icon icon="fa:times" className="mr-3" />
|
||||
Tolak
|
||||
{t("reject")}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -688,7 +691,7 @@ export default function FormAudioDetail() {
|
|||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Berikan Komentar</DialogTitle>
|
||||
<DialogTitle>{t("leave-comment")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{status == "2"
|
||||
? files?.map((file, index) => (
|
||||
|
|
@ -725,7 +728,7 @@ export default function FormAudioDetail() {
|
|||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -870,7 +873,7 @@ export default function FormAudioDetail() {
|
|||
color="primary"
|
||||
onClick={() => submit()}
|
||||
>
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
|
|
@ -879,7 +882,7 @@ export default function FormAudioDetail() {
|
|||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
|
|||
import dynamic from "next/dynamic";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
preview: string;
|
||||
|
|
@ -88,6 +89,7 @@ export default function FormAudio() {
|
|||
const scheduleType = Cookies.get("scheduleType");
|
||||
const roleId = getCookiesDecrypt("urie");
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
|
|
@ -708,11 +710,11 @@ export default function FormAudio() {
|
|||
<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">Form Konten Audio</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -732,8 +734,8 @@ export default function FormAudio() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={selectedCategory} // Ensure selectedTarget is updated correctly
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -758,7 +760,7 @@ export default function FormAudio() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3 py-2">
|
||||
<Label>Bantuan AI</Label>
|
||||
<Label>{t("ai-assistance")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
defaultChecked={isSwitchOn}
|
||||
|
|
@ -774,7 +776,7 @@ export default function FormAudio() {
|
|||
<div>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Bahasa</Label>
|
||||
<Label>{t("language")}</Label>
|
||||
<Select onValueChange={setSelectedLanguage}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -786,7 +788,7 @@ export default function FormAudio() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Writing Style</Label>
|
||||
<Label>{t("writing-style")}</Label>
|
||||
<Select onValueChange={setSelectedWritingStyle}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -805,7 +807,7 @@ export default function FormAudio() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Article Size</Label>
|
||||
<Label>{t("article-size")}</Label>
|
||||
<Select onValueChange={setSelectedSize}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -826,7 +828,7 @@ export default function FormAudio() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Main Keyword</Label>
|
||||
<Label>{t("main-keyword")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -850,7 +852,7 @@ export default function FormAudio() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -872,7 +874,7 @@ export default function FormAudio() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>SEO</Label>
|
||||
<Label>{t("seo")}</Label>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
|
|
@ -883,15 +885,9 @@ export default function FormAudio() {
|
|||
</Button>
|
||||
</div>
|
||||
<p className="font-semibold">
|
||||
Kata kunci untuk disertakan dalam teks
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
JIka Anda tidak Memberikan kata kunci, kami akan secara
|
||||
otomatis membuat kata kunci yang relevan dari kata kunci
|
||||
utama untuk setiap bagian dan menggunakannya untuk membuat
|
||||
artikel. Untuk menambahkan kata kunci baru, ketik ',
|
||||
+ kata kunci'.
|
||||
{t("Keywords to include in the text")}
|
||||
</p>
|
||||
<p className="text-sm">{t("title-key")}</p>
|
||||
<div className="mt-3">
|
||||
<Textarea
|
||||
value={selectedSEO}
|
||||
|
|
@ -901,7 +897,7 @@ export default function FormAudio() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Label>Instruksi Khusus (Optional)</Label>
|
||||
<Label>{t("special-instructions")} (Optional)</Label>
|
||||
<div className="mt-3">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -959,7 +955,7 @@ export default function FormAudio() {
|
|||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Edit
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -968,8 +964,8 @@ export default function FormAudio() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -992,8 +988,8 @@ export default function FormAudio() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -1006,11 +1002,10 @@ export default function FormAudio() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan mp3 atau wav Ukuran maksimal
|
||||
100mb.)
|
||||
{t("upload-file-audio-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1028,7 +1023,7 @@ export default function FormAudio() {
|
|||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
{t("remove-all")}
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
@ -1042,7 +1037,7 @@ export default function FormAudio() {
|
|||
<Card className=" h-[500px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -1063,8 +1058,8 @@ export default function FormAudio() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<Label htmlFor="tags">Tags</Label>
|
||||
<div className="px-3 py-3 space-y-2">
|
||||
<Label htmlFor="tags">{t("tags")}</Label>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
|
|
@ -1092,8 +1087,8 @@ export default function FormAudio() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-3 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -1116,12 +1111,12 @@ export default function FormAudio() {
|
|||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
|||
import { error } from "@/lib/swal";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const audioSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -108,6 +109,7 @@ export default function FormAudioUpdate() {
|
|||
const scheduleId = Cookies.get("scheduleId");
|
||||
const scheduleType = Cookies.get("scheduleType");
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
|
|
@ -590,11 +592,11 @@ 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">Form Konten Audio</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-audio")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -615,8 +617,8 @@ export default function FormAudioUpdate() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -638,8 +640,8 @@ export default function FormAudioUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -658,8 +660,8 @@ export default function FormAudioUpdate() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -672,11 +674,10 @@ export default function FormAudioUpdate() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .jpg, .jpeg, atau .png.
|
||||
Ukuran maksimal 100mb.)
|
||||
{t("upload-file-audio-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -685,7 +686,7 @@ export default function FormAudioUpdate() {
|
|||
<div>{fileList}</div>
|
||||
<div className=" flex justify-between gap-2">
|
||||
<div className="flex flex-row items-center gap-3 py-3">
|
||||
<Label>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -701,7 +702,10 @@ export default function FormAudioUpdate() {
|
|||
) : null}
|
||||
{files.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<Label className="text-lg font-semibold">File</Label>
|
||||
<Label className="text-lg font-semibold">
|
||||
{" "}
|
||||
{t("file-media")}
|
||||
</Label>
|
||||
<div className="grid gap-4">
|
||||
{files.map((file: any) => (
|
||||
<div
|
||||
|
|
@ -722,7 +726,7 @@ export default function FormAudioUpdate() {
|
|||
rel="noopener noreferrer"
|
||||
className="text-blue-500 text-sm"
|
||||
>
|
||||
Lihat File
|
||||
{t("view-file")}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -740,7 +744,7 @@ export default function FormAudioUpdate() {
|
|||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Semua</span>
|
||||
<span>{t("all")}</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -812,7 +816,7 @@ export default function FormAudioUpdate() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -835,7 +839,7 @@ export default function FormAudioUpdate() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
|
|
@ -869,8 +873,8 @@ export default function FormAudioUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option: Option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -890,22 +894,22 @@ export default function FormAudioUpdate() {
|
|||
</div>
|
||||
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||
<MailIcon />
|
||||
<p className="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
{/* <p>{detail?.status}</p> */}
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
|||
import { error } from "@/lib/swal";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -119,6 +120,7 @@ export default function FormImageDetail() {
|
|||
const editor = useRef(null);
|
||||
type ImageSchema = z.infer<typeof imageSchema>;
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
const taskId = Cookies.get("taskId");
|
||||
const scheduleId = Cookies.get("scheduleId");
|
||||
|
|
@ -418,11 +420,11 @@ export default function FormImageDetail() {
|
|||
<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">Form Konten Foto</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-image")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")} </Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -443,8 +445,8 @@ export default function FormImageDetail() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={detail?.category.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -466,8 +468,8 @@ export default function FormImageDetail() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -481,46 +483,47 @@ export default function FormImageDetail() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Label className="text-xl text-black">File Media</Label>
|
||||
<div className="w-full ">
|
||||
<Swiper
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<img
|
||||
className="object-fill h-full w-full rounded-md"
|
||||
src={data}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className=" mt-2 ">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xl ">{t("file-media")}</Label>
|
||||
<div className="w-full ">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={6}
|
||||
spaceBetween={8}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
}}
|
||||
modules={[Pagination, Thumbs]}
|
||||
// className="mySwiper2"
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<img
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
className="object-fill h-full w-full rounded-md"
|
||||
src={data}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className=" mt-2 ">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={6}
|
||||
spaceBetween={8}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
}}
|
||||
modules={[Pagination, Thumbs]}
|
||||
// className="mySwiper2"
|
||||
>
|
||||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<img
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
src={data}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -530,7 +533,7 @@ export default function FormImageDetail() {
|
|||
<Card className=" h-[1050px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -551,8 +554,8 @@ export default function FormImageDetail() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-3">
|
||||
<Label>Pratinjau Gambar Utama</Label>
|
||||
<div className="mt-3 px-3 space-y-2">
|
||||
<Label>{t("preview")}</Label>
|
||||
<Card className="mt-2">
|
||||
<img
|
||||
src={detail.thumbnailLink}
|
||||
|
|
@ -563,7 +566,7 @@ export default function FormImageDetail() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail?.tags
|
||||
?.split(",")
|
||||
|
|
@ -579,8 +582,8 @@ export default function FormImageDetail() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
id="5"
|
||||
|
|
@ -617,10 +620,10 @@ export default function FormImageDetail() {
|
|||
</div>
|
||||
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||
<MailIcon />
|
||||
<p className="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3 border mx-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
<p className="text-sm text-slate-400">{detail?.statusName}</p>
|
||||
</div>
|
||||
{/* {detail?.isPublish == false ? (
|
||||
|
|
@ -672,14 +675,16 @@ export default function FormImageDetail() {
|
|||
color="primary"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:check" className="mr-3" /> Setujui
|
||||
<Icon icon="fa:check" className="mr-3" />
|
||||
{t("accept")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("3")}
|
||||
className="bg-orange-400 hover:bg-orange-300"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:comment-o" className="mr-3" /> Revisi
|
||||
<Icon icon="fa:comment-o" className="mr-3" />{" "}
|
||||
{t("revision")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("4")}
|
||||
|
|
@ -687,7 +692,7 @@ export default function FormImageDetail() {
|
|||
type="button"
|
||||
>
|
||||
<Icon icon="fa:times" className="mr-3" />
|
||||
Tolak
|
||||
{t("reject")}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -698,7 +703,7 @@ export default function FormImageDetail() {
|
|||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Berikan Komentar</DialogTitle>
|
||||
<DialogTitle>{t("leave-comment")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{status == "2"
|
||||
? files?.map((file, index) => (
|
||||
|
|
@ -735,7 +740,7 @@ export default function FormImageDetail() {
|
|||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -880,7 +885,7 @@ export default function FormImageDetail() {
|
|||
color="primary"
|
||||
onClick={() => submit()}
|
||||
>
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
|
|
@ -889,7 +894,7 @@ export default function FormImageDetail() {
|
|||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ import dynamic from "next/dynamic";
|
|||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { request } from "http";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
preview: string;
|
||||
|
|
@ -85,6 +86,7 @@ export default function FormImage() {
|
|||
const editor = useRef(null);
|
||||
type ImageSchema = z.infer<typeof imageSchema>;
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
const taskId = Cookies.get("taskId");
|
||||
const scheduleId = Cookies.get("scheduleId");
|
||||
|
|
@ -714,11 +716,11 @@ export default function FormImage() {
|
|||
<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">Form Konten Foto</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-image")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -738,8 +740,8 @@ export default function FormImage() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 space-y-2 w-full">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={selectedCategory} // Ensure selectedTarget is updated correctly
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -763,8 +765,8 @@ export default function FormImage() {
|
|||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3 py-2">
|
||||
<Label>Bantuan AI</Label>
|
||||
<div className="flex flex-row items-center gap-3 py-3 ">
|
||||
<Label>{t("ai-assistance")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
defaultChecked={isSwitchOn}
|
||||
|
|
@ -780,7 +782,7 @@ export default function FormImage() {
|
|||
<div>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Bahasa</Label>
|
||||
<Label>{t("language")}</Label>
|
||||
<Select onValueChange={setSelectedLanguage}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -792,7 +794,7 @@ export default function FormImage() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Writing Style</Label>
|
||||
<Label>{t("writing-style")}</Label>
|
||||
<Select onValueChange={setSelectedWritingStyle}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -811,7 +813,7 @@ export default function FormImage() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Article Size</Label>
|
||||
<Label>{t("article-size")}</Label>
|
||||
<Select onValueChange={setSelectedSize}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -832,7 +834,7 @@ export default function FormImage() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Main Keyword</Label>
|
||||
<Label>{t("main-keyword")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -856,7 +858,7 @@ export default function FormImage() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -878,7 +880,7 @@ export default function FormImage() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>SEO</Label>
|
||||
<Label>{t("seo")}</Label>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
|
|
@ -889,15 +891,9 @@ export default function FormImage() {
|
|||
</Button>
|
||||
</div>
|
||||
<p className="font-semibold">
|
||||
Kata kunci untuk disertakan dalam teks
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
JIka Anda tidak Memberikan kata kunci, kami akan secara
|
||||
otomatis membuat kata kunci yang relevan dari kata kunci
|
||||
utama untuk setiap bagian dan menggunakannya untuk membuat
|
||||
artikel. Untuk menambahkan kata kunci baru, ketik ',
|
||||
+ kata kunci'.
|
||||
{t("Keywords to include in the text")}
|
||||
</p>
|
||||
<p className="text-sm">{t("title-key")}</p>
|
||||
<div className="mt-3">
|
||||
<Textarea
|
||||
value={selectedSEO}
|
||||
|
|
@ -907,7 +903,7 @@ export default function FormImage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Label>Instruksi Khusus (Optional)</Label>
|
||||
<Label>{t("special-instructions")}(Optional)</Label>
|
||||
<div className="mt-3">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -964,7 +960,7 @@ export default function FormImage() {
|
|||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Edit
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -973,8 +969,8 @@ export default function FormImage() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -997,8 +993,8 @@ export default function FormImage() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -1011,11 +1007,10 @@ export default function FormImage() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .jpg, .jpeg, atau .png.
|
||||
Ukuran maksimal 100mb.)
|
||||
{t("upload-file-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1024,7 +1019,7 @@ export default function FormImage() {
|
|||
<div>{fileList}</div>
|
||||
<div className=" flex justify-between gap-2">
|
||||
<div className="flex flex-row items-center gap-3 py-3">
|
||||
<Label>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -1033,7 +1028,7 @@ export default function FormImage() {
|
|||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
{t("remove-all")}
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
@ -1049,7 +1044,7 @@ export default function FormImage() {
|
|||
<Card className=" h-[500px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -1070,9 +1065,8 @@ export default function FormImage() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<Label htmlFor="tags">Tags</Label>
|
||||
|
||||
<div className="px-3 py-3 space-y-2">
|
||||
<Label htmlFor="tags">{t("tags")}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
|
|
@ -1099,8 +1093,8 @@ export default function FormImage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-3 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -1123,13 +1117,15 @@ export default function FormImage() {
|
|||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Link href={"/contributor/content/image"}>
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ import Image from "next/image";
|
|||
import { error, loading } from "@/lib/swal";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -114,7 +115,7 @@ export default function FormImageUpdate() {
|
|||
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");
|
||||
|
|
@ -628,11 +629,11 @@ 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">Form Konten Foto</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-image")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -653,8 +654,8 @@ export default function FormImageUpdate() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -679,8 +680,8 @@ export default function FormImageUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -697,8 +698,8 @@ export default function FormImageUpdate() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -711,11 +712,10 @@ export default function FormImageUpdate() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .jpg, .jpeg, atau .png.
|
||||
Ukuran maksimal 100mb.)
|
||||
{t("upload-file-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -724,7 +724,7 @@ 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>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -740,7 +740,10 @@ export default function FormImageUpdate() {
|
|||
) : null}
|
||||
{files.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<Label className="text-lg font-semibold">File</Label>
|
||||
<Label className="text-lg font-semibold">
|
||||
{" "}
|
||||
{t("file-media")}
|
||||
</Label>
|
||||
<div className="grid gap-4">
|
||||
{files.map((file: any) => (
|
||||
<div
|
||||
|
|
@ -761,7 +764,7 @@ export default function FormImageUpdate() {
|
|||
rel="noopener noreferrer"
|
||||
className="text-blue-500 text-sm"
|
||||
>
|
||||
Lihat File
|
||||
{t("view-file")}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -779,7 +782,7 @@ export default function FormImageUpdate() {
|
|||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Semua</span>
|
||||
<span>{t("all")}</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -851,7 +854,7 @@ export default function FormImageUpdate() {
|
|||
<Card className="h-[900px] md:h-[1100px] lg:h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -872,8 +875,8 @@ export default function FormImageUpdate() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-3">
|
||||
<Label>Pratinjau Gambar Utama</Label>
|
||||
<div className="mt-3 px-3 space-y-2">
|
||||
<Label>{t("preview")}</Label>
|
||||
<Card className="mt-2">
|
||||
<img
|
||||
src={detail.thumbnailLink}
|
||||
|
|
@ -884,7 +887,7 @@ export default function FormImageUpdate() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
|
|
@ -928,8 +931,8 @@ export default function FormImageUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option: Option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -949,22 +952,22 @@ 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="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
{/* <p>{detail?.status}</p> */}
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
|
|||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import dynamic from "next/dynamic";
|
||||
import { error } from "@/lib/swal";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const imageSchema = z.object({
|
||||
contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -144,6 +145,7 @@ export default function FormConvertSPIT() {
|
|||
const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const t = useTranslations("Form");
|
||||
const [detailData, setDetailData] = useState<any>(null);
|
||||
const [selectedFileType, setSelectedFileType] = useState("original");
|
||||
const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
|
||||
|
|
@ -616,11 +618,11 @@ export default function FormConvertSPIT() {
|
|||
<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">Form Konten Foto</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-spit")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="contentTitle"
|
||||
|
|
@ -641,8 +643,8 @@ export default function FormConvertSPIT() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
defaultValue={detail?.content?.name}
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -678,8 +680,8 @@ export default function FormConvertSPIT() {
|
|||
Select Original File
|
||||
</Label>
|
||||
</div>
|
||||
<div className="py-3 ">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="contentDescription"
|
||||
|
|
@ -733,11 +735,11 @@ export default function FormConvertSPIT() {
|
|||
<div className="flex items-center space-x-2 mt-3">
|
||||
<RadioGroupItem value="rewrite" id="rewrite-file" />
|
||||
<Label htmlFor="rewrite-file">
|
||||
Select File Hasil Rewrite
|
||||
Select File Rewrite
|
||||
</Label>
|
||||
</div>
|
||||
<div className="py-3 ">
|
||||
<Label>File hasil Rewrite</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("file-rewrite")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="contentRewriteDescription"
|
||||
|
|
@ -766,8 +768,8 @@ export default function FormConvertSPIT() {
|
|||
)}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xl">File Media</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xl">{t("file-media")}</Label>
|
||||
<div className="w-full ">
|
||||
<Swiper
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
|
|
@ -810,7 +812,7 @@ export default function FormConvertSPIT() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<Label className="text-xl">Penempatan file</Label>
|
||||
<Label className="text-xl">{t("file-placement")}</Label>
|
||||
</div>
|
||||
{files?.length > 1 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2 justify-center">
|
||||
|
|
@ -825,7 +827,7 @@ export default function FormConvertSPIT() {
|
|||
htmlFor="all-content"
|
||||
className="text-xs font-medium"
|
||||
>
|
||||
All
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -839,7 +841,7 @@ export default function FormConvertSPIT() {
|
|||
htmlFor="all-nasional"
|
||||
className="text-xs font-medium"
|
||||
>
|
||||
All Nasional
|
||||
{t("all")} Nasional
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -853,7 +855,7 @@ export default function FormConvertSPIT() {
|
|||
htmlFor="all-wilayah"
|
||||
className="text-xs font-medium"
|
||||
>
|
||||
All Wilayah
|
||||
{t("all")} Wilayah
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -867,7 +869,7 @@ export default function FormConvertSPIT() {
|
|||
htmlFor="all-international"
|
||||
className="text-xs font-medium"
|
||||
>
|
||||
All Internasional
|
||||
{t("all")} Internasional
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -899,7 +901,7 @@ export default function FormConvertSPIT() {
|
|||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -961,7 +963,7 @@ export default function FormConvertSPIT() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="contentCreator"
|
||||
|
|
@ -983,7 +985,7 @@ export default function FormConvertSPIT() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-3">
|
||||
<Label>Pratinjau Gambar Utama</Label>
|
||||
<Label>{t("preview")}</Label>
|
||||
<Card className="mt-2">
|
||||
<img
|
||||
src={detail.contentThumbnail}
|
||||
|
|
@ -994,7 +996,7 @@ export default function FormConvertSPIT() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail?.contentTag
|
||||
?.split(",")
|
||||
|
|
@ -1010,8 +1012,8 @@ export default function FormConvertSPIT() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-3 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -1032,17 +1034,17 @@ export default function FormConvertSPIT() {
|
|||
</div>
|
||||
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||
<MailIcon />
|
||||
<p className="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
{/* <p>{detail?.status}</p> */}
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
|
|
@ -1051,7 +1053,7 @@ export default function FormConvertSPIT() {
|
|||
className="bg-red-500 hover:bg-red-700"
|
||||
onClick={() => deleteSpitContent()}
|
||||
>
|
||||
Delete
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
|
|||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { error } from "@/lib/swal";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -133,6 +134,7 @@ export default function FormTeksDetail() {
|
|||
const [detailThumb, setDetailThumb] = useState<any>([]);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [files, setFiles] = useState<FileType[]>([]);
|
||||
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
|
||||
|
|
@ -421,13 +423,11 @@ export default function FormTeksDetail() {
|
|||
<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">
|
||||
Form detail Konten Teks
|
||||
</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-text")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -448,8 +448,8 @@ export default function FormTeksDetail() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={detail?.category.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -471,8 +471,8 @@ export default function FormTeksDetail() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -486,81 +486,85 @@ export default function FormTeksDetail() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Label className="text-xl text-black">File Media</Label>
|
||||
<div className="w-full">
|
||||
<Swiper
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailThumb?.map((data: any, index: number) => (
|
||||
<SwiperSlide key={index}>
|
||||
{[".jpg", ".jpeg", ".png", ".webp"].includes(
|
||||
data.format
|
||||
) ? (
|
||||
// Menampilkan gambar
|
||||
<img
|
||||
className="object-fill h-full w-full rounded-md"
|
||||
src={data.url}
|
||||
alt={data.fileName || "File"}
|
||||
/>
|
||||
) : data.format === ".pdf" ? (
|
||||
// Menampilkan PDF menggunakan iframe
|
||||
<iframe
|
||||
className="w-full h-96 rounded-md"
|
||||
src={data.url}
|
||||
title={data.fileName || "PDF File"}
|
||||
/>
|
||||
) : [".docx", ".ppt", ".pptx"].includes(data.format) ? (
|
||||
// Menampilkan file dokumen menggunakan Office Viewer
|
||||
<iframe
|
||||
className="w-full h-96 rounded-md"
|
||||
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
|
||||
data.url
|
||||
)}`}
|
||||
title={data.fileName || "Document"}
|
||||
/>
|
||||
) : (
|
||||
// Menampilkan link jika format tidak dikenali
|
||||
<a
|
||||
href={data.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block text-blue-500 underline"
|
||||
>
|
||||
View {data.fileName || "File"}
|
||||
</a>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className="mt-2 ">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xl">{t("file-media")} </Label>
|
||||
<div className="w-full">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={8}
|
||||
spaceBetween={8}
|
||||
pagination={{ clickable: true }}
|
||||
modules={[Pagination, Thumbs]}
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailThumb?.map((data: any, index: number) => (
|
||||
<SwiperSlide key={index}>
|
||||
{[".jpg", ".jpeg", ".png", ".webp"].includes(
|
||||
data.format
|
||||
) ? (
|
||||
// Menampilkan gambar
|
||||
<img
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
className="object-fill h-full w-full rounded-md"
|
||||
src={data.url}
|
||||
alt={data.fileName}
|
||||
alt={data.fileName || "File"}
|
||||
/>
|
||||
) : data.format === ".pdf" ? (
|
||||
// Menampilkan PDF menggunakan iframe
|
||||
<iframe
|
||||
className="w-full h-96 rounded-md"
|
||||
src={data.url}
|
||||
title={data.fileName || "PDF File"}
|
||||
/>
|
||||
) : [".docx", ".ppt", ".pptx"].includes(
|
||||
data.format
|
||||
) ? (
|
||||
// Menampilkan file dokumen menggunakan Office Viewer
|
||||
<iframe
|
||||
className="w-full h-96 rounded-md"
|
||||
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
|
||||
data.url
|
||||
)}`}
|
||||
title={data.fileName || "Document"}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-[60px] w-[80px] flex items-center justify-center bg-gray-200 text-sm text-center text-gray-700 rounded-md">
|
||||
{data?.format?.replace(".", "").toUpperCase()}
|
||||
</div>
|
||||
// Menampilkan link jika format tidak dikenali
|
||||
<a
|
||||
href={data.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block text-blue-500 underline"
|
||||
>
|
||||
View {data.fileName || "File"}
|
||||
</a>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className="mt-2 ">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={8}
|
||||
spaceBetween={8}
|
||||
pagination={{ clickable: true }}
|
||||
modules={[Pagination, Thumbs]}
|
||||
>
|
||||
{detailThumb?.map((data: any, index: number) => (
|
||||
<SwiperSlide key={index}>
|
||||
{[".jpg", ".jpeg", ".png", ".webp"].includes(
|
||||
data.format
|
||||
) ? (
|
||||
<img
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
src={data.url}
|
||||
alt={data.fileName}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-[60px] w-[80px] flex items-center justify-center bg-gray-200 text-sm text-center text-gray-700 rounded-md">
|
||||
{data?.format?.replace(".", "").toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -570,7 +574,7 @@ export default function FormTeksDetail() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -603,7 +607,7 @@ export default function FormTeksDetail() {
|
|||
</div> */}
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail?.tags
|
||||
?.split(",")
|
||||
|
|
@ -619,8 +623,8 @@ export default function FormTeksDetail() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
id="5"
|
||||
|
|
@ -657,10 +661,10 @@ export default function FormTeksDetail() {
|
|||
</div>
|
||||
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||
<MailIcon />
|
||||
<p className="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3 border mx-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
<p className="text-sm text-slate-400">{detail?.statusName}</p>
|
||||
</div>
|
||||
{/* {detail?.isPublish == false ? (
|
||||
|
|
@ -680,14 +684,15 @@ export default function FormTeksDetail() {
|
|||
color="primary"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:check" className="mr-3" /> Setujui
|
||||
<Icon icon="fa:check" className="mr-3" /> {t("accept")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("3")}
|
||||
className="bg-orange-400 hover:bg-orange-300"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:comment-o" className="mr-3" /> Revisi
|
||||
<Icon icon="fa:comment-o" className="mr-3" />{" "}
|
||||
{t("revision")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("4")}
|
||||
|
|
@ -695,7 +700,7 @@ export default function FormTeksDetail() {
|
|||
type="button"
|
||||
>
|
||||
<Icon icon="fa:times" className="mr-3" />
|
||||
Tolak
|
||||
{t("reject")}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -706,7 +711,7 @@ export default function FormTeksDetail() {
|
|||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Berikan Komentar</DialogTitle>
|
||||
<DialogTitle>{t("leave-comment")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{status == "2"
|
||||
? files?.map((file, index) => (
|
||||
|
|
@ -743,7 +748,7 @@ export default function FormTeksDetail() {
|
|||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -888,7 +893,7 @@ export default function FormTeksDetail() {
|
|||
color="primary"
|
||||
onClick={() => submit()}
|
||||
>
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
|
|
@ -897,7 +902,7 @@ export default function FormTeksDetail() {
|
|||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
|
|||
import dynamic from "next/dynamic";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface FileWithPreview extends File {
|
||||
preview: string;
|
||||
|
|
@ -115,7 +116,7 @@ export default function FormTeks() {
|
|||
const [articleImages, setArticleImages] = useState<string[]>([]);
|
||||
const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
allUnit: false,
|
||||
|
|
@ -707,11 +708,11 @@ export default function FormTeks() {
|
|||
<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">Form Konten Teks</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-text")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -731,8 +732,8 @@ export default function FormTeks() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={selectedCategory} // Ensure selectedTarget is updated correctly
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -757,7 +758,7 @@ export default function FormTeks() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3 py-2">
|
||||
<Label>Bantuan AI</Label>
|
||||
<Label>{t("ai-assistance")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
defaultChecked={isSwitchOn}
|
||||
|
|
@ -773,7 +774,7 @@ export default function FormTeks() {
|
|||
<div>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Bahasa</Label>
|
||||
<Label>{t("language")}</Label>
|
||||
<Select onValueChange={setSelectedLanguage}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -785,7 +786,7 @@ export default function FormTeks() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Writing Style</Label>
|
||||
<Label>{t("writing-style")}</Label>
|
||||
<Select onValueChange={setSelectedWritingStyle}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -804,7 +805,7 @@ export default function FormTeks() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Article Size</Label>
|
||||
<Label>{t("article-size")}</Label>
|
||||
<Select onValueChange={setSelectedSize}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -825,7 +826,7 @@ export default function FormTeks() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Main Keyword</Label>
|
||||
<Label>{t("main-keyword")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -849,7 +850,7 @@ export default function FormTeks() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -871,7 +872,7 @@ export default function FormTeks() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>SEO</Label>
|
||||
<Label>{t("seo")}</Label>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
|
|
@ -882,15 +883,9 @@ export default function FormTeks() {
|
|||
</Button>
|
||||
</div>
|
||||
<p className="font-semibold">
|
||||
Kata kunci untuk disertakan dalam teks
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
JIka Anda tidak Memberikan kata kunci, kami akan secara
|
||||
otomatis membuat kata kunci yang relevan dari kata kunci
|
||||
utama untuk setiap bagian dan menggunakannya untuk membuat
|
||||
artikel. Untuk menambahkan kata kunci baru, ketik ',
|
||||
+ kata kunci'.
|
||||
{t("Keywords to include in the text")}
|
||||
</p>
|
||||
<p className="text-sm">{t("title-key")}</p>
|
||||
<div className="mt-3">
|
||||
<Textarea
|
||||
value={selectedSEO}
|
||||
|
|
@ -900,7 +895,7 @@ export default function FormTeks() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Label>Instruksi Khusus (Optional)</Label>
|
||||
<Label>{t("special-instructions")} (Optional)</Label>
|
||||
<div className="mt-3">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -957,7 +952,7 @@ export default function FormTeks() {
|
|||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Edit
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -966,8 +961,8 @@ export default function FormTeks() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -990,8 +985,8 @@ export default function FormTeks() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -1004,11 +999,10 @@ export default function FormTeks() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .doc, .docx, .pdf, .ppt,
|
||||
atau .pptx Ukuran maksimal 100mb.)
|
||||
{t("upload-file-text-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1017,7 +1011,7 @@ export default function FormTeks() {
|
|||
<div>{fileList}</div>
|
||||
<div className=" flex justify-between gap-2">
|
||||
<div className="flex flex-row items-center gap-3 py-3">
|
||||
<Label>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -1026,7 +1020,7 @@ export default function FormTeks() {
|
|||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
{t("remove-all")}
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
@ -1042,7 +1036,7 @@ export default function FormTeks() {
|
|||
<Card className=" h-[500px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -1063,8 +1057,8 @@ export default function FormTeks() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<Label htmlFor="tags">Tags</Label>
|
||||
<div className="px-3 py-3 space-y-2">
|
||||
<Label htmlFor="tags">{t("tags")}</Label>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
|
|
@ -1092,8 +1086,8 @@ export default function FormTeks() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-3 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -1116,12 +1110,12 @@ export default function FormTeks() {
|
|||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ import Image from "next/image";
|
|||
import { error, loading } from "@/lib/swal";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const teksSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -108,6 +109,7 @@ export default function FormTeksUpdate() {
|
|||
const scheduleId = Cookies.get("scheduleId");
|
||||
const scheduleType = Cookies.get("scheduleType");
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
|
|
@ -555,13 +557,11 @@ 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">
|
||||
Form Update Konten Teks
|
||||
</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-text")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -582,8 +582,8 @@ export default function FormTeksUpdate() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -604,8 +604,8 @@ export default function FormTeksUpdate() {
|
|||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -624,8 +624,8 @@ export default function FormTeksUpdate() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -638,11 +638,10 @@ export default function FormTeksUpdate() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .doc, .docx, .pdf, .ppt,
|
||||
atau .pptx Ukuran maksimal 100mb.)
|
||||
{t("upload-file-text-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -651,7 +650,7 @@ 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>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -660,14 +659,17 @@ export default function FormTeksUpdate() {
|
|||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
{t("remove-all")}
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : null}
|
||||
{files.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<Label className="text-lg font-semibold">File</Label>
|
||||
<div className="mt-4 space-y-2">
|
||||
<Label className="text-lg font-semibold">
|
||||
{" "}
|
||||
{t("file-media")}
|
||||
</Label>
|
||||
<div className="grid gap-4">
|
||||
{files.map((file: any) => (
|
||||
<div
|
||||
|
|
@ -688,7 +690,7 @@ export default function FormTeksUpdate() {
|
|||
rel="noopener noreferrer"
|
||||
className="text-blue-500 text-sm"
|
||||
>
|
||||
Lihat File
|
||||
{t("view-file")}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -706,7 +708,7 @@ export default function FormTeksUpdate() {
|
|||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Semua</span>
|
||||
<span>{t("all")}</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -778,7 +780,7 @@ export default function FormTeksUpdate() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -811,7 +813,7 @@ export default function FormTeksUpdate() {
|
|||
</div> */}
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
|
|
@ -846,7 +848,7 @@ export default function FormTeksUpdate() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -867,22 +869,22 @@ 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="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
{/* <p>{detail?.status}</p> */}
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
|||
import { error } from "@/lib/swal";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -135,6 +136,7 @@ export default function FormVideoDetail() {
|
|||
const [detailVideo, setDetailVideo] = useState<any>([]);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [filePlacements, setFilePlacements] = useState<string[][]>([]);
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [files, setFiles] = useState<FileType[]>([]);
|
||||
|
|
@ -412,13 +414,11 @@ 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">
|
||||
Form Detail Konten Video
|
||||
</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-video")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -439,8 +439,8 @@ export default function FormVideoDetail() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={detail?.category.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -462,8 +462,8 @@ export default function FormVideoDetail() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -477,48 +477,49 @@ export default function FormVideoDetail() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Label className="text-xl text-black">File Mediaa</Label>
|
||||
<div className="w-full ">
|
||||
<Swiper
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailVideo?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<video
|
||||
className="object-fill h-full w-full"
|
||||
src={data}
|
||||
controls
|
||||
title={`Video ${data.id}`} // Mengganti alt dengan title
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className=" mt-2 ">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xl "> {t("file-media")}</Label>
|
||||
<div className="w-full ">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={6}
|
||||
spaceBetween={8}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
}}
|
||||
modules={[Pagination, Thumbs]}
|
||||
// className="mySwiper2"
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailVideo?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<video
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
className="object-fill h-full w-full"
|
||||
src={data}
|
||||
muted
|
||||
controls
|
||||
title={`Video ${data.id}`} // Mengganti alt dengan title
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className=" mt-2 ">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={6}
|
||||
spaceBetween={8}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
}}
|
||||
modules={[Pagination, Thumbs]}
|
||||
// className="mySwiper2"
|
||||
>
|
||||
{detailVideo?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<video
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
src={data}
|
||||
muted
|
||||
title={`Video ${data.id}`} // Mengganti alt dengan title
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -528,7 +529,7 @@ export default function FormVideoDetail() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -549,8 +550,8 @@ export default function FormVideoDetail() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-3">
|
||||
<Label>Pratinjau Gambar Utama</Label>
|
||||
<div className="mt-3 px-3 space-y-2">
|
||||
<Label>{t("preview")}</Label>
|
||||
<Card className="mt-2">
|
||||
<img
|
||||
src={detail.thumbnailLink}
|
||||
|
|
@ -561,7 +562,7 @@ export default function FormVideoDetail() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail?.tags
|
||||
?.split(",")
|
||||
|
|
@ -577,8 +578,8 @@ export default function FormVideoDetail() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
id="5"
|
||||
|
|
@ -615,10 +616,10 @@ export default function FormVideoDetail() {
|
|||
</div>
|
||||
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||
<MailIcon />
|
||||
<p className="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3 border mx-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
<p className="text-sm text-slate-400">{detail?.statusName}</p>
|
||||
</div>
|
||||
{/* {detail?.isPublish == false ? (
|
||||
|
|
@ -638,14 +639,15 @@ export default function FormVideoDetail() {
|
|||
color="primary"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:check" className="mr-3" /> Setujui
|
||||
<Icon icon="fa:check" className="mr-3" /> {t("accept")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("3")}
|
||||
className="bg-orange-400 hover:bg-orange-300"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:comment-o" className="mr-3" /> Revisi
|
||||
<Icon icon="fa:comment-o" className="mr-3" />{" "}
|
||||
{t("revision")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("4")}
|
||||
|
|
@ -653,7 +655,7 @@ export default function FormVideoDetail() {
|
|||
type="button"
|
||||
>
|
||||
<Icon icon="fa:times" className="mr-3" />
|
||||
Tolak
|
||||
{t("reject")}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -664,7 +666,7 @@ export default function FormVideoDetail() {
|
|||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Berikan Komentar</DialogTitle>
|
||||
<DialogTitle>{t("leave-comment")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{status == "2"
|
||||
? files?.map((file, index) => (
|
||||
|
|
@ -701,7 +703,7 @@ export default function FormVideoDetail() {
|
|||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
|
|
@ -846,14 +848,14 @@ export default function FormVideoDetail() {
|
|||
color="primary"
|
||||
onClick={() => submit()}
|
||||
>
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
color="destructive"
|
||||
onClick={() => setModalOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
|
|||
import dynamic from "next/dynamic";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const CustomEditor = dynamic(
|
||||
() => {
|
||||
|
|
@ -88,6 +89,7 @@ export default function FormVideo() {
|
|||
const scheduleType = Cookies.get("scheduleType");
|
||||
const roleId = getCookiesDecrypt("urie");
|
||||
|
||||
const t = useTranslations("Form");
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
|
|
@ -706,10 +708,10 @@ export default function FormVideo() {
|
|||
<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">Form Konten Video</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-video")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -729,8 +731,8 @@ export default function FormVideo() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
value={selectedCategory} // Ensure selectedTarget is updated correctly
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -755,7 +757,7 @@ export default function FormVideo() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3 py-2">
|
||||
<Label>Bantuan AI</Label>
|
||||
<Label>{t("ai-assistance")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
defaultChecked={isSwitchOn}
|
||||
|
|
@ -771,7 +773,7 @@ export default function FormVideo() {
|
|||
<div>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Bahasa</Label>
|
||||
<Label>{t("language")}</Label>
|
||||
<Select onValueChange={setSelectedLanguage}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -783,7 +785,7 @@ export default function FormVideo() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Writing Style</Label>
|
||||
<Label>{t("writing-style")}</Label>
|
||||
<Select onValueChange={setSelectedWritingStyle}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -802,7 +804,7 @@ export default function FormVideo() {
|
|||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Article Size</Label>
|
||||
<Label>{t("article-size")}</Label>
|
||||
<Select onValueChange={setSelectedSize}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
|
|
@ -823,7 +825,7 @@ export default function FormVideo() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Main Keyword</Label>
|
||||
<Label>{t("main-keyword")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -847,7 +849,7 @@ export default function FormVideo() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="primary"
|
||||
|
|
@ -869,7 +871,7 @@ export default function FormVideo() {
|
|||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="flex flex-row items-center gap-3 mb-3">
|
||||
<Label>SEO</Label>
|
||||
<Label>{t("seo")}</Label>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
|
|
@ -880,15 +882,9 @@ export default function FormVideo() {
|
|||
</Button>
|
||||
</div>
|
||||
<p className="font-semibold">
|
||||
Kata kunci untuk disertakan dalam teks
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
JIka Anda tidak Memberikan kata kunci, kami akan secara
|
||||
otomatis membuat kata kunci yang relevan dari kata kunci
|
||||
utama untuk setiap bagian dan menggunakannya untuk membuat
|
||||
artikel. Untuk menambahkan kata kunci baru, ketik ',
|
||||
+ kata kunci'.
|
||||
{t("Keywords to include in the text")}
|
||||
</p>
|
||||
<p className="text-sm">{t("title-key")}</p>
|
||||
<div className="mt-3">
|
||||
<Textarea
|
||||
value={selectedSEO}
|
||||
|
|
@ -898,7 +894,7 @@ export default function FormVideo() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Label>Instruksi Khusus (Optional)</Label>
|
||||
<Label>{t("special-instructions")} (Optional)</Label>
|
||||
<div className="mt-3">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -955,7 +951,7 @@ export default function FormVideo() {
|
|||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Edit
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -964,8 +960,8 @@ export default function FormVideo() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -988,8 +984,8 @@ export default function FormVideo() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -1002,11 +998,10 @@ export default function FormVideo() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan mp4 atau mov Ukuran maksimal
|
||||
100mb.)
|
||||
{t("upload-file-video-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1015,7 +1010,7 @@ export default function FormVideo() {
|
|||
<div>{fileList}</div>
|
||||
<div className=" flex justify-between gap-2">
|
||||
<div className="flex flex-row items-center gap-3 py-3">
|
||||
<Label>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -1024,7 +1019,7 @@ export default function FormVideo() {
|
|||
color="destructive"
|
||||
onClick={handleRemoveAllFiles}
|
||||
>
|
||||
Remove All
|
||||
{t("remove-all")}
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
@ -1040,7 +1035,7 @@ export default function FormVideo() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -1074,8 +1069,8 @@ export default function FormVideo() {
|
|||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="px-3 py-3">
|
||||
<Label htmlFor="tags">Tags</Label>
|
||||
<div className="px-3 py-3 space-y-2">
|
||||
<Label htmlFor="tags">{t("tags")}</Label>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
|
|
@ -1103,8 +1098,8 @@ export default function FormVideo() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-3 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -1127,12 +1122,12 @@ export default function FormVideo() {
|
|||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
|
|||
import { Upload } from "tus-js-client";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { error, loading } from "@/lib/swal";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const videoSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -110,6 +111,7 @@ export default function FormVideoUpdate() {
|
|||
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");
|
||||
|
|
@ -609,13 +611,11 @@ 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">
|
||||
Form Update Konten Video
|
||||
</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("form-video")}</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -636,8 +636,8 @@ export default function FormVideoUpdate() {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<div className="py-3 w-full space-y-2">
|
||||
<Label>{t("category")}</Label>
|
||||
<Select
|
||||
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
|
||||
onValueChange={(id) => {
|
||||
|
|
@ -659,8 +659,8 @@ export default function FormVideoUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("description")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -679,8 +679,8 @@ export default function FormVideoUpdate() {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Pilih File</Label>
|
||||
<div className="py-3 space-y-2">
|
||||
<Label>{t("select-file")}</Label>
|
||||
{/* <Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
|
|
@ -693,11 +693,10 @@ export default function FormVideoUpdate() {
|
|||
<CloudUpload className="text-default-300 w-10 h-10" />
|
||||
<h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
|
||||
{/* Drop files here or click to upload. */}
|
||||
Tarik file disini atau klik untuk upload.
|
||||
{t("drag-file")}
|
||||
</h4>
|
||||
<div className=" text-xs text-muted-foreground">
|
||||
( Upload file dengan format .jpg, .jpeg, atau .png.
|
||||
Ukuran maksimal 100mb.)
|
||||
{t("upload-file-video-max")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -706,7 +705,7 @@ 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>Gunakan Watermark</Label>
|
||||
<Label>{t("watermark")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
|
|
@ -721,8 +720,11 @@ export default function FormVideoUpdate() {
|
|||
</Fragment>
|
||||
) : null}
|
||||
{files.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<Label className="text-lg font-semibold">File</Label>
|
||||
<div className="mt-4 space-y-2">
|
||||
<Label className="text-lg font-semibold">
|
||||
{" "}
|
||||
{t("file-media")}
|
||||
</Label>
|
||||
<div className="grid gap-4">
|
||||
{files.map((file: any) => (
|
||||
<div
|
||||
|
|
@ -743,7 +745,7 @@ export default function FormVideoUpdate() {
|
|||
rel="noopener noreferrer"
|
||||
className="text-blue-500 text-sm"
|
||||
>
|
||||
Lihat File
|
||||
{t("view-file")}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -761,7 +763,7 @@ export default function FormVideoUpdate() {
|
|||
}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<span>Semua</span>
|
||||
<span>{t("all")}</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -833,7 +835,7 @@ export default function FormVideoUpdate() {
|
|||
<Card className=" h-[800px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Label>{t("creator")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
|
|
@ -854,8 +856,8 @@ export default function FormVideoUpdate() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-3">
|
||||
<Label>Pratinjau Gambar Utama</Label>
|
||||
<div className="mt-3 px-3 space-y-2">
|
||||
<Label>{t("preview")}</Label>
|
||||
<Card className="mt-2">
|
||||
<img
|
||||
src={detail.thumbnailLink}
|
||||
|
|
@ -866,7 +868,7 @@ export default function FormVideoUpdate() {
|
|||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<Label>{t("tags")}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="tags"
|
||||
|
|
@ -900,8 +902,8 @@ export default function FormVideoUpdate() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex flex-col gap-6 space-y-2">
|
||||
<Label>{t("publish-target")}</Label>
|
||||
{options.map((option: Option) => (
|
||||
<div key={option.id} className="flex gap-2 items-center">
|
||||
<Checkbox
|
||||
|
|
@ -921,22 +923,22 @@ 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="">Kotak Saran (0)</p>
|
||||
<p className="">{t("suggestion-box")} (0)</p>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<p>Keterangan:</p>
|
||||
<p>{t("information")}:</p>
|
||||
{/* <p>{detail?.status}</p> */}
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ import {
|
|||
} from "@/components/ui/dialog";
|
||||
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
|
||||
import { Description } from "@radix-ui/react-toast";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const taskSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -75,6 +76,7 @@ export default function PublishMediahub() {
|
|||
image: false,
|
||||
text: false,
|
||||
});
|
||||
const t = useTranslations("Form");
|
||||
const [mainType, setMainType] = useState<number>(1);
|
||||
const [taskType, setTaskType] = useState<string>("atensi-khusus");
|
||||
const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan
|
||||
|
|
@ -304,13 +306,13 @@ export default function PublishMediahub() {
|
|||
return (
|
||||
<Card>
|
||||
<div className="px-6 py-6">
|
||||
<p className="text-lg font-semibold mb-3">Perencanaan Mediahub</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("planning-mediahub")}</p>
|
||||
{detail !== undefined ? (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -328,8 +330,8 @@ export default function PublishMediahub() {
|
|||
<p className="text-red-400 text-sm">{errors.title.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Output Tugas</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("output-tugas")}</Label>
|
||||
<div className="flex flex-wrap gap-3 mt-1">
|
||||
{Object.keys(taskOutput).map((key) => (
|
||||
<div className="flex items-center gap-2" key={key}>
|
||||
|
|
@ -347,8 +349,8 @@ export default function PublishMediahub() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Pelaksana Tugas</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("executive-task")}</Label>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<div className="">
|
||||
|
|
@ -451,8 +453,8 @@ export default function PublishMediahub() {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Jenis Penugasan</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("assignment-type")}</Label>
|
||||
<RadioGroup
|
||||
value={detail?.assignmentType?.id.toString()}
|
||||
onValueChange={(value) => setType(value)}
|
||||
|
|
@ -473,8 +475,8 @@ export default function PublishMediahub() {
|
|||
</RadioGroup>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="flex flex-col">
|
||||
<Label>Date</Label>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Label>{t("date")}</Label>
|
||||
<div>
|
||||
<Button
|
||||
defaultValue={detail?.date}
|
||||
|
|
@ -495,8 +497,8 @@ export default function PublishMediahub() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Narasi Penugasan</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("description-task")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -520,7 +522,7 @@ export default function PublishMediahub() {
|
|||
{/* Submit Button */}
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ import {
|
|||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const taskSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -69,6 +70,7 @@ export default function PublishMedsos() {
|
|||
image: false,
|
||||
text: false,
|
||||
});
|
||||
const t = useTranslations("Form");
|
||||
const [mainType, setMainType] = useState<number>(1);
|
||||
const [taskType, setTaskType] = useState<string>("atensi-khusus");
|
||||
const [broadcastType, setBroadcastType] = useState<string>("all"); // untuk Tipe Penugasan
|
||||
|
|
@ -297,13 +299,13 @@ export default function PublishMedsos() {
|
|||
return (
|
||||
<Card>
|
||||
<div className="px-6 py-6">
|
||||
<p className="text-lg font-semibold mb-3">Perencanaan Mediahub</p>
|
||||
<p className="text-lg font-semibold mb-3">{t("planning-medsos")}</p>
|
||||
{detail !== undefined ? (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2">
|
||||
<Label>Judul</Label>
|
||||
<Label>{t("title")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
|
|
@ -322,7 +324,7 @@ export default function PublishMedsos() {
|
|||
)}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Output Tugas</Label>
|
||||
<Label>{t("output-tugas")}</Label>
|
||||
<div className="flex flex-wrap gap-3 mt-1">
|
||||
{Object.keys(taskOutput).map((key) => (
|
||||
<div className="flex items-center gap-2" key={key}>
|
||||
|
|
@ -340,8 +342,8 @@ export default function PublishMedsos() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Pelaksana Tugas</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("executive-task")}</Label>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<div>
|
||||
|
|
@ -444,8 +446,8 @@ export default function PublishMedsos() {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Jenis Penugasan</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("assignment-type")}</Label>
|
||||
<RadioGroup
|
||||
value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
|
||||
onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
|
||||
|
|
@ -465,9 +467,9 @@ export default function PublishMedsos() {
|
|||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="mt-6 space-y-2">
|
||||
<div className="flex flex-col">
|
||||
<Label>Date</Label>
|
||||
<Label>{t("date")}</Label>
|
||||
<div>
|
||||
<Button
|
||||
value={detail.date}
|
||||
|
|
@ -488,8 +490,8 @@ export default function PublishMedsos() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Label>Narasi Penugasan</Label>
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label>{t("description-task")}</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
|
|
@ -513,7 +515,7 @@ export default function PublishMedsos() {
|
|||
{/* Submit Button */}
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
{t("submit")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -641,5 +641,81 @@
|
|||
"target-output": "Target Output",
|
||||
"target-participant": "Target Participant",
|
||||
"action": "Actions"
|
||||
},
|
||||
"Form": {
|
||||
"no": "No",
|
||||
"title": "Title",
|
||||
"category-name": "Category Name",
|
||||
"upload-date": "Upload Date",
|
||||
"creator-group": "Creator Group",
|
||||
"source": "source",
|
||||
"published": "Published",
|
||||
"date": "Date",
|
||||
"category": "Category",
|
||||
"tag": "Tag",
|
||||
"type-content": "Content Type",
|
||||
"type-task": "Task Type",
|
||||
"category-task": "Category Task",
|
||||
"code": "Code",
|
||||
"start-date": "Start Date",
|
||||
"end-date": "End Date",
|
||||
"speaker": "Speaker",
|
||||
"time": "Time",
|
||||
"address": "Address",
|
||||
"question": "Question",
|
||||
"sender": "Created By",
|
||||
"sendto": "SendTo",
|
||||
"type": "Type",
|
||||
"duration": "Duration",
|
||||
"target-output": "Target Output",
|
||||
"target-participant": "Target Participant",
|
||||
"action": "Actions",
|
||||
"form-image": "Form Content Image",
|
||||
"form-video": "Form Content Video",
|
||||
"form-text": "Form Content Text",
|
||||
"form-audio": "Form Content Audio",
|
||||
"form-spit": "Form Content SPIT",
|
||||
"ai-assistance": "AI assistance",
|
||||
"language": "Language",
|
||||
"writing-style": "Writing Style",
|
||||
"article-size": "Article Size",
|
||||
"main-keyword": "Main Keyword",
|
||||
"seo": "Seo",
|
||||
"Keywords to include in the text": "Keywords to include in the text",
|
||||
"title-key": "If you do not provide keywords, we will automatically generate relevant keywords from the main keywords for each section and use them to create the article. To add a new keyword, type keyword",
|
||||
"special-instructions": "Special Instructions",
|
||||
"description": "Description",
|
||||
"select-file": "Select File",
|
||||
"drag-file": "Drag files here or click to upload.",
|
||||
"upload-file-max": "(Upload files in .jpg, .jpeg, or .png format.Maximum size 100mb.)",
|
||||
"watermark": "Use watermark",
|
||||
"remove-all": "Remove All",
|
||||
"creator": "Creator",
|
||||
"tags": "Tags",
|
||||
"publish-target": "Target Publish",
|
||||
"submit": "Submit",
|
||||
"cancel": "Cancel",
|
||||
"file-media": "File Media",
|
||||
"preview": "Preview",
|
||||
"suggestion-box": "Suggestion Box",
|
||||
"information": "Information",
|
||||
"accept": "Accept",
|
||||
"revision": "Revision",
|
||||
"reject": "Reject",
|
||||
"leave-comment": "Leave a comment",
|
||||
"all": "All",
|
||||
"view-file": "View File",
|
||||
"update": "Update",
|
||||
"upload-file-video-max": " Upload files with mp4 or mov Maximum size 100mb.",
|
||||
"upload-file-text-max": " Upload files in .doc, .docx, .pdf, .ppt, or .pptx format. Maximum size 100mb.",
|
||||
"upload-file-audio-max": " Upload file in mp3 atau wav Maximum size 100mb",
|
||||
"file-rewrite": "File Rewrite",
|
||||
"file-placement": "File Placement",
|
||||
"planning-mediahub": "Planning Mediahub",
|
||||
"planning-medsos": "Planning Medsos",
|
||||
"output-tugas": "Output Task",
|
||||
"executive-task": "Executive Task",
|
||||
"assignment-type": "Assignment Type",
|
||||
"description-task": "Description Task"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@
|
|||
"date": "Tanggal",
|
||||
"active": "Aktif",
|
||||
"done": "Selesai",
|
||||
"image": "Image",
|
||||
"image": "Foto",
|
||||
"video": "Video",
|
||||
"audio": "Audio",
|
||||
"text": "Text"
|
||||
"text": "Teks"
|
||||
},
|
||||
"BankingDashboard": {
|
||||
"widget_title": "Good evening",
|
||||
|
|
@ -642,5 +642,80 @@
|
|||
"target-output": "Target Output",
|
||||
"target-participant": "Target Peserta",
|
||||
"action": "Aksi"
|
||||
},
|
||||
"Form": {
|
||||
"no": "Nomor",
|
||||
"title": "Judul",
|
||||
"category-name": "Nama Kategori",
|
||||
"upload-date": "Tanggal Upload",
|
||||
"creator-group": "Pembuat",
|
||||
"source": "Sumber",
|
||||
"published": "Diterbitkan",
|
||||
"date": "Tanggal",
|
||||
"category": "Kategori",
|
||||
"tag": "Tag",
|
||||
"type-content": "Tipe Konten",
|
||||
"type-task": "Tipen Penugasan",
|
||||
"category-task": "Kategori Penugasan",
|
||||
"code": "Kode",
|
||||
"start-date": "Tanggal Mulai",
|
||||
"end-date": "Tanggal Selesai",
|
||||
"speaker": "Disampaikan Oleh",
|
||||
"time": "Waktu",
|
||||
"address": "Alamat",
|
||||
"question": "Pertanyaan",
|
||||
"sender": "Pengirim",
|
||||
"sendto": "Penerima",
|
||||
"type": "Tipe",
|
||||
"duration": "Durasi",
|
||||
"target-output": "Target Output",
|
||||
"target-participant": "Target Peserta",
|
||||
"action": "Aksi",
|
||||
"form-image": "Form Konten Foto",
|
||||
"form-video": "Form Konten Video",
|
||||
"form-text": "Form Konten Teks",
|
||||
"form-audio": "Form Konten Audio",
|
||||
"form-spit": "Form Konten SPIT",
|
||||
"ai-assistance": "Bantuan AI",
|
||||
"language": "Bahasa",
|
||||
"writing-style": "Writing Style",
|
||||
"article-size": "Ukuran Article",
|
||||
"main-keyword": "Main Keyword",
|
||||
"seo": "Seo",
|
||||
"Keywords to include in the text": "Kata kunci untuk di sertakan dalam teks",
|
||||
"title-key": "JIka Anda tidak Memberikan kata kunci, kami akan secara otomatis membuat kata kunci yang relevan dari kata kunciutama untuk setiap bagian dan menggunakannya untuk membuat artikel. Untuk menambahkan kata kunci baru, ketik kata kunci",
|
||||
"special-instructions": "Instruksi Khusus",
|
||||
"description": "Deskripsi",
|
||||
"select-file": "Pilih File",
|
||||
"drag-file": "Tarik file disini atau klik untuk upload.",
|
||||
"upload-file-max": "(Upload file dengan format .jpg, .jpeg, atau .png.Ukuran maksimal 100mb.)",
|
||||
"watermark": "Gunakan watermark",
|
||||
"remove-all": "Hapus semua",
|
||||
"creator": "Kreator",
|
||||
"tags": "Tags",
|
||||
"publish-target": "Target Publish",
|
||||
"submit": "Kirim",
|
||||
"cancel": "Batal",
|
||||
"file-media": "File Media",
|
||||
"preview": "Pratinjau Gambar utama",
|
||||
"suggestion-box": "Kotak Saran",
|
||||
"information": "Keterangan",
|
||||
"accept": "Setujui",
|
||||
"revision": "Revisi",
|
||||
"reject": "Tolak",
|
||||
"leave-comment": "Berikan Komentar",
|
||||
"all": "Semua",
|
||||
"view-file": "Lihat file",
|
||||
"update": "Edit",
|
||||
"upload-file-video-max": " Upload file dengan mp4 atau mov Ukuran maksimal 100mb.",
|
||||
"upload-file-text-max": "Upload file dengan format .doc, .docx, .pdf, .ppt, atau .pptx Ukuran maksimal 100mb. ",
|
||||
"upload-file-audio-max": " Upload file dengan mp3 atau wav maksimal ukuran 100mb",
|
||||
"file-rewrite": "File hasil Rewrite",
|
||||
"file-placement": "Penempatan file",
|
||||
"planning-mediahub": "Perencanaan Mediahub",
|
||||
"output-tugas": "Output Tugas",
|
||||
"executive-task": "Pelaksana Tugas",
|
||||
"assignment-type": "Jenis Penugasan",
|
||||
"description-task": "Narasi Penugasan"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue