import React, { useState, useRef } from 'react';
import { useRouteMatch } from 'react-router-dom';
import { get, has, isEmpty } from 'lodash';
import { BaselineAlignment, useGlobalContext, request, difference } from 'strapi-helper-plugin';
import { Header } from '@buffetjs/custom';
import { Padded } from '@buffetjs/core';
import { Formik } from 'formik';
import { useIntl } from 'react-intl';
import PageTitle from '../../../components/SettingsPageTitle';
import ContainerFluid from '../../../components/ContainerFluid';
import { Permissions, RoleForm } from '../../../components/Roles';
import { useFetchRole, useFetchPermissionsLayout } from '../../../hooks';
import { formatPermissionsToApi } from '../../../utils';
import schema from './utils/schema';
const EditPage = () => {
const { formatMessage } = useIntl();
const { emitEvent, settingsBaseURL } = useGlobalContext();
const {
params: { id },
} = useRouteMatch(`${settingsBaseURL}/roles/:id`);
const [isSubmiting, setIsSubmiting] = useState(false);
const permissionsRef = useRef();
const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout(id);
const {
role,
permissions: rolePermissions,
isLoading: isRoleLoading,
onSubmitSucceeded,
} = useFetchRole(id);
/* eslint-disable indent */
const headerActions = (handleSubmit, handleReset) =>
isLayoutLoading && isRoleLoading
? []
: [
{
label: formatMessage({
id: 'app.components.Button.reset',
defaultMessage: 'Reset',
}),
disabled: role.code === 'strapi-super-admin',
onClick: () => {
handleReset();
permissionsRef.current.resetForm();
},
color: 'cancel',
type: 'button',
},
{
label: formatMessage({
id: 'app.components.Button.save',
defaultMessage: 'Save',
}),
disabled: role.code === 'strapi-super-admin',
onClick: handleSubmit,
color: 'success',
type: 'submit',
isLoading: isSubmiting,
},
];
/* eslint-enable indent */
const handleEditRoleSubmit = async data => {
try {
strapi.lockAppWithOverlay();
setIsSubmiting(true);
const permissionsToSend = permissionsRef.current.getPermissions();
const checkConditionsDiff = () => {
const diff = difference(
get(permissionsToSend, 'contentTypesPermissions', {}),
get(rolePermissions, 'contentTypesPermissions', {})
);
if (isEmpty(diff)) {
return false;
}
return Object.keys(diff).some(key => {
return has(diff, [key, 'conditions']);
});
};
await request(`/admin/roles/${id}`, {
method: 'PUT',
body: data,
});
if (role.code !== 'strapi-super-admin' && !isEmpty(permissionsToSend)) {
await request(`/admin/roles/${id}/permissions`, {
method: 'PUT',
body: {
permissions: formatPermissionsToApi(permissionsToSend),
},
});
if (checkConditionsDiff()) {
emitEvent('didUpdateConditions');
}
}
permissionsRef.current.setFormAfterSubmit();
onSubmitSucceeded({ name: data.name, description: data.description });
strapi.notification.toggle({
type: 'success',
message: { id: 'notification.success.saved' },
});
} catch (err) {
console.error(err.response);
const message = get(err, 'response.payload.message', 'An error occured');
strapi.notification.toggle({
type: 'warning',
message,
});
} finally {
setIsSubmiting(false);
strapi.unlockApp();
}
};
return (
<>
{({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
)}
>
);
};
export default EditPage;