Fix: make OperatorInfo receipts table reset values on cancel

This commit is contained in:
Cesar 2021-01-08 16:11:49 +00:00 committed by Josh Harvey
parent f4caad2090
commit 5e1c70b18b

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,24 +38,24 @@ 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}>
{({ resetForm }) => {
return (
<Form> <Form>
<div className={classes.rowWrapper}> <div className={classes.rowWrapper}>
<H4>{title}</H4> <H4>{title}</H4>
@ -63,8 +65,12 @@ const BooleanPropertiesTable = memo(
Save Save
</Link> </Link>
<Link <Link
type="reset"
className={classes.rightLink} className={classes.rightLink}
onClick={innerCancel} onClick={() => {
resetForm()
setEditing(false)
}}
color="secondary"> color="secondary">
Cancel Cancel
</Link> </Link>
@ -81,7 +87,10 @@ const BooleanPropertiesTable = memo(
<Table className={classes.fillColumn}> <Table className={classes.fillColumn}>
<TableBody className={classes.fillColumn}> <TableBody className={classes.fillColumn}>
{elements.map((it, idx) => ( {elements.map((it, idx) => (
<TableRow key={idx} size="sm" className={classes.tableRow}> <TableRow
key={idx}
size="sm"
className={classes.tableRow}>
<TableCell className={classes.leftTableCell}> <TableCell className={classes.leftTableCell}>
{it.display} {it.display}
</TableCell> </TableCell>
@ -104,6 +113,8 @@ const BooleanPropertiesTable = memo(
</TableBody> </TableBody>
</Table> </Table>
</Form> </Form>
)
}}
</Formik> </Formik>
</div> </div>
) )