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

Fix: make OperatorInfo receipts table reset values on cancel

Browse source
This commit is contained in:
Cesar 2021-01-08 16:11:49 +00:00 • committed by Josh Harvey
parent f4caad2090
commit 5e1c70b18b
1 changed files with 66 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

121
new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js
View file

@ -1,7 +1,7 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import { useFormikContext, Form, Formik, Field as FormikField } from 'formik' import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
import _ from 'lodash' import _ from 'lodash/fp'
import React, { useState, memo } from 'react' import React, { useState, memo } from 'react'
import * as Yup from 'yup' import * as Yup from 'yup'
@ -26,7 +26,9 @@ const BooleanCell = ({ name }) => {
const BooleanPropertiesTable = memo( const BooleanPropertiesTable = memo(
({ title, disabled, data, elements, save, forcedEditing = false }) => { ({ title, disabled, data, elements, save, forcedEditing = false }) => {
const initialValues = _.fromPairs(elements.map(it => [it.name, ''])) const initialValues = _.fromPairs(
elements.map(it => [it.name, data[it.name] || null])
)
const schemaValidation = _.fromPairs( const schemaValidation = _.fromPairs(
elements.map(it => [it.name, Yup.boolean().required()]) elements.map(it => [it.name, Yup.boolean().required()])
) )
@ -36,74 +38,83 @@ const BooleanPropertiesTable = memo(
const classes = useStyles() const classes = useStyles()
const innerSave = async value => { const innerSave = async value => {
save(value) const filteredValues = _.omitBy(_.isNil, value)
save(filteredValues)
setEditing(false) setEditing(false)
} }
const innerCancel = () => setEditing(false)
const radioButtonOptions = [ const radioButtonOptions = [
{ display: 'Yes', code: 'true' }, { display: 'Yes', code: 'true' },
{ display: 'No', code: 'false' } { display: 'No', code: 'false' }
] ]
return ( return (
<div className={classes.booleanPropertiesTableWrapper}> <div className={classes.booleanPropertiesTableWrapper}>
<Formik <Formik
enableReinitialize enableReinitialize
onSubmit={innerSave} onSubmit={innerSave}
initialValues={data || initialValues} initialValues={initialValues}
schemaValidation={schemaValidation}> schemaValidation={schemaValidation}>
<Form> {({ resetForm }) => {
<div className={classes.rowWrapper}> return (
<H4>{title}</H4> <Form>
{editing ? ( <div className={classes.rowWrapper}>
<div className={classes.rightAligned}> <H4>{title}</H4>
<Link type="submit" color="primary"> {editing ? (
Save <div className={classes.rightAligned}>
</Link> <Link type="submit" color="primary">
<Link Save
className={classes.rightLink} </Link>
onClick={innerCancel} <Link
color="secondary"> type="reset"
Cancel className={classes.rightLink}
</Link> onClick={() => {
resetForm()
setEditing(false)
}}
color="secondary">
Cancel
</Link>
</div>
) : (
<IconButton
className={classes.transparentButton}
onClick={() => setEditing(true)}>
{disabled ? <EditIconDisabled /> : <EditIcon />}
</IconButton>
)}
</div> </div>
) : ( <PromptWhenDirty />
<IconButton <Table className={classes.fillColumn}>
className={classes.transparentButton} <TableBody className={classes.fillColumn}>
onClick={() => setEditing(true)}> {elements.map((it, idx) => (
{disabled ? <EditIconDisabled /> : <EditIcon />} <TableRow
</IconButton> key={idx}
)} size="sm"
</div> className={classes.tableRow}>
<PromptWhenDirty /> <TableCell className={classes.leftTableCell}>
<Table className={classes.fillColumn}> {it.display}
<TableBody className={classes.fillColumn}> </TableCell>
{elements.map((it, idx) => ( <TableCell className={classes.rightTableCell}>
<TableRow key={idx} size="sm" className={classes.tableRow}> {editing && (
<TableCell className={classes.leftTableCell}> <FormikField
{it.display} component={RadioGroup}
</TableCell> name={it.name}
<TableCell className={classes.rightTableCell}> options={radioButtonOptions}
{editing && ( className={classnames(
<FormikField classes.radioButtons,
component={RadioGroup} classes.rightTableCell
name={it.name} )}
options={radioButtonOptions} />
className={classnames(
classes.radioButtons,
classes.rightTableCell
)} )}
/> {!editing && <BooleanCell name={it.name} />}
)} </TableCell>
{!editing && <BooleanCell name={it.name} />} </TableRow>
</TableCell> ))}
</TableRow> </TableBody>
))} </Table>
</TableBody> </Form>
</Table> )
</Form> }}
</Formik> </Formik>
</div> </div>
) )