Merge pull request #27 from AkshataKatwal16/admin

Issue feat: #PS-1301 Integrate state district block list api

src/components/HeaderComponent.tsx

@@ -1,25 +1,52 @@
 import * as React from "react";
-import { useState } from "react";
-import { MenuItem, Typography, Box, FormControl, useMediaQuery, Grid, Button } from "@mui/material";
+import { useState, useEffect } from "react";
+import {
+  MenuItem,
+  Typography,
+  Box,
+  FormControl,
+  useMediaQuery,
+  Grid,
+  Button,
+} from "@mui/material";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import AddIcon from "@mui/icons-material/Add";
 import SearchBar from "@/components/layouts/header/SearchBar";
 import { useTranslation } from "next-i18next";
 import MultipleSelectCheckmarks from "./FormControl";
 import { useTheme } from "@mui/material/styles";
+import {
+  getBlockList,
+  getStateList,
+  getDistrictList,
+} from "../services/MasterDataService";
 
 const AllStates = [
   { name: "Maharashtra", code: "mh" },
   { name: "Gujarat", code: "gj" },
 ];
 const AllDistrict = [
-  { name: "Mumbai", code: "MUM" },
-  { name: "Pune", code: "PN" },
+  { name: "Mu", code: "MUM" },
+  { name: "Pu", code: "PN" },
 ];
 const AllBlocks = [
   { name: "Baner", code: "BA" },
   { name: "Hinjewadi", code: "HJ" },
 ];
