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

Add labels, placeholders, and buttons to the form section

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-22 18:08:38 -07:00
parent ea11372e51
commit 0de3b2c5e7
1 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+50 -43
View File
@@ -173,10 +173,10 @@ export function MEDataEntry() {
<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" />
</HStack> </HStack>
<Text fontSize="sm" pl={2} pt={2}> <Text fontSize="xs" pl={2} pt={2}>
Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro). Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
</Text> </Text>
<List.Root as="ul" styleType="circle" fontSize="sm" pl={6}> <List.Root as="ul" styleType="circle" fontSize="xs" pl={6}>
<List.Item>Edit entry.</List.Item> <List.Item>Edit entry.</List.Item>
<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>
@@ -189,33 +189,33 @@ export function MEDataEntry() {
</Box> </Box>
<Box overflowX="auto"> <Box overflowX="auto">
<Table.Root variant="outline" size="sm"> <Table.Root variant="outline" size="sm">
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader /> {/* padding for checkboxes */} <Table.ColumnHeader /> {/* padding for checkboxes */}
<Table.ColumnHeader>Section</Table.ColumnHeader> <Table.ColumnHeader>Section</Table.ColumnHeader>
<Table.ColumnHeader>Volcano</Table.ColumnHeader> <Table.ColumnHeader>Volcano</Table.ColumnHeader>
<Table.ColumnHeader>Country</Table.ColumnHeader> <Table.ColumnHeader>Country</Table.ColumnHeader>
<Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader> <Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
<Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader> <Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
<Table.ColumnHeader>Assistance Type</Table.ColumnHeader> <Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
<Table.ColumnHeader>VPI10</Table.ColumnHeader> <Table.ColumnHeader>VPI10</Table.ColumnHeader>
<Table.ColumnHeader>Downstream Population</Table.ColumnHeader> <Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
<Table.ColumnHeader>Male</Table.ColumnHeader> <Table.ColumnHeader>Male</Table.ColumnHeader>
<Table.ColumnHeader>Female</Table.ColumnHeader> <Table.ColumnHeader>Female</Table.ColumnHeader>
<Table.ColumnHeader>Total</Table.ColumnHeader> <Table.ColumnHeader>Total</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{rows} {rows}
</Table.Body> </Table.Body>
</Table.Root> </Table.Root>
</Box> </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} >
<ButtonGroup variant="surface"> <ButtonGroup variant="surface" size="sm">
<Button >EDIT</Button> <Button >EDIT</Button>
<Button>COPY</Button> <Button>COPY</Button>
<Button variant="solid" colorPalette="red">DELETE</Button> <Button variant="solid" colorPalette="red">DELETE</Button>
@@ -228,7 +228,7 @@ export function MEDataEntry() {
Fill in Form Fill in Form
</Box> </Box>
<Stack p={2} gap="2" css={{ "--field-label-width": "120px" }}> <Stack p={2} gap="2" css={{ "--field-label-width": "80px" }}>
<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>Country:</Field.Label> <Field.Label>Country:</Field.Label>
@@ -248,46 +248,53 @@ export function MEDataEntry() {
<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>Country:</Field.Label> <Field.Label>Volcano:</Field.Label>
<Input {...register("country")} placeholder="US" /> <Input {...register("volcano")} placeholder="St Helens" />
</Field.Root> </Field.Root>
<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>End Date of Assistance:</Field.Label>
<Input {...register("startdate")} placeholder="9/6/1987" /> <Input {...register("enddate")} placeholder="7/14/2054" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal" flex="1"> <Field.Root orientation="horizontal" flex="1">
<Field.Label>VPI10 (LandScan 2014):</Field.Label> <Field.Label>Downstream Affected Population:</Field.Label>
<Input {...register("lastname")} placeholder="CatPic.jpg" /> <Input {...register("downstream")} 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>Country:</Field.Label> <Field.Label>Male Population:</Field.Label>
<Input {...register("country")} placeholder="US" /> <Input {...register("male")} placeholder="1776" />
</Field.Root> </Field.Root>
<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>Female Population:</Field.Label>
<Input {...register("startdate")} placeholder="9/6/1987" /> <Input {...register("female")} placeholder="1892" />
</Field.Root> </Field.Root>
<Field.Root orientation="horizontal" flex="1"> <Field.Root orientation="horizontal" flex="1">
<Field.Label>VPI10 (LandScan 2014):</Field.Label> <Field.Label>Total Population:</Field.Label>
<Input {...register("lastname")} placeholder="CatPic.jpg" /> <Input {...register("total")} placeholder="3668" />
</Field.Root> </Field.Root>
</HStack> </HStack>
<Field.Root orientation="horizontal" flex="1"> <Field.Root orientation="horizontal" flex="1" pt={2}>
<Field.Label>Email</Field.Label> <Field.Label>Assistance Type:</Field.Label>
<Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" /> <Input {...register("assistance")} placeholder="Monetary" flex="1" />
</Field.Root> </Field.Root>
<Button type="submit" alignSelf="flex-start"> <HStack alignSelf="flex-start" pt={2}>
Save <ButtonGroup variant="surface" size="sm">
</Button> <Button type="submit" variant="solid" colorPalette="green" >
Add
</Button>
<Button type="submit">
Reset
</Button>
</ButtonGroup>
</HStack>
</Stack> </Stack>
</Box> </Box>
</Box> </Box>