From 537a341d6088df7a5719ddb4406d0cf6e93080aa Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Tue, 10 Dec 2024 17:35:03 +0700 Subject: [PATCH] feat:form image, form video, add table Nulis Ai --- .../(protected)/blog/table/blog-table.tsx | 97 ++-- app/[locale]/(protected)/blog/table/data.ts | 65 --- .../blog/table/table-pagination.tsx | 84 ---- .../content/audio-visual/create/page.tsx | 15 + .../(protected)/content/audio-visual/page.tsx | 13 +- .../audio-visual/table-video/columns.tsx | 180 ------- .../content/audio-visual/table-video/data.ts | 184 -------- .../audio-visual/table-video/index.tsx | 6 +- .../table-video/table-pagination.tsx | 52 --- .../(protected)/content/audio/page.tsx | 3 +- .../content/audio/table-audio/index.tsx | 10 +- .../(protected)/content/image/create/page.tsx | 2 +- .../(protected)/content/image/page.tsx | 2 +- .../content/image/table-image/columns.tsx | 180 ------- .../content/image/table-image/data.ts | 184 -------- .../content/image/table-image/index.tsx | 3 - .../image/table-image/table-pagination.tsx | 52 --- .../(protected)/content/nulis-ai/page.tsx | 8 +- .../content/nulis-ai/table-nulis/index.tsx | 241 +++++++++- .../content/spit/table-spit/index.tsx | 74 +-- .../{create-form.tsx => image-form.tsx} | 16 +- components/form/content/video-form.tsx | 440 ++++++++++++++++++ service/content/content.ts | 24 +- 23 files changed, 804 insertions(+), 1131 deletions(-) delete mode 100644 app/[locale]/(protected)/blog/table/data.ts delete mode 100644 app/[locale]/(protected)/blog/table/table-pagination.tsx create mode 100644 app/[locale]/(protected)/content/audio-visual/create/page.tsx delete mode 100644 app/[locale]/(protected)/content/audio-visual/table-video/columns.tsx delete mode 100644 app/[locale]/(protected)/content/audio-visual/table-video/data.ts delete mode 100644 app/[locale]/(protected)/content/audio-visual/table-video/table-pagination.tsx delete mode 100644 app/[locale]/(protected)/content/image/table-image/columns.tsx delete mode 100644 app/[locale]/(protected)/content/image/table-image/data.ts delete mode 100644 app/[locale]/(protected)/content/image/table-image/table-pagination.tsx rename components/form/content/{create-form.tsx => image-form.tsx} (96%) create mode 100644 components/form/content/video-form.tsx diff --git a/app/[locale]/(protected)/blog/table/blog-table.tsx b/app/[locale]/(protected)/blog/table/blog-table.tsx index bb8974d7..ea22aa91 100644 --- a/app/[locale]/(protected)/blog/table/blog-table.tsx +++ b/app/[locale]/(protected)/blog/table/blog-table.tsx @@ -53,7 +53,6 @@ export type CompanyData = { tags: string; statusName: string; }; -import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; import { paginationBlog } from "@/service/blog/blog"; @@ -96,7 +95,14 @@ export const columns: ColumnDef[] = [ accessorKey: "createdAt", header: "Tanggal Unggah ", cell: ({ row }) => ( - {row.getValue("createdAt")} + + {" "} + {`${new Date(row.getValue("createdAt")).getDate()}/${ + new Date(row.getValue("createdAt")).getMonth() + 1 + }/${new Date(row.getValue("createdAt")).getFullYear()} ${new Date( + row.getValue("createdAt") + ).getHours()}:${new Date(row.getValue("createdAt")).getMinutes()}`} + ), }, { @@ -199,15 +205,20 @@ const BlogTable = () => { async function initState() { try { const res = await paginationBlog(limit, page); - const data = res.data.data.content.map((item: any, index: number) => ({ - no: (page - 1) * limit + index + 1, - title: item.title, - categoryName: item.categoryName, - tags: item.tags, - assignmentType: item.assignmentType?.name || "-", - createdAt: item.createdAt, - statusName: item.statusName, - })); + const data = res.data.data.content + .map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + categoryName: item.categoryName, + tags: item.tags, + assignmentType: item.assignmentType?.name || "-", + createdAt: item.createdAt, + statusName: item.statusName, + })) + .sort( + (a: CompanyData, b: CompanyData) => + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); // Mengurutkan dari terbaru ke terlama berdasarkan `createdAt` setBlogTable(data); setTotalPage(res.data.totalPages); @@ -285,46 +296,40 @@ const BlogTable = () => { )} -
-
- {table.getFilteredSelectedRowModel().rows.length} of{" "} - {table.getFilteredRowModel().rows.length} row(s) selected. -
-
+
+ + {table.getPageOptions().map((page, pageIndex) => ( - {table.getPageOptions().map((page, pageIndex) => ( - - ))} - -
+ ))} +
); diff --git a/app/[locale]/(protected)/blog/table/data.ts b/app/[locale]/(protected)/blog/table/data.ts deleted file mode 100644 index 6bb2b47a..00000000 --- a/app/[locale]/(protected)/blog/table/data.ts +++ /dev/null @@ -1,65 +0,0 @@ -export const data = [ - { - title: "Ops Mantap Praja & Pilkada 2024", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - status: "Terkirim", - }, - { - title: "Seputar Prestasi", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Ops Mantap Praja & Pilkada 2024", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Ops Mantap Praja & Pilkada 2024", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Seputar Prestasi", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Seputar Prestasi", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Seputar Prestasi", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Seputar Prestasi", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, - { - title: "Seputar Prestasi", - status: "Terkirim", - category: "Giat Pimpinan", - date: "15/10/2024 9:11", - tag: "percobaan", - }, -]; diff --git a/app/[locale]/(protected)/blog/table/table-pagination.tsx b/app/[locale]/(protected)/blog/table/table-pagination.tsx deleted file mode 100644 index 5c5658b3..00000000 --- a/app/[locale]/(protected)/blog/table/table-pagination.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { Button } from '@/components/ui/button'; -import { Table } from '@tanstack/react-table'; -import { ChevronLeft, ChevronRight } from 'lucide-react'; -import { useSearchParams } from 'next/navigation'; -import { useRouter } from 'next/navigation'; -import React from 'react'; - -interface DataTablePaginationProps { - table: Table; - totalPage: number; // Total jumlah halaman - totalData: number; // Total jumlah data - visiblePageCount?: number; // Jumlah halaman yang ditampilkan (default 5) -} - -const TablePagination = ({ table, totalPage, totalData, visiblePageCount = 5 }: DataTablePaginationProps) => { - const router = useRouter(); - const searchParams = useSearchParams(); - - const [currentPageIndex, setCurrentPageIndex] = React.useState(1); - - React.useEffect(() => { - const pageFromUrl = searchParams?.get('page'); - if (pageFromUrl) { - setCurrentPageIndex(Number(pageFromUrl)); - } - }, [searchParams]); - - // Hitung startPage dan endPage, disesuaikan untuk dimulai dari 1 - const startPage = Math.max(1, currentPageIndex - Math.floor(visiblePageCount / 2)); - const endPage = Math.min(totalPage, startPage + visiblePageCount - 1); - - const handlePageChange = (pageIndex: number) => { - // Perbarui query parameter di URL - const searchParams = new URLSearchParams(window.location.search); - searchParams.set('page', (pageIndex).toString()); // Menyimpan halaman sebagai 1-based index - router.push(`${window.location.pathname}?${searchParams.toString()}`); - - // Pindahkan halaman di tabel - table.setPageIndex(pageIndex); - setCurrentPageIndex(pageIndex + 1); // Update state untuk halaman saat ini - }; - - return ( -
-
- {table.getFilteredSelectedRowModel().rows.length} of{" "} - {totalData} row(s) selected. -
-
- - {Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index).map((pageIndex) => ( - - ))} - -
-
- ); -}; - -export default TablePagination; diff --git a/app/[locale]/(protected)/content/audio-visual/create/page.tsx b/app/[locale]/(protected)/content/audio-visual/create/page.tsx new file mode 100644 index 00000000..089cc55f --- /dev/null +++ b/app/[locale]/(protected)/content/audio-visual/create/page.tsx @@ -0,0 +1,15 @@ +import FormVideo from "@/components/form/content/video-form"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; + +const VideoCreatePage = async () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default VideoCreatePage; diff --git a/app/[locale]/(protected)/content/audio-visual/page.tsx b/app/[locale]/(protected)/content/audio-visual/page.tsx index 88d3988f..0c514a6e 100644 --- a/app/[locale]/(protected)/content/audio-visual/page.tsx +++ b/app/[locale]/(protected)/content/audio-visual/page.tsx @@ -2,10 +2,11 @@ import { Card, CardContent } from "@/components/ui/card"; import SiteBreadcrumb from "@/components/site-breadcrumb"; import TableImage from "./table-video"; -import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react"; +import { UploadIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Icon } from "@iconify/react/dist/iconify.js"; import TableVideo from "./table-video"; +import { Link } from "@/components/navigation"; const ReactTableVideoPage = () => { return ( @@ -55,10 +56,12 @@ const ReactTableVideoPage = () => { Konten Video
- + + + - - - - - View - - - - Edit - - - - Delete - - - - ); - }, - }, -]; diff --git a/app/[locale]/(protected)/content/audio-visual/table-video/data.ts b/app/[locale]/(protected)/content/audio-visual/table-video/data.ts deleted file mode 100644 index 99b38b91..00000000 --- a/app/[locale]/(protected)/content/audio-visual/table-video/data.ts +++ /dev/null @@ -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, - }, -]; diff --git a/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx b/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx index 136b25f7..ba99915c 100644 --- a/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx +++ b/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx @@ -1,5 +1,4 @@ "use client"; - import * as React from "react"; import { ColumnDef, @@ -24,9 +23,6 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; - -import { data } from "./data"; -import TablePagination from "./table-pagination"; import { Button } from "@/components/ui/button"; import { format } from "date-fns"; import { @@ -45,7 +41,7 @@ import { import { title } from "process"; import { getCookiesDecrypt } from "@/lib/utils"; -import { listDataImage, listDataVideo } from "@/service/content/content"; +import { listDataVideo } from "@/service/content/content"; export type CompanyData = { no: number; diff --git a/app/[locale]/(protected)/content/audio-visual/table-video/table-pagination.tsx b/app/[locale]/(protected)/content/audio-visual/table-video/table-pagination.tsx deleted file mode 100644 index ad78cfeb..00000000 --- a/app/[locale]/(protected)/content/audio-visual/table-video/table-pagination.tsx +++ /dev/null @@ -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; -} - -const TablePagination = ({ table }: DataTablePaginationProps) => { - return ( -
-
- {table.getFilteredSelectedRowModel().rows.length} of{" "} - {table.getFilteredRowModel().rows.length} row(s) selected. -
-
- - {table.getPageOptions().map((page, pageIndex) => ( - - - ))} - -
-
- ); -}; - -export default TablePagination; \ No newline at end of file diff --git a/app/[locale]/(protected)/content/audio/page.tsx b/app/[locale]/(protected)/content/audio/page.tsx index f68a4b37..241b7b2e 100644 --- a/app/[locale]/(protected)/content/audio/page.tsx +++ b/app/[locale]/(protected)/content/audio/page.tsx @@ -1,8 +1,7 @@ "use client"; import { Card, CardContent } from "@/components/ui/card"; import SiteBreadcrumb from "@/components/site-breadcrumb"; -import TableImage from "./table-audio"; -import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react"; +import { UploadIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Icon } from "@iconify/react/dist/iconify.js"; import TableAudio from "./table-audio"; diff --git a/app/[locale]/(protected)/content/audio/table-audio/index.tsx b/app/[locale]/(protected)/content/audio/table-audio/index.tsx index 760a8ab7..80bd4759 100644 --- a/app/[locale]/(protected)/content/audio/table-audio/index.tsx +++ b/app/[locale]/(protected)/content/audio/table-audio/index.tsx @@ -1,5 +1,4 @@ "use client"; - import * as React from "react"; import { ColumnDef, @@ -24,9 +23,6 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; - -import { data } from "./data"; -import TablePagination from "./table-pagination"; import { Button } from "@/components/ui/button"; import { format } from "date-fns"; import { @@ -45,11 +41,7 @@ import { import { title } from "process"; import { getCookiesDecrypt } from "@/lib/utils"; -import { - listDataAudio, - listDataImage, - listDataVideo, -} from "@/service/content/content"; +import { listDataAudio } from "@/service/content/content"; export type CompanyData = { no: number; diff --git a/app/[locale]/(protected)/content/image/create/page.tsx b/app/[locale]/(protected)/content/image/create/page.tsx index 6b169ce1..08c9c852 100644 --- a/app/[locale]/(protected)/content/image/create/page.tsx +++ b/app/[locale]/(protected)/content/image/create/page.tsx @@ -1,7 +1,7 @@ import { Card, CardContent } from "@/components/ui/card"; import SiteBreadcrumb from "@/components/site-breadcrumb"; import FormTask from "@/components/form/task/task-form"; -import FormImage from "@/components/form/content/create-form"; +import FormImage from "@/components/form/content/image-form"; const ImageCreatePage = async () => { return ( diff --git a/app/[locale]/(protected)/content/image/page.tsx b/app/[locale]/(protected)/content/image/page.tsx index bbbd5df8..d26be837 100644 --- a/app/[locale]/(protected)/content/image/page.tsx +++ b/app/[locale]/(protected)/content/image/page.tsx @@ -2,7 +2,7 @@ import { Card, CardContent } from "@/components/ui/card"; import SiteBreadcrumb from "@/components/site-breadcrumb"; import TableImage from "./table-image"; -import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react"; +import { UploadIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Icon } from "@iconify/react/dist/iconify.js"; import { Link } from "@/components/navigation"; diff --git a/app/[locale]/(protected)/content/image/table-image/columns.tsx b/app/[locale]/(protected)/content/image/table-image/columns.tsx deleted file mode 100644 index af464e84..00000000 --- a/app/[locale]/(protected)/content/image/table-image/columns.tsx +++ /dev/null @@ -1,180 +0,0 @@ -"use client"; - -import { ColumnDef } from "@tanstack/react-table"; -import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"; - -import { Button } from "@/components/ui/button"; -import { Checkbox } from "@/components/ui/checkbox"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; - -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -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[] = [ - // { - // id: "select", - // header: ({ table }) => ( - // table.toggleAllPageRowsSelected(!!value)} - // aria-label="Select all" - // /> - // ), - // cell: ({ row }) => ( - //
- // row.toggleSelected(!!value)} - // aria-label="Select row" - // /> - //
- // ), - // enableSorting: false, - // enableHiding: false, - // }, - { - accessorKey: "id", - header: "No", - cell: ({ row }) => {row.getValue("id")}, - }, - { - accessorKey: "order", - header: "Judul", - cell: ({ row }) => ( -
- {row.getValue("order")}, -
- ), - }, - { - accessorKey: "customer", - header: "Kategory", - cell: ({ row }) => { - const user = row.original.customer; - return ( -
-
- - {user?.name ?? "Unknown User"} - -
-
- ); - }, - }, - { - accessorKey: "date", - header: "Tanggal unggah", - cell: ({ row }) => { - return {row.getValue("date")}; - }, - }, - { - accessorKey: "quantity", - header: "Kreator", - cell: ({ row }) => { - return {row.getValue("quantity")}; - }, - }, - { - accessorKey: "amount", - header: "Sumber", - cell: ({ row }) => { - return {row.getValue("amount")}; - }, - }, - { - accessorKey: "amount", - header: "Penempatan File", - cell: ({ row }) => { - return {row.getValue("amount")}; - }, - }, - { - accessorKey: "status", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - paid: "bg-success/20 text-success", - due: "bg-warning/20 text-warning", - canceled: "bg-destructive/20 text-destructive", - }; - const status = row.getValue("status"); - const statusStyles = statusColors[status] || "default"; - return ( - - {status}{" "} - - ); - }, - }, - { - accessorKey: "amount", - header: "Kurasi Konten", - cell: ({ row }) => { - return {row.getValue("amount")}; - }, - }, - { - accessorKey: "amount", - header: "Saran", - cell: ({ row }) => { - return {row.getValue("amount")}; - }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - View - - - - Edit - - - - Delete - - - - ); - }, - }, -]; diff --git a/app/[locale]/(protected)/content/image/table-image/data.ts b/app/[locale]/(protected)/content/image/table-image/data.ts deleted file mode 100644 index 99b38b91..00000000 --- a/app/[locale]/(protected)/content/image/table-image/data.ts +++ /dev/null @@ -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, - }, -]; diff --git a/app/[locale]/(protected)/content/image/table-image/index.tsx b/app/[locale]/(protected)/content/image/table-image/index.tsx index 72081800..21116f77 100644 --- a/app/[locale]/(protected)/content/image/table-image/index.tsx +++ b/app/[locale]/(protected)/content/image/table-image/index.tsx @@ -24,9 +24,6 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; - -import { data } from "./data"; -import TablePagination from "./table-pagination"; import { Button } from "@/components/ui/button"; import { format } from "date-fns"; import { diff --git a/app/[locale]/(protected)/content/image/table-image/table-pagination.tsx b/app/[locale]/(protected)/content/image/table-image/table-pagination.tsx deleted file mode 100644 index ad78cfeb..00000000 --- a/app/[locale]/(protected)/content/image/table-image/table-pagination.tsx +++ /dev/null @@ -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; -} - -const TablePagination = ({ table }: DataTablePaginationProps) => { - return ( -
-
- {table.getFilteredSelectedRowModel().rows.length} of{" "} - {table.getFilteredRowModel().rows.length} row(s) selected. -
-
- - {table.getPageOptions().map((page, pageIndex) => ( - - - ))} - -
-
- ); -}; - -export default TablePagination; \ No newline at end of file diff --git a/app/[locale]/(protected)/content/nulis-ai/page.tsx b/app/[locale]/(protected)/content/nulis-ai/page.tsx index a392fd30..f55923f0 100644 --- a/app/[locale]/(protected)/content/nulis-ai/page.tsx +++ b/app/[locale]/(protected)/content/nulis-ai/page.tsx @@ -52,16 +52,12 @@ const ReactTableNulisPage = () => {
- Konten Foto + Konten Nulis Ai
-
diff --git a/app/[locale]/(protected)/content/nulis-ai/table-nulis/index.tsx b/app/[locale]/(protected)/content/nulis-ai/table-nulis/index.tsx index 765d9b20..ae107380 100644 --- a/app/[locale]/(protected)/content/nulis-ai/table-nulis/index.tsx +++ b/app/[locale]/(protected)/content/nulis-ai/table-nulis/index.tsx @@ -2,7 +2,9 @@ import * as React from "react"; import { + ColumnDef, ColumnFiltersState, + PaginationState, SortingState, VisibilityState, flexRender, @@ -12,7 +14,6 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table"; -import { columns } from "./columns"; import { Input } from "@/components/ui/input"; import { @@ -26,6 +27,117 @@ import { import { data } from "./data"; import TablePagination from "./table-pagination"; +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 { listDataImage, listNulisAI } from "@/service/content/content"; +import page from "../page"; + +export type CompanyData = { + no: number; + title: string; + description: string; + tags: string; + category: string; +}; + +export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
+
+ ), + }, + { + accessorKey: "title", + header: "Judul", + cell: ({ row }) => ( +
+
+

+ {row.getValue("title")} +

+
+
+ ), + }, + { + accessorKey: "description", + header: "Deskripsi", + cell: ({ row }) => ( + {row.getValue("description")} + ), + }, + { + accessorKey: "tags", + header: "Tag", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "category", + header: "Kategori", + cell: ({ row }) => ( + {row.getValue("category")} + ), + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + Delete + + + + ); + }, + }, +]; const TableNulis = () => { const [sorting, setSorting] = React.useState([]); @@ -35,9 +147,29 @@ const TableNulis = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [nulisTable, setNulisTable] = React.useState([]); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, // Halaman pertama + pageSize: 10, // Jumlah baris per halaman + }); + const [totalPage, setTotalPage] = React.useState(10); + const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman + const [search, setSearch] = React.useState(""); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + + const [categories, setCategories] = React.useState(); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + 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, + data: nulisTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -55,6 +187,48 @@ const TableNulis = () => { }, }); + React.useEffect(() => { + initState(); + }, [limit]); + + async function initState() { + try { + const isForSelf = Number(roleId) === 4; + const res = await listNulisAI( + pagination.pageSize, + pagination.pageIndex + 1 + ); + + setupData(res.data?.data); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + + function setupData(rawData: { + content: any[]; + totalPages: number; + totalElements: number; + }) { + if (rawData?.content) { + const data: CompanyData[] = rawData.content.map((item, index) => ({ + no: pagination.pageIndex * pagination.pageSize + index + 1, + title: item.title, + description: item.description, + tags: item.tags, + category: item.category.name, + isDone: item.isDone, + publishedOn: item.publishedOn, + isPublish: item.isPublish, + isPublishOnPolda: item.isPublishOnPolda, + })); + + setNulisTable(data); + setTotalPage(rawData.totalPages); + console.log(data, "dataImage"); + } + } + return (
@@ -72,22 +246,20 @@ const TableNulis = () => {
- +
{table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} ))} @@ -97,6 +269,7 @@ const TableNulis = () => { {row.getVisibleCells().map((cell) => ( @@ -114,7 +287,41 @@ const TableNulis = () => { )}
- +
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); }; diff --git a/app/[locale]/(protected)/content/spit/table-spit/index.tsx b/app/[locale]/(protected)/content/spit/table-spit/index.tsx index f45b1930..f298f706 100644 --- a/app/[locale]/(protected)/content/spit/table-spit/index.tsx +++ b/app/[locale]/(protected)/content/spit/table-spit/index.tsx @@ -251,46 +251,46 @@ const TableSPIT = () => { }, }); - React.useEffect(() => { - initState(); - }, [page, limit]); + // React.useEffect(() => { + // initState(); + // }, [page, limit]); - async function initState() { - try { - const isForSelf = Number(roleId) == 4; + // 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, - })); + // 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); - } - } + // setSpitTable(data); + // setTotalPage(res.data.totalPages); + // } catch (error) { + // console.error("Error fetching tasks:", error); + // } + // } return (
diff --git a/components/form/content/create-form.tsx b/components/form/content/image-form.tsx similarity index 96% rename from components/form/content/create-form.tsx rename to components/form/content/image-form.tsx index 45de6aea..74830c3c 100644 --- a/components/form/content/create-form.tsx +++ b/components/form/content/image-form.tsx @@ -59,7 +59,7 @@ export default function FormImage() { const [selectedCategory, setSelectedCategory] = useState(); const [tags, setTags] = useState([]); - const [selectedTarget, setSelectedTarget] = useState("all"); + const [selectedTarget, setSelectedTarget] = useState(""); const [unitSelection, setUnitSelection] = useState({ allUnit: false, mabes: false, @@ -67,7 +67,7 @@ export default function FormImage() { polres: false, }); - let fileTypeId = ""; + let fileTypeId = "1"; const { control, @@ -218,13 +218,19 @@ export default function FormImage() {
- { + console.log("Selected Category ID:", value); + setSelectedTarget(value); + }} + > - {categories.map((category: any) => ( - + {categories.map((category) => ( + {category.name} ))} diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx new file mode 100644 index 00000000..48357d84 --- /dev/null +++ b/components/form/content/video-form.tsx @@ -0,0 +1,440 @@ +"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 { 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"; + +const taskSchema = 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; +}; + +export default function FormVideo() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const editor = useRef(null); + type TaskSchema = z.infer; + + const [selectedFiles, setSelectedFiles] = useState([]); + const taskId = Cookies.get("taskId"); + const scheduleId = Cookies.get("scheduleId"); + const scheduleType = Cookies.get("scheduleType"); + + const [categories, setCategories] = useState([]); + const [selectedCategory, setSelectedCategory] = useState(); + const [tags, setTags] = useState([]); + + const [selectedTarget, setSelectedTarget] = useState(""); + const [unitSelection, setUnitSelection] = useState({ + allUnit: false, + mabes: false, + polda: false, + polres: false, + }); + + let fileTypeId = "2"; + + const { + control, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(taskSchema), + }); + + // 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) => { + 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() { + getCategories(); + // setVideoActive(fileTypeId == '2'); + // getRoles(); + } + + 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); + } + }; + + const save = async (data: TaskSchema) => { + const requestData = { + ...data, + title: data.title, + description: data.description, + htmlDescription: data.description, + fileTypeId, + categoryId: selectedTarget, + subCategoryId: selectedTarget, + uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58", + statusId: "1", + publishedFor: 1, + 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/content/audio-visual"); + }); + }; + + 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 ( +
+
+ +
+

Form Konten Video

+
+ {/* Input Title */} +
+ + ( + + )} + /> + {errors.title?.message && ( +

{errors.title.message}

+ )} +
+
+
+ + +
+
+
+ + ( + + )} + /> + {errors.description?.message && ( +

+ {errors.description.message} +

+ )} +
+
+ +
+ +
+
+ +
+ +
+
+ {selectedFiles?.length > 0 ? ( +
+
+ {selectedFiles.map((image, index) => ( +
+ Pratinjau Gambar + +
+ ))} +
+
+ ) : ( + "" + )} +
+
+ + {/* Submit Button */} +
+ +
+ +
+
+ + ( + + )} + /> + {errors.creatorName?.message && ( +

+ {errors.creatorName.message} +

+ )} +
+
+
+ + {/* ( + + )} + /> */} +
+ {tags.length === 0 && "Please add at least one tag."} +
+
+ {tags.map((tag, index) => ( +
+ {tag} + +
+ ))} +
+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ ); +} diff --git a/service/content/content.ts b/service/content/content.ts index 8c387e37..e9ed679b 100644 --- a/service/content/content.ts +++ b/service/content/content.ts @@ -1,13 +1,5 @@ -import { - getAPI, - getAPIInterceptor, - postAPI, - postAPIInterceptor, -} from "@/config/api"; -import { - httpGetInterceptor, - httpGetInterceptorWithToken, -} from "../http-config/http-interceptor-service"; +import { getAPIInterceptor, postAPIInterceptor } from "@/config/api"; +import { httpGetInterceptor } from "../http-config/http-interceptor-service"; export async function listDataImage( page: any, @@ -88,7 +80,13 @@ export async function listSPIT( isPublish: any ) { return await httpGetInterceptor( - `media/spit/pagination?enablePage=1&page=${page}&size=${limit}&sort=desc&sortBy=contentTitleId&title=${title}&isPublish=${isPublish}` + `media/spit/pagination?enablePage=0&page=${page}&size=${limit}&sort=desc&sortBy=contentTitleId&title=${title}&isPublish=${isPublish}` + ); +} + +export async function listNulisAI(page: any, limit: any) { + return await getAPIInterceptor( + `media/nulis-ai/pagination?enablePage=0&page=${page}&size=${limit}` ); } @@ -109,6 +107,6 @@ export async function getTags() { } export async function createMedia(data: any) { - const url = "media"; - return postAPIInterceptor(url, data); + const pathUrl = "media"; + return postAPIInterceptor(pathUrl, data); }