123 lines
4.3 KiB
JavaScript
123 lines
4.3 KiB
JavaScript
import IconButton from '@mui/material/IconButton'
|
|
import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
|
|
import * as R from 'ramda'
|
|
import React, { useState, memo } from 'react'
|
|
import PromptWhenDirty from '../PromptWhenDirty'
|
|
import { H4 } from '../typography'
|
|
import EditIconDisabled from '../../styling/icons/action/edit/disabled.svg?react'
|
|
import EditIcon from '../../styling/icons/action/edit/enabled.svg?react'
|
|
import FalseIcon from '../../styling/icons/table/false.svg?react'
|
|
import TrueIcon from '../../styling/icons/table/true.svg?react'
|
|
import * as Yup from 'yup'
|
|
|
|
import { Link } from '../buttons'
|
|
import { RadioGroup } from '../inputs/formik'
|
|
import { Table, TableBody, TableRow, TableCell } from '../table'
|
|
import SvgIcon from '@mui/material/SvgIcon'
|
|
|
|
const BooleanCell = ({ name }) => {
|
|
const { values } = useFormikContext()
|
|
return values[name] === 'true' ? <TrueIcon /> : <FalseIcon />
|
|
}
|
|
|
|
const BooleanPropertiesTable = memo(
|
|
({ title, disabled, data, elements, save, forcedEditing = false }) => {
|
|
const [editing, setEditing] = useState(forcedEditing)
|
|
|
|
const initialValues = R.fromPairs(
|
|
elements.map(it => [it.name, data[it.name]?.toString() ?? 'false']),
|
|
)
|
|
|
|
const validationSchema = Yup.object().shape(
|
|
R.fromPairs(
|
|
elements.map(it => [
|
|
it.name,
|
|
Yup.mixed().oneOf(['true', 'false', true, false]).required(),
|
|
]),
|
|
),
|
|
)
|
|
|
|
const innerSave = async values => {
|
|
const toBoolean = num => R.equals(num, 'true')
|
|
save(R.mapObjIndexed(toBoolean, R.filter(R.complement(R.isNil))(values)))
|
|
setEditing(false)
|
|
}
|
|
|
|
const radioButtonOptions = [
|
|
{ display: 'Yes', code: 'true' },
|
|
{ display: 'No', code: 'false' },
|
|
]
|
|
return (
|
|
<div className="flex w-sm flex-col ">
|
|
<Formik
|
|
validateOnBlur={false}
|
|
validateOnChange={false}
|
|
enableReinitialize
|
|
onSubmit={innerSave}
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}>
|
|
{({ resetForm }) => {
|
|
return (
|
|
<Form>
|
|
<div className="flex items-center">
|
|
<H4>{title}</H4>
|
|
{editing ? (
|
|
<div className="ml-auto">
|
|
<Link type="submit" color="primary">
|
|
Save
|
|
</Link>
|
|
<Link
|
|
type="reset"
|
|
className="ml-5"
|
|
onClick={() => {
|
|
resetForm()
|
|
setEditing(false)
|
|
}}
|
|
color="secondary">
|
|
Cancel
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<IconButton
|
|
className="my-auto mx-3"
|
|
onClick={() => setEditing(true)}>
|
|
<SvgIcon fontSize="small">
|
|
{disabled ? <EditIconDisabled /> : <EditIcon />}
|
|
</SvgIcon>
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
<PromptWhenDirty />
|
|
<Table className="w-full">
|
|
<TableBody className="w-full">
|
|
{elements.map((it, idx) => (
|
|
<TableRow
|
|
key={idx}
|
|
size="sm"
|
|
className="h-auto py-2 px-4 flex items-center justify-between min-h-8 even:bg-transparent odd:bg-zircon">
|
|
<TableCell className="p-0 w-50">{it.display}</TableCell>
|
|
<TableCell className="p-0 flex">
|
|
{editing && (
|
|
<FormikField
|
|
component={RadioGroup}
|
|
name={it.name}
|
|
options={radioButtonOptions}
|
|
className="flex flex-row m-[-15px] p-0"
|
|
/>
|
|
)}
|
|
{!editing && <BooleanCell name={it.name} />}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Form>
|
|
)
|
|
}}
|
|
</Formik>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
|
|
export default BooleanPropertiesTable
|