Skip to content

Commit

Permalink
Integrated show district api and no found data added in ka-table, add…
Browse files Browse the repository at this point in the history 
…ed in utils
  • Loading branch information
@rahulg1254
rahulg1254 committed Jul 29, 2024
1 parent 99d11d6 commit 6e24881
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 105 deletions.
13 changes: 8 additions & 5 deletions src/components/KaTableComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ interface KaTableComponentProps {
}[];
paginationEnable?: boolean;
showIcons?: boolean;
noData?: boolean;
}

const KaTableComponent: React.FC<KaTableComponentProps> = ({
Expand All @@ -43,6 +44,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
onDelete,
showIcons,
pageSizes,
noData,
}) => {
const [selectedRowIds, setSelectedRowIds] = useState<number[]>([]);

Expand All @@ -68,7 +70,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
{...tableProps}
paging={{
enabled: paginationEnable,
pageIndex: 0,
pageIndex: offset,
pageSize: limit,
pageSizes: pageSizes,
position: PagingPosition.Bottom,
Expand All @@ -94,10 +96,8 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
if (props.column.key === "selection-cell") {
return (
<Checkbox
checked={selectedRowIds.includes(props.rowData.userId)}
onChange={() =>
handleCheckboxChange(props.rowData.userId)
}
checked={selectedRowIds.includes(props.rowData.id)}
onChange={() => handleCheckboxChange(props.rowData.id)}
/>
);
}
Expand All @@ -110,6 +110,9 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
},
},
}}
noData={{
text: "No Data Found",
}}
/>
</div>
</Paper>
Expand Down
153 changes: 88 additions & 65 deletions src/pages/district.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,27 @@ import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import PageSizeSelector from "@/components/PageSelector";
import { useTranslation } from "next-i18next";
import { getDistrictList, getStateBlockDistrictList } from "@/services/MasterDataService";
import Image from "next/image";
import glass from "../../public/images/empty_hourglass.svg";
import CustomModal from "@/components/CustomModal";
import ConfirmationModal from "@/components/ConfirmationModal";
import { Typography } from "@mui/material";
import { SortDirection, DataType } from "ka-table/enums";
import {
getStateBlockDistrictList,
getDistrictsForState,
} from "@/services/MasterDataService";
import formatLabel from "@/utils/formatLabel";

type StateDetail = {
value: string;
label: string;
};

type DistrictDetail = {
value: string;
label: string;
};

