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

feat: add translate button in update content

This commit is contained in:
Sabda Yagra 2025-09-24 21:53:34 +07:00
parent 20f7b19471
commit c661f8bbd2
12 changed files with 2324 additions and 3697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
View File

@ -18,6 +18,7 @@ import { deleteMedia } from "@/service/content/content";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/routing";
const useTableColumns = () => { const useTableColumns = () => {
const t = useTranslations("Table"); const t = useTranslations("Table");
@ -181,14 +182,11 @@ const useTableColumns = () => {
header: t("action", { defaultValue: "Action" }), header: t("action", { defaultValue: "Action" }),
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
async function doDelete(id: any) { async function doDelete(id: any) {
// loading(); const data = { id };
const data = {
id,
};
const response = await deleteMedia(data); const response = await deleteMedia(data);
if (response?.error) { if (response?.error) {
@ -230,16 +228,21 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false); const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie"); const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
React.useEffect(() => { React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) { if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover( setIsMabesApprover(
Number(userLevelId) == 216 && Number(roleId) == 3 Number(userLevelId) === 216 && Number(roleId) === 3
); );
} }
}, [userLevelId, roleId]); }, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@ -260,16 +263,8 @@ const useTableColumns = () => {
View View
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
{/* <Link
href={`/contributor/content/audio/update/${row.original.id}`} {canEdit && (
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link <Link
href={`/contributor/content/audio/update/${row.original.id}`} href={`/contributor/content/audio/update/${row.original.id}`}
> >
@ -279,6 +274,7 @@ const useTableColumns = () => {
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
)} )}
<DropdownMenuItem <DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)} onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -286,15 +282,6 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" /> <Trash2 className="w-4 h-4 me-1.5" />
Delete Delete
</DropdownMenuItem> </DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );

164
app/[locale]/(protected)/contributor/content/image/components/columns.tsx
View File

@ -186,11 +186,7 @@ const useTableColumns = () => {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
async function doDelete(id: any) { async function doDelete(id: any) {
// loading(); const data = { id };
const data = {
id,
};
const response = await deleteMedia(data); const response = await deleteMedia(data);
if (response?.error) { if (response?.error) {
@ -232,16 +228,21 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false); const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie"); const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
React.useEffect(() => { React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) { if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover( setIsMabesApprover(
Number(userLevelId) == 216 && Number(roleId) == 3 Number(userLevelId) === 216 && Number(roleId) === 3
); );
} }
}, [userLevelId, roleId]); }, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@ -262,16 +263,8 @@ const useTableColumns = () => {
View View
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
{/* <Link
href={`/contributor/content/image/update/${row.original.id}`} {canEdit && (
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link <Link
href={`/contributor/content/image/update/${row.original.id}`} href={`/contributor/content/image/update/${row.original.id}`}
> >
@ -281,6 +274,7 @@ const useTableColumns = () => {
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
)} )}
<DropdownMenuItem <DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)} onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -288,20 +282,138 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" /> <Trash2 className="w-4 h-4 me-1.5" />
Delete Delete
</DropdownMenuItem> </DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );
}, },
}, },
// {
// id: "actions",
// accessorKey: "action",
// header: t("action", { defaultValue: "Action" }),
// enableHiding: false,
// cell: ({ row }) => {
// const router = useRouter();
// const MySwal = withReactContent(Swal);
// async function doDelete(id: any) {
// // loading();
// const data = {
// id,
// };
// const response = await deleteMedia(data);
// if (response?.error) {
// error(response.message);
// return false;
// }
// success();
// }
// function success() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// window.location.reload();
// }
// });
// }
// const handleDeleteMedia = (id: any) => {
// MySwal.fire({
// title: "Hapus Data",
// text: "",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#3085d6",
// confirmButtonColor: "#d33",
// confirmButtonText: "Hapus",
// }).then((result) => {
// if (result.isConfirmed) {
// doDelete(id);
// }
// });
// };
// const [isMabesApprover, setIsMabesApprover] = React.useState(false);
// const userId = getCookiesDecrypt("uie");
// const userLevelId = getCookiesDecrypt("ulie");
// const roleId = getCookiesDecrypt("urie");
// React.useEffect(() => {
// if (userLevelId !== undefined && roleId !== undefined) {
// setIsMabesApprover(
// Number(userLevelId) == 216 && Number(roleId) == 3
// );
// }
// }, [userLevelId, roleId]);
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/contributor/content/image/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// </Link>
// {/* <Link
// href={`/contributor/content/image/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link> */}
// {(Number(row.original.uploadedById) === Number(userId) ||
// isMabesApprover) && (
// <Link
// href={`/contributor/content/image/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link>
// )}
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// {/* {(row.original.uploadedById === userId || isMabesApprover) && (
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Hapus
// </DropdownMenuItem>
// )} */}
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
]; ];
return columns; return columns;

165
app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
View File

@ -18,6 +18,7 @@ import { deleteMedia } from "@/service/content/content";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/routing";
const useTableColumns = () => { const useTableColumns = () => {
const t = useTranslations("Table"); const t = useTranslations("Table");
@ -176,20 +177,18 @@ const useTableColumns = () => {
); );
}, },
}, },
{ {
id: "actions", id: "actions",
accessorKey: "action", accessorKey: "action",
header: t("action", { defaultValue: "Action" }), header: t("action", { defaultValue: "Action" }),
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
async function doDelete(id: any) { async function doDelete(id: any) {
// loading(); const data = { id };
const data = {
id,
};
const response = await deleteMedia(data); const response = await deleteMedia(data);
if (response?.error) { if (response?.error) {
@ -231,16 +230,21 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false); const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie"); const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
React.useEffect(() => { React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) { if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover( setIsMabesApprover(
Number(userLevelId) == 216 && Number(roleId) == 3 Number(userLevelId) === 216 && Number(roleId) === 3
); );
} }
}, [userLevelId, roleId]); }, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@ -261,8 +265,8 @@ const useTableColumns = () => {
View View
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && ( {canEdit && (
<Link <Link
href={`/contributor/content/teks/update/${row.original.id}`} href={`/contributor/content/teks/update/${row.original.id}`}
> >
@ -272,14 +276,7 @@ const useTableColumns = () => {
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
)} )}
{/* <Link
href={`/contributor/content/teks/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
<DropdownMenuItem <DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)} onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -287,20 +284,136 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" /> <Trash2 className="w-4 h-4 me-1.5" />
Delete Delete
</DropdownMenuItem> </DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );
}, },
}, },
// {
// id: "actions",
// accessorKey: "action",
// header: t("action", { defaultValue: "Action" }),
// enableHiding: false,
// cell: ({ row }) => {
// const MySwal = withReactContent(Swal);
// async function doDelete(id: any) {
// // loading();
// const data = {
// id,
// };
// const response = await deleteMedia(data);
// if (response?.error) {
// error(response.message);
// return false;
// }
// success();
// }
// function success() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// window.location.reload();
// }
// });
// }
// const handleDeleteMedia = (id: any) => {
// MySwal.fire({
// title: "Hapus Data",
// text: "",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#3085d6",
// confirmButtonColor: "#d33",
// confirmButtonText: "Hapus",
// }).then((result) => {
// if (result.isConfirmed) {
// doDelete(id);
// }
// });
// };
// const [isMabesApprover, setIsMabesApprover] = React.useState(false);
// const userId = getCookiesDecrypt("uie");
// const userLevelId = getCookiesDecrypt("ulie");
// const roleId = getCookiesDecrypt("urie");
// React.useEffect(() => {
// if (userLevelId !== undefined && roleId !== undefined) {
// setIsMabesApprover(
// Number(userLevelId) == 216 && Number(roleId) == 3
// );
// }
// }, [userLevelId, roleId]);
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/contributor/content/teks/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// </Link>
// {(Number(row.original.uploadedById) === Number(userId) ||
// isMabesApprover) && (
// <Link
// href={`/contributor/content/teks/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link>
// )}
// {/* <Link
// href={`/contributor/content/teks/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link> */}
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// {/* {(row.original.uploadedById === userId || isMabesApprover) && (
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Hapus
// </DropdownMenuItem>
// )} */}
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
]; ];
return columns; return columns;
}; };

165
app/[locale]/(protected)/contributor/content/video/components/columns.tsx
View File

@ -18,6 +18,7 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/routing";
const useTableColumns = () => { const useTableColumns = () => {
const t = useTranslations("Table"); const t = useTranslations("Table");
@ -176,20 +177,18 @@ const useTableColumns = () => {
); );
}, },
}, },
{ {
id: "actions", id: "actions",
accessorKey: "action", accessorKey: "action",
header: t("action", { defaultValue: "Action" }), header: t("action", { defaultValue: "Action" }),
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const router = useRouter();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
async function doDelete(id: any) { async function doDelete(id: any) {
// loading(); const data = { id };
const data = {
id,
};
const response = await deleteMedia(data); const response = await deleteMedia(data);
if (response?.error) { if (response?.error) {
@ -231,16 +230,21 @@ const useTableColumns = () => {
const [isMabesApprover, setIsMabesApprover] = React.useState(false); const [isMabesApprover, setIsMabesApprover] = React.useState(false);
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie"); const roleId = Number(getCookiesDecrypt("urie")); // pastikan jadi number
React.useEffect(() => { React.useEffect(() => {
if (userLevelId !== undefined && roleId !== undefined) { if (userLevelId !== undefined && roleId !== undefined) {
setIsMabesApprover( setIsMabesApprover(
Number(userLevelId) == 216 && Number(roleId) == 3 Number(userLevelId) === 216 && Number(roleId) === 3
); );
} }
}, [userLevelId, roleId]); }, [userLevelId, roleId]);
const canEdit =
Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover ||
roleId === 14;
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@ -261,16 +265,8 @@ const useTableColumns = () => {
View View
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
{/* <Link
href={`/contributor/content/video/update/${row.original.id}`} {canEdit && (
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link> */}
{(Number(row.original.uploadedById) === Number(userId) ||
isMabesApprover) && (
<Link <Link
href={`/contributor/content/video/update/${row.original.id}`} href={`/contributor/content/video/update/${row.original.id}`}
> >
@ -280,6 +276,7 @@ const useTableColumns = () => {
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
)} )}
<DropdownMenuItem <DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)} onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
@ -287,20 +284,136 @@ const useTableColumns = () => {
<Trash2 className="w-4 h-4 me-1.5" /> <Trash2 className="w-4 h-4 me-1.5" />
Delete Delete
</DropdownMenuItem> </DropdownMenuItem>
{/* {(row.original.uploadedById === userId || isMabesApprover) && (
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Hapus
</DropdownMenuItem>
)} */}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );
}, },
}, },
// {
// id: "actions",
// accessorKey: "action",
// header: t("action", { defaultValue: "Action" }),
// enableHiding: false,
// cell: ({ row }) => {
// const MySwal = withReactContent(Swal);
// async function doDelete(id: any) {
// // loading();
// const data = {
// id,
// };
// const response = await deleteMedia(data);
// if (response?.error) {
// error(response.message);
// return false;
// }
// success();
// }
// function success() {
// MySwal.fire({
// title: "Sukses",
// icon: "success",
// confirmButtonColor: "#3085d6",
// confirmButtonText: "OK",
// }).then((result) => {
// if (result.isConfirmed) {
// window.location.reload();
// }
// });
// }
// const handleDeleteMedia = (id: any) => {
// MySwal.fire({
// title: "Hapus Data",
// text: "",
// icon: "warning",
// showCancelButton: true,
// cancelButtonColor: "#3085d6",
// confirmButtonColor: "#d33",
// confirmButtonText: "Hapus",
// }).then((result) => {
// if (result.isConfirmed) {
// doDelete(id);
// }
// });
// };
// const [isMabesApprover, setIsMabesApprover] = React.useState(false);
// const userId = getCookiesDecrypt("uie");
// const userLevelId = getCookiesDecrypt("ulie");
// const roleId = getCookiesDecrypt("urie");
// React.useEffect(() => {
// if (userLevelId !== undefined && roleId !== undefined) {
// setIsMabesApprover(
// Number(userLevelId) == 216 && Number(roleId) == 3
// );
// }
// }, [userLevelId, roleId]);
// return (
// <DropdownMenu>
// <DropdownMenuTrigger asChild>
// <Button
// size="icon"
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
// >
// <span className="sr-only">Open menu</span>
// <MoreVertical className="h-4 w-4 text-default-800" />
// </Button>
// </DropdownMenuTrigger>
// <DropdownMenuContent className="p-0" align="end">
// <Link
// href={`/contributor/content/video/detail/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <Eye className="w-4 h-4 me-1.5" />
// View
// </DropdownMenuItem>
// </Link>
// {/* <Link
// href={`/contributor/content/video/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link> */}
// {(Number(row.original.uploadedById) === Number(userId) ||
// isMabesApprover) && (
// <Link
// href={`/contributor/content/video/update/${row.original.id}`}
// >
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
// <SquarePen className="w-4 h-4 me-1.5" />
// Edit
// </DropdownMenuItem>
// </Link>
// )}
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Delete
// </DropdownMenuItem>
// {/* {(row.original.uploadedById === userId || isMabesApprover) && (
// <DropdownMenuItem
// onClick={() => handleDeleteMedia(row.original.id)}
// className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// >
// <Trash2 className="w-4 h-4 me-1.5" />
// Hapus
// </DropdownMenuItem>
// )} */}
// </DropdownMenuContent>
// </DropdownMenu>
// );
// },
// },
]; ];
return columns; return columns;

