Save point, layout taking shape
This commit is contained in:
Daniel S. Hansen
@@ -4,7 +4,7 @@ export default function DropDownMenu({ collection, placeholder = "Select...", si
|
|||||||
return (
|
return (
|
||||||
<Select.Root collection={collection} size={size} width={width}>
|
<Select.Root collection={collection} size={size} width={width}>
|
||||||
<Select.HiddenSelect />
|
<Select.HiddenSelect />
|
||||||
<Select.Control>
|
<Select.Control bg="gray.100" _hover={{ bg: "gray.200" }}>
|
||||||
<Select.Trigger>
|
<Select.Trigger>
|
||||||
<Select.ValueText placeholder={placeholder} />
|
<Select.ValueText placeholder={placeholder} />
|
||||||
</Select.Trigger>
|
</Select.Trigger>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { HStack, createListCollection } from "@chakra-ui/react"
|
import { useState } from 'react';
|
||||||
|
import { Box, Button, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react"
|
||||||
import DropDownMenu from "../../CanvasComponents/DropDownMenu"
|
import DropDownMenu from "../../CanvasComponents/DropDownMenu"
|
||||||
|
|
||||||
const startYear = 1970;
|
const startYear = 1970;
|
||||||
@@ -26,7 +27,7 @@ items: [
|
|||||||
})
|
})
|
||||||
|
|
||||||
const sections = createListCollection({
|
const sections = createListCollection({
|
||||||
items: [
|
items: [
|
||||||
{ label: "All", value: "all" },
|
{ label: "All", value: "all" },
|
||||||
{ label: "Com", value: "com" },
|
{ label: "Com", value: "com" },
|
||||||
{ label: "Eng", value: "eng" },
|
{ label: "Eng", value: "eng" },
|
||||||
@@ -34,16 +35,96 @@ items: [
|
|||||||
{ label: "Geophys", value: "geophys" },
|
{ label: "Geophys", value: "geophys" },
|
||||||
{ label: "GRSP", value: "grsp" },
|
{ label: "GRSP", value: "grsp" },
|
||||||
{ label: "IT", value: "it" },
|
{ label: "IT", value: "it" },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
export function MEDataEntry() {
|
export function MEDataEntry() {
|
||||||
|
const [value, setValue] = useState("")
|
||||||
|
const [rows, setRows] = useState([]);
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<HStack spacing={4} m={4}>
|
<Box m={4} border="1px solid" borderRadius="sm" borderColor="gray.500">
|
||||||
<DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
|
<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={sections} placeholder="Section" width="130px" />
|
<DropDownMenu collection={sections} placeholder="Section" width="130px" />
|
||||||
</HStack>
|
</HStack>
|
||||||
|
<Text fontSize="sm" pl={2} pt={4}>
|
||||||
|
Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
|
||||||
|
</Text>
|
||||||
|
<List.Root as="ul" styleType="circle" fontSize="sm" pl={6}>
|
||||||
|
<List.Item>Edit 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.Root>
|
||||||
|
<Box m={4} border="1px solid">
|
||||||
|
<Box border="1px solid" borderColor="gray.300" overflow="hidden">
|
||||||
|
Number of people benefitting from VDAP activities, disaggregate by sex
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box overflowX="auto">
|
||||||
|
<RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
|
||||||
|
<Table.Root variant="outline" size="sm">
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.ColumnHeader>Section</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Volcano</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Country</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>VPI10</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Male</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Female</Table.ColumnHeader>
|
||||||
|
<Table.ColumnHeader>Total</Table.ColumnHeader>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
|
||||||
|
<Table.Body>
|
||||||
|
{rows.length === 0 ? (
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell colSpan={12} textAlign="center" py={4} color="gray.500">
|
||||||
|
No data yet
|
||||||
|
</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
) : (
|
||||||
|
rows.map((r) => (
|
||||||
|
<Table.Row key={r.id}>
|
||||||
|
<Table.Cell w="40px">
|
||||||
|
<RadioGroup.Item value={r.id}>
|
||||||
|
<RadioGroup.ItemHiddenInput />
|
||||||
|
<RadioGroup.ItemIndicator />
|
||||||
|
</RadioGroup.Item>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{r.section}</Table.Cell>
|
||||||
|
<Table.Cell>{r.volcano}</Table.Cell>
|
||||||
|
<Table.Cell>{r.country}</Table.Cell>
|
||||||
|
<Table.Cell>{r.start}</Table.Cell>
|
||||||
|
<Table.Cell>{r.end}</Table.Cell>
|
||||||
|
<Table.Cell>{r.type}</Table.Cell>
|
||||||
|
<Table.Cell>{r.vpi10}</Table.Cell>
|
||||||
|
<Table.Cell isNumeric>{r.downstream}</Table.Cell>
|
||||||
|
<Table.Cell isNumeric>{r.male}</Table.Cell>
|
||||||
|
<Table.Cell isNumberic>{r.female}</Table.Cell>
|
||||||
|
<Table.Cell is Numberic fontWeight="semibold">{r.total}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
)))
|
||||||
|
}
|
||||||
|
</Table.Body>
|
||||||
|
|
||||||
|
|
||||||
|
</Table.Root>
|
||||||
|
</RadioGroup.Root>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{/* Row actions aligned right */}
|
||||||
|
<HStack justify="flex-end" p={3} borderTop="1px solid" borderColor="gray.300" spacing={3} >
|
||||||
|
<Button variant="subtle">EDIT</Button>
|
||||||
|
<Button variant="subtle">COPY</Button>
|
||||||
|
<Button colorScheme="red" variant="solid">DELETE</Button>
|
||||||
|
</HStack>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user