Skip to content

Commit

Permalink
Merge pull request #70 from pmulik34/develop
Browse files Browse the repository at this point in the history 
Resolved UI issues related to modal and table
  • Loading branch information
@ankush-maherwal
ankush-maherwal authored Sep 18, 2024
2 parents fe3c648 + a62a30a commit 8491904
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 54 deletions.
104 changes: 78 additions & 26 deletions packages/admin/src/components/DownloadCsv.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,17 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
if (!dropdownValues.stateDropdown) return; // Check for selected state
try {
const token = sessionStorage.getItem("token");
const districts = await fetchDistricts(token, dropdownValues.stateDropdown);
const districts = await fetchDistricts(
token,
dropdownValues.stateDropdown
);
setDistrictOptions(districts);

const blocks = await fetchBlocks(token, dropdownValues.stateDropdown);
setBlockOptions(blocks);

const schools = await fetchSchools(token, dropdownValues.stateDropdown);
setSchoolOptions(schools);

} catch (error) {
console.error("Error loading districts:", error);
}
Expand All @@ -120,9 +122,12 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
try {
const token = sessionStorage.getItem("token");

const blocks = await fetchBlocks(token,dropdownValues.stateDropdown, dropdownValues.districtDropdown);
const blocks = await fetchBlocks(
token,
dropdownValues.stateDropdown,
dropdownValues.districtDropdown
);
setBlockOptions(blocks);

} catch (error) {
console.error("Error loading blocks:", error);
}
Expand All @@ -135,7 +140,12 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
const loadSchools = async () => {
try {
const token = sessionStorage.getItem("token");
const schools = await fetchSchools(token, dropdownValues.stateDropdown, dropdownValues.districtDropdown, dropdownValues.blockDropdown);
const schools = await fetchSchools(
token,
dropdownValues.stateDropdown,
dropdownValues.districtDropdown,
dropdownValues.blockDropdown
);
setSchoolOptions(schools);
} catch (error) {
console.error("Error loading schools:", error);
Expand All @@ -150,7 +160,10 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
if (!dropdownValues.schoolNameDropdown) return; // Only fetch if a schoolNameDropdown is selected
try {
const token = sessionStorage.getItem("token");
const classes = await fetchClasses(token, dropdownValues.schoolNameDropdown);
const classes = await fetchClasses(
token,
dropdownValues.schoolNameDropdown
);
console.log("classes", classes);
setClassOptions(classes);
} catch (error) {
Expand All @@ -161,6 +174,18 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
}, [dropdownValues.schoolNameDropdown]);

const handleDownload = () => {
// Ensure at least one dropdown value is selected before allowing download
if (
!dropdownValues.stateDropdown &&
!dropdownValues.districtDropdown &&
!dropdownValues.blockDropdown &&
!dropdownValues.schoolNameDropdown &&
!dropdownValues.classNameDropdown
) {
alert("Please select at least one filter before downloading.");
return false; // Prevent download if no filters are selected
}

let filteredData = rowData;

// Filter data based on selected dropdowns
Expand Down Expand Up @@ -248,21 +273,41 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
setCsvFilename(filename);
};

// Disable download button if no selections are made
const isDownloadDisabled =
!dropdownValues.stateDropdown &&
!dropdownValues.districtDropdown &&
!dropdownValues.blockDropdown &&
!dropdownValues.schoolNameDropdown &&
!dropdownValues.classNameDropdown;

const handleChange = (event, value, name) => {
const dropdownOrder = ['stateDropdown', 'districtDropdown', 'blockDropdown', 'schoolNameDropdown', 'classNameDropdown'];
const dropdownOrder = [
"stateDropdown",
"districtDropdown",
"blockDropdown",
"schoolNameDropdown",
"classNameDropdown",
];
const changeIndex = dropdownOrder.indexOf(name);
const newDropdownValues = { ...dropdownValues, [name]: value };
dropdownOrder.forEach((key, index) => {
if (index > changeIndex) {
newDropdownValues[key] = null;
}
if (index > changeIndex) {
newDropdownValues[key] = null;
}
});
setDropdownValues(newDropdownValues);
};

};

const handleRadioChange = (event) => {
setDownloadType(event.target.value);
setDropdownValues({
stateDropdown: null,
districtDropdown: null,
blockDropdown: null,
schoolNameDropdown: null,
classNameDropdown: null,
});
};

