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

feat: add read only fields to editable card

Browse source
This commit is contained in:
José Oliveira 2022-01-10 17:28:23 +00:00
parent af6fefa920
commit a64dac0b40
4 changed files with 71 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
migrations/1641482376890-add-overrides-to-subscriber-info.js
View file

@ -3,7 +3,7 @@ var db = require('./db')
exports.up = function (next) {
var sql = [
`ALTER TABLE customers
ADD COLUMN subscriber_info_override VERIFICATION_TYPE,
ADD COLUMN subscriber_info_override VERIFICATION_TYPE NOT NULL DEFAULT 'automatic',
ADD COLUMN subscriber_info_override_by UUID,
ADD COLUMN subscriber_info_override_at TIMESTAMPTZ
`,

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

@ -353,7 +353,8 @@ const CustomerData = ({
customerDataElements.smsData.push({
name: it,
label: onlyFirstToUpper(it),
component: TextInput
component: TextInput,
editable: true
})
Yup.object()
.shape({

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

@ -69,6 +69,13 @@ const fieldStyles = {
fontSize: 14
}
}
},
readOnlyLabel: {
color: comet,
margin: [[3, 0, 3, 0]]
},
readOnlyValue: {
margin: 0
}
}
@ -107,6 +114,23 @@ const EditableField = ({ editing, field, value, size, ...props }) => {
)
}
const ReadOnlyField = ({ field, value, ...props }) => {
const classes = fieldUseStyles()
const classNames = {
[classes.field]: true,
[classes.notEditing]: true
}
return (
<>
<div className={classnames(classNames)}>
<Label1 className={classes.readOnlyLabel}>{field.label}</Label1>
<P className={classes.readOnlyValue}>{value}</P>
</div>
</>
)
}
const EditableCard = ({
fields,
save,
@ -178,7 +202,7 @@ const EditableCard = ({
setEditing(false)
setError(false)
}}>
{({ values, touched, errors, setFieldValue }) => (
{({ setFieldValue }) => (
<Form>
<PromptWhenDirty />
<div className={classes.row}>
@ -187,13 +211,19 @@ const EditableCard = ({
{!hasImage &&
fields?.map((field, idx) => {
return idx >= 0 && idx < 4 ? (
<EditableField
field={field}
value={initialValues[field.name]}
disabled={field.disabled ?? false}
editing={editing}
size={180}
/>
!field.editable ? (
<ReadOnlyField
field={field}
value={initialValues[field.name]}
/>
) : (
<EditableField
field={field}
value={initialValues[field.name]}
editing={editing}
size={180}
/>
)
) : null
})}
</Grid>
@ -201,13 +231,19 @@ const EditableCard = ({
{!hasImage &&
fields?.map((field, idx) => {
return idx >= 4 ? (
<EditableField
field={field}
value={initialValues[field.name]}
disabled={field.disabled ?? false}
editing={editing}
size={180}
/>
!field.editable ? (
<ReadOnlyField
field={field}
value={initialValues[field.name]}
/>
) : (
<EditableField
field={field}
value={initialValues[field.name]}
editing={editing}
size={180}
/>
)
) : null
})}
</Grid>

26
new-lamassu-admin/src/pages/Customers/helper.js
View file

@ -355,37 +355,44 @@ const customerDataElements = {
{
name: 'firstName',
label: 'First name',
component: TextInput
component: TextInput,
editable: true
},
{
name: 'documentNumber',
label: 'ID number',
component: TextInput
component: TextInput,
editable: true
},
{
name: 'dateOfBirth',
label: 'Birthdate',
component: TextInput
component: TextInput,
editable: true
},
{
name: 'gender',
label: 'Gender',
component: TextInput
component: TextInput,
editable: true
},
{
name: 'lastName',
label: 'Last name',
component: TextInput
component: TextInput,
editable: true
},
{
name: 'expirationDate',
label: 'Expiration Date',
component: TextInput
component: TextInput,
editable: true
},
{
name: 'country',
label: 'Country',
component: TextInput
component: TextInput,
editable: true
}
],
usSsn: [
@ -393,7 +400,8 @@ const customerDataElements = {
name: 'usSsn',
label: 'US SSN',
component: TextInput,
size: 190
size: 190,
editable: true
}
],
idCardPhoto: [{ name: 'idCardPhoto' }],
@ -402,7 +410,7 @@ const customerDataElements = {
name: 'phoneNumber',
label: 'Phone number',
component: TextInput,
disabled: true
editable: false
}
}