You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.9 KiB
108 lines
2.9 KiB
import { PencilIcon } from '@heroicons/react/solid';
|
|
import axios from 'axios';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import { useToasts } from 'react-toast-notifications';
|
|
import { User, useUser } from '../../hooks/useUser';
|
|
import globalMessages from '../../i18n/globalMessages';
|
|
import Modal from '../Common/Modal';
|
|
import PermissionEdit from '../PermissionEdit';
|
|
|
|
interface BulkEditProps {
|
|
selectedUserIds: number[];
|
|
users?: User[];
|
|
onCancel?: () => void;
|
|
onComplete?: (updatedUsers: User[]) => void;
|
|
onSaving?: (isSaving: boolean) => void;
|
|
}
|
|
|
|
const messages = defineMessages({
|
|
userssaved: 'User permissions saved successfully!',
|
|
userfail: 'Something went wrong while saving user permissions.',
|
|
edituser: 'Edit User Permissions',
|
|
});
|
|
|
|
const BulkEditModal: React.FC<BulkEditProps> = ({
|
|
selectedUserIds,
|
|
users,
|
|
onCancel,
|
|
onComplete,
|
|
onSaving,
|
|
}) => {
|
|
const { user: currentUser } = useUser();
|
|
const intl = useIntl();
|
|
const { addToast } = useToasts();
|
|
const [currentPermission, setCurrentPermission] = useState(0);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (onSaving) {
|
|
onSaving(isSaving);
|
|
}
|
|
}, [isSaving, onSaving]);
|
|
|
|
const updateUsers = async () => {
|
|
try {
|
|
setIsSaving(true);
|
|
const { data: updated } = await axios.put<User[]>(`/api/v1/user`, {
|
|
ids: selectedUserIds,
|
|
permissions: currentPermission,
|
|
});
|
|
if (onComplete) {
|
|
onComplete(updated);
|
|
}
|
|
addToast(intl.formatMessage(messages.userssaved), {
|
|
appearance: 'success',
|
|
autoDismiss: true,
|
|
});
|
|
} catch (e) {
|
|
addToast(intl.formatMessage(messages.userfail), {
|
|
appearance: 'error',
|
|
autoDismiss: true,
|
|
});
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (users) {
|
|
const selectedUsers = users.filter((u) => selectedUserIds.includes(u.id));
|
|
const { permissions: allPermissionsEqual } = selectedUsers.reduce(
|
|
({ permissions: aPerms }, { permissions: bPerms }) => {
|
|
return {
|
|
permissions: aPerms === bPerms ? aPerms : NaN,
|
|
};
|
|
},
|
|
{ permissions: selectedUsers[0].permissions }
|
|
);
|
|
if (allPermissionsEqual) {
|
|
setCurrentPermission(allPermissionsEqual);
|
|
}
|
|
}
|
|
}, [users, selectedUserIds]);
|
|
|
|
return (
|
|
<Modal
|
|
title={intl.formatMessage(messages.edituser)}
|
|
iconSvg={<PencilIcon className="w-6 h-6" />}
|
|
onOk={() => {
|
|
updateUsers();
|
|
}}
|
|
okDisabled={isSaving}
|
|
okText={intl.formatMessage(globalMessages.save)}
|
|
onCancel={onCancel}
|
|
>
|
|
<div className="mb-6">
|
|
<PermissionEdit
|
|
actingUser={currentUser}
|
|
currentPermission={currentPermission}
|
|
onUpdate={(newPermission) => setCurrentPermission(newPermission)}
|
|
/>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default BulkEditModal;
|