From 6688e81af7e9bceaa763c648f5254a73b0586301 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Mon, 12 May 2025 22:46:56 +0800 Subject: [PATCH] feat:update modal tracking berita --- .../tb-news/component/table.tsx | 205 +++++++------ .../(protected)/contributor/task-ta/page.tsx | 2 +- .../account-report/components/column.tsx | 14 +- .../account-report/components/table.tsx | 271 ++++++++++++------ .../communications/account-report/page.tsx | 24 +- app/[locale]/(public)/all/filter/page.tsx | 245 +++++++++++++--- .../form/media-tracking/search-audio-card.tsx | 188 ++++++++++++ .../media-tracking/search-document-card.tsx | 202 +++++++++++++ .../form/media-tracking/search-image-card.tsx | 174 +++++++++++ .../form/media-tracking/search-video-card.tsx | 175 +++++++++++ .../area-coverage-and-work-units.tsx | 15 +- .../partials/header/locale-switcher.tsx | 41 ++- service/communication/report-account.ts | 11 + 13 files changed, 1309 insertions(+), 258 deletions(-) create mode 100644 components/form/media-tracking/search-audio-card.tsx create mode 100644 components/form/media-tracking/search-document-card.tsx create mode 100644 components/form/media-tracking/search-image-card.tsx create mode 100644 components/form/media-tracking/search-video-card.tsx create mode 100644 service/communication/report-account.ts diff --git a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx index fc7b6304..e92bc126 100644 --- a/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx @@ -46,25 +46,11 @@ import { DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { Input } from "@/components/ui/input"; -import { InputGroup, InputGroupText } from "@/components/ui/input-group"; -import { paginationBlog } from "@/service/blog/blog"; -import { ticketingPagination } from "@/service/ticketing/ticketing"; -import { Badge } from "@/components/ui/badge"; -import { useRouter, useSearchParams } from "next/navigation"; +import { usePathname, useRouter, useSearchParams } from "next/navigation"; import TablePagination from "@/components/table/table-pagination"; import columns from "./column"; -import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { listDataMedia } from "@/service/broadcast/broadcast"; import { listEnableCategory } from "@/service/content/content"; -import { Checkbox } from "@/components/ui/checkbox"; import { close, loading } from "@/config/swal"; -import { Link } from "@/i18n/routing"; import { Label } from "@/components/ui/label"; import { Dialog, @@ -75,21 +61,26 @@ import { DialogTrigger, } from "@/components/ui/dialog"; import { link } from "fs"; +import { listDataAll } from "@/service/landing/landing"; +import SearchImageComponent from "@/components/form/media-tracking/search-image-card"; +import SearchVideoComponent from "@/components/form/media-tracking/search-video-card"; +import SearchDocumentComponent from "@/components/form/media-tracking/search-document-card"; +import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card"; const NewsTable = () => { const router = useRouter(); + const asPath = usePathname(); const searchParams = useSearchParams(); const [search, setSearch] = React.useState(""); const [showData, setShowData] = React.useState("10"); const [categories, setCategories] = React.useState(); const [dataTable, setDataTable] = React.useState([]); - const [totalData, setTotalData] = React.useState(1); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] ); const [showTable, setShowTable] = React.useState(false); - const [link, setLink] = React.useState(""); + const [onSearch, setOnSearch] = React.useState(""); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); @@ -97,10 +88,19 @@ const NewsTable = () => { pageIndex: 0, pageSize: Number(showData), }); - const [categoryFilter, setCategoryFilter] = React.useState([]); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [searchTitle, setSearchTitle] = React.useState(""); const [statusFilter, setStatusFilter] = React.useState([]); const [page, setPage] = React.useState(1); - const [totalPage, setTotalPage] = React.useState(1); + const [imageData, setImageData] = React.useState(); + const [totalData, setTotalData] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [contentAll, setContentAll] = React.useState([]); + const [formatFilter, setFormatFilter] = React.useState([]); + const [totalContent, setTotalContent] = React.useState(); + const group = searchParams?.get("group"); + const title = searchParams?.get("title"); + const categorie = searchParams?.get("category"); const table = useReactTable({ data: dataTable, columns, @@ -125,15 +125,6 @@ const NewsTable = () => { let typingTimer: any; const doneTypingInterval = 1500; - // const handleKeyUp = () => { - // clearTimeout(typingTimer); - // typingTimer = setTimeout(doneTyping, doneTypingInterval); - // }; - - const handleKeyDown = () => { - clearTimeout(typingTimer); - }; - // async function doneTyping() { // fetchData(); // } @@ -145,41 +136,6 @@ const NewsTable = () => { } }, [searchParams]); - // React.useEffect(() => { - // fetchData(); - // setPagination({ - // pageIndex: 0, - // pageSize: Number(showData), - // }); - // }, [page, showData]); - - // async function fetchData() { - // try { - // loading(); - // const res = await listDataMedia( - // page - 1, - // showData, - // search, - // categoryFilter?.sort().join(","), - // statusFilter?.sort().join(",") - // ); - // const data = res?.data?.data; - // const contentData = data?.content; - // contentData.forEach((item: any, index: number) => { - // item.no = (page - 1) * Number(showData) + index + 1; - // }); - - // console.log("contentData : ", data); - - // setDataTable(contentData); - // setTotalData(data?.totalElements); - // setTotalPage(data?.totalPages); - // close(); - // } catch (error) { - // console.error("Error fetching tasks:", error); - // } - // } - React.useEffect(() => { getCategories(); }, []); @@ -190,30 +146,85 @@ const NewsTable = () => { setCategories(resCategory); } - const handleChange = (type: string, id: number, checked: boolean) => { - if (type === "category") { - if (checked) { - const temp: number[] = [...categoryFilter]; - temp.push(id); - setCategoryFilter(temp); - } else { - const temp = categoryFilter.filter((a) => a !== id); - setCategoryFilter(temp); - } + React.useEffect(() => { + if (categorie) { + setCategoryFilter( + categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] + ); + console.log( + "Kategori", + categorie, + categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] + ); + } + }, [categorie]); + + const handleCategoryFilter = (e: boolean, id: string) => { + let filter = [...categoryFilter]; + + if (e) { + filter = [...categoryFilter, String(id)]; } else { - if (checked) { - const temp: number[] = [...statusFilter]; - temp.push(id); - setStatusFilter(temp); - } else { - const temp = statusFilter.filter((a) => a !== id); - setStatusFilter(temp); + filter.splice(categoryFilter.indexOf(id), 1); + } + console.log("checkbox filter", filter); + setCategoryFilter(filter); + router.push(`?category=${filter.join("&")}`); + }; + + const cleanCheckbox = () => { + setCategoryFilter([]); + setFormatFilter([]); + router.push(`?category=&title=`); + }; + + async function getData() { + if (asPath?.includes("/polda/") == true) { + if (asPath?.split("/")[2] !== "[polda_name]") { + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; + + const name = title == undefined ? "" : title; + const format = formatFilter == undefined ? "" : formatFilter?.join(","); + const filterGroup = group == undefined ? asPath.split("/")[2] : group; + loading(); + const response = await listDataAll("", name, filter, ""); + close(); + // setGetTotalPage(response?.data?.data?.totalPages); + // setContentImage(response?.data?.data?.content); + // setTotalContent(response?.data?.data?.totalElements); + const data = response?.data?.data; + const contentData = data?.content; + setImageData(contentData); + setTotalData(data?.totalElements); + setContentAll(response?.data?.data?.content); + setTotalPage(data?.totalPages); + setTotalContent(response?.data?.data?.totalElements); } } + } + + const handleKeyUp = () => { + clearTimeout(typingTimer); + typingTimer = setTimeout(doneTyping, doneTypingInterval); + }; + + async function doneTyping() { + if (searchTitle == "" || searchTitle == undefined) { + router.push("?title="); + } else { + router.push(`?title=${searchTitle}`); + } + } + + const handleKeyDown = () => { + clearTimeout(typingTimer); }; return ( -
+

Tracking Berita hari ini! @@ -225,30 +236,38 @@ const NewsTable = () => { Tracking Berita - + Form Tracking Berita -

-
+
+
- setLink(e.target.value)} + setSearchTitle(e.target.value)} + onKeyUp={handleKeyUp} + onKeyDown={handleKeyDown} + type="text" + placeholder="Search..." + className="pl-4 pr-4 py-1 w-full h-10 text-[15px] border focus:outline-none dark:text-white" /> -

- Sisa Kuota Harian: 5 Kata Kunci -

+
+
+ + + +
- + diff --git a/app/[locale]/(protected)/contributor/task-ta/page.tsx b/app/[locale]/(protected)/contributor/task-ta/page.tsx index b1b9a4c5..d891a3e7 100644 --- a/app/[locale]/(protected)/contributor/task-ta/page.tsx +++ b/app/[locale]/(protected)/contributor/task-ta/page.tsx @@ -38,7 +38,7 @@ const TaskTaPage = () => { {t("tabel")} {t("task-ta")}
- {roleId !== 12 && ( + {roleId !== 12 && roleId !== 19 && ( + + + + + 1 - 10 Data + + + 1 - 20 Data + + + 1 - 25 Data + + + 1 - 50 Data + + + + + + + + + + + {table + .getAllColumns() + .filter((column) => column.getCanHide()) + .map((column) => { + return ( + + column.toggleVisibility(!!value) + } + > + {column.id} + + ); + })} + + +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ))} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- -
+ ); }; diff --git a/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx b/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx index de1c0ef4..0177f94e 100644 --- a/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx +++ b/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx @@ -17,29 +17,7 @@ const FaqPage = async () => {
- - -
- - - -
- - + diff --git a/app/[locale]/(public)/all/filter/page.tsx b/app/[locale]/(public)/all/filter/page.tsx index 0651dabc..7e3fdc75 100644 --- a/app/[locale]/(public)/all/filter/page.tsx +++ b/app/[locale]/(public)/all/filter/page.tsx @@ -5,8 +5,25 @@ import { Checkbox } from "@/components/ui/checkbox"; import { Icon } from "@iconify/react/dist/iconify.js"; import { getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals"; import { useParams, usePathname, useSearchParams } from "next/navigation"; -import { getUserLevelListByParent, listCategory, listData, listDataAll, listDataRegional } from "@/service/landing/landing"; -import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; +import { + getUserLevelListByParent, + listCategory, + listData, + listDataAll, + listDataRegional, +} from "@/service/landing/landing"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; import { Reveal } from "@/components/landing-page/Reveal"; import { Link, useRouter } from "@/i18n/routing"; import { Input } from "@/components/ui/input"; @@ -28,8 +45,11 @@ export default function FilterPage() { const [totalData, setTotalData] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1); const [sorting, setSorting] = React.useState([]); - const [columnFilters, setColumnFilters] = React.useState([]); - const [columnVisibility, setColumnVisibility] = React.useState({}); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, @@ -51,7 +71,9 @@ export default function FilterPage() { const [categoryFilter, setCategoryFilter] = useState([]); const [monthYearFilter, setMonthYearFilter] = useState(); const [searchTitle, setSearchTitle] = useState(""); - const [sortByOpt, setSortByOpt] = useState(sortBy === "popular" ? "clickCount" : "createdAt"); + const [sortByOpt, setSortByOpt] = useState( + sortBy === "popular" ? "clickCount" : "createdAt" + ); const isRegional = asPath?.includes("regional"); const isSatker = asPath?.includes("satker"); const [formatFilter, setFormatFilter] = useState([]); @@ -88,8 +110,14 @@ export default function FilterPage() { useEffect(() => { if (categorie) { - setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]); - console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]); + setCategoryFilter( + categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] + ); + console.log( + "Kategori", + categorie, + categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie] + ); } }, [categorie]); @@ -107,7 +135,17 @@ export default function FilterPage() { } console.log(monthYearFilter, "monthFilter"); initState(); - }, [change, monthYearFilter, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]); + }, [ + change, + monthYearFilter, + sortBy, + sortByOpt, + title, + startDateString, + endDateString, + categorie, + formatFilter, + ]); async function getCategories() { const category = await listCategory("1"); @@ -130,7 +168,10 @@ export default function FilterPage() { async function getData() { if (asPath?.includes("/polda/") == true) { if (asPath?.split("/")[2] !== "[polda_name]") { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -145,8 +186,14 @@ export default function FilterPage() { filterGroup, startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter) + ?.split("/")[0] + ?.replace("0", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" ); close(); // setGetTotalPage(response?.data?.data?.totalPages); @@ -161,7 +208,10 @@ export default function FilterPage() { setTotalContent(response?.data?.data?.totalElements); } } else { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -175,8 +225,14 @@ export default function FilterPage() { tag, startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter) + ?.split("/")[0] + ?.replace("0", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" ); close(); // setGetTotalPage(response?.data?.data?.totalPages); @@ -227,7 +283,10 @@ export default function FilterPage() { }; async function getDataRegional() { - const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || ""; + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; const name = title == undefined ? "" : title; const format = formatFilter == undefined ? "" : formatFilter?.join(","); @@ -240,8 +299,12 @@ export default function FilterPage() { "", startDateString, endDateString, - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", - monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "", 12, pages, sortByOpt @@ -347,7 +410,10 @@ export default function FilterPage() {
-