From 313d0f3d0fd9ea5d7d714f4f8f43c3d653067290 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Fri, 26 Nov 2021 19:48:19 +0200 Subject: [PATCH] fix: role field in invite & User dialog. --- .../InviteUserDialog.schema.js | 2 +- .../InviteUserDialog/InviteUserFormContent.js | 23 +++++++++---------- .../InviteUserFormProvider.js | 11 +++++++-- .../Dialogs/UserFormDialog/UserForm.schema.js | 2 +- .../Dialogs/UserFormDialog/UserFormContent.js | 22 ++++++++++-------- .../UserFormDialog/UserFormProvider.js | 11 +++++++-- .../Preferences/Users/components.js | 18 ++++++++------- 7 files changed, 53 insertions(+), 36 deletions(-) diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js b/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js index 315e0ffb4..057f75e25 100644 --- a/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js +++ b/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js @@ -3,7 +3,7 @@ import intl from 'react-intl-universal'; const Schema = Yup.object().shape({ email: Yup.string().email().required().label(intl.get('email')), - role_name: Yup.string().required().label(intl.get('roles.label.role_name_')), + role_id: Yup.string().required().label(intl.get('roles.label.role_name_')), }); export const InviteUserFormSchema = Schema; diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js index 9caf162ee..c66fe492f 100644 --- a/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js +++ b/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js @@ -19,12 +19,12 @@ function InviteUserFormContent({ closeDialog, }) { const { isSubmitting } = useFormikContext(); - const { isEditMode, dialogName } = useInviteUserFormContext(); + const { isEditMode, dialogName, roles } = useInviteUserFormContext(); const handleClose = () => { closeDialog(dialogName); }; - + console.log(roles, 'XX'); return (
@@ -46,27 +46,26 @@ function InviteUserFormContent({ )} {/* ----------- Role name ----------- */} - + {({ form, field: { value }, meta: { error, touched } }) => ( } labelInfo={} - helperText={} + helperText={} className={classNames(CLASSES.FILL, 'form-group--role_name')} intent={inputIntent({ error, touched })} > { - // form.setFieldValue('role_name', item.role_id); - // }} + items={roles} + onItemSelect={({ id }) => { + form.setFieldValue('role_id', id); + }} selectedItem={value} - selectedItemProp={'role_id '} - // textProp={'role_name'} - // labelProp={'role_id '} + selectedItemProp={'id'} + textProp={'name'} + // labelProp={'id '} popoverProps={{ minimal: true }} intent={inputIntent({ error, touched })} - // filterable={false} /> )} diff --git a/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js b/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js index aa093c209..dcaaad4cb 100644 --- a/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js +++ b/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js @@ -1,5 +1,5 @@ import React, { createContext } from 'react'; -import { useCreateInviteUser, useUsers } from 'hooks/query'; +import { useCreateInviteUser, useUsers, useRoles } from 'hooks/query'; import { DialogContent } from 'components'; const InviteUserFormContext = createContext(); @@ -14,6 +14,9 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) { // fetch users list. const { isLoading: isUsersLoading } = useUsers(); + // fetch roles list. + const { data: roles, isLoading: isRolesLoading } = useRoles(); + // Provider state. const provider = { inviteUserMutate, @@ -21,10 +24,14 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) { userId, isUsersLoading, isEditMode, + roles, }; return ( - + ); diff --git a/src/containers/Dialogs/UserFormDialog/UserForm.schema.js b/src/containers/Dialogs/UserFormDialog/UserForm.schema.js index 11f56c4a0..347319e3e 100644 --- a/src/containers/Dialogs/UserFormDialog/UserForm.schema.js +++ b/src/containers/Dialogs/UserFormDialog/UserForm.schema.js @@ -9,7 +9,7 @@ const Schema = Yup.object().shape({ .matches() .required() .label(intl.get('phone_number_')), - role_name: Yup.string().required().label(intl.get('roles.label.role_name_')), + role_id: Yup.string().required().label(intl.get('roles.label.role_name_')), }); export const UserFormSchema = Schema; diff --git a/src/containers/Dialogs/UserFormDialog/UserFormContent.js b/src/containers/Dialogs/UserFormDialog/UserFormContent.js index 51f70ff15..da30cee55 100644 --- a/src/containers/Dialogs/UserFormDialog/UserFormContent.js +++ b/src/containers/Dialogs/UserFormDialog/UserFormContent.js @@ -24,7 +24,7 @@ function UserFormContent({ closeDialog, }) { const { isSubmitting } = useFormikContext(); - const { dialogName } = useUserFormContext(); + const { dialogName, roles } = useUserFormContext(); const handleClose = () => { closeDialog(dialogName); @@ -89,24 +89,26 @@ function UserFormContent({ )} {/* ----------- Role name ----------- */} - + {({ form, field: { value }, meta: { error, touched } }) => ( } labelInfo={} - className={classNames('form-group--role_name', CLASSES.FILL)} + helperText={} + className={classNames(CLASSES.FILL, 'form-group--role_name')} intent={inputIntent({ error, touched })} > { - // form.setFieldValue('role_name', item.role_id); - // }} + items={roles} + onItemSelect={({ id }) => { + form.setFieldValue('role_id', id); + }} selectedItem={value} - selectedItemProp={'role_id '} - // textProp={'role_name'} - // labelProp={'role_id '} + selectedItemProp={'id'} + textProp={'name'} + // labelProp={'id '} popoverProps={{ minimal: true }} + intent={inputIntent({ error, touched })} /> )} diff --git a/src/containers/Dialogs/UserFormDialog/UserFormProvider.js b/src/containers/Dialogs/UserFormDialog/UserFormProvider.js index 253b6f3bd..d14ec32ae 100644 --- a/src/containers/Dialogs/UserFormDialog/UserFormProvider.js +++ b/src/containers/Dialogs/UserFormDialog/UserFormProvider.js @@ -1,5 +1,5 @@ import React, { createContext, useContext } from 'react'; -import { useEditUser, useUser } from 'hooks/query'; +import { useEditUser, useUser, useRoles } from 'hooks/query'; import { DialogContent } from 'components'; @@ -17,6 +17,9 @@ function UserFormProvider({ userId, dialogName, ...props }) { enabled: !!userId, }); + // fetch roles list. + const { data: roles, isLoading: isRolesLoading } = useRoles(); + const isEditMode = userId; // Provider state. @@ -28,10 +31,14 @@ function UserFormProvider({ userId, dialogName, ...props }) { EditUserMutate, isEditMode, + roles, }; return ( - + ); diff --git a/src/containers/Preferences/Users/components.js b/src/containers/Preferences/Users/components.js index 853852a61..65eeb0e7f 100644 --- a/src/containers/Preferences/Users/components.js +++ b/src/containers/Preferences/Users/components.js @@ -28,8 +28,6 @@ export function ActionsMenu({ row: { original }, payload: { onEdit, onInactivate, onActivate, onDelete, onResendInvitation }, }) { - - return ( @@ -78,7 +76,7 @@ export function ActionsMenu({ */ function StatusAccessor(user) { return !user.is_invite_accepted ? ( - + ) : user.active ? ( @@ -111,8 +109,6 @@ function FullNameAccessor(user) { } export const useUsersListColumns = () => { - - return React.useMemo( () => [ { @@ -134,11 +130,17 @@ export const useUsersListColumns = () => { width: 150, }, { - id: 'phone_number', - Header: intl.get('phone_number'), - accessor: 'phone_number', + id: 'role_name', + Header: intl.get('roles.column.role_name'), + accessor: 'role.name', width: 120, }, + // { + // id: 'phone_number', + // Header: intl.get('phone_number'), + // accessor: 'phone_number', + // width: 120, + // }, { id: 'status', Header: 'Status',