humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

catergory

This commit is contained in:
Rama Priyanto 2025-02-14 23:11:51 +07:00
parent f553306c15
commit d5c09548fa
15 changed files with 127 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/news/[polda-name]/layout.tsx
View File

@ -1,9 +0,0 @@
import { HumasLayout } from "@/components/layout/humas-layout";
export default function PoldaNewsLayout({
children,
}: {
children: React.ReactNode;
}) {
return <HumasLayout>{children}</HumasLayout>;
}

6
app/news/[polda-name]/page.tsx
View File

@ -1,6 +0,0 @@
import ListNews from "@/components/main/detail/list-news";
import React from "react";
export default function PoldaNewsPage() {
return <ListNews />;
}

7
app/news/polda/[name]/layout.tsx Normal file
View File

@ -0,0 +1,7 @@
export default function PoldaNewsLayout({
children,
}: {
children: React.ReactNode;
}) {
return <>{children}</>;
}

12
app/news/polda/[name]/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import ListNews from "@/components/main/detail/list-news";
import React from "react";
import { HumasLayout } from "@/components/layout/humas-layout";
export default function PoldaNewsPage() {
// return <ListNews />;
return (
<HumasLayout>
<ListNews />
</HumasLayout>
);
}

7
app/news/satker/[name]/layout.tsx Normal file
View File

@ -0,0 +1,7 @@
export default function PoldaNewsLayout({
children,
}: {
children: React.ReactNode;
}) {
return <>{children}</>;
}

12
app/news/satker/[name]/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import ListNews from "@/components/main/detail/list-news";
import React from "react";
import { HumasLayout } from "@/components/layout/humas-layout";
export default function PoldaNewsPage() {
// return <ListNews />;
return (
<HumasLayout>
<ListNews />
</HumasLayout>
);
}

6
components/landing/CategorySatker.tsx
View File

