feat:get category, menu button landing

This commit is contained in:
Rama Priyanto 2024-11-26 10:55:40 +07:00
parent 717bd7e4ea
commit 128c25fdc4
5 changed files with 112 additions and 23 deletions

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { error } from "@/config/swal"; import { error } from "@/config/swal";
import { createArticle } from "@/service/article"; import { createArticle, getArticleByCategory } from "@/service/article";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { import {
Button, Button,
@ -60,6 +60,17 @@ const dummyCategory = [
}, },
]; ];
const TypeId = [
{
key: 1,
label: "Article",
},
{
key: 2,
label: "Magazine",
},
];
export default function GenerateArticleForm() { export default function GenerateArticleForm() {
const animatedComponents = makeAnimated(); const animatedComponents = makeAnimated();
@ -98,6 +109,9 @@ export default function GenerateArticleForm() {
const [selectedGeneratedArticleId, setSelectedGeneratedArticleId] = const [selectedGeneratedArticleId, setSelectedGeneratedArticleId] =
useState<number>(); useState<number>();
const [listCategory, setListCategory] = useState<
{ id: number; label: string; value: number }[]
>([]);
useEffect(() => { useEffect(() => {
setCollectSingleArticleId(generatedArticleIdStore.singleArticle); setCollectSingleArticleId(generatedArticleIdStore.singleArticle);
@ -105,16 +119,28 @@ export default function GenerateArticleForm() {
setCollectRewriteArticleId(generatedArticleIdStore.rewriteArticle); setCollectRewriteArticleId(generatedArticleIdStore.rewriteArticle);
}); });
const TypeId = [ useEffect(() => {
{ fetchCategory();
key: 1, }, []);
label: "Article",
}, const fetchCategory = async () => {
{ const res = await getArticleByCategory();
key: 2, if (res?.data?.data) {
label: "Magazine", setupCategory(res?.data?.data);
}, }
]; };
const setupCategory = (data: any) => {
const temp = [];
for (const element of data) {
temp.push({
id: element.id,
label: element.title,
value: element.id,
});
}
setListCategory(temp);
};
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => { const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files) { if (event.target.files) {
@ -153,7 +179,7 @@ export default function GenerateArticleForm() {
title: title, title: title,
typeId: parseInt(String(Array.from(article)[0])), typeId: parseInt(String(Array.from(article)[0])),
slug: slug, slug: slug,
categoryId: 215, categoryId: selectedCategory[0].id,
tags: tags.join(","), tags: tags.join(","),
description: content, description: content,
htmlDescription: content, htmlDescription: content,
@ -306,7 +332,7 @@ export default function GenerateArticleForm() {
isMulti={true} isMulti={true}
placeholder="Category ..." placeholder="Category ..."
name="sub-module" name="sub-module"
options={dummyCategory} options={listCategory}
/> />
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{(!selectedCategory || selectedCategory?.length < 1) && ( {(!selectedCategory || selectedCategory?.length < 1) && (

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { error } from "@/config/swal"; import { error } from "@/config/swal";
import { createArticle } from "@/service/article"; import { createArticle, getArticleByCategory } from "@/service/article";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { import {
Button, Button,
@ -72,10 +72,9 @@ export default function FormArticle() {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const [selectedImages, setSelectedImages] = useState<File[]>([]); const [selectedImages, setSelectedImages] = useState<File[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>(); const [selectedCategory, setSelectedCategory] = useState<any>();
const [listCategory, setListCategory] = useState<
useEffect(() => { { id: number; label: string; value: number }[]
console.log("selected", selectedCategory); >([]);
}, [selectedCategory]);
const formOptions = { resolver: zodResolver(articleSchema) }; const formOptions = { resolver: zodResolver(articleSchema) };
type MicroIssueSchema = z.infer<typeof articleSchema>; type MicroIssueSchema = z.infer<typeof articleSchema>;
@ -98,6 +97,29 @@ export default function FormArticle() {
}, },
]; ];
useEffect(() => {
fetchCategory();
}, []);
const fetchCategory = async () => {
const res = await getArticleByCategory();
if (res?.data?.data) {
setupCategory(res?.data?.data);
}
};
const setupCategory = (data: any) => {
const temp = [];
for (const element of data) {
temp.push({
id: element.id,
label: element.title,
value: element.id,
});
}
setListCategory(temp);
};
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => { const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files) { if (event.target.files) {
const files = Array.from(event.target.files); const files = Array.from(event.target.files);
@ -146,7 +168,7 @@ export default function FormArticle() {
title: title, title: title,
typeId: parseInt(String(Array.from(article)[0])), typeId: parseInt(String(Array.from(article)[0])),
slug: slug, slug: slug,
categoryId: 215, categoryId: selectedCategory[0].id,
oldId: 1, oldId: 1,
tags: tags.join(","), tags: tags.join(","),
description: content, description: content,
@ -250,7 +272,7 @@ export default function FormArticle() {
isMulti={true} isMulti={true}
placeholder="Category ..." placeholder="Category ..."
name="sub-module" name="sub-module"
options={dummyCategory} options={listCategory}
/> />
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{(!selectedCategory || selectedCategory?.length < 1) && ( {(!selectedCategory || selectedCategory?.length < 1) && (

View File

@ -382,9 +382,32 @@ export default function NavbarHumas() {
<ThemeSwitch /> <ThemeSwitch />
</div> </div>
{token ? ( {token ? (
<Button className="bg-[#DD8306]" onPress={onLogout}> // <Button className="bg-[#DD8306]" onPress={onLogout}>
Logout // Logout
</Button> // </Button>
<Dropdown>
<DropdownTrigger>
<Button variant="bordered">Menu</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Static Actions">
<DropdownItem
key="dashboard"
onPress={() => router.push("/admin/dashboard")}
>
Dashboard
</DropdownItem>
<DropdownItem key="dashboard">Profile</DropdownItem>
<DropdownItem
key="logout"
className="text-danger"
color="danger"
onPress={onLogout}
>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
) : ( ) : (
<Link href="/auth"> <Link href="/auth">
<Button className="bg-[#DD8306]">Login</Button> <Button className="bg-[#DD8306]">Login</Button>
@ -412,6 +435,12 @@ export default function NavbarHumas() {
<Button className="bg-[#DD8306]">Login</Button> <Button className="bg-[#DD8306]">Login</Button>
</Link> </Link>
) )
) : item.key === "dashboard" ? (
token && (
<Link href="/admin/dashboard">
<span>{item.label}</span>
</Link>
)
) : ( ) : (
<div <div
onClick={() => toggleDropdown(item.key)} onClick={() => toggleDropdown(item.key)}

View File

@ -122,6 +122,11 @@ export const siteConfig = {
label: "Kontak", label: "Kontak",
href: "/kontak-kami", href: "/kontak-kami",
}, },
{
key: "dashboard",
label: "Dashboard",
href: "/admin",
},
{ {
key: "login", key: "login",
label: "Login", label: "Login",

View File

@ -46,3 +46,10 @@ export async function getArticleById(id: any) {
export async function deleteArticle(id: string) { export async function deleteArticle(id: string) {
return await httpDeleteInterceptor(`articles/${id}`); return await httpDeleteInterceptor(`articles/${id}`);
} }
export async function getArticleByCategory() {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/article-categories?limit=50`, headers);
}