feat: add custom requirements UI to the profile page

This commit is contained in:
Sérgio Salgado 2021-12-08 22:17:19 +00:00
parent ba8cac60f8
commit 036e47bad4
4 changed files with 69 additions and 11 deletions

View file

@ -21,7 +21,8 @@ const resolvers = {
insertCustomInfoRequest: (...[, { customRequest }]) => queries.addCustomInfoRequest(customRequest),
removeCustomInfoRequest: (...[, { id }]) => queries.removeCustomInfoRequest(id),
editCustomInfoRequest: (...[, { id, customRequest }]) => queries.editCustomInfoRequest(id, customRequest),
setAuthorizedCustomRequest: (...[, { customerId, infoRequestId, isAuthorized }]) => queries.setAuthorizedCustomRequest(customerId, infoRequestId, isAuthorized)
setAuthorizedCustomRequest: (...[, { customerId, infoRequestId, isAuthorized }]) => queries.setAuthorizedCustomRequest(customerId, infoRequestId, isAuthorized),
setCustomerCustomInfoRequest: (...[, { customerId, infoRequestId, data }]) => queries.setCustomerData(customerId, infoRequestId, data)
}
}

View file

@ -48,6 +48,7 @@ const typeDef = gql`
removeCustomInfoRequest(id: ID!): CustomInfoRequest @auth
editCustomInfoRequest(id: ID!, customRequest: CustomRequestInput!): CustomInfoRequest @auth
setAuthorizedCustomRequest(customerId: ID!, infoRequestId: ID!, isAuthorized: Boolean!): Boolean @auth
setCustomerCustomInfoRequest(customerId: ID!, infoRequestId: ID!, data: JSON!): Boolean @auth
}
`

View file

@ -62,7 +62,8 @@ const CustomerData = ({
updateCustomer,
editCustomer,
deleteEditedData,
updateCustomRequest
updateCustomRequest,
authorizeCustomRequest
}) => {
const classes = useStyles()
const [listView, setListView] = useState(false)
@ -85,7 +86,7 @@ const CustomerData = ({
)
const customEntries = null // get customer custom entries
const customRequirements = null // get customer custom requirements
const customRequirements = [] // get customer custom requirements
const customInfoRequests = sortByName(
R.path(['customInfoRequests'])(customer) ?? []
)
@ -300,17 +301,20 @@ const CustomerData = ({
]
R.forEach(it => {
cards.push({
data: [
console.log('it', it)
customRequirements.push({
fields: [
{
value: it.customerData.data,
name: it.customInfoRequest.id,
label: it.customInfoRequest.customRequest.name,
value: it.customerData.data ?? '',
component: TextInput
}
],
title: it.customInfoRequest.customRequest.name,
titleIcon: <CardIcon className={classes.cardIcon} />,
authorize: () =>
updateCustomRequest({
authorizeCustomRequest({
variables: {
customerId: it.customerId,
infoRequestId: it.customInfoRequest.id,
@ -318,14 +322,31 @@ const CustomerData = ({
}
}),
reject: () =>
updateCustomRequest({
authorizeCustomRequest({
variables: {
customerId: it.customerId,
infoRequestId: it.customInfoRequest.id,
isAuthorized: false
}
}),
save: () => {}
save: values => {
updateCustomRequest({
variables: {
customerId: it.customerId,
infoRequestId: it.customInfoRequest.id,
data: {
info_request_id: it.customInfoRequest.id,
data: values[it.customInfoRequest.id]
}
}
})
},
validationSchema: Yup.object().shape({
[it.customInfoRequest.id]: Yup.string()
}),
initialValues: {
[it.customInfoRequest.id]: it.customerData.data ?? ''
}
})
}, customInfoRequests)
@ -407,6 +428,18 @@ const CustomerData = ({
{customRequirements && (
<div className={classes.wrapper}>
<span className={classes.separator}>Custom requirements</span>
<Grid container>
<Grid container direction="column" item xs={6}>
{customRequirements.map((elem, idx) => {
return isEven(idx) ? editableCard(elem, idx) : null
})}
</Grid>
<Grid container direction="column" item xs={6}>
{customRequirements.map((elem, idx) => {
return !isEven(idx) ? editableCard(elem, idx) : null
})}
</Grid>
</Grid>
</div>
)}
</div>

View file

@ -180,6 +180,20 @@ const SET_AUTHORIZED_REQUEST = gql`
}
`
const SET_CUSTOMER_CUSTOM_INFO_REQUEST = gql`
mutation setCustomerCustomInfoRequest(
$customerId: ID!
$infoRequestId: ID!
$data: JSON!
) {
setCustomerCustomInfoRequest(
customerId: $customerId
infoRequestId: $infoRequestId
data: $data
)
}
`
const CustomerProfile = memo(() => {
const history = useHistory()
@ -211,10 +225,18 @@ const CustomerProfile = memo(() => {
const [setCustomer] = useMutation(SET_CUSTOMER, {
onCompleted: () => getCustomer()
})
const [updateCustomRequest] = useMutation(SET_AUTHORIZED_REQUEST, {
const [authorizeCustomRequest] = useMutation(SET_AUTHORIZED_REQUEST, {
onCompleted: () => getCustomer()
})
const [setCustomerCustomInfoRequest] = useMutation(
SET_CUSTOMER_CUSTOM_INFO_REQUEST,
{
onCompleted: () => getCustomer()
}
)
const updateCustomer = it =>
setCustomer({
variables: {
@ -403,7 +425,8 @@ const CustomerProfile = memo(() => {
replacePhoto={replacePhoto}
editCustomer={editCustomer}
deleteEditedData={deleteEditedData}
updateCustomRequest={updateCustomRequest}></CustomerData>
updateCustomRequest={setCustomerCustomInfoRequest}
authorizeCustomRequest={authorizeCustomRequest}></CustomerData>
</div>
)}
</div>