152 lines
6.2 KiB
TypeScript
152 lines
6.2 KiB
TypeScript
import { FaRegEdit } from "react-icons/fa";
|
|
import {
|
|
DialogBody,
|
|
DialogCloseTrigger,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogRoot,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../../../components/ui/dialog";
|
|
import { Field, Stack, Text } from "@chakra-ui/react";
|
|
import { Button } from "../../../components/ui/button";
|
|
import ReactQuill from "react-quill";
|
|
import "react-quill/dist/quill.snow.css"; // Import the styles
|
|
import { useState } from "react";
|
|
import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
|
|
import { useForm, Controller } from "react-hook-form"; // Import React Hook Form
|
|
import { toaster, Toaster } from "../../../components/ui/toaster";
|
|
|
|
function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
// RTK Query Mutation Hook
|
|
const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
|
|
|
|
// React Hook Form
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
reset,
|
|
setValue,
|
|
} = useForm({
|
|
defaultValues: {
|
|
content: "",
|
|
languageCode: "",
|
|
},
|
|
});
|
|
|
|
// Function to handle edit click (pre-fill the editor)
|
|
const handleEditClick = (data: any) => {
|
|
setValue("content", data.content); // Pre-fill the content field
|
|
setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
|
|
setIsOpen(true); // Open dialog
|
|
};
|
|
|
|
// Function to handle update submission
|
|
const onSubmit = async (formData: any) => {
|
|
if (!formData.content.trim()) return; // Prevent empty updates
|
|
|
|
try {
|
|
await updateAboutUs({
|
|
id: aboutUsData.id,
|
|
content: formData.content,
|
|
language_code: formData.languageCode,
|
|
}).unwrap();
|
|
setIsOpen(false); // Close dialog on success
|
|
reset(); // Reset the form
|
|
} catch (error: any) {
|
|
console.error("Update failed:", error);
|
|
toaster.create({
|
|
title: "Error",
|
|
description: `${error.data.message || "Failed to update"}`,
|
|
type: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DialogRoot placement="center" open={isOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
bgColor="#EEEEEE"
|
|
pl={3}
|
|
pr={3}
|
|
size="xs"
|
|
color="#000"
|
|
onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
|
|
>
|
|
<FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
|
|
<Text color="#000" mt={1}>Edit</Text>
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
|
|
<DialogHeader bg="white">
|
|
<DialogTitle alignSelf="center" color="black" fontSize="14px">
|
|
Edit About Us
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogBody bg="white">
|
|
<Stack py={3} mb={8}>
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px">
|
|
About Us Content
|
|
</Field.Label>
|
|
{/* Use Controller to integrate ReactQuill with React Hook Form */}
|
|
<Controller
|
|
name="content"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<ReactQuill
|
|
value={field.value}
|
|
onChange={field.onChange}
|
|
placeholder="Enter About Us content"
|
|
modules={{
|
|
toolbar: [
|
|
[{ 'header': [1, 2, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
['link', 'image'],
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
['clean']
|
|
],
|
|
}}
|
|
formats={[
|
|
'header',
|
|
'bold', 'italic', 'underline', 'strike',
|
|
'list', 'bullet',
|
|
'link', 'image'
|
|
]}
|
|
style={{ color: "black", border: "none", fontSize: "12px", height: "170px", width: "100%" }}
|
|
/>
|
|
)}
|
|
/>
|
|
</Field.Root>
|
|
</Stack>
|
|
</DialogBody>
|
|
|
|
<DialogFooter display="flex" justifyContent="center" pt="2">
|
|
<Button
|
|
w="100%"
|
|
bg="#02A0A0"
|
|
color="#fff"
|
|
// isLoading={isLoading}
|
|
disabled={isLoading}
|
|
onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
|
|
>
|
|
Save
|
|
</Button>
|
|
</DialogFooter>
|
|
|
|
<DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
<Toaster />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default AboutUsAddModel; |