-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4037 from unicef/PDU-updates-updates-list
Pdu updates frontend
- Loading branch information
Showing
21 changed files
with
657 additions
and
447 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
171 changes: 95 additions & 76 deletions
171
frontend/src/components/periodicDataUpdates/FieldsToUpdate.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,116 @@ | ||
| import { useState } from 'react'; | ||
| import React from 'react'; | ||
| import { FieldArray } from 'formik'; | ||
| import { | ||
| Table, | ||
| TableBody, | ||
| TableCell, | ||
| TableContainer, | ||
| TableHead, | ||
| TableRow, | ||
| Paper, | ||
| Checkbox, | ||
| MenuItem, | ||
| Select, | ||
| Box, | ||
| } from '@mui/material'; | ||
|
|
||
| const initialFields = [ | ||
| interface Field { | ||
| id: number; | ||
| name: string; | ||
| } | ||
|
|
||
| interface SelectedField extends Field { | ||
| roundNumber?: number; | ||
| } | ||
|
|
||
| interface FieldsToUpdateProps { | ||
| values: { | ||
| selectedFields: SelectedField[]; | ||
| }; | ||
| setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void; | ||
| } | ||
|
|
||
| const initialFields: Field[] = [ | ||
| { id: 1, name: 'Field 1' }, | ||
| { id: 2, name: 'Field 2' }, | ||
| { id: 3, name: 'Field 3' }, | ||
| // Add more fields as needed | ||
| ]; | ||
|
|
||
| export const FieldsToUpdate = () => { | ||
| const [selectedFields, setSelectedFields] = useState([]); | ||
|
|
||
| const handleSelectField = (fieldId, roundNumber) => { | ||
| const updatedSelection = selectedFields.find( | ||
| (field) => field.id === fieldId, | ||
| ) | ||
| ? selectedFields.map((field) => | ||
| field.id === fieldId ? { ...field, roundNumber } : field, | ||
| ) | ||
| : [...selectedFields, { id: fieldId, roundNumber }]; | ||
|
|
||
| setSelectedFields(updatedSelection); | ||
| }; | ||
|
|
||
| const handleRoundChange = (event, fieldId) => { | ||
| handleSelectField(fieldId, event.target.value); | ||
| }; | ||
|
|
||
| const handleCheckboxChange = (event, fieldId) => { | ||
| if (event.target.checked) { | ||
| handleSelectField(fieldId, 1); // Default to round 1 if not specified | ||
| } else { | ||
| setSelectedFields(selectedFields.filter((field) => field.id !== fieldId)); | ||
| } | ||
| }; | ||
|
|
||
| export const FieldsToUpdate: React.FC<FieldsToUpdateProps> = ({ | ||
| values, | ||
| setFieldValue, | ||
| }) => { | ||
| return ( | ||
| <TableContainer component={Paper}> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell>Select</TableCell> | ||
| <TableCell>Field</TableCell> | ||
| <TableCell>Round Number</TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {initialFields.map((field) => ( | ||
| <TableRow key={field.id}> | ||
| <TableCell> | ||
| <Checkbox | ||
| checked={selectedFields.some( | ||
| (selectedField) => selectedField.id === field.id, | ||
| )} | ||
| onChange={(event) => handleCheckboxChange(event, field.id)} | ||
| /> | ||
| </TableCell> | ||
| <TableCell>{field.name}</TableCell> | ||
| <TableCell> | ||
| <Select | ||
| value={ | ||
| selectedFields.find( | ||
| (selectedField) => selectedField.id === field.id, | ||
| )?.roundNumber || '' | ||
| } | ||
| onChange={(event) => handleRoundChange(event, field.id)} | ||
| displayEmpty | ||
| > | ||
| <MenuItem value="" disabled> | ||
| Select Round | ||
| </MenuItem> | ||
| {[...Array(10).keys()].map((num) => ( | ||
| <MenuItem key={num + 1} value={num + 1}> | ||
| {num + 1} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| <FieldArray | ||
| name="selectedFields" | ||
| render={(arrayHelpers) => ( | ||
| <TableContainer component={Box}> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell>Select</TableCell> | ||
| <TableCell>Field</TableCell> | ||
| <TableCell>Round Number</TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {initialFields.map((field) => ( | ||
| <TableRow key={field.id}> | ||
| <TableCell> | ||
| <Checkbox | ||
| checked={values.selectedFields.some( | ||
| (selectedField) => selectedField.id === field.id, | ||
| )} | ||
| onChange={(event) => { | ||
| const selectedIndex = values.selectedFields.findIndex( | ||
| (selectedField) => selectedField.id === field.id, | ||
| ); | ||
| if (event.target.checked) { | ||
| arrayHelpers.push({ | ||
| id: field.id, | ||
| roundNumber: 1, // Default round number when first selected | ||
| }); | ||
| } else if (selectedIndex > -1) { | ||
| arrayHelpers.remove(selectedIndex); | ||
| } | ||
| }} | ||
| /> | ||
| </TableCell> | ||
| <TableCell>{field.name}</TableCell> | ||
| <TableCell> | ||
| <Select | ||
| value={ | ||
| values.selectedFields.find( | ||
| (selectedField) => selectedField.id === field.id, | ||
| )?.roundNumber || '' | ||
| } | ||
| onChange={(event) => { | ||
| const selectedIndex = values.selectedFields.findIndex( | ||
| (selectedField) => selectedField.id === field.id, | ||
| ); | ||
| setFieldValue( | ||
| `selectedFields[${selectedIndex}].roundNumber`, | ||
| event.target.value, | ||
| ); | ||
| }} | ||
| displayEmpty | ||
| > | ||
| <MenuItem value="" disabled> | ||
| Select Round | ||
| </MenuItem> | ||
| {[...Array(10).keys()].map((num) => ( | ||
| <MenuItem key={num + 1} value={num + 1}> | ||
| {num + 1} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| )} | ||
| /> | ||
| ); | ||
| }; |
Oops, something went wrong.