Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel

2025-02-12 12:45:00 +05:30
parent 066238b334 dc3c861471
commit 5db4c3a236
3 changed files with 234 additions and 55 deletions
--- a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
@@ -1,31 +1,19 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
+import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
 import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
 import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";


-interface AboutUsContent {
-  id: number;
-  content: string;
-}
-
-interface ApiResponse {
-  data: AboutUsContent[];
-}
-

 const AboutUs = () => {

-  // const {
-  //   data: data
-  // } = useGetAboutUsQuery()
-  const { data: response } = useGetAboutUsQuery<{ data: ApiResponse }>();
+  const { data, isLoading } = useGetAboutUsQuery();
+
+  const content = data?.data?.[0]?.content
  console.log('====================================');
-  console.log(response);
+  // console.log(response);
  console.log('====================================');

-  const content = response?.data?.[0]?.content || "No content available";

  return (

@@ -47,9 +35,35 @@ const AboutUs = () => {
            <AboutUsAddModel />
          </HStack>
        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
+        {/* Show Skeleton until content is available */}
+        {isLoading || !content ? (
+          <Box px={3} w="85%">
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" width="75%" />
+            <Skeleton height="20px" mb="15px" width="90%" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" width="85%" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" width="70%" />
+          </Box>
+        ) : (
+          <Text
+            as="p"
+            fontSize="sm"
+            fontWeight={400}
+            color="#1D1D1D"
+            px={3}
+            w="85%"
+            mb="15px"
+          >
            {content}
          </Text>
+        )}
+        {/* <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
+          {content}
+        </Text> */}
        {/* <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
        </Text> */}
--- a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -1,53 +1,189 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+// import { FaRegEdit } from "react-icons/fa"
+// import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+// import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
+// import { Button } from "../../../components/ui/button"
+// import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service"
+
+// function AboutUsAddModel() {
+
+//     const [ updateAboutUs ] = useUpdateAboutUsMutation()
+
+
+//     try {
+//         const res = updateAboutUs({id:2, updatedData:''})
+//         console.log(res);
+
+
+//     } catch (error) {
+
+//     }
+
+
+
+
+//     return (
+
+//         <DialogRoot placement="center">
+//             <DialogTrigger asChild>
+//                 {/* <Button bg={"transparent"} size="sm">
+//                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+//                 </Button> */}
+//                 <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></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</DialogTitle>
+//                 </DialogHeader>
+
+//                 <DialogBody bg="white">
+//                     <Stack py={3} >
+
+//                         <Field.Root>
+//                             <Field.Label color="black" pt={1} fontSize="12px">AboutUs</Field.Label>
+//                             <Textarea placeholder="" 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 AboutUsAddModel
+
+
+import React, { useState } from "react";
+import { FaRegEdit } from "react-icons/fa";
+import {
+    DialogBody,
+    DialogCloseTrigger,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";

 function AboutUsAddModel() {
-    return (
+    const [content, setContent] = useState(""); // State for the textarea input
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
+    //   const toast = useToast(); // Toast for feedback

+    // Handle form submission
+    const handleSubmit = async (e: any) => {
+        e.preventDefault(); // Prevent default form submission
+
+        try {
+            // Call the updateAboutUs mutation
+            const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
+            console.log(res);
+
+            // Show success toast
+            //   toast({
+            //     title: "Success",
+            //     description: "About Us content updated successfully",
+            //     status: "success",
+            //     duration: 5000,
+            //     isClosable: true,
+            //   });
+
+            // Clear the input field after successful submission
+            setContent("");
+        } catch (error) {
+            // Show error toast
+            //   toast({
+            //     title: "Error",
+            //     description: "Failed to update About Us content",
+            //     status: "error",
+            //     duration: 5000,
+            //     isClosable: true,
+            //   });
+        }
+    };
+
+    return (
        <DialogRoot placement="center">
            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
-
+                <Button bgColor="#EEEEEE" pl={3} pr={3} size="xs" color="#000">
+                    <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+                    <Text color="#000" mt={1}>
+                        Edit
+                    </Text>
+                </Button>
            </DialogTrigger>

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

                <DialogBody bg="white">
-                    <Stack py={3} >
-
+                    <Stack py={3}>
                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">AboutUs</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                AboutUs
+                            </Field.Label>
+                            <Textarea
+                                placeholder="Enter About Us content"
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="100px" // Increased height for better usability
+                                pt={1.5}
+                                value={content} // Bind the state to the textarea
+                                onChange={(e) => setContent(e.target.value)} // Update state on change
+                            />
                        </Field.Root>
                    </Stack>
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+
+                <DialogFooter display="flex" justifyContent="center" pt="2">
+                    <Button
+                        w="100%"
+                        bg="#02A0A0"
+                        color="#fff"
+                        onClick={handleSubmit} // Trigger handleSubmit on button click
+                    // isLoading={isLoading} // Show loading state while the mutation is in progress
+                    >
                        Save
                    </Button>
                </DialogFooter>

                <DialogCloseTrigger color="black" />
            </DialogContent>
-        </DialogRoot >
-
-    )
+        </DialogRoot>
+    );
 }

-export default AboutUsAddModel
+export default AboutUsAddModel;
--- a/src/Redux/Service/manage.aboutus.service.ts
+++ b/src/Redux/Service/manage.aboutus.service.ts
@@ -9,7 +9,7 @@ export const aboutUs = createApi({


    // 🔹 GET: Fetch all posts
-    getAboutUs: builder.query<AboutUs[], void>({
+    getAboutUs: builder.query<AboutUsResponse, void>({
      query: () => "/about-us",
    }),

@@ -24,18 +24,18 @@ export const aboutUs = createApi({

    // 🔹 POST: Create a new post
    createPost: builder.mutation<Post, Partial<Post>>({
-      query: (newPost) => ({
+      query: (data) => ({
        url: "/posts",
        method: "POST",
-        body: newPost,
+        body: data,
      }),
    }),

    // 🔹 PUT: Update an existing post
-    updatePost: builder.mutation<Post, { id: number; updatedData: Partial<Post> }>({
+    updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
      query: ({ id, updatedData }) => ({
        url: `/posts/${id}`,
-        method: "PUT",
+        method: "POST",
        body: updatedData,
      }),
    }),
@@ -52,9 +52,20 @@ export const aboutUs = createApi({

 export const { 
  useGetAboutUsQuery, 
+  useUpdateAboutUsMutation,
+
+
+
+
+
+
+
+
+
+
+  
  useGetPostByIdQuery, 
  useCreatePostMutation,  
-  useUpdatePostMutation, 
  useDeletePostMutation 
 } = aboutUs;

@@ -66,9 +77,27 @@ export type Post = {
 };


+export type UpdateAboutUsRequest={
+  id: number; updatedData: string
+}
+
+
+export type UpdateAboutUsResponse={
+  id: number; updatedData: string
+}
+
+
 export type AboutUs = {
  id: number;
  language_master_xid: number;
  content: string;
  is_active: boolean;
 };
+
+// First define your interface
+interface AboutUsResponse {
+  data: {
+    content: string;
+    // other fields...
+  }[];
+}