const District: React.FC = () => {
const { t } = useTranslation();
const [selectedState, setSelectedState] = useState<string>("");
const [selectedDistrict, setSelectedDistrict] = useState<string>("-");
const [selectedSort, setSelectedSort] = useState<string>("Sort");
const [pageOffset, setPageOffset] = useState<number>(0);
const [pageLimit, setPageLimit] = useState<number>(10);
Expand All @@ -46,6 +46,8 @@ const District: React.FC = () => {
const [selectedDistrictForDelete, setSelectedDistrictForDelete] =
useState<DistrictDetail | null>(null);

const [selectedDistrict, setSelectedDistrict] = useState<string>("");

const columns = useMemo(
() => [
{
Expand Down Expand Up @@ -91,10 +93,14 @@ const District: React.FC = () => {
async (event: SelectChangeEvent<string>) => {
const selectedState = event.target.value;
setSelectedState(selectedState);

try {
const data = await getDistrictList(selectedState);
const data = await getDistrictsForState({
controllingfieldfk: selectedState,
fieldName: "districts",
});
setDistrictData(data.result || []);
setSelectedDistrict(data.result[0]?.label || "-");
setSelectedDistrict("-");
} catch (error) {
console.error("Error fetching district data", error);
}
Expand Down Expand Up @@ -122,44 +128,53 @@ const District: React.FC = () => {
setConfirmationModalOpen(false);
}, [selectedDistrictForDelete]);

const handleFilterChange = useCallback(
async (event: SelectChangeEvent<string>) => {
console.log(event.target.value);
setSelectedFilter(event.target.value);
},
[]
);
const handleFilterChange = useCallback((event: SelectChangeEvent<string>) => {
console.log(event.target.value);
setSelectedFilter(event.target.value);
}, []);

useEffect(() => {
const fetchStateData = async () => {
try {
const object=
{

"controllingfieldfk": selectedState,

"fieldName": "districts"

}
const data = await getStateBlockDistrictList(object);
setStateData(data.result || []);
const initialSelectedState = data.result[0]?.value || "";
setSelectedState(initialSelectedState);
const districtData = await getDistrictList(initialSelectedState);
setDistrictData(districtData.result || []);
setSelectedDistrict(districtData.result[0]?.label || "-");
const data = await getStateBlockDistrictList({ fieldName: "states" });
if (data?.result) {
setStateData(data.result);
const initialSelectedState = data.result[0]?.value || "";
setSelectedState(initialSelectedState);

const initialDistrictData = await getDistrictsForState({
controllingfieldfk: initialSelectedState,
fieldName: "districts",
});
if (initialDistrictData?.result) {
setDistrictData(initialDistrictData.result);
} else {
console.error(
"No initial district data returned:",
initialDistrictData
);
setDistrictData([]);
}
} else {
console.error("No state data returned:", data);
setStateData([]);
}
} catch (error) {
console.error("Error fetching state data", error);
setStateData([]);
}
};

fetchStateData();
}, []);

const handleSearch = (keyword: string) => {};

useEffect(() => {
const sortAndPaginateData = () => {
if (districtData.length === 0) {
setSortedDistricts([]);
setPageCount(1);
return;
}
const sorted = [...districtData].sort((a, b) =>
sortDirection === "asc"
? a.label.localeCompare(b.label)
Expand All @@ -170,7 +185,7 @@ const District: React.FC = () => {
(pageOffset + 1) * pageLimit
);
setSortedDistricts(paginatedData);
setPageCount(Math.ceil(districtData.length / pageLimit));
setPageCount(Math.ceil(sorted.length / pageLimit));
};

sortAndPaginateData();
Expand All @@ -182,16 +197,17 @@ const District: React.FC = () => {
selectedSort,
handleStateChange,
handleSortChange,
states: stateData.map((state) => state.label) || [],
states: stateData.map((state) => state.value) || [],
districts: districtData.map((district) => district.label) || [],
selectedState,
selectedDistrict,
showStateDropdown: false,
selectedFilter,
handleFilterChange,
handleSearch,
handleSearch: () => {},
};

const showPagination = sortedDistricts.length > 10;

return (
<React.Fragment>
<CustomModal
Expand All @@ -205,41 +221,48 @@ const District: React.FC = () => {
<Box>{t("COMMON.ARE_YOU_SURE_DELETE")}</Box>
</CustomModal>
<HeaderComponent {...userProps}>
{districtData.length > 0 ? (
<KaTableComponent
columns={columns}
data={sortedDistricts.map((districtDetail) => ({
label:
districtDetail.label
?.toLocaleLowerCase()
.charAt(0)
.toUpperCase() +
districtDetail.label?.toLocaleLowerCase().slice(1),
actions: "Action buttons",
}))}
limit={pageLimit}
offset={pageOffset}
PagesSelector={() => (
<Box display="flex" gap={2}>
<FormControl variant="outlined" sx={{ minWidth: 220 }}>
<InputLabel id="state-select-label">{t("MASTER.STATE")}</InputLabel>
<Select
labelId="state-select-label"
id="state-select"
value={selectedState}
onChange={handleStateChange}
label={t("MASTER.STATE")}
>
{stateData.map((state) => (
<MenuItem key={state.value} value={state.value}>
{formatLabel(state.label)}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
<KaTableComponent
columns={columns}
data={sortedDistricts.map((districtDetail) => ({
label: formatLabel(districtDetail.label),
actions: "Action buttons",
}))}
limit={pageLimit}
offset={pageOffset}
PagesSelector={() =>
showPagination && (
<Pagination
color="primary"
count={pageCount}
page={pageOffset + 1}
onChange={handlePaginationChange}
/>
)}
PageSizeSelector={PageSizeSelectorFunction}
extraActions={[]}
onEdit={handleEdit}
onDelete={handleDelete}
/>
) : (
<Box display="flex" alignItems="center" justifyContent="center">
<Image src={glass} alt="" />
<Typography marginTop="10px">
{t("COMMON.NO_DATA_FOUND")}
</Typography>
</Box>
)}
)
}
PageSizeSelector={PageSizeSelectorFunction}
extraActions={[]}
onEdit={handleEdit}
onDelete={handleDelete}
noData={!!(sortedDistricts.length === 0 ? "No Data Found" : "")}
/>
</HeaderComponent>
</React.Fragment>
);
Expand Down
43 changes: 24 additions & 19 deletions src/pages/state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,20 @@ const State: React.FC = () => {
const [pageLimit, setPageLimit] = useState<number>(10);
const [stateData, setStateData] = useState<StateDetail[]>([]);
const [selectedSort, setSelectedSort] = useState<string>("Sort");
const [sortBy, setSortBy] = useState<["label", "asc" | "desc"]>(["label", "asc"]);
const [sortBy, setSortBy] = useState<["label", "asc" | "desc"]>([
"label",
"asc",
]);
const [pageCount, setPageCount] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const [selectedFilter, setSelectedFilter] = useState<string>("All");
const [loading, setLoading] = useState<boolean>(true);

// Modal state
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
const [selectedState, setSelectedState] = useState<StateDetail | null>(null);
const [confirmButtonDisable, setConfirmButtonDisable] = useState<boolean>(false);
const [confirmButtonDisable, setConfirmButtonDisable] =
useState<boolean>(false);
const [selectedReason, setSelectedReason] = useState<string>("");
const [otherReason, setOtherReason] = useState<string>("");

Expand Down Expand Up @@ -110,14 +114,11 @@ const State: React.FC = () => {
const fetchStateData = async () => {
try {
setLoading(true);
const object=
{

"controllingfieldfk": selectedState,

"fieldName": "districts"

}
const object = {
controllingfieldfk: selectedState,

fieldName: "districts",
};
const data = await getStateBlockDistrictList(object);
const sortedData = [...data.result].sort((a, b) => {
const [field, order] = sortBy;
Expand Down Expand Up @@ -166,6 +167,8 @@ const State: React.FC = () => {
]
);

const showPagination = stateData.length > 10;

return (
<div>
<HeaderComponent {...userProps} handleSearch={handleSearch}>
Expand All @@ -181,14 +184,16 @@ const State: React.FC = () => {
}))}
limit={pageLimit}
offset={pageOffset}
PagesSelector={() => (
<Pagination
color="primary"
count={pageCount}
page={pageOffset + 1}
onChange={handlePaginationChange}
/>
)}
PagesSelector={() =>
showPagination && (
<Pagination
color="primary"
count={pageCount}
page={pageOffset + 1}
onChange={handlePaginationChange}
/>
)
}
PageSizeSelector={() => (
<PageSizeSelector
handleChange={handleChange}
Expand Down
Loading

0 comments on commit 6e24881

Please sign in to comment.