+interface State {
+  value: string;
+  label: string;
+}
+
+interface District {
+  value: string;
+  label: string;
+}
+
+interface Block {
+  value: string;
+  label: string;
+}
 const Sort = ["A-Z", "Z-A"];
 
 const HeaderComponent = ({
@@ -40,25 +67,58 @@ const HeaderComponent = ({
   const theme = useTheme<any>();
   const isMobile = useMediaQuery("(max-width:600px)");
   const isMediumScreen = useMediaQuery("(max-width:986px)");
-
-  const handleStateChangeWrapper = (selectedNames: string[], selectedCodes: string[]) => {
+  const [allStates, setAllStates] = useState<State[]>([]);
+  const [allDistricts, setAllDistricts] = useState<District[]>([]);
+  const [allBlocks, setAllBlocks] = useState<Block[]>([]);
+  const handleStateChangeWrapper = async (
+    selectedNames: string[],
+    selectedCodes: string[]
+  ) => {
     if (selectedNames[0] === "") {
       handleDistrictChange([], []);
       handleBlockChange([], []);
     }
+    try {
+      const response = await getDistrictList(selectedCodes);
+      const result=response?.result
+      setAllDistricts(result);
+    } catch (error) {
+      console.log(error);
+    }
     handleStateChange(selectedNames, selectedCodes);
   };
 
-  const handleDistrictChangeWrapper = (selected: string[], selectedCodes: string[]) => {
+  const handleDistrictChangeWrapper = async(selected: string[], selectedCodes: string[]) => {
     if (selected[0] === "") {
       handleBlockChange([], []);
     }
+    try {
+      const response = await getBlockList(selectedCodes);
+      const result=response?.result
+      setAllBlocks(result);
+    } catch (error) {
+      console.log(error);
+    }
     handleDistrictChange(selected, selectedCodes);
   };
 
   const handleBlockChangeWrapper = (selected: string[], selectedCodes: string[]) => {
     handleBlockChange(selected, selectedCodes);
   };
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await getStateList();
+        const result = response?.result;
+        setAllStates(result);
+        console.log(typeof allStates);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    fetchData();
+  }, []);
 
   return (
     <Box
@@ -85,17 +145,17 @@ const HeaderComponent = ({
           <Grid container spacing={isMobile ? 1 : 2}>
             <Grid item xs={12} sm={isMediumScreen ? 12 : 4}>
               <MultipleSelectCheckmarks
-                names={AllStates.map((state) => state.name)}
-                codes={AllStates.map((state) => state.code)}
+                names={allStates.map((state) => state.label)}
+                codes={allStates.map((state) => state.value)}
                 tagName={t("FACILITATORS.ALL_STATES")}
                 selectedCategories={selectedState}
                 onCategoryChange={handleStateChangeWrapper}
               />
             </Grid>
             <Grid item xs={12} sm={isMediumScreen ? 12 : 4}>
               <MultipleSelectCheckmarks
-                names={AllDistrict.map((districts) => districts.name)}
-                codes={AllDistrict.map((districts) => districts.code)}
+                names={allDistricts.map((districts) => districts.label)}
+                codes={allDistricts.map((districts) => districts.value)}
                 tagName={t("FACILITATORS.ALL_DISTRICTS")}
                 selectedCategories={selectedDistrict}
                 onCategoryChange={handleDistrictChangeWrapper}
@@ -104,8 +164,8 @@ const HeaderComponent = ({
             </Grid>
             <Grid item xs={12} sm={isMediumScreen ? 12 : 4}>
               <MultipleSelectCheckmarks
-                names={AllBlocks.map((blocks) => blocks.name)}
-                codes={AllBlocks.map((blocks) => blocks.code)}
+                names={allBlocks.map((blocks) => blocks.label)}
+                codes={allBlocks.map((blocks) => blocks.value)}
                 tagName={t("FACILITATORS.ALL_BLOCKS")}
                 selectedCategories={selectedBlock}
                 onCategoryChange={handleBlockChangeWrapper}

src/components/UserTable.tsx

@@ -127,6 +127,10 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
     />
   );
   const handleStateChange = async (selected: string[], code: string[]) => {
+    setSelectedDistrict([]);
+    setSelectedBlock([]);
+
+
     setSelectedState(selected);
 
     if (selected[0] === "") {
@@ -140,7 +144,8 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
     console.log("Selected categories:", typeof code[0]);
   };
   const handleDistrictChange = (selected: string[], code: string[]) => {
-    setSelectedDistrict(selected);
+    setSelectedBlock([]);
+   setSelectedDistrict(selected);
 
     if (selected[0] === "") {
       setFilters({

src/services/MasterDataService.ts

@@ -0,0 +1,37 @@
+import { get } from "./RestClient";
+export const getStateList = async (
+
+  ): Promise<any> => {
+    const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read/states?context=USERS`;
+    try {
+      const response = await get(apiUrl);
+      return response?.data;
+    } catch (error) {
+      console.error('error in fetching user details', error);
+      return error;
+    }
+  };
+
+
+  export const getDistrictList = async ( state: string | string[]): Promise<any> => {
+      const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read/districts?controllingfieldfk=${state}&context=USERS`;
+      try {
+        const response = await get(apiUrl);
+        return response?.data;
+      } catch (error) {
+        console.error('error in fetching user details', error);
+        return error;
+      }
+    };
+
+
+    export const getBlockList = async (district: string | string[]): Promise<any> => {
+        const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read/blocks?controllingfieldfk=${district}&context=USERS`;
+        try {
+          const response = await get(apiUrl);
+          return response?.data;
+        } catch (error) {
+          console.error('error in fetching user details', error);
+          return error;
+        }
+      };

src/styles/globals.css

@@ -3,6 +3,8 @@
     --background-start-rgb: 214, 219, 220;
     --background-end-rgb: 255, 255, 255;
   }
+
+
 
   @media (prefers-color-scheme: dark) {
     :root {
@@ -13,6 +15,8 @@
   }
 
   body {
+    margin: 0;
+    padding: 0;
     color: rgb(var(--foreground-rgb));
     background: linear-gradient(
         to bottom,
@@ -29,7 +33,7 @@
   }
 
   .sidebar-link {
-    text-decoration: "none",
-    color: "inherit",
-    cursor: "pointer"
+    text-decoration: "none";
+    color: "inherit";
+    cursor: "pointer";
   }