From 15e7f348798c310d5535af0050bfcc3897ad8acd Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Mon, 22 Nov 2021 19:53:40 +0200 Subject: [PATCH] feat: delete & edit role. --- src/containers/Alerts/Roles/RoleDeleteAlert.js | 3 +++ src/containers/AlertsContainer/registered.js | 2 ++ .../Preferences/Users/Roles/RolesAlerts.js | 7 ++++++- .../Users/Roles/RolesForm/RolesForm.js | 8 ++++---- .../Users/Roles/RolesForm/RolesFormContent.js | 1 - .../RolesForm/RolesFormFloatingActions.js | 1 - .../Users/Roles/RolesForm/RolesFormPage.js | 2 +- .../Users/Roles/RolesForm/RolesFormProvider.js | 12 +++++++----- .../Preferences/Users/Roles/RolesForm/utils.js | 18 +++++++++++++++++- .../Users/Roles/RolesLanding/RolesDataTable.js | 17 +++++++++++++++-- .../Users/Roles/RolesLanding/components.js | 9 +++++---- src/hooks/query/roles.js | 4 +++- src/lang/en/index.json | 2 +- 13 files changed, 64 insertions(+), 22 deletions(-) delete mode 100644 src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js diff --git a/src/containers/Alerts/Roles/RoleDeleteAlert.js b/src/containers/Alerts/Roles/RoleDeleteAlert.js index cf2788959..c3b5e1946 100644 --- a/src/containers/Alerts/Roles/RoleDeleteAlert.js +++ b/src/containers/Alerts/Roles/RoleDeleteAlert.js @@ -20,6 +20,9 @@ function RoleDeleteAlert({ // #withAlertStoreConnect isOpen, payload: { roleId }, + + // #withAlertActions + closeAlert, }) { const { mutateAsync: deleteRole, isLoading } = useDeleteRole(); diff --git a/src/containers/AlertsContainer/registered.js b/src/containers/AlertsContainer/registered.js index 898c583d3..d0e77fcfb 100644 --- a/src/containers/AlertsContainer/registered.js +++ b/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, ]; diff --git a/src/containers/Preferences/Users/Roles/RolesAlerts.js b/src/containers/Preferences/Users/Roles/RolesAlerts.js index 2f96cd32b..3be60d546 100644 --- a/src/containers/Preferences/Users/Roles/RolesAlerts.js +++ b/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 }]; diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js index a6c139c96..37f352b2b 100644 --- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js +++ b/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, diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js index 8b96093b7..ae2267054 100644 --- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js +++ b/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 (
{/* ---------- name ---------- */} diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js deleted file mode 100644 index a424c42f3..000000000 --- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js +++ /dev/null @@ -1 +0,0 @@ -rfc \ No newline at end of file diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js index d8dafac3a..a307d9195 100644 --- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js +++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js @@ -7,7 +7,7 @@ import { RolesFormProvider } from './RolesFormProvider'; */ export default function RolesFormPage() { return ( - + ); diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js index 04154598d..3e8cb2982 100644 --- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js +++ b/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, diff --git a/src/containers/Preferences/Users/Roles/RolesForm/utils.js b/src/containers/Preferences/Users/Roles/RolesForm/utils.js index 36915bd0d..bdb6ef36a 100644 --- a/src/containers/Preferences/Users/Roles/RolesForm/utils.js +++ b/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 }, + }; + } +}; diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js index 775f98970..bfc5ee67a 100644 --- a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js +++ b/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 ( ); } + +export default compose(withAlertsActions)(RolesDataTable); diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/components.js b/src/containers/Preferences/Users/Roles/RolesLanding/components.js index 350cfa34b..2ef284188 100644 --- a/src/containers/Preferences/Users/Roles/RolesLanding/components.js +++ b/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 ( } text={intl.get('roles.delete_roles')} + onClick={safeCallback(onDeleteRole, original)} intent={Intent.DANGER} /> @@ -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, diff --git a/src/hooks/query/roles.js b/src/hooks/query/roles.js index 2b34e0036..7d45fac4e 100644 --- a/src/hooks/query/roles.js +++ b/src/hooks/query/roles.js @@ -86,7 +86,9 @@ export function useRolePermission(role_id, props, requestProps) { { method: 'get', url: `roles/${role_id}`, ...requestProps }, { select: (res) => res.data.role, - defaultData: [], + defaultData: { + permission: [], + }, ...props, }, ); diff --git a/src/lang/en/index.json b/src/lang/en/index.json index d0f36932d..6f85db379 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1476,7 +1476,7 @@ "roles.label.role_name":"Role name", "sidebar.transactions_locaking":"Transactions Locaking", "transactions_locking.dialog.label":"Transactions locking", - "roles.permissions_schema.success_message":"The role has been created successfully.", + "roles.permission_schema.success_message":"The role has been created successfully.", "roles.permission_schema.upload_message":"The given role hsa been updated successfully.", "roles.permission_schema.delete.alert_message":"The given role has been deleted successfully.", "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":""