feat: ability to edit user settings in bulk (#597)
David
4 years ago
committed by
GitHub
parent
2f75c4c6ae
commit
4b0241c3b3
@ -0,0 +1,157 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PermissionOption, { PermissionItem } from '../PermissionOption';
|
||||||
|
import { Permission, User } from '../../hooks/useUser';
|
||||||
|
import { useIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
|
export const messages = defineMessages({
|
||||||
|
admin: 'Admin',
|
||||||
|
adminDescription:
|
||||||
|
'Full administrator access. Bypasses all permission checks.',
|
||||||
|
users: 'Manage Users',
|
||||||
|
usersDescription:
|
||||||
|
'Grants permission to manage Overseerr users. Users with this permission cannot modify users with Administrator privilege, or grant it.',
|
||||||
|
settings: 'Manage Settings',
|
||||||
|
settingsDescription:
|
||||||
|
'Grants permission to modify all Overseerr settings. A user must have this permission to grant it to others.',
|
||||||
|
managerequests: 'Manage Requests',
|
||||||
|
managerequestsDescription:
|
||||||
|
'Grants permission to manage Overseerr requests. This includes approving and denying requests.',
|
||||||
|
request: 'Request',
|
||||||
|
requestDescription: 'Grants permission to request movies and series.',
|
||||||
|
vote: 'Vote',
|
||||||
|
voteDescription:
|
||||||
|
'Grants permission to vote on requests (voting not yet implemented)',
|
||||||
|
autoapprove: 'Auto Approve',
|
||||||
|
autoapproveDescription:
|
||||||
|
'Grants auto approval for any requests made by this user.',
|
||||||
|
autoapproveMovies: 'Auto Approve Movies',
|
||||||
|
autoapproveMoviesDescription:
|
||||||
|
'Grants auto approve for movie requests made by this user.',
|
||||||
|
autoapproveSeries: 'Auto Approve Series',
|
||||||
|
autoapproveSeriesDescription:
|
||||||
|
'Grants auto approve for series requests made by this user.',
|
||||||
|
request4k: 'Request 4K',
|
||||||
|
request4kDescription: 'Grants permission to request 4K movies and series.',
|
||||||
|
request4kMovies: 'Request 4K Movies',
|
||||||
|
request4kMoviesDescription: 'Grants permission to request 4K movies.',
|
||||||
|
request4kTv: 'Request 4K Series',
|
||||||
|
request4kTvDescription: 'Grants permission to request 4K Series.',
|
||||||
|
advancedrequest: 'Advanced Requests',
|
||||||
|
advancedrequestDescription:
|
||||||
|
'Grants permission to use advanced request options. (Ex. Changing servers/profiles/paths)',
|
||||||
|
});
|
||||||
|
|
||||||
|
interface PermissionEditProps {
|
||||||
|
currentPermission: number;
|
||||||
|
user?: User;
|
||||||
|
onUpdate: (newPermissions: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PermissionEdit: React.FC<PermissionEditProps> = ({
|
||||||
|
currentPermission,
|
||||||
|
onUpdate,
|
||||||
|
user,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const permissionList: PermissionItem[] = [
|
||||||
|
{
|
||||||
|
id: 'admin',
|
||||||
|
name: intl.formatMessage(messages.admin),
|
||||||
|
description: intl.formatMessage(messages.adminDescription),
|
||||||
|
permission: Permission.ADMIN,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'settings',
|
||||||
|
name: intl.formatMessage(messages.settings),
|
||||||
|
description: intl.formatMessage(messages.settingsDescription),
|
||||||
|
permission: Permission.MANAGE_SETTINGS,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'users',
|
||||||
|
name: intl.formatMessage(messages.users),
|
||||||
|
description: intl.formatMessage(messages.usersDescription),
|
||||||
|
permission: Permission.MANAGE_USERS,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'managerequest',
|
||||||
|
name: intl.formatMessage(messages.managerequests),
|
||||||
|
description: intl.formatMessage(messages.managerequestsDescription),
|
||||||
|
permission: Permission.MANAGE_REQUESTS,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'advancedrequest',
|
||||||
|
name: intl.formatMessage(messages.advancedrequest),
|
||||||
|
description: intl.formatMessage(messages.advancedrequestDescription),
|
||||||
|
permission: Permission.REQUEST_ADVANCED,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'request',
|
||||||
|
name: intl.formatMessage(messages.request),
|
||||||
|
description: intl.formatMessage(messages.requestDescription),
|
||||||
|
permission: Permission.REQUEST,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'request4k',
|
||||||
|
name: intl.formatMessage(messages.request4k),
|
||||||
|
description: intl.formatMessage(messages.request4kDescription),
|
||||||
|
permission: Permission.REQUEST_4K,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'request4k-movies',
|
||||||
|
name: intl.formatMessage(messages.request4kMovies),
|
||||||
|
description: intl.formatMessage(messages.request4kMoviesDescription),
|
||||||
|
permission: Permission.REQUEST_4K_MOVIE,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'request4k-tv',
|
||||||
|
name: intl.formatMessage(messages.request4kTv),
|
||||||
|
description: intl.formatMessage(messages.request4kTvDescription),
|
||||||
|
permission: Permission.REQUEST_4K_TV,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'autoapprove',
|
||||||
|
name: intl.formatMessage(messages.autoapprove),
|
||||||
|
description: intl.formatMessage(messages.autoapproveDescription),
|
||||||
|
permission: Permission.AUTO_APPROVE,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'autoapprovemovies',
|
||||||
|
name: intl.formatMessage(messages.autoapproveMovies),
|
||||||
|
description: intl.formatMessage(
|
||||||
|
messages.autoapproveMoviesDescription
|
||||||
|
),
|
||||||
|
permission: Permission.AUTO_APPROVE_MOVIE,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'autoapprovetv',
|
||||||
|
name: intl.formatMessage(messages.autoapproveSeries),
|
||||||
|
description: intl.formatMessage(
|
||||||
|
messages.autoapproveSeriesDescription
|
||||||
|
),
|
||||||
|
permission: Permission.AUTO_APPROVE_TV,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{permissionList.map((permissionItem) => (
|
||||||
|
<PermissionOption
|
||||||
|
key={`permission-option-${permissionItem.id}`}
|
||||||
|
option={permissionItem}
|
||||||
|
user={user}
|
||||||
|
currentPermission={currentPermission}
|
||||||
|
onUpdate={(newPermission) => onUpdate(newPermission)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PermissionEdit;
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import PermissionEdit from '../PermissionEdit';
|
||||||
|
import Modal from '../Common/Modal';
|
||||||
|
import { User, useUser } from '../../hooks/useUser';
|
||||||
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useToasts } from 'react-toast-notifications';
|
||||||
|
import { messages as userEditMessages } from '../UserEdit';
|
||||||
|
|
||||||
|
interface BulkEditProps {
|
||||||
|
selectedUserIds: number[];
|
||||||
|
users?: User[];
|
||||||
|
onCancel?: () => void;
|
||||||
|
onComplete?: (updatedUsers: User[]) => void;
|
||||||
|
onSaving?: (isSaving: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
userssaved: 'Users saved',
|
||||||
|
});
|
||||||
|
|
||||||
|
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(userEditMessages.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(userEditMessages.edituser)}
|
||||||
|
onOk={() => {
|
||||||
|
updateUsers();
|
||||||
|
}}
|
||||||
|
okDisabled={isSaving}
|
||||||
|
okText={intl.formatMessage(userEditMessages.save)}
|
||||||
|
onCancel={onCancel}
|
||||||
|
>
|
||||||
|
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="text-base font-medium leading-6 sm:text-sm sm:leading-5"
|
||||||
|
id="label-permissions"
|
||||||
|
>
|
||||||
|
<FormattedMessage {...userEditMessages.permissions} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 sm:mt-0 sm:col-span-2">
|
||||||
|
<div className="max-w-lg">
|
||||||
|
<PermissionEdit
|
||||||
|
user={currentUser}
|
||||||
|
currentPermission={currentPermission}
|
||||||
|
onUpdate={(newPermission) => setCurrentPermission(newPermission)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BulkEditModal;
|
||||||
Loading…
Reference in new issue