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

little update

This commit is contained in:
Rama Priyanto 2024-12-23 00:58:20 +07:00
parent 4e7eb26fd8
commit a4f94e1c3a
1 changed files with 284 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
components/form/form-edit-article.tsx
View File

@ -1,14 +1,22 @@
'use client' "use client";
import { getArticleById } from '@/service/article'; import { getArticleById } from "@/service/article";
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from "@hookform/resolvers/zod";
import { Button, Card, Chip, Input, Select, SelectItem, Selection } from '@nextui-org/react'; import {
import JoditEditor from 'jodit-react'; Button,
import Link from 'next/link'; Card,
import { usePathname } from 'next/navigation'; Chip,
import React, { useEffect, useRef, useState } from 'react'; Input,
import { useForm } from 'react-hook-form'; Select,
import Swal from 'sweetalert2'; SelectItem,
import withReactContent from 'sweetalert2-react-content'; Selection,
} from "@nextui-org/react";
import JoditEditor from "jodit-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import * as z from "zod"; import * as z from "zod";
const articleSchema = z.object({ const articleSchema = z.object({
@ -17,7 +25,6 @@ const articleSchema = z.object({
slug: z.string().min(1, { message: "Required" }), slug: z.string().min(1, { message: "Required" }),
tags: z.string().min(0, { message: "Required" }).optional(), tags: z.string().min(0, { message: "Required" }).optional(),
description: z.string().min(1, { message: "Required" }).optional(), description: z.string().min(1, { message: "Required" }).optional(),
}); });
export default function FormUpdateArticle() { export default function FormUpdateArticle() {
@ -27,14 +34,14 @@ export default function FormUpdateArticle() {
const [tags, setTags] = useState<string[]>([]); const [tags, setTags] = useState<string[]>([]);
const [newTags, setNewTags] = useState<string>(""); const [newTags, setNewTags] = useState<string>("");
const editor = useRef(null); const editor = useRef(null);
const [content, setContent] = useState(''); const [content, setContent] = useState("");
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const [article, setArticle] = useState<any>(); const [article, setArticle] = useState<any>();
const [typeId, setTypeId] = React.useState<Selection>(new Set([])); const [typeId, setTypeId] = useState("");
const pathname = usePathname(); const pathname = usePathname();
const splitPathname = pathname.split('/'); const splitPathname = pathname.split("/");
const id = splitPathname[splitPathname.length - 1]; const id = splitPathname[splitPathname.length - 1];
console.log(id, "pathnamesplit") console.log(id, "pathnamesplit");
const formOptions = { resolver: zodResolver(articleSchema) }; const formOptions = { resolver: zodResolver(articleSchema) };
type MicroIssueSchema = z.infer<typeof articleSchema>; type MicroIssueSchema = z.infer<typeof articleSchema>;
@ -48,29 +55,29 @@ export default function FormUpdateArticle() {
const editorConfig = { const editorConfig = {
readonly: true, readonly: true,
} };
const TypeId = [ const TypeId = [
{ {
key: 1, key: 1,
label: "Article" label: "Article",
}, },
{ {
key: 2, key: 2,
label: "Magazine" label: "Magazine",
}, },
] ];
const CategoryArticle = [ const CategoryArticle = [
{ {
key: 1, key: 1,
label: "Article" label: "Article",
}, },
{ {
key: 2, key: 2,
label: "Magazine" label: "Magazine",
}, },
] ];
const handleClose = (tagsToRemove: string) => { const handleClose = (tagsToRemove: string) => {
setTags(tags.filter((tag) => tag !== tagsToRemove)); setTags(tags.filter((tag) => tag !== tagsToRemove));
@ -93,15 +100,16 @@ export default function FormUpdateArticle() {
} }
}; };
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
const res = await getArticleById(id); const res = await getArticleById(id);
setArticle(res.data?.data); setArticle(res.data?.data);
setTitle(res.data?.data?.title) setTitle(res.data?.data?.title);
setTypeId(res.data?.data?.typeId) setTypeId(res.data?.data?.typeId);
setSlug(res.data?.data?.slug) setSlug(res.data?.data?.slug);
const tagsArray = res.data.data?.tags ? res.data.data.tags.split(",") : []; const tagsArray = res.data.data?.tags
? res.data.data.tags.split(",")
: [];
setTags(tagsArray); setTags(tagsArray);
console.log("Data Aritcle", res.data?.data); console.log("Data Aritcle", res.data?.data);
@ -110,16 +118,15 @@ export default function FormUpdateArticle() {
initState(); initState();
}, []); }, []);
async function save(data: any) {
async function save(data: any,) {
const formData = { const formData = {
id: id, id: id,
title: title, title: title,
typeId: parseInt(String(Array.from(article)[0])), typeId: parseInt(String(Array.from(article)[0])),
slug: slug, slug: slug,
tags: tags.join(','), tags: tags.join(","),
description: content, description: content,
htmlDescription: content htmlDescription: content,
}; };
console.log("Form Data:", formData); console.log("Form Data:", formData);
@ -129,7 +136,7 @@ export default function FormUpdateArticle() {
// error(response.message); // error(response.message);
// return false; // return false;
// } // }
}; }
async function onSubmit(data: any) { async function onSubmit(data: any) {
MySwal.fire({ MySwal.fire({
@ -147,9 +154,9 @@ export default function FormUpdateArticle() {
}); });
} }
return ( return (
<div className='mx-5 my-5 overflow-y-auto'> <div className="mx-5 my-5 overflow-y-auto">
<form method="POST" onSubmit={handleSubmit(onSubmit)}> <form method="POST" onSubmit={handleSubmit(onSubmit)}>
<Card className='rounded-md p-5 space-y-5'> <Card className="rounded-md p-5 space-y-5">
<div> <div>
<Input <Input
type="title" type="title"
@ -157,22 +164,22 @@ export default function FormUpdateArticle() {
value={title} value={title}
onValueChange={setTitle} onValueChange={setTitle}
label="Judul" label="Judul"
variant='bordered' variant="bordered"
placeholder="Enter Text" placeholder="Enter Text"
labelPlacement='outside' labelPlacement="outside"
/> />
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{(title?.length > 0 && errors.title) && errors.title.message} {title?.length > 0 && errors.title && errors.title.message}
</div> </div>
</div> </div>
<div> <div>
<Select <Select
label="Jenis Artikel" label="Jenis Artikel"
{...register("article")} {...register("article")}
selectedKeys={typeId} selectedKeys={[typeId]}
onSelectionChange={setTypeId} onChange={(e) => setTypeId(e.target.value)}
variant="bordered" variant="bordered"
labelPlacement='outside' labelPlacement="outside"
placeholder="Select" placeholder="Select"
className="max-w-xs" className="max-w-xs"
> >
@ -185,7 +192,6 @@ export default function FormUpdateArticle() {
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{errors.article?.message} {errors.article?.message}
</div> </div>
{/* <p>{article}</p> */}
</div> </div>
<div> <div>
<Input <Input
@ -194,19 +200,19 @@ export default function FormUpdateArticle() {
value={slug} value={slug}
onValueChange={setSlug} onValueChange={setSlug}
label="Slug" label="Slug"
variant='bordered' variant="bordered"
placeholder="Enter Text" placeholder="Enter Text"
labelPlacement='outside' labelPlacement="outside"
/> />
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{(slug?.length > 0 && errors.slug) && errors.slug.message} {slug?.length > 0 && errors.slug && errors.slug.message}
</div> </div>
</div> </div>
<div> <div>
<Input <Input
label="Tags (Optional)" label="Tags (Optional)"
{...register("tags")} {...register("tags")}
labelPlacement='outside' labelPlacement="outside"
type="text" type="text"
value={newTags} value={newTags}
onChange={(e) => setNewTags(e.target.value)} onChange={(e) => setNewTags(e.target.value)}
@ -214,28 +220,32 @@ export default function FormUpdateArticle() {
placeholder="Tambahkan tag baru dan tekan Enter" placeholder="Tambahkan tag baru dan tekan Enter"
/> />
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{(tags.length === 0 && errors.tags) && errors.tags.message} {tags.length === 0 && errors.tags && errors.tags.message}
</div> </div>
<div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11"> <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
{tags.map((tag, index) => ( {tags.map((tag, index) => (
<Chip key={index} color='primary' onClose={() => handleClose(tag)}> <Chip
key={index}
color="primary"
onClose={() => handleClose(tag)}
>
{tag} {tag}
</Chip> </Chip>
))} ))}
</div> </div>
</div> </div>
<div> <div>
<p className='pb-2'>Description</p> <p className="pb-2">Description</p>
<JoditEditor <JoditEditor
ref={editor} ref={editor}
value={article?.description} value={article?.description}
// config={editorConfig}
onChange={(newContent) => setContent(newContent)} onChange={(newContent) => setContent(newContent)}
className="dark:text-black" className="dark:text-black"
/> />
<div className="text-sm text-red-500"> <div className="text-sm text-red-500">
{(content.length === 0 && errors.description) && errors.description.message} {content.length === 0 &&
errors.description &&
errors.description.message}
</div> </div>
</div> </div>
<div> <div>
@ -264,7 +274,6 @@ export default function FormUpdateArticle() {
Drag and drop files here Drag and drop files here
</p> </p>
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400"> <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
{/* or{" "} */}
<span className="font-semibold underline text-amber-800"> <span className="font-semibold underline text-amber-800">
Click to upload Click to upload
</span> </span>
@ -274,25 +283,18 @@ export default function FormUpdateArticle() {
</label> </label>
</div> </div>
</div> </div>
<div className='flex justify-end gap-3'> <div className="flex justify-end gap-3">
<Link href={`/admin/article`}> <Link href={`/admin/article`}>
<Button <Button color="danger" variant="ghost">
color='danger'
variant="ghost"
>
Cancel Cancel
</Button> </Button>
</Link> </Link>
<Button <Button type="submit" color="primary" variant="solid">
type="submit"
color='primary'
variant="solid"
>
Publish Publish
</Button> </Button>
</div> </div>
</Card> </Card>
</form> </form>
</div> </div>
) );
} }