feat: submit roles permission schema.

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { mapKeys } from 'lodash';
+import { mapKeys, omit, pick } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -12,6 +12,7 @@ import { AppToaster, FormattedMessage as T } from 'components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 
 import { useRolesFormContext } from './RolesFormProvider';
+import { mapperPermissionSchema } from './utils';
 
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -31,7 +32,7 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { createRoleMutate, editRoleMutate, permissions } =
+  const { createRolePermissionMutate, editRolePermissionMutate, permissions } =
     useRolesFormContext();
 
   // Initial values.
@@ -39,47 +40,29 @@ function RolesForm({
     ...defaultValues,
   };
 
-  const MapperPermissionSchema = (data) => {
-    return data.map(({ role_name, role_description, permissions }) => {
-      const permission = mapKeys(permissions, (value, key) => {
-        // return value;
-      });
-      return {
-        role_name: role_name,
-        role_description: role_description,
-        permissions: [permission],
-      };
-    });
-  };
-
   React.useEffect(() => {
     changePreferencesPageTitle(<T id={'roles.label'} />);
   }, [changePreferencesPageTitle]);
 
-  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    const permission = mapperPermissionSchema(values);
     const form = {
       ...values,
+      permissions: permission,
     };
-
-    // Handle the request success.
+    setSubmitting(true);
     const onSuccess = () => {
       AppToaster.show({
-        message: '',
+        message: intl.get('roles.permisssion_schema.success_message'),
         intent: Intent.SUCCESS,
       });
-    };
-    // Handle the request error.
-    const onError = (
-      {
-        // response: {
-        //   data: { errors },
-        // },
-      },
-    ) => {
       setSubmitting(false);
     };
 
-    createRoleMutate(form).then(onSuccess).catch(onError);
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    createRolePermissionMutate(form).then(onSuccess).catch(onError);
   };
 
   return (
@@ -87,8 +70,9 @@ function RolesForm({
       initialValues={initialValues}
       validationSchema={CreateRolesFormSchema}
       onSubmit={handleFormSubmit}
-      component={RolesFormContent}
-    />
+    >
+      <RolesFormContent />
+    </Formik>
   );
 }
 

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  role_name: Yup.string().label(intl.get('name')).required(),
+  role_name: Yup.string().required().label(intl.get('roles.label.role_name')),
   role_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
 
   permissions: Yup.object().shape({

src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js

@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { inputIntent } from 'utils';
 import { FormattedMessage as T, FieldRequiredHint } from 'components';
-
+import { useAutofocus } from 'hooks';
 import { RolesPermissionList } from './components';
 
 /**
@@ -19,7 +19,8 @@ import { RolesPermissionList } from './components';
 export default function RolesFormContent() {
   const history = useHistory();
 
-  const { isSubmitting } = useFormikContext();
+  const { isSubmitting, values } = useFormikContext();
+  const roleNameFieldRef = useAutofocus();
 
   const handleCloseClick = () => {
     history.go(-1);
@@ -35,10 +36,14 @@ export default function RolesFormContent() {
             labelInfo={<FieldRequiredHint />}
             className={'form-group--name'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'role_name'} />}
+            helperText={<ErrorMessage name="role_name" />}
             inline={true}
           >
-            <InputGroup medium={true} {...field} />
+            <InputGroup
+              medium={true}
+              inputRef={(ref) => (roleNameFieldRef.current = ref)}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>

src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js

@@ -0,0 +1 @@
+rfc

src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
 

src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js

@@ -5,8 +5,9 @@ import { CLASSES } from 'common/classes';
 
 import {
   useCreateRolePermissionSchema,
-  useEditRole,
+  useEditRolePermissionSchema,
   usePermissionsSchema,
+  useSaveSettings
 } from 'hooks/query';
 import PreferencesPageLoader from '../../../PreferencesPageLoader';
 
@@ -28,6 +29,9 @@ function RolesFormProvider({ ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
+  // Save Organization Settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+
   // Provider state.
   const provider = {
     permissionsSchema,
@@ -35,6 +39,7 @@ function RolesFormProvider({ ...props }) {
     isPermissionsSchemaFetching,
     createRolePermissionMutate,
     editRolePermissionMutate,
+    saveSettingMutate
   };
 
   return (

src/containers/Preferences/Users/Roles/RolesForm/utils.js

@@ -0,0 +1,12 @@
+export const mapperPermissionSchema = (data) => {
+  return [data].map(({ permissions }) =>
+    Object.keys(permissions).map((item) => {
+      const [value, key] = item.split('/');
+      return {
+        subject: value,
+        ability: key,
+        value: permissions[item],
+      };
+    }),
+  );
+};