@@ -52,8 +55,8 @@ const DataTable = memo(({ elements, data }) => {
{elements.map(
(
{
- header,
size,
+ width,
className,
textAlign,
view = it => it?.toString()
@@ -63,6 +66,7 @@ const DataTable = memo(({ elements, data }) => {
{view(data[index])}
diff --git a/new-lamassu-admin/src/components/editableTable/Header.js b/new-lamassu-admin/src/components/editableTable/Header.js
new file mode 100644
index 00000000..74306fb3
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableTable/Header.js
@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { Td, THead } from 'src/components/fake-table/Table'
+import { startCase } from 'src/utils/string'
+
+import { ACTION_COL_SIZE, DEFAULT_COL_SIZE } from './consts'
+
+const Header = ({ elements, enableEdit, enableDelete }) => {
+ const actionColSize =
+ enableDelete && enableEdit ? ACTION_COL_SIZE / 2 : ACTION_COL_SIZE
+
+ return (
+
+ {elements.map(
+ ({ name, width = DEFAULT_COL_SIZE, header, textAlign }, idx) => (
+ |
+ {header || startCase(name)}
+ |
+ )
+ )}
+ {enableEdit && (
+
+ Edit
+ |
+ )}
+ {enableDelete && (
+
+ Delete
+ |
+ )}
+
+ )
+}
+
+export default Header
diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js
index 1d7e4e16..c25b1cff 100644
--- a/new-lamassu-admin/src/components/editableTable/Row.js
+++ b/new-lamassu-admin/src/components/editableTable/Row.js
@@ -1,250 +1,150 @@
-import React, { memo } from 'react'
-import * as R from 'ramda'
-import classnames from 'classnames'
-import { Form, Formik, Field, useFormikContext } from 'formik'
import { makeStyles } from '@material-ui/core'
+import classnames from 'classnames'
+import { Field, useFormikContext } from 'formik'
+import React from 'react'
-import { Link } from 'src/components/buttons'
-import { Td, Tr, CellDoubleLevel } from 'src/components/fake-table/Table'
-import { TextInputDisplay } from 'src/components/inputs/base/TextInput'
-import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
+import { Link, IconButton } from 'src/components/buttons'
+import { Td, Tr } from 'src/components/fake-table/Table'
+import { TL2 } from 'src/components/typography'
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
-// import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
-// import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
+import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
+import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
-const styles = {
- button: {
- border: 'none',
- backgroundColor: 'transparent',
- outline: 0,
- cursor: 'pointer'
- },
- actionCol: {
- display: 'flex',
- marginLeft: 'auto'
- },
- actionColDisplayMode: {
- justifyContent: 'center'
- },
- actionColEditMode: {
- justifyContent: 'flex-end',
- '& > :first-child': {
- marginRight: 16
- }
- },
- textInput: {
- '& > .MuiInputBase-input': {
- width: 282
- }
- }
- // doubleLevelRow: {
- // '& > div': {
- // marginRight: 72
- // }
- // }
-}
+import styles from './Row.styles'
+import { ACTION_COL_SIZE } from './consts'
const useStyles = makeStyles(styles)
-const ERow = memo(
- ({ elements, editing, setEditing, disableAction, action }) => {
- const classes = useStyles()
+const ActionCol = ({
+ editing,
+ setEditing,
+ enableEdit,
+ disabled,
+ onDelete,
+ enableDelete
+}) => {
+ const classes = useStyles()
+ const { values, submitForm, resetForm } = useFormikContext()
- const Cell = ({
- name,
- input,
- type,
- display,
- className,
- size,
- textAlign,
- inputProps,
- editing
- }) => {
- return (
- |
- {editing && (
-
- )}
- {!editing && type === 'text' && (
-
- )}
+ const actionColSize =
+ enableDelete && enableEdit ? ACTION_COL_SIZE / 2 : ACTION_COL_SIZE
+
+ return (
+ <>
+ {editing && (
+ |
+
+ Cancel
+
+
+ Save
+
|
- )
- }
-
- const actionCol = R.last(elements)
- const { values, errors } = useFormikContext()
-
- const actionColClasses = {
- [classes.actionCol]: true,
- [classes.actionColDisplayMode]: !editing,
- [classes.actionColEditMode]: editing
- }
-
- const icon = (action, disabled) => {
- if (action === 'delete' && !disabled) return
- if (action === 'delete' && disabled) return
- }
-
- return (
-
- {R.init(elements).map((element, idx) => {
- const colClasses = {
- [classes.textInput]: true
- }
-
- if (Array.isArray(element)) {
- return (
-
- {R.map(
- (
- {
- name,
- input,
- size,
- textAlign,
- type,
- view = it => it?.toString(),
- inputProps
- },
- idx
- ) => (
- |
- //
- // (x === '' ? '-' : x)}
- // decoration="%"
- // className={classes.eRowField}
- // setError={setError}
- // />
- // |
- )
- )(R.tail(element))}
-
- )
- }
-
- const {
- name,
- input,
- size,
- textAlign,
- type,
- view = it => it?.toString(),
- inputProps
- } = element
-
- return (
- |
- //
- // {editing && (
- //
- // )}
- // {!editing && type === 'text' && (
- //
- // )}
- // |
- )
- })}
-
- {!editing && !disableAction && (
-
- )}
- {!editing && disableAction && (
- {icon(actionCol.name, disableAction)}
- )}
- {editing && (
- <>
-
- Cancel
-
-
- Save
-
-
- )}
+ )}
+ {!editing && enableEdit && (
+ |
+ setEditing && setEditing(values.id)}>
+ {disabled ? : }
+
|
-
- )
- }
-)
+ )}
+ {!editing && enableDelete && (
+
+ onDelete(values.id)}>
+ {disabled ? : }
+
+ |
+ )}
+
+ )
+}
-const ERowWithFormik = memo(
- ({
- initialValues,
- validationSchema,
- save,
- reset,
- action,
- elements,
- editing,
- disableAction
- }) => {
- return (
-
-
-
- )
- }
-)
+const ECol = ({ editing, config }) => {
+ const {
+ name,
+ input,
+ size,
+ bold,
+ width,
+ textAlign,
+ suffix,
+ view = it => it?.toString(),
+ inputProps = {}
+ } = config
-export default ERowWithFormik
+ const { values } = useFormikContext()
+ const classes = useStyles({ textAlign, size })
+
+ const viewClasses = {
+ [classes.bold]: bold,
+ [classes.size]: true
+ }
+
+ const iProps = {
+ fullWidth: true,
+ size,
+ bold,
+ textAlign,
+ ...inputProps
+ }
+
+ // Autocomplete
+ if (iProps.options && !iProps.getLabel) {
+ iProps.getLabel = view
+ }
+
+ return (
+
+ {editing && }
+ {!editing && values && (
+ {view(values[name])}
+ )}
+ {suffix && {suffix}}
+ |
+ )
+}
+
+const ERow = ({
+ elements,
+ enableEdit,
+ enableDelete,
+ onDelete,
+ editing,
+ setEditing,
+ disabled
+}) => {
+ const { errors } = useFormikContext()
+
+ return (
+
+ {elements.map((it, idx) => (
+
+ ))}
+ {(enableEdit || enableDelete) && (
+
+ )}
+
+ )
+}
+
+export default ERow
diff --git a/new-lamassu-admin/src/components/editableTable/Row.styles.js b/new-lamassu-admin/src/components/editableTable/Row.styles.js
new file mode 100644
index 00000000..65faac11
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableTable/Row.styles.js
@@ -0,0 +1,17 @@
+import { bySize, bold } from 'src/styling/helpers'
+
+export default {
+ cancelButton: {
+ marginRight: 20
+ },
+ withSuffix: ({ textAlign }) => ({
+ display: 'flex',
+ alignItems: 'baseline',
+ justifyContent: textAlign === 'right' && 'end'
+ }),
+ suffix: {
+ marginLeft: 7
+ },
+ size: ({ size }) => bySize(size),
+ bold
+}
diff --git a/new-lamassu-admin/src/components/editableTable/Table.js b/new-lamassu-admin/src/components/editableTable/Table.js
index 100a9b93..ecc9d57d 100644
--- a/new-lamassu-admin/src/components/editableTable/Table.js
+++ b/new-lamassu-admin/src/components/editableTable/Table.js
@@ -1,124 +1,152 @@
-import React, { memo } from 'react'
+import { makeStyles } from '@material-ui/core'
+import { Form, Formik } from 'formik'
import * as R from 'ramda'
+import React, { useState } from 'react'
+import { v4 } from 'uuid'
-import {
- Th,
- ThDoubleLevel,
- THead,
- TBody,
- Table,
- TDoubleLevelHead
-} from 'src/components/fake-table/Table'
-import { startCase } from 'src/utils/string'
+import Link from 'src/components/buttons/Link.js'
+import { AddButton } from 'src/components/buttons/index.js'
+import { TBody, Table } from 'src/components/fake-table/Table'
+import { Info2 } from 'src/components/typography'
+import Header from './Header'
import ERow from './Row'
+import styles from './Table.styles'
+import { DEFAULT_COL_SIZE, ACTION_COL_SIZE } from './consts'
-const ETHead = memo(({ elements, className }) => {
- const action = R.last(elements)
+const useStyles = makeStyles(styles)
- return (
-
- {R.init(elements).map(({ name, size, display, textAlign }, idx) => (
-
- {display}
- |
- ))}
-
- {startCase(action.name)}
- |
-
- )
-})
-
-const ETDoubleHead = memo(({ elements, className }) => {
- const action = R.last(elements)
-
- return (
-
- {R.init(elements).map((element, idx) => {
- if (Array.isArray(element)) {
- return (
-
- {R.map(({ name, size, display, textAlign }) => (
-
- {display}
- |
- ))(R.tail(element))}
-
- )
- }
-
- const { name, size, display, textAlign } = element
- return (
-
- {display}
- |
- )
- })}
-
- {startCase(action.name)}
- |
-
- )
-})
-
-const ETable = memo(
- ({
- elements = [],
- data = [],
- save,
- reset,
- action,
- initialValues,
- validationSchema,
- editing,
- addingRow,
- disableAction,
- className,
- double
- }) => {
- return (
-
- {!double && }
- {double && (
-
- )}
-
- {addingRow && (
-
- )}
- {data.map((it, idx) => (
- reset(it)}
- action={action}
- validationSchema={validationSchema}
- disableAction={disableAction}
- editing={editing[idx]}
- />
- ))}
-
-
- )
- }
+const getWidth = R.compose(
+ R.reduce(R.add)(0),
+ R.map(it => it.width ?? DEFAULT_COL_SIZE)
)
+const ETable = ({
+ name,
+ title,
+ elements = [],
+ data = [],
+ save,
+ validationSchema,
+ enableCreate,
+ forceDisable,
+ disableAdd,
+ enableDelete,
+ initialValues,
+ enableEdit,
+ setEditing,
+ createText = 'Add override'
+}) => {
+ const [editingId, setEditingId] = useState(null)
+ const [adding, setAdding] = useState(false)
+
+ const innerSave = async it => {
+ const index = R.findIndex(R.propEq('id', it.id))(data)
+ const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
+
+ // no response means the save failed
+ const response = await save({ [name]: list })
+ if (!response) return
+ setAdding(false)
+ setEditingId(null)
+ }
+
+ const onDelete = id => {
+ const list = R.reject(it => it.id === id, data)
+ return save({ [name]: list })
+ }
+
+ const onReset = () => {
+ setAdding(false)
+ setEditingId(null)
+ setEditing && setEditing(false)
+ }
+
+ const onEdit = it => {
+ setEditingId(it)
+ setEditing && setEditing(it, true)
+ }
+
+ const addField = () => setAdding(true)
+
+ const actionSize = enableEdit || enableDelete ? ACTION_COL_SIZE : 0
+ const width = getWidth(elements) + actionSize
+ const classes = useStyles({ width })
+
+ const showButtonOnEmpty = !data.length && enableCreate && !adding
+ const canAdd = !forceDisable && !editingId && !disableAdd && !adding
+ const showTable = adding || data.length !== 0
+
+ return (
+
+ {showButtonOnEmpty && (
+
+ {createText}
+
+ )}
+ {showTable && (
+ <>
+
+ {title && {title}}
+ {enableCreate && canAdd && (
+
+ {createText}
+
+ )}
+
+
+
+
+ {adding && (
+
+
+
+ )}
+ {data.map((it, idx) => (
+
+
+
+ ))}
+
+
+
+ )}
+
+ )
+}
+
export default ETable
diff --git a/new-lamassu-admin/src/components/editableTable/Table.styles.js b/new-lamassu-admin/src/components/editableTable/Table.styles.js
new file mode 100644
index 00000000..00f93bd6
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableTable/Table.styles.js
@@ -0,0 +1,21 @@
+import { offColor } from 'src/styling/variables'
+
+export default {
+ wrapper: ({ width }) => ({
+ width: width
+ }),
+ addLink: {
+ marginLeft: 'auto'
+ },
+ title: {
+ margin: 0,
+ color: offColor
+ },
+ outerHeader: {
+ minHeight: 16,
+ marginBottom: 24,
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center'
+ }
+}
diff --git a/new-lamassu-admin/src/components/editableTable/consts.js b/new-lamassu-admin/src/components/editableTable/consts.js
new file mode 100644
index 00000000..da6fd5af
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableTable/consts.js
@@ -0,0 +1,4 @@
+const ACTION_COL_SIZE = 175
+const DEFAULT_COL_SIZE = 100
+
+export { ACTION_COL_SIZE, DEFAULT_COL_SIZE }
diff --git a/new-lamassu-admin/src/components/expandable-table/ExpTable.js b/new-lamassu-admin/src/components/expandable-table/ExpTable.js
index 52a6ae9e..de996cb6 100644
--- a/new-lamassu-admin/src/components/expandable-table/ExpTable.js
+++ b/new-lamassu-admin/src/components/expandable-table/ExpTable.js
@@ -8,10 +8,10 @@ import {
CellMeasurerCache
} from 'react-virtualized'
+import { THead, Tr, Td, Th } from 'src/components/fake-table/Table'
import { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'
import { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'
import { mainWidth } from 'src/styling/variables'
-import { THead, Tr, Td, Th } from 'src/components/fake-table/Table'
const styles = {
expandButton: {
@@ -48,25 +48,19 @@ const ExpRow = ({
.slice(0, -1)
.map(
(
- {
- header,
- size,
- className,
- textAlign,
- view = it => it?.toString()
- },
+ { width, className, textAlign, view = it => it?.toString() },
idx
) => (
{view(data)}
|
)
)}
-
+ |
|