Added search input functionality in FAQ

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.0cibk256ds"
+    "revision": "0.9manovjiico"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -1,8 +1,8 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import EditDetails from "./EditDetails";
-import { InputGroup } from "../../../components/ui/input-group";
-import { LuSearch } from "react-icons/lu";
+// import { InputGroup } from "../../../components/ui/input-group";
+// import { LuSearch } from "react-icons/lu";
 import DataTable from "../../../components/DataTable";
 import AlertDailog from "../../../components/AlertDailog";
 import { Switch } from "../../../components/ui/switch";
@@ -10,6 +10,7 @@ import FaqAddModel from "./FaqAddModel";
 import Delete from "../../../components/ActionIcons/Delete";
 import { useEffect, useState } from "react";
 import { FaqData, useDeleteFaqPostMutation, useFaqToggleMutation, useGetFaqQuery } from "../../../Redux/Service/faqs.service";
+import SearchComponent from "../../../components/SearchComponent";
 
 
 // table data
@@ -53,8 +54,9 @@ const FAQ = () => {
   const [localData, setLocalData] = useState<any[]>([]);
   const [faqToggle] = useFaqToggleMutation()
   const [deleteFaqPost] = useDeleteFaqPostMutation()
+  const [searchTerm, setSearchTerm] = useState("");
 
-  console.log('DATA', data?.data);
+  // console.log('DATA', data?.data);
 
   useEffect(() => {
     if (data?.data) {
@@ -94,7 +96,12 @@ const FAQ = () => {
     }
   };
 
-  const managepost = localData?.map((agency: FaqData, index: number) => ({
+
+  const filteredData = localData?.filter((agency) =>
+    agency.question.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const managepost = filteredData?.map((agency: FaqData, index: number) => ({
     'id': agency.id,
     "Sr. No": index + 1,
     "Question": agency.question,
@@ -142,7 +149,7 @@ const FAQ = () => {
           </Text>
 
           <HStack >
-            <InputGroup
+            {/* <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -161,7 +168,12 @@ const FAQ = () => {
                 bgColor={'#EEEEEE'}
                 ps={8}
               />
-            </InputGroup>
+            </InputGroup> */}
+            <SearchComponent
+              // placeholder="Search FAQs..."
+              value={searchTerm}
+              onChange={setSearchTerm}
+            />
             {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
             <FaqAddModel refetch={refetch} />
           </HStack>

src/Pages/SubAdmin/SubAdmin.tsx

@@ -9,6 +9,8 @@ import AddModel from "./AddModel"
 import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewSubAdmin from "./ViewSubAdmin"
 import Delete from "../../components/ActionIcons/Delete"
+// import { useGetSubAdminQuery } from "../../Redux/Service/manage.subadmin.service"
+// import { useEffect, useState } from "react"
 
 
 // table data
@@ -38,7 +40,7 @@ const managepost: any[] = [
         <EditSubAdmin />
 
         <AlertDailog
-          AltertTiggerIcon={() => <Delete />} 
+          AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -50,7 +52,47 @@ const managepost: any[] = [
     ),
   })),
 ];
+
 const SubAdmin = () => {
+  // const { data, refetch } = useGetSubAdminQuery()
+  //  const [localData, setLocalData] = useState<any[]>([]);
+
+  // useEffect(() => {
+  //    if (data?.data) {
+  //      setLocalData(data?.data);
+  //    }
+  //  }, [data]);
+
+
+  // const managepost = localData?.map((agency: any, index: number) => ({
+  //   'id': agency.id,
+  //   "Sr. No": index + 1,
+  //   "Id": 12565,
+  //   "First Name": "Kamlesh",
+  //   "last Name": "Pandey",
+  //   "DOB": "12/01/1987",
+  //   "Gender": "Male",
+
+  //   "Action": (
+  //     <HStack justifyContent="center">
+  //       {/* <EditDetails rowData={{ id: agency.id, question: agency.question, answer: agency.answer }} refetch={refetch} /> */}
+  //       <ViewSubAdmin />
+  //       <EditSubAdmin />
+
+  //       <AlertDailog
+  //         AltertTiggerIcon={() => <Delete />}
+  //         alertText="Delete Users"
+  //         alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+  //         alertCaption="are you sure you want to delete ?"
+  //         onConfirm={() => {
+  //           // console.log("User deleted:", index + 1);
+  //           // handleDeleteFaq(agency.id)
+  //         }}
+  //       />
+  //     </HStack>
+  //   ),
+  // }));
+
   return (
 
     <MainFrame >
@@ -67,7 +109,7 @@ const SubAdmin = () => {
           </Text>
 
           <HStack>
-            <InputGroup 
+            <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -95,6 +137,8 @@ const SubAdmin = () => {
           sortableColumns={["Name", "Registration Date "]}
           tableHeadRow={tableHeadRow}
           data={managepost}
+        // paginationData={data?.data}
+        // refetch={refetch}
         />
       </Box>    </MainFrame>
   )

src/Redux/Service/manage.subadmin.service.ts

@@ -4,30 +4,60 @@ import { baseQueryWithReauth } from "./apiSlice";
 
 
 export type SubAdminPost = {
-  id: number; 
-  first_name: string, 
+  id: number;
+  first_name: string,
   last_name: string,
-  unique_id:string,
-  date_of_birth:string,
+  unique_id: string,
+  date_of_birth: string,
   gender: string,
 }
 
 export const manageSubAdmin = createApi({
-    reducerPath: "manageSubAdmin",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    tagTypes: ['SubAdmin'],
-    endpoints: (builder) => ({ 
-      getSubAdmin: builder.query<SubAdminPost[], void>({
-        query: () => `/sub-admin-view/2` }),  
+  reducerPath: "manageSubAdmin",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  tagTypes: ['SubAdmin'],
+  endpoints: (builder) => ({
+    createFaqPost: builder.mutation<Post, Partial<Post>>({
+      query: (data) => ({
+        url: "/faq-store",
+        method: "POST",
+        body: data,
+      }),
     }),
-  });
-  
-  export const { 
-    useGetSubAdminQuery,
-   } = manageSubAdmin;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+    getSubAdmin: builder.query<SubAdminPost[], void>({
+      query: () => `/sub-admin`
+    }),
+    updateFaq: builder.mutation({
+      query: (updatedData) => ({
+        url: "/faq-update",
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+    faqToggle: builder.mutation({
+      query: ({ id, is_active }) => ({
+        url: `/faq-status`,
+        method: "POST",
+        body: { id, is_active },
+      }),
+    }),
+
+    deleteFaqPost: builder.mutation<{ success: boolean }, number>({
+      query: (id) => ({
+        url: `/faq-delete/${id}`,
+        method: "DELETE",
+      }),
+    }),
+  }),
+});
+
+export const {
+  useGetSubAdminQuery,
+} = manageSubAdmin;
+
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};

src/components/NoData.tsx

@@ -0,0 +1,29 @@
+
+import { Text } from '@chakra-ui/react';
+
+import { ReactNode } from 'react';
+
+interface NoDataProps {
+    children: ReactNode;
+    data: any;
+    error: any;
+    isLoading: boolean;
+}
+
+const NoData = ({ children, data, error, isLoading }: NoDataProps) => {
+    if (isLoading) {
+        return <p>Loading...</p>; // Show a loading spinner or skeleton
+    }
+
+    if (error) {
+        return <Text>Something went wrong, Try again later.</Text>;
+    }
+
+    if (!data || (Array.isArray(data) && data.length === 0)) {
+        return <Text>No data found</Text>;
+    }
+
+    return children;
+};
+
+export default NoData;

src/components/SearchComponent.tsx

@@ -0,0 +1,45 @@
+import { InputGroup } from "../../src/components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import { ChangeEvent } from "react";
+import { Input } from "@chakra-ui/react";
+
+interface SearchComponentProps {
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+const SearchComponent = ({ placeholder = "Search...", value, onChange }: SearchComponentProps) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange(e.target.value);
+    };
+
+    return (
+        <InputGroup
+            startElement={<LuSearch fontSize="xs" style={{ position: 'relative', left: '10px' }} />}
+        >
+            <>
+                {/* <InputLeftElement pointerEvents="none" position="relative" left="10px">
+                    <LuSearch fontSize="xs" />
+                </InputLeftElement> */}
+                <Input
+                    p={3}
+                    w={300}
+                    bg={"#fff"}
+                    colorPalette={"blue"}
+                    _focus={{ border: "1px solid #02A0A0" }}
+                    rounded={"md"}
+                    size={"xs"}
+                    fontSize={"2sm"}
+                    placeholder={placeholder}
+                    bgColor={'#EEEEEE'}
+                    ps={8}
+                    value={value}
+                    onChange={handleChange}
+                />
+            </>
+        </InputGroup>
+    );
+};
+
+export default SearchComponent;