From a9840c323c86d8b04b1c82cae12bd6503a48d0c6 Mon Sep 17 00:00:00 2001 From: rahul_g Date: Mon, 29 Jul 2024 18:27:44 +0530 Subject: [PATCH] Updated block,state,district component --- src/components/HeaderComponent.tsx | 2 - src/components/KaTableComponent.tsx | 2 +- src/pages/block.tsx | 415 +++++++++++++++------------- src/pages/state.tsx | 78 ++---- src/services/MasterDataService.ts | 57 ++-- 5 files changed, 267 insertions(+), 287 deletions(-) diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index f793787d..daa7f7f2 100644 --- a/src/components/HeaderComponent.tsx +++ b/src/components/HeaderComponent.tsx @@ -13,8 +13,6 @@ import { useTheme } from "@mui/material/styles"; import { useTranslation } from "next-i18next"; import { useEffect, useState } from "react"; import { - getBlockList, - getDistrictList, getStateBlockDistrictList, } from "../services/MasterDataService"; import AreaSelection from "./AreaSelection"; diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx index 9535a68e..08211a78 100644 --- a/src/components/KaTableComponent.tsx +++ b/src/components/KaTableComponent.tsx @@ -28,7 +28,7 @@ interface KaTableComponentProps { }[]; paginationEnable?: boolean; showIcons?: boolean; - noData?: boolean; + noData?: any; } const KaTableComponent: React.FC = ({ diff --git a/src/pages/block.tsx b/src/pages/block.tsx index d7d06b8f..1293a365 100644 --- a/src/pages/block.tsx +++ b/src/pages/block.tsx @@ -8,58 +8,108 @@ import FormControl from "@mui/material/FormControl"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import Select, { SelectChangeEvent } from "@mui/material/Select"; -import PageSizeSelector from "@/components/PageSelector"; import { useTranslation } from "next-i18next"; -import { useMediaQuery } from "@mui/material"; import Loader from "@/components/Loader"; -import Image from "next/image"; -import glass from "../../public/images/empty_hourglass.svg"; -import Typography from "@mui/material/Typography"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { + getStateBlockDistrictList, + getDistrictsForState, + getBlocksForDistricts, +} from "@/services/MasterDataService"; +import formatLabel from "@/utils/formatLabel"; +import CustomModal from "@/components/CustomModal"; -// Static Data -const staticStateData = [ - { value: "MH", label: "MAHARASHTRA" }, - { value: "KA", label: "KARNATAKA" }, -]; +type StateDetail = { + value: string; + label: string; +}; -const staticDistrictData = [ - { value: "D1", label: "Pune" }, - { value: "D2", label: "Mumbai" }, -]; +type DistrictDetail = { + value: string; + label: string; +}; -const staticBlockData = [{ label: "Hinjewadi" }, { label: "Baner" }]; +type BlockDetail = { + value: string; + label: string; +}; const Block: React.FC = () => { const { t } = useTranslation(); - const [selectedState, setSelectedState] = useState("MH"); - const [selectedDistrict, setSelectedDistrict] = useState("D1"); - const [selectedSort, setSelectedSort] = useState(t("MASTER.SORT")); + const [selectedSort, setSelectedSort] = useState("Sort"); + const [selectedState, setSelectedState] = useState(""); + const [selectedDistrict, setSelectedDistrict] = useState(""); + const [stateData, setStateData] = useState([]); + const [selectedFilter, setSelectedFilter] = useState("All"); + const [districtData, setDistrictData] = useState([]); + const [blockData, setBlockData] = useState([]); + const [loading, setLoading] = useState(true); const [pageOffset, setPageOffset] = useState(0); const [pageLimit, setPageLimit] = useState(10); - const [stateData] = useState(staticStateData); - const [districtData] = useState(staticDistrictData); - const [blockData, setBlockData] = useState(staticBlockData); - const [pageSize, setPageSize] = useState(10); - const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc"); - const [selectedFilter, setSelectedFilter] = useState("All"); - const [loading, setLoading] = useState(true); - const isMobile = useMediaQuery("(max-width:600px)"); - const isMediumScreen = useMediaQuery("(max-width:986px)"); + const [pageCount, setPageCount] = useState(1); + const [confirmationModalOpen, setConfirmationModalOpen] = + useState(false); + const [selectedDistrictForDelete, setSelectedDistrictForDelete] = + useState(null); useEffect(() => { - const fetchData = () => { + const fetchStates = async () => { setLoading(true); - // Simulate fetching data - setTimeout(() => { - setBlockData(staticBlockData); + try { + const data = await getStateBlockDistrictList({ fieldName: "states" }); + setStateData(data?.result || []); + } catch (error) { + console.error("Error fetching states", error); + } finally { setLoading(false); - }, 1000); + } }; - fetchData(); + fetchStates(); }, []); + useEffect(() => { + const fetchDistricts = async () => { + if (selectedState) { + setLoading(true); + try { + const data = await getDistrictsForState({ + controllingfieldfk: selectedState, + fieldName: "districts", + }); + setDistrictData(data?.result || []); + } catch (error) { + console.error("Error fetching districts", error); + } finally { + setLoading(false); + } + } + }; + + fetchDistricts(); + }, [selectedState]); + + useEffect(() => { + const fetchBlocks = async () => { + if (selectedDistrict) { + setLoading(true); + try { + const data = await getBlocksForDistricts({ + controllingfieldfk: selectedDistrict, + fieldName: "blocks", + }); + setBlockData(data?.result || []); + } catch (error) { + console.error("Error fetching blocks", error); + } finally { + setLoading(false); + } + } + }; + + fetchBlocks(); + }, [selectedDistrict]); + const columns = useMemo( () => [ { @@ -73,196 +123,173 @@ const Block: React.FC = () => { dataType: DataType.String, }, ], - [t], - ); - - const handleChange = useCallback((event: SelectChangeEvent) => { - setPageSize(Number(event.target.value)); - setPageLimit(Number(event.target.value)); - }, []); - - const handlePaginationChange = useCallback( - (event: React.ChangeEvent, value: number) => { - setPageOffset(value - 1); - }, - [], - ); - - const PageSizeSelectorFunction = useCallback( - () => ( - - ), - [handleChange, pageSize], + [t] ); const handleStateChange = useCallback((event: SelectChangeEvent) => { setSelectedState(event.target.value); + setSelectedDistrict(""); }, []); const handleDistrictChange = useCallback( (event: SelectChangeEvent) => { setSelectedDistrict(event.target.value); }, - [], + [] ); - const handleSortChange = useCallback((event: SelectChangeEvent) => { - const sortValue = event.target.value; - setSelectedSort(sortValue); - setSortDirection(sortValue === "Z-A" ? "desc" : "asc"); - }, []); - - const handleFilterChange = useCallback((event: SelectChangeEvent) => { - setSelectedFilter(event.target.value); - }, []); - const handleEdit = useCallback((rowData: any) => { - console.log("Edit row:", rowData); }, []); const handleDelete = useCallback((rowData: any) => { - console.log("Delete row:", rowData); }, []); - const sortedBlocks = [...blockData].sort((a, b) => - sortDirection === "asc" - ? a.label.localeCompare(b.label) - : b.label.localeCompare(a.label), - ); - const paginatedData = sortedBlocks.slice( - pageOffset * pageLimit, - (pageOffset + 1) * pageLimit, - ); - const handleSearch = (keyword: string) => {}; + const handleConfirmDelete = useCallback(() => { + setConfirmationModalOpen(false); + }, [selectedDistrictForDelete]); + + const handlePaginationChange = ( + event: React.ChangeEvent, + value: number + ) => { + setPageOffset(value - 1); + }; + + useEffect(() => { + const sortedAndPaginatedData = () => { + if (blockData.length === 0) { + setPageCount(1); + return; + } + const sortedData = [...blockData]; + const paginatedData = sortedData.slice( + pageOffset * pageLimit, + (pageOffset + 1) * pageLimit + ); + setPageCount(Math.ceil(sortedData.length / pageLimit)); + }; + + sortedAndPaginatedData(); + }, [blockData, pageOffset, pageLimit]); const userProps = { - userType: t("MASTER.BLOCKS"), - searchPlaceHolder: t("MASTER.SEARCHBAR_PLACEHOLDER_BLOCK"), selectedSort, - handleStateChange, - handleSortChange, - handleDistrictChange, - states: stateData.map((state) => ({ - value: state.value, - label: state.label, - })), - districts: districtData.map((district) => ({ - value: district.value, - label: district.label, - })), - selectedState, - selectedDistrict, - showStateDropdown: false, selectedFilter, - handleFilterChange, - handleSearch: handleSearch, + showStateDropdown: false, + userType: t("MASTER.BLOCKS"), + searchPlaceHolder: t("MASTER.SEARCHBAR_PLACEHOLDER_BLOCK"), }; + const showPagination = blockData.length > pageLimit; + return ( + setConfirmationModalOpen(false)} + title={t("COMMON.CONFIRM_DELETE")} + primaryBtnText={t("COMMON.DELETE")} + secondaryBtnText={t("COMMON.CANCEL")} + primaryBtnClick={handleConfirmDelete} + > + {t("COMMON.ARE_YOU_SURE_DELETE")} + + - {loading ? ( - - ) : blockData.length === 0 ? ( - - - {t("COMMON.NO_DATA_FOUND")} - - ) : ( - <> - - - - - States - - - - - - - - Districts - - - - + <> + + + + + {t("MASTER.STATE")} + + + - ({ - block: block.label, - actions: "Action buttons", - }))} - limit={pageLimit} - offset={pageOffset} - PagesSelector={() => ( - - )} - PageSizeSelector={PageSizeSelectorFunction} - extraActions={[]} - onEdit={handleEdit} - onDelete={handleDelete} - /> - - )} + + + + {t("MASTER.DISTRICTS")} + + + + + + + + {loading ? ( + + ) : ( + ({ + block: formatLabel(block.label), + actions: "Action buttons", + }))} + limit={pageLimit} + offset={pageOffset} + PagesSelector={() => + showPagination && ( + + ) + } + extraActions={[]} + onEdit={handleEdit} + onDelete={handleDelete} + noData={blockData.length === 0} + /> + )} + + ); diff --git a/src/pages/state.tsx b/src/pages/state.tsx index 4efeb379..3ab9d573 100644 --- a/src/pages/state.tsx +++ b/src/pages/state.tsx @@ -10,10 +10,8 @@ import { useTranslation } from "next-i18next"; import { getStateBlockDistrictList } from "@/services/MasterDataService"; import { SortDirection } from "ka-table/enums"; import Loader from "@/components/Loader"; -import Image from "next/image"; -import glass from "../../public/images/empty_hourglass.svg"; -import { Box, Typography } from "@mui/material"; -import DeleteUserModal from "@/components/DeleteUserModal"; // Import your DeleteUserModal component +import { Box } from "@mui/material"; +import CustomModal from "@/components/CustomModal"; type StateDetail = { label: string; @@ -21,8 +19,6 @@ type StateDetail = { const State: React.FC = () => { const { t } = useTranslation(); - - // State management const [pageOffset, setPageOffset] = useState(0); const [pageLimit, setPageLimit] = useState(10); const [stateData, setStateData] = useState([]); @@ -35,14 +31,12 @@ const State: React.FC = () => { const [pageSize, setPageSize] = useState(10); const [selectedFilter, setSelectedFilter] = useState("All"); const [loading, setLoading] = useState(true); - - // Modal state const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [selectedState, setSelectedState] = useState(null); - const [confirmButtonDisable, setConfirmButtonDisable] = + const [confirmationModalOpen, setConfirmationModalOpen] = useState(false); - const [selectedReason, setSelectedReason] = useState(""); - const [otherReason, setOtherReason] = useState(""); + const [selectedDistrictForDelete, setSelectedDistrictForDelete] = + useState(null); const columns = useMemo( () => [ @@ -81,32 +75,19 @@ const State: React.FC = () => { }, []); const handleFilterChange = useCallback((event: SelectChangeEvent) => { - setSelectedFilter(event.target.value as string); + setSelectedFilter(event.target.value); }, []); - const handleEdit = useCallback((rowData: any) => { - console.log("Edit row:", rowData); - }, []); + const handleEdit = useCallback((rowData: any) => {}, []); - const handleDelete = useCallback((rowData: any) => { - setSelectedState(rowData); // Set the selected state to be deleted - setIsDeleteModalOpen(true); // Open the delete confirmation modal + const handleDelete = useCallback((rowData: StateDetail) => { + setSelectedDistrictForDelete(rowData); + setConfirmationModalOpen(true); }, []); - const handleDeleteUser = useCallback(() => { - if (selectedState) { - // Add your delete logic here - console.log("Deleting user:", selectedState); - - // Close the modal after deletion - setIsDeleteModalOpen(false); - } - }, [selectedState]); - - const handleCloseDeleteModal = () => { - setIsDeleteModalOpen(false); - setSelectedState(null); - }; + const handleConfirmDelete = useCallback(() => { + setConfirmationModalOpen(false); + }, [selectedDistrictForDelete]); const handleSearch = (keyword: string) => {}; @@ -171,10 +152,21 @@ const State: React.FC = () => { return (
+ setConfirmationModalOpen(false)} + title={t("COMMON.CONFIRM_DELETE")} + primaryBtnText={t("COMMON.DELETE")} + secondaryBtnText={t("COMMON.CANCEL")} + primaryBtnClick={handleConfirmDelete} + > + {t("COMMON.ARE_YOU_SURE_DELETE")} + + {loading ? ( - ) : stateData.length !== 0 ? ( + ) : ( ({ @@ -205,28 +197,8 @@ const State: React.FC = () => { onEdit={handleEdit} onDelete={handleDelete} /> - ) : ( - - - - {t("COMMON.NO_DATA_FOUND")} - - )} - - {/* DeleteUserModal Component */} -
); }; diff --git a/src/services/MasterDataService.ts b/src/services/MasterDataService.ts index d23601ea..37423298 100644 --- a/src/services/MasterDataService.ts +++ b/src/services/MasterDataService.ts @@ -27,7 +27,6 @@ export const getStateBlockDistrictList = async ({ return error; } }; -// services/MasterDataService.ts export const getDistrictsForState = async ({ controllingfieldfk, fieldName, @@ -48,6 +47,26 @@ export const getDistrictsForState = async ({ } }; +export const getBlocksForDistricts = async ({ + controllingfieldfk, + fieldName, +}: { + controllingfieldfk: string; + fieldName: string; +}): Promise => { + const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read`; + try { + const response = await post(apiUrl, { + controllingfieldfk, + fieldName, + }); + return response?.data; + } catch (error) { + console.error("Error fetching district data", error); + return error; + } +}; + export const getCenterList = async ({ filters, limit, @@ -66,39 +85,3 @@ export const getCenterList = async ({ return error; } }; - -export const getDistrictList = async ( - state?: string | string[] -): Promise => { - let apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read/districts`; - - if (state) { - apiUrl += `?controllingfieldfk=${state}&context=USERS`; - } - - try { - const response = await get(apiUrl); - return response?.data; - } catch (error) { - console.error("error in fetching district list", error); - return error; - } -}; - -export const getBlockList = async ( - district?: string | string[] -): Promise => { - let apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/read/blocks`; - - if (district) { - apiUrl += `?controllingfieldfk=${district}&context=USERS`; - } - - try { - const response = await get(apiUrl); - return response?.data; - } catch (error) { - console.error("error in fetching block list", error); - return error; - } -};