From 92811802cc99da2e59dc4b9e7361a29c6a925251 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Wed, 15 Oct 2025 10:57:41 +0700 Subject: [PATCH] fix: add button translate in image upload and edit admin, change url api in all filter content --- .../settings/category/component/table.tsx | 11 - app/[locale]/(public)/audio/filter/page.tsx | 112 ++++- .../(public)/document/filter/page.tsx | 112 ++++- app/[locale]/(public)/image/filter/page.tsx | 126 +++--- app/[locale]/(public)/video/filter/page.tsx | 112 ++++- components/form/content/image-detail-form.tsx | 2 +- components/form/content/image-form.tsx | 384 +++++++++--------- components/form/content/image-update-form.tsx | 176 +++++--- components/form/content/spit-convert-form.tsx | 4 +- service/content/content.ts | 4 +- service/landing/landing.ts | 2 +- 11 files changed, 726 insertions(+), 319 deletions(-) diff --git a/app/[locale]/(protected)/admin/settings/category/component/table.tsx b/app/[locale]/(protected)/admin/settings/category/component/table.tsx index f63857b0..5d6b81b8 100644 --- a/app/[locale]/(protected)/admin/settings/category/component/table.tsx +++ b/app/[locale]/(protected)/admin/settings/category/component/table.tsx @@ -28,21 +28,10 @@ import { import { useSearchParams } from "next/navigation"; import TablePagination from "@/components/table/table-pagination"; import columns from "./column"; - -import { listEnableCategory } from "@/service/content/content"; import { Checkbox } from "@/components/ui/checkbox"; import { close, loading } from "@/config/swal"; import { Link, useRouter } from "@/i18n/routing"; -import { NewCampaignIcon } from "@/components/icon"; import { getCategories } from "@/service/settings/settings"; -import { - Dialog, - DialogContent, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; import CreateCategoryModal from "./create"; import { useTranslations } from "next-intl"; import { diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx index 1d310a27..9b4de003 100644 --- a/app/[locale]/(public)/audio/filter/page.tsx +++ b/app/[locale]/(public)/audio/filter/page.tsx @@ -593,6 +593,116 @@ const FilterPage = () => {

{t("categories", { defaultValue: "Categories" })}

+ + + + {/* ⬇️ Pagination kategori (rata sejajar) */} +
+ {/* Tombol Prev */} + + + {(() => { + const maxVisible = 4; + let startPage = Math.max( + 1, + Math.min( + categoryPage - Math.floor(maxVisible / 2), + categoryTotalPages - maxVisible + 1 + ) + ); + const endPage = Math.min( + categoryTotalPages, + startPage + maxVisible - 1 + ); + + const visiblePages = []; + for (let i = startPage; i <= endPage; i++) { + visiblePages.push(i); + } + + return visiblePages.map((pageNum) => ( + + )); + })()} + + {/* Tombol Next */} + +
+ + + {/*
+

+ {t("categories", { defaultValue: "Categories" })} +

- + */} {/* Garis */}
{/* Garis */} diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index 1a6e2a65..060827af 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -609,6 +609,116 @@ const FilterPage = () => {

{t("categories", { defaultValue: "Categories" })}

+ + + + {/* ⬇️ Pagination kategori (rata sejajar) */} +
+ {/* Tombol Prev */} + + + {(() => { + const maxVisible = 4; + let startPage = Math.max( + 1, + Math.min( + categoryPage - Math.floor(maxVisible / 2), + categoryTotalPages - maxVisible + 1 + ) + ); + const endPage = Math.min( + categoryTotalPages, + startPage + maxVisible - 1 + ); + + const visiblePages = []; + for (let i = startPage; i <= endPage; i++) { + visiblePages.push(i); + } + + return visiblePages.map((pageNum) => ( + + )); + })()} + + {/* Tombol Next */} + +
+ + + {/*
+

+ {t("categories", { defaultValue: "Categories" })} +

- + */} {/* Garis */}
{/* Garis */} diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx index 7f0a1384..67b68cc8 100644 --- a/app/[locale]/(public)/image/filter/page.tsx +++ b/app/[locale]/(public)/image/filter/page.tsx @@ -627,6 +627,7 @@ const FilterPage = () => {

{t("categories", { defaultValue: "Categories" })}

+ - {Array.from({ length: categoryTotalPages }, (_, i) => ( + {/* ⬇️ Pagination kategori (rata sejajar) */} +
+ {/* Tombol Prev */} + + + {(() => { + const maxVisible = 4; + let startPage = Math.max( + 1, + Math.min( + categoryPage - Math.floor(maxVisible / 2), + categoryTotalPages - maxVisible + 1 + ) + ); + const endPage = Math.min( + categoryTotalPages, + startPage + maxVisible - 1 + ); + + const visiblePages = []; + for (let i = startPage; i <= endPage; i++) { + visiblePages.push(i); + } + + return visiblePages.map((pageNum) => ( - ))} + )); + })()} - -
- + + + + + {/* Garis */}
{/* Garis */} diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx index 02251e9e..9dabdbf6 100644 --- a/app/[locale]/(public)/video/filter/page.tsx +++ b/app/[locale]/(public)/video/filter/page.tsx @@ -610,6 +610,116 @@ const FilterPage = () => {

{t("categories", { defaultValue: "Categories" })}

+ + + + {/* ⬇️ Pagination kategori (rata sejajar) */} +
+ {/* Tombol Prev */} + + + {(() => { + const maxVisible = 4; + let startPage = Math.max( + 1, + Math.min( + categoryPage - Math.floor(maxVisible / 2), + categoryTotalPages - maxVisible + 1 + ) + ); + const endPage = Math.min( + categoryTotalPages, + startPage + maxVisible - 1 + ); + + const visiblePages = []; + for (let i = startPage; i <= endPage; i++) { + visiblePages.push(i); + } + + return visiblePages.map((pageNum) => ( + + )); + })()} + + {/* Tombol Next */} + +
+ + + {/*
+

+ {t("categories", { defaultValue: "Categories" })} +

    {categories.map((category: any) => (
  • @@ -687,7 +797,7 @@ const FilterPage = () => {
- + */} {/* Garis */}
{/* Garis */} diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx index 263dce73..95f9c8cd 100644 --- a/components/form/content/image-detail-form.tsx +++ b/components/form/content/image-detail-form.tsx @@ -958,7 +958,7 @@ export default function FormImageDetail() { } // Set the selected target to the category ID from details - setSelectedTarget(String(details.category.id)); + setSelectedTarget(String(details?.category?.id)); const filesData = details.files || []; const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) => diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx index c6bb4715..530c480b 100644 --- a/components/form/content/image-form.tsx +++ b/components/form/content/image-form.tsx @@ -152,6 +152,10 @@ export default function FormImage() { const [translatedContent, setTranslatedContent] = React.useState(""); const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id"); + // 🔹 state untuk translate judul + const [translatedTitle, setTranslatedTitle] = useState(""); + const [isLoadingTranslateTitle, setIsLoadingTranslateTitle] = useState(false); + const options: Option[] = [ { id: "all", label: "SEMUA" }, { id: "5", label: "UMUM" }, @@ -211,6 +215,7 @@ export default function FormImage() { title: z.string().min(1, { message: t("titleRequired") }), description: z.string().optional(), descriptionOri: z.string().optional(), + htmlDescription: z.string().optional(), rewriteDescription: z.string().optional(), creatorName: z.string().min(1, { message: t("creatorRequired") }), files: z @@ -555,48 +560,53 @@ export default function FormImage() { } const finalTags = tags.join(", "); - const finalTitle = isSwitchOn ? title : data.title; + // const finalTitle = isSwitchOn ? title : data.title; + let finalTitle = isSwitchOn ? title : data.title; + + // ✅ Jika sudah translate judul → kirim versi English + if (translatedTitle && translatedTitle.trim() !== "") { + finalTitle = translatedTitle; + console.log("📤 Upload Title versi Inggris (translate)"); + } // pilih description dasar - let finalDescription = isSwitchOn - ? data.description - : selectedFileType === "rewrite" - ? data.rewriteDescription - : data.descriptionOri; + // let finalDescription = isSwitchOn + // ? data.description + // : selectedFileType === "rewrite" + // ? data.rewriteDescription + // : data.descriptionOri; + + // 👉 tempelkan hasil translate ke field form agar ikut terkirim + // if (translatedContent) { + // data.descriptionOri = translatedContent; // versi Inggris yang dikirim + // } else { + // data.descriptionOri = getValues("descriptionOri"); // fallback IDN + // } + + // ✅ Tentukan deskripsi final yang akan dikirim + let finalDescription = ""; + + if (translatedContent && translatedContent.trim() !== "") { + // jika user sudah translate → kirim versi Inggris + finalDescription = translatedContent; + console.log("📤 Upload versi Inggris (translate)"); + } else if (data.rewriteDescription && selectedFileType === "rewrite") { + finalDescription = data.rewriteDescription; + console.log("📤 Upload versi rewrite"); + } else { + // fallback: gunakan versi Indonesia original + finalDescription = data.descriptionOri ?? ""; + console.log("📤 Upload versi Indonesia (original)"); + } if (!finalDescription?.trim()) { MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error"); return; } - // 👉 tempelkan hasil translate ke field form agar ikut terkirim - if (translatedContent) { - data.descriptionOri = translatedContent; - console.log( - "🌍 Translate dimasukkan ke descriptionOri:", - translatedContent - ); - } - - let requestData: { - title: string; - description: string; - htmlDescription: string; - fileTypeId: string; - categoryId: any; - subCategoryId: any; - uploadedBy: string; - statusId: string; - publishedFor: string; - creatorName: string; - tags: string; - isYoutube: boolean; - isInternationalMedia: boolean; - attachFromScheduleId?: number; - } = { - ...data, + let requestData: any = { title: finalTitle, - description: htmlToString(finalDescription), // plain text + description: htmlToString(finalDescription), // versi plain text htmlDescription: finalDescription, // versi HTML fileTypeId, categoryId: selectedCategory, @@ -605,11 +615,43 @@ export default function FormImage() { statusId: "1", publishedFor: publishedFor.join(","), creatorName: data.creatorName, - tags: finalTags, + tags: tags.join(", "), isYoutube: false, isInternationalMedia: false, }; + // let requestData: { + // title: string; + // description: string; + // htmlDescription: string; + // fileTypeId: string; + // categoryId: any; + // subCategoryId: any; + // uploadedBy: string; + // statusId: string; + // publishedFor: string; + // creatorName: string; + // tags: string; + // isYoutube: boolean; + // isInternationalMedia: boolean; + // attachFromScheduleId?: number; + // } = { + // ...data, + // title: finalTitle, + // description: htmlToString(finalDescription), // plain text + // htmlDescription: finalDescription, // versi HTML + // fileTypeId, + // categoryId: selectedCategory, + // subCategoryId: selectedCategory, + // uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58", + // statusId: "1", + // publishedFor: publishedFor.join(","), + // creatorName: data.creatorName, + // tags: finalTags, + // isYoutube: false, + // isInternationalMedia: false, + // }; + let id = Cookies.get("idCreate"); if (scheduleId !== undefined) { @@ -881,8 +923,84 @@ export default function FormImage() { {t("form-image", { defaultValue: "Form Image" })}

- {/* Input Title */} -
+
+
+ + + {roleId === "14" && ( + + )} +
+ {/* Title Indonesia */} +
+ + ( + + )} + /> +
+ + {/* Title English (hanya muncul setelah translate) */} + {translatedTitle && ( +
+ + setTranslatedTitle(e.target.value)} + placeholder="English version" + /> +
+ )} + + {errors.title?.message && ( +

{errors.title.message}

+ )} +
+ + {/*
{errors.title.message}

)} -
+
*/} {/*
@@ -1233,18 +1351,12 @@ export default function FormImage() { setSelectedFileType(value)} value={selectedFileType} - className=" grid-cols-1" + className="grid-cols-1" > -
- - -
- + {/* HAPUS radio, ganti jadi preview side-by-side */}
-
- - {/* Pilihan bahasa untuk posting */} - {roleId === "14" && ( -
- -
- )} - - {/* Editor Bahasa Indonesia */} - ( - - )} - /> - - {/* Editor Bahasa Inggris */} - {translatedContent && ( -
-
- {" "} -
{errors.description?.message && (

{errors.description.message}

)}
- {/*
-
- - {roleId === "14" && ( - - )} -
- - ( - { - onChange(val); - // setLocalContent(val); - // setEditorContent(val); - }} - initialData={value} - /> - )} - /> - - {errors.description?.message && ( -

- {errors.description.message} -

- )} -
*/} - {/*
- - ( - { - onChange(value); - setEditorContent(value); - }} - initialData={value} - /> - )} - /> - {errors.description?.message && ( -

- {errors.description.message} -

- )} -
*/} -

Content Rewrite

+

+ Content Rewrite +

+ {showRewriteEditor && (
{isGeneratedArticle && ( @@ -1455,7 +1456,7 @@ export default function FormImage() { className={`mr-3 px-3 py-2 rounded-md ${ selectedArticleId === id ? "bg-green-500 text-white" - : "border-2 border-green-500 bg-white text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500" + : "border-2 border-green-500 bg-white text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500" }`} onClick={() => handleArticleIdClick(id)} > @@ -1464,12 +1465,6 @@ export default function FormImage() { ))}
)} -
- - -