feat: delete & edit role.

src/containers/Alerts/Roles/RoleDeleteAlert.js

@@ -20,6 +20,9 @@ function RoleDeleteAlert({
   // #withAlertStoreConnect
   isOpen,
   payload: { roleId },
+
+  // #withAlertActions
+  closeAlert,
 }) {
   const { mutateAsync: deleteRole, isLoading } = useDeleteRole();
 

src/containers/AlertsContainer/registered.js

@@ -16,6 +16,7 @@ import ExpensesAlerts from '../Expenses/ExpensesAlerts';
 import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTransactionsAlerts';
 import UsersAlerts from '../Preferences/Users/UsersAlerts';
 import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
+import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
 
 export default [
   ...AccountsAlerts,
@@ -36,4 +37,5 @@ export default [
   ...AccountTransactionsAlerts,
   ...UsersAlerts,
   ...CurrenciesAlerts,
+  ...RolesAlerts,
 ];

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

@@ -1,5 +1,10 @@
 import React from 'react';
 
-import RoleDeleteAlert from '../../../Alerts/Roles/RoleDeleteAlert';
+const RoleDeleteAlert = React.lazy(() =>
+  import('../../../Alerts/Roles/RoleDeleteAlert'),
+);
 
+/**
+ * Roles alerts
+ */
 export default [{ name: 'role-delete', component: RoleDeleteAlert }];

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, omit, pick } from 'lodash';
+import { defaultTo, sumBy, isEmpty } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -12,7 +12,7 @@ import { AppToaster, FormattedMessage as T } from 'components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 
 import { useRolesFormContext } from './RolesFormProvider';
-import { mapperPermissionSchema } from './utils';
+import { transformToArray } from './utils';
 
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -43,7 +43,7 @@ function RolesForm({
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    // ...transformToForm(permissionSchema, defaultValues),
+    ...transformToForm(permissionSchema, defaultValues),
   };
 
   React.useEffect(() => {
@@ -51,7 +51,7 @@ function RolesForm({
   }, [changePreferencesPageTitle]);
 
   const handleFormSubmit = (values, { setSubmitting }) => {
-    const permission = mapperPermissionSchema(values);
+    const permission = transformToArray(values);
     const form = {
       ...values,
       permissions: permission,

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

@@ -25,7 +25,6 @@ export default function RolesFormContent() {
   const handleCloseClick = () => {
     history.go(-1);
   };
-  console.log(values, 'EE');
   return (
     <Form>
       {/* ----------  name ----------  */}

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

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

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

@@ -7,7 +7,7 @@ import { RolesFormProvider } from './RolesFormProvider';
  */
 export default function RolesFormPage() {
   return (
-    <RolesFormProvider>
+    <RolesFormProvider roleId={undefined}>
       <RolesForm />
     </RolesFormProvider>
   );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import _ from 'lodash';
+import _, { isArray } from 'lodash';
 
 import {
   useCreateRolePermissionSchema,
@@ -10,14 +10,14 @@ import {
   useRolePermission,
 } from 'hooks/query';
 import PreferencesPageLoader from '../../../PreferencesPageLoader';
-import { mapperPermissionSchema } from './utils';
+import { transformToObject } from './utils';
 
 const RolesFormContext = React.createContext();
 
 /**
  * Roles Form page provider.
  */
-function RolesFormProvider({ ...props }) {
+function RolesFormProvider({ roleId, ...props }) {
   // Create and edit roles mutations.
   const { mutateAsync: createRolePermissionMutate } =
     useCreateRolePermissionSchema();
@@ -31,15 +31,17 @@ function RolesFormProvider({ ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  const roleId = 6;
+  // const roleId = 6;
 
-  const { data: permissionSchema, isLoading: isPermissionLoading } =
+  const { data: permission, isLoading: isPermissionLoading } =
     useRolePermission(roleId, {
       enabled: !!roleId,
     });
 
   const isNewMode = !roleId;
 
+  const permissionSchema = transformToObject(permission);
+
   // Provider state.
   const provider = {
     isNewMode,

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

@@ -1,4 +1,6 @@
-export const mapperPermissionSchema = ({ permissions }) => {
+import { isEmpty } from 'lodash';
+
+export const transformToArray = ({ permissions }) => {
   return Object.keys(permissions).map((index) => {
     const [value, key] = index.split('/');
 
@@ -9,3 +11,17 @@ export const mapperPermissionSchema = ({ permissions }) => {
     };
   });
 };
+
+export const transformToObject = ({ name, description, permissions }) => {
+  if (!isEmpty(permissions)) {
+    const output = {};
+    permissions.forEach((item) => {
+      output[`${item.subject}/${item.ability}`] = !!item.value;
+    });
+    return {
+      role_name: name,
+      role_description: description,
+      permissions: { ...output },
+    };
+  }
+};

src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js

@@ -5,15 +5,24 @@ import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
 /**
  * Roles data table.
  */
-export default function RolesDataTable() {
+function RolesDataTable({
+  // #withAlertsActions
+  openAlert,
+}) {
   const columns = useRolesTableColumns();
 
+  const handleDeleteRole = ({ id }) => {
+    openAlert('role-delete', { roleId: id });
+  };
+
+  // const Data = [{ name: 'AH', description: 'Description' }];
   return (
     <DataTable
       columns={columns}
@@ -22,7 +31,11 @@ export default function RolesDataTable() {
       // progressBarLoading={}
       TableLoadingRenderer={TableSkeletonRows}
       ContextMenu={ActionsMenu}
-      // payload={{}}
+      payload={{
+        onDeleteRole: handleDeleteRole,
+      }}
     />
   );
 }
+
+export default compose(withAlertsActions)(RolesDataTable);

src/containers/Preferences/Users/Roles/RolesLanding/components.js

@@ -2,13 +2,13 @@ import React from 'react';
 import intl from 'react-intl-universal';
 
 import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
-import { safeInvoke } from 'utils';
+import { safeCallback } from 'utils';
 import { Icon, If } from 'components';
 
 /**
  * Context menu of roles.
  */
-export function ActionsMenu({ payload: {}, row: { original } }) {
+export function ActionsMenu({ payload: { onDeleteRole }, row: { original } }) {
   return (
     <Menu>
       <MenuItem
@@ -19,6 +19,7 @@ export function ActionsMenu({ payload: {}, row: { original } }) {
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
         text={intl.get('roles.delete_roles')}
+        onClick={safeCallback(onDeleteRole, original)}
         intent={Intent.DANGER}
       />
     </Menu>
@@ -35,7 +36,7 @@ export function useRolesTableColumns() {
       {
         id: 'name',
         Header: intl.get('roles.column.name'),
-        // accessor: ,
+        accessor: 'name',
         className: 'name',
         width: '100',
         disableSortBy: true,
@@ -43,7 +44,7 @@ export function useRolesTableColumns() {
       {
         id: 'description',
         Header: intl.get('roles.column.description'),
-        // accessor: ,
+        accessor: 'description',
         className: 'description',
         width: '120',
         disableSortBy: true,