const handleModalClose = () => {
Expand Down Expand Up @@ -343,7 +388,9 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
disablePortal
options={stateOptions}
value={dropdownValues.stateDropdown}
onChange={(event, value) => handleChange(event, value, "stateDropdown")}
onChange={(event, value) =>
handleChange(event, value, "stateDropdown")
}
sx={{ width: "100%" }}
renderInput={(params) => (
<TextField {...params} label="Select State" />
Expand All @@ -357,7 +404,9 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
disablePortal
options={districtOptions}
value={dropdownValues.districtDropdown}
onChange={(event, value) => handleChange(event, value, "districtDropdown")}
onChange={(event, value) =>
handleChange(event, value, "districtDropdown")
}
sx={{ width: "100%" }}
renderInput={(params) => (
<TextField {...params} label="Select District" />
Expand All @@ -371,7 +420,9 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
disablePortal
options={blockOptions}
value={dropdownValues.blockDropdown}
onChange={(event, value) => handleChange(event, value, "blockDropdown")}
onChange={(event, value) =>
handleChange(event, value, "blockDropdown")
}
sx={{ width: "100%" }}
renderInput={(params) => (
<TextField {...params} label="Select Block" />
Expand All @@ -385,7 +436,9 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
disablePortal
options={schoolOptions}
value={dropdownValues.schoolNameDropdown} // Manage this state accordingly
onChange={(event, value) => handleChange(event, value, "schoolNameDropdown")}
onChange={(event, value) =>
handleChange(event, value, "schoolNameDropdown")
}
sx={{ width: "100%" }}
renderInput={(params) => (
<TextField {...params} label="Select School" />
Expand All @@ -399,7 +452,9 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
disablePortal
options={classOptions}
value={dropdownValues.classNameDropdown}
onChange={(event, value) => handleChange(event, value, "classNameDropdown")}
onChange={(event, value) =>
handleChange(event, value, "classNameDropdown")
}
sx={{ width: "100%" }}
renderInput={(params) => (
<TextField {...params} label="Select Class" />
Expand All @@ -408,20 +463,17 @@ const DownloadCsv = ({ open, handleClose, rowData }) => {
</Box>

{/* Action buttons */}
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4 }}>
<Button
variant="outlined"
onClick={handleModalClose}
startIcon={<CloseIcon />}
>
Close
</Button>
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 4 }}>
<CSVLink
data={csvData}
filename={csvFilename}
onClick={handleDownload}
>
<Button variant="outlined" startIcon={<DownloadIcon />}>
<Button
variant="outlined"
disabled={isDownloadDisabled}
startIcon={<DownloadIcon />}
>
Download
</Button>
</CSVLink>
Expand Down
16 changes: 6 additions & 10 deletions packages/admin/src/components/DownloadStudentDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const DownloadStudentDetails = ({ open, handleClose, rowData }) => {

if (!selectedStudent) {
alert("No student found for the selected username.");
return;
return false;
}

// Prepare CSV data based on the selected download type
Expand Down Expand Up @@ -111,6 +111,9 @@ const DownloadStudentDetails = ({ open, handleClose, rowData }) => {

const handleRadioChange = (event) => {
setDownloadType(event.target.value);
setDropdownValues({
dropdown1: null,
});
};

// Reset the state when modal is closed
Expand Down Expand Up @@ -197,20 +200,13 @@ const DownloadStudentDetails = ({ open, handleClose, rowData }) => {
</Box>

{/* Action buttons */}
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4 }}>
<Button
variant="outlined"
onClick={handleModalClose}
startIcon={<CloseIcon />}
>
Close
</Button>
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 4 }}>
<CSVLink
data={csvData}
filename={csvFilename}
onClick={handleDownload}
>
<Button variant="outlined" startIcon={<DownloadIcon />}>
<Button variant="outlined" disabled={!dropdownValues.dropdown1} startIcon={<DownloadIcon />}>
Download
</Button>
</CSVLink>
Expand Down
3 changes: 2 additions & 1 deletion packages/admin/src/components/SchoolListView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,8 @@ function SchoolListView() {
animateRows={true}
onCellClicked={cellClickedListener}
pagination={true}
paginationAutoPageSize={true}
// paginationAutoPageSize={true}
paginationPageSize={5}
overlayNoRowsTemplate={'<span>Loading School records....</span>'}
></AgGridReact>{" "}
</div>
Expand Down
55 changes: 45 additions & 10 deletions packages/admin/src/components/StudentFilters.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ const StudentFilters = ({ handleFiltersChange }) => {
if (!dropdownValues.stateDropdown) return;
try {
const token = sessionStorage.getItem("token");
const districts = await fetchDistricts(token, dropdownValues.stateDropdown);
const districts = await fetchDistricts(
token,
dropdownValues.stateDropdown
);
setDistrictOptions(districts);

const blocks = await fetchBlocks(token, dropdownValues.stateDropdown);
Expand Down Expand Up @@ -137,7 +140,10 @@ const StudentFilters = ({ handleFiltersChange }) => {
if (!dropdownValues.schoolNameDropdown) return;
try {
const token = sessionStorage.getItem("token");
const classes = await fetchClasses(token, dropdownValues.schoolNameDropdown);
const classes = await fetchClasses(
token,
dropdownValues.schoolNameDropdown
);
setClassOptions(classes);
} catch (error) {
console.error("Error loading classes:", error);
Expand All @@ -147,10 +153,29 @@ const StudentFilters = ({ handleFiltersChange }) => {
}, [dropdownValues.schoolNameDropdown]);

const handleChange = (event, value, name) => {
const updatedDropdownValues = { ...dropdownValues, [name]: value };
setDropdownValues(updatedDropdownValues);
const dropdownOrder = [
"stateDropdown",
"districtDropdown",
"blockDropdown",
"schoolNameDropdown",
"classNameDropdown",
];

const changedDropdownIndex = dropdownOrder.indexOf(name);
const updatedDropdownValues = dropdownOrder.reduce(
(acc, dropdown, index) => {
if (index <= changedDropdownIndex) {
acc[dropdown] =
index === changedDropdownIndex ? value : acc[dropdown];
} else {
acc[dropdown] = null;
}
return acc;
},
{ ...dropdownValues }
);

// Call the callback function to notify parent component about the change
setDropdownValues(updatedDropdownValues);
handleFiltersChange(updatedDropdownValues);
};

Expand All @@ -162,7 +187,9 @@ const StudentFilters = ({ handleFiltersChange }) => {
disablePortal
options={stateOptions}
value={dropdownValues.stateDropdown}
onChange={(event, value) => handleChange(event, value, "stateDropdown")}
onChange={(event, value) =>
handleChange(event, value, "stateDropdown")
}
renderInput={(params) => (
<TextField
{...params}
Expand All @@ -181,7 +208,9 @@ const StudentFilters = ({ handleFiltersChange }) => {
disablePortal
options={districtOptions}
value={dropdownValues.districtDropdown}
onChange={(event, value) => handleChange(event, value, "districtDropdown")}
onChange={(event, value) =>
handleChange(event, value, "districtDropdown")
}
renderInput={(params) => (
<TextField
{...params}
Expand All @@ -200,7 +229,9 @@ const StudentFilters = ({ handleFiltersChange }) => {
disablePortal
options={blockOptions}
value={dropdownValues.blockDropdown}
onChange={(event, value) => handleChange(event, value, "blockDropdown")}
onChange={(event, value) =>
handleChange(event, value, "blockDropdown")
}
renderInput={(params) => (
<TextField
{...params}
Expand All @@ -219,7 +250,9 @@ const StudentFilters = ({ handleFiltersChange }) => {
disablePortal
options={schoolOptions}
value={dropdownValues.schoolNameDropdown}
onChange={(event, value) => handleChange(event, value, "schoolNameDropdown")}
onChange={(event, value) =>
handleChange(event, value, "schoolNameDropdown")
}
renderInput={(params) => (
<TextField
{...params}
Expand All @@ -238,7 +271,9 @@ const StudentFilters = ({ handleFiltersChange }) => {
disablePortal
options={classOptions}
value={dropdownValues.classNameDropdown}
onChange={(event, value) => handleChange(event, value, "classNameDropdown")}
onChange={(event, value) =>
handleChange(event, value, "classNameDropdown")
}
renderInput={(params) => (
<TextField
{...params}
Expand Down
Loading

0 comments on commit 8491904

Please sign in to comment.