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

feat: add dynamic position to editable cards, reject/authorize buttons

Browse source
This commit is contained in:
José Oliveira 2021-10-18 13:42:55 +01:00
parent 5cc63d05a6
commit 550bc2b7a4
9 changed files with 403 additions and 319 deletions
Download patch file Download diff file Expand all files Collapse all files

182
new-lamassu-admin/src/pages/Customers/components/EditableCard.js
View file

@ -1,3 +1,4 @@
import { CardContent, Card, Grid } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import { Form, Formik, Field as FormikField } from 'formik'
@ -5,14 +6,23 @@ import { useState, React } from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { MainStatus } from 'src/components/Status'
import { Tooltip } from 'src/components/Tooltip'
import { ActionButton } from 'src/components/buttons'
import { Label1, Info3 } from 'src/components/typography'
import { Label1, Info3, H3 } from 'src/components/typography'
import {
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED,
OVERRIDE_PENDING
} from 'src/pages/Customers/components/propertyCard'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edit/white.svg'
import { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/button/authorize/white.svg'
import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg'
import { ReactComponent as CancelReversedIcon } from 'src/styling/icons/button/cancel/white.svg'
import { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
import { ReactComponent as SaveReversedIcon } from 'src/styling/icons/circle buttons/save/white.svg'
import { ReactComponent as SaveIcon } from 'src/styling/icons/circle buttons/save/zodiac.svg'
import { comet } from 'src/styling/variables'
import styles from './EditableCard.styles.js'
@ -92,66 +102,136 @@ const EditableField = ({ editing, field, size, ...props }) => {
)
}
const EditableCard = ({ data, save }) => {
const EditableCard = ({
data,
save,
authorize,
reject,
state,
title,
titleIcon,
children
}) => {
const classes = useStyles()
const [editing, setEditing] = useState(false)
const [error, setError] = useState(null)
const label1ClassNames = {
[classes.label1]: true,
[classes.label1Pending]: state === OVERRIDE_PENDING,
[classes.label1Rejected]: state === OVERRIDE_REJECTED,
[classes.label1Accepted]: state === OVERRIDE_AUTHORIZED
}
const isNotAuthorized =
state === OVERRIDE_REJECTED || state === OVERRIDE_PENDING
const authorized =
state === OVERRIDE_PENDING
? { label: 'Pending', type: 'neutral' }
: state === OVERRIDE_REJECTED
? { label: 'Rejected', type: 'error' }
: { label: 'Accepted', type: 'success' }
const editableField = field => {
return <EditableField field={field} editing={editing} size={180} />
}
return (
<div>
<Formik
validateOnBlur={false}
validateOnChange={false}
enableReinitialize
onSubmit={values => save(values)}
onReset={() => {
setEditing(false)
setError(false)
}}>
<Form>
<PromptWhenDirty />
<div className={classes.row}>
{data.map((field, idx) => (
<EditableField key={idx} field={field} editing={editing} />
))}
<Card className={classes.card}>
<CardContent>
<div className={classes.cardHeader}>
{titleIcon}
<H3 className={classes.cardTitle}>{title}</H3>
<Tooltip width={304}></Tooltip>
<div className={classnames(label1ClassNames)}>
<MainStatus statuses={[authorized]} />
</div>
</div>
<div className={classes.edit}>
{!editing && (
<div className={classes.editButton}>
<ActionButton
color="primary"
Icon={EditIcon}
InverseIcon={EditReversedIcon}
onClick={() => setEditing(true)}>
{`Edit`}
</ActionButton>
<Formik
validateOnBlur={false}
validateOnChange={false}
enableReinitialize
onSubmit={values => save(values)}
onReset={() => {
setEditing(false)
setError(false)
}}>
<Form>
<PromptWhenDirty />
<div className={classes.row}>
<Grid container>
<Grid container direction="column" item xs={6}>
{data?.map((field, idx) => {
return idx >= 0 && idx < 4 ? editableField(field) : null
})}
</Grid>
<Grid container direction="column" item xs={6}>
{data?.map((field, idx) => {
return idx >= 4 ? editableField(field) : null
})}
</Grid>
</Grid>
</div>
)}
{editing && (
<div className={classes.editingButtons}>
<div className={classes.saveButton}>
<ActionButton
color="secondary"
Icon={AuthorizeIcon}
InverseIcon={AuthorizeReversedIcon}
type="submit">
Save
</ActionButton>
</div>
<ActionButton
color="secondary"
Icon={CancelIcon}
InverseIcon={CancelReversedIcon}
type="reset">
Cancel
</ActionButton>
{error && <ErrorMessage>Failed to save changes</ErrorMessage>}
{children}
<div className={classes.edit}>
{!editing && (
<div className={classes.editButton}>
<ActionButton
color="primary"
Icon={EditIcon}
InverseIcon={EditReversedIcon}
onClick={() => setEditing(true)}>
{`Edit`}
</ActionButton>
</div>
)}
{editing && (
<div className={classes.editingButtons}>
{data && (
<div className={classes.button}>
<ActionButton
color="secondary"
Icon={SaveIcon}
InverseIcon={SaveReversedIcon}
type="submit">
Save
</ActionButton>
</div>
)}
<div className={classes.button}>
<ActionButton
color="secondary"
Icon={CancelIcon}
InverseIcon={CancelReversedIcon}
type="reset">
Cancel
</ActionButton>
</div>
<ActionButton
color="secondary"
Icon={isNotAuthorized ? AuthorizeIcon : CancelIcon}
InverseIcon={
isNotAuthorized
? AuthorizeReversedIcon
: CancelReversedIcon
}
type="submit"
onClick={
isNotAuthorized ? () => authorize() : () => reject()
}>
{isNotAuthorized ? 'Authorize' : 'Reject'}
</ActionButton>
{error && (
<ErrorMessage>Failed to save changes</ErrorMessage>
)}
</div>
)}
</div>
)}
</div>
</Form>
</Formik>
</Form>
</Formik>
</CardContent>
</Card>
</div>
)
}