412 lines
14 KiB
TypeScript
412 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import {
|
|
deleteKnowledgeBase,
|
|
getKnowledgeBaseCategoryList,
|
|
getKnowledgeBaseList,
|
|
saveKnowledgeBase,
|
|
saveKnowledgeBaseCategory,
|
|
} from "@/service/master/knowledge-base";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Edit2Icon, Plus, Trash, Trash2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import CreateCategory from "./create-category";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import Swal from "sweetalert2";
|
|
import { deleteMedia } from "@/service/content/content";
|
|
import { error } from "@/lib/swal";
|
|
import { close, loading } from "@/config/swal";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import { toast } from "@/components/ui/use-toast";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
const FormSchema = z.object({
|
|
name: z.string().min(2, {
|
|
message: "Name must be at least 2 characters.",
|
|
}),
|
|
});
|
|
|
|
const FormSchemaCreate = z.object({
|
|
title: z.string().min(2, {
|
|
message: "Judul minimal 2 karakter.",
|
|
}),
|
|
question: z.string().min(2, {
|
|
message: "Pertanyaan minimal 2 karakter.",
|
|
}),
|
|
answer: z.string().min(2, {
|
|
message: "Jawaban minimal 2 karakter.",
|
|
}),
|
|
});
|
|
|
|
const KnowledgeBase = () => {
|
|
const MySwal = withReactContent(Swal);
|
|
const [categories, setCategories] = useState<any>([]);
|
|
const [questions, setQuestions] = useState<any>([]);
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState(0);
|
|
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
|
|
const [viewCreate, setViewCreate] = useState(false);
|
|
|
|
const form = useForm<z.infer<typeof FormSchema>>({
|
|
resolver: zodResolver(FormSchema),
|
|
defaultValues: {
|
|
name: "",
|
|
},
|
|
});
|
|
|
|
const formCreate = useForm<z.infer<typeof FormSchemaCreate>>({
|
|
resolver: zodResolver(FormSchemaCreate),
|
|
defaultValues: {
|
|
title: "",
|
|
question: "",
|
|
answer: "",
|
|
},
|
|
});
|
|
React.useEffect(() => {
|
|
fetchCategoryList();
|
|
}, []);
|
|
|
|
async function fetchCategoryList() {
|
|
const response = await getKnowledgeBaseCategoryList();
|
|
const data = response?.data?.data;
|
|
if (data) {
|
|
setCategories(data);
|
|
fetchQuestions(
|
|
selectedCategoryId === 0 ? data[0]?.id : selectedCategoryId
|
|
);
|
|
}
|
|
}
|
|
|
|
const fetchQuestions = async (id: number) => {
|
|
const response = await getKnowledgeBaseList(id);
|
|
const data = response?.data?.data;
|
|
if (data) {
|
|
setQuestions(data);
|
|
}
|
|
};
|
|
|
|
async function doDelete(id: any) {
|
|
loading();
|
|
const data = {
|
|
id,
|
|
};
|
|
|
|
const response = await deleteKnowledgeBase(id);
|
|
|
|
if (response?.error) {
|
|
error(response.message);
|
|
return false;
|
|
}
|
|
close();
|
|
success();
|
|
}
|
|
|
|
function success() {
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
icon: "success",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "OK",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetchQuestions(selectedCategoryId);
|
|
}
|
|
});
|
|
}
|
|
|
|
const handleDeleteKnowlagde = (id: any) => {
|
|
MySwal.fire({
|
|
title: "Hapus Data",
|
|
text: "",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#3085d6",
|
|
confirmButtonColor: "#d33",
|
|
confirmButtonText: "Hapus",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
doDelete(id);
|
|
}
|
|
});
|
|
};
|
|
|
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
|
save(data);
|
|
setIsDialogOpen(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
formCreate.reset();
|
|
}, [viewCreate]);
|
|
|
|
async function save(data: any) {
|
|
loading();
|
|
const reqData = {
|
|
id: selectedCategoryId,
|
|
name: data.name,
|
|
};
|
|
const response = await saveKnowledgeBaseCategory(reqData);
|
|
if (response?.error) {
|
|
return false;
|
|
}
|
|
close();
|
|
toast({
|
|
title: "Task created successfully.",
|
|
});
|
|
fetchCategoryList();
|
|
}
|
|
|
|
async function onSubmitCreate(data: z.infer<typeof FormSchemaCreate>) {
|
|
const reqData = {
|
|
title: data.title,
|
|
categoryId:
|
|
selectedCategoryId === 0 ? categories[0]?.id : selectedCategoryId,
|
|
question: data.question,
|
|
answer: data.answer,
|
|
};
|
|
const response = await saveKnowledgeBase(reqData);
|
|
if (response?.error) {
|
|
error(response.message);
|
|
return false;
|
|
}
|
|
fetchQuestions(
|
|
selectedCategoryId === 0 ? categories[0]?.id : selectedCategoryId
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<SiteBreadcrumb />
|
|
<Tabs defaultValue={`category-0`}>
|
|
<div className="grid grid-cols-12 gap-6">
|
|
<Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
|
|
<CardContent className=" p-6">
|
|
<TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
|
|
<CreateCategory onSuccess={fetchCategoryList} />
|
|
{categories?.map((category: any, index: number) => (
|
|
<TabsTrigger
|
|
key={index}
|
|
value={`category-${index}`}
|
|
onClick={() => {
|
|
fetchQuestions(category?.id);
|
|
setSelectedCategoryId(category?.id);
|
|
}}
|
|
className="group data-[state=active]:bg-secondary data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-between flex items-center"
|
|
>
|
|
{category?.name}
|
|
<div
|
|
className="right-2 top-2 hidden group-hover:inline-flex"
|
|
// onClick={() => deleteCategory(category?.id)}
|
|
>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<Dialog
|
|
open={isDialogOpen}
|
|
onOpenChange={setIsDialogOpen}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<a
|
|
className="dark:bg-background dark:text-foreground"
|
|
onClick={() =>
|
|
form.setValue("name", category.name)
|
|
}
|
|
>
|
|
<Edit2Icon size={18} />
|
|
</a>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader className="mb-4">
|
|
<DialogTitle>Edit Category</DialogTitle>
|
|
</DialogHeader>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="space-y-4"
|
|
>
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-default-700">
|
|
Name
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Enter Title"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button type="submit">Submit</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<Trash size={20} className="text-red-500" />
|
|
</div>
|
|
</div>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
|
|
{categories?.map((cateogry: any, index: number) => (
|
|
<TabsContent
|
|
key={index}
|
|
value={`category-${index}`}
|
|
className="mt-0"
|
|
>
|
|
<Accordion type="single" collapsible className="w-full">
|
|
{questions?.map((question: any) => (
|
|
<AccordionItem
|
|
key={question.id}
|
|
className="dark:bg-secondary bg-white"
|
|
value={question.id}
|
|
>
|
|
<AccordionTrigger className="flex items-center justify-between gap-4 dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
|
|
<div className="flex items-center justify-between w-full gap-4">
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: question.question,
|
|
}}
|
|
className="text-left"
|
|
/>
|
|
|
|
<Trash
|
|
size={20}
|
|
className="text-red-500 hover:cursor-pointer"
|
|
onClick={() => handleDeleteKnowlagde(question.id)}
|
|
/>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="dark:bg-secondary bg-white">
|
|
{question.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
<div className="flex gap-3">
|
|
<Button fullWidth size="md" variant="outline">
|
|
<Plus className="w-6 h-6 me-1.5" />
|
|
Import
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
size="md"
|
|
onClick={() => setViewCreate(!viewCreate)}
|
|
>
|
|
<Plus className="w-6 h-6 me-1.5" />
|
|
Add Question
|
|
</Button>
|
|
</div>
|
|
{viewCreate && (
|
|
<div className="flex flex-col gap-2 py-6">
|
|
<Form {...formCreate}>
|
|
<form
|
|
onSubmit={formCreate.handleSubmit(onSubmitCreate)}
|
|
className="space-y-4"
|
|
>
|
|
<FormField
|
|
control={formCreate.control}
|
|
name="title"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-default-700">
|
|
Judul
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Masukkan Judul"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={formCreate.control}
|
|
name="question"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-default-700">
|
|
Pertanyaan
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Textarea
|
|
placeholder="Masukkan Pertanyaan"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={formCreate.control}
|
|
name="answer"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-default-700">
|
|
Jawaban
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Textarea
|
|
placeholder="Masukkan Jawaban"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button type="submit">Submit</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KnowledgeBase;
|