feat(requests): Request Overrides & Request Editing (#653)

This commit is contained in:
sct
2021-01-17 22:52:50 +09:00
committed by GitHub
parent d9919abb89
commit bdb33722e6
24 changed files with 1256 additions and 63 deletions

View File

@@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
import { MediaRequest } from '../../../server/entity/MediaRequest';
import useSWR from 'swr';
import { useToasts } from 'react-toast-notifications';
import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb';
import axios from 'axios';
import {
MediaStatus,
@@ -15,13 +16,14 @@ import { TvDetails } from '../../../server/models/Tv';
import Badge from '../Common/Badge';
import globalMessages from '../../i18n/globalMessages';
import SeasonRequest from '../../../server/entity/SeasonRequest';
import Alert from '../Common/Alert';
import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
const messages = defineMessages({
requestadmin: 'Your request will be immediately approved.',
cancelrequest:
'This will remove your request. Are you sure you want to continue?',
requestSuccess: '<strong>{title}</strong> successfully requested!',
requestCancel: 'Request for <strong>{title}</strong> cancelled',
requesttitle: 'Request {title}',
request4ktitle: 'Request {title} in 4K',
requesting: 'Requesting...',
@@ -34,6 +36,9 @@ const messages = defineMessages({
seasonnumber: 'Season {number}',
extras: 'Extras',
notrequested: 'Not Requested',
errorediting: 'Something went wrong editing the request.',
requestedited: 'Request edited.',
requestcancelled: 'Request cancelled.',
});
interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -42,6 +47,7 @@ interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
onComplete?: (newStatus: MediaStatus) => void;
onUpdating?: (isUpdating: boolean) => void;
is4k?: boolean;
editRequest?: MediaRequest;
}
const TvRequestModal: React.FC<RequestModalProps> = ({
@@ -49,14 +55,72 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
onComplete,
tmdbId,
onUpdating,
editRequest,
is4k = false,
}) => {
const { addToast } = useToasts();
const editingSeasons: number[] = (editRequest?.seasons ?? []).map(
(season) => season.seasonNumber
);
const { data, error } = useSWR<TvDetails>(`/api/v1/tv/${tmdbId}`);
const [selectedSeasons, setSelectedSeasons] = useState<number[]>([]);
const [
requestOverrides,
setRequestOverrides,
] = useState<RequestOverrides | null>(null);
const [selectedSeasons, setSelectedSeasons] = useState<number[]>(
editRequest ? editingSeasons : []
);
const intl = useIntl();
const { hasPermission } = useUser();
const updateRequest = async () => {
if (!editRequest) {
return;
}
if (onUpdating) {
onUpdating(true);
}
try {
if (selectedSeasons.length > 0) {
await axios.put(`/api/v1/request/${editRequest.id}`, {
mediaType: 'tv',
serverId: requestOverrides?.server,
profileId: requestOverrides?.profile,
rootFolder: requestOverrides?.folder,
seasons: selectedSeasons,
});
} else {
await axios.delete(`/api/v1/request/${editRequest.id}`);
}
addToast(
<span>
{selectedSeasons.length > 0
? intl.formatMessage(messages.requestedited)
: intl.formatMessage(messages.requestcancelled)}
</span>,
{
appearance: 'success',
autoDismiss: true,
}
);
if (onComplete) {
onComplete(MediaStatus.PENDING);
}
} catch (e) {
addToast(<span>{intl.formatMessage(messages.errorediting)}</span>, {
appearance: 'error',
autoDismiss: true,
});
} finally {
if (onUpdating) {
onUpdating(false);
}
}
};
const sendRequest = async () => {
if (selectedSeasons.length === 0) {
return;
@@ -64,12 +128,21 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
if (onUpdating) {
onUpdating(true);
}
let overrideParams = {};
if (requestOverrides) {
overrideParams = {
serverId: requestOverrides.server,
profileId: requestOverrides.profile,
rootFolder: requestOverrides.folder,
};
}
const response = await axios.post<MediaRequest>('/api/v1/request', {
mediaId: data?.id,
tvdbId: data?.externalIds.tvdbId,
mediaType: 'tv',
is4k,
seasons: selectedSeasons,
...overrideParams,
});
if (response.data) {
@@ -99,7 +172,9 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
.reduce((requestedSeasons, request) => {
return [
...requestedSeasons,
...request.seasons.map((sr) => sr.seasonNumber),
...request.seasons
.filter((season) => !editingSeasons.includes(season.seasonNumber))
.map((sr) => sr.seasonNumber),
];
}, [] as number[]);
@@ -172,10 +247,6 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
);
};
const text = hasPermission(Permission.MANAGE_REQUESTS)
? intl.formatMessage(messages.requestadmin)
: undefined;
const getSeasonRequest = (
seasonNumber: number
): SeasonRequest | undefined => {
@@ -205,20 +276,24 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
loading={!data && !error}
backgroundClickable
onCancel={onCancel}
onOk={() => sendRequest()}
onOk={() => (editRequest ? updateRequest() : sendRequest())}
title={intl.formatMessage(
is4k ? messages.request4ktitle : messages.requesttitle,
{ title: data?.name }
)}
okText={
selectedSeasons.length === 0
editRequest && selectedSeasons.length === 0
? 'Cancel Request'
: selectedSeasons.length === 0
? intl.formatMessage(messages.selectseason)
: intl.formatMessage(messages.requestseasons, {
seasonCount: selectedSeasons.length,
})
}
okDisabled={selectedSeasons.length === 0}
okButtonType="primary"
okDisabled={editRequest ? false : selectedSeasons.length === 0}
okButtonType={
editRequest && selectedSeasons.length === 0 ? 'danger' : `primary`
}
iconSvg={
<svg
className="w-6 h-6"
@@ -236,8 +311,18 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
</svg>
}
>
{(hasPermission(Permission.MANAGE_REQUESTS) ||
hasPermission(Permission.AUTO_APPROVE) ||
hasPermission(Permission.AUTO_APPROVE_MOVIE)) &&
!editRequest && (
<p className="mt-6">
<Alert title="Auto Approval" type="info">
{intl.formatMessage(messages.requestadmin)}
</Alert>
</p>
)}
<div className="flex flex-col">
<div className="-mx-4 overflow-auto sm:mx-0 max-h-96">
<div className="-mx-4 sm:mx-0">
<div className="inline-block min-w-full py-2 align-middle">
<div className="overflow-hidden shadow sm:rounded-lg">
<table className="min-w-full">
@@ -281,7 +366,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
</th>
</tr>
</thead>
<tbody className="bg-gray-600 divide-y">
<tbody className="bg-gray-600 divide-y divide-gray-700">
{data?.seasons
.filter((season) => season.seasonNumber !== 0)
.map((season) => {
@@ -302,7 +387,10 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
tabIndex={0}
aria-checked={
!!mediaSeason ||
!!seasonRequest ||
(!!seasonRequest &&
!editingSeasons.includes(
season.seasonNumber
)) ||
isSelectedSeason(season.seasonNumber)
}
onClick={() => toggleSeason(season.seasonNumber)}
@@ -312,14 +400,21 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
}
}}
className={`group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
mediaSeason || seasonRequest ? 'opacity-50' : ''
mediaSeason ||
(!!seasonRequest &&
!editingSeasons.includes(season.seasonNumber))
? 'opacity-50'
: ''
}`}
>
<span
aria-hidden="true"
className={`${
!!mediaSeason ||
!!seasonRequest ||
(!!seasonRequest &&
!editingSeasons.includes(
season.seasonNumber
)) ||
isSelectedSeason(season.seasonNumber)
? 'bg-indigo-500'
: 'bg-gray-800'
@@ -329,7 +424,10 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
aria-hidden="true"
className={`${
!!mediaSeason ||
!!seasonRequest ||
(!!seasonRequest &&
!editingSeasons.includes(
season.seasonNumber
)) ||
isSelectedSeason(season.seasonNumber)
? 'translate-x-5'
: 'translate-x-0'
@@ -398,7 +496,27 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
</div>
</div>
</div>
<p className="mt-4">{text}</p>
{hasPermission(Permission.REQUEST_ADVANCED) && (
<div className="mt-4">
<AdvancedRequester
type="tv"
is4k={is4k}
isAnime={data?.keywords.some(
(keyword) => keyword.id === ANIME_KEYWORD_ID
)}
onChange={(overrides) => setRequestOverrides(overrides)}
defaultOverrides={
editRequest
? {
folder: editRequest.rootFolder,
profile: editRequest.profileId,
server: editRequest.serverId,
}
: undefined
}
/>
</div>
)}
</Modal>
);
};