Merge pull request #23 from AkshataKatwal16/admin

Issue #PS-1301 feat: Filter user list by state block district
tekdi · Jul 16, 2024 · f2ea571 · f2ea571
2 parents e129d00 + 8ed9107
commit f2ea571
Show file tree

Hide file tree

Showing 7 changed files with 481 additions and 286 deletions.
diff --git a/src/components/FormControl.tsx b/src/components/FormControl.tsx
@@ -1,4 +1,3 @@
-// components/MultipleSelectCheckmarks.tsx
 import * as React from 'react';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import InputLabel from '@mui/material/InputLabel';
@@ -21,19 +20,21 @@ const MenuProps = {
 
 interface MultipleSelectCheckmarksProps {
   names: string[];
+  codes: string[];
   tagName: string;
   selectedCategories: string[];
-  onCategoryChange: (selected: string[]) => void;
+  onCategoryChange: (selectedNames: string[], selectedCodes: string[]) => void;
   disabled?: boolean;
 }
 
-const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ names, tagName, selectedCategories, onCategoryChange , disabled = false}) => {
+const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ names, codes, tagName, selectedCategories, onCategoryChange, disabled = false }) => {
   const handleChange = (event: SelectChangeEvent<typeof selectedCategories>) => {
     const {
       target: { value },
     } = event;
-    const selected = typeof value === 'string' ? value.split(',') : value;
-    onCategoryChange(selected);
+    const selectedNames = typeof value === 'string' ? value.split(',') : value;
+    const selectedCodes = selectedNames.map(name => codes[names.indexOf(name)]);
+    onCategoryChange(selectedNames, selectedCodes);
   };
 
   return (
@@ -43,16 +44,19 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ nam
         <Select
           labelId="multiple-checkbox-label"
           id="multiple-checkbox"
-          multiple
+
           value={selectedCategories}
           onChange={handleChange}
           input={<OutlinedInput label={tagName} />}
           renderValue={(selected) => selected.join(', ')}
           MenuProps={MenuProps}
         >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
           {names.map((name) => (
             <MenuItem key={name} value={name}>
-              <Checkbox checked={selectedCategories.indexOf(name) > -1} />
+              {/* <Checkbox checked={selectedCategories.indexOf(name) > -1} /> */}
               <ListItemText primary={name} />
             </MenuItem>
           ))}

diff --git a/src/components/UserComponent.tsx b/src/components/UserComponent.tsx
@@ -1,22 +1,25 @@
-
 import * as React from "react";
-import { useState, useEffect } from "react";
-import {
-  MenuItem,
-  Typography,
-  Box,
-  FormControl,
-  useMediaQuery,
-} from "@mui/material";
+import { useState } from "react";
+import { MenuItem, Typography, Box, FormControl, useMediaQuery } 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 { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useTranslation } from "next-i18next";
 import MultipleSelectCheckmarks from "./FormControl";
-const AllStates = ["maharashtra", "Gujarat"];
-const AllDistrict = ["Kolhapur", "Pune"];
-const AllBlocks = ["Kothrud", "Warje"];
+const AllStates = [
+  { name: "Maharashtra", code: "mh" },
+  { name: "Gujarat", code: "gj" }
+];
+const AllDistrict = [
+  { name: "Mumbai", code: "MUM" },
+  { name: "Pune", code: "PN" }
+];
+const AllBlocks = [
+  { name: "Baner", code: "BA" },
+  { name: "Hinjewadi", code: "HJ" }
+];
+
+//const AllBlocks = ["Kothrud", "Warje"];
 const Sort = ["A-Z", "Z-A"];
 
 const UserComponent = ({
@@ -36,16 +39,31 @@ const UserComponent = ({
   const { t } = useTranslation();
 
   const isMobile = useMediaQuery("(max-width:600px)");
-    const handleStateChangeWrapper = (selected: string[]) => {
-    handleStateChange(selected);
-    handleDistrictChange([]);
-    handleBlockChange([]);
+
+  const handleStateChangeWrapper = (selectedNames: string[], selectedCodes: string[]) => {
+    console.log(selectedNames)
+    if(selectedNames[0]==="")
+    {
+      console.log(true)
+      handleDistrictChange([], []);
+      handleBlockChange([], [])
+    }
+    handleStateChange(selectedNames, selectedCodes);
+
   };
 
-  const handleDistrictChangeWrapper = (selected: string[]) => {
-    handleDistrictChange(selected);
-    handleBlockChange([]);
+  const handleDistrictChangeWrapper = (selected: string[], selectedCodes: string[]) => {
+    if(selected[0]==="")
+    {
+      console.log(true)
+      handleBlockChange([], [])
+    }
+    handleDistrictChange(selected, selectedCodes);
   };
+  const handleBlockChangeWrapper = (selected: string[], selectedCodes: string[]) => {
+    handleBlockChange(selected, selectedCodes);
+  };
+
   return (
     <Box
       sx={{
@@ -55,43 +73,31 @@ const UserComponent = ({
       }}
     >
       {showStateDropdown && (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: isMobile ? "column" : "row",
-            width: isMobile ? "90%" : "100%",
-            backgroundColor: "#EEEEEE",
-            p: isMobile ? "0.5rem" : "1rem",
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: isMobile ? "column" : "row",
-              gap: isMobile ? "0.5rem" : "2rem",
-              width: "100%",
-            }}
-          >
-              <MultipleSelectCheckmarks
-            names={AllStates}
-            tagName={t("FACILITATORS.ALL_STATES")}
-            selectedCategories={selectedState}
-            onCategoryChange={handleStateChangeWrapper}
-          />
-          <MultipleSelectCheckmarks
-            names={AllDistrict}
-            tagName={t("FACILITATORS.ALL_DISTRICTS")}
-            selectedCategories={selectedDistrict}
-            onCategoryChange={handleDistrictChangeWrapper}
-            disabled={selectedState.length === 0}
-          />
-          <MultipleSelectCheckmarks
-            names={AllBlocks}
-            tagName={t("FACILITATORS.ALL_BLOCKS")}
-            selectedCategories={selectedBlock}
-            onCategoryChange={handleBlockChange}
-            disabled={selectedDistrict.length === 0}
-          />
+        <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", width: isMobile ? "90%" : "100%", backgroundColor: "#EEEEEE", p: isMobile ? "0.5rem" : "1rem" }}>
+          <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", gap: isMobile ? "0.5rem" : "2rem", width: "100%" }}>
+            <MultipleSelectCheckmarks
+              names={AllStates.map(state => state.name)}
+              codes={AllStates.map(state => state.code)}
+              tagName={t("FACILITATORS.ALL_STATES")}
+              selectedCategories={selectedState}
+              onCategoryChange={handleStateChangeWrapper}
+            />
+            <MultipleSelectCheckmarks
+              names={AllDistrict.map(districts => districts.name)}
+              codes={AllDistrict.map(districts => districts.code)} // Assuming codes for districts are the same as names
+              tagName={t("FACILITATORS.ALL_DISTRICTS")}
+              selectedCategories={selectedDistrict}
+              onCategoryChange={handleDistrictChangeWrapper}
+              disabled={selectedState.length === 0 ||selectedState[0]=== ""}
+            />
+            <MultipleSelectCheckmarks
+             names={AllBlocks.map(blocks => blocks.name)}
+             codes={AllBlocks.map(blocks => blocks.code)}// Assuming codes for blocks are the same as names
+              tagName={t("FACILITATORS.ALL_BLOCKS")}
+              selectedCategories={selectedBlock}
+              onCategoryChange={handleBlockChange}
+              disabled={selectedDistrict.length === 0|| selectedDistrict[0]=== ""}
+            />
           </Box>
         </Box>
       )}
@@ -152,4 +158,5 @@ const UserComponent = ({
     </Box>
   );
 };
+
 export default UserComponent;
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -23,4 +23,4 @@ export async function getStaticProps({ locale }: any) {
       ...(await serverSideTranslations(locale, ["common"])),
     },
   };
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,4 +23,4 @@ export async function getStaticProps({ locale }: any) { @@
           ...(await serverSideTranslations(locale, ["common"])),
         },
       };
-    }
+    }