diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx index 5cb986a3..7f9abea2 100644 --- a/src/webapp/components/table/BasicTable.tsx +++ b/src/webapp/components/table/BasicTable.tsx @@ -3,37 +3,54 @@ import _ from "lodash"; import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core"; import styled from "styled-components"; import { Maybe } from "../../../utils/ts-utils"; -import { User } from "../../../domain/entities/User"; +import { Selector, SelectorOption } from "../selector/Selector"; -type TableCellData = Maybe; - -export type TableColumn = { name: string; type?: "link" | "select" }; +interface BaseColumn { + name: string; +} +interface LinkColumn extends BaseColumn { + type: "link"; +} +interface SelectorColumn extends BaseColumn { + type: "selector"; + options: SelectorOption[]; +} +export type TableColumn = BaseColumn | LinkColumn | SelectorColumn; interface BasicTableProps { columns: TableColumn[]; rows: { - [key: TableColumn["name"]]: string | User; + [key: TableColumn["name"]]: string; }[]; - onChange?: (cell: TableCellData, rowIndex: number, column: TableColumn["name"]) => void; + onChange?: (cell: Maybe, rowIndex: number, column: TableColumn["name"]) => void; showRowIndex?: boolean; } export const BasicTable: React.FC = React.memo( ({ columns, rows, onChange = () => {}, showRowIndex = false }) => { - const renderCell = (cell: TableCellData, rowIndex: number, { name, type }: TableColumn) => { - if (!cell) { - return ""; - } - switch (type) { - case "link": - return ( - onChange(cell, rowIndex, name)}> - {_.isObject(cell) ? cell.name : cell} - - ); - default: - return _.isObject(cell) ? cell.name : cell; + const Cell = (cell: string, rowIndex: number, column: TableColumn) => { + const [selectorValue, setSelectorValue] = React.useState(cell); + if ("type" in column && column.type === "link") { + return ( + onChange(cell, rowIndex, column.name)}> + {cell} + + ); + } else if ("type" in column && column.type === "selector") { + const handleChange = (value: string) => { + setSelectorValue(value); + onChange(value, rowIndex, column.name); + }; + return ( + + ); } + return cell; }; return ( @@ -52,7 +69,7 @@ export const BasicTable: React.FC = React.memo( {showRowIndex && {rowIndex + 1}} {columns.map(column => ( - {renderCell(row[column.name], rowIndex, column)} + {Cell(row[column.name] || "", rowIndex, column)} ))}