worked on the about

2025-02-25 13:58:13 +05:30
parent 2cb6173b81
commit 9b97228ec8
5 changed files with 164 additions and 58 deletions
--- a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
@@ -61,7 +61,7 @@
 // }
 // export default AboutUs

-import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
 import { Spinner } from "../../../components/Sipnner/Spinner";
@@ -85,6 +85,9 @@ const AboutUs = () => {
  return (
    <MainFrame transperant={true}>
      <VStack gap={4} pb={4} pt={0}>
+        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >             About Us
+        </Text></Stack>
+
        {isLoading || isFetching ? (
          <Spinner />
        ) : (
@@ -96,9 +99,9 @@ const AboutUs = () => {
              p={3}
              key={id}
            >
+
              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
                <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-                  About Us{" "}
                  <Badge
                    variant={"surface"}
                    colorPalette="cyan"
--- a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -1,4 +1,3 @@
-
 import { FaRegEdit } from "react-icons/fa";
 import {
    DialogBody,
@@ -16,41 +15,53 @@ 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 { useUpdateAboutUsMutation } from "../../../services/api"; // Assuming you're using RTK Query
+import { useForm, Controller } from "react-hook-form"; // Import React Hook Form

 function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
-    const [content, setContent] = useState("");
-    const [selectedId, setSelectedId] = useState<number | null>(null);
-    const [languageCode, setLanguageCode] = useState<string>("");
    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) => {
-        setSelectedId(data.id);
-        setContent(data.content);
-        setLanguageCode(data.about_language.language_code);
+        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 handleSave = async () => {
-        if (!selectedId || !content.trim()) return; // Prevent empty updates
+    const onSubmit = async (formData: any) => {
+        if (!formData.content.trim()) return; // Prevent empty updates

        try {
-            await updateAboutUs({ id: selectedId, content, language_code: languageCode }).unwrap();
+            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) {
            console.error("Update failed:", error);
        }
    };

    return (
-        <DialogRoot placement="center" open={isOpen} >
+        <DialogRoot placement="center" open={isOpen}>
            <DialogTrigger asChild>
                <Button
                    bgColor="#EEEEEE"
@@ -78,26 +89,33 @@ function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
                            <Field.Label color="black" pt={1} fontSize="12px">
                                About Us Content
                            </Field.Label>
-                            <ReactQuill
-                                value={content}
-                                onChange={setContent}
-                                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%" }}
+                            {/* 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>
@@ -109,16 +127,16 @@ function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
                        bg="#02A0A0"
                        color="#fff"
                        // isLoading={isLoading}
-                        onClick={handleSave}
+                        onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
                    >
                        Save
                    </Button>
                </DialogFooter>

-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
            </DialogContent>
        </DialogRoot>
    );
 }

-export default AboutUsAddModel;
+export default AboutUsAddModel;
--- a/src/Pages/ManageCMS/FAQ/EditDetails.tsx
+++ b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
@@ -1,3 +1,85 @@
+// import { Button } from "../../../components/ui/button";
+// import {
+//   DialogBody,
+//   DialogCloseTrigger,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogRoot,
+//   DialogTitle,
+//   DialogTrigger,
+// } from "../../../components/ui/dialog";
+// import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+// import Edit from "../../../components/ActionIcons/Edit";
+// function EditDetails() {
+//   return (
+//     <DialogRoot placement="center">
+//       <DialogTrigger asChild>
+//         {/*  */}
+//         <Button bg={"#fff"} color={"black"}><Edit /></Button>
+
+//       </DialogTrigger>
+
+//       <DialogContent
+//         bg={"#fff"}
+//         // w={{ lg: "60%", md: "230px" }}
+//         w={{ base: "90%", md: "400px" }}
+//         height={"auto"}
+//         p={3} // Reduced padding
+//         bgSize={"md"}
+//       >
+//         <DialogHeader bg="white">
+//           <DialogTitle alignSelf="center" color="black" fontSize="14px">
+//             Edit Details
+//           </DialogTitle>
+//         </DialogHeader>
+
+//         <DialogBody bg="white">
+//           <Stack py={3}>
+//             <Field.Root>
+//               <Field.Label color="black" pt={1} fontSize="12px">
+//                 Questions
+//               </Field.Label>
+//               <Input
+//                 placeholder="Questions"
+//                 bgColor="#EEEEEE"
+//                 color="black"
+//                 border="none"
+//                 pl={1}
+//                 fontSize="12px"
+//                 height="30px"
+//               />
+
+//               <Field.Label color="black" pt={1} fontSize="12px">
+//                 Answer
+//               </Field.Label>
+//               <Textarea
+//                 placeholder="Answer"
+//                 bgColor="#EEEEEE"
+//                 color="black"
+//                 border="none"
+//                 pl={1}
+//                 fontSize="12px"
+//                 height="30px"
+//                 pt={1.5}
+//               />
+//             </Field.Root>
+//           </Stack>
+//         </DialogBody>
+//         <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+//           <Button w="100%" bg="#02A0A0" color={"#fff"}>
+//             Save
+//           </Button>
+//         </DialogFooter>
+
+//         <DialogCloseTrigger color="black" />
+//       </DialogContent>
+//     </DialogRoot>
+//   );
+// }
+
+// export default EditDetails;
+
 import { Button } from "../../../components/ui/button";
 import {
  DialogBody,
@@ -11,24 +93,27 @@ import {
 } from "../../../components/ui/dialog";
 import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
 import Edit from "../../../components/ActionIcons/Edit";
-function EditDetails() {
+
+function EditDetails(rowData: any) {
+
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
-        <Edit />
+
+
+
+        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
-        // w={{ lg: "60%", md: "230px" }}
        w={{ base: "90%", md: "400px" }}
        height={"auto"}
-        p={3} // Reduced padding
-        bgSize={"md"}
+        p={3}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
-            Edit Details
+            Edit Details (ID: {rowData?.id})
          </DialogTitle>
        </DialogHeader>

@@ -36,16 +121,17 @@ function EditDetails() {
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
-                Questions
+                Question
              </Field.Label>
              <Input
-                placeholder="Questions"
+                placeholder="Question"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
+                defaultValue={rowData?.question} // Pre-fill question
              />

              <Field.Label color="black" pt={1} fontSize="12px">
@@ -60,10 +146,12 @@ function EditDetails() {
                fontSize="12px"
                height="30px"
                pt={1.5}
+                defaultValue={rowData?.answer} // Pre-fill answer
              />
            </Field.Root>
          </Stack>
        </DialogBody>
+
        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
          <Button w="100%" bg="#02A0A0" color={"#fff"}>
            Save
--- a/src/Pages/ManageCMS/FAQ/FAQ.tsx
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -5,7 +5,6 @@ import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../../components/DataTable";
 import AlertDailog from "../../../components/AlertDailog";
-import { RiDeleteBin5Line } from "react-icons/ri";
 import { Switch } from "../../../components/ui/switch";
 import FaqAddModel from "./FaqAddModel";
 import Delete from "../../../components/ActionIcons/Delete";
@@ -28,11 +27,13 @@ const managepost: any[] = [
    "Action": (
      <HStack justifyContent="center">
        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch colorPalette={'teal'} size={"xs"} />
        </Box>
+        {/* <EditDetails /> */}
        <EditDetails />
+
        <AlertDailog
-          AltertTiggerIcon={() => <Delete />} 
+          AltertTiggerIcon={() => <Delete />}
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
@@ -58,11 +59,11 @@ const FAQ = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           FAQs
+            FAQs
          </Text>

          <HStack >
-            <InputGroup 
+            <InputGroup
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -91,7 +92,7 @@ const FAQ = () => {
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
-      </Box>       
+      </Box>
    </MainFrame>
  )
 }