From 9cc770f1680029684dcb6785169084b28fd691e7 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Fri, 26 Nov 2021 22:40:06 +0200 Subject: [PATCH] feat: edit user dialog handle error. --- .../Dialogs/UserFormDialog/UserForm.js | 16 +++++++--------- .../Dialogs/UserFormDialog/UserFormContent.js | 7 ++++++- .../Dialogs/UserFormDialog/UserFormProvider.js | 15 ++++++++++++++- .../Dialogs/UserFormDialog/components.js | 14 ++++++++++++++ src/containers/Dialogs/UserFormDialog/utils.js | 10 ++++------ src/style/pages/Users/UserFormDialog.scss | 5 +++++ 6 files changed, 50 insertions(+), 17 deletions(-) create mode 100644 src/containers/Dialogs/UserFormDialog/components.js diff --git a/src/containers/Dialogs/UserFormDialog/UserForm.js b/src/containers/Dialogs/UserFormDialog/UserForm.js index 75a65251c..c9f18d410 100644 --- a/src/containers/Dialogs/UserFormDialog/UserForm.js +++ b/src/containers/Dialogs/UserFormDialog/UserForm.js @@ -10,6 +10,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions'; import { UserFormSchema } from './UserForm.schema'; import UserFormContent from './UserFormContent'; import { useUserFormContext } from './UserFormProvider'; +import { transformErrors } from './utils'; import { compose, objectKeysTransform } from 'utils'; @@ -20,13 +21,10 @@ function UserForm({ // #withDialogActions closeDialog, }) { - const { - dialogName, - user, - userId, - isEditMode, - EditUserMutate, - } = useUserFormContext(); + const [calloutCode, setCalloutCode] = React.useState([]); + + const { dialogName, user, userId, isEditMode, EditUserMutate } = + useUserFormContext(); const initialValues = { ...(isEditMode && @@ -59,7 +57,7 @@ function UserForm({ data: { errors }, }, } = error; - + transformErrors(errors, { setErrors, setCalloutCode }); setSubmitting(false); }; @@ -72,7 +70,7 @@ function UserForm({ initialValues={initialValues} onSubmit={handleSubmit} > - + ); } diff --git a/src/containers/Dialogs/UserFormDialog/UserFormContent.js b/src/containers/Dialogs/UserFormDialog/UserFormContent.js index da30cee55..f43787157 100644 --- a/src/containers/Dialogs/UserFormDialog/UserFormContent.js +++ b/src/containers/Dialogs/UserFormDialog/UserFormContent.js @@ -15,16 +15,18 @@ import { ListSelect, FieldRequiredHint } from 'components'; import { useUserFormContext } from './UserFormProvider'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { compose } from 'utils'; +import { UserFormCalloutAlerts } from './components'; /** * User form content. */ function UserFormContent({ + calloutCode, // #withDialogActions closeDialog, }) { const { isSubmitting } = useFormikContext(); - const { dialogName, roles } = useUserFormContext(); + const { dialogName, roles, isAuth } = useUserFormContext(); const handleClose = () => { closeDialog(dialogName); @@ -33,6 +35,8 @@ function UserFormContent({ return (
+ + {/* ----------- Email ----------- */} {({ field, meta: { error, touched } }) => ( @@ -109,6 +113,7 @@ function UserFormContent({ // labelProp={'id '} popoverProps={{ minimal: true }} intent={inputIntent({ error, touched })} + disabled={isAuth} /> )} diff --git a/src/containers/Dialogs/UserFormDialog/UserFormProvider.js b/src/containers/Dialogs/UserFormDialog/UserFormProvider.js index d14ec32ae..d4030e053 100644 --- a/src/containers/Dialogs/UserFormDialog/UserFormProvider.js +++ b/src/containers/Dialogs/UserFormDialog/UserFormProvider.js @@ -1,5 +1,10 @@ import React, { createContext, useContext } from 'react'; -import { useEditUser, useUser, useRoles } from 'hooks/query'; +import { + useEditUser, + useUser, + useRoles, + useAuthenticatedAccount, +} from 'hooks/query'; import { DialogContent } from 'components'; @@ -20,10 +25,18 @@ function UserFormProvider({ userId, dialogName, ...props }) { // fetch roles list. const { data: roles, isLoading: isRolesLoading } = useRoles(); + // Retrieve authenticated user information. + const { + data: { id }, + } = useAuthenticatedAccount(); + const isEditMode = userId; + const isAuth = user.system_user_id == id + // Provider state. const provider = { + isAuth, userId, dialogName, diff --git a/src/containers/Dialogs/UserFormDialog/components.js b/src/containers/Dialogs/UserFormDialog/components.js new file mode 100644 index 000000000..687cdd164 --- /dev/null +++ b/src/containers/Dialogs/UserFormDialog/components.js @@ -0,0 +1,14 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { includes } from 'lodash'; +import { Callout, Intent } from '@blueprintjs/core'; + +export const UserFormCalloutAlerts = ({ calloutCodes }) => { + return [ + includes(calloutCodes, 200) && ( + + {intl.get('roles.error.you_cannot_change_your_own_role')} + + ), + ]; +}; diff --git a/src/containers/Dialogs/UserFormDialog/utils.js b/src/containers/Dialogs/UserFormDialog/utils.js index 6bb023e30..8ec73acaa 100644 --- a/src/containers/Dialogs/UserFormDialog/utils.js +++ b/src/containers/Dialogs/UserFormDialog/utils.js @@ -1,15 +1,13 @@ import intl from 'react-intl-universal'; -import { Intent } from '@blueprintjs/core'; -import { AppToaster } from 'components'; // handle delete errors. -export const transformErrors = (errors) => { +export const transformErrors = (errors, { setErrors, setCalloutCode }) => { if ( errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE') ) { - AppToaster.show({ - message: intl.get('roles.error.you_cannot_change_your_own_role'), - intent: Intent.DANGER, + setCalloutCode([200]); + setErrors({ + role_id: intl.get('roles.error.you_cannot_change_your_own_role'), }); } }; diff --git a/src/style/pages/Users/UserFormDialog.scss b/src/style/pages/Users/UserFormDialog.scss index fd1b9821d..767701724 100644 --- a/src/style/pages/Users/UserFormDialog.scss +++ b/src/style/pages/Users/UserFormDialog.scss @@ -20,6 +20,11 @@ } } + .bp3-callout { + font-size: 13px; + margin-bottom: 20px; + } + .bp3-dialog-footer { .bp3-button { min-width: 75px;