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

Import fix

Browse source
This commit is contained in:
José Oliveira 2021-02-08 18:20:06 +00:00 • committed by Josh Harvey
parent a3973f3258
commit 2ccbbdeb50
1 changed files with 267 additions and 268 deletions
Download patch file Download diff file Expand all files Collapse all files

535
new-lamassu-admin/src/components/editableTable/Row.js
View file

@ -1,268 +1,267 @@
/* eslint-disable import/order */ import { makeStyles } from '@material-ui/core'
import { makeStyles } from '@material-ui/core' import classnames from 'classnames'
import classnames from 'classnames' import { Field, useFormikContext } from 'formik'
import { Field, useFormikContext } from 'formik' import * as R from 'ramda'
import * as R from 'ramda' import React, { useContext, useState } from 'react'
import React, { useContext, useState } from 'react'
import { DeleteDialog } from 'src/components/DeleteDialog'
import { DeleteDialog } from 'src/components/DeleteDialog' import { Link, IconButton } from 'src/components/buttons'
import { Link, IconButton } from 'src/components/buttons' import { Td, Tr } from 'src/components/fake-table/Table'
import { Td, Tr } from 'src/components/fake-table/Table' import { Switch } from 'src/components/inputs'
import { Switch } from 'src/components/inputs' import { TL2 } from 'src/components/typography'
import { TL2 } from 'src/components/typography' import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg' import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg' import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg' import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg' import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
import TableCtx from './Context'
import TableCtx from './Context' import styles from './Row.styles'
import styles from './Row.styles'
const useStyles = makeStyles(styles)
const useStyles = makeStyles(styles)
const ActionCol = ({ disabled, editing }) => {
const ActionCol = ({ disabled, editing }) => { const classes = useStyles()
const classes = useStyles() const { values, submitForm, resetForm } = useFormikContext()
const { values, submitForm, resetForm } = useFormikContext() const {
const { editWidth,
editWidth, onEdit,
onEdit, enableEdit,
enableEdit, enableDelete,
enableDelete, disableRowEdit,
disableRowEdit, onDelete,
onDelete, deleteWidth,
deleteWidth, enableToggle,
enableToggle, onToggle,
onToggle, toggleWidth,
toggleWidth, forceAdd,
forceAdd, clearError,
clearError, actionColSize,
actionColSize, error
error } = useContext(TableCtx)
} = useContext(TableCtx)
const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
const disableEdit = disabled || (disableRowEdit && disableRowEdit(values)) const cancel = () => {
const cancel = () => { clearError()
clearError() resetForm()
resetForm() }
}
const [deleteDialog, setDeleteDialog] = useState(false)
const [deleteDialog, setDeleteDialog] = useState(false)
const onConfirmed = () => {
const onConfirmed = () => { onDelete(values.id).then(res => {
onDelete(values.id).then(res => { if (!R.isNil(res)) setDeleteDialog(false)
if (!R.isNil(res)) setDeleteDialog(false) })
}) }
}
return (
return ( <>
<> {editing && (
{editing && ( <Td textAlign="center" width={actionColSize}>
<Td textAlign="center" width={actionColSize}> <Link
<Link className={classes.saveButton}
className={classes.saveButton} type="submit"
type="submit" color="primary"
color="primary" onClick={submitForm}>
onClick={submitForm}> Save
Save </Link>
</Link> {!forceAdd && (
{!forceAdd && ( <Link color="secondary" onClick={cancel}>
<Link color="secondary" onClick={cancel}> Cancel
Cancel </Link>
</Link> )}
)} </Td>
</Td> )}
)} {!editing && enableEdit && (
{!editing && enableEdit && ( <Td textAlign="center" width={editWidth}>
<Td textAlign="center" width={editWidth}> <IconButton
<IconButton disabled={disableEdit}
disabled={disableEdit} className={classes.editButton}
className={classes.editButton} onClick={() => onEdit && onEdit(values.id)}>
onClick={() => onEdit && onEdit(values.id)}> {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
{disableEdit ? <DisabledEditIcon /> : <EditIcon />} </IconButton>
</IconButton> </Td>
</Td> )}
)} {!editing && enableDelete && (
{!editing && enableDelete && ( <Td textAlign="center" width={deleteWidth}>
<Td textAlign="center" width={deleteWidth}> <IconButton
<IconButton disabled={disabled}
disabled={disabled} onClick={() => {
onClick={() => { setDeleteDialog(true)
setDeleteDialog(true) }}>
}}> {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />} </IconButton>
</IconButton> <DeleteDialog
<DeleteDialog open={deleteDialog}
open={deleteDialog} setDeleteDialog={setDeleteDialog}
setDeleteDialog={setDeleteDialog} onConfirmed={onConfirmed}
onConfirmed={onConfirmed} onDismissed={() => {
onDismissed={() => { setDeleteDialog(false)
setDeleteDialog(false) clearError()
clearError() }}
}} errorMessage={error}
errorMessage={error} />
/> </Td>
</Td> )}
)} {!editing && enableToggle && (
{!editing && enableToggle && ( <Td textAlign="center" width={toggleWidth}>
<Td textAlign="center" width={toggleWidth}> <Switch
<Switch checked={!!values.active}
checked={!!values.active} value={!!values.active}
value={!!values.active} disabled={disabled}
disabled={disabled} onChange={() => onToggle(values.id)}
onChange={() => onToggle(values.id)} />
/> </Td>
</Td> )}
)} </>
</> )
) }
}
const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => { const {
const { name,
name, bypassField,
bypassField, input,
input, editable = true,
editable = true, size,
size, bold,
bold, width,
width, textAlign,
textAlign, suffix,
suffix, SuffixComponent = TL2,
SuffixComponent = TL2, textStyle = it => {},
textStyle = it => {}, view = it => it?.toString(),
view = it => it?.toString(), inputProps = {}
inputProps = {} } = config
} = config
const { values } = useFormikContext()
const { values } = useFormikContext() const classes = useStyles({ textAlign, size })
const classes = useStyles({ textAlign, size })
const innerProps = {
const innerProps = { fullWidth: true,
fullWidth: true, autoFocus: focus,
autoFocus: focus, size,
size, bold,
bold, textAlign,
textAlign, ...inputProps
...inputProps }
}
const isEditing = editing && editable
const isEditing = editing && editable const isField = !bypassField
const isField = !bypassField
return (
return ( <Td
<Td className={{
className={{ [classes.extraPaddingRight]: extraPaddingRight,
[classes.extraPaddingRight]: extraPaddingRight, [classes.extraPadding]: extraPadding,
[classes.extraPadding]: extraPadding, [classes.withSuffix]: suffix
[classes.withSuffix]: suffix }}
}} width={width}
width={width} size={size}
size={size} bold={bold}
bold={bold} textAlign={textAlign}>
textAlign={textAlign}> {isEditing && isField && (
{isEditing && isField && ( <Field name={name} component={input} {...innerProps} />
<Field name={name} component={input} {...innerProps} /> )}
)} {isEditing && !isField && <config.input name={name} />}
{isEditing && !isField && <config.input name={name} />} {!isEditing && values && (
{!isEditing && values && ( <div style={textStyle(values, isEditing)}>
<div style={textStyle(values, isEditing)}> {view(values[name], values)}
{view(values[name], values)} </div>
</div> )}
)} {suffix && (
{suffix && ( <SuffixComponent
<SuffixComponent className={classes.suffix}
className={classes.suffix} style={isEditing ? {} : textStyle(values, isEditing)}>
style={isEditing ? {} : textStyle(values, isEditing)}> {suffix}
{suffix} </SuffixComponent>
</SuffixComponent> )}
)} </Td>
</Td> )
) }
}
const groupStriped = elements => {
const groupStriped = elements => { const [toStripe, noStripe] = R.partition(R.propEq('stripe', true))(elements)
const [toStripe, noStripe] = R.partition(R.propEq('stripe', true))(elements)
if (!toStripe.length) {
if (!toStripe.length) { return elements
return elements }
}
const index = R.indexOf(toStripe[0], elements)
const index = R.indexOf(toStripe[0], elements) const width = R.compose(R.sum, R.map(R.path(['width'])))(toStripe)
const width = R.compose(R.sum, R.map(R.path(['width'])))(toStripe)
return R.insert(
return R.insert( index,
index, { width, editable: false, view: () => <StripesSvg /> },
{ width, editable: false, view: () => <StripesSvg /> }, noStripe
noStripe )
) }
}
const ERow = ({ editing, disabled, lastOfGroup }) => {
const ERow = ({ editing, disabled, lastOfGroup }) => { const { touched, errors, values } = useFormikContext()
const { touched, errors, values } = useFormikContext() const {
const { elements,
elements, enableEdit,
enableEdit, enableDelete,
enableDelete, error,
error, enableToggle,
enableToggle, rowSize,
rowSize, stripeWhen
stripeWhen } = useContext(TableCtx)
} = useContext(TableCtx)
const classes = useStyles()
const classes = useStyles()
const shouldStripe = stripeWhen && stripeWhen(values)
const shouldStripe = stripeWhen && stripeWhen(values)
const innerElements = shouldStripe ? groupStriped(elements) : elements
const innerElements = shouldStripe ? groupStriped(elements) : elements const [toSHeader] = R.partition(R.has('doubleHeader'))(elements)
const [toSHeader] = R.partition(R.has('doubleHeader'))(elements)
const extraPaddingIndex = toSHeader?.length
const extraPaddingIndex = toSHeader?.length ? R.indexOf(toSHeader[0], elements)
? R.indexOf(toSHeader[0], elements) : -1
: -1
const extraPaddingRightIndex = toSHeader?.length
const extraPaddingRightIndex = toSHeader?.length ? R.indexOf(toSHeader[toSHeader.length - 1], elements)
? R.indexOf(toSHeader[toSHeader.length - 1], elements) : -1
: -1
const elementToFocusIndex = innerElements.findIndex(
const elementToFocusIndex = innerElements.findIndex( it => it.editable === undefined || it.editable
it => it.editable === undefined || it.editable )
)
const classNames = {
const classNames = { [classes.lastOfGroup]: lastOfGroup
[classes.lastOfGroup]: lastOfGroup }
}
const touchedErrors = R.pick(R.keys(touched), errors)
const touchedErrors = R.pick(R.keys(touched), errors) const hasTouchedErrors = touchedErrors && R.keys(touchedErrors).length > 0
const hasTouchedErrors = touchedErrors && R.keys(touchedErrors).length > 0 const hasErrors = hasTouchedErrors || !!error
const hasErrors = hasTouchedErrors || !!error
const errorMessage =
const errorMessage = error || (touchedErrors && R.values(touchedErrors).join(', '))
error || (touchedErrors && R.values(touchedErrors).join(', '))
return (
return ( <Tr
<Tr className={classnames(classNames)}
className={classnames(classNames)} size={rowSize}
size={rowSize} error={editing && hasErrors}
error={editing && hasErrors} errorMessage={errorMessage}>
errorMessage={errorMessage}> {innerElements.map((it, idx) => {
{innerElements.map((it, idx) => { return (
return ( <ECol
<ECol key={idx}
key={idx} config={it}
config={it} editing={editing}
editing={editing} focus={idx === elementToFocusIndex && editing}
focus={idx === elementToFocusIndex && editing} extraPaddingRight={extraPaddingRightIndex === idx}
extraPaddingRight={extraPaddingRightIndex === idx} extraPadding={extraPaddingIndex === idx}
extraPadding={extraPaddingIndex === idx} />
/> )
) })}
})} {(enableEdit || enableDelete || enableToggle) && (
{(enableEdit || enableDelete || enableToggle) && ( <ActionCol disabled={disabled} editing={editing} />
<ActionCol disabled={disabled} editing={editing} /> )}
)} </Tr>
</Tr> )
) }
}
export default ERow
export default ERow