From c1b57d606ff2533b89d79f5b148620bd1ffab7ea Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Mon, 30 May 2022 16:33:45 +0200 Subject: [PATCH 01/11] Implement expandable rows in editable table component (wip) --- components/data-points/data-points.tsx | 21 +- .../editable-table/editable-table-cell.tsx | 35 +- components/editable-table/editable-table.tsx | 302 +++++++++++++++--- types/common.ts | 4 +- 4 files changed, 290 insertions(+), 72 deletions(-) diff --git a/components/data-points/data-points.tsx b/components/data-points/data-points.tsx index 427f1d75..2b15e258 100644 --- a/components/data-points/data-points.tsx +++ b/components/data-points/data-points.tsx @@ -57,8 +57,16 @@ export default function DataPoints(props: DataPointProps) { ) const buildCombinedVariables = useCallback((): CombinedVariableType[] => { - return (valueVariables as CombinedVariableType[]).concat( - categoricalVariables as CombinedVariableType[] + return ( + valueVariables.map(v => ({ + ...v, + tooltip: `[${v.min}, ${v.max}]`, + })) as CombinedVariableType[] + ).concat( + categoricalVariables.map(v => ({ + ...v, + tooltip: `${v.options.length} options`, + })) as CombinedVariableType[] ) }, [categoricalVariables, valueVariables]) @@ -70,6 +78,7 @@ export default function DataPoints(props: DataPointProps) { name: variable.name, value: variable.options ? variable.options[0] : '', options: variable.options, + tooltip: variable.tooltip, } }) .concat( @@ -77,6 +86,7 @@ export default function DataPoints(props: DataPointProps) { name: s, value: '0', options: undefined, + tooltip: undefined, })) ), isEditMode: true, @@ -127,6 +137,7 @@ export default function DataPoints(props: DataPointProps) { name: v.name, value: v.value.toString(), options: combinedVariables[idx]?.options, + tooltip: combinedVariables[idx].tooltip, } }) const scores: TableDataPoint[] = item @@ -203,10 +214,7 @@ export default function DataPoints(props: DataPointProps) { title={ <> - - Data points -
- + Data points 0 && !isLoadingState && ( void + tooltip?: string + style?: CSSProperties } export function EditableTableCell(props: EditableTableCellProps) { - const { value, isEditMode, options, onChange } = props + const { value, isEditMode, options, onChange, tooltip } = props const classes = useStyles() + const textField = ( + + onChange('' + (e.target as HTMLInputElement).value) + } + /> + ) + return ( <> {isEditMode ? ( - + {options && options.length > 0 ? ( ) : ( <> - {props.tooltip !== undefined ? ( + {tooltip !== undefined ? ( {textField} ) : ( <>{textField} @@ -64,7 +70,9 @@ export function EditableTableCell(props: EditableTableCellProps) { )} ) : ( - {value} + + {value} + )} ) diff --git a/components/editable-table/editable-table-collapsed-row.style.ts b/components/editable-table/editable-table-collapsed-row.style.ts new file mode 100644 index 00000000..c861a3fc --- /dev/null +++ b/components/editable-table/editable-table-collapsed-row.style.ts @@ -0,0 +1,46 @@ +import { makeStyles } from '@material-ui/core' +import { tableBorder } from '../../theme/theme' + +export const useStyles = makeStyles(theme => ({ + buttonContainer: { + whiteSpace: 'nowrap', + float: 'right', + }, + cell: { + color: '#999', + paddingRight: '8px', + border: 'none', + borderTop: tableBorder, + }, + editCell: { + paddingRight: '0px', + border: 'none', + borderTop: tableBorder, + }, + row: { + '&:hover': { + background: '#fdfdfd', + }, + '&:hover td': { + background: '#f4f4f4', + }, + '&:hover td:first-of-type': { + background: 'white', + }, + '&:hover td:last-of-type': { + background: 'white', + }, + }, + newRow: { + paddingRight: 0, + border: 'none', + borderTop: tableBorder, + }, + emptyCell: { + border: 'none', + width: 16, + padding: 0, + }, +})) + +export default useStyles diff --git a/components/editable-table/editable-table-collapsed-row.tsx b/components/editable-table/editable-table-collapsed-row.tsx new file mode 100644 index 00000000..43f1ecb0 --- /dev/null +++ b/components/editable-table/editable-table-collapsed-row.tsx @@ -0,0 +1,92 @@ +import useStyles from './editable-table-collapsed-row.style' +import { IconButton, TableCell, TableRow, Tooltip } from '@material-ui/core' +import { TableDataRow } from '../../types/common' +import { EditableTableCell } from './editable-table-cell' +import AddIcon from '@material-ui/icons/Add' +import EditIcon from '@material-ui/icons/Edit' +import DeleteIcon from '@material-ui/icons/Delete' + +interface EditableTableCollapsedRowProps { + colSpan: number + rowId: number + tableRow: TableDataRow + setExpanded: (expanded: boolean) => void + onDelete: () => void +} + +export const EditableTableCollapsedRow = ({ + colSpan, + rowId, + tableRow, + setExpanded, + onDelete, +}: EditableTableCollapsedRowProps) => { + const classes = useStyles() + + return ( + + {tableRow.isNew ? ( + <> + + + + setExpanded(true)} + > + + + + + + + ) : ( + <> + + {rowId} + {tableRow.dataPoints.map((item, itemIndex) => ( + <> + + + ))} + +
+ + setExpanded(true)} + > + + + + + onDelete()} + > + + + +
+ + + + )} + + ) +} diff --git a/components/editable-table/editable-table-expanded-row.style.ts b/components/editable-table/editable-table-expanded-row.style.ts new file mode 100644 index 00000000..c0ef6ccd --- /dev/null +++ b/components/editable-table/editable-table-expanded-row.style.ts @@ -0,0 +1,41 @@ +import { makeStyles } from '@material-ui/core' +import { tableBorder } from '../../theme/theme' + +export const useStyles = makeStyles(theme => ({ + row: { + '& + tr': { + '& td': { + border: 'none', + borderTop: 'none', + }, + }, + }, + spanCell: { + '&:last-child': { + paddingRight: 0, + border: 'none', + }, + }, + paper: { + padding: 16, + margin: '2px 4px 2px 4px', + }, + rowId: { + fontWeight: 500, + fontSize: '1rem', + }, + rowHeaderCell: { + fontSize: 12, + fontWeight: 600, + border: 'none', + paddingRight: 16, + }, + rowMetaHeaderCell: { + fontSize: 12, + fontWeight: 400, + border: 'none', + paddingRight: 16, + }, +})) + +export default useStyles diff --git a/components/editable-table/editable-table-expanded-row.tsx b/components/editable-table/editable-table-expanded-row.tsx new file mode 100644 index 00000000..b0280df3 --- /dev/null +++ b/components/editable-table/editable-table-expanded-row.tsx @@ -0,0 +1,167 @@ +import useStyles from './editable-table-expanded-row.style' +import { + Box, + Button, + IconButton, + Paper, + Table, + TableBody, + TableCell, + TableHead, + TableRow, +} from '@material-ui/core' +import CloseIcon from '@material-ui/icons/Close' +import { TableDataRow } from '../../types/common' +import { EditableTableCell } from './editable-table-cell' + +interface EditableTableExpandedRowProps { + colSpan: number + rowId: number + row: TableDataRow + tableRow: TableDataRow + setExpanded: (expanded: boolean) => void + setRow: (row: TableDataRow) => void + onAdd: (row: TableDataRow) => void + onSave: (row: TableDataRow) => void +} + +export const EditableTableExpandedRow = ({ + colSpan, + rowId, + setRow, + tableRow, + row, + setExpanded, + onAdd, + onSave, +}: EditableTableExpandedRowProps) => { + const classes = useStyles() + + return ( + + + + + {rowId} + { + setRow({ ...tableRow }) + setExpanded(false) + }} + > + + + + + + + + {row.dataPoints.map((d, i) => ( + + {d.name} + + ))} + + + + + {row.dataPoints.map((d, i) => ( + + {d.tooltip} + + ))} + + + {row.dataPoints.map((d, i) => ( + + setRow({ + ...row, + dataPoints: [ + ...row.dataPoints.map((d, n) => + n === i + ? { + ...d, + value, + } + : d + ), + ], + }) + } + options={d.options} + style={{ + fontSize: 14, + border: 'none', + paddingRight: row.dataPoints.length - 1 === i ? 0 : 16, + }} + /> + ))} + + +
+ + {/* TODO: Suggested values {tableRow.isNew && ( + + )} */} + + + + + + + ) +} diff --git a/components/editable-table/editable-table-row.style.ts b/components/editable-table/editable-table-row.style.ts deleted file mode 100644 index 6ac40f53..00000000 --- a/components/editable-table/editable-table-row.style.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { makeStyles } from '@material-ui/core' - -export const useStyles = makeStyles(theme => ({ - buttonContainer: { - whiteSpace: 'nowrap', - float: 'right', - }, -})) - -export default useStyles diff --git a/components/editable-table/editable-table-row.tsx b/components/editable-table/editable-table-row.tsx index f61ccb9f..77ccaab6 100644 --- a/components/editable-table/editable-table-row.tsx +++ b/components/editable-table/editable-table-row.tsx @@ -1,23 +1,7 @@ -import { - Box, - Button, - IconButton, - Paper, - Table, - TableBody, - TableCell, - TableHead, - TableRow, - Tooltip, -} from '@material-ui/core' import { TableDataRow } from '../../types/common' -import CloseIcon from '@material-ui/icons/Close' -import { EditableTableCell } from './editable-table-cell' import { useState } from 'react' -import EditIcon from '@material-ui/icons/Edit' -import AddIcon from '@material-ui/icons/Add' -import DeleteIcon from '@material-ui/icons/Delete' -import useStyles from './editable-table-row.style' +import { EditableTableExpandedRow } from './editable-table-expanded-row' +import { EditableTableCollapsedRow } from './editable-table-collapsed-row' interface EditableTableRowProps { tableRow: TableDataRow @@ -40,225 +24,29 @@ export const EditableTableRow = ({ }: EditableTableRowProps) => { const [row, setRow] = useState({ ...tableRow }) const [expanded, setExpanded] = useState(false) - const classes = useStyles() return ( - + <> {expanded ? ( - - - - {rowId} - { - setRow({ ...tableRow }) - setExpanded(false) - }} - > - - - - - - - - {row.dataPoints.map((d, i) => ( - - {d.name} - - ))} - - - - - {row.dataPoints.map((d, i) => ( - - {d.tooltip} - - ))} - - - {row.dataPoints.map((d, i) => ( - - setRow({ - ...row, - dataPoints: [ - ...row.dataPoints.map((d, n) => - n === i - ? { - ...d, - value, - } - : d - ), - ], - }) - } - options={d.options} - style={{ - fontSize: '14px', - borderBottom: 'none', - paddingRight: row.dataPoints.length - 1 === i ? 0 : 16, - }} - /> - ))} - - -
- - {tableRow.isNew && ( - - )} - - - - - + onAdd(row)} + onSave={row => onSave(row)} + setRow={row => setRow(row)} + setExpanded={expanded => setExpanded(expanded)} + /> ) : ( - <> - {tableRow.isNew ? ( - <> - - - setExpanded(true)} - > - - - - - - ) : ( - <> - - {rowId} - - {tableRow.dataPoints.map((item, itemIndex) => ( - <> - - - ))} - -
- - setExpanded(true)} - > - - - - - onDelete()} - > - - - -
- - - )} - + onDelete()} + setExpanded={expanded => setExpanded(expanded)} + /> )} - + ) } diff --git a/components/editable-table/editable-table.style.ts b/components/editable-table/editable-table.style.ts index 3aa66f81..49ed65b9 100644 --- a/components/editable-table/editable-table.style.ts +++ b/components/editable-table/editable-table.style.ts @@ -1,8 +1,23 @@ import { makeStyles } from '@material-ui/core' +import { tableBorder } from '../../theme/theme' export const useStyles = makeStyles(theme => ({ - buttonContainer: { - whiteSpace: 'nowrap', + emptyCell: { + border: 'none', + width: 16, + padding: 0, + }, + emptyFooterCell: { + borderTop: tableBorder, + borderBottom: tableBorder, + }, + footerCell: { + fontSize: '0.875rem', + fontWeight: 500, + lineHeight: '1.5rem', + color: 'black', + borderTop: tableBorder, + borderBottom: tableBorder, }, })) diff --git a/components/editable-table/editable-table.tsx b/components/editable-table/editable-table.tsx index 43762856..fe50f921 100644 --- a/components/editable-table/editable-table.tsx +++ b/components/editable-table/editable-table.tsx @@ -9,6 +9,7 @@ import { import { TableDataRow } from '../../types/common' import { getRowId } from '../../utility/ui-util' import { EditableTableRow } from './editable-table-row' +import useStyles from './editable-table.style' type EditableTableProps = { rows: TableDataRow[] @@ -19,41 +20,35 @@ type EditableTableProps = { onRowEdited: (rowIndex: number, row: TableDataRow) => void } -export function EditableTable(props: EditableTableProps) { - const { - rows, - newestFirst, - suggestedValues, - onRowAdded, - onRowDeleted, - onRowEdited, - } = props - - const NON_DATA_ROWS = 3 - - const isNewEdited = (rows: TableDataRow[]) => - rows - .filter(r => r.isNew)[0] - .dataPoints.some( - d => d.name !== 'score' && d.options === undefined && d.value !== '' - ) +export const EditableTable = ({ + rows, + newestFirst, + suggestedValues, + onRowAdded, + onRowDeleted, + onRowEdited, +}: EditableTableProps) => { + const classes = useStyles() return ( <> + # {rows[0].dataPoints.map((item, index) => ( {item.name} ))} - + Edit + {rows.map((row, rowIndex) => ( onRowEdited(rowIndex, row)} onDelete={() => onRowDeleted(rowIndex)} @@ -65,21 +60,20 @@ export function EditableTable(props: EditableTableProps) { - + + {rows[0].dataPoints.map((item, index) => ( {item.name} ))} - + + Edit + +
diff --git a/reducers/data-points-reducer.test.ts b/reducers/data-points-reducer.test.ts index ff2471b2..642cfb92 100644 --- a/reducers/data-points-reducer.test.ts +++ b/reducers/data-points-reducer.test.ts @@ -1,8 +1,4 @@ -import { - dataPointsReducer, - DataPointsState, - DataPointsAction, -} from './data-points-reducer' +import { dataPointsReducer, DataPointsState } from './data-points-reducer' import { TableDataRow } from '../types/common' describe('data points reducer', () => { @@ -11,9 +7,158 @@ describe('data points reducer', () => { rows: [], } - describe('todo - tests', () => { - it('should toggle edit mode and set row to prevRow', async () => { - expect(true).toBe(true) + describe('dataPointsReducer - setInitialState', () => { + it('should set initial state', async () => { + const payload: DataPointsState = { + changed: false, + rows: [ + { + isNew: false, + dataPoints: [ + { + name: 'test', + value: '100', + }, + ], + }, + ], + } + expect( + dataPointsReducer( + { ...initialState }, + { + type: 'setInitialState', + payload, + } + ) + ).toEqual(payload) + }) + }) + describe('dataPointsReducer - rowAdded', () => { + it('should add a row and set changed to true', async () => { + const payload: TableDataRow = { + isNew: false, + dataPoints: [ + { + name: 'test', + value: '100', + }, + ], + } + expect( + dataPointsReducer( + { ...initialState }, + { + type: 'rowAdded', + payload, + } + ) + ).toEqual({ + ...initialState, + rows: [...initialState.rows, payload], + changed: true, + }) + }) + }) + describe('dataPointsReducer - rowDeleted', () => { + it('should delete a row and set changed to true', async () => { + expect( + dataPointsReducer( + { + ...initialState, + rows: [ + { + isNew: false, + dataPoints: [ + { + name: 'test1', + value: '100', + }, + ], + }, + { + isNew: false, + dataPoints: [ + { + name: 'test2', + value: '200', + }, + ], + }, + ], + }, + { + type: 'rowDeleted', + payload: 1, + } + ) + ).toEqual({ + ...initialState, + rows: [ + { + isNew: false, + dataPoints: [ + { + name: 'test1', + value: '100', + }, + ], + }, + ], + changed: true, + }) + }) + }) + describe('dataPointsReducer - rowEdited', () => { + it('should edit a row and set changed to true', async () => { + const payload = { + row: { + isNew: false, + dataPoints: [ + { + name: 'testNew', + value: '999', + }, + ], + }, + rowIndex: 0, + } + expect( + dataPointsReducer( + { + ...initialState, + rows: [ + { + isNew: false, + dataPoints: [ + { + name: 'test1', + value: '100', + }, + ], + }, + ], + }, + { + type: 'rowEdited', + payload, + } + ) + ).toEqual({ + ...initialState, + rows: [ + { + isNew: false, + dataPoints: [ + { + name: payload.row.dataPoints[0].name, + value: payload.row.dataPoints[0].value, + }, + ], + }, + ], + changed: true, + }) }) }) }) diff --git a/theme/theme.ts b/theme/theme.ts index bfa4a9fc..ac7da9e8 100644 --- a/theme/theme.ts +++ b/theme/theme.ts @@ -61,6 +61,8 @@ type CustomColours = { transparentBox: string } +export const tableBorder = '1px solid rgba(224, 224, 224, 1)' + const createCustomTheme = (custom: CustomColours): Theme => { return createTheme({ overrides, From a0171e361ddc5fbd0292ec5f43d1778dfa804817 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Tue, 21 Jun 2022 09:36:03 +0200 Subject: [PATCH 05/11] Fix edit state bug and key warning --- components/data-points/data-points.tsx | 4 +- .../editable-table-collapsed-row.tsx | 24 ++---- .../editable-table-expanded-row.tsx | 81 +++++++++---------- .../editable-table/editable-table-row.tsx | 6 +- components/editable-table/editable-table.tsx | 2 +- 5 files changed, 52 insertions(+), 65 deletions(-) diff --git a/components/data-points/data-points.tsx b/components/data-points/data-points.tsx index 1a142120..27862e82 100644 --- a/components/data-points/data-points.tsx +++ b/components/data-points/data-points.tsx @@ -131,7 +131,7 @@ export default function DataPoints(props: DataPointProps) { name: v.name, value: v.value.toString(), options: combinedVariables[idx]?.options, - tooltip: combinedVariables[idx].tooltip, + tooltip: combinedVariables[idx]?.tooltip, } }) const scores: TableDataPoint[] = item @@ -184,7 +184,7 @@ export default function DataPoints(props: DataPointProps) { }, [onUpdateDataPoints, scoreNames, state.changed, state.rows]) const calcIndex = (rowIndex: number) => - newestFirst ? state.rows.length - 1 - rowIndex : rowIndex + newestFirst ? state.rows.length - rowIndex - 1 : rowIndex return ( {tableRow.isNew ? ( <> - + {rowId} {tableRow.dataPoints.map((item, itemIndex) => ( - <> - - + ))}
diff --git a/components/editable-table/editable-table-expanded-row.tsx b/components/editable-table/editable-table-expanded-row.tsx index b0280df3..bdde8643 100644 --- a/components/editable-table/editable-table-expanded-row.tsx +++ b/components/editable-table/editable-table-expanded-row.tsx @@ -13,14 +13,14 @@ import { import CloseIcon from '@material-ui/icons/Close' import { TableDataRow } from '../../types/common' import { EditableTableCell } from './editable-table-cell' +import { useState } from 'react' interface EditableTableExpandedRowProps { colSpan: number rowId: number - row: TableDataRow tableRow: TableDataRow + suggestedValues: (string | number)[] setExpanded: (expanded: boolean) => void - setRow: (row: TableDataRow) => void onAdd: (row: TableDataRow) => void onSave: (row: TableDataRow) => void } @@ -28,14 +28,14 @@ interface EditableTableExpandedRowProps { export const EditableTableExpandedRow = ({ colSpan, rowId, - setRow, tableRow, - row, + suggestedValues, setExpanded, onAdd, onSave, }: EditableTableExpandedRowProps) => { const classes = useStyles() + const [editedRow, setEditedRow] = useState({ ...tableRow }) return ( @@ -46,10 +46,7 @@ export const EditableTableExpandedRow = ({ { - setRow({ ...tableRow }) - setExpanded(false) - }} + onClick={() => setExpanded(false)} > @@ -58,7 +55,7 @@ export const EditableTableExpandedRow = ({ - {row.dataPoints.map((d, i) => ( + {editedRow.dataPoints.map((d, i) => ( - {row.dataPoints.map((d, i) => ( + {editedRow.dataPoints.map((d, i) => ( - {row.dataPoints.map((d, i) => ( + {editedRow.dataPoints.map((d, i) => ( - setRow({ - ...row, + setEditedRow({ + ...editedRow, dataPoints: [ - ...row.dataPoints.map((d, n) => + ...editedRow.dataPoints.map((d, n) => n === i ? { ...d, @@ -104,7 +101,8 @@ export const EditableTableExpandedRow = ({ style={{ fontSize: 14, border: 'none', - paddingRight: row.dataPoints.length - 1 === i ? 0 : 16, + paddingRight: + editedRow.dataPoints.length - 1 === i ? 0 : 16, }} /> ))} @@ -112,37 +110,39 @@ export const EditableTableExpandedRow = ({
- {/* TODO: Suggested values {tableRow.isNew && ( - - )} */} + {tableRow.isNew && ( + + )} diff --git a/components/editable-table/editable-table-row.tsx b/components/editable-table/editable-table-row.tsx index 77ccaab6..1e4b0523 100644 --- a/components/editable-table/editable-table-row.tsx +++ b/components/editable-table/editable-table-row.tsx @@ -1,5 +1,5 @@ import { TableDataRow } from '../../types/common' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { EditableTableExpandedRow } from './editable-table-expanded-row' import { EditableTableCollapsedRow } from './editable-table-collapsed-row' @@ -22,7 +22,6 @@ export const EditableTableRow = ({ onDelete, onAdd, }: EditableTableRowProps) => { - const [row, setRow] = useState({ ...tableRow }) const [expanded, setExpanded] = useState(false) return ( @@ -31,11 +30,10 @@ export const EditableTableRow = ({ onAdd(row)} onSave={row => onSave(row)} - setRow={row => setRow(row)} setExpanded={expanded => setExpanded(expanded)} /> ) : ( diff --git a/components/editable-table/editable-table.tsx b/components/editable-table/editable-table.tsx index fe50f921..717f2052 100644 --- a/components/editable-table/editable-table.tsx +++ b/components/editable-table/editable-table.tsx @@ -47,7 +47,7 @@ export const EditableTable = ({ {rows.map((row, rowIndex) => ( onRowEdited(rowIndex, row)} From 6bcde957a9c9eaa436a5cc011462a04ebf653213 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Tue, 21 Jun 2022 11:18:26 +0200 Subject: [PATCH 06/11] Refactor newestFirst --- components/data-points/data-points.tsx | 9 +++------ .../editable-table/editable-table-util.test.ts | 16 ++++++++++++++++ components/editable-table/editable-table-util.ts | 11 +++++++++++ components/editable-table/editable-table.tsx | 13 ++++++++++--- utility/ui-util.test.ts | 8 +------- utility/ui-util.ts | 6 ------ 6 files changed, 41 insertions(+), 22 deletions(-) create mode 100644 components/editable-table/editable-table-util.test.ts create mode 100644 components/editable-table/editable-table-util.ts diff --git a/components/data-points/data-points.tsx b/components/data-points/data-points.tsx index 27862e82..e737147d 100644 --- a/components/data-points/data-points.tsx +++ b/components/data-points/data-points.tsx @@ -183,9 +183,6 @@ export default function DataPoints(props: DataPointProps) { } }, [onUpdateDataPoints, scoreNames, state.changed, state.rows]) - const calcIndex = (rowIndex: number) => - newestFirst ? state.rows.length - rowIndex - 1 : rowIndex - return ( 0 && !isLoadingState && ( rowAdded(row)} - onRowDeleted={(rowIndex: number) => rowDeleted(calcIndex(rowIndex))} + onRowDeleted={(rowIndex: number) => rowDeleted(rowIndex)} onRowEdited={(rowIndex: number, row: TableDataRow) => - rowEdited(calcIndex(rowIndex), row) + rowEdited(rowIndex, row) } /> diff --git a/components/editable-table/editable-table-util.test.ts b/components/editable-table/editable-table-util.test.ts new file mode 100644 index 00000000..59310920 --- /dev/null +++ b/components/editable-table/editable-table-util.test.ts @@ -0,0 +1,16 @@ +import { getRowIndex, getRowId } from './editable-table-util' + +describe('editable-table-util', () => { + describe('getRowId', () => { + it('should return correct id', async () => { + expect(getRowId(true, 10, 20)).toBe(10) + expect(getRowId(false, 10, 20)).toBe(11) + }) + }) + describe('getRowIndex', () => { + it('should return correct index', async () => { + expect(getRowIndex(true, 8, 12)).toBe(3) + expect(getRowIndex(false, 8, 12)).toBe(8) + }) + }) +}) diff --git a/components/editable-table/editable-table-util.ts b/components/editable-table/editable-table-util.ts new file mode 100644 index 00000000..f66d9f77 --- /dev/null +++ b/components/editable-table/editable-table-util.ts @@ -0,0 +1,11 @@ +export const getRowId = ( + newestFirst: boolean, + rowIndex: number, + rowsLength: number +) => (newestFirst ? rowsLength - rowIndex : rowIndex + 1) + +export const getRowIndex = ( + newestFirst: boolean, + rowIndex: number, + rowsLength: number +) => (newestFirst ? rowsLength - rowIndex - 1 : rowIndex) diff --git a/components/editable-table/editable-table.tsx b/components/editable-table/editable-table.tsx index 717f2052..c45980df 100644 --- a/components/editable-table/editable-table.tsx +++ b/components/editable-table/editable-table.tsx @@ -7,8 +7,8 @@ import { TableRow, } from '@material-ui/core' import { TableDataRow } from '../../types/common' -import { getRowId } from '../../utility/ui-util' import { EditableTableRow } from './editable-table-row' +import { getRowIndex, getRowId } from './editable-table-util' import useStyles from './editable-table.style' type EditableTableProps = { @@ -50,8 +50,15 @@ export const EditableTable = ({ key={'editablerow' + rowIndex} colSpan={5} //TODO: Calc colspan rowId={getRowId(newestFirst, rowIndex, rows.length)} - onSave={(row: TableDataRow) => onRowEdited(rowIndex, row)} - onDelete={() => onRowDeleted(rowIndex)} + onSave={(row: TableDataRow) => + onRowEdited( + getRowIndex(newestFirst, rowIndex, rows.length), + row + ) + } + onDelete={() => + onRowDeleted(getRowIndex(newestFirst, rowIndex, rows.length)) + } onAdd={(row: TableDataRow) => onRowAdded(row)} tableRow={row} suggestedValues={suggestedValues} diff --git a/utility/ui-util.test.ts b/utility/ui-util.test.ts index 0282dc7e..f71a8c83 100644 --- a/utility/ui-util.test.ts +++ b/utility/ui-util.test.ts @@ -1,5 +1,5 @@ import { initialState, State, UISizeValue } from '../reducers/global-reducer' -import { getRowId, getSize, isUIBig, isUISmall } from './ui-util' +import { getSize, isUIBig, isUISmall } from './ui-util' const globalStateDummy: State = { ...initialState, @@ -38,10 +38,4 @@ describe('ui-util', () => { ) }) }) - describe('getRowId', () => { - it('should return correct id', async () => { - expect(getRowId(true, 10, 20)).toBe(11) - expect(getRowId(false, 10, 20)).toBe(10) - }) - }) }) diff --git a/utility/ui-util.ts b/utility/ui-util.ts index 3dfc7d9b..77c9197b 100644 --- a/utility/ui-util.ts +++ b/utility/ui-util.ts @@ -15,9 +15,3 @@ export const getSize = (globalState: State, key: UISizeKey): GridSize => { const size = globalState.uiSizes.find(s => s.key === key) return (size !== undefined ? size.value : UISizeValue.Small) as GridSize } - -export const getRowId = ( - newestFirst: boolean, - rowIndex: number, - rowsLength: number -) => (newestFirst ? rowIndex + 1 : rowsLength - rowIndex) From 478bd80635a9dd184e7e3e63f8cc2c4e4d698ff4 Mon Sep 17 00:00:00 2001 From: Jack Ord <36296721+j-or@users.noreply.github.com> Date: Thu, 23 Jun 2022 10:07:45 +0000 Subject: [PATCH 07/11] Remove suggested values, calc row span --- components/data-points/data-points.tsx | 6 ----- .../editable-table-expanded-row.tsx | 25 ------------------- .../editable-table/editable-table-row.tsx | 3 --- components/editable-table/editable-table.tsx | 5 +--- 4 files changed, 1 insertion(+), 38 deletions(-) diff --git a/components/data-points/data-points.tsx b/components/data-points/data-points.tsx index e737147d..e9440ded 100644 --- a/components/data-points/data-points.tsx +++ b/components/data-points/data-points.tsx @@ -47,11 +47,6 @@ export default function DataPoints(props: DataPointProps) { const isLoadingState = state.rows.length === 0 const global = useGlobal() const newestFirst = global.state.dataPointsNewestFirst - const { - state: { - experiment: { results }, - }, - } = useExperiment() const scoreNames = useMemo( () => scoreVariables.filter(it => it.enabled).map(it => it.name), @@ -227,7 +222,6 @@ export default function DataPoints(props: DataPointProps) { void onAdd: (row: TableDataRow) => void onSave: (row: TableDataRow) => void @@ -29,7 +28,6 @@ export const EditableTableExpandedRow = ({ colSpan, rowId, tableRow, - suggestedValues, setExpanded, onAdd, onSave, @@ -110,29 +108,6 @@ export const EditableTableExpandedRow = ({ - {tableRow.isNew && ( - - )}