120
components/form/content/audio-form.tsx
View File

@ -523,15 +523,120 @@ export default function FormAudio() {
} }
}, [articleBody, setValue]); }, [articleBody, setValue]);
// const save = async (data: AudioSchema) => {
// loading();
// const finalTags = tags.join(", ");
// const finalTitle = isSwitchOn ? title : data.title;
// const finalDescription = isSwitchOn
// ? data.description
// : selectedFileType === "rewrite"
// ? data.rewriteDescription
// : data.descriptionOri;
// if (!finalDescription?.trim()) {
// MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
// return;
// }
// 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),
// htmlDescription: finalDescription,
// 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) {
// requestData.attachFromScheduleId = Number(scheduleId);
// }
// if (id == undefined) {
// const response = await createMedia(requestData);
// console.log("Form Data Submitted:", requestData);
// if (response?.error) {
// MySwal.fire("Error", response?.message, "error");
// return;
// }
// Cookies.set("idCreate", response?.data?.data, { expires: 1 });
// id = response?.data?.data;
// const formMedia = new FormData();
// console.log("Thumbnail : ", files[0]);
// formMedia.append("file", files[0]);
// const responseThumbnail = await uploadThumbnail(id, formMedia);
// if (responseThumbnail?.error == true) {
// error(responseThumbnail?.message);
// return false;
// }
// }
// const progressInfoArr = [];
// for (const item of files) {
// progressInfoArr.push({ percentage: 0, fileName: item.name });
// }
// progressInfo = progressInfoArr;
// setIsStartUpload(true);
// setProgressList(progressInfoArr);
// close();
// // showProgress();
// files.map(async (item: any, index: number) => {
// await uploadResumableFile(index, String(id), item, "0");
// });
// Cookies.remove("idCreate");
// // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
// };
const save = async (data: AudioSchema) => { const save = async (data: AudioSchema) => {
loading(); loading();
const finalTags = tags.join(", "); const finalTags = tags.join(", ");
const finalTitle = isSwitchOn ? title : data.title; const finalTitle = isSwitchOn ? title : data.title;
const finalDescription = isSwitchOn
// pilih description dasar
let finalDescription = isSwitchOn
? data.description ? data.description
: selectedFileType === "rewrite" : selectedFileType === "rewrite"
? data.rewriteDescription ? data.rewriteDescription
: data.descriptionOri; : data.descriptionOri;
// 👉 tempelkan hasil translate ke field form & pakai sebagai description
if (translatedContent) {
data.descriptionOri = translatedContent; // update ke form
finalDescription = translatedContent; // pakai untuk request
console.log(
"🌍 Translate dimasukkan ke descriptionOri:",
translatedContent
);
}
if (!finalDescription?.trim()) { if (!finalDescription?.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error"); MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return; return;
@ -555,8 +660,8 @@ export default function FormAudio() {
} = { } = {
...data, ...data,
title: finalTitle, title: finalTitle,
description: htmlToString(finalDescription), description: htmlToString(finalDescription), // ✅ plain text versi translate
htmlDescription: finalDescription, htmlDescription: finalDescription, // ✅ html versi translate
fileTypeId, fileTypeId,
categoryId: selectedCategory, categoryId: selectedCategory,
subCategoryId: selectedCategory, subCategoryId: selectedCategory,
@ -583,6 +688,7 @@ export default function FormAudio() {
MySwal.fire("Error", response?.message, "error"); MySwal.fire("Error", response?.message, "error");
return; return;
} }
Cookies.set("idCreate", response?.data?.data, { expires: 1 }); Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data; id = response?.data?.data;
@ -596,10 +702,10 @@ export default function FormAudio() {
} }
} }
const progressInfoArr = []; const progressInfoArr = files.map((item) => ({
for (const item of files) { percentage: 0,
progressInfoArr.push({ percentage: 0, fileName: item.name }); fileName: item.name,
} }));
progressInfo = progressInfoArr; progressInfo = progressInfoArr;
setIsStartUpload(true); setIsStartUpload(true);
setProgressList(progressInfoArr); setProgressList(progressInfoArr);

211
components/form/content/audio-update-form.tsx
View File

@ -62,6 +62,9 @@ import {
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, loading } from "@/config/swal";
import { translateText } from "@/service/content/ai";
const audioSchema = z.object({ const audioSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -135,24 +138,20 @@ const CustomEditor = dynamic(
export default function FormAudioUpdate() { export default function FormAudioUpdate() {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const router = useRouter(); const router = useRouter();
const { id } = useParams() as { id: string }; const { id } = useParams() as { id: string };
console.log(id); console.log(id);
const editor = useRef(null); const editor = useRef(null);
type AudioSchema = z.infer<typeof audioSchema>; type AudioSchema = z.infer<typeof audioSchema>;
let progressInfo: any = []; let progressInfo: any = [];
let counterUpdateProgress = 0; let counterUpdateProgress = 0;
const [progressList, setProgressList] = useState<any>([]); const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0; let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0); const [counterProgress, setCounterProgress] = useState(0);
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const t = useTranslations("Form"); const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
@ -198,6 +197,11 @@ export default function FormAudioUpdate() {
const [mainCheckboxChangeType, setMainCheckboxChangeType] = const [mainCheckboxChangeType, setMainCheckboxChangeType] =
useState<string>(""); useState<string>("");
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
const roleId = getCookiesDecrypt("urie");
const options: Option[] = [ const options: Option[] = [
{ id: "all", name: "SEMUA" }, { id: "all", name: "SEMUA" },
{ id: "5", name: "UMUM" }, { id: "5", name: "UMUM" },
@ -234,6 +238,7 @@ export default function FormAudioUpdate() {
control, control,
handleSubmit, handleSubmit,
setValue, setValue,
getValues,
formState: { errors }, formState: { errors },
} = useForm<AudioSchema>({ } = useForm<AudioSchema>({
resolver: zodResolver(audioSchema), resolver: zodResolver(audioSchema),
@ -535,7 +540,9 @@ export default function FormAudioUpdate() {
}); });
// Checklist SATKER POLRI dan semua sub-itemsnya // Checklist SATKER POLRI dan semua sub-itemsnya
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI"); const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) { if (satkerItem) {
currentFileLevels.add(Number(satkerItem.id)); currentFileLevels.add(Number(satkerItem.id));
// Checklist semua sub-items di bawah SATKER POLRI // Checklist semua sub-items di bawah SATKER POLRI
@ -569,7 +576,9 @@ export default function FormAudioUpdate() {
}); });
// Hapus SATKER POLRI dan semua sub-itemsnya // Hapus SATKER POLRI dan semua sub-itemsnya
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI"); const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) { if (satkerItem) {
currentFileLevels.delete(Number(satkerItem.id)); currentFileLevels.delete(Number(satkerItem.id));
// Hapus semua sub-items di bawah SATKER POLRI // Hapus semua sub-items di bawah SATKER POLRI
@ -763,7 +772,11 @@ export default function FormAudioUpdate() {
const temp = []; const temp = [];
for (let i = 0; i < filePlacements?.length; i++) { for (let i = 0; i < filePlacements?.length; i++) {
const file = files[i] as any; const file = files[i] as any;
if (file.id && filePlacements[file.id] && filePlacements[file.id].length > 0) { if (
file.id &&
filePlacements[file.id] &&
filePlacements[file.id].length > 0
) {
const now = filePlacements[file.id]; const now = filePlacements[file.id];
const normalizedNow = now.map((item): PlacementType => { const normalizedNow = now.map((item): PlacementType => {
const value = String(item); const value = String(item);
@ -880,7 +893,9 @@ export default function FormAudioUpdate() {
} }
// Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist // Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist
const requiredItems = ["mabes", "wilayah", "international"]; const requiredItems = ["mabes", "wilayah", "international"];
const hasAllRequired = requiredItems.every(item => now.includes(item)); const hasAllRequired = requiredItems.every((item) =>
now.includes(item)
);
if (hasAllRequired && !now.includes("all")) { if (hasAllRequired && !now.includes("all")) {
now.push("all"); now.push("all");
} }
@ -923,8 +938,8 @@ export default function FormAudioUpdate() {
} else { } else {
if (placement === "wilayah") { if (placement === "wilayah") {
// Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker // Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker
const now = temp[index]?.filter((a) => const now = temp[index]?.filter(
a !== "wilayah" && a !== "polda" && a !== "satker" (a) => a !== "wilayah" && a !== "polda" && a !== "satker"
); );
temp[index] = now; temp[index] = now;
} else if (placement === "polda") { } else if (placement === "polda") {
@ -952,7 +967,9 @@ export default function FormAudioUpdate() {
const currentNow = temp[index] || []; const currentNow = temp[index] || [];
if (currentNow.includes("all")) { if (currentNow.includes("all")) {
const requiredItems = ["mabes", "wilayah", "international"]; const requiredItems = ["mabes", "wilayah", "international"];
const hasAllRequired = requiredItems.every(item => currentNow.includes(item)); const hasAllRequired = requiredItems.every((item) =>
currentNow.includes(item)
);
if (!hasAllRequired) { if (!hasAllRequired) {
const newData = currentNow.filter((b) => b !== "all"); const newData = currentNow.filter((b) => b !== "all");
temp[index] = newData; temp[index] = newData;
@ -1073,12 +1090,18 @@ export default function FormAudioUpdate() {
.map((p: string) => { .map((p: string) => {
const trimmed = p.trim(); const trimmed = p.trim();
switch (trimmed) { switch (trimmed) {
case "all": return "all"; case "all":
case "mabes": return "nasional"; return "all";
case "polda": return "wilayah"; case "mabes":
case "satker": return "satker"; return "nasional";
case "international": return "international"; case "polda":
default: return trimmed; return "wilayah";
case "satker":
return "satker";
case "international":
return "international";
default:
return trimmed;
} }
}); });
return mappedPlacements; return mappedPlacements;
@ -1112,7 +1135,9 @@ export default function FormAudioUpdate() {
}; };
if (file.placements) { if (file.placements) {
const placements = file.placements.split(",").map((p: string) => p.trim()); const placements = file.placements
.split(",")
.map((p: string) => p.trim());
// Map dari format backend ke checkbox // Map dari format backend ke checkbox
if (placements.includes("all")) { if (placements.includes("all")) {
@ -1177,7 +1202,6 @@ export default function FormAudioUpdate() {
initState(); initState();
}, [refresh, setValue]); }, [refresh, setValue]);
const handleCheckboxChange = (id: string) => { const handleCheckboxChange = (id: string) => {
if (id === "all") { if (id === "all") {
// Select all options except "all" // Select all options except "all"
@ -1197,12 +1221,19 @@ export default function FormAudioUpdate() {
const save = async (data: AudioSchema) => { const save = async (data: AudioSchema) => {
const finalTags = tags.join(", "); const finalTags = tags.join(", ");
// ✅ tentukan isi description sesuai pilihan bahasa
const descFinal =
selectedLang === "en" && translatedContent
? translatedContent
: data.description;
const requestData = { const requestData = {
...data, ...data,
id: detail?.id, id: detail?.id,
title: data.title, title: data.title,
description: htmlToString(data.description), description: htmlToString(descFinal),
htmlDescription: data.description, htmlDescription: descFinal,
fileTypeId, fileTypeId,
categoryId: selectedTarget, categoryId: selectedTarget,
subCategoryId: selectedTarget, subCategoryId: selectedTarget,
@ -1441,7 +1472,6 @@ export default function FormAudioUpdate() {
</div> </div>
)); ));
function success() { function success() {
MySwal.fire({ MySwal.fire({
title: "Sukses", title: "Sukses",
@ -1565,6 +1595,105 @@ export default function FormAudioUpdate() {
</div> </div>
<div className="py-3 space-y-2"> <div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("description"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
setTranslatedContent(resultText);
}
} catch (err) {
close();
console.error("Translate gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate to English"}
</button>
)}
</div>
{/* Pilihan bahasa untuk posting */}
{roleId === "14" && (
<div className="flex items-center gap-4 mb-2">
<label className="flex items-center gap-2">
<input
type="radio"
value="id"
checked={selectedLang === "id"}
onChange={() => setSelectedLang("id")}
/>
<span>Gunakan Bahasa Indonesia</span>
</label>
</div>
)}
{/* Editor Bahasa Indonesia */}
<Controller
control={control}
name="description"
render={({ field }) => (
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
)}
/>
{/* Editor Bahasa Inggris */}
{translatedContent && (
<div className="mt-4">
<div className="flex flex-col">
<Label className="text-[15px]">English Version</Label>
<label className="flex items-center gap-2">
<input
type="radio"
value="en"
checked={selectedLang === "en"}
onChange={() => setSelectedLang("en")}
disabled={!translatedContent}
/>
<span>Gunakan Bahasa Inggris</span>
</label>
</div>
<CustomEditor
onChange={(val: any) => setTranslatedContent(val)}
initialData={translatedContent}
/>
</div>
)}
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div>
{/* <div className="py-3 space-y-2">
<Label> <Label>
{t("description", { defaultValue: "Description" })} {t("description", { defaultValue: "Description" })}
</Label> </Label>
@ -1580,7 +1709,7 @@ export default function FormAudioUpdate() {
{errors.description.message} {errors.description.message}
</p> </p>
)} )}
</div> </div> */}
<div className="py-3 space-y-2"> <div className="py-3 space-y-2">
<Label> <Label>
{t("select-file", { defaultValue: "Select File" })} {t("select-file", { defaultValue: "Select File" })}
@ -1651,7 +1780,9 @@ export default function FormAudioUpdate() {
d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876" d="M14.702 2.226A1 1 0 0 1 16 3.18v6.027a5.5 5.5 0 0 0-1-.184V6.18L8 8.368V15.5a2.5 2.5 0 1 1-1-2V5.368a1 1 0 0 1 .702-.955zM8 7.32l7-2.187V3.18L8 5.368zM5.5 14a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m13.5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.265-.436l-2.994-1.65a.5.5 0 0 0-.741.438v3.3a.5.5 0 0 0 .741.438l2.994-1.65a.5.5 0 0 0 0-.876"
/> />
</svg>{" "} </svg>{" "}
<p className="font-medium">{file.fileName}</p> <p className="font-medium">
{file.fileName}
</p>
</div> </div>
<a <a
href={file.url} href={file.url}
@ -1714,7 +1845,8 @@ export default function FormAudioUpdate() {
</div> </div>
{/* Detail Wilayah */} {/* Detail Wilayah */}
{fileUnitSelections[index]?.wilayah && isDetailOfRegionShowed && ( {fileUnitSelections[index]?.wilayah &&
isDetailOfRegionShowed && (
<div className="border-t border-gray-200 pt-2"> <div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2"> <p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah: Detail Wilayah:
@ -1724,7 +1856,10 @@ export default function FormAudioUpdate() {
<div className="grid grid-cols-1 md:grid-cols-4 gap-3"> <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[ {[
{ key: "polda", label: "POLDA" }, { key: "polda", label: "POLDA" },
{ key: "satker", label: "SATKER" }, {
key: "satker",
label: "SATKER",
},
].map((item, idx) => ( ].map((item, idx) => (
<div <div
key={item.key} key={item.key}
@ -1781,7 +1916,8 @@ export default function FormAudioUpdate() {
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]"> <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4"> <DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold"> <DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan SATKER Daftar Wilayah POLDA dan
SATKER
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1"> <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
@ -1807,7 +1943,9 @@ export default function FormAudioUpdate() {
onCheckedChange={() => onCheckedChange={() =>
handleFileCheckboxChangePlacement( handleFileCheckboxChangePlacement(
index, index,
Number(polda.id) Number(
polda.id
)
) )
} }
/> />
@ -1816,9 +1954,13 @@ export default function FormAudioUpdate() {
</span> </span>
</Label> </Label>
{/* Tombol expand hanya untuk SATKER POLRI */} {/* Tombol expand hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && ( {polda.name ===
"SATKER POLRI" &&
polda.subDestination && (
<button <button
onClick={(e) => { onClick={(
e
) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggleExpand( toggleExpand(
@ -1843,7 +1985,9 @@ export default function FormAudioUpdate() {
</div> </div>
{/* Sub-items hanya untuk SATKER POLRI */} {/* Sub-items hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && {polda.name ===
"SATKER POLRI" &&
polda.subDestination &&
expandedPolda[ expandedPolda[
polda.id polda.id
] && ( ] && (
@ -1936,7 +2080,9 @@ export default function FormAudioUpdate() {
onCheckedChange={() => onCheckedChange={() =>
handleFileCheckboxChangePlacement( handleFileCheckboxChangePlacement(
index, index,
Number(sub.id) Number(
sub.id
)
) )
} }
/> />
@ -1951,7 +2097,6 @@ export default function FormAudioUpdate() {
</div> </div>
</div> </div>
)} )}
</div> </div>
) )
)} )}

22
components/form/content/image-form.tsx
View File

@ -112,7 +112,6 @@ export default function FormImage() {
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoadingData, setIsLoadingData] = useState<boolean>(false); const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
const [localContent, setLocalContent] = useState(""); const [localContent, setLocalContent] = useState("");
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [articleIds, setArticleIds] = useState<string[]>([]); const [articleIds, setArticleIds] = useState<string[]>([]);
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false); const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
const [articleBody, setArticleBody] = useState<string>(""); const [articleBody, setArticleBody] = useState<string>("");
@ -149,6 +148,7 @@ export default function FormImage() {
const [files, setFiles] = useState<FileWithPreview[]>([]); const [files, setFiles] = useState<FileWithPreview[]>([]);
const [filesTemp, setFilesTemp] = useState<File[]>([]); const [filesTemp, setFilesTemp] = useState<File[]>([]);
const [publishedFor, setPublishedFor] = useState<string[]>([]); const [publishedFor, setPublishedFor] = useState<string[]>([]);
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState(""); const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id"); const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
@ -555,8 +555,9 @@ export default function FormImage() {
const finalTags = tags.join(", "); const finalTags = tags.join(", ");
const finalTitle = isSwitchOn ? title : data.title; const finalTitle = isSwitchOn ? title : data.title;
// const finalDescription = articleBody || data.description;
const finalDescription = isSwitchOn // pilih description dasar
let finalDescription = isSwitchOn
? data.description ? data.description
: selectedFileType === "rewrite" : selectedFileType === "rewrite"
? data.rewriteDescription ? data.rewriteDescription
@ -567,6 +568,15 @@ export default function FormImage() {
return; return;
} }
// 👉 tempelkan hasil translate ke field form agar ikut terkirim
if (translatedContent) {
data.descriptionOri = translatedContent;
console.log(
"🌍 Translate dimasukkan ke descriptionOri:",
translatedContent
);
}
let requestData: { let requestData: {
title: string; title: string;
description: string; description: string;
@ -585,8 +595,8 @@ export default function FormImage() {
} = { } = {
...data, ...data,
title: finalTitle, title: finalTitle,
description: htmlToString(finalDescription), description: htmlToString(finalDescription), // plain text
htmlDescription: finalDescription, htmlDescription: finalDescription, // versi HTML
fileTypeId, fileTypeId,
categoryId: selectedCategory, categoryId: selectedCategory,
subCategoryId: selectedCategory, subCategoryId: selectedCategory,
@ -611,6 +621,7 @@ export default function FormImage() {
Cookies.set("idCreate", response?.data?.data, { expires: 1 }); Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data; id = response?.data?.data;
const formMedia = new FormData(); const formMedia = new FormData();
const thumbnail = files[0]; const thumbnail = files[0];
formMedia.append("file", thumbnail); formMedia.append("file", thumbnail);
@ -620,6 +631,7 @@ export default function FormImage() {
return false; return false;
} }
} }
const progressInfoArr = files.map((item) => ({ const progressInfoArr = files.map((item) => ({
percentage: 0, percentage: 0,
fileName: item.name, fileName: item.name,

2739
components/form/content/image-update-form.tsx
View File

File diff suppressed because it is too large Load Diff

105
components/form/content/teks-form.tsx
View File

@ -542,6 +542,102 @@ export default function FormTeks() {
} }
}, [articleBody, setValue]); }, [articleBody, setValue]);
// const save = async (data: TeksSchema) => {
// loading();
// if (files.length === 0) {
// MySwal.fire("Error", "Minimal 1 file harus diunggah.", "error");
// return;
// }
// const finalTags = tags.join(", ");
// const finalTitle = isSwitchOn ? title : data.title;
// // const finalDescription = articleBody || data.description;
// const finalDescription = isSwitchOn
// ? data.description
// : selectedFileType === "rewrite"
// ? data.rewriteDescription
// : data.descriptionOri;
// if (!finalDescription?.trim()) {
// MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
// return;
// }
// 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),
// htmlDescription: finalDescription,
// 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) {
// requestData.attachFromScheduleId = Number(scheduleId);
// }
// if (id == undefined) {
// const response = await createMedia(requestData);
// console.log("Form Data Submitted:", requestData);
// Cookies.set("idCreate", response?.data?.data, { expires: 1 });
// id = response?.data?.data;
// const formMedia = new FormData();
// const thumbnail = files[0];
// formMedia.append("file", thumbnail);
// const responseThumbnail = await uploadThumbnail(id, formMedia);
// if (responseThumbnail?.error == true) {
// error(responseThumbnail?.message);
// return false;
// }
// }
// const progressInfoArr = files.map((item) => ({
// percentage: 0,
// fileName: item.name,
// }));
// progressInfo = progressInfoArr;
// setIsStartUpload(true);
// setProgressList(progressInfoArr);
// close();
// files.map(async (item: any, index: number) => {
// await uploadResumableFile(
// index,
// String(id),
// item,
// fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
// );
// });
// Cookies.remove("idCreate");
// };
const save = async (data: TeksSchema) => { const save = async (data: TeksSchema) => {
loading(); loading();
@ -564,6 +660,15 @@ export default function FormTeks() {
return; return;
} }
// 👉 tempelkan hasil translate ke field form agar ikut terkirim
if (translatedContent) {
data.descriptionOri = translatedContent;
console.log(
"🌍 Translate dimasukkan ke descriptionOri:",
translatedContent
);
}
let requestData: { let requestData: {
title: string; title: string;
description: string; description: string;

278
components/form/content/teks-update-form.tsx
View File

@ -58,6 +58,9 @@ import {
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { getCookiesDecrypt } from "@/lib/utils";
import { translateText } from "@/service/content/ai";
import { close } from "@/config/swal";
const teksSchema = z.object({ const teksSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -137,24 +140,20 @@ const CustomEditor = dynamic(
export default function FormTeksUpdate() { export default function FormTeksUpdate() {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const router = useRouter(); const router = useRouter();
const { id } = useParams() as { id: string }; const { id } = useParams() as { id: string };
console.log(id); console.log(id);
const editor = useRef(null); const editor = useRef(null);
type TeksSchema = z.infer<typeof teksSchema>; type TeksSchema = z.infer<typeof teksSchema>;
let progressInfo: any = []; let progressInfo: any = [];
let counterUpdateProgress = 0; let counterUpdateProgress = 0;
const [progressList, setProgressList] = useState<any>([]); const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0; let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0); const [counterProgress, setCounterProgress] = useState(0);
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId"); const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId"); const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType"); const scheduleType = Cookies.get("scheduleType");
const t = useTranslations("Form"); const t = useTranslations("Form");
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
@ -162,7 +161,6 @@ export default function FormTeksUpdate() {
const [detail, setDetail] = useState<Detail>(); const [detail, setDetail] = useState<Detail>();
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]); const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
const [files, setFiles] = useState<FileWithPreview[]>([]); const [files, setFiles] = useState<FileWithPreview[]>([]);
const [fileUnitSelections, setFileUnitSelections] = useState< const [fileUnitSelections, setFileUnitSelections] = useState<
Array<{ Array<{
@ -201,16 +199,24 @@ export default function FormTeksUpdate() {
const [tempFile, setTempFile] = useState<TempFileItem[]>([]); const [tempFile, setTempFile] = useState<TempFileItem[]>([]);
const [publishedFor, setPublishedFor] = useState<string[]>([]); const [publishedFor, setPublishedFor] = useState<string[]>([]);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
const roleId = getCookiesDecrypt("urie");
let fileTypeId = "3"; let fileTypeId = "3";
const isDetailOfRegionShowed = false; const isDetailOfRegionShowed = false;
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => { onDrop: (acceptedFiles) => {
setFiles(acceptedFiles.map((file) => Object.assign(file, { setFiles(
acceptedFiles.map((file) =>
Object.assign(file, {
id: uuidv4(), id: uuidv4(),
preview: URL.createObjectURL(file) preview: URL.createObjectURL(file),
}))); })
)
);
}, },
accept: { accept: {
"application/pdf": [], "application/pdf": [],
@ -232,6 +238,7 @@ export default function FormTeksUpdate() {
control, control,
handleSubmit, handleSubmit,
setValue, setValue,
getValues,
formState: { errors }, formState: { errors },
} = useForm<TeksSchema>({ } = useForm<TeksSchema>({
resolver: zodResolver(teksSchema), resolver: zodResolver(teksSchema),
@ -554,7 +561,9 @@ export default function FormTeksUpdate() {
}); });
// Checklist SATKER POLRI dan semua sub-itemsnya // Checklist SATKER POLRI dan semua sub-itemsnya
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI"); const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) { if (satkerItem) {
currentFileLevels.add(Number(satkerItem.id)); currentFileLevels.add(Number(satkerItem.id));
// Checklist semua sub-items di bawah SATKER POLRI // Checklist semua sub-items di bawah SATKER POLRI
@ -588,7 +597,9 @@ export default function FormTeksUpdate() {
}); });
// Hapus SATKER POLRI dan semua sub-itemsnya // Hapus SATKER POLRI dan semua sub-itemsnya
const satkerItem = listDest.find((item: any) => item.name === "SATKER POLRI"); const satkerItem = listDest.find(
(item: any) => item.name === "SATKER POLRI"
);
if (satkerItem) { if (satkerItem) {
currentFileLevels.delete(Number(satkerItem.id)); currentFileLevels.delete(Number(satkerItem.id));
// Hapus semua sub-items di bawah SATKER POLRI // Hapus semua sub-items di bawah SATKER POLRI
@ -687,9 +698,14 @@ export default function FormTeksUpdate() {
// Update filePlacements berdasarkan perubahan di modal // Update filePlacements berdasarkan perubahan di modal
// Cek apakah ini adalah POLDA atau SATKER yang diubah // Cek apakah ini adalah POLDA atau SATKER yang diubah
const changedItem = listDest.find((item: any) => Number(item.id) === levelId); const changedItem = listDest.find(
(item: any) => Number(item.id) === levelId
);
if (changedItem) { if (changedItem) {
if (changedItem.levelNumber === 2 && changedItem.name !== "SATKER POLRI") { if (
changedItem.levelNumber === 2 &&
changedItem.name !== "SATKER POLRI"
) {
// Ini adalah POLDA // Ini adalah POLDA
const isChecked = fileCheckedLevels[fileIndex]?.has(levelId) || false; const isChecked = fileCheckedLevels[fileIndex]?.has(levelId) || false;
setupPlacement(fileIndex, "polda", isChecked); setupPlacement(fileIndex, "polda", isChecked);
@ -798,13 +814,18 @@ export default function FormTeksUpdate() {
// Update filePlacements berdasarkan perubahan di modal // Update filePlacements berdasarkan perubahan di modal
// Cek apakah ini adalah SATKER POLRI yang diubah // Cek apakah ini adalah SATKER POLRI yang diubah
if (polda.name === "SATKER POLRI") { if (polda.name === "SATKER POLRI") {
const isChecked = fileCheckedLevels[fileIndex]?.has(Number(polda.id)) || false; const isChecked =
fileCheckedLevels[fileIndex]?.has(Number(polda.id)) || false;
setupPlacement(fileIndex, "satker", isChecked); setupPlacement(fileIndex, "satker", isChecked);
} }
}; };
const getPlacement = () => { const getPlacement = () => {
const temp: Array<{ mediaFileId: number | string; placements: string; customLocationPlacements: string }> = []; const temp: Array<{
mediaFileId: number | string;
placements: string;
customLocationPlacements: string;
}> = [];
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
const file = files[i] as any; const file = files[i] as any;
const now = filePlacements[i]; const now = filePlacements[i];
@ -923,7 +944,9 @@ export default function FormTeksUpdate() {
} }
// Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist // Auto-checklist "all" jika nasional, wilayah, dan international ter-checklist
const requiredItems = ["mabes", "wilayah", "international"]; const requiredItems = ["mabes", "wilayah", "international"];
const hasAllRequired = requiredItems.every(item => now.includes(item)); const hasAllRequired = requiredItems.every((item) =>
now.includes(item)
);
if (hasAllRequired && !now.includes("all")) { if (hasAllRequired && !now.includes("all")) {
now.push("all"); now.push("all");
} }
@ -966,8 +989,8 @@ export default function FormTeksUpdate() {
} else { } else {
if (placement === "wilayah") { if (placement === "wilayah") {
// Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker // Ketika wilayah di-uncheck, hapus wilayah, polda, dan satker
const now = temp[index]?.filter((a) => const now = temp[index]?.filter(
a !== "wilayah" && a !== "polda" && a !== "satker" (a) => a !== "wilayah" && a !== "polda" && a !== "satker"
); );
temp[index] = now; temp[index] = now;
} else if (placement === "polda") { } else if (placement === "polda") {
@ -995,7 +1018,9 @@ export default function FormTeksUpdate() {
const currentNow = temp[index] || []; const currentNow = temp[index] || [];
if (currentNow.includes("all")) { if (currentNow.includes("all")) {
const requiredItems = ["mabes", "wilayah", "international"]; const requiredItems = ["mabes", "wilayah", "international"];
const hasAllRequired = requiredItems.every(item => currentNow.includes(item)); const hasAllRequired = requiredItems.every((item) =>
currentNow.includes(item)
);
if (!hasAllRequired) { if (!hasAllRequired) {
const newData = currentNow.filter((b) => b !== "all"); const newData = currentNow.filter((b) => b !== "all");
temp[index] = newData; temp[index] = newData;
@ -1107,19 +1132,24 @@ export default function FormTeksUpdate() {
setFiles(formattedFiles); setFiles(formattedFiles);
// Inisialisasi filePlacements dari detail (biarkan format backend, normalisasi dilakukan saat submit) // Inisialisasi filePlacements dari detail (biarkan format backend, normalisasi dilakukan saat submit)
const initialFilePlacements: string[][] = details.files.map((file: any) => { const initialFilePlacements: string[][] = details.files.map(
(file: any) => {
if (file.placements) { if (file.placements) {
return file.placements.split(",").map((p: string) => p.trim()); return file.placements.split(",").map((p: string) => p.trim());
} }
return []; return [];
}); }
);
setFilePlacements(initialFilePlacements); setFilePlacements(initialFilePlacements);
// Inisialisasi fileCheckedLevels dari detail // Inisialisasi fileCheckedLevels dari detail
const initialFileCheckedLevels: Set<number>[] = details.files.map((file: any) => { const initialFileCheckedLevels: Set<number>[] = details.files.map(
(file: any) => {
const checkedLevels = new Set<number>(); const checkedLevels = new Set<number>();
if (file.customLocationPlacements) { if (file.customLocationPlacements) {
const levelIds = file.customLocationPlacements.split(",").map((id: string) => Number(id.trim())); const levelIds = file.customLocationPlacements
.split(",")
.map((id: string) => Number(id.trim()));
levelIds.forEach((id: number) => { levelIds.forEach((id: number) => {
if (!isNaN(id)) { if (!isNaN(id)) {
checkedLevels.add(id); checkedLevels.add(id);
@ -1127,7 +1157,8 @@ export default function FormTeksUpdate() {
}); });
} }
return checkedLevels; return checkedLevels;
}); }
);
setFileCheckedLevels(initialFileCheckedLevels); setFileCheckedLevels(initialFileCheckedLevels);
// Inisialisasi fileUnitSelections dari detail // Inisialisasi fileUnitSelections dari detail
@ -1142,7 +1173,9 @@ export default function FormTeksUpdate() {
}; };
if (file.placements) { if (file.placements) {
const placements = file.placements.split(",").map((p: string) => p.trim()); const placements = file.placements
.split(",")
.map((p: string) => p.trim());
if (placements.includes("all")) { if (placements.includes("all")) {
selection.semua = true; selection.semua = true;
@ -1153,7 +1186,8 @@ export default function FormTeksUpdate() {
selection.satker = true; selection.satker = true;
} else { } else {
if (placements.includes("mabes")) selection.nasional = true; if (placements.includes("mabes")) selection.nasional = true;
if (placements.includes("international")) selection.international = true; if (placements.includes("international"))
selection.international = true;
if (placements.includes("polda")) selection.polda = true; if (placements.includes("polda")) selection.polda = true;
if (placements.includes("satker")) selection.satker = true; if (placements.includes("satker")) selection.satker = true;
// Wilayah aktif jika ada "wilayah" ATAU ada polda/satker // Wilayah aktif jika ada "wilayah" ATAU ada polda/satker
@ -1195,7 +1229,6 @@ export default function FormTeksUpdate() {
initState(); initState();
}, [refresh, setValue]); }, [refresh, setValue]);
const handleCheckboxChange = (id: string) => { const handleCheckboxChange = (id: string) => {
if (id === "all") { if (id === "all") {
// Select all options except "all" // Select all options except "all"
@ -1216,12 +1249,19 @@ export default function FormTeksUpdate() {
const save = async (data: TeksSchema) => { const save = async (data: TeksSchema) => {
loading(); loading();
const finalTags = tags.join(", "); const finalTags = tags.join(", ");
// ✅ tentukan isi description sesuai pilihan bahasa
const descFinal =
selectedLang === "en" && translatedContent
? translatedContent
: data.description;
const requestData = { const requestData = {
...data, ...data,
id: detail?.id, id: detail?.id,
title: data.title, title: data.title,
description: htmlToString(data.description), description: htmlToString(descFinal), // plain text
htmlDescription: data.description, htmlDescription: descFinal, // HTML (dipakai di editor/preview)
fileTypeId, fileTypeId,
categoryId: selectedTarget, categoryId: selectedTarget,
subCategoryId: selectedTarget, subCategoryId: selectedTarget,
@ -1456,7 +1496,6 @@ export default function FormTeksUpdate() {
</div> </div>
)); ));
const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter" && e.currentTarget.value.trim()) { if (e.key === "Enter" && e.currentTarget.value.trim()) {
e.preventDefault(); e.preventDefault();
@ -1552,7 +1591,107 @@ export default function FormTeksUpdate() {
</Select> </Select>
</div> </div>
</div> </div>
<div className="py-3 space-y-2"> <div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("description"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
setTranslatedContent(resultText);
}
} catch (err) {
close();
console.error("Translate gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate to English"}
</button>
)}
</div>
{/* Pilihan bahasa untuk posting */}
{roleId === "14" && (
<div className="flex items-center gap-4 mb-2">
<label className="flex items-center gap-2">
<input
type="radio"
value="id"
checked={selectedLang === "id"}
onChange={() => setSelectedLang("id")}
/>
<span>Gunakan Bahasa Indonesia</span>
</label>
</div>
)}
{/* Editor Bahasa Indonesia */}
<Controller
control={control}
name="description"
render={({ field }) => (
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
)}
/>
{/* Editor Bahasa Inggris */}
{translatedContent && (
<div className="mt-4">
<div className="flex flex-col">
<Label className="text-[15px]">English Version</Label>
<label className="flex items-center gap-2">
<input
type="radio"
value="en"
checked={selectedLang === "en"}
onChange={() => setSelectedLang("en")}
disabled={!translatedContent}
/>
<span>Gunakan Bahasa Inggris</span>
</label>
</div>
<CustomEditor
onChange={(val: any) => setTranslatedContent(val)}
initialData={translatedContent}
/>
</div>
)}
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div>
{/* <div className="py-3 space-y-2">
<Label> <Label>
{t("description", { defaultValue: "Description" })} {t("description", { defaultValue: "Description" })}
</Label> </Label>
@ -1568,7 +1707,7 @@ export default function FormTeksUpdate() {
{errors.description.message} {errors.description.message}
</p> </p>
)} )}
</div> </div> */}
<div className="py-3 space-y-2"> <div className="py-3 space-y-2">
<Label> <Label>
{t("select-file", { defaultValue: "Select File" })} {t("select-file", { defaultValue: "Select File" })}
@ -1669,7 +1808,9 @@ export default function FormTeksUpdate() {
<Checkbox <Checkbox
// id={`${item.key}-${index}`} // id={`${item.key}-${index}`}
checked={ checked={
fileUnitSelections[files.indexOf(file)]?.[ fileUnitSelections[
files.indexOf(file)
]?.[
item.key as keyof typeof unitSelection item.key as keyof typeof unitSelection
] || false ] || false
} }
@ -1697,7 +1838,9 @@ export default function FormTeksUpdate() {
</div> </div>
{/* Detail Wilayah */} {/* Detail Wilayah */}
{fileUnitSelections[files.indexOf(file)]?.wilayah && isDetailOfRegionShowed && ( {fileUnitSelections[files.indexOf(file)]
?.wilayah &&
isDetailOfRegionShowed && (
<div className="border-t border-gray-200 pt-2"> <div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2"> <p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah: Detail Wilayah:
@ -1707,7 +1850,10 @@ export default function FormTeksUpdate() {
<div className="grid grid-cols-1 md:grid-cols-4 gap-3"> <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[ {[
{ key: "polda", label: "POLDA" }, { key: "polda", label: "POLDA" },
{ key: "satker", label: "SATKER" }, {
key: "satker",
label: "SATKER",
},
].map((item, idx) => ( ].map((item, idx) => (
<div <div
key={item.key} key={item.key}
@ -1716,7 +1862,9 @@ export default function FormTeksUpdate() {
<Checkbox <Checkbox
id={`${item.key}-${index}`} id={`${item.key}-${index}`}
checked={ checked={
fileUnitSelections[files.indexOf(file)]?.[ fileUnitSelections[
files.indexOf(file)
]?.[
item.key as keyof typeof unitSelection item.key as keyof typeof unitSelection
] || false ] || false
} }
@ -1764,7 +1912,8 @@ export default function FormTeksUpdate() {
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]"> <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4"> <DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold"> <DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan SATKER Daftar Wilayah POLDA dan
SATKER
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1"> <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
@ -1780,7 +1929,9 @@ export default function FormTeksUpdate() {
<Checkbox <Checkbox
checked={ checked={
fileCheckedLevels[ fileCheckedLevels[
files.indexOf(file) files.indexOf(
file
)
]?.has( ]?.has(
Number( Number(
polda.id polda.id
@ -1789,8 +1940,12 @@ export default function FormTeksUpdate() {
} }
onCheckedChange={() => onCheckedChange={() =>
handleFileCheckboxChangePlacement( handleFileCheckboxChangePlacement(
files.indexOf(file), files.indexOf(
Number(polda.id) file
),
Number(
polda.id
)
) )
} }
/> />
@ -1799,20 +1954,30 @@ export default function FormTeksUpdate() {
</span> </span>
</Label> </Label>
{/* Tombol expand hanya untuk SATKER POLRI */} {/* Tombol expand hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && ( {polda.name ===
"SATKER POLRI" &&
polda.subDestination && (
<button <button
onClick={(e) => { onClick={(
e
) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggleExpand( toggleExpand(
Number(polda.id) Number(
polda.id
)
); );
}} }}
className="p-1 hover:bg-gray-100 rounded-md transition-colors" className="p-1 hover:bg-gray-100 rounded-md transition-colors"
> >
<Icon <Icon
icon={ icon={
expandedPolda[Number(polda.id)] expandedPolda[
Number(
polda.id
)
]
? "mdi:chevron-up" ? "mdi:chevron-up"
: "mdi:chevron-down" : "mdi:chevron-down"
} }
@ -1824,8 +1989,12 @@ export default function FormTeksUpdate() {
</div> </div>
{/* Sub-items hanya untuk SATKER POLRI */} {/* Sub-items hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && {polda.name ===
expandedPolda[Number(polda.id)] && ( "SATKER POLRI" &&
polda.subDestination &&
expandedPolda[
Number(polda.id)
] && (
<div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2"> <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
{/* Tombol Pilih Semua untuk sub-items */} {/* Tombol Pilih Semua untuk sub-items */}
<div className="mb-2 flex justify-start"> <div className="mb-2 flex justify-start">
@ -1836,7 +2005,9 @@ export default function FormTeksUpdate() {
sub: any sub: any
) => ) =>
fileCheckedLevels[ fileCheckedLevels[
files.indexOf(file) files.indexOf(
file
)
]?.has( ]?.has(
Number( Number(
sub.id sub.id
@ -1850,7 +2021,9 @@ export default function FormTeksUpdate() {
className="text-xs h-6 px-2" className="text-xs h-6 px-2"
onClick={() => onClick={() =>
handleSelectAllSubItems( handleSelectAllSubItems(
files.indexOf(file), files.indexOf(
file
),
polda polda
) )
} }
@ -1904,7 +2077,9 @@ export default function FormTeksUpdate() {
<Checkbox <Checkbox
checked={ checked={
fileCheckedLevels[ fileCheckedLevels[
files.indexOf(file) files.indexOf(
file
)
]?.has( ]?.has(
Number( Number(
sub.id sub.id
@ -1914,8 +2089,12 @@ export default function FormTeksUpdate() {
} }
onCheckedChange={() => onCheckedChange={() =>
handleFileCheckboxChangePlacement( handleFileCheckboxChangePlacement(
files.indexOf(file), files.indexOf(
Number(sub.id) file
),
Number(
sub.id
)
) )
} }
/> />
@ -1930,7 +2109,6 @@ export default function FormTeksUpdate() {
</div> </div>
</div> </div>
)} )}
</div> </div>
) )
)} )}

9
components/form/content/video-form.tsx
View File

@ -549,6 +549,15 @@ export default function FormVideo() {
return; return;
} }
// 👉 tempelkan hasil translate ke form agar ikut terkirim
if (translatedContent) {
data.descriptionOri = translatedContent;
console.log(
"🌍 Translate dimasukkan ke descriptionOri:",
translatedContent
);
}
let requestData: { let requestData: {
title: string; title: string;
description: string; description: string;

488
components/form/content/video-update-form.tsx
View File

@ -25,7 +25,14 @@ import {
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import {
Dialog,
DialogClose,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { register } from "module"; import { register } from "module";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
@ -61,6 +68,9 @@ import { useTranslations } from "next-intl";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { htmlToString } from "@/utils/globals"; import { htmlToString } from "@/utils/globals";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { getCookiesDecrypt } from "@/lib/utils";
import { translateText } from "@/service/content/ai";
import { close } from "@/config/swal";
const videoSchema = z.object({ const videoSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -102,7 +112,13 @@ type Option = {
name: string; name: string;
}; };
type PlacementType = "all" | "mabes" | "wilayah" | "polda" | "satker" | "international"; type PlacementType =
| "all"
| "mabes"
| "wilayah"
| "polda"
| "satker"
| "international";
interface FilePlacement { interface FilePlacement {
id: string; id: string;
@ -147,9 +163,7 @@ export default function FormVideoUpdate() {
type VideoSchema = z.infer<typeof videoSchema>; type VideoSchema = z.infer<typeof videoSchema>;
let progressInfo: any = []; let progressInfo: any = [];
let counterUpdateProgress = 0; let counterUpdateProgress = 0;
const isDetailOfRegionShowed = false; const isDetailOfRegionShowed = false;
const [progressList, setProgressList] = useState<any>([]); const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0; let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
@ -199,12 +213,19 @@ export default function FormVideoUpdate() {
const [fileCheckedLevels, setFileCheckedLevels] = useState<{ const [fileCheckedLevels, setFileCheckedLevels] = useState<{
[fileId: string]: Set<number>; [fileId: string]: Set<number>;
}>({}); }>({});
const [isUpdatingFromMainCheckbox, setIsUpdatingFromMainCheckbox] = useState(false); const [isUpdatingFromMainCheckbox, setIsUpdatingFromMainCheckbox] =
const [mainCheckboxChangeType, setMainCheckboxChangeType] = useState<string | null>(null); useState(false);
const [mainCheckboxChangeType, setMainCheckboxChangeType] = useState<
string | null
>(null);
const [filePlacements, setFilePlacements] = useState<{ const [filePlacements, setFilePlacements] = useState<{
[fileId: string]: PlacementType[]; [fileId: string]: PlacementType[];
}>({}); }>({});
const [tempFile, setTempFile] = useState<TempFileItem | null>(null); const [tempFile, setTempFile] = useState<TempFileItem | null>(null);
const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
const [translatedContent, setTranslatedContent] = React.useState("");
const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
const roleId = getCookiesDecrypt("urie");
const options: Option[] = [ const options: Option[] = [
{ id: "all", name: "SEMUA" }, { id: "all", name: "SEMUA" },
@ -218,10 +239,14 @@ export default function FormVideoUpdate() {
const { getRootProps, getInputProps } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => { onDrop: (acceptedFiles) => {
setFiles(acceptedFiles.map((file) => Object.assign(file, { setFiles(
acceptedFiles.map((file) =>
Object.assign(file, {
id: uuidv4(), id: uuidv4(),
preview: URL.createObjectURL(file) preview: URL.createObjectURL(file),
}))); })
)
);
}, },
accept: { accept: {
"video/*": [], "video/*": [],
@ -231,23 +256,13 @@ export default function FormVideoUpdate() {
const { const {
control, control,
handleSubmit, handleSubmit,
getValues,
setValue, setValue,
formState: { errors }, formState: { errors },
} = useForm<VideoSchema>({ } = useForm<VideoSchema>({
resolver: zodResolver(videoSchema), resolver: zodResolver(videoSchema),
}); });
// const handleKeyDown = (e: any) => {
// const newTag = e.target.value.trim(); // Ambil nilai input
// if (e.key === "Enter" && newTag) {
// e.preventDefault(); // Hentikan submit form
// if (!tags.includes(newTag)) {
// setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
// setValue("tags", ""); // Kosongkan input
// }
// }
// };
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => { const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files) { if (event.target.files) {
const files = Array.from(event.target.files); const files = Array.from(event.target.files);
@ -374,7 +389,9 @@ export default function FormVideoUpdate() {
const initialFilePlacements: { [key: string]: PlacementType[] } = {}; const initialFilePlacements: { [key: string]: PlacementType[] } = {};
details.files.forEach((file: any) => { details.files.forEach((file: any) => {
if (file.placements) { if (file.placements) {
const placements = file.placements.split(",").map((p: string) => p.trim() as PlacementType); const placements = file.placements
.split(",")
.map((p: string) => p.trim() as PlacementType);
initialFilePlacements[file.id] = placements; initialFilePlacements[file.id] = placements;
} }
}); });
@ -384,7 +401,9 @@ export default function FormVideoUpdate() {
const initialFileCheckedLevels: { [key: string]: Set<number> } = {}; const initialFileCheckedLevels: { [key: string]: Set<number> } = {};
details.files.forEach((file: any) => { details.files.forEach((file: any) => {
if (file.customLocationPlacements) { if (file.customLocationPlacements) {
const levelIds = file.customLocationPlacements.split(",").map((id: string) => parseInt(id.trim())); const levelIds = file.customLocationPlacements
.split(",")
.map((id: string) => parseInt(id.trim()));
initialFileCheckedLevels[file.id] = new Set(levelIds); initialFileCheckedLevels[file.id] = new Set(levelIds);
} }
}); });
@ -394,11 +413,16 @@ export default function FormVideoUpdate() {
const initialFileUnitSelections: { [key: string]: any } = {}; const initialFileUnitSelections: { [key: string]: any } = {};
details.files.forEach((file: any) => { details.files.forEach((file: any) => {
if (file.placements) { if (file.placements) {
const placements = file.placements.split(",").map((p: string) => p.trim()); const placements = file.placements
.split(",")
.map((p: string) => p.trim());
initialFileUnitSelections[file.id] = { initialFileUnitSelections[file.id] = {
semua: placements.includes("all"), semua: placements.includes("all"),
nasional: placements.includes("mabes"), nasional: placements.includes("mabes"),
wilayah: placements.includes("wilayah") || placements.includes("polda") || placements.includes("satker"), wilayah:
placements.includes("wilayah") ||
placements.includes("polda") ||
placements.includes("satker"),
international: placements.includes("international"), international: placements.includes("international"),
polda: placements.includes("polda"), polda: placements.includes("polda"),
satker: placements.includes("satker"), satker: placements.includes("satker"),
@ -439,18 +463,32 @@ export default function FormVideoUpdate() {
const updateMainCheckboxFromModalLegacy = () => { const updateMainCheckboxFromModalLegacy = () => {
const checkedPoldaCount = listDest.filter( const checkedPoldaCount = listDest.filter(
(item) => item.levelNumber === 2 && item.name !== "SATKER POLRI" && checkedLevels.has(item.id) (item) =>
item.levelNumber === 2 &&
item.name !== "SATKER POLRI" &&
checkedLevels.has(item.id)
).length; ).length;
const hasSelectedPolda = checkedPoldaCount > 0; const hasSelectedPolda = checkedPoldaCount > 0;
const allPoldaChecked = checkedPoldaCount === listDest.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI").length; const allPoldaChecked =
checkedPoldaCount ===
listDest.filter(
(item) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
).length;
const checkedSatkerCount = listDest.filter( const checkedSatkerCount = listDest.filter(
(item) => item.levelNumber === 2 && item.name === "SATKER POLRI" && checkedLevels.has(item.id) (item) =>
item.levelNumber === 2 &&
item.name === "SATKER POLRI" &&
checkedLevels.has(item.id)
).length; ).length;
const hasSelectedSatker = checkedSatkerCount > 0; const hasSelectedSatker = checkedSatkerCount > 0;
const allSatkerChecked = checkedSatkerCount === listDest.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI").length; const allSatkerChecked =
checkedSatkerCount ===
listDest.filter(
(item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
).length;
setUnitSelection(prev => ({ setUnitSelection((prev) => ({
...prev, ...prev,
polda: hasSelectedPolda, polda: hasSelectedPolda,
satker: hasSelectedSatker, satker: hasSelectedSatker,
@ -461,83 +499,115 @@ export default function FormVideoUpdate() {
const syncModalWithMainCheckbox = () => { const syncModalWithMainCheckbox = () => {
if (mainCheckboxChangeType === "wilayah_checked") { if (mainCheckboxChangeType === "wilayah_checked") {
const poldaIds = listDest const poldaIds = listDest
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
)
.map((item) => item.id);
const satkerIds = listDest const satkerIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
)
.map((item) => item.id);
const allSatkerSubIds = listDest const allSatkerSubIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.flatMap(item => item.subDestination.map(sub => sub.id)); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
)
.flatMap((item) => item.subDestination.map((sub) => sub.id));
setCheckedLevels(prev => { setCheckedLevels((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
[...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach(id => newSet.add(id)); [...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach((id) =>
newSet.add(id)
);
return newSet; return newSet;
}); });
} else if (mainCheckboxChangeType === "wilayah_unchecked") { } else if (mainCheckboxChangeType === "wilayah_unchecked") {
const poldaIds = listDest const poldaIds = listDest
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
)
.map((item) => item.id);
const satkerIds = listDest const satkerIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
)
.map((item) => item.id);
const allSatkerSubIds = listDest const allSatkerSubIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.flatMap(item => item.subDestination.map(sub => sub.id)); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
)
.flatMap((item) => item.subDestination.map((sub) => sub.id));
setCheckedLevels(prev => { setCheckedLevels((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
[...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach(id => newSet.delete(id)); [...poldaIds, ...satkerIds, ...allSatkerSubIds].forEach((id) =>
newSet.delete(id)
);
return newSet; return newSet;
}); });
} else if (mainCheckboxChangeType === "polda_checked") { } else if (mainCheckboxChangeType === "polda_checked") {
const poldaIds = listDest const poldaIds = listDest
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
setCheckedLevels(prev => { )
.map((item) => item.id);
setCheckedLevels((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
poldaIds.forEach(id => newSet.add(id)); poldaIds.forEach((id) => newSet.add(id));
return newSet; return newSet;
}); });
} else if (mainCheckboxChangeType === "polda_unchecked") { } else if (mainCheckboxChangeType === "polda_unchecked") {
const poldaIds = listDest const poldaIds = listDest
.filter(item => item.levelNumber === 2 && item.name !== "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name !== "SATKER POLRI"
setCheckedLevels(prev => { )
.map((item) => item.id);
setCheckedLevels((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
poldaIds.forEach(id => newSet.delete(id)); poldaIds.forEach((id) => newSet.delete(id));
return newSet; return newSet;
}); });
} else if (mainCheckboxChangeType === "satker_checked") { } else if (mainCheckboxChangeType === "satker_checked") {
const satkerIds = listDest const satkerIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
)
.map((item) => item.id);
const allSatkerSubIds = listDest const allSatkerSubIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.flatMap(item => item.subDestination.map(sub => sub.id)); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
setCheckedLevels(prev => { )
.flatMap((item) => item.subDestination.map((sub) => sub.id));
setCheckedLevels((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
[...satkerIds, ...allSatkerSubIds].forEach(id => newSet.add(id)); [...satkerIds, ...allSatkerSubIds].forEach((id) => newSet.add(id));
return newSet; return newSet;
}); });
} else if (mainCheckboxChangeType === "satker_unchecked") { } else if (mainCheckboxChangeType === "satker_unchecked") {
const satkerIds = listDest const satkerIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.map(item => item.id); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
)
.map((item) => item.id);
const allSatkerSubIds = listDest const allSatkerSubIds = listDest
.filter(item => item.levelNumber === 2 && item.name === "SATKER POLRI") .filter(
.flatMap(item => item.subDestination.map(sub => sub.id)); (item) => item.levelNumber === 2 && item.name === "SATKER POLRI"
setCheckedLevels(prev => { )
.flatMap((item) => item.subDestination.map((sub) => sub.id));
setCheckedLevels((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
[...satkerIds, ...allSatkerSubIds].forEach(id => newSet.delete(id)); [...satkerIds, ...allSatkerSubIds].forEach((id) => newSet.delete(id));
return newSet; return newSet;
}); });
} }
}; };
const handleFileUnitChange = (fileId: string, key: string, value: boolean) => { const handleFileUnitChange = (
setFileUnitSelections(prev => { fileId: string,
key: string,
value: boolean
) => {
setFileUnitSelections((prev) => {
const currentSelection = prev[fileId] || { const currentSelection = prev[fileId] || {
semua: false, semua: false,
nasional: false, nasional: false,
@ -554,22 +624,22 @@ export default function FormVideoUpdate() {
newSelection.satker = true; newSelection.satker = true;
// Update fileCheckedLevels for wilayah // Update fileCheckedLevels for wilayah
setFileCheckedLevels(prevLevels => { setFileCheckedLevels((prevLevels) => {
const currentFileLevels = prevLevels[fileId] || new Set<number>(); const currentFileLevels = prevLevels[fileId] || new Set<number>();
const newFileLevels = new Set(currentFileLevels); const newFileLevels = new Set(currentFileLevels);
// Add all POLDA items // Add all POLDA items
listDest.forEach(item => { listDest.forEach((item) => {
if (item.levelNumber === 2 && item.name !== "SATKER POLRI") { if (item.levelNumber === 2 && item.name !== "SATKER POLRI") {
newFileLevels.add(item.id); newFileLevels.add(item.id);
} }
}); });
// Add SATKER POLRI items and their sub-destinations // Add SATKER POLRI items and their sub-destinations
listDest.forEach(item => { listDest.forEach((item) => {
if (item.levelNumber === 2 && item.name === "SATKER POLRI") { if (item.levelNumber === 2 && item.name === "SATKER POLRI") {
newFileLevels.add(item.id); newFileLevels.add(item.id);
item.subDestination.forEach(satkerItem => { item.subDestination.forEach((satkerItem) => {
newFileLevels.add(satkerItem.id); newFileLevels.add(satkerItem.id);
}); });
} }
@ -582,7 +652,7 @@ export default function FormVideoUpdate() {
newSelection.satker = false; newSelection.satker = false;
// Clear fileCheckedLevels for wilayah // Clear fileCheckedLevels for wilayah
setFileCheckedLevels(prevLevels => { setFileCheckedLevels((prevLevels) => {
const newFileLevels = new Set<number>(); const newFileLevels = new Set<number>();
return { ...prevLevels, [fileId]: newFileLevels }; return { ...prevLevels, [fileId]: newFileLevels };
}); });
@ -598,41 +668,51 @@ export default function FormVideoUpdate() {
}); });
// Update filePlacements // Update filePlacements
setFilePlacements(prev => { setFilePlacements((prev) => {
const currentPlacements = prev[fileId] || []; const currentPlacements = prev[fileId] || [];
let newPlacements = [...currentPlacements]; let newPlacements = [...currentPlacements];
if (key === "semua" && value) { if (key === "semua" && value) {
newPlacements = ["all", "mabes", "wilayah", "polda", "satker", "international"]; newPlacements = [
"all",
"mabes",
"wilayah",
"polda",
"satker",
"international",
];
} else if (key === "semua" && !value) { } else if (key === "semua" && !value) {
newPlacements = []; newPlacements = [];
} else if (key === "nasional" && value) { } else if (key === "nasional" && value) {
if (!newPlacements.includes("mabes")) newPlacements.push("mabes"); if (!newPlacements.includes("mabes")) newPlacements.push("mabes");
} else if (key === "nasional" && !value) { } else if (key === "nasional" && !value) {
newPlacements = newPlacements.filter(p => p !== "mabes"); newPlacements = newPlacements.filter((p) => p !== "mabes");
} else if (key === "wilayah" && value) { } else if (key === "wilayah" && value) {
if (!newPlacements.includes("wilayah")) newPlacements.push("wilayah"); if (!newPlacements.includes("wilayah")) newPlacements.push("wilayah");
if (!newPlacements.includes("polda")) newPlacements.push("polda"); if (!newPlacements.includes("polda")) newPlacements.push("polda");
if (!newPlacements.includes("satker")) newPlacements.push("satker"); if (!newPlacements.includes("satker")) newPlacements.push("satker");
} else if (key === "wilayah" && !value) { } else if (key === "wilayah" && !value) {
newPlacements = newPlacements.filter(p => !["wilayah", "polda", "satker"].includes(p)); newPlacements = newPlacements.filter(
(p) => !["wilayah", "polda", "satker"].includes(p)
);
} else if (key === "international" && value) { } else if (key === "international" && value) {
if (!newPlacements.includes("international")) newPlacements.push("international"); if (!newPlacements.includes("international"))
newPlacements.push("international");
} else if (key === "international" && !value) { } else if (key === "international" && !value) {
newPlacements = newPlacements.filter(p => p !== "international"); newPlacements = newPlacements.filter((p) => p !== "international");
} else if (key === "polda" && value) { } else if (key === "polda" && value) {
if (!newPlacements.includes("polda")) newPlacements.push("polda"); if (!newPlacements.includes("polda")) newPlacements.push("polda");
} else if (key === "polda" && !value) { } else if (key === "polda" && !value) {
newPlacements = newPlacements.filter(p => p !== "polda"); newPlacements = newPlacements.filter((p) => p !== "polda");
} else if (key === "satker" && value) { } else if (key === "satker" && value) {
if (!newPlacements.includes("satker")) newPlacements.push("satker"); if (!newPlacements.includes("satker")) newPlacements.push("satker");
} else if (key === "satker" && !value) { } else if (key === "satker" && !value) {
newPlacements = newPlacements.filter(p => p !== "satker"); newPlacements = newPlacements.filter((p) => p !== "satker");
} }
// Remove "all" if any individual option is unchecked // Remove "all" if any individual option is unchecked
if (newPlacements.includes("all") && !value && key !== "semua") { if (newPlacements.includes("all") && !value && key !== "semua") {
newPlacements = newPlacements.filter(p => p !== "all"); newPlacements = newPlacements.filter((p) => p !== "all");
} }
return { ...prev, [fileId]: newPlacements }; return { ...prev, [fileId]: newPlacements };
@ -656,8 +736,12 @@ export default function FormVideoUpdate() {
} }
}; };
const handleFileCheckboxChangePlacement = (fileId: string, poldaItem: Destination, isChecked: boolean) => { const handleFileCheckboxChangePlacement = (
setFileCheckedLevels(prev => { fileId: string,
poldaItem: Destination,
isChecked: boolean
) => {
setFileCheckedLevels((prev) => {
const currentFileLevels = prev[fileId] || new Set<number>(); const currentFileLevels = prev[fileId] || new Set<number>();
const newFileLevels = new Set(currentFileLevels); const newFileLevels = new Set(currentFileLevels);
@ -684,54 +768,58 @@ export default function FormVideoUpdate() {
// Update fileUnitSelections based on checked levels // Update fileUnitSelections based on checked levels
const updatedFileLevels = fileCheckedLevels[fileId] || new Set<number>(); const updatedFileLevels = fileCheckedLevels[fileId] || new Set<number>();
const hasPolda = listDest.some(item => const hasPolda = listDest.some(
(item) =>
item.levelNumber === 2 && item.levelNumber === 2 &&
item.name !== "SATKER POLRI" && item.name !== "SATKER POLRI" &&
updatedFileLevels.has(item.id) updatedFileLevels.has(item.id)
); );
const hasSatker = listDest.some(item => const hasSatker = listDest.some(
(item) =>
item.levelNumber === 2 && item.levelNumber === 2 &&
item.name === "SATKER POLRI" && item.name === "SATKER POLRI" &&
updatedFileLevels.has(item.id) updatedFileLevels.has(item.id)
); );
setFileUnitSelections(prev => ({ setFileUnitSelections((prev) => ({
...prev, ...prev,
[fileId]: { [fileId]: {
...prev[fileId], ...prev[fileId],
polda: hasPolda, polda: hasPolda,
satker: hasSatker, satker: hasSatker,
wilayah: hasPolda || hasSatker, wilayah: hasPolda || hasSatker,
} },
})); }));
}; };
const updateMainCheckboxFromModal = (fileId: string) => { const updateMainCheckboxFromModal = (fileId: string) => {
const fileLevels = fileCheckedLevels[fileId] || new Set<number>(); const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
const hasPolda = listDest.some(item => const hasPolda = listDest.some(
(item) =>
item.levelNumber === 2 && item.levelNumber === 2 &&
item.name !== "SATKER POLRI" && item.name !== "SATKER POLRI" &&
fileLevels.has(item.id) fileLevels.has(item.id)
); );
const hasSatker = listDest.some(item => const hasSatker = listDest.some(
(item) =>
item.levelNumber === 2 && item.levelNumber === 2 &&
item.name === "SATKER POLRI" && item.name === "SATKER POLRI" &&
fileLevels.has(item.id) fileLevels.has(item.id)
); );
setFileUnitSelections(prev => ({ setFileUnitSelections((prev) => ({
...prev, ...prev,
[fileId]: { [fileId]: {
...prev[fileId], ...prev[fileId],
polda: hasPolda, polda: hasPolda,
satker: hasSatker, satker: hasSatker,
wilayah: hasPolda || hasSatker, wilayah: hasPolda || hasSatker,
} },
})); }));
}; };
const toggleExpand = (poldaId: number) => { const toggleExpand = (poldaId: number) => {
setExpandedPolda(prev => { setExpandedPolda((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);
if (newSet.has(poldaId)) { if (newSet.has(poldaId)) {
newSet.delete(poldaId); newSet.delete(poldaId);
@ -744,22 +832,22 @@ export default function FormVideoUpdate() {
const handleSelectAllSubItems = (fileId: string, poldaItem: Destination) => { const handleSelectAllSubItems = (fileId: string, poldaItem: Destination) => {
const fileLevels = fileCheckedLevels[fileId] || new Set<number>(); const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
const allSubItemsSelected = poldaItem.subDestination.every(subItem => const allSubItemsSelected = poldaItem.subDestination.every((subItem) =>
fileLevels.has(subItem.id) fileLevels.has(subItem.id)
); );
setFileCheckedLevels(prev => { setFileCheckedLevels((prev) => {
const currentFileLevels = prev[fileId] || new Set<number>(); const currentFileLevels = prev[fileId] || new Set<number>();
const newFileLevels = new Set(currentFileLevels); const newFileLevels = new Set(currentFileLevels);
if (allSubItemsSelected) { if (allSubItemsSelected) {
// Unselect all sub-items // Unselect all sub-items
poldaItem.subDestination.forEach(subItem => { poldaItem.subDestination.forEach((subItem) => {
newFileLevels.delete(subItem.id); newFileLevels.delete(subItem.id);
}); });
} else { } else {
// Select all sub-items // Select all sub-items
poldaItem.subDestination.forEach(subItem => { poldaItem.subDestination.forEach((subItem) => {
newFileLevels.add(subItem.id); newFileLevels.add(subItem.id);
}); });
} }
@ -772,7 +860,11 @@ export default function FormVideoUpdate() {
const temp = []; const temp = [];
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
const file = files[i] as any; const file = files[i] as any;
if (file.id && filePlacements[file.id] && filePlacements[file.id].length > 0) { if (
file.id &&
filePlacements[file.id] &&
filePlacements[file.id].length > 0
) {
const now = filePlacements[file.id]; const now = filePlacements[file.id];
const normalizedNow = now.map((item): PlacementType => { const normalizedNow = now.map((item): PlacementType => {
const value = String(item); const value = String(item);
@ -800,14 +892,25 @@ export default function FormVideoUpdate() {
return temp; return temp;
}; };
const setupPlacement = (fileId: string, placement: string, isChecked: boolean) => { const setupPlacement = (
setFilePlacements(prev => { fileId: string,
placement: string,
isChecked: boolean
) => {
setFilePlacements((prev) => {
const currentPlacements = prev[fileId] || []; const currentPlacements = prev[fileId] || [];
let temp = { ...prev }; let temp = { ...prev };
if (isChecked) { if (isChecked) {
if (placement === "all") { if (placement === "all") {
temp[fileId] = ["all", "mabes", "wilayah", "polda", "satker", "international"]; temp[fileId] = [
"all",
"mabes",
"wilayah",
"polda",
"satker",
"international",
];
} else if (placement === "wilayah") { } else if (placement === "wilayah") {
temp[fileId] = [...currentPlacements, "wilayah", "polda", "satker"]; temp[fileId] = [...currentPlacements, "wilayah", "polda", "satker"];
} else if (placement === "polda") { } else if (placement === "polda") {
@ -821,13 +924,15 @@ export default function FormVideoUpdate() {
if (placement === "all") { if (placement === "all") {
temp[fileId] = []; temp[fileId] = [];
} else if (placement === "wilayah") { } else if (placement === "wilayah") {
temp[fileId] = currentPlacements.filter(p => !["wilayah", "polda", "satker"].includes(p)); temp[fileId] = currentPlacements.filter(
(p) => !["wilayah", "polda", "satker"].includes(p)
);
} else if (placement === "polda") { } else if (placement === "polda") {
temp[fileId] = currentPlacements.filter(p => p !== "polda"); temp[fileId] = currentPlacements.filter((p) => p !== "polda");
} else if (placement === "satker") { } else if (placement === "satker") {
temp[fileId] = currentPlacements.filter(p => p !== "satker"); temp[fileId] = currentPlacements.filter((p) => p !== "satker");
} else { } else {
temp[fileId] = currentPlacements.filter(p => p !== placement); temp[fileId] = currentPlacements.filter((p) => p !== placement);
} }
} }
@ -837,25 +942,27 @@ export default function FormVideoUpdate() {
const updateModalChecklistLevels = (fileId: string) => { const updateModalChecklistLevels = (fileId: string) => {
const fileLevels = fileCheckedLevels[fileId] || new Set<number>(); const fileLevels = fileCheckedLevels[fileId] || new Set<number>();
const hasPolda = listDest.some(item => const hasPolda = listDest.some(
(item) =>
item.levelNumber === 2 && item.levelNumber === 2 &&
item.name !== "SATKER POLRI" && item.name !== "SATKER POLRI" &&
fileLevels.has(item.id) fileLevels.has(item.id)
); );
const hasSatker = listDest.some(item => const hasSatker = listDest.some(
(item) =>
item.levelNumber === 2 && item.levelNumber === 2 &&
item.name === "SATKER POLRI" && item.name === "SATKER POLRI" &&
fileLevels.has(item.id) fileLevels.has(item.id)
); );
setFileUnitSelections(prev => ({ setFileUnitSelections((prev) => ({
...prev, ...prev,
[fileId]: { [fileId]: {
...prev[fileId], ...prev[fileId],
polda: hasPolda, polda: hasPolda,
satker: hasSatker, satker: hasSatker,
wilayah: hasPolda || hasSatker, wilayah: hasPolda || hasSatker,
} },
})); }));
}; };
@ -916,16 +1023,23 @@ export default function FormVideoUpdate() {
// // router.push("/en/contributor/content/video"); // // router.push("/en/contributor/content/video");
// // }); // // });
// }; // };
const save = async (data: VideoSchema) => { const save = async (data: VideoSchema) => {
loading(); loading();
const finalTags = tags.join(", "); const finalTags = tags.join(", ");
const descFinal =
selectedLang === "en" && translatedContent
? translatedContent
: data.description;
const requestData = { const requestData = {
...data, ...data,
id: detail?.id, id: detail?.id,
title: data.title, title: data.title,
description: htmlToString(data.description), description: htmlToString(descFinal),
htmlDescription: data.description, htmlDescription: descFinal,
fileTypeId, fileTypeId,
categoryId: selectedTarget, categoryId: selectedTarget,
subCategoryId: selectedTarget, subCategoryId: selectedTarget,
@ -959,7 +1073,6 @@ export default function FormVideoUpdate() {
formMedia.append("file", thumbnail); formMedia.append("file", thumbnail);
const responseThumbnail = await uploadThumbnail(id, formMedia); const responseThumbnail = await uploadThumbnail(id, formMedia);
if (responseThumbnail?.error) { if (responseThumbnail?.error) {
// Perbaiki pengecekan error
error(responseThumbnail?.message); error(responseThumbnail?.message);
return false; return false;
} }
@ -1150,7 +1263,6 @@ export default function FormVideoUpdate() {
</div> </div>
)); ));
function success() { function success() {
MySwal.fire({ MySwal.fire({
title: "Sukses", title: "Sukses",
@ -1273,6 +1385,105 @@ export default function FormVideoUpdate() {
</div> </div>
<div className="py-3 space-y-2"> <div className="py-3 space-y-2">
<div className="flex justify-between items-center">
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
{roleId === "14" && (
<button
type="button"
onClick={async () => {
try {
loading();
setIsLoadingTranslate(true);
const res = await translateText({
text: getValues("description"),
sourceLang: "ID",
targetLang: "EN",
});
if (!res.error) {
const resultText =
res?.data?.data?.translations?.[0]?.text || "";
setTranslatedContent(resultText);
}
} catch (err) {
close();
console.error("Translate gagal:", err);
} finally {
close();
setIsLoadingTranslate(false);
}
}}
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
{isLoadingTranslate
? "Translating..."
: "Translate to English"}
</button>
)}
</div>
{/* Pilihan bahasa untuk posting */}
{roleId === "14" && (
<div className="flex items-center gap-4 mb-2">
<label className="flex items-center gap-2">
<input
type="radio"
value="id"
checked={selectedLang === "id"}
onChange={() => setSelectedLang("id")}
/>
<span>Gunakan Bahasa Indonesia</span>
</label>
</div>
)}
{/* Editor Bahasa Indonesia */}
<Controller
control={control}
name="description"
render={({ field }) => (
<CustomEditor
onChange={field.onChange}
initialData={field.value}
/>
)}
/>
{/* Editor Bahasa Inggris */}
{translatedContent && (
<div className="mt-4">
<div className="flex flex-col">
<Label className="text-[15px]">English Version</Label>
<label className="flex items-center gap-2">
<input
type="radio"
value="en"
checked={selectedLang === "en"}
onChange={() => setSelectedLang("en")}
disabled={!translatedContent}
/>
<span>Gunakan Bahasa Inggris</span>
</label>
</div>
<CustomEditor
onChange={(val: any) => setTranslatedContent(val)}
initialData={translatedContent}
/>
</div>
)}
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description.message}
</p>
)}
</div>
{/* <div className="py-3 space-y-2">
<Label> <Label>
{t("description", { defaultValue: "Description" })} {t("description", { defaultValue: "Description" })}
</Label> </Label>
@ -1288,7 +1499,7 @@ export default function FormVideoUpdate() {
{errors.description.message} {errors.description.message}
</p> </p>
)} )}
</div> </div> */}
<div className="py-3 space-y-2"> <div className="py-3 space-y-2">
<Label> <Label>
{t("select-file", { defaultValue: "Select File" })} {t("select-file", { defaultValue: "Select File" })}
@ -1417,7 +1628,8 @@ export default function FormVideoUpdate() {
</div> </div>
{/* Detail Wilayah */} {/* Detail Wilayah */}
{fileUnitSelections[file.id]?.wilayah && isDetailOfRegionShowed && ( {fileUnitSelections[file.id]?.wilayah &&
isDetailOfRegionShowed && (
<div className="border-t border-gray-200 pt-2"> <div className="border-t border-gray-200 pt-2">
<p className="text-sm font-medium text-gray-700 mb-2"> <p className="text-sm font-medium text-gray-700 mb-2">
Detail Wilayah: Detail Wilayah:
@ -1427,7 +1639,10 @@ export default function FormVideoUpdate() {
<div className="grid grid-cols-1 md:grid-cols-4 gap-3"> <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
{[ {[
{ key: "polda", label: "POLDA" }, { key: "polda", label: "POLDA" },
{ key: "satker", label: "SATKER" }, {
key: "satker",
label: "SATKER",
},
].map((item, idx) => ( ].map((item, idx) => (
<div <div
key={item.key} key={item.key}
@ -1436,7 +1651,9 @@ export default function FormVideoUpdate() {
<Checkbox <Checkbox
id={`${item.key}-${index}`} id={`${item.key}-${index}`}
checked={ checked={
fileUnitSelections[file.id]?.[ fileUnitSelections[
file.id
]?.[
item.key as keyof typeof unitSelection item.key as keyof typeof unitSelection
] || false ] || false
} }
@ -1484,7 +1701,8 @@ export default function FormVideoUpdate() {
<DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]"> <DialogContent className="max-w-[95vw] lg:max-w-[1400px] max-h-[90vh]">
<DialogHeader className="border-b border-gray-200 pb-4"> <DialogHeader className="border-b border-gray-200 pb-4">
<DialogTitle className="text-lg font-semibold"> <DialogTitle className="text-lg font-semibold">
Daftar Wilayah POLDA dan SATKER Daftar Wilayah POLDA dan
SATKER
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1"> <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto p-1">
@ -1511,7 +1729,13 @@ export default function FormVideoUpdate() {
handleFileCheckboxChangePlacement( handleFileCheckboxChangePlacement(
file.id, file.id,
polda, polda,
!fileCheckedLevels[file.id]?.has(Number(polda.id)) !fileCheckedLevels[
file.id
]?.has(
Number(
polda.id
)
)
) )
} }
/> />
@ -1520,9 +1744,13 @@ export default function FormVideoUpdate() {
</span> </span>
</Label> </Label>
{/* Tombol expand hanya untuk SATKER POLRI */} {/* Tombol expand hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && ( {polda.name ===
"SATKER POLRI" &&
polda.subDestination && (
<button <button
onClick={(e) => { onClick={(
e
) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
toggleExpand( toggleExpand(
@ -1547,7 +1775,9 @@ export default function FormVideoUpdate() {
</div> </div>
{/* Sub-items hanya untuk SATKER POLRI */} {/* Sub-items hanya untuk SATKER POLRI */}
{polda.name === "SATKER POLRI" && polda.subDestination && {polda.name ===
"SATKER POLRI" &&
polda.subDestination &&
expandedPolda.has( expandedPolda.has(
polda.id polda.id
) && ( ) && (
@ -1561,7 +1791,8 @@ export default function FormVideoUpdate() {
sub: any sub: any
) => ) =>
fileCheckedLevels[ fileCheckedLevels[
file.id file
.id
]?.has( ]?.has(
Number( Number(
sub.id sub.id
@ -1629,7 +1860,8 @@ export default function FormVideoUpdate() {
<Checkbox <Checkbox
checked={ checked={
fileCheckedLevels[ fileCheckedLevels[
file.id file
.id
]?.has( ]?.has(
Number( Number(
sub.id sub.id
@ -1641,7 +1873,14 @@ export default function FormVideoUpdate() {
handleFileCheckboxChangePlacement( handleFileCheckboxChangePlacement(
file.id, file.id,
polda, polda,
!fileCheckedLevels[file.id]?.has(Number(sub.id)) !fileCheckedLevels[
file
.id
]?.has(
Number(
sub.id
)
)
) )
} }
/> />
@ -1656,7 +1895,6 @@ export default function FormVideoUpdate() {
</div> </div>
</div> </div>
)} )}
</div> </div>
) )
)} )}