feat(ui): Add 'Available' filter to request list and remove unused MediaRequestStatus.AVAILABLE enum value (#905)

overseerr-api.yml

@@ -27,13 +27,13 @@ tags:
   - name: tv
     description: Endpoints related to retrieving TV series and their details.
   - name: person
-    description: Endpoints related to retrieving Person details.
+    description: Endpoints related to retrieving person details.
   - name: media
     description: Endpoints related to media management.
   - name: collection
-    description: Endpoints related to retrieving Collection details.
+    description: Endpoints related to retrieving collection details.
   - name: service
-    description: Endpoinst related to getting Service (Radarr/Sonarr) details.
+    description: Endpoints related to getting service (Radarr/Sonarr) details.
 servers:
   - url: '{server}/api/v1'
     variables:
@@ -3095,7 +3095,7 @@ paths:
           schema:
             type: string
             nullable: true
-            enum: [all, available, approved, pending, unavailable]
+            enum: [all, approved, available, pending, processing, unavailable]
         - in: query
           name: sort
           schema:
@@ -3187,6 +3187,12 @@ paths:
                   approved:
                     type: number
                     example: 10
+                  processing:
+                    type: number
+                    example: 4
+                  available:
+                    type: number
+                    example: 6
                 required:
                   - pending
                   - approved

server/constants/media.ts

@@ -2,7 +2,6 @@ export enum MediaRequestStatus {
   PENDING = 1,
   APPROVED,
   DECLINED,
-  AVAILABLE,
 }
 
 export enum MediaType {

server/routes/request.ts

@@ -1,7 +1,7 @@
 import { Router } from 'express';
 import { isAuthenticated } from '../middleware/auth';
 import { Permission } from '../lib/permissions';
-import { getRepository, FindOperator, FindOneOptions, In } from 'typeorm';
+import { getRepository } from 'typeorm';
 import { MediaRequest } from '../entity/MediaRequest';
 import TheMovieDb from '../api/themoviedb';
 import Media from '../entity/Media';
@@ -19,61 +19,98 @@ requestRoutes.get('/', async (req, res, next) => {
     const pageSize = req.query.take ? Number(req.query.take) : 20;
     const skip = req.query.skip ? Number(req.query.skip) : 0;
 
-    let statusFilter:
+    let statusFilter: MediaRequestStatus[];
-      | MediaRequestStatus
-      | FindOperator<string | MediaRequestStatus>
-      | undefined = undefined;
 
     switch (req.query.filter) {
-      case 'available':
-        statusFilter = MediaRequestStatus.AVAILABLE;
-        break;
       case 'approved':
-        statusFilter = MediaRequestStatus.APPROVED;
+      case 'processing':
+      case 'available':
+        statusFilter = [MediaRequestStatus.APPROVED];
         break;
       case 'pending':
-        statusFilter = MediaRequestStatus.PENDING;
+        statusFilter = [MediaRequestStatus.PENDING];
         break;
       case 'unavailable':
-        statusFilter = In([
+        statusFilter = [
+          MediaRequestStatus.PENDING,
+          MediaRequestStatus.APPROVED,
+        ];
+        break;
+      default:
+        statusFilter = [
           MediaRequestStatus.PENDING,
           MediaRequestStatus.APPROVED,
-        ]);
+          MediaRequestStatus.DECLINED,
+        ];
+    }
+
+    let mediaStatusFilter: MediaStatus[];
+
+    switch (req.query.filter) {
+      case 'available':
+        mediaStatusFilter = [MediaStatus.AVAILABLE];
+        break;
+      case 'processing':
+      case 'unavailable':
+        mediaStatusFilter = [
+          MediaStatus.UNKNOWN,
+          MediaStatus.PENDING,
+          MediaStatus.PROCESSING,
+          MediaStatus.PARTIALLY_AVAILABLE,
+        ];
         break;
       default:
-        statusFilter = In(Object.values(MediaRequestStatus));
+        mediaStatusFilter = [
+          MediaStatus.UNKNOWN,
+          MediaStatus.PENDING,
+          MediaStatus.PROCESSING,
+          MediaStatus.PARTIALLY_AVAILABLE,
+          MediaStatus.AVAILABLE,
+        ];
     }
 
-    let sortFilter: FindOneOptions<MediaRequest>['order'] = {
+    let sortFilter: string;
-      id: 'DESC',
-    };
 
     switch (req.query.sort) {
       case 'modified':
-        sortFilter = {
+        sortFilter = 'request.updatedAt';
-          updatedAt: 'DESC',
-        };
         break;
+      default:
+        sortFilter = 'request.id';
     }
 
-    const [requests, requestCount] = req.user?.hasPermission(
+    let query = requestRepository
-      [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
+      .createQueryBuilder('request')
-      { type: 'or' }
+      .leftJoinAndSelect('request.media', 'media')
-    )
+      .leftJoinAndSelect('request.seasons', 'seasons')
-      ? await requestRepository.findAndCount({
+      .leftJoinAndSelect('request.modifiedBy', 'modifiedBy')
-          order: sortFilter,
+      .leftJoinAndSelect('request.requestedBy', 'requestedBy')
-          relations: ['media', 'modifiedBy'],
+      .where('request.status IN (:...requestStatus)', {
-          where: { status: statusFilter },
+        requestStatus: statusFilter,
-          take: Number(req.query.take) ?? 20,
+      })
-          skip,
+      .andWhere(
-        })
+        '(request.is4k = false AND media.status IN (:...mediaStatus)) OR (request.is4k = true AND media.status4k IN (:...mediaStatus))',
-      : await requestRepository.findAndCount({
+        {
-          where: { requestedBy: { id: req.user?.id }, status: statusFilter },
+          mediaStatus: mediaStatusFilter,
-          relations: ['media', 'modifiedBy'],
+        }
-          order: sortFilter,
+      );
-          take: Number(req.query.limit) ?? 20,
+
-          skip,
+    if (
-        });
+      !req.user?.hasPermission(
+        [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
+        { type: 'or' }
+      )
+    ) {
+      query = query.andWhere('request.requestedBy.id = :id', {
+        id: req.user?.id,
+      });
+    }
+
+    const [requests, requestCount] = await query
+      .orderBy(sortFilter, 'DESC')
+      .take(pageSize)
+      .skip(skip)
+      .getManyAndCount();
 
     return res.status(200).json({
       pageInfo: {
@@ -279,16 +316,51 @@ requestRoutes.get('/count', async (_req, res, next) => {
   const requestRepository = getRepository(MediaRequest);
 
   try {
-    const pendingCount = await requestRepository.count({
+    const query = requestRepository
-      status: MediaRequestStatus.PENDING,
+      .createQueryBuilder('request')
-    });
+      .leftJoinAndSelect('request.media', 'media');
-    const approvedCount = await requestRepository.count({
+
-      status: MediaRequestStatus.APPROVED,
+    const pendingCount = await query
-    });
+      .where('request.status = :requestStatus', {
+        requestStatus: MediaRequestStatus.PENDING,
+      })
+      .getCount();
+
+    const approvedCount = await query
+      .where('request.status = :requestStatus', {
+        requestStatus: MediaRequestStatus.APPROVED,
+      })
+      .getCount();
+
+    const processingCount = await query
+      .where('request.status = :requestStatus', {
+        requestStatus: MediaRequestStatus.APPROVED,
+      })
+      .andWhere(
+        '(request.is4k = false AND media.status != :availableStatus) OR (request.is4k = true AND media.status4k != :availableStatus)',
+        {
+          availableStatus: MediaStatus.AVAILABLE,
+        }
+      )
+      .getCount();
+
+    const availableCount = await query
+      .where('request.status = :requestStatus', {
+        requestStatus: MediaRequestStatus.APPROVED,
+      })
+      .andWhere(
+        '(request.is4k = false AND media.status = :availableStatus) OR (request.is4k = true AND media.status4k = :availableStatus)',
+        {
+          availableStatus: MediaStatus.AVAILABLE,
+        }
+      )
+      .getCount();
 
     return res.status(200).json({
       pending: pendingCount,
       approved: approvedCount,
+      processing: processingCount,
+      available: availableCount,
     });
   } catch (e) {
     next({ status: 500, message: e.message });

src/components/RequestList/index.tsx

@@ -22,13 +22,15 @@ const messages = defineMessages({
   filterAll: 'All',
   filterPending: 'Pending',
   filterApproved: 'Approved',
+  filterAvailable: 'Available',
+  filterProcessing: 'Processing',
   noresults: 'No results.',
   showallrequests: 'Show All Requests',
   sortAdded: 'Request Date',
   sortModified: 'Last Modified',
 });
 
-type Filter = 'all' | 'approved' | 'pending';
+type Filter = 'all' | 'pending' | 'approved' | 'processing' | 'available';
 type Sort = 'added' | 'modified';
 
 const RequestList: React.FC = () => {
@@ -93,6 +95,12 @@ const RequestList: React.FC = () => {
               <option value="approved">
                 {intl.formatMessage(messages.filterApproved)}
               </option>
+              <option value="processing">
+                {intl.formatMessage(messages.filterProcessing)}
+              </option>
+              <option value="available">
+                {intl.formatMessage(messages.filterAvailable)}
+              </option>
             </select>
           </div>
           <div className="flex flex-grow mb-2 sm:mb-0 lg:flex-grow-0">

src/components/RequestModal/TvRequestModal.tsx

@@ -523,13 +523,6 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                 {intl.formatMessage(globalMessages.requested)}
                               </Badge>
                             )}
-                            {!mediaSeason &&
-                              seasonRequest?.status ===
-                                MediaRequestStatus.AVAILABLE && (
-                                <Badge badgeType="success">
-                                  {intl.formatMessage(globalMessages.available)}
-                                </Badge>
-                              )}
                             {mediaSeason?.[is4k ? 'status4k' : 'status'] ===
                               MediaStatus.PARTIALLY_AVAILABLE && (
                               <Badge badgeType="success">

src/i18n/locale/en.json

@@ -152,7 +152,9 @@
   "components.RequestList.RequestItem.seasons": "Seasons",
   "components.RequestList.filterAll": "All",
   "components.RequestList.filterApproved": "Approved",
+  "components.RequestList.filterAvailable": "Available",
   "components.RequestList.filterPending": "Pending",
+  "components.RequestList.filterProcessing": "Processing",
   "components.RequestList.mediaInfo": "Media Info",
   "components.RequestList.modifiedBy": "Last Modified By",
   "components.RequestList.next": "Next",