From 63a88c0b94a54d56e08e63ea2c2ffde7562adf7b Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 15 May 2025 18:18:33 +0800 Subject: [PATCH] [QUDO-64,QUDO-63] feat:update modal tracking berita,Fix UI On Landing (responsive tablet belum sesuai) --- .../admin/media-tracking/component/table.tsx | 199 ++- components/form/content/image-detail-form.tsx | 19 + components/landing-page/hero.tsx | 6 +- components/landing-page/navbar.tsx | 1452 +++++++++-------- service/media-tracking/media-tracking.ts | 23 +- tailwind.config.ts | 1 + 6 files changed, 894 insertions(+), 806 deletions(-) diff --git a/app/[locale]/(protected)/admin/media-tracking/component/table.tsx b/app/[locale]/(protected)/admin/media-tracking/component/table.tsx index 4589faac..ba3ba8be 100644 --- a/app/[locale]/(protected)/admin/media-tracking/component/table.tsx +++ b/app/[locale]/(protected)/admin/media-tracking/component/table.tsx @@ -26,6 +26,7 @@ import { } from "@/components/ui/table"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { + ChevronDown, ChevronLeft, ChevronRight, Eye, @@ -40,6 +41,7 @@ import { import { cn } from "@/lib/utils"; import { DropdownMenu, + DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, @@ -68,12 +70,16 @@ import SearchDocumentComponent from "@/components/form/media-tracking/search-doc import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card"; import TrackingMediaModal from "./modal"; import { getMediaTracking } from "@/service/media-tracking/media-tracking"; +import { group } from "console"; +import router from "next/router"; +import { title } from "process"; +import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { Input } from "@/components/ui/input"; 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([]); @@ -96,10 +102,11 @@ const NewsTable = () => { const [page, setPage] = React.useState(1); const [imageData, setImageData] = React.useState(); const [totalData, setTotalData] = React.useState(1); - const [totalPage, setTotalPage] = 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 [search, setSearch] = React.useState(""); const group = searchParams?.get("group"); const title = searchParams?.get("title"); const categorie = searchParams?.get("category"); @@ -144,25 +151,22 @@ const NewsTable = () => { React.useEffect(() => { getDataTable(); - }, []); + }, [page, showData, search]); const getDataTable = async () => { - const res = await getMediaTracking({ page: page - 1, size: 10 }); + const res = await getMediaTracking(page - 1, search, showData); + const data = res?.data?.data; - console.log; - if (data) { - const startIndex = 10 * (page - 1); - let iterate = 0; - const newData = data.content.map((value: any) => { - iterate++; - value.no = startIndex + iterate; - return value; - }); - setDataTable(newData); - setTotalData(data.totalElements); - setTotalPage(data?.totalPages); - setTotalContent(data.totalElements); - } + const newData = data?.content; + + newData.forEach((item: any, index: number) => { + item.no = (page - 1) * Number(showData) + index + 1; + }); + + setDataTable(newData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); + setTotalContent(data.totalElements); }; async function getCategories() { @@ -203,33 +207,38 @@ const NewsTable = () => { 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 || ""; + // 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 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 handleSearch = (e: React.ChangeEvent) => { + setSearch(e.target.value); + table.getColumn("judul")?.setFilterValue(e.target.value); + }; const handleKeyUp = () => { clearTimeout(typingTimer); @@ -255,50 +264,72 @@ const NewsTable = () => { Tracking Berita hari ini!

- getDataTable()} /> - {/* - - - - - - Form Tracking Berita - -
-
- - 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" - /> -
-
- - - - +
+ getDataTable()} /> +
+
+
+ + + + + + + + 1 - 10 Data + + + 1 - 50 Data + + + 1 - 100 Data + + + 1 - 250 Data + + + +
- - - - - -
*/} - +
+ + + + + + {table + .getAllColumns() + .filter((column) => column.getCanHide()) + .map((column) => { + return ( + + column.toggleVisibility(!!value) + } + > + {column.id} + + ); + })} + + +
+ + +
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx index 5b442b1b..657fafe6 100644 --- a/components/form/content/image-detail-form.tsx +++ b/components/form/content/image-detail-form.tsx @@ -58,6 +58,7 @@ import { error } from "@/lib/swal"; import dynamic from "next/dynamic"; import { useRouter } from "@/i18n/routing"; import { useTranslations } from "next-intl"; +import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping"; const imageSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -142,6 +143,15 @@ export default function FormImageDetail() { const [selectedTarget, setSelectedTarget] = useState(""); const [files, setFiles] = useState([]); const [rejectedFiles, setRejectedFiles] = useState([]); + const [wilayahPublish, setWilayahPublish] = React.useState({ + semua: false, + nasional: false, + polda: false, + polres: false, + satker: false, + international: false, + }); + const [selectedPolda, setSelectedPolda] = React.useState([]); let fileTypeId = "1"; @@ -776,6 +786,15 @@ export default function FormImageDetail() { > Wilayah + {wilayahPublish.polda && ( + + setSelectedPolda(data) + } + /> + )}
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx index 42ceaad6..6ba7ae16 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -438,7 +438,7 @@ const Hero: React.FC = () => { className="w-full h-[73px] object-cover rounded-lg" />
-
+
{item?.categoryName} @@ -487,7 +487,7 @@ const Hero: React.FC = () => { className="w-full h-[73px] object-cover rounded-lg" />
-
+
{item?.categoryName} @@ -534,7 +534,7 @@ const Hero: React.FC = () => { className="w-full h-[73px] object-cover rounded-lg" />
-
+
{item?.categoryName} diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index 78ed383c..848c6136 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -187,20 +187,24 @@ const Navbar = () => { return (
-
-
- {/* Logo */} +
+
- + - {/* Nav Menu */} -
+ {/* Mobile Menu Toggle */} - {/* Desktop Navigation */} -
+
{roleId == undefined ? ( "" ) : ( @@ -398,7 +368,7 @@ const Navbar = () => { {t("live")} */} -
+ {/* Languange */} -
+
{/* Dark Mode */} - +
+ +
-
+
{/* setOnSearch(e.target.value)} @@ -952,7 +924,7 @@ const Navbar = () => { ) : ( // Masuk and Daftar buttons for roleId === null -
+
{
)}
+
{/* Mobile Menu */} {menuOpen && ( -
- - - - - - +
+ + + + + + + + + {t("content")} + + + + router.push(prefixPath + "/image/filter")} + className="flex place-items-start gap-1.5 p-2 w-36" > - - - {t("content")} - - - - router.push(prefixPath + "/image/filter")} - className="flex place-items-start gap-1.5 p-2 w-36" - > -

- - {t("image")} -

- - router.push(prefixPath + "/video/filter")} - className="flex items-start gap-1.5 p-2 " - > - {pathname?.split("/")[1] == "in" ? ( - <> -

- - {t("video")} -

- - ) : ( - <> -

- - {t("video")} -

- - )} - - router.push(prefixPath + "/document/filter")} - className="flex place-items-start gap-1.5 p-2" - > -

- - {t("text")} -

- - router.push(prefixPath + "/audio/filter")} - className="flex place-items-start gap-1.5 p-2 " - > -

- - {t("audio")}{" "} -

- - - - - - - - - - - - {t("schedule")} - - - - - - - - - - - - {t("index")} - - - - - - -
- {roleId == undefined ? ( - "" - ) : ( -
+ + {t("image")} +

+ + router.push(prefixPath + "/video/filter")} + className="flex items-start gap-1.5 p-2 " + > + {pathname?.split("/")[1] == "in" ? ( + <> +

+ + {t("video")} +

+ + ) : ( + <> +

+ + {t("video")} +

+ + )} + + + router.push(prefixPath + "/document/filter") } - : {} - } - > - +

+ + {t("text")} +

+ + router.push(prefixPath + "/audio/filter")} + className="flex place-items-start gap-1.5 p-2 " + > +

+ + {t("audio")}{" "} +

+ + + + + + + + + + + + {t("schedule")} + + + + + + + + + + + + {t("index")} + + + + + +
+ {roleId == undefined ? ( + "" + ) : ( +
-
- -

Raw Data

-
- -
- )} - {/*
+ +
+ +

Raw Data

+
+ +
+ )} + {/*
Live
*/} -
- - - -
+
+ + + +
-
- +
+ - {/* Tombol Utama Bahasa + {/* Tombol Utama Bahasa */} - {/* Dropdown Menu + {/* Dropdown Menu {isOpen && (
)} */} +
-
-
- setOnSearch(e.target.value)} - type="text" - placeholder="Search..." - className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" - />{" "} -
-
- {/* {fullName ? ( +
+ setOnSearch(e.target.value)} + type="text" + placeholder="Search..." + className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" + />{" "} +
+ +
+ {/* {fullName ? ( <> @@ -1294,134 +1303,88 @@ const Navbar = () => { )} */} - {roleId === "5" || - roleId === "6" || - roleId === "7" || - roleId === "8" ? ( - <> - {/* Inbox */} - - - test()}> - {" "} - - - - - + {/* Inbox */} + + + test()}> + {" "} + + + + - - - setIsMessageActive(true)} + + + - {t("inbox")} - - - - setIsMessageActive(false)} - > - {t("update")}({notificationsUpdate?.length}) - - - - - - - -
- {notificationsUpdate?.map((list: any) => ( + + setIsMessageActive(false)} > -
- -
- - - ))} - -

- {t("seeAll")} + + ))} + +

