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

src/components/RequestModal/MovieRequestModal.tsx

@@ -13,6 +13,9 @@ import {
   MediaRequestStatus,
 } from '../../../server/constants/media';
 import DownloadIcon from '../../assets/download.svg';
+import Alert from '../Common/Alert';
+import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
   requestadmin:
@@ -33,11 +36,14 @@ const messages = defineMessages({
   request4k: 'Request 4K',
   requestfrom: 'There is currently a pending request from {username}',
   request4kfrom: 'There is currently a pending 4K request from {username}',
+  errorediting: 'Something went wrong editing the request.',
+  requestedited: 'Request edited.',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
   tmdbId: number;
   is4k?: boolean;
+  editRequest?: MediaRequest;
   onCancel?: () => void;
   onComplete?: (newStatus: MediaStatus) => void;
   onUpdating?: (isUpdating: boolean) => void;
@@ -48,9 +54,14 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
   onComplete,
   tmdbId,
   onUpdating,
-  is4k,
+  editRequest,
+  is4k = false,
 }) => {
   const [isUpdating, setIsUpdating] = useState(false);
+  const [
+    requestOverrides,
+    setRequestOverrides,
+  ] = useState<RequestOverrides | null>(null);
   const { addToast } = useToasts();
   const { data, error } = useSWR<MovieDetails>(`/api/v1/movie/${tmdbId}`, {
     revalidateOnMount: true,
@@ -66,10 +77,19 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   const sendRequest = useCallback(async () => {
     setIsUpdating(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,
       mediaType: 'movie',
       is4k,
+      ...overrideParams,
     });
 
     if (response.data) {
@@ -94,7 +114,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       );
       setIsUpdating(false);
     }
-  }, [data, onComplete, addToast]);
+  }, [data, onComplete, addToast, requestOverrides]);
 
   const activeRequest = data?.mediaInfo?.requests?.find(
     (request) => request.is4k === !!is4k
@@ -125,35 +145,64 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
     }
   };
 
+  const updateRequest = async () => {
+    setIsUpdating(true);
+
+    try {
+      await axios.put(`/api/v1/request/${editRequest?.id}`, {
+        mediaType: 'movie',
+        serverId: requestOverrides?.server,
+        profileId: requestOverrides?.profile,
+        rootFolder: requestOverrides?.folder,
+      });
+
+      addToast(<span>{intl.formatMessage(messages.requestedited)}</span>, {
+        appearance: 'success',
+        autoDismiss: true,
+      });
+
+      if (onComplete) {
+        onComplete(MediaStatus.PENDING);
+      }
+    } catch (e) {
+      addToast(<span>{intl.formatMessage(messages.errorediting)}</span>, {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
   const isOwner = activeRequest
     ? activeRequest.requestedBy.id === user?.id ||
       hasPermission(Permission.MANAGE_REQUESTS)
     : false;
 
-  const text = hasPermission(Permission.MANAGE_REQUESTS)
-    ? intl.formatMessage(messages.requestadmin)
-    : undefined;
-
   if (activeRequest?.status === MediaRequestStatus.PENDING) {
     return (
       <Modal
         loading={!data && !error}
         backgroundClickable
         onCancel={onCancel}
-        onOk={isOwner ? () => cancelRequest() : undefined}
-        okDisabled={isUpdating}
         title={intl.formatMessage(
           is4k ? messages.pending4krequest : messages.pendingrequest,
           {
             title: data?.title,
           }
         )}
-        okText={
+        onOk={() => updateRequest()}
+        okDisabled={isUpdating}
+        okText={intl.formatMessage(globalMessages.edit)}
+        okButtonType="primary"
+        onSecondary={isOwner ? () => cancelRequest() : undefined}
+        secondaryDisabled={isUpdating}
+        secondaryText={
           isUpdating
             ? intl.formatMessage(messages.cancelling)
             : intl.formatMessage(messages.cancel)
         }
-        okButtonType={'danger'}
+        secondaryButtonType="danger"
         cancelText={intl.formatMessage(messages.close)}
         iconSvg={<DownloadIcon className="w-6 h-6" />}
       >
@@ -163,6 +212,26 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
             username: activeRequest.requestedBy.username,
           }
         )}
+        {hasPermission(Permission.REQUEST_ADVANCED) && (
+          <div className="mt-4">
+            <AdvancedRequester
+              type="movie"
+              is4k={is4k}
+              defaultOverrides={
+                editRequest
+                  ? {
+                      folder: editRequest.rootFolder,
+                      profile: editRequest.profileId,
+                      server: editRequest.serverId,
+                    }
+                  : undefined
+              }
+              onChange={(overrides) => {
+                setRequestOverrides(overrides);
+              }}
+            />
+          </div>
+        )}
       </Modal>
     );
   }
@@ -186,7 +255,24 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       okButtonType={'primary'}
       iconSvg={<DownloadIcon className="w-6 h-6" />}
     >
-      <p className="text-center md:text-left">{text}</p>
+      {(hasPermission(Permission.MANAGE_REQUESTS) ||
+        hasPermission(Permission.AUTO_APPROVE) ||
+        hasPermission(Permission.AUTO_APPROVE_MOVIE)) && (
+        <p className="mt-6">
+          <Alert title="Auto Approval" type="info">
+            {intl.formatMessage(messages.requestadmin)}
+          </Alert>
+        </p>
+      )}
+      {hasPermission(Permission.REQUEST_ADVANCED) && (
+        <AdvancedRequester
+          type="movie"
+          is4k={is4k}
+          onChange={(overrides) => {
+            setRequestOverrides(overrides);
+          }}
+        />
+      )}
     </Modal>
   );
 };