feat:convert SPIT, edit blog,edit task.publish planning
This commit is contained in:
parent
c73f41f27f
commit
bf4cedc768
|
|
@ -102,16 +102,16 @@ const columns: ColumnDef<any>[] = [
|
||||||
View
|
View
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
{/*
|
<Link href={`/contributor/blog/update/${row.original.id}`}>
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<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" />
|
<SquarePen className="w-4 h-4 me-1.5" />
|
||||||
Edit
|
Edit
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
</Link>
|
||||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
<DropdownMenuItem 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" />
|
<Trash2 className="w-4 h-4 me-1.5" />
|
||||||
Delete
|
Delete
|
||||||
</DropdownMenuItem> */}
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import FormBlogUpdate from "@/components/form/blog/blog--update-form";
|
||||||
|
|
||||||
|
const BlogUpdatePage = async () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormBlogUpdate />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BlogUpdatePage;
|
||||||
|
|
@ -146,6 +146,12 @@ const columns: ColumnDef<any>[] = [
|
||||||
View
|
View
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</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>
|
||||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
<DropdownMenuItem 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" />
|
<Trash2 className="w-4 h-4 me-1.5" />
|
||||||
Delete
|
Delete
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import FormImageDetail from "@/components/form/content/image-detail-form";
|
||||||
|
import FormImageUpdate from "@/components/form/content/image-update-form";
|
||||||
|
|
||||||
|
const ImageUpdatePage = async () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormImageUpdate />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImageUpdatePage;
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import FormImageDetail from "@/components/form/content/image-detail-form";
|
||||||
|
import FormConvertSPIT from "@/components/form/content/spit-convert-form";
|
||||||
|
|
||||||
|
const SPITConvertPage = async () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormConvertSPIT />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SPITConvertPage;
|
||||||
|
|
@ -1,35 +1,24 @@
|
||||||
"use client";
|
"use client";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
import TableImage from "./table-spit/page";
|
import TableImage from "./table-spit/table-spit";
|
||||||
import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
|
import TableSPIT from "./table-spit/table-spit";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
||||||
import TableSPIT from "./table-spit/page";
|
|
||||||
|
|
||||||
const ReactTableSPITPage = () => {
|
const ReactTableSPITPage = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SiteBreadcrumb />
|
<SiteBreadcrumb />
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<Card className="py-4 px-3">
|
|
||||||
<div className="flex flex-row justify-between items-center">
|
|
||||||
<div className="flex-1 text-xl font-medium text-default-900">
|
|
||||||
Konten SPIT
|
|
||||||
</div>
|
|
||||||
{/* <div>
|
|
||||||
<Button color="primary" className="text-white">
|
|
||||||
<UploadIcon />
|
|
||||||
Unggah Foto
|
|
||||||
</Button>
|
|
||||||
<Button color="primary" className="text-white ml-3">
|
|
||||||
<UploadIcon />
|
|
||||||
Unggah Foto Dengan AI
|
|
||||||
</Button>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
<Card>
|
||||||
|
<CardHeader className="border-b border-solid border-default-200 mb-6">
|
||||||
|
<CardTitle>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex-1 text-xl font-medium text-default-900">
|
||||||
|
Konten SPIT
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
<CardContent className="p-0">
|
<CardContent className="p-0">
|
||||||
<TableSPIT />
|
<TableSPIT />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,109 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
import {
|
||||||
|
Eye,
|
||||||
|
MoreVertical,
|
||||||
|
MoveDownRight,
|
||||||
|
SquarePen,
|
||||||
|
Trash2,
|
||||||
|
} from "lucide-react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { Link } from "@/components/navigation";
|
||||||
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
const columns: ColumnDef<any>[] = [
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
export type DataProps = {
|
|
||||||
id: string | number;
|
|
||||||
order: string;
|
|
||||||
customer: {
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
date: string;
|
|
||||||
quantity: number;
|
|
||||||
amount: string;
|
|
||||||
status: "paid" | "due" | "canceled";
|
|
||||||
action: React.ReactNode;
|
|
||||||
};
|
|
||||||
export const columns: ColumnDef<DataProps>[] = [
|
|
||||||
// {
|
|
||||||
// id: "select",
|
|
||||||
// header: ({ table }) => (
|
|
||||||
// <Checkbox
|
|
||||||
// checked={
|
|
||||||
// table.getIsAllPageRowsSelected() ||
|
|
||||||
// (table.getIsSomePageRowsSelected() && "indeterminate")
|
|
||||||
// }
|
|
||||||
// onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
||||||
// aria-label="Select all"
|
|
||||||
// />
|
|
||||||
// ),
|
|
||||||
// cell: ({ row }) => (
|
|
||||||
// <div className="xl:w-16">
|
|
||||||
// <Checkbox
|
|
||||||
// checked={row.getIsSelected()}
|
|
||||||
// onCheckedChange={(value) => row.toggleSelected(!!value)}
|
|
||||||
// aria-label="Select row"
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// ),
|
|
||||||
// enableSorting: false,
|
|
||||||
// enableHiding: false,
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
accessorKey: "id",
|
accessorKey: "no",
|
||||||
header: "No",
|
header: "No",
|
||||||
cell: ({ row }) => <span>{row.getValue("id")}</span>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "order",
|
|
||||||
header: "Judul",
|
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div className="w-52">
|
<div className="flex items-center gap-5">
|
||||||
<span>{row.getValue("order")}</span>,
|
<div className="flex-1 text-start">
|
||||||
|
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
||||||
|
{row.getValue("no")}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "customer",
|
accessorKey: "contentTitle",
|
||||||
header: "Kategory",
|
header: "Judul",
|
||||||
cell: ({ row }) => {
|
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
|
||||||
const user = row.original.customer;
|
const title: string = row.getValue("contentTitle");
|
||||||
return (
|
return (
|
||||||
<div className="font-medium text-card-foreground/80">
|
<span className="whitespace-nowrap">
|
||||||
<div className="flex gap-3 items-center">
|
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
|
||||||
<span className="text-sm text-default-600 whitespace-nowrap">
|
</span>
|
||||||
{user?.name ?? "Unknown User"}
|
);
|
||||||
</span>
|
},
|
||||||
</div>
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "contentTag",
|
||||||
|
header: "Tag",
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
accessorKey: "contentType",
|
||||||
|
header: "Tipe Konten ",
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="whitespace-nowrap">{row.getValue("contentType")}</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "contentCreatedGroupBy",
|
||||||
|
header: "Sumber ",
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="whitespace-nowrap">
|
||||||
|
{row.getValue("contentCreatedGroupBy")}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
accessorKey: "isPublish",
|
||||||
|
header: "Status",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const isPublish = row.getValue<boolean>("isPublish");
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
color={isPublish ? "success" : "warning"} // Hijau untuk diterima, oranye untuk menunggu review
|
||||||
|
variant="outline"
|
||||||
|
className={`btn btn-sm ${
|
||||||
|
isPublish ? "btn-outline-success" : "btn-outline-warning"
|
||||||
|
} pill-btn ml-1`}
|
||||||
|
>
|
||||||
|
{isPublish ? "Diterima" : "Menunggu Review"}
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
accessorKey: "date",
|
accessorKey: "contentCreatedDate",
|
||||||
header: "Tanggal unggah",
|
header: "Tanggal Unggah",
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
return <span>{row.getValue("date")}</span>;
|
const createdAt = row.getValue("contentCreatedDate") as
|
||||||
},
|
| string
|
||||||
},
|
| number
|
||||||
{
|
| undefined;
|
||||||
accessorKey: "quantity",
|
|
||||||
header: "Kreator",
|
const formattedDate =
|
||||||
cell: ({ row }) => {
|
createdAt && !isNaN(new Date(createdAt).getTime())
|
||||||
return <span>{row.getValue("quantity")}</span>;
|
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
|
||||||
},
|
: "-";
|
||||||
},
|
return <span className="whitespace-nowrap">{formattedDate}</span>;
|
||||||
{
|
|
||||||
accessorKey: "amount",
|
|
||||||
header: "Sumber",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return <span>{row.getValue("amount")}</span>;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "amount",
|
|
||||||
header: "Penempatan File",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return <span>{row.getValue("amount")}</span>;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: "Status",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const statusColors: Record<string, string> = {
|
|
||||||
paid: "bg-success/20 text-success",
|
|
||||||
due: "bg-warning/20 text-warning",
|
|
||||||
canceled: "bg-destructive/20 text-destructive",
|
|
||||||
};
|
|
||||||
const status = row.getValue<string>("status");
|
|
||||||
const statusStyles = statusColors[status] || "default";
|
|
||||||
return (
|
|
||||||
<Badge className={cn("rounded-full px-5", statusStyles)}>
|
|
||||||
{status}{" "}
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "amount",
|
|
||||||
header: "Kurasi Konten",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return <span>{row.getValue("amount")}</span>;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "amount",
|
|
||||||
header: "Saran",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return <span>{row.getValue("amount")}</span>;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -160,21 +124,19 @@ export const columns: ColumnDef<DataProps>[] = [
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="p-0" align="end">
|
<DropdownMenuContent className="p-0" align="end">
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<Link
|
||||||
<Eye className="w-4 h-4 me-1.5" />
|
href={`/contributor/content/spit/convert/${row.original.contentId}`}
|
||||||
View
|
>
|
||||||
</DropdownMenuItem>
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<MoveDownRight className="w-4 h-4 me-1.5" />
|
||||||
<SquarePen className="w-4 h-4 me-1.5" />
|
Pindah Ke Mediahub
|
||||||
Edit
|
</DropdownMenuItem>
|
||||||
</DropdownMenuItem>
|
</Link>
|
||||||
<DropdownMenuItem 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>
|
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export default columns;
|
||||||
|
|
|
||||||
|
|
@ -1,184 +0,0 @@
|
||||||
import { DataProps } from "./columns";
|
|
||||||
|
|
||||||
export const data: DataProps[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Liputan Kegiatan",
|
|
||||||
},
|
|
||||||
date: "3/26/2022",
|
|
||||||
quantity: 13,
|
|
||||||
amount: "$1779.53",
|
|
||||||
status: "paid",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Liputan Kegiatan",
|
|
||||||
},
|
|
||||||
date: "2/6/2022",
|
|
||||||
quantity: 13,
|
|
||||||
amount: "$2215.78",
|
|
||||||
status: "due",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Liputan Kegiatan",
|
|
||||||
},
|
|
||||||
date: "9/6/2021",
|
|
||||||
quantity: 1,
|
|
||||||
amount: "$3183.60",
|
|
||||||
status: "due",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Liputan Kegiatan",
|
|
||||||
},
|
|
||||||
date: "11/7/2021",
|
|
||||||
quantity: 13,
|
|
||||||
amount: "$2587.86",
|
|
||||||
status: "canceled",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Rachel Brown",
|
|
||||||
},
|
|
||||||
date: "5/6/2022",
|
|
||||||
quantity: 12,
|
|
||||||
amount: "$3840.73",
|
|
||||||
status: "paid",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Megan Taylor",
|
|
||||||
},
|
|
||||||
date: "2/14/2022",
|
|
||||||
quantity: 12,
|
|
||||||
amount: "$4764.18",
|
|
||||||
status: "canceled",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Sophie Clark",
|
|
||||||
},
|
|
||||||
date: "7/30/2022",
|
|
||||||
quantity: 6,
|
|
||||||
amount: "$2875.05",
|
|
||||||
status: "paid",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Natalie Martin",
|
|
||||||
},
|
|
||||||
date: "6/30/2022",
|
|
||||||
quantity: 9,
|
|
||||||
amount: "$2491.02",
|
|
||||||
status: "due",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Hannah Lewis",
|
|
||||||
},
|
|
||||||
date: "8/9/2022",
|
|
||||||
quantity: 8,
|
|
||||||
amount: "$3006.95",
|
|
||||||
status: "due",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Lisa White",
|
|
||||||
},
|
|
||||||
date: "8/4/2022",
|
|
||||||
quantity: 12,
|
|
||||||
amount: "$2160.32",
|
|
||||||
status: "paid",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Emma Walker",
|
|
||||||
},
|
|
||||||
date: "4/5/2022",
|
|
||||||
quantity: 8,
|
|
||||||
amount: "$1272.66",
|
|
||||||
status: "paid",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Jenny Wilson",
|
|
||||||
},
|
|
||||||
date: "8/9/2022",
|
|
||||||
quantity: 2,
|
|
||||||
amount: "$4327.86",
|
|
||||||
status: "canceled",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 13,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Jenny Wilson",
|
|
||||||
},
|
|
||||||
date: "2/10/2022",
|
|
||||||
quantity: 11,
|
|
||||||
amount: "$3671.81",
|
|
||||||
status: "canceled",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 14,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Jenny Wilson",
|
|
||||||
},
|
|
||||||
date: "2/10/2022",
|
|
||||||
quantity: 2,
|
|
||||||
amount: "$3401.82",
|
|
||||||
status: "paid",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15,
|
|
||||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
|
||||||
customer: {
|
|
||||||
name: "Jenny Wilson",
|
|
||||||
},
|
|
||||||
date: "5/20/2022",
|
|
||||||
quantity: 4,
|
|
||||||
amount: "$2387.49",
|
|
||||||
status: "canceled",
|
|
||||||
action: null,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
@ -1,383 +0,0 @@
|
||||||
"use client";
|
|
||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
ColumnDef,
|
|
||||||
ColumnFiltersState,
|
|
||||||
PaginationState,
|
|
||||||
SortingState,
|
|
||||||
VisibilityState,
|
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
getPaginationRowModel,
|
|
||||||
getSortedRowModel,
|
|
||||||
useReactTable,
|
|
||||||
} from "@tanstack/react-table";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { format } from "date-fns";
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
import {
|
|
||||||
ChevronLeft,
|
|
||||||
ChevronRight,
|
|
||||||
Eye,
|
|
||||||
MoreVertical,
|
|
||||||
Trash2,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { title } from "process";
|
|
||||||
|
|
||||||
import { getCookiesDecrypt } from "@/lib/utils";
|
|
||||||
import { listSPIT } from "@/service/content/content";
|
|
||||||
import { pages } from "next/dist/build/templates/app-page";
|
|
||||||
|
|
||||||
export type CompanyData = {
|
|
||||||
no: number;
|
|
||||||
title: string;
|
|
||||||
categoryName: string;
|
|
||||||
createdAt: string;
|
|
||||||
creatorGroup: string;
|
|
||||||
publishedOn: string;
|
|
||||||
isPublish: any;
|
|
||||||
isPublishOnPolda: any;
|
|
||||||
isDone: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns: ColumnDef<CompanyData>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "no",
|
|
||||||
header: "No",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-5">
|
|
||||||
<div className="flex-1 text-start">
|
|
||||||
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
|
||||||
{row.getValue("no")}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: "Judul",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-5">
|
|
||||||
<div className="flex-1 text-start">
|
|
||||||
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
|
||||||
{row.getValue("title")}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "categoryName",
|
|
||||||
header: "Kategori",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "createdAt",
|
|
||||||
header: "Tanggal Unggah",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const createdAt = row.getValue("createdAt") as
|
|
||||||
| string
|
|
||||||
| number
|
|
||||||
| undefined;
|
|
||||||
|
|
||||||
const formattedDate =
|
|
||||||
createdAt && !isNaN(new Date(createdAt).getTime())
|
|
||||||
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
|
|
||||||
: "-";
|
|
||||||
return <span className="whitespace-nowrap">{formattedDate}</span>;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "creatorGroup",
|
|
||||||
header: "Sumber ",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "publishedOn",
|
|
||||||
header: "Penempatan File",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const isPublish = row.original.isPublish;
|
|
||||||
const isPublishOnPolda = row.original.isPublishOnPolda;
|
|
||||||
|
|
||||||
let displayText = "-";
|
|
||||||
if (isPublish && !isPublishOnPolda) {
|
|
||||||
displayText = "Mabes";
|
|
||||||
} else if (isPublish && isPublishOnPolda) {
|
|
||||||
displayText = "Mabes & Polda";
|
|
||||||
} else if (!isPublish && isPublishOnPolda) {
|
|
||||||
displayText = "Polda";
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="text-center whitespace-nowrap" title={displayText}>
|
|
||||||
{displayText}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
accessorKey: "isDone",
|
|
||||||
header: "Status",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const isDone = row.getValue<boolean>("isDone");
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
color="success"
|
|
||||||
variant="outline"
|
|
||||||
className={` btn btn-sm ${
|
|
||||||
isDone ? "btn-outline-success" : "btn-outline-primary"
|
|
||||||
} pill-btn ml-1`}
|
|
||||||
>
|
|
||||||
{isDone ? "Selesai" : "Aktif"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
accessorKey: "action",
|
|
||||||
header: "Actions",
|
|
||||||
enableHiding: false,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
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">
|
|
||||||
<a href="/contributor/task/detail/[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>
|
|
||||||
</a>
|
|
||||||
<DropdownMenuItem 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>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const TableSPIT = () => {
|
|
||||||
const [spitTable, setSpitTable] = React.useState<CompanyData[]>([]);
|
|
||||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
|
||||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
const [columnVisibility, setColumnVisibility] =
|
|
||||||
React.useState<VisibilityState>({});
|
|
||||||
const [rowSelection, setRowSelection] = React.useState({});
|
|
||||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
|
||||||
pageIndex: 0, // Halaman pertama
|
|
||||||
pageSize: 10, // Jumlah baris per halaman
|
|
||||||
});
|
|
||||||
const [page, setPage] = React.useState(1); // Halaman aktif
|
|
||||||
const [totalPage, setTotalPage] = React.useState(1); // Total halaman
|
|
||||||
const [limit, setLimit] = React.useState(6); // Jumlah baris per halaman
|
|
||||||
const [search, setSearch] = React.useState(title);
|
|
||||||
const userId = getCookiesDecrypt("uie");
|
|
||||||
const userLevelId = getCookiesDecrypt("ulie");
|
|
||||||
|
|
||||||
const [categories, setCategories] = React.useState();
|
|
||||||
const [categoryFilter, setCategoryFilter] = React.useState([]);
|
|
||||||
const [statusFilter, setStatusFilter] = React.useState([1, 2]);
|
|
||||||
const [startDateString, setStartDateString] = React.useState("");
|
|
||||||
const [endDateString, setEndDateString] = React.useState("");
|
|
||||||
const [filterByCreator, setFilterByCreator] = React.useState("");
|
|
||||||
const [filterBySource, setFilterBySource] = React.useState("");
|
|
||||||
|
|
||||||
const roleId = getCookiesDecrypt("urie");
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
data: spitTable,
|
|
||||||
columns,
|
|
||||||
onSortingChange: setSorting,
|
|
||||||
onColumnFiltersChange: setColumnFilters,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
getPaginationRowModel: getPaginationRowModel(),
|
|
||||||
getSortedRowModel: getSortedRowModel(),
|
|
||||||
getFilteredRowModel: getFilteredRowModel(),
|
|
||||||
onColumnVisibilityChange: setColumnVisibility,
|
|
||||||
onRowSelectionChange: setRowSelection,
|
|
||||||
state: {
|
|
||||||
sorting,
|
|
||||||
columnFilters,
|
|
||||||
columnVisibility,
|
|
||||||
rowSelection,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// React.useEffect(() => {
|
|
||||||
// initState();
|
|
||||||
// }, [page, limit]);
|
|
||||||
|
|
||||||
// async function initState() {
|
|
||||||
// try {
|
|
||||||
// const isForSelf = Number(roleId) == 4;
|
|
||||||
|
|
||||||
// let isPublish;
|
|
||||||
// if (statusFilter.length > 1) {
|
|
||||||
// isPublish = "";
|
|
||||||
// } else if (statusFilter.length === 1) {
|
|
||||||
// if (statusFilter.includes(1)) {
|
|
||||||
// isPublish = false;
|
|
||||||
// } else {
|
|
||||||
// isPublish = true;
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// isPublish = undefined;
|
|
||||||
// }
|
|
||||||
// const res = await listSPIT(pages, limit, search, isPublish);
|
|
||||||
// const data = res.data.data.content.map((item: any, index: number) => ({
|
|
||||||
// no: (page - 1) * limit + index + 1,
|
|
||||||
// title: item.title,
|
|
||||||
// categoryName: item.categoryName,
|
|
||||||
// creatorGroup: item.creatorGroup,
|
|
||||||
// assignmentType: item.assignmentType?.name || "-",
|
|
||||||
// createdAt: item.createdAt,
|
|
||||||
// isDone: item.isDone,
|
|
||||||
// publishedOn: item.publishedOn,
|
|
||||||
// isPublish: item.isPublish,
|
|
||||||
// isPublishOnPolda: item.isPublishOnPolda,
|
|
||||||
// }));
|
|
||||||
|
|
||||||
// setSpitTable(data);
|
|
||||||
// setTotalPage(res.data.totalPages);
|
|
||||||
// } catch (error) {
|
|
||||||
// console.error("Error fetching tasks:", error);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex items-center py-4 px-5">
|
|
||||||
<div className="flex-none">
|
|
||||||
<Input
|
|
||||||
placeholder="Filter Status..."
|
|
||||||
value={
|
|
||||||
(table.getColumn("status")?.getFilterValue() as string) ?? ""
|
|
||||||
}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
|
||||||
table.getColumn("status")?.setFilterValue(event.target.value)
|
|
||||||
}
|
|
||||||
className="max-w-sm "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Table className="overflow-hidden">
|
|
||||||
<TableHeader>
|
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
|
||||||
<TableRow key={headerGroup.id} className="bg-default-200">
|
|
||||||
{headerGroup.headers.map((header) => (
|
|
||||||
<TableHead key={header.id}>
|
|
||||||
{header.isPlaceholder
|
|
||||||
? null
|
|
||||||
: flexRender(
|
|
||||||
header.column.columnDef.header,
|
|
||||||
header.getContext()
|
|
||||||
)}
|
|
||||||
</TableHead>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{table.getRowModel().rows?.length ? (
|
|
||||||
table.getRowModel().rows.map((row) => (
|
|
||||||
<TableRow
|
|
||||||
key={row.id}
|
|
||||||
data-state={row.getIsSelected() && "selected"}
|
|
||||||
className="h-[75px]"
|
|
||||||
>
|
|
||||||
{row.getVisibleCells().map((cell) => (
|
|
||||||
<TableCell key={cell.id}>
|
|
||||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
||||||
No results.
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
<div className="flex items-center justify-center py-4 gap-2 flex-none">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => table.previousPage()}
|
|
||||||
disabled={!table.getCanPreviousPage()}
|
|
||||||
className="w-8 h-8"
|
|
||||||
>
|
|
||||||
<ChevronLeft className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
{table.getPageOptions().map((page, pageIndex) => (
|
|
||||||
<Button
|
|
||||||
key={`basic-data-table-${pageIndex}`}
|
|
||||||
onClick={() => table.setPageIndex(pageIndex)}
|
|
||||||
size="icon"
|
|
||||||
className="w-8 h-8"
|
|
||||||
variant={
|
|
||||||
table.getState().pagination.pageIndex === pageIndex
|
|
||||||
? "default"
|
|
||||||
: "outline"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{page + 1}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => table.nextPage()}
|
|
||||||
disabled={!table.getCanNextPage()}
|
|
||||||
className="w-8 h-8"
|
|
||||||
>
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default TableSPIT;
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Table } from '@tanstack/react-table';
|
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
||||||
|
|
||||||
interface DataTablePaginationProps {
|
|
||||||
table: Table<any>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TablePagination = ({ table }: DataTablePaginationProps) => {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-end py-4 px-10">
|
|
||||||
<div className="flex-1 text-sm text-muted-foreground">
|
|
||||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
|
||||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 flex-none">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => table.previousPage()}
|
|
||||||
disabled={!table.getCanPreviousPage()}
|
|
||||||
className='w-8 h-8'
|
|
||||||
>
|
|
||||||
<ChevronLeft className='w-4 h-4' />
|
|
||||||
</Button>
|
|
||||||
{table.getPageOptions().map((page, pageIndex) => (
|
|
||||||
<Button
|
|
||||||
key={`basic-data-table-${pageIndex}`}
|
|
||||||
onClick={() => table.setPageIndex(pageIndex)}
|
|
||||||
size="icon"
|
|
||||||
className="w-8 h-8"
|
|
||||||
variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
|
|
||||||
>
|
|
||||||
{page + 1}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => table.nextPage()}
|
|
||||||
disabled={!table.getCanNextPage()}
|
|
||||||
className='w-8 h-8'
|
|
||||||
>
|
|
||||||
<ChevronRight className='w-4 h-4' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TablePagination;
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
"use client";
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ColumnDef,
|
||||||
|
ColumnFiltersState,
|
||||||
|
PaginationState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
Eye,
|
||||||
|
MoreVertical,
|
||||||
|
Search,
|
||||||
|
Trash2,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { title } from "process";
|
||||||
|
import { getCookiesDecrypt } from "@/lib/utils";
|
||||||
|
import TablePagination from "@/components/table/table-pagination";
|
||||||
|
import { listSPIT } from "@/service/content/content";
|
||||||
|
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||||
|
import columns from "./columns";
|
||||||
|
|
||||||
|
// export type CompanyData = {
|
||||||
|
// no: number;
|
||||||
|
// id: any;
|
||||||
|
// title: string;
|
||||||
|
// categoryName: string;
|
||||||
|
// createdAt: string;
|
||||||
|
// creatorGroup: string;
|
||||||
|
// publishedOn: string;
|
||||||
|
// isPublish: any;
|
||||||
|
// isPublishOnPolda: any;
|
||||||
|
// isDone: string;
|
||||||
|
// };
|
||||||
|
|
||||||
|
const TableSPIT = () => {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const [spitTable, setSpitTable] = React.useState<any[]>([]);
|
||||||
|
const [columnVisibility, setColumnVisibility] =
|
||||||
|
React.useState<VisibilityState>({});
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({});
|
||||||
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [totalPage, setTotalPage] = React.useState(1);
|
||||||
|
const [limit, setLimit] = React.useState(10);
|
||||||
|
const [search, setSearch] = React.useState("");
|
||||||
|
const userId = getCookiesDecrypt("uie");
|
||||||
|
const userLevelId = getCookiesDecrypt("ulie");
|
||||||
|
|
||||||
|
const [totalData, setTotalData] = React.useState<number>(1);
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [statusFilter, setStatusFilter] = React.useState([1, 2]);
|
||||||
|
|
||||||
|
const roleId = getCookiesDecrypt("urie");
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: spitTable,
|
||||||
|
columns,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const pageFromUrl = searchParams?.get("page");
|
||||||
|
if (pageFromUrl) {
|
||||||
|
setPage(Number(pageFromUrl));
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [page, limit, search]);
|
||||||
|
|
||||||
|
async function fetchData() {
|
||||||
|
let isPublish;
|
||||||
|
if (statusFilter.length > 1) {
|
||||||
|
isPublish = "";
|
||||||
|
} else if (statusFilter.length === 1) {
|
||||||
|
if (statusFilter.includes(1)) {
|
||||||
|
isPublish = false;
|
||||||
|
} else {
|
||||||
|
isPublish = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
isPublish = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await listSPIT(page - 1, limit, search, isPublish);
|
||||||
|
const data = res.data?.data;
|
||||||
|
const contentData = data?.content;
|
||||||
|
contentData.forEach((item: any, index: number) => {
|
||||||
|
item.no = (page - 1) * limit + index + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("contentData : ", contentData);
|
||||||
|
|
||||||
|
setSpitTable(contentData);
|
||||||
|
setTotalData(data?.totalElements);
|
||||||
|
setTotalPage(data?.totalPages);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching tasks:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSearch(e.target.value); // Perbarui state search
|
||||||
|
table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex justify-between items-center px-5">
|
||||||
|
<div>
|
||||||
|
<InputGroup merged>
|
||||||
|
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
|
||||||
|
<Search className=" h-4 w-4 dark:text-white" />
|
||||||
|
</InputGroupText>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search Judul..."
|
||||||
|
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
|
||||||
|
value={search}
|
||||||
|
onChange={handleSearch}
|
||||||
|
/>
|
||||||
|
</InputGroup>
|
||||||
|
</div>
|
||||||
|
<div className="flex-none">
|
||||||
|
<Input
|
||||||
|
placeholder="Filter Status..."
|
||||||
|
value={
|
||||||
|
(table.getColumn("status")?.getFilterValue() as string) ?? ""
|
||||||
|
}
|
||||||
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
table.getColumn("status")?.setFilterValue(event.target.value)
|
||||||
|
}
|
||||||
|
className="max-w-sm "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table className="overflow-hidden mt-3">
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id} className="bg-default-200">
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext()
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
className="h-[75px]"
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
<TablePagination
|
||||||
|
table={table}
|
||||||
|
totalData={totalData}
|
||||||
|
totalPage={totalPage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default TableSPIT;
|
||||||
|
|
@ -105,10 +105,14 @@ const columns: ColumnDef<any>[] = [
|
||||||
View
|
View
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<Link
|
||||||
<SquarePen className="w-4 h-4 me-1.5" />
|
href={`/shared/communication/internal/update/${row.original.id}`}
|
||||||
Edit
|
>
|
||||||
</DropdownMenuItem>
|
<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 className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
<DropdownMenuItem 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" />
|
<Trash2 className="w-4 h-4 me-1.5" />
|
||||||
Delete
|
Delete
|
||||||
|
|
|
||||||
|
|
@ -151,7 +151,7 @@ const TableAudio = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full overflow-x-auto mt-3">
|
<div className="w-full overflow-x-auto ">
|
||||||
<div className="flex justify-between items-center px-5">
|
<div className="flex justify-between items-center px-5">
|
||||||
<div className="mt-3 flex flex-row items-center gap-2">
|
<div className="mt-3 flex flex-row items-center gap-2">
|
||||||
<Link href={"/shared/communication/internal/create"}>
|
<Link href={"/shared/communication/internal/create"}>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import FormTask from "@/components/form/task/task-form";
|
||||||
|
import FormTaskDetail from "@/components/form/task/task-detail-form";
|
||||||
|
import FormDetailInternal from "@/components/form/communication/internal-detail-form";
|
||||||
|
import FormEditInternal from "@/components/form/communication/internal-edit-form";
|
||||||
|
|
||||||
|
const InternalUpdatePage = async () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormEditInternal />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InternalUpdatePage;
|
||||||
|
|
@ -11,8 +11,8 @@ const CommunicationPage = () => {
|
||||||
<div>
|
<div>
|
||||||
<SiteBreadcrumb />
|
<SiteBreadcrumb />
|
||||||
<div className="my-3">
|
<div className="my-3">
|
||||||
<Tabs defaultValue="internal" className="w-full">
|
<Card className="py-3 px-2 my-4">
|
||||||
<Card className="py-3 px-2 my-4">
|
<Tabs defaultValue="internal" className="w-full">
|
||||||
<p className="text-lg font-semibold ml-2">Komunikasi</p>
|
<p className="text-lg font-semibold ml-2">Komunikasi</p>
|
||||||
<TabsList className="flex-wrap">
|
<TabsList className="flex-wrap">
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
|
|
@ -34,41 +34,42 @@ const CommunicationPage = () => {
|
||||||
Kolaborasi
|
Kolaborasi
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
</Card>
|
|
||||||
<TabsContent value="internal">
|
<TabsContent value="internal">
|
||||||
<div className="grid grid-cols-12 gap-5">
|
<div className="grid grid-cols-12 gap-5">
|
||||||
<div className="lg:col-span-12 col-span-12">
|
<div className="lg:col-span-12 col-span-12">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="p-0">
|
<CardContent className="p-0">
|
||||||
<InternalTable />
|
<InternalTable />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</TabsContent>
|
||||||
</TabsContent>
|
<TabsContent value="escalation">
|
||||||
<TabsContent value="escalation">
|
<div className="grid grid-cols-12 gap-5">
|
||||||
<div className="grid grid-cols-12 gap-5">
|
<div className="lg:col-span-12 col-span-12">
|
||||||
<div className="lg:col-span-12 col-span-12">
|
<Card>
|
||||||
<Card>
|
<CardContent className="p-0">
|
||||||
<CardContent className="p-0">
|
<EscalationTable />
|
||||||
<EscalationTable />
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</TabsContent>
|
||||||
</TabsContent>
|
<TabsContent value="collaboration">
|
||||||
<TabsContent value="collaboration">
|
<div className="grid grid-cols-12 gap-5">
|
||||||
<div className="grid grid-cols-12 gap-5">
|
<div className="lg:col-span-12 col-span-12">
|
||||||
<div className="lg:col-span-12 col-span-12">
|
<Card>
|
||||||
<Card>
|
<CardContent className="p-0">
|
||||||
<CardContent className="p-0">
|
<CollaborationTable />
|
||||||
<CollaborationTable />
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</TabsContent>
|
||||||
</TabsContent>
|
</Tabs>
|
||||||
</Tabs>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,415 @@
|
||||||
|
"use client";
|
||||||
|
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||||
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import * as z from "zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
import { register } from "module";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import { createTask } from "@/config/api";
|
||||||
|
import {
|
||||||
|
createMedia,
|
||||||
|
getTagsBySubCategoryId,
|
||||||
|
listEnableCategory,
|
||||||
|
} from "@/service/content/content";
|
||||||
|
import { getBlog, postBlog } from "@/service/blog/blog";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
|
||||||
|
const taskSchema = z.object({
|
||||||
|
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
slug: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
metadata: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
narration: z
|
||||||
|
.string()
|
||||||
|
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
|
||||||
|
categoryName: z.string().min(1, { message: "Kategori diperlukan" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
type Category = {
|
||||||
|
id: string;
|
||||||
|
categoryName: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Detail = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
narration: string;
|
||||||
|
slug: string;
|
||||||
|
metadata: string;
|
||||||
|
categoryName: string;
|
||||||
|
categoryId: string;
|
||||||
|
thumbnailLink: string;
|
||||||
|
tags: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialCategories: Category[] = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
categoryName: "Giat Polri",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
categoryName: "Giat Pimpinan",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
categoryName: "Liputan Kegiatan",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
categoryName: "Seputar Prestasi",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FormBlogUpdate() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
const router = useRouter();
|
||||||
|
const { id } = useParams() as { id: string };
|
||||||
|
console.log(id);
|
||||||
|
const editor = useRef(null);
|
||||||
|
type TaskSchema = z.infer<typeof taskSchema>;
|
||||||
|
|
||||||
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||||
|
const taskId = Cookies.get("taskId");
|
||||||
|
const scheduleId = Cookies.get("scheduleId");
|
||||||
|
const scheduleType = Cookies.get("scheduleType");
|
||||||
|
|
||||||
|
const [categories] = useState<Category[]>(initialCategories);
|
||||||
|
const [selectedTarget, setSelectedTarget] = useState<string>("");
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||||
|
const [tags, setTags] = useState<any[]>([]);
|
||||||
|
const [isDraft, setIsDraft] = useState(false);
|
||||||
|
|
||||||
|
const [detail, setDetail] = useState<Detail>();
|
||||||
|
const [refresh, setRefresh] = useState(false);
|
||||||
|
|
||||||
|
const [unitSelection, setUnitSelection] = useState({
|
||||||
|
allUnit: false,
|
||||||
|
mabes: false,
|
||||||
|
polda: false,
|
||||||
|
polres: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
let fileTypeId = "1";
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<TaskSchema>({
|
||||||
|
resolver: zodResolver(taskSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleRemoveTag = (index: any) => {
|
||||||
|
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (event.target.files) {
|
||||||
|
const files = Array.from(event.target.files);
|
||||||
|
setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
|
||||||
|
console.log("DATAFILE::", selectedFiles);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveImage = (index: number) => {
|
||||||
|
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initState() {
|
||||||
|
if (id) {
|
||||||
|
const response = await getBlog(id);
|
||||||
|
const details = response.data?.data;
|
||||||
|
|
||||||
|
setDetail(details);
|
||||||
|
|
||||||
|
// Set categoryId dari API ke form dan Select
|
||||||
|
setValue("categoryName", details?.categoryName);
|
||||||
|
setSelectedTarget(details?.categoryId); // Untuk dropdown
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initState();
|
||||||
|
}, [refresh, setValue]);
|
||||||
|
|
||||||
|
const save = async (data: TaskSchema) => {
|
||||||
|
const requestData = {
|
||||||
|
...data,
|
||||||
|
id: detail?.id,
|
||||||
|
title: data.title,
|
||||||
|
narration: data.narration,
|
||||||
|
categoryId: selectedTarget,
|
||||||
|
slug: data.slug,
|
||||||
|
metadata: data.metadata,
|
||||||
|
tags: "siap",
|
||||||
|
isDraft,
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await postBlog(requestData);
|
||||||
|
console.log("Form Data Submitted:", requestData);
|
||||||
|
console.log("response", response);
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
text: "Data berhasil disimpan.",
|
||||||
|
icon: "success",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "OK",
|
||||||
|
}).then(() => {
|
||||||
|
router.push("/en/contributor/blog");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (data: TaskSchema) => {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePublish = () => {
|
||||||
|
setIsDraft(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
setIsDraft(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{detail !== undefined ? (
|
||||||
|
<div className="flex lg:flex-row gap-10">
|
||||||
|
<Card className="w-full lg:w-8/12">
|
||||||
|
<div className="px-6 py-6">
|
||||||
|
<p className="text-lg font-semibold mb-3">Update Indeks</p>
|
||||||
|
<div className="gap-5 mb-5">
|
||||||
|
{/* Input Title */}
|
||||||
|
<div className="space-y-2 py-3">
|
||||||
|
<Label>Judul</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.title}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Title"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.title?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.title.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="py-3">
|
||||||
|
<Label>Deskripsi</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="narration"
|
||||||
|
render={({ field: { onChange, value } }) => (
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={detail.narration}
|
||||||
|
onChange={onChange}
|
||||||
|
className="dark:text-black"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.narration?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.narration.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className=" py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Slug</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="slug"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.slug}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Slug"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.slug?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.slug.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=" py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Meta</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="metadata"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.metadata}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Meta"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.metadata?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.metadata.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="w-4/12">
|
||||||
|
<Card className=" h-[600px]">
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<Label htmlFor="fileInput">Gambar Utama</Label>
|
||||||
|
<Input
|
||||||
|
id="fileInput"
|
||||||
|
type="file"
|
||||||
|
// onChange={(e) => {
|
||||||
|
// const file = e.target.files[0];
|
||||||
|
// if (file) {
|
||||||
|
// console.log("Selected File:", file);
|
||||||
|
// // Tambahkan logika jika diperlukan, misalnya upload file ke server
|
||||||
|
// }
|
||||||
|
// }}
|
||||||
|
className=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 px-3">
|
||||||
|
<Label>Pratinjau Gambar Utama</Label>
|
||||||
|
<Card className="mt-2">
|
||||||
|
<img
|
||||||
|
src={detail.thumbnailLink}
|
||||||
|
alt="Thumbnail Gambar Utama"
|
||||||
|
className="w-full h-auto rounded"
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3 mt-6">
|
||||||
|
<label
|
||||||
|
htmlFor="kategori"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Kategori
|
||||||
|
</label>
|
||||||
|
<Controller
|
||||||
|
name="categoryName"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Select
|
||||||
|
defaultValue={detail?.categoryName}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedTarget(value);
|
||||||
|
field.onChange(value); // Sinkronisasi dengan react-hook-form
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger size="md">
|
||||||
|
<SelectValue placeholder="Pilih" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<SelectItem
|
||||||
|
key={category.id}
|
||||||
|
value={category.categoryName}
|
||||||
|
>
|
||||||
|
{category.id}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tag</Label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{detail?.tags?.split(",").map((tag, index) => (
|
||||||
|
<Badge
|
||||||
|
key={index}
|
||||||
|
className="border rounded-md px-2 py-2"
|
||||||
|
>
|
||||||
|
{tag.trim()}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="flex flex-row justify-end gap-3">
|
||||||
|
{/* <div className="mt-4">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
color="success"
|
||||||
|
onClick={() => handlePublish()}
|
||||||
|
>
|
||||||
|
Publish
|
||||||
|
</Button>
|
||||||
|
</div> */}
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => handleSave()}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button type="submit" color="primary" variant="outline">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -200,8 +200,8 @@ export default function FormDetailInternal() {
|
||||||
<div className="flex flex-row justify-between ">
|
<div className="flex flex-row justify-between ">
|
||||||
<div className="flex flex-col mt-6 w-7/12">
|
<div className="flex flex-col mt-6 w-7/12">
|
||||||
{ticketReply?.map((list) => (
|
{ticketReply?.map((list) => (
|
||||||
<div key={list.id} className="bg-slate-300 rounded-md">
|
<div key={list.id} className="bg-slate-300 rounded-md border">
|
||||||
<p className="px-3 py-3 bg-slate-300 rounded-md text-lg font-semibold">
|
<p className="px-3 pt-3 bg-slate-300 rounded-md text-lg font-semibold">
|
||||||
Ticket #{list.id}
|
Ticket #{list.id}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
|
<div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
|
||||||
|
|
@ -224,7 +224,7 @@ export default function FormDetailInternal() {
|
||||||
<p>{list?.createdAt}</p>
|
<p>{list?.createdAt}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="pl-3 bg-white">{list.message}</p>
|
<p className="pl-3 bg-white py-2">{list.message}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,363 @@
|
||||||
|
"use client";
|
||||||
|
"use client";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import * as z from "zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
||||||
|
import {
|
||||||
|
getTicketingInternalDetail,
|
||||||
|
getTicketingInternalDiscussion,
|
||||||
|
saveTicketing,
|
||||||
|
saveTicketInternalReply,
|
||||||
|
} from "@/service/communication/communication";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
|
||||||
|
const taskSchema = z.object({
|
||||||
|
// description: z.string().min(2, {
|
||||||
|
// message: "Narasi Penugasan harus lebih dari 2 karakter.",
|
||||||
|
// }),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type taskDetail = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
createdAt: string;
|
||||||
|
createdBy: {
|
||||||
|
id: number;
|
||||||
|
fullname: string;
|
||||||
|
};
|
||||||
|
sendTo: {
|
||||||
|
id: number;
|
||||||
|
fullname: string;
|
||||||
|
};
|
||||||
|
status: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
priority: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
description: string;
|
||||||
|
is_active: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type replyDetail = {
|
||||||
|
id: number;
|
||||||
|
message: string;
|
||||||
|
createdAt: string;
|
||||||
|
messageFrom: {
|
||||||
|
id: number;
|
||||||
|
fullname: string;
|
||||||
|
};
|
||||||
|
messageTo: {
|
||||||
|
id: number;
|
||||||
|
fullname: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function FormEditInternal() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
const { id } = useParams() as { id: string };
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const [detail, setDetail] = useState<taskDetail>();
|
||||||
|
const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
|
||||||
|
const [replyVisible, setReplyVisible] = useState(false);
|
||||||
|
const [replyMessage, setReplyMessage] = useState("");
|
||||||
|
const [selectedPriority, setSelectedPriority] = useState("");
|
||||||
|
const [selectedStatus, setSelectedStatus] = useState("");
|
||||||
|
const [selectedTarget, setSelectedTarget] = useState("");
|
||||||
|
type TaskSchema = z.infer<typeof taskSchema>;
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(taskSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initState() {
|
||||||
|
if (id) {
|
||||||
|
const response = await getTicketingInternalDetail(id);
|
||||||
|
setDetail(response.data?.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initState();
|
||||||
|
getTicketReply();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
async function getTicketReply() {
|
||||||
|
const res = await getTicketingInternalDiscussion(id);
|
||||||
|
if (res.data !== null) {
|
||||||
|
setTicketReply(res.data?.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReply = () => {
|
||||||
|
setReplyVisible((prev) => !prev); // Toggle visibility
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendReply = async () => {
|
||||||
|
if (replyMessage.trim() === "") {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Error",
|
||||||
|
text: "Pesan tidak boleh kosong!",
|
||||||
|
icon: "error",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
ticketId: id,
|
||||||
|
message: replyMessage,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await saveTicketInternalReply(data);
|
||||||
|
|
||||||
|
// Tambahkan balasan baru ke daftar balasan
|
||||||
|
const newReply: replyDetail = {
|
||||||
|
id: response.data.id,
|
||||||
|
message: replyMessage,
|
||||||
|
createdAt: response.data.createdAt,
|
||||||
|
messageFrom: response.data.messageFrom,
|
||||||
|
messageTo: response.data.messageTo,
|
||||||
|
};
|
||||||
|
|
||||||
|
setTicketReply((prevReplies) => [newReply, ...prevReplies]);
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
text: "Pesan berhasil dikirim.",
|
||||||
|
icon: "success",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset input dan sembunyikan form balasan
|
||||||
|
setReplyMessage("");
|
||||||
|
setReplyVisible(false);
|
||||||
|
} catch (error) {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Error",
|
||||||
|
text: "Gagal mengirim balasan.",
|
||||||
|
icon: "error",
|
||||||
|
});
|
||||||
|
console.error("Error sending reply:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async (data: TaskSchema) => {
|
||||||
|
const requestData = {
|
||||||
|
// description: data?.description,
|
||||||
|
target: selectedTarget,
|
||||||
|
priorityId: 1,
|
||||||
|
statusId: 1,
|
||||||
|
// description: data.description,
|
||||||
|
// operatorTeam: selectedOptionId.join(","), // This should work now without the error
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await saveTicketing(requestData);
|
||||||
|
|
||||||
|
console.log("Form Data Submitted:", requestData);
|
||||||
|
console.log("response", response);
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
text: "Data berhasil disimpan.",
|
||||||
|
icon: "success",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "OK",
|
||||||
|
}).then(() => {
|
||||||
|
router.push("/en/shared/communication");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (data: TaskSchema) => {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<div className="px-6 py-6">
|
||||||
|
<div className="mt-4 flex flex-row items-center gap-3">
|
||||||
|
<Button onClick={handleReply} color="default" variant={"outline"}>
|
||||||
|
Balas
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button color="default" variant={"outline"}>
|
||||||
|
Hapus
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{replyVisible && (
|
||||||
|
<div className="mt-4">
|
||||||
|
<Label htmlFor="replyMessage">Tulis Pesan</Label>
|
||||||
|
<textarea
|
||||||
|
id="replyMessage"
|
||||||
|
className="w-full h-24 border rounded-md p-2"
|
||||||
|
value={replyMessage}
|
||||||
|
onChange={(e) => setReplyMessage(e.target.value)}
|
||||||
|
placeholder="Tulis pesan di sini..."
|
||||||
|
/>
|
||||||
|
<div className="flex justify-end gap-3 mt-2">
|
||||||
|
<Button
|
||||||
|
onClick={() => setReplyVisible(false)}
|
||||||
|
color="default"
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSendReply} color="primary">
|
||||||
|
Kirim
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-row justify-between ">
|
||||||
|
<div className="flex flex-col mt-6 w-7/12">
|
||||||
|
{ticketReply?.map((list) => (
|
||||||
|
<div key={list.id} className="bg-slate-300 rounded-md border">
|
||||||
|
<p className="px-3 pt-3 bg-slate-300 rounded-md text-lg font-semibold">
|
||||||
|
Ticket #{list.id}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-row gap-3 mt-3 bg-blue-300 py-2 px-2">
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage
|
||||||
|
src={"/images/avatar/avatar-3.png"}
|
||||||
|
alt={`mabes`}
|
||||||
|
/>
|
||||||
|
</Avatar>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span className="font-bold">
|
||||||
|
{list?.messageFrom?.fullname}
|
||||||
|
</span>{" "}
|
||||||
|
mengirimkan pesan untuk{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{list?.messageTo?.fullname}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p>{list?.createdAt}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="pl-3 bg-white py-2">{list.message}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{detail !== undefined && (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<div className="gap-5 mb-5 w-full border mt-3 rounded-md">
|
||||||
|
<Label className="ml-3 mt-3">Properties</Label>
|
||||||
|
<div className="space-y-2 px-3">
|
||||||
|
<Label>Judul</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
value={detail?.title}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Title"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{/* {errors.title?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.title.message}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 px-3">
|
||||||
|
<Label>Prioritas</Label>
|
||||||
|
<Select
|
||||||
|
onValueChange={setSelectedPriority}
|
||||||
|
value={detail?.priority?.name}
|
||||||
|
>
|
||||||
|
<SelectTrigger size="md">
|
||||||
|
<SelectValue placeholder="Pilih" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Low">Low</SelectItem>
|
||||||
|
<SelectItem value="Medium">Medium</SelectItem>
|
||||||
|
<SelectItem value="High">High</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 px-3 mb-3">
|
||||||
|
<Label>Status</Label>
|
||||||
|
<Select
|
||||||
|
onValueChange={setSelectedStatus}
|
||||||
|
value={detail?.status?.name}
|
||||||
|
>
|
||||||
|
<SelectTrigger size="md">
|
||||||
|
<SelectValue placeholder="Pilih" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="1">Open</SelectItem>
|
||||||
|
<SelectItem value="2">Close</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2 px-3">
|
||||||
|
<Label>Description</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Textarea
|
||||||
|
value={detail?.description}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter description"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{/* {errors.title?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.title.message}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end mt-3 mr-3">
|
||||||
|
<Button type="submit" color="primary">
|
||||||
|
Update
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -57,8 +57,10 @@ type Detail = {
|
||||||
name: string;
|
name: string;
|
||||||
};
|
};
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
|
creatorName: string;
|
||||||
thumbnailLink: string;
|
thumbnailLink: string;
|
||||||
tags: string;
|
tags: string;
|
||||||
|
statusName: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function FormImageDetail() {
|
export default function FormImageDetail() {
|
||||||
|
|
@ -333,7 +335,7 @@ export default function FormImageDetail() {
|
||||||
<Input
|
<Input
|
||||||
size="md"
|
size="md"
|
||||||
type="text"
|
type="text"
|
||||||
value={detail?.categoryName}
|
value={detail?.creatorName}
|
||||||
onChange={field.onChange}
|
onChange={field.onChange}
|
||||||
placeholder="Enter Title"
|
placeholder="Enter Title"
|
||||||
/>
|
/>
|
||||||
|
|
@ -412,9 +414,9 @@ export default function FormImageDetail() {
|
||||||
<MailIcon />
|
<MailIcon />
|
||||||
<p className="">Kotak Saran (0)</p>
|
<p className="">Kotak Saran (0)</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="px-3 py-3">
|
<div className="px-3 py-3 border mx-3">
|
||||||
<p>Keterangan:</p>
|
<p>Keterangan:</p>
|
||||||
{/* <p>{detail?.status}</p> */}
|
<p className="text-sm text-slate-400">{detail?.statusName}</p>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,9 @@ import {
|
||||||
createMedia,
|
createMedia,
|
||||||
getTagsBySubCategoryId,
|
getTagsBySubCategoryId,
|
||||||
listEnableCategory,
|
listEnableCategory,
|
||||||
|
uploadThumbnail,
|
||||||
} from "@/service/content/content";
|
} from "@/service/content/content";
|
||||||
|
import { uploadThumbnailBlog } from "@/service/blog/blog";
|
||||||
|
|
||||||
const imageSchema = z.object({
|
const imageSchema = z.object({
|
||||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
|
@ -58,6 +60,8 @@ export default function FormImage() {
|
||||||
const [categories, setCategories] = useState<Category[]>([]);
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||||
const [tags, setTags] = useState<any[]>([]);
|
const [tags, setTags] = useState<any[]>([]);
|
||||||
|
const [thumbnail, setThumbnail] = useState<File | null>(null);
|
||||||
|
const [preview, setPreview] = useState<string | null>(null);
|
||||||
|
|
||||||
const [selectedTarget, setSelectedTarget] = useState("");
|
const [selectedTarget, setSelectedTarget] = useState("");
|
||||||
const [unitSelection, setUnitSelection] = useState({
|
const [unitSelection, setUnitSelection] = useState({
|
||||||
|
|
@ -93,14 +97,6 @@ export default function FormImage() {
|
||||||
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.files) {
|
|
||||||
const files = Array.from(event.target.files);
|
|
||||||
setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
|
|
||||||
console.log("DATAFILE::", selectedFiles);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemoveImage = (index: number) => {
|
const handleRemoveImage = (index: number) => {
|
||||||
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
||||||
};
|
};
|
||||||
|
|
@ -147,8 +143,8 @@ export default function FormImage() {
|
||||||
description: data.description,
|
description: data.description,
|
||||||
htmlDescription: data.description,
|
htmlDescription: data.description,
|
||||||
fileTypeId,
|
fileTypeId,
|
||||||
categoryId: selectedTarget,
|
categoryId: selectedCategory,
|
||||||
subCategoryId: selectedTarget,
|
subCategoryId: selectedCategory,
|
||||||
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
|
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
|
||||||
statusId: "1",
|
statusId: "1",
|
||||||
publishedFor: "6",
|
publishedFor: "6",
|
||||||
|
|
@ -161,6 +157,26 @@ export default function FormImage() {
|
||||||
const response = await createMedia(requestData);
|
const response = await createMedia(requestData);
|
||||||
console.log("Form Data Submitted:", requestData);
|
console.log("Form Data Submitted:", requestData);
|
||||||
|
|
||||||
|
if (response.error) {
|
||||||
|
MySwal.fire("Error", response.message, "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageId = response.data.data.id;
|
||||||
|
if (imageId && thumbnail) {
|
||||||
|
const formMedia = new FormData();
|
||||||
|
formMedia.append("file", thumbnail);
|
||||||
|
|
||||||
|
const responseThumbnail = await uploadThumbnail(imageId, formMedia);
|
||||||
|
|
||||||
|
if (responseThumbnail.error) {
|
||||||
|
MySwal.fire("Error", responseThumbnail.message, "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
|
||||||
|
|
||||||
MySwal.fire({
|
MySwal.fire({
|
||||||
title: "Sukses",
|
title: "Sukses",
|
||||||
text: "Data berhasil disimpan.",
|
text: "Data berhasil disimpan.",
|
||||||
|
|
@ -188,6 +204,17 @@ export default function FormImage() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
setThumbnail(file);
|
||||||
|
console.log("Selected Thumbnail:", file);
|
||||||
|
}
|
||||||
|
if (file) {
|
||||||
|
setPreview(URL.createObjectURL(file));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="flex lg:flex-row gap-10">
|
<div className="flex lg:flex-row gap-10">
|
||||||
|
|
@ -219,10 +246,10 @@ export default function FormImage() {
|
||||||
<div className="py-3 w-full">
|
<div className="py-3 w-full">
|
||||||
<Label>Kategori</Label>
|
<Label>Kategori</Label>
|
||||||
<Select
|
<Select
|
||||||
value={selectedTarget} // Ensure selectedTarget is updated correctly
|
value={selectedCategory} // Ensure selectedTarget is updated correctly
|
||||||
onValueChange={(id) => {
|
onValueChange={(id) => {
|
||||||
console.log("Selected Category ID:", id);
|
console.log("Selected Category ID:", id);
|
||||||
setSelectedTarget(id);
|
setSelectedCategory(id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SelectTrigger size="md">
|
<SelectTrigger size="md">
|
||||||
|
|
@ -230,7 +257,10 @@ export default function FormImage() {
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{categories.map((category) => (
|
{categories.map((category) => (
|
||||||
<SelectItem key={category.id} value={category.name}>
|
<SelectItem
|
||||||
|
key={category.id}
|
||||||
|
value={category.id.toString()}
|
||||||
|
>
|
||||||
{category.name}
|
{category.name}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
))}
|
))}
|
||||||
|
|
@ -260,73 +290,27 @@ export default function FormImage() {
|
||||||
</div>
|
</div>
|
||||||
<div className="py-3">
|
<div className="py-3">
|
||||||
<Label>Attachment</Label>
|
<Label>Attachment</Label>
|
||||||
<div className="flex items-center justify-center w-full pt-2">
|
|
||||||
<label
|
<Input
|
||||||
htmlFor="dropzone-file"
|
id="fileInput"
|
||||||
className="flex flex-col items-center justify-center w-full h-[155px] border-2 border-black border-dashed rounded-lg cursor-pointer dark:bg-black dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
type="file"
|
||||||
>
|
onChange={handleImageChange}
|
||||||
<div className="flex flex-col items-center justify-center pt-5 pb-6 ">
|
/>
|
||||||
<svg
|
|
||||||
className="w-10 h-10 mb-3 text-gray-400"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
{/* or{" "} */}
|
|
||||||
<span className="font-semibold underline text-amber-800">
|
|
||||||
Click to upload
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
id="dropzone-file"
|
|
||||||
type="file"
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleImageChange}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-row items-center gap-3 py-3">
|
<div className="flex flex-row items-center gap-3 py-3">
|
||||||
<Label>Gunakan Watermark</Label>
|
<Label>Gunakan Watermark</Label>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Switch defaultChecked color="primary" id="c2" />
|
<Switch defaultChecked color="primary" id="c2" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{selectedFiles?.length > 0 ? (
|
{preview && (
|
||||||
<div className="pt-2">
|
<div className="mt-3 px-3">
|
||||||
<div className="flex gap-3">
|
<img
|
||||||
{selectedFiles.map((image, index) => (
|
src={preview}
|
||||||
<div
|
alt="Thumbnail Preview"
|
||||||
key={index}
|
className="w-32 h-auto rounded"
|
||||||
className="flex flex-row items-center justify-between gap-1"
|
/>
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={URL.createObjectURL(image)}
|
|
||||||
alt="Pratinjau Gambar"
|
|
||||||
style={{ maxWidth: "200px", maxHeight: "200px" }}
|
|
||||||
className="rounded-md"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
className="text-blue-600 hover:text-blue-800 focus:outline-none"
|
|
||||||
onClick={() => handleRemoveImage(index)}
|
|
||||||
>
|
|
||||||
X
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,441 @@
|
||||||
|
"use client";
|
||||||
|
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||||
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import * as z from "zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
import { register } from "module";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import { createTask } from "@/config/api";
|
||||||
|
import {
|
||||||
|
createMedia,
|
||||||
|
getTagsBySubCategoryId,
|
||||||
|
listEnableCategory,
|
||||||
|
} from "@/service/content/content";
|
||||||
|
import { detailMedia } from "@/service/curated-content/curated-content";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { MailIcon } from "lucide-react";
|
||||||
|
|
||||||
|
const imageSchema = z.object({
|
||||||
|
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
description: z
|
||||||
|
.string()
|
||||||
|
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
|
||||||
|
creatorName: z.string().min(1, { message: "Creator diperlukan" }),
|
||||||
|
// tags: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
type Category = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Detail = {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
slug: string;
|
||||||
|
categoryId: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
creatorName: string;
|
||||||
|
categoryName: string;
|
||||||
|
thumbnailLink: string;
|
||||||
|
tags: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function FormImageUpdate() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const { id } = useParams() as { id: string };
|
||||||
|
console.log(id);
|
||||||
|
const editor = useRef(null);
|
||||||
|
type ImageSchema = z.infer<typeof imageSchema>;
|
||||||
|
|
||||||
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||||
|
const taskId = Cookies.get("taskId");
|
||||||
|
const scheduleId = Cookies.get("scheduleId");
|
||||||
|
const scheduleType = Cookies.get("scheduleType");
|
||||||
|
|
||||||
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||||
|
const [tags, setTags] = useState<any[]>([]);
|
||||||
|
const [detail, setDetail] = useState<Detail>();
|
||||||
|
const [refresh, setRefresh] = useState(false);
|
||||||
|
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
|
||||||
|
|
||||||
|
const [selectedTarget, setSelectedTarget] = useState("");
|
||||||
|
const [unitSelection, setUnitSelection] = useState({
|
||||||
|
allUnit: false,
|
||||||
|
mabes: false,
|
||||||
|
polda: false,
|
||||||
|
polres: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
let fileTypeId = "1";
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<ImageSchema>({
|
||||||
|
resolver: zodResolver(imageSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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 handleRemoveTag = (index: any) => {
|
||||||
|
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (event.target.files) {
|
||||||
|
const files = Array.from(event.target.files);
|
||||||
|
setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
|
||||||
|
console.log("DATAFILE::", selectedFiles);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveImage = (index: number) => {
|
||||||
|
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCheckboxChange = (id: number) => {
|
||||||
|
setSelectedPublishers((prev) =>
|
||||||
|
prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initState() {
|
||||||
|
getCategories();
|
||||||
|
}
|
||||||
|
|
||||||
|
initState();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getCategories = async () => {
|
||||||
|
try {
|
||||||
|
const category = await listEnableCategory(fileTypeId);
|
||||||
|
const resCategory: Category[] = category.data.data.content;
|
||||||
|
|
||||||
|
setCategories(resCategory);
|
||||||
|
console.log("data category", resCategory);
|
||||||
|
|
||||||
|
if (scheduleId && scheduleType === "3") {
|
||||||
|
const findCategory = resCategory.find((o) =>
|
||||||
|
o.name.toLowerCase().includes("pers rilis")
|
||||||
|
);
|
||||||
|
|
||||||
|
if (findCategory) {
|
||||||
|
// setValue("categoryId", findCategory.id);
|
||||||
|
setSelectedCategory(findCategory.id); // Set the selected category
|
||||||
|
const response = await getTagsBySubCategoryId(findCategory.id);
|
||||||
|
setTags(response?.data.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch categories:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initState() {
|
||||||
|
if (id) {
|
||||||
|
const response = await detailMedia(id);
|
||||||
|
const details = response.data?.data;
|
||||||
|
|
||||||
|
setDetail(details);
|
||||||
|
|
||||||
|
if (details.publishedForObject) {
|
||||||
|
const publisherIds = details.publishedForObject.map(
|
||||||
|
(obj: any) => obj.id
|
||||||
|
);
|
||||||
|
setSelectedPublishers(publisherIds);
|
||||||
|
}
|
||||||
|
|
||||||
|
const matchingCategory = categories.find(
|
||||||
|
(category) => category.id === details.categoryId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matchingCategory) {
|
||||||
|
setSelectedTarget(matchingCategory.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedTarget(details.categoryId); // Untuk dropdown
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initState();
|
||||||
|
}, [refresh, setValue]);
|
||||||
|
|
||||||
|
const save = async (data: ImageSchema) => {
|
||||||
|
const requestData = {
|
||||||
|
...data,
|
||||||
|
id: detail?.id,
|
||||||
|
title: data.title,
|
||||||
|
description: data.description,
|
||||||
|
htmlDescription: data.description,
|
||||||
|
fileTypeId,
|
||||||
|
categoryId: selectedTarget,
|
||||||
|
subCategoryId: selectedTarget,
|
||||||
|
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
|
||||||
|
statusId: "1",
|
||||||
|
publishedFor: "6",
|
||||||
|
creatorName: data.creatorName,
|
||||||
|
tags: "siap",
|
||||||
|
isYoutube: false,
|
||||||
|
isInternationalMedia: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await createMedia(requestData);
|
||||||
|
console.log("Form Data Submitted:", requestData);
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
text: "Data berhasil disimpan.",
|
||||||
|
icon: "success",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "OK",
|
||||||
|
}).then(() => {
|
||||||
|
router.push("/en/contributor/content/image");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (data: ImageSchema) => {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{detail !== undefined ? (
|
||||||
|
<div className="flex lg:flex-row gap-10">
|
||||||
|
<Card className="w-full lg:w-8/12">
|
||||||
|
<div className="px-6 py-6">
|
||||||
|
<p className="text-lg font-semibold mb-3">Form Konten Foto</p>
|
||||||
|
<div className="gap-5 mb-5">
|
||||||
|
{/* Input Title */}
|
||||||
|
<div className="space-y-2 py-3">
|
||||||
|
<Label>Judul</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.title}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Title"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.title?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.title.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="py-3 w-full">
|
||||||
|
<Label>Kategori</Label>
|
||||||
|
<Select
|
||||||
|
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail
|
||||||
|
onValueChange={(id) => {
|
||||||
|
console.log("Selected Category:", id);
|
||||||
|
setSelectedTarget(id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger size="md">
|
||||||
|
<SelectValue placeholder="Pilih" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<SelectItem key={category.id} value={category.id}>
|
||||||
|
{category.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="py-3">
|
||||||
|
<Label>Deskripsi</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="description"
|
||||||
|
render={({ field: { onChange, value } }) => (
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={detail?.description}
|
||||||
|
onChange={onChange}
|
||||||
|
className="dark:text-black"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.description?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.description.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="w-4/12">
|
||||||
|
<Card className=" h-[800px]">
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Kreator</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="creatorName"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.creatorName}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Title"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.creatorName?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.creatorName.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 px-3">
|
||||||
|
<Label>Pratinjau Gambar Utama</Label>
|
||||||
|
<Card className="mt-2">
|
||||||
|
<img
|
||||||
|
src={detail.thumbnailLink}
|
||||||
|
alt="Thumbnail Gambar Utama"
|
||||||
|
className="w-full h-auto rounded"
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tag</Label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{detail?.tags?.split(",").map((tag, index) => (
|
||||||
|
<Badge
|
||||||
|
key={index}
|
||||||
|
className="border rounded-md px-2 py-2"
|
||||||
|
>
|
||||||
|
{tag.trim()}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<Label>Target Publish</Label>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="5"
|
||||||
|
checked={selectedPublishers.includes(5)}
|
||||||
|
onChange={() => handleCheckboxChange(5)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="5">UMUM</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="6"
|
||||||
|
checked={selectedPublishers.includes(6)}
|
||||||
|
onChange={() => handleCheckboxChange(6)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="6">JOURNALIS</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="7"
|
||||||
|
checked={selectedPublishers.includes(7)}
|
||||||
|
onChange={() => handleCheckboxChange(7)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="7">POLRI</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="8"
|
||||||
|
checked={selectedPublishers.includes(8)}
|
||||||
|
onChange={() => handleCheckboxChange(8)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="8">KSP</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||||
|
<MailIcon />
|
||||||
|
<p className="">Kotak Saran (0)</p>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<p>Keterangan:</p>
|
||||||
|
{/* <p>{detail?.status}</p> */}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="flex flex-row justify-end gap-3">
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button type="submit" color="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button type="submit" color="primary" variant="outline">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,552 @@
|
||||||
|
"use client";
|
||||||
|
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||||
|
import { useForm, Controller } from "react-hook-form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import * as z from "zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
import { register } from "module";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import { createTask } from "@/config/api";
|
||||||
|
import {
|
||||||
|
convertSPIT,
|
||||||
|
createMedia,
|
||||||
|
detailSPIT,
|
||||||
|
getTagsBySubCategoryId,
|
||||||
|
listCategory,
|
||||||
|
listEnableCategory,
|
||||||
|
} from "@/service/content/content";
|
||||||
|
import { detailMedia } from "@/service/curated-content/curated-content";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { MailIcon } from "lucide-react";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/free-mode";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "swiper/css/pagination";
|
||||||
|
import "swiper/css/thumbs";
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
|
||||||
|
import { request } from "http";
|
||||||
|
|
||||||
|
const imageSchema = z.object({
|
||||||
|
contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
contentDescription: z
|
||||||
|
.string()
|
||||||
|
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
|
||||||
|
contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
|
||||||
|
// tags: z.string().min(1, { message: "Judul diperlukan" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
type Category = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Detail = {
|
||||||
|
id: string;
|
||||||
|
contentTitle: string;
|
||||||
|
contentDescription: string;
|
||||||
|
slug: string;
|
||||||
|
content: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
contentCreator: string;
|
||||||
|
creatorName: string;
|
||||||
|
contentThumbnail: string;
|
||||||
|
contentTag: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function FormConvertSPIT() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const { id } = useParams() as { id: string };
|
||||||
|
console.log(id);
|
||||||
|
const editor = useRef(null);
|
||||||
|
type ImageSchema = z.infer<typeof imageSchema>;
|
||||||
|
|
||||||
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||||
|
const taskId = Cookies.get("taskId");
|
||||||
|
const scheduleId = Cookies.get("scheduleId");
|
||||||
|
const scheduleType = Cookies.get("scheduleType");
|
||||||
|
|
||||||
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
|
const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const [tags, setTags] = useState<any[]>([]);
|
||||||
|
const [detail, setDetail] = useState<Detail>();
|
||||||
|
const [refresh, setRefresh] = useState(false);
|
||||||
|
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
|
||||||
|
const [detailThumb, setDetailThumb] = useState<any>([]);
|
||||||
|
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||||
|
|
||||||
|
const [selectedTarget, setSelectedTarget] = useState("");
|
||||||
|
const [unitSelection, setUnitSelection] = useState({
|
||||||
|
allUnit: false,
|
||||||
|
mabes: false,
|
||||||
|
polda: false,
|
||||||
|
polres: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
let fileTypeId = "1";
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<ImageSchema>({
|
||||||
|
resolver: zodResolver(imageSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleRemoveTag = (index: any) => {
|
||||||
|
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (event.target.files) {
|
||||||
|
const files = Array.from(event.target.files);
|
||||||
|
setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
|
||||||
|
console.log("DATAFILE::", selectedFiles);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveImage = (index: number) => {
|
||||||
|
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCheckboxChange = (id: number) => {
|
||||||
|
setSelectedPublishers((prev) =>
|
||||||
|
prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initState() {
|
||||||
|
getCategories();
|
||||||
|
}
|
||||||
|
|
||||||
|
initState();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getCategories = async () => {
|
||||||
|
try {
|
||||||
|
const category = await listCategory(fileTypeId);
|
||||||
|
const resCategory: Category[] = category.data.data.content;
|
||||||
|
|
||||||
|
setCategories(resCategory);
|
||||||
|
console.log("data category", resCategory);
|
||||||
|
|
||||||
|
if (scheduleId && scheduleType === "3") {
|
||||||
|
const findCategory = resCategory.find((o) =>
|
||||||
|
o.name.toLowerCase().includes("pers rilis")
|
||||||
|
);
|
||||||
|
|
||||||
|
if (findCategory) {
|
||||||
|
// setValue("categoryId", findCategory.id);
|
||||||
|
setSelectedCategoryId(findCategory.id); // Set the selected category
|
||||||
|
const response = await getTagsBySubCategoryId(findCategory.id);
|
||||||
|
setTags(response?.data.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch categories:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function initState() {
|
||||||
|
if (id) {
|
||||||
|
const response = await detailSPIT(id);
|
||||||
|
const details = response.data?.data;
|
||||||
|
|
||||||
|
setDetail(details);
|
||||||
|
|
||||||
|
const filesData = details.contentList || [];
|
||||||
|
const fileUrls = filesData.map((file: { contentFile: string }) =>
|
||||||
|
file.contentFile ? file.contentFile : "default-image.jpg"
|
||||||
|
);
|
||||||
|
setDetailThumb(fileUrls);
|
||||||
|
|
||||||
|
const matchingCategory = categories.find(
|
||||||
|
(category) => category.id === details.categoryId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matchingCategory) {
|
||||||
|
setSelectedTarget(matchingCategory.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
// setSelectedTarget(details.categoryId); // Untuk dropdown
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initState();
|
||||||
|
}, [refresh, setValue]);
|
||||||
|
|
||||||
|
const [tempFile, setTempFile] = useState(
|
||||||
|
detailThumb.map((data: any) => ({
|
||||||
|
contentId: data.id,
|
||||||
|
placement: [],
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleCheckboxChangeFile = (mediaFileId: any, value: any) => {
|
||||||
|
setTempFile((prev: any) =>
|
||||||
|
prev.map((file: any) =>
|
||||||
|
file.contentId === mediaFileId
|
||||||
|
? {
|
||||||
|
...file,
|
||||||
|
placement: file.placement.includes(value)
|
||||||
|
? file.placement.filter((item: any) => item !== value) // Hapus jika sudah ada
|
||||||
|
: [...file.placement, value], // Tambah jika belum ada
|
||||||
|
}
|
||||||
|
: file
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPlacement = () => {
|
||||||
|
return tempFile.map((file: any) => ({
|
||||||
|
mediaFileId: Number(file.contentId),
|
||||||
|
placements: file.placement.join(","),
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async (data: any) => {
|
||||||
|
const requestData = {
|
||||||
|
spitId: id,
|
||||||
|
title: data.contentTitle,
|
||||||
|
description: data.contentDescription,
|
||||||
|
htmlDescription: data.contentDescription,
|
||||||
|
tags: "siap",
|
||||||
|
categoryId: selectedCategoryId,
|
||||||
|
publishedFor: "6",
|
||||||
|
creator: data.contentCreator,
|
||||||
|
files: getPlacement(),
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await convertSPIT(requestData);
|
||||||
|
console.log("Form Data Submitted:", response);
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
text: "Data berhasil disimpan.",
|
||||||
|
icon: "success",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "OK",
|
||||||
|
}).then(() => {
|
||||||
|
router.push("/en/contributor/content/spit");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (data: ImageSchema) => {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{detail !== undefined ? (
|
||||||
|
<div className="flex lg:flex-row gap-10">
|
||||||
|
<Card className="w-full lg:w-8/12">
|
||||||
|
<div className="px-6 py-6">
|
||||||
|
<p className="text-lg font-semibold mb-3">Form Konten Foto</p>
|
||||||
|
<div className="gap-5 mb-5">
|
||||||
|
{/* Input Title */}
|
||||||
|
<div className="space-y-2 py-3">
|
||||||
|
<Label>Judul</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="contentTitle"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.contentTitle}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter contentTitle"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.contentTitle?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.contentTitle.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="py-3 w-full">
|
||||||
|
<Label>Kategori</Label>
|
||||||
|
<Select
|
||||||
|
defaultValue={detail?.content?.name}
|
||||||
|
onValueChange={(id) => {
|
||||||
|
console.log("Selected Category ID:", id);
|
||||||
|
setSelectedCategoryId(Number(id)); // Simpan ID kategori
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger size="md">
|
||||||
|
<SelectValue placeholder="Pilih" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<SelectItem
|
||||||
|
key={category.id}
|
||||||
|
value={category.id.toString()} // ID kategori dikirim sebagai value
|
||||||
|
>
|
||||||
|
{category?.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="py-3">
|
||||||
|
<Label>Deskripsi</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="contentDescription"
|
||||||
|
render={({ field: { onChange, value } }) => (
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={detail?.contentDescription}
|
||||||
|
onChange={onChange}
|
||||||
|
className="dark:text-black"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.contentDescription?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.contentDescription.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xl text-black">File Media</Label>
|
||||||
|
<div className="w-full ">
|
||||||
|
<Swiper
|
||||||
|
thumbs={{ swiper: thumbsSwiper }}
|
||||||
|
modules={[FreeMode, Navigation, Thumbs]}
|
||||||
|
navigation={false}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{detailThumb?.map((data: any) => (
|
||||||
|
<SwiperSlide key={data.id}>
|
||||||
|
<img
|
||||||
|
className="object-fill h-full w-full"
|
||||||
|
src={data}
|
||||||
|
alt={` ${data.id}`}
|
||||||
|
/>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
<div className=" mt-2 ">
|
||||||
|
<Swiper
|
||||||
|
onSwiper={setThumbsSwiper}
|
||||||
|
slidesPerView={6}
|
||||||
|
spaceBetween={8}
|
||||||
|
pagination={{
|
||||||
|
clickable: true,
|
||||||
|
}}
|
||||||
|
modules={[Pagination, Thumbs]}
|
||||||
|
// className="mySwiper2"
|
||||||
|
>
|
||||||
|
{detailThumb?.map((data: any) => (
|
||||||
|
<SwiperSlide key={data.id}>
|
||||||
|
<img
|
||||||
|
className="object-cover h-[60px] w-[80px]"
|
||||||
|
src={data}
|
||||||
|
alt={` ${data.id}`}
|
||||||
|
/>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5">
|
||||||
|
<Label className="text-xl text-black">Penempatan File</Label>
|
||||||
|
{detailThumb.map((data: any) => (
|
||||||
|
<div key={data.id} className="flex items-center gap-3 mt-2">
|
||||||
|
<img
|
||||||
|
className="object-cover w-36 h-32"
|
||||||
|
src={data}
|
||||||
|
alt={`Thumbnail ${data.id}`}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row gap-3 items-center">
|
||||||
|
{["all", "mabes", "polda", "internasional"].map(
|
||||||
|
(value) => (
|
||||||
|
<label
|
||||||
|
key={value}
|
||||||
|
className="text-blue-500 cursor-pointer flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="placement"
|
||||||
|
value={value}
|
||||||
|
onChange={() =>
|
||||||
|
handleCheckboxChangeFile(data.id, value)
|
||||||
|
}
|
||||||
|
checked={tempFile
|
||||||
|
.find(
|
||||||
|
(file: any) => file.contentId === data.id
|
||||||
|
)
|
||||||
|
?.placement.includes(value)}
|
||||||
|
/>
|
||||||
|
{value.charAt(0).toUpperCase() + value.slice(1)}
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="w-4/12">
|
||||||
|
<Card className=" h-[800px]">
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Kreator</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="contentCreator"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
size="md"
|
||||||
|
type="text"
|
||||||
|
defaultValue={detail?.contentCreator}
|
||||||
|
onChange={field.onChange}
|
||||||
|
placeholder="Enter Title"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.contentCreator?.message && (
|
||||||
|
<p className="text-red-400 text-sm">
|
||||||
|
{errors.contentCreator.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 px-3">
|
||||||
|
<Label>Pratinjau Gambar Utama</Label>
|
||||||
|
<Card className="mt-2">
|
||||||
|
<img
|
||||||
|
src={detail.contentThumbnail}
|
||||||
|
alt="Thumbnail Gambar Utama"
|
||||||
|
className="w-full h-auto rounded"
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tag</Label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{detail?.contentTag?.split(",").map((tag, index) => (
|
||||||
|
<Badge
|
||||||
|
key={index}
|
||||||
|
className="border rounded-md px-2 py-2"
|
||||||
|
>
|
||||||
|
{tag.trim()}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<Label>Target Publish</Label>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="5"
|
||||||
|
checked={selectedPublishers.includes(5)}
|
||||||
|
onChange={() => handleCheckboxChange(5)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="5">UMUM</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="6"
|
||||||
|
checked={selectedPublishers.includes(6)}
|
||||||
|
onChange={() => handleCheckboxChange(6)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="6">JOURNALIS</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="7"
|
||||||
|
checked={selectedPublishers.includes(7)}
|
||||||
|
onChange={() => handleCheckboxChange(7)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="7">POLRI</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<Checkbox
|
||||||
|
id="8"
|
||||||
|
checked={selectedPublishers.includes(8)}
|
||||||
|
onChange={() => handleCheckboxChange(8)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="8">KSP</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
|
||||||
|
<MailIcon />
|
||||||
|
<p className="">Kotak Saran (0)</p>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-3">
|
||||||
|
<p>Keterangan:</p>
|
||||||
|
{/* <p>{detail?.status}</p> */}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="flex flex-row justify-end gap-3">
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button type="submit" color="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button type="submit" color="primary" variant="outline">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -330,7 +330,7 @@ export default function FormContestDetail() {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col mt-7">
|
<div className="flex flex-col mt-7">
|
||||||
<Label>Pelaksana Tugas</Label>
|
<Label>Pelaksana Tugas</Label>
|
||||||
<div className="flex flex-row mt-2 gap-2">
|
<div className="flex flex-row mt-2 gap-3">
|
||||||
{Object.keys(unitSelection).map((key) => (
|
{Object.keys(unitSelection).map((key) => (
|
||||||
<div className="flex items-center gap-2" key={key}>
|
<div className="flex items-center gap-2" key={key}>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
|
import { getAPI, getAPIInterceptor, postAPIInterceptor } from "@/config/api";
|
||||||
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
|
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
|
||||||
|
|
||||||
// export async function listDataAll(
|
// export async function listDataAll(
|
||||||
|
|
@ -146,6 +146,11 @@ export async function listEnableCategory(type: any) {
|
||||||
return getAPIInterceptor(url);
|
return getAPIInterceptor(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function listCategory(type: any) {
|
||||||
|
const url = `media/categories/list/publish?enablePage=0&sort=desc&sortBy=id&categoryId=${type}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
export async function getTags() {
|
export async function getTags() {
|
||||||
const url = "media/tags/list";
|
const url = "media/tags/list";
|
||||||
return getAPIInterceptor(url);
|
return getAPIInterceptor(url);
|
||||||
|
|
@ -155,3 +160,18 @@ export async function createMedia(data: any) {
|
||||||
const url = "media";
|
const url = "media";
|
||||||
return postAPIInterceptor(url, data);
|
return postAPIInterceptor(url, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function uploadThumbnail(id: any, data: any) {
|
||||||
|
const url = `media/upload?id=${id}&operation=thumbnail`;
|
||||||
|
return postAPIInterceptor(url, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function detailSPIT(id: any) {
|
||||||
|
const url = `media/spit?id=${id}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function convertSPIT(data: any) {
|
||||||
|
const url = "media/spit/convert";
|
||||||
|
return postAPIInterceptor(url, data);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue