From 38f9993fb33c0b5902b7a9c080d4ea337de6a3e0 Mon Sep 17 00:00:00 2001 From: rahul_g Date: Tue, 30 Jul 2024 17:09:09 +0530 Subject: [PATCH 1/4] added delete user to master --- src/pages/state.tsx | 88 +++++++++++++++++++++---------- src/services/MasterDataService.ts | 16 +++++- 2 files changed, 74 insertions(+), 30 deletions(-) diff --git a/src/pages/state.tsx b/src/pages/state.tsx index 51850854..f03d3247 100644 --- a/src/pages/state.tsx +++ b/src/pages/state.tsx @@ -1,21 +1,31 @@ import React, { useState, useEffect, useCallback, useMemo } from "react"; import KaTableComponent from "../components/KaTableComponent"; -import { DataType } from "ka-table/enums"; +import { DataType, SortDirection } from "ka-table/enums"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import HeaderComponent from "@/components/HeaderComponent"; import Pagination from "@mui/material/Pagination"; import { SelectChangeEvent } from "@mui/material/Select"; import PageSizeSelector from "@/components/PageSelector"; import { useTranslation } from "next-i18next"; -import { getStateBlockDistrictList } from "@/services/MasterDataService"; -import { SortDirection } from "ka-table/enums"; +import { + getStateBlockDistrictList, + deleteState, +} from "@/services/MasterDataService"; import Loader from "@/components/Loader"; -import { Box } from "@mui/material"; -import CustomModal from "@/components/CustomModal"; +import { + Box, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Button, +} from "@mui/material"; import { transformLabel } from "@/utils/Helper"; type StateDetail = { label: string; + value: string; }; const State: React.FC = () => { @@ -32,11 +42,9 @@ const State: React.FC = () => { const [pageSize, setPageSize] = useState(10); const [selectedFilter, setSelectedFilter] = useState("All"); const [loading, setLoading] = useState(true); - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const [selectedState, setSelectedState] = useState(null); - const [confirmationModalOpen, setConfirmationModalOpen] = + const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false); - const [selectedDistrictForDelete, setSelectedDistrictForDelete] = + const [selectedStateForDelete, setSelectedStateForDelete] = useState(null); const columns = useMemo( @@ -82,13 +90,27 @@ const State: React.FC = () => { const handleEdit = useCallback((rowData: any) => {}, []); const handleDelete = useCallback((rowData: StateDetail) => { - setSelectedDistrictForDelete(rowData); - setConfirmationModalOpen(true); + console.log("delete", rowData); + setSelectedStateForDelete(rowData); + setConfirmationDialogOpen(true); }, []); - const handleConfirmDelete = useCallback(() => { - setConfirmationModalOpen(false); - }, [selectedDistrictForDelete]); + const handleConfirmDelete = useCallback(async () => { + if (selectedStateForDelete) { + try { + await deleteState(selectedStateForDelete.value); + console.log("deleted from api", selectedStateForDelete.value); + setStateData((prevStateData) => + prevStateData.filter( + (state) => state.value !== selectedStateForDelete.value + ) + ); + } catch (error) { + console.error("Error deleting state", error); + } + } + setConfirmationDialogOpen(false); + }, [selectedStateForDelete]); const handleSearch = (keyword: string) => {}; @@ -96,12 +118,7 @@ const State: React.FC = () => { const fetchStateData = async () => { try { setLoading(true); - const object = { - controllingfieldfk: selectedState, - - fieldName: "districts", - }; - const data = await getStateBlockDistrictList(object); + const data = await getStateBlockDistrictList({ fieldName: "states" }); const sortedData = [...data.result].sort((a, b) => { const [field, order] = sortBy; return order === "asc" @@ -153,16 +170,28 @@ const State: React.FC = () => { return (
- setConfirmationModalOpen(false)} - title={t("COMMON.CONFIRM_DELETE")} - primaryBtnText={t("COMMON.DELETE")} - secondaryBtnText={t("COMMON.CANCEL")} - primaryBtnClick={handleConfirmDelete} + setConfirmationDialogOpen(false)} > - {t("COMMON.ARE_YOU_SURE_DELETE")} - + {t("COMMON.CONFIRM_DELETE")} + + + {t("COMMON.ARE_YOU_SURE_DELETE")} + + + + + + + {loading ? ( @@ -172,6 +201,7 @@ const State: React.FC = () => { columns={columns} data={stateData.map((stateDetail) => ({ label: transformLabel(stateDetail.label), + value: stateDetail.value, }))} limit={pageLimit} offset={pageOffset} diff --git a/src/services/MasterDataService.ts b/src/services/MasterDataService.ts index 37423298..4e11fec4 100644 --- a/src/services/MasterDataService.ts +++ b/src/services/MasterDataService.ts @@ -1,4 +1,4 @@ -import { get, post } from "./RestClient"; +import { deleteApi, get, post } from "./RestClient"; export interface StateListParam { limit?: number; // page: number; @@ -85,3 +85,17 @@ export const getCenterList = async ({ return error; } }; + +export const deleteState = async (option: string): Promise => { + const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/fields/options/delete/states?option=${option}`; + const requestBody = {}; + const requestHeaders = {}; + + try { + const response = await deleteApi(apiUrl, requestBody, requestHeaders); + return response?.data; + } catch (error) { + console.error("Error deleting state", error); + return error; + } +}; From 19f3a3bc02d27d01fa646b57532cc217e8a530bb Mon Sep 17 00:00:00 2001 From: rahul_g Date: Tue, 30 Jul 2024 17:41:11 +0530 Subject: [PATCH 2/4] responsive ui --- src/components/layouts/header/SearchBar.tsx | 13 ++++++++++--- src/pages/district.tsx | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/layouts/header/SearchBar.tsx b/src/components/layouts/header/SearchBar.tsx index 2f6e01ee..f0d9af94 100644 --- a/src/components/layouts/header/SearchBar.tsx +++ b/src/components/layouts/header/SearchBar.tsx @@ -1,5 +1,5 @@ import SearchIcon from "@mui/icons-material/Search"; -import { IconButton, InputBase, Paper } from "@mui/material"; +import { IconButton, InputBase, Paper, useMediaQuery } from "@mui/material"; import { styled } from "@mui/system"; import React, { useState } from "react"; @@ -12,8 +12,12 @@ const SearchBox = styled(Paper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", - width: 400, + width: "100%", + maxWidth: 400, borderRadius: "8px", + [theme.breakpoints.down("sm")]: { + maxWidth: "100%", + }, })); const StyledInputBase = styled(InputBase)(({ theme }) => ({ @@ -23,6 +27,9 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ const SearchBar: React.FC = ({ onSearch, placeholder }) => { const [keyword, setKeyword] = useState(""); + const isSmallScreen = useMediaQuery((theme: any) => + theme.breakpoints.down("sm") + ); const handleInputChange = (event: React.ChangeEvent) => { if (event.target.value === "") { @@ -44,7 +51,7 @@ const SearchBar: React.FC = ({ onSearch, placeholder }) => { return ( { - + {t("MASTER.STATE")}