Merge pull request #127 from rahulg1254/admin-master

Task #223691 feat: Updated toastify check background and search payload changed for block
tekdi · Aug 13, 2024 · 8d8d075 · 8d8d075
2 parents c8d83ee + 2252803
commit 8d8d075
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 64 deletions.
diff --git a/src/components/Toastify.js b/src/components/Toastify.js
@@ -4,7 +4,7 @@ const options = {
   position: "bottom-center",
   hideProgressBar: true,
   closeButton: false,
-  autoClose: 3000,
+  autoClose: 2000,
 };
 
 export const showToastMessage = (message, type = "success") => {

diff --git a/src/pages/block.tsx b/src/pages/block.tsx
@@ -83,6 +83,7 @@ const Block: React.FC = () => {
   const [cohortStatus, setCohortStatus] = useState<any>();
   const [cohortId, setCohortId] = useState<any>();
   const [stateFieldId, setStateFieldId] = useState<string>("");
+  const [searchKeyword, setSearchKeyword] = useState("");
 
   useEffect(() => {
     const fetchUserDetail = async () => {
@@ -153,8 +154,9 @@ const Block: React.FC = () => {
       const response = await getBlocksForDistricts({
         limit: limit,
         offset: offset,
-        controllingfieldfk: selectedDistrict,
+        controllingfieldfk: selectedDistrict || "",
         fieldName: "blocks",
+        optionName: searchKeyword || "",
         sort: sortBy,
       });
 
@@ -190,7 +192,7 @@ const Block: React.FC = () => {
 
   useEffect(() => {
     fetchBlocks(selectedDistrict);
-  }, [selectedDistrict, sortBy, pageOffset, pageLimit]);
+  }, [searchKeyword, selectedDistrict, sortBy, pageOffset, pageLimit]);
 
   const columns = [
     {
@@ -341,6 +343,10 @@ const Block: React.FC = () => {
     setConfirmationDialogOpen(true);
   };
 
+  const handleSearch = (keyword: string) => {
+    setSearchKeyword(keyword);
+  };
+
   const handleConfirmDelete = async () => {
     if (selectedStateForDelete) {
       try {
@@ -496,67 +502,79 @@ const Block: React.FC = () => {
         handleCloseModal={() => setConfirmationDialogOpen(false)}
       />
 
-      <HeaderComponent {...userProps} handleAddUserClick={handleAddNewBlock}>
+      <HeaderComponent
+        {...userProps}
+        handleAddUserClick={handleAddNewBlock}
+        handleSearch={handleSearch}
+      >
         <>
           <Box
             sx={{
               display: "flex",
-              justifyContent: "center",
-              gap: 5,
+              gap: 3,
               marginTop: 2,
               "@media (max-width: 580px)": {
-                marginTop: 10,
+                width: "100%",
                 flexDirection: "column",
-                alignItems: "center",
               },
             }}
           >
-            <Box sx={{ width: "100%" }}>
-              <FormControl sx={{ width: "100%" }}>
-                <InputLabel
-                  sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
-                  id="state-select-label"
-                >
-                  {t("MASTER.STATE")}
-                </InputLabel>
-                <Select
-                  labelId="state-select-label"
-                  id="state-select"
-                  value={selectedState}
-                  onChange={handleStateChange}
-                >
-                  <MenuItem key={stateCode} value={stateCode}>
-                    {transformLabel(stateValue)}
+            <FormControl
+              sx={{
+                width: "25%", 
+                "@media (max-width: 580px)": {
+                  width: "100%", 
+                },
+              }}
+            >
+              <InputLabel
+                sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
+                id="state-select-label"
+              >
+                {t("MASTER.STATE")}
+              </InputLabel>
+              <Select
+                labelId="state-select-label"
+                id="state-select"
+                value={selectedState}
+                onChange={handleStateChange}
+              >
+                <MenuItem key={stateCode} value={stateCode}>
+                  {transformLabel(stateValue)}
+                </MenuItem>
+              </Select>
+            </FormControl>
+
+            <FormControl
+              sx={{
+                width: "25%", // Default width for larger screens
+                "@media (max-width: 580px)": {
+                  width: "100%", // Full width for small screens
+                },
+              }}
+            >
+              <InputLabel
+                sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
+                id="district-select-label"
+              >
+                {t("MASTER.DISTRICTS")}
+              </InputLabel>
+              <Select
+                labelId="district-select-label"
+                id="district-select"
+                value={selectedDistrict}
+                onChange={handleDistrictChange}
+              >
+                {districtData.map((districtDetail) => (
+                  <MenuItem
+                    key={districtDetail.value}
+                    value={districtDetail.value}
+                  >
+                    {transformLabel(districtDetail.label)}
                   </MenuItem>
-                </Select>
-              </FormControl>
-            </Box>
-
-            <Box sx={{ width: "100%" }}>
-              <FormControl sx={{ width: "100%" }}>
-                <InputLabel
-                  sx={{ backgroundColor: "#F7F7F7", padding: "2px 8px" }}
-                  id="district-select-label"
-                >
-                  {t("MASTER.DISTRICTS")}
-                </InputLabel>
-                <Select
-                  labelId="district-select-label"
-                  id="district-select"
-                  value={selectedDistrict}
-                  onChange={handleDistrictChange}
-                >
-                  {districtData.map((districtDetail) => (
-                    <MenuItem
-                      key={districtDetail.value}
-                      value={districtDetail.value}
-                    >
-                      {transformLabel(districtDetail.label)}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Box>
+                ))}
+              </Select>
+            </FormControl>
           </Box>
 
           <Box sx={{ marginTop: 2 }}>

diff --git a/src/services/MasterDataService.ts b/src/services/MasterDataService.ts
@@ -80,6 +80,7 @@ export const getBlocksForDistricts = async ({
   offset,
   controllingfieldfk,
   fieldName,
+  optionName,
   sort,
 }: {
   limit: number;
@@ -90,18 +91,36 @@ export const getBlocksForDistricts = async ({
   sort?: [string, string];
 }): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read`;
+
+  const requestBody: {
+    limit: number;
+    offset: number;
+    controllingfieldfk?: string;
+    fieldName: string;
+    optionName?: string;
+    sort?: [string, string];
+  } = {
+    limit,
+    offset,
+    fieldName,
+  };
+
+  if (controllingfieldfk) {
+    requestBody.controllingfieldfk = controllingfieldfk;
+  }
+  if (optionName) {
+    requestBody.optionName = optionName;
+  }
+  if (sort) {
+    requestBody.sort = sort;
+  }
+
   try {
-    const response = await post(apiUrl, {
-      limit,
-      offset,
-      controllingfieldfk,
-      fieldName,
-      sort,
-    });
+    const response = await post(apiUrl, requestBody);
     return response?.data;
   } catch (error) {
-    console.error("Error fetching district data", error);
-    return error;
+    console.error("Error fetching blocks for districts", error);
+    throw error;
   }
 };
 
@@ -145,7 +164,7 @@ export const createOrUpdateOption = async (
   fieldId: string,
   fieldParams: {
     options: { name: string; value: string; controllingfieldfk?: string }[];
-  },
+  }
   // stateId?: string
 ): Promise<any> => {
   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/update/${fieldId}`;

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -70,4 +70,8 @@ legend.Mui-focused {
 /* To hide the empty menu item */
 ul.MuiList-root li.MuiMenuItem-root[data-value=""] {
   display: none !important;
-}
+}
+
+.Toastify__toast-icon svg {
+  fill: #fff !important;
+}