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

Save point, layout of form section looks decent

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-22 17:31:42 -07:00
parent dc56ec79f1
commit ea11372e51
1 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+52 -15
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react" import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, SimpleGrid, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react"
import DropDownMenu from "../../CanvasComponents/DropDownMenu" import DropDownMenu from "../../CanvasComponents/DropDownMenu"
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
@@ -167,7 +167,6 @@ export function MEDataEntry() {
)) ))
return( return(
// <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
<Box> <Box>
<HStack spacing={6} m={2}> <HStack spacing={6} m={2}>
<DropDownMenu collection={years} placeholder="Year" width="130px" /> <DropDownMenu collection={years} placeholder="Year" width="130px" />
@@ -190,7 +189,6 @@ export function MEDataEntry() {
</Box> </Box>
<Box overflowX="auto"> <Box overflowX="auto">
{/* <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> */}
<Table.Root variant="outline" size="sm"> <Table.Root variant="outline" size="sm">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
@@ -223,32 +221,71 @@ export function MEDataEntry() {
<Button variant="solid" colorPalette="red">DELETE</Button> <Button variant="solid" colorPalette="red">DELETE</Button>
</ButtonGroup> </ButtonGroup>
</HStack> </HStack>
{/* Form Section */}
<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.300" overflow="hidden">
Fill in Form Fill in Form
</Box> </Box>
<Stack p={2} gap="2" maxW="sm" css={{ "--field-label-width": "96px" }}>
<Field.Root orientation="horizontal"> <Stack p={2} gap="2" css={{ "--field-label-width": "120px" }}>
<Field.Label>User Name</Field.Label> <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap">
<Input {...register("username")} placeholder="David Johnston" flex="1" /> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Country:</Field.Label>
<Input {...register("country")} placeholder="US" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal"> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label> First Name</Field.Label> <Field.Label>Start Date of Assistance:</Field.Label>
<Input {...register("firstname")} placeholder="David" flex="1" /> <Input {...register("startdate")} placeholder="9/6/1987" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal"> <Field.Root orientation="horizontal" flex="1">
<Field.Label>Last Name</Field.Label> <Field.Label>VPI10 (LandScan 2014):</Field.Label>
<Input {...register("lastname")} placeholder="Johnston" flex="1" /> <Input {...register("lastname")} placeholder="CatPic.jpg" />
</Field.Root>
</HStack>
<HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap">
<Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Country:</Field.Label>
<Input {...register("country")} placeholder="US" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal"> <Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Start Date of Assistance:</Field.Label>
<Input {...register("startdate")} placeholder="9/6/1987" />
</Field.Root>
<Field.Root orientation="horizontal" flex="1">
<Field.Label>VPI10 (LandScan 2014):</Field.Label>
<Input {...register("lastname")} placeholder="CatPic.jpg" />
</Field.Root>
</HStack>
<HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap">
<Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Country:</Field.Label>
<Input {...register("country")} placeholder="US" />
</Field.Root>
<Field.Root orientation="horizontal" flex="1" minW="260px">
<Field.Label>Start Date of Assistance:</Field.Label>
<Input {...register("startdate")} placeholder="9/6/1987" />
</Field.Root>
<Field.Root orientation="horizontal" flex="1">
<Field.Label>VPI10 (LandScan 2014):</Field.Label>
<Input {...register("lastname")} placeholder="CatPic.jpg" />
</Field.Root>
</HStack>
<Field.Root orientation="horizontal" flex="1">
<Field.Label>Email</Field.Label> <Field.Label>Email</Field.Label>
<Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" /> <Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" />
</Field.Root> </Field.Root>
<Button type="submit"> <Button type="submit" alignSelf="flex-start">
Save Save
</Button> </Button>
</Stack> </Stack>