fix: role field in invite & User dialog.

This commit is contained in:
elforjani13
2021-11-26 19:48:19 +02:00
parent 64bf223458
commit 313d0f3d0f
7 changed files with 53 additions and 36 deletions

View File

@@ -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;

View File

@@ -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 (
<Form>
<div className={CLASSES.DIALOG_BODY}>
@@ -46,27 +46,26 @@ function InviteUserFormContent({
)}
</FastField>
{/* ----------- Role name ----------- */}
<FastField name={'role_name'}>
<FastField name={'role_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'roles.label.role_name'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="role_name" />}
helperText={<ErrorMessage name="role_id" />}
className={classNames(CLASSES.FILL, 'form-group--role_name')}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={[]}
// onItemSelect={(item) => {
// 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}
/>
</FormGroup>
)}

View File

@@ -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 (
<DialogContent isLoading={isUsersLoading} name={'invite-form'}>
<DialogContent
isLoading={isUsersLoading || isRolesLoading}
name={'invite-form'}
>
<InviteUserFormContext.Provider value={provider} {...props} />
</DialogContent>
);

View File

@@ -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;

View File

@@ -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({
)}
</FastField>
{/* ----------- Role name ----------- */}
<FastField name={'role_name'}>
<FastField name={'role_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'roles.label.role_name'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--role_name', CLASSES.FILL)}
helperText={<ErrorMessage name="role_id" />}
className={classNames(CLASSES.FILL, 'form-group--role_name')}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={[]}
// onItemSelect={(item) => {
// 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 })}
/>
</FormGroup>
)}

View File

@@ -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 (
<DialogContent isLoading={isUserLoading} name={'user-form'}>
<DialogContent
isLoading={isUserLoading || isRolesLoading}
name={'user-form'}
>
<UserFormContext.Provider value={provider} {...props} />
</DialogContent>
);