feat: roles permission & style & component.

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+
+import 'style/pages/Preferences/Roles/Form.scss';
+
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster, FormattedMessage as T } from 'components';
+
+import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
+
+import { useRolesFormContext } from './RolesFormProvider';
+
+import RolesFormContent from './RolesFormContent';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+const defaultValues = {
+  role_name: 'Default',
+  role_description: '',
+  permissions: {},
+};
+
+/**
+ *  Preferences - Roles Form.
+ */
+function RolesForm({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  const { createRoleMutate, editRoleMutate, permissions } =
+    useRolesFormContext();
+
+  // Initial values.
+  const initialValues = {
+    ...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 form = {
+      ...values,
+    };
+
+    // Handle the request success.
+    const onSuccess = () => {
+      AppToaster.show({
+        message: '',
+        intent: Intent.SUCCESS,
+      });
+    };
+    // Handle the request error.
+    const onError = (
+      {
+        // response: {
+        //   data: { errors },
+        // },
+      },
+    ) => {
+      setSubmitting(false);
+    };
+
+    createRoleMutate(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={CreateRolesFormSchema}
+      onSubmit={handleFormSubmit}
+      component={RolesFormContent}
+    />
+  );
+}
+
+export default compose(withDashboardActions)(RolesForm);

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

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+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_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+
+  permissions: Yup.object().shape({
+    subject: Yup.string(),
+    ability: Yup.string(),
+    value: Yup.boolean(),
+  }),
+});
+
+export const CreateRolesFormSchema = Schema;
+export const EditRolesFormSchema = Schema;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { ErrorMessage, FastField, Form, useFormikContext } from 'formik';
+import {
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+} from '@blueprintjs/core';
+import { inputIntent } from 'utils';
+import { FormattedMessage as T, FieldRequiredHint } from 'components';
+
+import { RolesPermissionList } from './components';
+
+/**
+ * Preferences - Roles Form content.
+ */
+export default function RolesFormContent() {
+  const history = useHistory();
+
+  const { isSubmitting } = useFormikContext();
+
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <Form>
+      {/* ----------  name ----------  */}
+      <FastField name={'role_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'role_name'} />}
+            inline={true}
+          >
+            <InputGroup medium={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------  description ----------  */}
+      <FastField name={'role_description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'role_description'} />}
+            inline={true}
+          >
+            <TextArea growVertically={true} height={280} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      <RolesPermissionList />
+
+      <div className={'card__footer'}>
+        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+          <T id={'save'} />
+        </Button>
+        <Button onClick={handleCloseClick} disabled={isSubmitting}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </Form>
+  );
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import RolesForm from './RolesForm';
+import { RolesFormProvider } from './RolesFormProvider';
+
+/**
+ * Roles Form page.
+ */
+export default function RolesFormPage() {
+  return (
+    <RolesFormProvider>
+      <RolesForm />
+    </RolesFormProvider>
+  );
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { flatMap, map } from 'lodash';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  useCreateRolePermissionSchema,
+  useEditRole,
+  usePermissionsSchema,
+} from 'hooks/query';
+import PreferencesPageLoader from '../../../PreferencesPageLoader';
+
+const RolesFormContext = React.createContext();
+
+/**
+ * Roles Form page provider.
+ */
+function RolesFormProvider({ ...props }) {
+  // Create and edit roles mutations.
+  const { mutateAsync: createRolePermissionMutate } =
+    useCreateRolePermissionSchema();
+  const { mutateAsync: editRolePermissionMutate } =
+    useEditRolePermissionSchema();
+
+  const {
+    data: permissionsSchema,
+    isLoading: isPermissionsSchemaLoading,
+    isFetching: isPermissionsSchemaFetching,
+  } = usePermissionsSchema();
+
+  // Provider state.
+  const provider = {
+    permissionsSchema,
+    isPermissionsSchemaLoading,
+    isPermissionsSchemaFetching,
+    createRolePermissionMutate,
+    editRolePermissionMutate,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        {isPermissionsSchemaLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <RolesFormContext.Provider value={provider} {...props} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const useRolesFormContext = () => React.useContext(RolesFormContext);
+
+export { RolesFormProvider, useRolesFormContext };

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Checkbox } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { castArray } from 'lodash';
+
+import { FastField, useFormikContext } from 'formik';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+import { Icon, Hint, If, Choose } from 'components';
+import { useRolesFormContext } from './RolesFormProvider';
+
+const RoleLabelCheckbox = ({ subject, label, description }) => (
+  <>
+    <LabelCheckbox>
+      {/*------------- subject checbox ------------- */}
+      <FastField name={subject} type="checkbox">
+        {({ form: { setFieldValue, values }, field }) => (
+          <Checkbox
+            className={'block'}
+            inline={true}
+            label={label}
+            name={subject}
+          />
+        )}
+      </FastField>
+      <p>{description}</p>
+    </LabelCheckbox>
+  </>
+);
+
+const AbilitiesList = ({ subject, abilities }) => {
+  return (
+    <AbilitieList>
+      {abilities?.map(({ key, label }) => (
+        <FastField name={`permissions.${subject}/${key}`} type="checkbox">
+          {({ form: { setFieldValue, values }, field }) => (
+            <Checkbox inline={true} label={label} name={subject} {...field} />
+          )}
+        </FastField>
+      ))}
+    </AbilitieList>
+  );
+};
+
+const ExtraAbilitiesList = ({ subject, extraAbilities }) => {
+  return extraAbilities?.map(({ key, label }) => (
+    <AbilitieList>
+      <FastField name={`permissions.${subject}/${key}`} type="checkbox">
+        {({ form: { setFieldValue, values }, field }) => (
+          <Checkbox inline={true} label={label} name={subject} {...field} />
+        )}
+      </FastField>
+    </AbilitieList>
+  ));
+};
+
+export const RolesPermissionList = () => {
+  const { permissionsSchema } = useRolesFormContext();
+
+  return (
+    <GroupList>
+      <BoxedGroupList>
+        {permissionsSchema.map(
+          ({
+            subject,
+            subject_label,
+            description,
+            abilities,
+            extra_abilities,
+          }) => {
+            const extraAbilitiesList = Array.isArray(extra_abilities)
+              ? extra_abilities
+              : [];
+
+            const abilitiesList = castArray(abilities) ? abilities : [];
+
+            return (
+              <React.Fragment>
+                <RoleList>
+                  <RoleLabelCheckbox
+                    subject={subject}
+                    label={subject_label}
+                    description={description}
+                  />
+
+                  <AbilitiesList subject={subject} abilities={abilitiesList} />
+                  <ExtraAbilitiesList
+                    subject={subject}
+                    extraAbilities={extraAbilitiesList}
+                  />
+                </RoleList>
+              </React.Fragment>
+            );
+          },
+        )}
+      </BoxedGroupList>
+    </GroupList>
+  );
+};
+
+const GroupList = styled.div`
+  list-style: none;
+  border: 1px solid #d2dce2;
+  border-radius: 6px;
+  font-size: 13px;
+
+  ul:first-child > li:last-child {
+    border-bottom: 0;
+    border-top: 0;
+  }
+`;
+
+const BoxedGroupList = styled.ul`
+  margin: 0;
+  list-style: none;
+`;
+
+const RoleList = styled.li`
+  display: block;
+  padding: 5px 10px;
+  margin: 0;
+  line-height: 20px;
+  border-bottom: 1px solid #e0e0e0;
+`;
+
+const LabelCheckbox = styled.label`
+  > * {
+    display: inline-block;
+  }
+  .block {
+    width: 220px;
+    padding: 2px 0;
+    font-weight: 500;
+  }
+`;
+
+const AbilitieList = styled.ul`
+  list-style: none;
+  /* margin-left: 12px; // 10px */
+  margin: 0px 10px 0px;
+
+  > li {
+    display: inline-block;
+    margin-top: 3px;
+  }
+`;
+
+const AbilitiesChildList = styled.li`
+  display: inline-block;
+  margin-top: 3px;
+`;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { DataTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import { useRolesTableColumns, ActionsMenu } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Roles data table.
+ */
+export default function RolesDataTable() {
+  const columns = useRolesTableColumns();
+
+  return (
+    <DataTable
+      columns={columns}
+      data={[]}
+      // loading={}
+      // progressBarLoading={}
+      TableLoadingRenderer={TableSkeletonRows}
+      ContextMenu={ActionsMenu}
+      // payload={{}}
+    />
+  );
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { RolesListProvider } from './RolesListProvider';
+import RolesDataTable from './RolesDataTable';
+
+/**
+ * Roles list.
+ */
+function RolesListPrefernces() {
+  return (
+    <RolesListProvider>
+      <RolesDataTable />
+    </RolesListProvider>
+  );
+}
+
+export default RolesListPrefernces;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+// import {} from 'hooks/query';
+
+const RolesListContext = React.createContext();
+
+/**
+ * Roles list provider.
+ */
+function RolesListProvider({ ...props }) {
+  // Provider state.
+  const provider = {};
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+      )}
+    >
+      <RolesListContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useRolesContext = () => React.useContext(RolesListContext);
+
+export { RolesListProvider, useRolesContext };

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { safeInvoke } from 'utils';
+import { Icon, If } from 'components';
+
+/**
+ * Context menu of roles.
+ */
+export function ActionsMenu({ payload: {}, row: { original } }) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('roles.edit_roles')}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('roles.delete_roles')}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve Roles table columns.
+ * @returns
+ */
+export function useRolesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: intl.get('roles.column.name'),
+        // accessor: ,
+        className: 'name',
+        width: '100',
+        disableSortBy: true,
+      },
+      {
+        id: 'description',
+        Header: intl.get('roles.column.description'),
+        // accessor: ,
+        className: 'description',
+        width: '120',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Preferences/Users/Users.js

@@ -26,11 +26,18 @@ function UsersPreferences({ openDialog }) {
       <div className={classNames(CLASSES.CARD)}>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
-            <Tab id="users" title={intl.get('users')} />
-            <Tab id="roles" title={intl.get('roles')} />
+            <Tab
+              id="users"
+              title={intl.get('users')}
+              panel={<PreferencesSubContent preferenceTab="users" />}
+            />
+            <Tab
+              id="roles"
+              title={intl.get('roles')}
+              panel={<PreferencesSubContent preferenceTab="roles" />}
+            />
           </Tabs>
         </div>
-        <PreferencesSubContent preferenceTab="users" />
       </div>
     </div>
   );

src/containers/Preferences/Users/UsersActions.js

@@ -1,40 +1,41 @@
 import React from 'react';
-import {
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+
+import { Button, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import {compose} from 'utils';
+import { compose } from 'utils';
 
-function UsersActions({
-  openDialog,
-  closeDialog,
-}) {
+function UsersActions({ openDialog, closeDialog }) {
+  const history = useHistory();
   const onClickNewUser = () => {
     openDialog('invite-user');
   };
 
+  const onClickNewRole = () => {
+    history.push('/preferences/roles');
+  };
+
   return (
     <div className="preferences-actions">
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
+        icon={<Icon icon="plus" iconSize={12} />}
         onClick={onClickNewUser}
-        intent={Intent.PRIMARY}>
+        intent={Intent.PRIMARY}
+      >
         <T id={'invite_user'} />
       </Button>
 
       <Button
-        icon={<Icon icon='plus' iconSize={12} />}
-        onClick={onClickNewUser}>
+        icon={<Icon icon="plus" iconSize={12} />}
+        onClick={onClickNewRole}
+      >
         <T id={'new_role'} />
       </Button>
     </div>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(UsersActions);
+export default compose(withDialogActions)(UsersActions);