fix: role field in invite & User dialog.

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;

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 (
     <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={[]}
+                items={roles}
-                // onItemSelect={(item) => {
+                onItemSelect={({ id }) => {
-                //   form.setFieldValue('role_name', item.role_id);
+                  form.setFieldValue('role_id', id);
-                // }}
+                }}
                 selectedItem={value}
-                selectedItemProp={'role_id '}
+                selectedItemProp={'id'}
-                // textProp={'role_name'}
+                textProp={'name'}
-                // labelProp={'role_id '}
+                // labelProp={'id '}
                 popoverProps={{ minimal: true }}
                 intent={inputIntent({ error, touched })}
-                // filterable={false}
               />
             </FormGroup>
           )}

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

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;

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({
           )}
         </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={[]}
+                items={roles}
-                // onItemSelect={(item) => {
+                onItemSelect={({ id }) => {
-                //   form.setFieldValue('role_name', item.role_id);
+                  form.setFieldValue('role_id', id);
-                // }}
+                }}
                 selectedItem={value}
-                selectedItemProp={'role_id '}
+                selectedItemProp={'id'}
-                // textProp={'role_name'}
+                textProp={'name'}
-                // labelProp={'role_id '}
+                // labelProp={'id '}
                 popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
               />
             </FormGroup>
           )}

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

src/containers/Preferences/Users/components.js

@@ -28,8 +28,6 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onInactivate, onActivate, onDelete, onResendInvitation },
 }) {
-  
-
   return (
     <Menu>
       <If condition={original.invite_accepted_at}>
@@ -78,7 +76,7 @@ export function ActionsMenu({
  */
 function StatusAccessor(user) {
   return !user.is_invite_accepted ? (
-    <Tag minimal={true} >
+    <Tag minimal={true}>
       <T id={'inviting'} />
     </Tag>
   ) : 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',
+        id: 'role_name',
-        Header: intl.get('phone_number'),
+        Header: intl.get('roles.column.role_name'),
-        accessor: 'phone_number',
+        accessor: 'role.name',
         width: 120,
       },
+      // {
+      //   id: 'phone_number',
+      //   Header: intl.get('phone_number'),
+      //   accessor: 'phone_number',
+      //   width: 120,
+      // },
       {
         id: 'status',
         Header: 'Status',