Fix: make OperatorInfo receipts table reset values on cancel
This commit is contained in:
parent
f4caad2090
commit
5e1c70b18b
1 changed files with 66 additions and 55 deletions
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue