fix:supervisor, feedback create edit delete, knowledge base creat edit delete
This commit is contained in:
Rama Priyanto
parent
4ef9d5b513
commit
e3df511890
|
|
@ -13,21 +13,81 @@ import {
|
|||
deleteKnowledgeBase,
|
||||
getKnowledgeBaseCategoryList,
|
||||
getKnowledgeBaseList,
|
||||
saveKnowledgeBase,
|
||||
saveKnowledgeBaseCategory,
|
||||
} from "@/service/master/knowledge-base";
|
||||
import React from "react";
|
||||
import { Plus, Trash, Trash2 } from "lucide-react";
|
||||
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] = React.useState<any>([]);
|
||||
const [questions, setQuestions] = React.useState<any>([]);
|
||||
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();
|
||||
}, []);
|
||||
|
|
@ -37,7 +97,9 @@ const KnowledgeBase = () => {
|
|||
const data = response?.data?.data;
|
||||
if (data) {
|
||||
setCategories(data);
|
||||
fetchQuestions(data[0]?.id);
|
||||
fetchQuestions(
|
||||
selectedCategoryId === 0 ? data[0]?.id : selectedCategoryId
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +112,7 @@ const KnowledgeBase = () => {
|
|||
};
|
||||
|
||||
async function doDelete(id: any) {
|
||||
// loading();
|
||||
loading();
|
||||
const data = {
|
||||
id,
|
||||
};
|
||||
|
|
@ -61,6 +123,7 @@ const KnowledgeBase = () => {
|
|||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
close();
|
||||
success();
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +135,7 @@ const KnowledgeBase = () => {
|
|||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.reload();
|
||||
fetchQuestions(selectedCategoryId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -93,6 +156,50 @@ const KnowledgeBase = () => {
|
|||
});
|
||||
};
|
||||
|
||||
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 />
|
||||
|
|
@ -108,6 +215,7 @@ const KnowledgeBase = () => {
|
|||
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"
|
||||
>
|
||||
|
|
@ -116,8 +224,58 @@ const KnowledgeBase = () => {
|
|||
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>
|
||||
|
|
@ -145,6 +303,7 @@ const KnowledgeBase = () => {
|
|||
}}
|
||||
className="text-left"
|
||||
/>
|
||||
|
||||
<Trash
|
||||
size={20}
|
||||
className="text-red-500 hover:cursor-pointer"
|
||||
|
|
@ -158,17 +317,87 @@ const KnowledgeBase = () => {
|
|||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
{questions?.length > 0 && (
|
||||
<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">
|
||||
<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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,80 @@
|
|||
"use client";
|
||||
import { useState } from "react";
|
||||
import { use, useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { MoreVertical } from "lucide-react";
|
||||
import { MoreVertical, Trash2 } from "lucide-react";
|
||||
import {
|
||||
deleteDataFeedback,
|
||||
getListFeedback,
|
||||
postDataFeedback,
|
||||
} from "@/service/settings/settings";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
const FeedbackForm = () => {
|
||||
const [region, setRegion] = useState("nasional");
|
||||
const [feedbackList, setFeedbackList] = useState<string[]>([
|
||||
"Silahkan berikan rating Anda terkait dengan kemudahan akses website MediaHUB Polri",
|
||||
"Silahkan berikan rating Anda terkait dengan konten MediaHUB Polri",
|
||||
"Silahkan berikan rating Anda terkait dengan tampilan MediaHUB Polri",
|
||||
]);
|
||||
const [feedbackList, setFeedbackList] = useState<any>([]);
|
||||
const [newFeedback, setNewFeedback] = useState("");
|
||||
const [selectedFeedback, setSetSelectedFeedback] = useState(0);
|
||||
|
||||
const handleAddFeedback = () => {
|
||||
useEffect(() => {
|
||||
fetchFeedback();
|
||||
}, []);
|
||||
|
||||
const fetchFeedback = async () => {
|
||||
loading();
|
||||
const res = await getListFeedback();
|
||||
setFeedbackList(res?.data?.data);
|
||||
close();
|
||||
};
|
||||
|
||||
const handleAddFeedback = async () => {
|
||||
if (newFeedback.trim()) {
|
||||
setFeedbackList([...feedbackList, newFeedback.trim()]);
|
||||
const req = {
|
||||
question: newFeedback.trim(),
|
||||
isInternational: region === "internasional",
|
||||
};
|
||||
loading();
|
||||
const res = await postDataFeedback(req);
|
||||
close();
|
||||
fetchFeedback();
|
||||
}
|
||||
};
|
||||
const handleEditFeedback = async () => {
|
||||
if (newFeedback.trim()) {
|
||||
const req = {
|
||||
id: selectedFeedback,
|
||||
question: newFeedback.trim(),
|
||||
isInternational: region === "internasional",
|
||||
};
|
||||
loading();
|
||||
const res = await postDataFeedback(req);
|
||||
close();
|
||||
fetchFeedback();
|
||||
setSetSelectedFeedback(0);
|
||||
setNewFeedback("");
|
||||
}
|
||||
};
|
||||
|
||||
const deleteFeedback = async (id: number) => {
|
||||
loading();
|
||||
const res = await deleteDataFeedback(id);
|
||||
console.log(res);
|
||||
close();
|
||||
fetchFeedback();
|
||||
};
|
||||
|
||||
const doEdit = (id: number, question: string) => {
|
||||
setSetSelectedFeedback(id);
|
||||
setNewFeedback(question);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white rounded-md p-6 flex flex-col md:flex-row gap-6">
|
||||
|
|
@ -52,7 +106,16 @@ const FeedbackForm = () => {
|
|||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-1">
|
||||
{selectedFeedback !== 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleEditFeedback}
|
||||
className="bg-white text-blue-600 border border-bue-600"
|
||||
>
|
||||
Ubah Feedback
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={handleAddFeedback}
|
||||
className="bg-blue-600 text-white"
|
||||
|
|
@ -60,15 +123,40 @@ const FeedbackForm = () => {
|
|||
Tambah Feedback
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2">
|
||||
<h3 className="font-semibold mb-2 border-b pb-1">Feedback</h3>
|
||||
<p className="font-medium mb-4">Pertanyaan</p>
|
||||
<ul className="space-y-3">
|
||||
{feedbackList.map((item, index) => (
|
||||
<li key={index} className="flex justify-between items-start">
|
||||
<span>{item}</span>
|
||||
<MoreVertical className="w-4 h-4 text-gray-600 cursor-pointer" />
|
||||
{feedbackList.map((item: any) => (
|
||||
<li key={item.id} className="flex justify-between items-center">
|
||||
<span>{item.question}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => doEdit(item.id, item.question)}
|
||||
className="p-2 border-b rounded-none focus:bg-slate-300"
|
||||
>
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => deleteFeedback(item.id)}
|
||||
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
|
||||
>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -281,17 +281,17 @@ const LoginForm = () => {
|
|||
return false;
|
||||
}
|
||||
const msg = response?.data?.message;
|
||||
// onSubmit(data);
|
||||
|
||||
if (msg == "Continue to setup email") {
|
||||
setStep(2);
|
||||
} else if (msg == "Email is valid and OTP has been sent") {
|
||||
setStep(3);
|
||||
} else if (msg == "Username & password valid") {
|
||||
onSubmit(data);
|
||||
} else {
|
||||
error("Username / password incorrect");
|
||||
}
|
||||
|
||||
// if (msg == "Continue to setup email") {
|
||||
// setStep(2);
|
||||
// } else if (msg == "Email is valid and OTP has been sent") {
|
||||
// setStep(3);
|
||||
// } else if (msg == "Username & password valid") {
|
||||
// onSubmit(data);
|
||||
// } else {
|
||||
// error("Username / password incorrect");
|
||||
// }
|
||||
// else {
|
||||
// setStep(1);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -23,3 +23,8 @@ export async function deleteKnowledgeBase(id: any) {
|
|||
const url = `knowledge-base?id=${id}`;
|
||||
return httpDeleteInterceptor(url);
|
||||
}
|
||||
|
||||
export async function saveKnowledgeBase(data: any) {
|
||||
const url = "knowledge-base";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue