feat(ui): allow admins to edit & accept request from request modal

This changes the "Edit Request" button in the advanced request modal to "Edit & Accept Request" since the only thing an admin would do next is to accept the request. The button would stay the same for users without the manage request permissions; users who are editing their own requests or requesting content.
sct · Sep 21, 2021 · b1f63d1 · b1f63d1
1 parent 6c30d62
commit b1f63d1
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 31 deletions.
diff --git a/src/components/RequestModal/MovieRequestModal.tsx b/src/components/RequestModal/MovieRequestModal.tsx
@@ -23,12 +23,15 @@ const messages = defineMessages({
   requesttitle: 'Request {title}',
   request4ktitle: 'Request {title} in 4K',
   edit: 'Edit Request',
+  editAndApprove: 'Edit & Approve Request',
   cancel: 'Cancel Request',
   pendingrequest: 'Pending Request for {title}',
   pending4krequest: 'Pending 4K Request for {title}',
   requestfrom: "{username}'s request is pending approval.",
   errorediting: 'Something went wrong while editing the request.',
   requestedited: 'Request for <strong>{title}</strong> edited successfully!',
+  requestEditedAndApproved:
+    'Request for <strong>{title}</strong> edited and approved successfully!',
   requesterror: 'Something went wrong while submitting the request.',
   pendingapproval: 'Your request is pending approval.',
 });
@@ -156,7 +159,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
     }
   };
 
-  const updateRequest = async () => {
+  const updateRequest = async (alsoAcceptRequest = false) => {
     setIsUpdating(true);
 
     try {
@@ -169,14 +172,23 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         tags: requestOverrides?.tags,
       });
 
+      if (alsoAcceptRequest) {
+        await axios.post(`/api/v1/request/${editRequest?.id}/approve`);
+      }
+
       addToast(
         <span>
-          {intl.formatMessage(messages.requestedited, {
-            title: data?.title,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
+          {intl.formatMessage(
+            alsoAcceptRequest
+              ? messages.requestEditedAndApproved
+              : messages.requestedited,
+            {
+              title: data?.title,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            }
+          )}
         </span>,
         {
           appearance: 'success',
@@ -199,12 +211,8 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   if (editRequest) {
     const isOwner = editRequest.requestedBy.id === user?.id;
-    const showEditButton = hasPermission(
-      [Permission.MANAGE_REQUESTS, Permission.REQUEST_ADVANCED],
-      {
-        type: 'or',
-      }
-    );
+    const canManageRequests = hasPermission(Permission.MANAGE_REQUESTS);
+    const canEditRequests = hasPermission(Permission.REQUEST_ADVANCED);
 
     return (
       <Modal
@@ -215,20 +223,32 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
           is4k ? messages.pending4krequest : messages.pendingrequest,
           { title: data?.title }
         )}
-        onOk={() => (showEditButton ? updateRequest() : cancelRequest())}
+        onOk={() =>
+          canManageRequests
+            ? updateRequest(true)
+            : canEditRequests
+            ? updateRequest()
+            : cancelRequest()
+        }
         okDisabled={isUpdating}
         okText={
-          showEditButton
+          canManageRequests
+            ? intl.formatMessage(messages.editAndApprove)
+            : canEditRequests
             ? intl.formatMessage(messages.edit)
             : intl.formatMessage(messages.cancel)
         }
-        okButtonType={showEditButton ? 'primary' : 'danger'}
+        okButtonType={
+          canManageRequests ? 'success' : canEditRequests ? 'primary' : 'danger'
+        }
         onSecondary={
-          isOwner && showEditButton ? () => cancelRequest() : undefined
+          isOwner && (canManageRequests || canEditRequests)
+            ? () => cancelRequest()
+            : undefined
         }
         secondaryDisabled={isUpdating}
         secondaryText={
-          isOwner && showEditButton
+          isOwner && (canManageRequests || canEditRequests)
             ? intl.formatMessage(messages.cancel)
             : undefined
         }

diff --git a/src/components/RequestModal/TvRequestModal.tsx b/src/components/RequestModal/TvRequestModal.tsx
@@ -30,6 +30,7 @@ const messages = defineMessages({
   requesttitle: 'Request {title}',
   request4ktitle: 'Request {title} in 4K',
   edit: 'Edit Request',
+  editAndApprove: 'Edit & Approve Request',
   cancel: 'Cancel Request',
   pendingrequest: 'Pending Request for {title}',
   pending4krequest: 'Pending 4K Request for {title}',
@@ -45,6 +46,8 @@ const messages = defineMessages({
   extras: 'Extras',
   errorediting: 'Something went wrong while editing the request.',
   requestedited: 'Request for <strong>{title}</strong> edited successfully!',
+  requestEditedAndApproved:
+    'Request for <strong>{title}</strong> edited and approved successfully!',
   requestcancelled: 'Request for <strong>{title}</strong> canceled.',
   autoapproval: 'Automatic Approval',
   requesterror: 'Something went wrong while submitting the request.',
@@ -96,7 +99,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     selectedSeasons.length +
     (editRequest?.seasons ?? []).length;
 
-  const updateRequest = async () => {
+  const updateRequest = async (alsoAcceptRequest = false) => {
     if (!editRequest) {
       return;
     }
@@ -117,19 +120,28 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           tags: requestOverrides?.tags,
           seasons: selectedSeasons,
         });
+
+        if (alsoAcceptRequest) {
+          await axios.post(`/api/v1/request/${editRequest.id}/approve`);
+        }
       } else {
         await axios.delete(`/api/v1/request/${editRequest.id}`);
       }
 
       addToast(
         <span>
           {selectedSeasons.length > 0
-            ? intl.formatMessage(messages.requestedited, {
-                title: data?.name,
-                strong: function strong(msg) {
-                  return <strong>{msg}</strong>;
-                },
-              })
+            ? intl.formatMessage(
+                alsoAcceptRequest
+                  ? messages.requestEditedAndApproved
+                  : messages.requestedited,
+                {
+                  title: data?.name,
+                  strong: function strong(msg) {
+                    return <strong>{msg}</strong>;
+                  },
+                }
+              )
             : intl.formatMessage(messages.requestcancelled, {
                 title: data?.name,
                 strong: function strong(msg) {
@@ -349,6 +361,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
   };
 
   const isOwner = editRequest && editRequest.requestedBy.id === user?.id;
+  const canManageRequests = hasPermission(Permission.MANAGE_REQUESTS);
 
   return !data?.externalIds.tvdbId && searchModal.show ? (
     <SearchByNameModal
@@ -368,7 +381,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       loading={!data && !error}
       backgroundClickable
       onCancel={tvdbId ? () => setSearchModal({ show: true }) : onCancel}
-      onOk={() => (editRequest ? updateRequest() : sendRequest())}
+      onOk={() =>
+        editRequest
+          ? canManageRequests
+            ? updateRequest(true)
+            : updateRequest()
+          : sendRequest()
+      }
       title={intl.formatMessage(
         editRequest
           ? is4k
@@ -383,6 +402,8 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
         editRequest
           ? selectedSeasons.length === 0
             ? intl.formatMessage(messages.cancel)
+            : canManageRequests
+            ? intl.formatMessage(messages.editAndApprove)
             : intl.formatMessage(messages.edit)
           : getAllRequestedSeasons().length >= getAllSeasons().length
           ? intl.formatMessage(messages.alreadyrequested)
@@ -406,11 +427,14 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
               selectedSeasons.length === 0)
       }
       okButtonType={
-        editRequest &&
-        settings.currentSettings.partialRequestsEnabled &&
-        selectedSeasons.length === 0
-          ? 'danger'
-          : `primary`
+        editRequest
+          ? settings.currentSettings.partialRequestsEnabled &&
+            selectedSeasons.length === 0
+            ? 'danger'
+            : canManageRequests
+            ? 'success'
+            : 'primary'
+          : 'primary'
       }
       cancelText={
         editRequest

diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
@@ -226,6 +226,7 @@
   "components.RequestModal.autoapproval": "Automatic Approval",
   "components.RequestModal.cancel": "Cancel Request",
   "components.RequestModal.edit": "Edit Request",
+  "components.RequestModal.editAndApprove": "Edit & Approve Request",
   "components.RequestModal.errorediting": "Something went wrong while editing the request.",
   "components.RequestModal.extras": "Extras",
   "components.RequestModal.numberofepisodes": "# of Episodes",
@@ -234,6 +235,7 @@
   "components.RequestModal.pendingrequest": "Pending Request for {title}",
   "components.RequestModal.request4ktitle": "Request {title} in 4K",
   "components.RequestModal.requestCancel": "Request for <strong>{title}</strong> canceled.",
+  "components.RequestModal.requestEditedAndApproved": "Request for <strong>{title}</strong> edited and approved successfully!",
   "components.RequestModal.requestSuccess": "<strong>{title}</strong> requested successfully!",
   "components.RequestModal.requestadmin": "This request will be approved automatically.",
   "components.RequestModal.requestall": "Request All Seasons",