chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add form type validation for date and number values along with interactive row highlighting in the main M&E Data Entry table

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-25 14:15:04 -07:00
parent 39ce297af4
commit caad4e117e
1 changed files with 58 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+58 -34
View File
@@ -116,12 +116,29 @@ const items = [
export function MEDataEntry() { export function MEDataEntry() {
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [selection, setSelection] = useState([]); const [selection, setSelection] = useState([]);
const { const {
register, register,
handleSubmit, handleSubmit,
reset,
watch, watch,
formState: { errors }, formState: { errors },
} = useForm(); } = useForm({
defaultValues: {
id: "",
section: "",
volcano: "",
country: "",
start: "",
end: "",
type: "",
vpi10: "",
downstream: 0,
male: 0,
female: 0,
total: 0,
}
});
const onSubmit = (data) => { const onSubmit = (data) => {
console.log("Form submitted:", data); console.log("Form submitted:", data);
@@ -184,34 +201,36 @@ export function MEDataEntry() {
<Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500"> <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
<Box m={4} border="1px solid"> <Box m={4} border="1px solid">
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden"> <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
Number of people benefitting from VDAP activities, disaggregate by sex Number of people benefitting from VDAP activities, disaggregate by sex
</Box> </Box>
<Box overflowX="auto"> {/* <Box overflowX="auto"> */}
<Table.Root variant="outline" size="sm"> <Table.ScrollArea borderWidth="1px"height="200px">
<Table.Header> <Table.Root variant="outline" size="sm" stickyHeader interactive>
<Table.Row> <Table.Header>
<Table.ColumnHeader /> {/* padding for checkboxes */} <Table.Row>
<Table.ColumnHeader>Section</Table.ColumnHeader> <Table.ColumnHeader /> {/* padding for checkboxes */}
<Table.ColumnHeader>Volcano</Table.ColumnHeader> <Table.ColumnHeader>Section</Table.ColumnHeader>
<Table.ColumnHeader>Country</Table.ColumnHeader> <Table.ColumnHeader>Volcano</Table.ColumnHeader>
<Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader> <Table.ColumnHeader>Country</Table.ColumnHeader>
<Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader> <Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
<Table.ColumnHeader>Assistance Type</Table.ColumnHeader> <Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
<Table.ColumnHeader>VPI10</Table.ColumnHeader> <Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
<Table.ColumnHeader>Downstream Population</Table.ColumnHeader> <Table.ColumnHeader>VPI10</Table.ColumnHeader>
<Table.ColumnHeader>Male</Table.ColumnHeader> <Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
<Table.ColumnHeader>Female</Table.ColumnHeader> <Table.ColumnHeader>Male</Table.ColumnHeader>
<Table.ColumnHeader>Total</Table.ColumnHeader> <Table.ColumnHeader>Female</Table.ColumnHeader>
</Table.Row> <Table.ColumnHeader>Total</Table.ColumnHeader>
</Table.Header> </Table.Row>
</Table.Header>
<Table.Body> <Table.Body>
{rows} {rows}
</Table.Body> </Table.Body>
</Table.Root> </Table.Root>
</Box> </Table.ScrollArea>
{/* </Box> */}
</Box> </Box>
{/* Row actions aligned right */} {/* Row actions aligned right */}
<HStack justify="flex-end" p={3} pt={0} borderBottom="1px solid" borderColor="gray.300" spacing={3} > <HStack justify="flex-end" p={3} pt={0} borderBottom="1px solid" borderColor="gray.300" spacing={3} >
@@ -223,8 +242,13 @@ export function MEDataEntry() {
</HStack> </HStack>
{/* Form Section */} {/* Form Section */}
<Box m={4} border="1px solid"> <Box
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden"> as="form"
onSubmit={handleSubmit(onSubmit)}
m={4}
border="1px solid"
>
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
Fill in Form Fill in Form
</Box> </Box>
@@ -237,7 +261,7 @@ export function MEDataEntry() {
<Field.Root orientation="horizontal" flex="1" minW="260px"> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Start Date of Assistance:</Field.Label> <Field.Label>Start Date of Assistance:</Field.Label>
<Input {...register("startdate")} placeholder="9/6/1987" /> <Input {...register("startdate", { valueAsDate: true })} placeholder="9/6/1987" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal" flex="1"> <Field.Root orientation="horizontal" flex="1">
@@ -254,29 +278,29 @@ export function MEDataEntry() {
<Field.Root orientation="horizontal" flex="1" minW="260px"> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>End Date of Assistance:</Field.Label> <Field.Label>End Date of Assistance:</Field.Label>
<Input {...register("enddate")} placeholder="7/14/2054" /> <Input {...register("enddate", { valueAsDate: true })} placeholder="7/14/2054" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal" flex="1"> <Field.Root orientation="horizontal" flex="1">
<Field.Label>Downstream Affected Population:</Field.Label> <Field.Label>Downstream Affected Population:</Field.Label>
<Input {...register("downstream")} placeholder="1337" /> <Input {...register("downstream", { valueAsNumber: true })} placeholder="1337" />
</Field.Root> </Field.Root>
</HStack> </HStack>
<HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap">
<Field.Root orientation="horizontal" flex="1" minW="260px"> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Male Population:</Field.Label> <Field.Label>Male Population:</Field.Label>
<Input {...register("male")} placeholder="1776" /> <Input {...register("male", { valueAsNumber: true })} placeholder="1776" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal" flex="1" minW="260px"> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Female Population:</Field.Label> <Field.Label>Female Population:</Field.Label>
<Input {...register("female")} placeholder="1892" /> <Input {...register("female", { valueAsNumber: true })} placeholder="1892" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal" flex="1"> <Field.Root orientation="horizontal" flex="1">
<Field.Label>Total Population:</Field.Label> <Field.Label>Total Population:</Field.Label>
<Input {...register("total")} placeholder="3668" /> <Input {...register("total", { valueAsNumber: true })} placeholder="3668" />
</Field.Root> </Field.Root>
</HStack> </HStack>
@@ -290,7 +314,7 @@ export function MEDataEntry() {
<Button type="submit" variant="solid" colorPalette="green" > <Button type="submit" variant="solid" colorPalette="green" >
Add Add
</Button> </Button>
<Button type="submit"> <Button onClick={() => reset()}>
Reset Reset
</Button> </Button>
</ButtonGroup> </ButtonGroup>