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

Save point, layout taking shape

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-22 09:28:03 -07:00
parent 8630340a07
commit 3ef85bbcbf
2 changed files with 97 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+96 -15
View File
@@ -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"
const startYear = 1970;
@@ -26,24 +27,104 @@ items: [
})
const sections = createListCollection({
items: [
{ label: "All", value: "all" },
{ label: "Com", value: "com" },
{ label: "Eng", value: "eng" },
{ label: "Gas", value: "gas" },
{ label: "Geophys", value: "geophys" },
{ label: "GRSP", value: "grsp" },
{ label: "IT", value: "it" },
],
items: [
{ label: "All", value: "all" },
{ label: "Com", value: "com" },
{ label: "Eng", value: "eng" },
{ label: "Gas", value: "gas" },
{ label: "Geophys", value: "geophys" },
{ label: "GRSP", value: "grsp" },
{ label: "IT", value: "it" },
],
})
export function MEDataEntry() {
const [value, setValue] = useState("")
const [rows, setRows] = useState([]);
return(
<HStack spacing={4} m={4}>
<DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
<DropDownMenu collection={years} placeholder="Year" width="130px" />
<DropDownMenu collection={sections} placeholder="Section" width="130px" />
</HStack>
<Box m={4} border="1px solid" borderRadius="sm" borderColor="gray.500">
<HStack spacing={6} m={2}>
<DropDownMenu collection={years} placeholder="Year" width="130px" />
<DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
<DropDownMenu collection={sections} placeholder="Section" width="130px" />
</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>
);
}