@ -333,7 +333,7 @@ export default function CategorySatker() {
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
{list.map((item: any, index: any) => (
<Link
href={`/news/all?satker=${changeNameToSlug(item.title)}`}
href={`/news/satker/${changeNameToSlug(item.title)}`}
key={item.path}
>
<div
@ -384,9 +384,7 @@ export default function CategorySatker() {
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
>
<Link
href={`/news/all?satker=${changeNameToSlug(
item.title
)}`}
href={`/news/satker/${changeNameToSlug(item.title)}`}
>
{" "}
<Image

2
components/landing/Footer.tsx
View File

@ -3,10 +3,12 @@ import { Input } from "@heroui/input";
import { MailIcon, SendIcon } from "../icons";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
export default function Footer() {
const t2 = useTranslations("Navbar");
const t3 = useTranslations("LandingInformasiPublik");
return (
<div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
<div className="h-[500px] md:h-[720px] lg:h-auto bg-black">

93
components/landing/RegionalNews.tsx
View File

@ -27,37 +27,37 @@ export default function RegionalNews() {
id: 1,
img: "/temp/poldametro.svg",
title: "Polda Metro Jaya",
path: "/news/polda-metro-jaya",
path: "polda-metro-jaya",
},
{
id: 2,
img: "/temp/polda-sumut.svg",
title: "Polda Sumatra Utara",
path: "/news/polda-sumatra-utara",
path: "polda-sumut",
},
{
id: 3,
img: "/temp/polda-banten.svg",
title: "Polda Banten",
path: "/news/polda-banten",
path: "polda-banten",
},
{
id: 4,
img: "/temp/polda-jateng.svg",
title: "Polda Jawa Tengah",
path: "/news/polda-jateng",
path: "polda-jateng",
},
{
id: 5,
img: "/temp/polda-jatim.svg",
title: "Polda Jawa Timur",
path: "news/polda-jatim",
path: "polda-jatim",
},
{
id: 6,
img: "/assets/polda/polda-jawa-barat.svg",
title: "Polda Jawa Barat",
path: "/news/polda-jawa-barat",
path: "polda-jabar",
},
];
@ -66,217 +66,217 @@ export default function RegionalNews() {
id: 1,
img: "/assets/polda/polda-metro-jaya.svg",
title: "Polda Metro Jaya",
path: "/news/polda-metro-jaya",
path: "polda-metro-jaya",
},
{
id: 2,
img: "/assets/polda/polda-jawa-barat.svg",
title: "Polda Jawa Barat",
path: "/news/polda-jawa-barat",
path: "polda-jabar",
},
{
id: 3,
img: "/assets/polda/polda-banten.svg",
title: "Polda Banten",
path: "/news/polda-banten",
path: "polda-banten",
},
{
id: 4,
img: "/assets/polda/polda-jateng.svg",
title: "Polda Jawa Tengah",
path: "/news/polda-jateng",
path: "polda-jateng",
},
{
id: 5,
img: "/assets/polda/polda-diy.svg",
title: "Polda D.I Yogyakarta",
path: "/news/polda-daerah-istimewa-yogyakarta",
path: "polda-diy",
},
{
id: 6,
img: "/assets/polda/polda-jatim.svg",
title: "Polda Jawa Timur",
path: "/news/polda-jawa-timur",
path: "polda-jatim",
},
{
id: 7,
img: "/assets/polda/polda-aceh.svg",
title: "Polda Aceh",
path: "/news/polda-aceh",
path: "polda-aceh",
},
{
id: 8,
img: "/assets/polda/polda-sumut.svg",
title: "Polda Sumatra Utara",
path: "/news/polda-sumatra-utara",
path: "polda-sumut",
},
{
id: 9,
img: "/assets/polda/polda-sumbar.svg",
title: "Polda Sumatra Barat",
path: "/news/polda-sumatra-barat",
path: "polda-sumbar",
},
{
id: 10,
img: "/assets/polda/polda-riau.svg",
title: "Polda Riau",
path: "/news/polda-riau",
path: "polda-riau",
},
{
id: 11,
img: "/assets/polda/polda-kepri.svg",
title: "Polda Kep.Riau",
path: "/news/polda-kepulauan-riau",
path: "polda-kepri",
},
{
id: 12,
img: "/assets/polda/polda-jambi.svg",
title: "Polda Jambi",
path: "/news/polda-jambi",
path: "polda-jambi",
},
{
id: 13,
img: "/assets/polda/polda-jambi.svg",
title: "Polda Jambi",
path: "/news/polda-jambi",
path: "polda-jambi",
},
{
id: 14,
img: "/assets/polda/polda-sumsel.svg",
title: "Polda Sumatra Selatan",
path: "/news/polda-sumatra-selatan",
path: "polda-sumsel",
},
{
id: 15,
img: "/assets/polda/polda-sumsel.svg",
title: "Polda Kep.Bangka Belitung",
path: "/news/polda-bangka-belitung",
path: "polda-babel",
},
{
id: 16,
img: "/assets/polda/polda-bengkulu.svg",
title: "Polda Bengkulu",
path: "/news/polda-bengkulu",
path: "polda-bengkulu",
},
{
id: 17,
img: "/assets/polda/polda-lampung.svg",
title: "Polda Lampung",
path: "/news/polda-lampung",
path: "polda-lampung",
},
{
id: 18,
img: "/assets/polda/polda-ntb.svg",
title: "Polda Nusa Tenggara Barat",
path: "/news/polda-ntb",
path: "polda-ntb",
},
{
id: 19,
img: "/assets/polda/polda-ntb.svg",
title: "Polda Nusa Tenggara Barat",
path: "/news/polda-ntb",
path: "polda-ntb",
},
{
id: 20,
img: "/assets/polda/polda-ntt.svg",
title: "Polda Nusa Tenggara Timur",
path: "/news/polda-ntt",
path: "polda-ntt",
},
{
id: 21,
img: "/assets/polda/polda-bali.svg",
title: "Polda Bali",
path: "/news/polda-bali",
path: "polda-bali",
},
{
id: 22,
img: "/assets/polda/polda-kalbar.svg",
title: "Polda Kalimantan Barat",
path: "/news/polda-kalimantan-barat",
path: "polda-kalbar",
},
{
id: 23,
img: "/assets/polda/polda-kalteng.svg",
title: "Polda Kalimantan Tengah",
path: "/news/polda-kalimantan-tengah",
path: "polda-kalteng",
},
{
id: 24,
img: "/assets/polda/polda-kalsel.svg",
title: "Polda Kalimantan Selatan",
path: "/news/polda-kalimantan-selatan",
path: "polda-kalsel",
},
{
id: 25,
img: "/assets/polda/polda-kaltim.svg",
title: "Polda Kalimantan Timur",
path: "/news/polda-kalimantan-timur",
path: "polda-kaltim",
},
{
id: 26,
img: "/assets/polda/polda-kalut.svg",
title: "Polda Kalimantan Utara",
path: "/news/polda-kalimantan-utara",
path: "polda-kaltara",
},
{
id: 27,
img: "/assets/polda/polda-sulteng.svg",
title: "Polda Sulawesi Tengah",
path: "/news/polda-sulawesi-tengah",
path: "polda-sulteng",
},
{
id: 28,
img: "/assets/polda/polda-sulawesi-utara.svg",
title: "Polda Sulawesi Utara",
path: "/news/polda-sulawesi-utara",
path: "polda-sulut",
},
{
id: 29,
img: "/assets/polda/polda-gorontalo.svg",
title: "Polda Gorontalo",
path: "/news/polda-gorontalo",
path: "polda-gorontalo",
},
{
id: 30,
img: "/assets/polda/polda-sulbar.svg",
title: "Polda Sulawesi Barat",
path: "/news/polda-sulawesi-barat",
path: "polda-sulbar",
},
{
id: 31,
img: "/assets/polda/polda-sulsel.svg",
title: "Polda Sulawesi Selatan",
path: "/news/polda-sulawesi-selatan",
path: "polda-sulsel",
},
{
id: 32,
img: "/assets/polda/polda-sultenggara.svg",
title: "Polda Sulawesi Tenggara",
path: "/news/polda-sulawesi-tenggara",
path: "polda-sultra",
},
{
id: 33,
img: "/assets/polda/polda-malut.svg",
title: "Polda Maluku Utara",
path: "/news/polda-maluku-utara",
path: "polda-maluku-utara",
},
{
id: 34,
img: "/assets/polda/polda-maluku.svg",
title: "Polda Maluku",
path: "/news/polda-maluku",
path: "polda-maluku",
},
{
id: 35,
img: "/assets/polda/polda-papuabarat.svg",
title: "Polda Papua Barat",
path: "/news/polda-papua-barat",
path: "polda-papua-barat",
},
{
id: 36,
img: "/assets/polda/polda-papua.svg",
title: "Polda Papua",
path: "/news/polda-papua",
path: "polda-papua",
},
];
@ -318,10 +318,7 @@ export default function RegionalNews() {
</div> */}
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
{listPolda.map((item: any, index: any) => (
<Link
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
key={item.path}
>
<Link href={`/news/polda/${item.path}`} key={item.path}>
<div
key={item.id}
className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
@ -376,9 +373,7 @@ export default function RegionalNews() {
key={index.id}
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
>
<Link
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
>
<Link href={`/news/polda/${item.path}`}>
<div className="flex flex-col items-center ">
<Image
radius="lg"

16
components/layout/humas-layout.tsx
View File

@ -1,4 +1,6 @@
import React from "react";
"use client";
import React, { Suspense, useEffect, useState } from "react";
import NavbarHumas from "./navbar/NavbarHumas";
import Footer from "../landing/Footer";
import NewsTicker from "../landing/NewsTicker";
@ -8,6 +10,14 @@ interface Props {
}
export const HumasLayout = ({ children }: Props) => {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<section className="flex flex-col">
<NavbarHumas size="sm" />
@ -15,7 +25,9 @@ export const HumasLayout = ({ children }: Props) => {
<NewsTicker />
{children}
<Footer />
<Suspense>
<Footer />
</Suspense>
</section>
);
};

14
components/main/detail/list-news.tsx
View File

@ -20,6 +20,7 @@ import { useEffect, useRef, useState } from "react";
import { getListArticle } from "@/service/article";
import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
import Image from "next/image";
import { useParams } from "next/navigation";
export default function ListNews() {
const [article, setArticle] = useState<any>([]);
@ -27,16 +28,23 @@ export default function ListNews() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const topRef = useRef<HTMLDivElement>(null);
const params = useParams();
const category = params?.name;
useEffect(() => {
getArticle();
}, [page]);
}, [page, category]);
async function getArticle() {
// loading();
topRef.current?.scrollIntoView({ behavior: "smooth" });
const req = { page: page, search: search, limit: "9" };
const req = {
page: page,
search: search,
limit: "9",
category: String(category),
};
const response = await getListArticle(req);
setArticle(response?.data?.data);
setTotalPage(response?.data?.meta?.totalPage);
@ -116,7 +124,7 @@ export default function ListNews() {
</div>
<div className="flex flex-row items-center gap-1">
<UserIcon size={14} />
<p>DIVISI HUMAS POLRI</p>
<p>{news?.createdByName}</p>
</div>
</div>
<div className="text-sm">

6
components/table/article-table.tsx
View File

@ -84,6 +84,7 @@ export default function ArticleTable() {
}
async function initState() {
console.log("seeecle", Array.from(selectedCategories));
const req = {
limit: showData,
page: page,
@ -91,6 +92,7 @@ export default function ArticleTable() {
startDate:
startDateValue.startDate === null ? "" : startDateValue.startDate,
endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
category: Array.from(selectedCategories).join(","),
};
const res = await getListArticle(req);
getTableNumber(parseInt(showData), res.data?.data);
@ -287,7 +289,7 @@ export default function ArticleTable() {
return items.map((item) => (
<span
key={item.props?.value}
className="text-black text-xs"
className="text-black dark:text-white text-xs"
>
{item.textValue},
</span>
@ -295,7 +297,7 @@ export default function ArticleTable() {
}}
>
{categories?.map((category: any) => (
<SelectItem key={category?.id} value={category?.id}>
<SelectItem key={category?.slug} value={category?.id}>
{category?.title}
</SelectItem>
))}

6
components/table/master-categories/categories-table.tsx
View File

@ -391,6 +391,12 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
<SelectItem key="10" value="10">
10
</SelectItem>
<SelectItem key="25" value="25">
25
</SelectItem>
<SelectItem key="50" value="50">
50
</SelectItem>
</Select>
</div>
</div>

7
service/article.ts
View File

@ -9,14 +9,17 @@ import Cookies from "js-cookie";
const token = Cookies.get("access_token");
export async function getListArticle(props: PaginationRequest) {
const { page, limit, search, startDate, endDate, isPublish } = props;
const { page, limit, search, startDate, endDate, isPublish, category } =
props;
const headers = {
"content-type": "application/json",
};
return await httpGet(
`/articles?limit=${limit}&page=${page}&isPublish=${
isPublish === undefined ? "" : isPublish
}&title=${search}&startDate=${startDate || ""}&endDate=${endDate || ""}`,
}&title=${search}&startDate=${startDate || ""}&endDate=${
endDate || ""
}&category=${category || ""}`,
headers
);
}

1
types/globals.tsx
View File

@ -62,4 +62,5 @@ export type PaginationRequest = {
startDate?: string;
endDate?: string;
isPublish?: boolean;
category?: string;
};