+ {t("seeAll")} +

+ +
+ + + + + + + + + + {detail !== undefined ? ( +
+ +
+
+ {detail?.fullname} +
+

+ ({detail?.fullname})

+
+ + + +
+ ) : ( + "" + )} + + + + {[ + { + name: t("profileSetting"), + icon: "heroicons:user", + href: "/profile", + }, + { + name: t("contentManagement"), + icon: "stash:save-ribbon-duotone", + href: "/content-management/galery", + }, + ].map((item, index) => ( + + + + {item.name} + + + ))} + + + +
+ +
- - - - - - - {detail !== undefined ? ( -
- + + + + ) : roleId === "2" || + roleId === "3" || + roleId === "4" || + roleId === "9" || + roleId === "10" || + roleId === "11" || + roleId === "12" || + roleId === "13" ? ( + <> + {/* Inbox */} + + + test()}> + {" "} + -
-
- {detail?.fullname} -
-

- ({detail?.fullname}) -

-
- - - -
- ) : ( - "" - )} - - - - {[ - { - name: t("profileSetting"), - icon: "heroicons:user", - href: "/profile", - }, - { - name: t("contentManagement"), - icon: "stash:save-ribbon-duotone", - href: "/content-management/galery", - }, - ].map((item, index) => ( - - - - {item.name} - - - ))} - - - -
- - - -
- - - - - ) : roleId === "2" || - roleId === "3" || - roleId === "4" || - roleId === "9" || - roleId === "10" || - roleId === "11" || - roleId === "12" || - roleId === "13" ? ( - <> - {/* Inbox */} - - - test()}> - {" "} - - - - - + + - - - setIsMessageActive(true)} - > - {t("inbox")} - - - - setIsMessageActive(false)} - > - {t("update")}({notificationsUpdate?.length}) - - - - - - - - - - {/* // Dropdown menu for roleId === 3 */} - - - {detail !== undefined ? ( -
- -
-
- {detail?.fullname} -
-

- ({detail?.fullname}) -

-
- - - -
- ) : ( - "" - )} - - - - {[ - { - name: "Profile & Settings", - icon: "heroicons:user", - href: "/profile", - }, - { - name: "Dashboard", - icon: "material-symbols:dashboard", - href: "/dashboard", - }, - ].map((item, index) => ( - - - - {item.name} - - - ))} - - - -
- - - -
- - - - - ) : ( - // Masuk and Daftar buttons for roleId === null -
- - {t("logIn")} - - - - - - -
-

- {t("categoryReg")} -

-

{t("selectOne")}

-
-
- {role?.map((row: any) => ( -
- - setCategory(event.target.value) - } - /> - -
- ))} -
-
- - - {t("next")}{" "} - - - - -
- )} + + + setIsMessageActive(true)} + > + {t("inbox")} + + + + setIsMessageActive(false)} + > + {t("update")}({notificationsUpdate?.length}) + + + + + + + + + + {/* // Dropdown menu for roleId === 3 */} + + + {detail !== undefined ? ( +
+ +
+
+ {detail?.fullname} +
+

+ ({detail?.fullname}) +

+
+ + + +
+ ) : ( + "" + )} + + + + {[ + { + name: "Profile & Settings", + icon: "heroicons:user", + href: "/profile", + }, + { + name: "Dashboard", + icon: "material-symbols:dashboard", + href: "/dashboard", + }, + ].map((item, index) => ( + + + + {item.name} + + + ))} + + + +
+ + + +
+ + + + + ) : ( + // Masuk and Daftar buttons for roleId === null +
+ + {t("logIn")} + + + + + + +
+

+ {t("categoryReg")} +

+

+ {t("selectOne")} +

+
+
+ {role?.map((row: any) => ( +
+ + setCategory(event.target.value) + } + /> + +
+ ))} +
+
+ + + {t("next")}{" "} + + + + +
+ )} +
)} diff --git a/service/media-tracking/media-tracking.ts b/service/media-tracking/media-tracking.ts index 6e04fe38..402f7e05 100644 --- a/service/media-tracking/media-tracking.ts +++ b/service/media-tracking/media-tracking.ts @@ -18,13 +18,24 @@ export async function mediaTrackingSave(data: any) { return httpPostInterceptor(url, data); } -export async function getMediaTracking(data: any) { - // const url = `/media/tracking/monitoring/pagination`; - const url = `/media/tracking/monitoring/pagination?enablePagination=1&page=${ - data.page || 0 - }&size=${data?.size || 10}`; - return httpGetInterceptor(url); +export async function getMediaTracking( + page: any, + title: string = "", + size: any +) { + return httpGetInterceptor( + `/media/tracking/monitoring/pagination?enablePagination=1&size=${size}&page=${page}&title=${title}` + ); } + +// export async function getMediaTracking(data: any) { +// // const url = `/media/tracking/monitoring/pagination`; +// const url = `/media/tracking/monitoring/pagination?enablePagination=1&page=${ +// data.page || 0 +// }&size=${data?.size || 10}`; +// return httpGetInterceptor(url); +// } + export async function getMediaTrackingResult(data: any) { // const url = `/media/tracking/monitoring/pagination`; const url = `/media/tracking/monitoring/results/pagination?trackingId=${ diff --git a/tailwind.config.ts b/tailwind.config.ts index 6f54737e..8586acd1 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -21,6 +21,7 @@ const config = { extend: { screens: { "custom-lg": "1090px", + "custom-lg-button": "1030px", }, fontFamily: { sans: ["DM Sans", "sans-serif"],