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

Add initial table and checkbox functionality to M&E Data Entry view

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-22 16:28:50 -07:00
parent 66d1220fbe
commit 69525d0132
1 changed files with 120 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+120 -34
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react" import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, Checkbox, createListCollection } from "@chakra-ui/react"
import DropDownMenu from "../../CanvasComponents/DropDownMenu" import DropDownMenu from "../../CanvasComponents/DropDownMenu"
const startYear = 1970; const startYear = 1970;
@@ -38,9 +38,122 @@ const sections = createListCollection({
], ],
}) })
// Sample entries for visual reference - remove before flight
const items = [
{
id: "r1",
section: "Com",
volcano: "Nevado del Ruiz",
country: "COL",
start: "2024-01-15",
end: "2024-01-30",
type: "Training",
vpi10: "Yes",
downstream: 1200,
male: 600,
female: 600,
total: 1200,
},
{
id: "r2",
section: "Gas",
volcano: "Etna",
country: "ITA",
start: "2024-02-01",
end: "2024-02-20",
type: "Assistance",
vpi10: "No",
downstream: 900,
male: 450,
female: 450,
total: 900,
},
{
id: "r3",
section: "Eng",
volcano: "Kilauea",
country: "USA",
start: "2024-03-10",
end: "2024-03-25",
type: "Support",
vpi10: "Yes",
downstream: 2000,
male: 1000,
female: 1000,
total: 2000,
},
{
id: "r4",
section: "Geophys",
volcano: "Fuji",
country: "JPN",
start: "2024-04-05",
end: "2024-04-18",
type: "Monitoring",
vpi10: "Yes",
downstream: 1500,
male: 700,
female: 800,
total: 1500,
},
{
id: "r5",
section: "IT",
volcano: "Merapi",
country: "IDN",
start: "2024-05-02",
end: "2024-05-12",
type: "Deployment",
vpi10: "No",
downstream: 1100,
male: 550,
female: 550,
total: 1100,
},
];
export function MEDataEntry() { export function MEDataEntry() {
const [value, setValue] = useState("") const [value, setValue] = useState("");
const [rows, setRows] = useState([]); // const [rows, setRows] = useState([]);
const [selection, setSelection] = useState([]);
const rows = items.map((item) => (
<Table.Row
key={item.id}
data-selected={selection.includes(item.id) ? "" : undefined }
>
<Table.Cell>
<Checkbox.Root
size="sm"
mt="0.5"
aria-label="Select row"
checked={selection.includes(item.id)}
onCheckedChange={(changes) => {
setSelection((prev) =>
changes.checked
? [...prev, item.id]
: prev.filter((id) => id !== item.id ),
);
}}
>
<Checkbox.HiddenInput />
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
</Checkbox.Root>
</Table.Cell>
<Table.Cell>{item.section}</Table.Cell>
<Table.Cell>{item.volcano}</Table.Cell>
<Table.Cell>{item.country}</Table.Cell>
<Table.Cell>{item.start}</Table.Cell>
<Table.Cell>{item.end}</Table.Cell>
<Table.Cell>{item.type}</Table.Cell>
<Table.Cell>{item.vpi10}</Table.Cell>
<Table.Cell isNumeric>{item.downstream}</Table.Cell>
<Table.Cell isNumeric>{item.male}</Table.Cell>
<Table.Cell isNumeric>{item.female}</Table.Cell>
<Table.Cell isNumeric>{item.total}</Table.Cell>
</Table.Row>
))
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">
@@ -63,10 +176,11 @@ export function MEDataEntry() {
</Box> </Box>
<Box overflowX="auto"> <Box overflowX="auto">
<RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> {/* <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>
<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>
@@ -82,38 +196,10 @@ export function MEDataEntry() {
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{rows.length === 0 ? ( {rows}
<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.Body>
</Table.Root> </Table.Root>
</RadioGroup.Root> {/* </RadioGroup.Root> */}
</Box> </Box>
</Box> </Box>
{/* Row actions aligned right */} {/* Row actions aligned right */}