Add initial fill in form boilerplate
This commit is contained in:
Daniel S. Hansen
@@ -1,6 +1,7 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, Checkbox, createListCollection } from "@chakra-ui/react"
|
import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react"
|
||||||
import DropDownMenu from "../../CanvasComponents/DropDownMenu"
|
import DropDownMenu from "../../CanvasComponents/DropDownMenu"
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
const startYear = 1970;
|
const startYear = 1970;
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
@@ -111,11 +112,21 @@ const items = [
|
|||||||
total: 1100,
|
total: 1100,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function MEDataEntry() {
|
export function MEDataEntry() {
|
||||||
const [value, setValue] = useState("");
|
const [value, setValue] = useState("");
|
||||||
// const [rows, setRows] = useState([]);
|
|
||||||
const [selection, setSelection] = useState([]);
|
const [selection, setSelection] = useState([]);
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
watch,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm();
|
||||||
|
|
||||||
|
const onSubmit = (data) => {
|
||||||
|
console.log("Form submitted:", data);
|
||||||
|
}
|
||||||
|
|
||||||
const rows = items.map((item) => (
|
const rows = items.map((item) => (
|
||||||
<Table.Row
|
<Table.Row
|
||||||
key={item.id}
|
key={item.id}
|
||||||
@@ -156,8 +167,9 @@ export function MEDataEntry() {
|
|||||||
))
|
))
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<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">
|
||||||
<HStack spacing={6} m={2}>
|
<Box>
|
||||||
|
<HStack spacing={6} m={2}>
|
||||||
<DropDownMenu collection={years} placeholder="Year" width="130px" />
|
<DropDownMenu collection={years} placeholder="Year" width="130px" />
|
||||||
<DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
|
<DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
|
||||||
<DropDownMenu collection={sections} placeholder="Section" width="130px" />
|
<DropDownMenu collection={sections} placeholder="Section" width="130px" />
|
||||||
@@ -170,46 +182,78 @@ export function MEDataEntry() {
|
|||||||
<List.Item>Delete entry.</List.Item>
|
<List.Item>Delete entry.</List.Item>
|
||||||
<List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
|
<List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
|
||||||
</List.Root>
|
</List.Root>
|
||||||
<Box m={4} border="1px solid">
|
|
||||||
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
|
<Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
|
||||||
Number of people benefitting from VDAP activities, disaggregate by sex
|
<Box m={4} border="1px solid">
|
||||||
</Box>
|
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
|
||||||
|
Number of people benefitting from VDAP activities, disaggregate by sex
|
||||||
<Box overflowX="auto">
|
</Box>
|
||||||
{/* <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> */}
|
|
||||||
<Table.Root variant="outline" size="sm">
|
<Box overflowX="auto">
|
||||||
<Table.Header>
|
{/* <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> */}
|
||||||
<Table.Row>
|
<Table.Root variant="outline" size="sm">
|
||||||
<Table.ColumnHeader /> {/* padding for checkboxes */}
|
<Table.Header>
|
||||||
<Table.ColumnHeader>Section</Table.ColumnHeader>
|
<Table.Row>
|
||||||
<Table.ColumnHeader>Volcano</Table.ColumnHeader>
|
<Table.ColumnHeader /> {/* padding for checkboxes */}
|
||||||
<Table.ColumnHeader>Country</Table.ColumnHeader>
|
<Table.ColumnHeader>Section</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
|
<Table.ColumnHeader>Volcano</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
|
<Table.ColumnHeader>Country</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
|
<Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>VPI10</Table.ColumnHeader>
|
<Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
|
<Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>Male</Table.ColumnHeader>
|
<Table.ColumnHeader>VPI10</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>Female</Table.ColumnHeader>
|
<Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
|
||||||
<Table.ColumnHeader>Total</Table.ColumnHeader>
|
<Table.ColumnHeader>Male</Table.ColumnHeader>
|
||||||
</Table.Row>
|
<Table.ColumnHeader>Female</Table.ColumnHeader>
|
||||||
</Table.Header>
|
<Table.ColumnHeader>Total</Table.ColumnHeader>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
|
||||||
<Table.Body>
|
<Table.Body>
|
||||||
{rows}
|
{rows}
|
||||||
</Table.Body>
|
</Table.Body>
|
||||||
</Table.Root>
|
</Table.Root>
|
||||||
{/* </RadioGroup.Root> */}
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{/* Row actions aligned right */}
|
||||||
|
<HStack justify="flex-end" p={3} pt={0} borderBottom="1px solid" borderColor="gray.300" spacing={3} >
|
||||||
|
<ButtonGroup variant="surface">
|
||||||
|
<Button >EDIT</Button>
|
||||||
|
<Button>COPY</Button>
|
||||||
|
<Button variant="solid" colorPalette="red">DELETE</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</HStack>
|
||||||
|
<Box m={4} border="1px solid">
|
||||||
|
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
|
||||||
|
Fill in Form
|
||||||
|
</Box>
|
||||||
|
<Stack p={2} gap="2" maxW="sm" css={{ "--field-label-width": "96px" }}>
|
||||||
|
<Field.Root orientation="horizontal">
|
||||||
|
<Field.Label>User Name</Field.Label>
|
||||||
|
<Input {...register("username")} placeholder="David Johnston" flex="1" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Field.Root orientation="horizontal">
|
||||||
|
<Field.Label> First Name</Field.Label>
|
||||||
|
<Input {...register("firstname")} placeholder="David" flex="1" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Field.Root orientation="horizontal">
|
||||||
|
<Field.Label>Last Name</Field.Label>
|
||||||
|
<Input {...register("lastname")} placeholder="Johnston" flex="1" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Field.Root orientation="horizontal">
|
||||||
|
<Field.Label>Email</Field.Label>
|
||||||
|
<Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Button type="submit">
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
{/* Row actions aligned right */}
|
|
||||||
<HStack justify="flex-end" p={3} borderTop="1px solid" borderColor="gray.300" spacing={3} >
|
|
||||||
<ButtonGroup variant="surface">
|
|
||||||
<Button >EDIT</Button>
|
|
||||||
<Button>COPY</Button>
|
|
||||||
<Button variant="solid" colorPalette="red">DELETE</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</HStack>
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user