feat: add custom requirements UI to the profile page
This commit is contained in:
parent
ba8cac60f8
commit
036e47bad4
4 changed files with 69 additions and 11 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue