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

feat: add icons and make customer data cards editable

Browse source
This commit is contained in:
José Oliveira 2021-10-12 13:54:36 +01:00
parent 4b461c0a57
commit 5cc63d05a6
25 changed files with 431 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

125
new-lamassu-admin/src/pages/Customers/CustomerData.js
View file

@ -1,4 +1,4 @@
import { Box, CardContent, Card } from '@material-ui/core'
import { CardContent, Card } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import moment from 'moment'
@ -6,17 +6,20 @@ import * as R from 'ramda'
import { useState, React } from 'react'
import { Tooltip } from 'src/components/Tooltip'
import { SubpageButton } from 'src/components/buttons'
import { FeatureButton } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import { H3 } from 'src/components/typography'
import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'
import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'
import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'
import { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'
import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'
import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'
import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'
import { ifNotNull } from 'src/utils/nullCheck'
import styles from './CustomerData.styles.js'
import { Field } from './components'
import { EditableCard } from './components'
import { getName } from './helper.js'
const useStyles = makeStyles(styles)
@ -31,49 +34,62 @@ const CustomerData = ({ customer, updateCustomer }) => {
const nameElements = [
{
header: 'Name',
display: `${getName(customer)}`,
name: 'name',
label: 'Name',
value: `${getName(customer)}` ?? '',
component: TextInput,
size: 190
}
]
const idScanElementsFirstRow = [
const idScanElements = [
{
header: 'Name',
display: `${getName(customer)}`,
name: 'name',
label: 'Name',
value: `${getName(customer)}`,
component: TextInput,
size: 190
},
{
header: 'ID number',
display: R.path(['documentNumber'])(idData),
name: 'ID number',
label: 'ID number',
value: R.path(['documentNumber'])(idData),
component: TextInput,
size: 160
},
{
header: 'Age',
display: ifNotNull(
name: 'age',
label: 'Age',
value: ifNotNull(
rawDob,
moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
),
component: TextInput,
size: 50
}
]
const idScanElementsSecondRow = [
},
{
header: 'Gender',
display: R.path(['gender'])(idData),
name: 'gender',
label: 'Gender',
value: R.path(['gender'])(idData),
component: TextInput,
size: 80
},
{
header: country === 'Canada' ? 'Province' : 'State',
display: R.path(['state'])(idData),
name: country === 'Canada' ? 'province' : 'state',
label: country === 'Canada' ? 'Province' : 'State',
value: R.path(['state'])(idData),
component: TextInput,
size: 120
},
{
header: 'Expiration Date',
display: ifNotNull(
name: 'expiration date',
label: 'Expiration Date',
value: ifNotNull(
rawExpirationDate,
moment.utc(rawExpirationDate).format('YYYY-MM-DD')
)
),
component: TextInput,
size: 120
}
]
@ -83,11 +99,20 @@ const CustomerData = ({ customer, updateCustomer }) => {
<div>
<div className={classes.header}>
<H3 className={classes.title}>{'Customer data'}</H3>
<SubpageButton
className={classes.subpageButton}
Icon={ListingViewIcon}
InverseIcon={ReverseListingViewIcon}
toggle={setListView}></SubpageButton>
<FeatureButton
active={!listView}
className={classes.viewIcons}
Icon={OverviewIcon}
InverseIcon={OverviewReversedIcon}
onClick={() => setListView(false)}
variant="contained"
/>
<FeatureButton
active={listView}
className={classes.viewIcons}
Icon={CustomerListViewIcon}
InverseIcon={CustomerListViewReversedIcon}
onClick={() => setListView(true)}></FeatureButton>
</div>
<div>
{listView && <H3>{''}</H3>}
@ -101,16 +126,9 @@ const CustomerData = ({ customer, updateCustomer }) => {
<H3 className={classes.cardTitle}>{'Name'}</H3>
<Tooltip width={304}></Tooltip>
</div>
<Box display="flex" alignItems="center">
{nameElements.map(({ header, display, size }, idx) => (
<Field
key={idx}
label={header}
display={display}
size={size}
/>
))}
</Box>
<EditableCard
data={nameElements}
save={() => {}}></EditableCard>
</CardContent>
</Card>
<Card className={classes.leftSideCard}>
@ -120,30 +138,9 @@ const CustomerData = ({ customer, updateCustomer }) => {
<H3 className={classes.cardTitle}>{'ID Scan'}</H3>
<Tooltip width={304}></Tooltip>
</div>
<Box display="flex" alignItems="center">
{idScanElementsFirstRow.map(
({ header, display, size }, idx) => (
<Field
key={idx}
label={header}
display={display}
size={size}
/>
)
)}
</Box>
<Box display="flex" alignItems="center">
{idScanElementsSecondRow.map(
({ header, display, size }, idx) => (
<Field
key={idx}
label={header}
display={display}
size={size}
/>
)
)}
</Box>
<EditableCard
data={idScanElements}
save={() => {}}></EditableCard>
</CardContent>
</Card>
</Grid>