lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: rework wallet screen

Browse source
This commit is contained in:
Taranto 2020-04-07 19:03:18 +01:00 • committed by Josh Harvey
parent 1f7ae74b42
commit 1f6d272aa0
103 changed files with 2094 additions and 3892 deletions
Download patch file Download diff file Expand all files Collapse all files

179
new-lamassu-admin/src/components/editableTable/Table.js
View file

@ -7,12 +7,15 @@ import { v4 } from 'uuid'
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 { Info2, TL1 } from 'src/components/typography'
import TableCtx from './Context'
import Header from './Header'
import ERow from './Row'
import styles from './Table.styles'
import { DEFAULT_COL_SIZE, ACTION_COL_SIZE } from './consts'
const ACTION_COL_SIZE = 87
const DEFAULT_COL_SIZE = 100
const useStyles = makeStyles(styles)
@ -24,17 +27,25 @@ const getWidth = R.compose(
const ETable = ({
name,
title,
titleLg,
elements = [],
data = [],
save,
validationSchema,
enableCreate,
enableEdit,
editWidth: outerEditWidth,
enableDelete,
deleteWidth = ACTION_COL_SIZE,
enableToggle,
toggleWidth = ACTION_COL_SIZE,
onToggle,
forceDisable,
disableAdd,
enableDelete,
initialValues,
enableEdit,
setEditing,
stripeWhen,
disableRowEdit,
createText = 'Add override'
}) => {
const [editingId, setEditingId] = useState(null)
@ -45,7 +56,7 @@ const ETable = ({
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 })
const response = await save({ [name]: list }, it)
if (!response) return
setAdding(false)
setEditingId(null)
@ -69,83 +80,103 @@ const ETable = ({
const addField = () => setAdding(true)
const actionSize = enableEdit || enableDelete ? ACTION_COL_SIZE : 0
const width = getWidth(elements) + actionSize
const widthIfEditNull =
enableDelete || enableToggle ? ACTION_COL_SIZE : ACTION_COL_SIZE * 2
const editWidth = R.defaultTo(widthIfEditNull)(outerEditWidth)
const actionColSize =
((enableDelete && deleteWidth) ?? 0) +
((enableEdit && editWidth) ?? 0) +
((enableToggle && toggleWidth) ?? 0)
const width = getWidth(elements) + actionColSize
const classes = useStyles({ width })
const showButtonOnEmpty = !data.length && enableCreate && !adding
const canAdd = !forceDisable && !editingId && !disableAdd && !adding
const showTable = adding || data.length !== 0
const ctxValue = {
elements,
enableEdit,
onEdit,
disableRowEdit,
editWidth,
enableDelete,
onDelete,
deleteWidth,
enableToggle,
onToggle,
toggleWidth,
actionColSize,
stripeWhen,
DEFAULT_COL_SIZE
}
return (
<div className={classes.wrapper}>
{showButtonOnEmpty && (
<AddButton disabled={!canAdd} onClick={addField}>
{createText}
</AddButton>
)}
{showTable && (
<>
<div className={classes.outerHeader}>
{title && <Info2 className={classes.title}>{title}</Info2>}
{enableCreate && canAdd && (
<Link className={classes.addLink} onClick={addField}>
{createText}
</Link>
<TableCtx.Provider value={ctxValue}>
<div className={classes.wrapper}>
{showButtonOnEmpty && (
<AddButton disabled={!canAdd} onClick={addField}>
{createText}
</AddButton>
)}
{showTable && (
<>
{(title || enableCreate) && (
<div className={classes.outerHeader}>
{title && titleLg && (
<TL1 className={classes.title}>{title}</TL1>
)}
{title && !titleLg && (
<Info2 className={classes.title}>{title}</Info2>
)}
{enableCreate && canAdd && (
<Link className={classes.addLink} onClick={addField}>
{createText}
</Link>
)}
</div>
)}
</div>
<Table>
<Header
elements={elements}
enableEdit={enableEdit}
enableDelete={enableDelete}
/>
<TBody>
{adding && (
<Formik
initialValues={{ id: v4(), ...initialValues }}
onReset={onReset}
validationSchema={validationSchema}
onSubmit={innerSave}>
<Form>
<ERow
editing={true}
disabled={forceDisable}
enableEdit={enableEdit}
enableDelete={enableDelete}
elements={elements}
/>
</Form>
</Formik>
)}
{data.map((it, idx) => (
<Formik
key={it.id ?? idx}
enableReinitialize
initialValues={it}
onReset={onReset}
validationSchema={validationSchema}
onSubmit={innerSave}>
<Form>
<ERow
editing={editingId === it.id}
disabled={
forceDisable || (editingId && editingId !== it.id)
}
setEditing={onEdit}
onDelete={onDelete}
enableEdit={enableEdit}
enableDelete={enableDelete}
elements={elements}
/>
</Form>
</Formik>
))}
</TBody>
</Table>
</>
)}
</div>
<Table>
<Header />
<TBody>
{adding && (
<Formik
initialValues={{ id: v4(), ...initialValues }}
onReset={onReset}
validationSchema={validationSchema}
onSubmit={innerSave}>
<Form>
<ERow editing={true} disabled={forceDisable} />
</Form>
</Formik>
)}
{data.map((it, idx) => (
<Formik
key={it.id ?? idx}
enableReinitialize
initialValues={it}
onReset={onReset}
validationSchema={validationSchema}
onSubmit={innerSave}>
<Form>
<ERow
editing={editingId === it.id}
disabled={
forceDisable || (editingId && editingId !== it.id)
}
/>
</Form>
</Formik>
))}
</TBody>
</Table>
</>
)}
</div>
</TableCtx.Provider>
)
}