feat(ui): Add 'Page Size' setting for request/user list pages (#957)

2025-09-30 15:40:40 +02:00 · 2021-02-18 20:37:08 -05:00
parent 77b2d9ea22
commit 621db89328
11 changed files with 233 additions and 82 deletions
--- a/overseerr-api.yml
+++ b/overseerr-api.yml
@@ -1070,9 +1070,6 @@ components:
        pages:
          type: number
          example: 10
-        pageSize:
-          type: number
-          example: 10
        results:
          type: number
          example: 100
@@ -2747,10 +2744,22 @@ paths:
  /user:
    get:
      summary: Get all users
-      description: Returns all users in a JSON array.
+      description: Returns all users in a JSON object.
      tags:
        - users
      parameters:
+        - in: query
+          name: take
+          schema:
+            type: number
+            nullable: true
+            example: 20
+        - in: query
+          name: skip
+          schema:
+            type: number
+            nullable: true
+            example: 0
        - in: query
          name: sort
          schema:
@@ -2763,9 +2772,14 @@ paths:
          content:
            application/json:
              schema:
-                type: array
-                items:
-                  $ref: '#/components/schemas/User'
+                type: object
+                properties:
+                  pageInfo:
+                    $ref: '#/components/schemas/PageInfo'
+                  results:
+                    type: array
+                    items:
+                    $ref: '#/components/schemas/User'
    post:
      summary: Create new user
      description: |
--- a/server/interfaces/api/userInterfaces.ts
+++ b/server/interfaces/api/userInterfaces.ts
@@ -1,6 +1,11 @@
+import type { User } from '../../entity/User';
 import { MediaRequest } from '../../entity/MediaRequest';
 import { PaginatedResponse } from './common';

+export interface UserResultsResponse extends PaginatedResponse {
+  results: User[];
+}
+
 export interface UserRequestsResponse extends PaginatedResponse {
  results: MediaRequest[];
 }
--- a/server/routes/request.ts
+++ b/server/routes/request.ts
@@ -14,9 +14,8 @@ import { User } from '../entity/User';
 const requestRoutes = Router();

 requestRoutes.get('/', async (req, res, next) => {
-  const requestRepository = getRepository(MediaRequest);
  try {
-    const pageSize = req.query.take ? Number(req.query.take) : 20;
+    const pageSize = req.query.take ? Number(req.query.take) : 10;
    const skip = req.query.skip ? Number(req.query.skip) : 0;

    let statusFilter: MediaRequestStatus[];
@@ -79,7 +78,7 @@ requestRoutes.get('/', async (req, res, next) => {
        sortFilter = 'request.id';
    }

-    let query = requestRepository
+    let query = getRepository(MediaRequest)
      .createQueryBuilder('request')
      .leftJoinAndSelect('request.media', 'media')
      .leftJoinAndSelect('request.seasons', 'seasons')
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -9,46 +9,63 @@ import logger from '../../logger';
 import gravatarUrl from 'gravatar-url';
 import { UserType } from '../../constants/user';
 import { isAuthenticated } from '../../middleware/auth';
+import { UserResultsResponse } from '../../interfaces/api/userInterfaces';
 import { UserRequestsResponse } from '../../interfaces/api/userInterfaces';
 import userSettingsRoutes from './usersettings';

 const router = Router();

-router.get('/', async (req, res) => {
-  let query = getRepository(User).createQueryBuilder('user');
+router.get('/', async (req, res, next) => {
+  try {
+    const pageSize = req.query.take ? Number(req.query.take) : 10;
+    const skip = req.query.skip ? Number(req.query.skip) : 0;
+    let query = getRepository(User).createQueryBuilder('user');

-  switch (req.query.sort) {
-    case 'updated':
-      query = query.orderBy('user.updatedAt', 'DESC');
-      break;
-    case 'displayname':
-      query = query.orderBy(
-        '(CASE WHEN user.username IS NULL THEN user.plexUsername ELSE user.username END)',
-        'ASC'
-      );
-      break;
-    case 'requests':
-      query = query
-        .addSelect((subQuery) => {
-          return subQuery
-            .select('COUNT(request.id)', 'requestCount')
-            .from(MediaRequest, 'request')
-            .where('request.requestedBy.id = user.id');
-        }, 'requestCount')
-        .orderBy('requestCount', 'DESC');
-      break;
-    default:
-      query = query.orderBy('user.id', 'ASC');
-      break;
+    switch (req.query.sort) {
+      case 'updated':
+        query = query.orderBy('user.updatedAt', 'DESC');
+        break;
+      case 'displayname':
+        query = query.orderBy(
+          '(CASE WHEN user.username IS NULL THEN user.plexUsername ELSE user.username END)',
+          'ASC'
+        );
+        break;
+      case 'requests':
+        query = query
+          .addSelect((subQuery) => {
+            return subQuery
+              .select('COUNT(request.id)', 'requestCount')
+              .from(MediaRequest, 'request')
+              .where('request.requestedBy.id = user.id');
+          }, 'requestCount')
+          .orderBy('requestCount', 'DESC');
+        break;
+      default:
+        query = query.orderBy('user.id', 'ASC');
+        break;
+    }
+
+    const [users, userCount] = await query
+      .take(pageSize)
+      .skip(skip)
+      .getManyAndCount();
+
+    return res.status(200).json({
+      pageInfo: {
+        pages: Math.ceil(userCount / pageSize),
+        pageSize,
+        results: userCount,
+        page: Math.ceil(skip / pageSize) + 1,
+      },
+      results: User.filterMany(
+        users,
+        req.user?.hasPermission(Permission.MANAGE_USERS)
+      ),
+    } as UserResultsResponse);
+  } catch (e) {
+    next({ status: 500, message: e.message });
  }
-
-  const users = await query.getMany();
-
-  return res
-    .status(200)
-    .json(
-      User.filterMany(users, req.user?.hasPermission(Permission.MANAGE_USERS))
-    );
 });

 router.post(
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -17,6 +17,7 @@ const messages = defineMessages({
  modifiedBy: 'Last Modified By',
  showingresults:
    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
+  resultsperpage: 'Display {pageSize} results per page',
  next: 'Next',
  previous: 'Previous',
  filterAll: 'All',
@@ -38,10 +39,11 @@ const RequestList: React.FC = () => {
  const [pageIndex, setPageIndex] = useState(0);
  const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
  const [currentSort, setCurrentSort] = useState<Sort>('added');
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);

  const { data, error, revalidate } = useSWR<RequestResultsResponse>(
-    `/api/v1/request?take=10&skip=${
-      pageIndex * 10
+    `/api/v1/request?take=${currentPageSize}&skip=${
+      pageIndex * currentPageSize
    }&filter=${currentFilter}&sort=${currentSort}`
  );
  if (!data && !error) {
@@ -160,9 +162,9 @@ const RequestList: React.FC = () => {
          })}

          {data.results.length === 0 && (
-            <tr className="relative w-full h-24 p-2 text-white">
+            <tr className="relative h-24 p-2 text-white">
              <Table.TD colSpan={6} noPadding>
-                <div className="flex flex-col items-center justify-center p-6">
+                <div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
                  <span className="text-base">
                    {intl.formatMessage(messages.noresults)}
                  </span>
@@ -184,33 +186,56 @@ const RequestList: React.FC = () => {
          <tr className="bg-gray-700">
            <Table.TD colSpan={6} noPadding>
              <nav
-                className="flex items-center justify-between px-6 py-3"
+                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
                aria-label="Pagination"
              >
-                <div className="hidden sm:block">
+                <div className="hidden lg:flex lg:flex-1">
                  <p className="text-sm">
-                    {intl.formatMessage(messages.showingresults, {
-                      from: pageIndex * 10,
-                      to:
-                        data.results.length < 10
-                          ? pageIndex * 10 + data.results.length
-                          : (pageIndex + 1) * 10,
-                      total: data.pageInfo.results,
-                      strong: function strong(msg) {
-                        return <span className="font-medium">{msg}</span>;
-                      },
-                    })}
+                    {data.results.length > 0 &&
+                      intl.formatMessage(messages.showingresults, {
+                        from: pageIndex * currentPageSize + 1,
+                        to:
+                          data.results.length < currentPageSize
+                            ? pageIndex * currentPageSize + data.results.length
+                            : (pageIndex + 1) * currentPageSize,
+                        total: data.pageInfo.results,
+                        strong: function strong(msg) {
+                          return <span className="font-medium">{msg}</span>;
+                        },
+                      })}
                  </p>
                </div>
-                <div className="flex justify-start flex-1 sm:justify-end">
-                  <span className="mr-2">
-                    <Button
-                      disabled={!hasPrevPage}
-                      onClick={() => setPageIndex((current) => current - 1)}
-                    >
-                      {intl.formatMessage(messages.previous)}
-                    </Button>
+                <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
+                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+                    {intl.formatMessage(messages.resultsperpage, {
+                      pageSize: (
+                        <select
+                          id="pageSize"
+                          name="pageSize"
+                          onChange={(e) => {
+                            setPageIndex(0);
+                            setCurrentPageSize(Number(e.target.value));
+                          }}
+                          value={currentPageSize}
+                          className="inline short"
+                        >
+                          <option value="5">5</option>
+                          <option value="10">10</option>
+                          <option value="25">25</option>
+                          <option value="50">50</option>
+                          <option value="100">100</option>
+                        </select>
+                      ),
+                    })}
                  </span>
+                </div>
+                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+                  <Button
+                    disabled={!hasPrevPage}
+                    onClick={() => setPageIndex((current) => current - 1)}
+                  >
+                    {intl.formatMessage(messages.previous)}
+                  </Button>
                  <Button
                    disabled={!hasNextPage}
                    onClick={() => setPageIndex((current) => current + 1)}
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -402,7 +402,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                      name="port"
                      type="text"
                      placeholder="7878"
-                      className="port"
+                      className="short"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                        setIsValidated(false);
                        setFieldValue('port', e.target.value);
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -486,7 +486,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                      id="port"
                      name="port"
                      placeholder="32400"
-                      className="port"
+                      className="short"
                    />
                  </div>
                  {errors.port && touched.port && (
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/src/components/Settings/SonarrModal/index.tsx
@@ -431,7 +431,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                      name="port"
                      type="text"
                      placeholder="8989"
-                      className="port"
+                      className="short"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                        setIsValidated(false);
                        setFieldValue('port', e.target.value);
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -21,6 +21,7 @@ import Alert from '../Common/Alert';
 import BulkEditModal from './BulkEditModal';
 import PageTitle from '../Common/PageTitle';
 import Link from 'next/link';
+import type { UserResultsResponse } from '../../../server/interfaces/api/userInterfaces';

 const messages = defineMessages({
  users: 'Users',
@@ -65,6 +66,11 @@ const messages = defineMessages({
  sortUpdated: 'Last Updated',
  sortDisplayName: 'Display Name',
  sortRequests: 'Request Count',
+  next: 'Next',
+  previous: 'Previous',
+  showingresults:
+    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
+  resultsperpage: 'Display {pageSize} results per page',
 });

 type Sort = 'created' | 'updated' | 'requests' | 'displayname';
@@ -73,10 +79,16 @@ const UserList: React.FC = () => {
  const intl = useIntl();
  const router = useRouter();
  const { addToast } = useToasts();
+  const [pageIndex, setPageIndex] = useState(0);
  const [currentSort, setCurrentSort] = useState<Sort>('created');
-  const { data, error, revalidate } = useSWR<User[]>(
-    `/api/v1/user?sort=${currentSort}`
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+
+  const { data, error, revalidate } = useSWR<UserResultsResponse>(
+    `/api/v1/user?take=${currentPageSize}&skip=${
+      pageIndex * currentPageSize
+    }&sort=${currentSort}`
  );
+
  const [isDeleting, setDeleting] = useState(false);
  const [isImporting, setImporting] = useState(false);
  const [deleteModal, setDeleteModal] = useState<{
@@ -99,7 +111,7 @@ const UserList: React.FC = () => {
  const isAllUsersSelected = () => {
    return (
      selectedUsers.length ===
-      data?.filter((user) => user.id !== currentUser?.id).length
+      data?.results.filter((user) => user.id !== currentUser?.id).length
    );
  };
  const isUserSelected = (userId: number) => selectedUsers.includes(userId);
@@ -107,10 +119,12 @@ const UserList: React.FC = () => {
    if (
      data &&
      selectedUsers.length >= 0 &&
-      selectedUsers.length < data?.length - 1
+      selectedUsers.length < data?.results.length - 1
    ) {
      setSelectedUsers(
-        data.filter((user) => isUserPermsEditable(user.id)).map((u) => u.id)
+        data.results
+          .filter((user) => isUserPermsEditable(user.id))
+          .map((u) => u.id)
      );
    } else {
      setSelectedUsers([]);
@@ -191,6 +205,13 @@ const UserList: React.FC = () => {
    ),
  });

+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
+  const hasNextPage = data.pageInfo.pages > pageIndex + 1;
+  const hasPrevPage = pageIndex > 0;
+
  return (
    <>
      <PageTitle title={intl.formatMessage(messages.users)} />
@@ -372,7 +393,7 @@ const UserList: React.FC = () => {
            revalidate();
          }}
          selectedUserIds={selectedUsers}
-          users={data}
+          users={data.results}
        />
      </Transition>

@@ -411,6 +432,7 @@ const UserList: React.FC = () => {
              id="sort"
              name="sort"
              onChange={(e) => {
+                setPageIndex(0);
                setCurrentSort(e.target.value as Sort);
              }}
              value={currentSort}
@@ -436,7 +458,7 @@ const UserList: React.FC = () => {
        <thead>
          <tr>
            <Table.TH>
-              {(data ?? []).length > 1 && (
+              {(data.results ?? []).length > 1 && (
                <input
                  type="checkbox"
                  id="selectAll"
@@ -455,7 +477,7 @@ const UserList: React.FC = () => {
            <Table.TH>{intl.formatMessage(messages.created)}</Table.TH>
            <Table.TH>{intl.formatMessage(messages.lastupdated)}</Table.TH>
            <Table.TH className="text-right">
-              {(data ?? []).length > 1 && (
+              {(data.results ?? []).length > 1 && (
                <Button
                  buttonType="warning"
                  onClick={() => setShowBulkEditModal(true)}
@@ -468,7 +490,7 @@ const UserList: React.FC = () => {
          </tr>
        </thead>
        <Table.TBody>
-          {data?.map((user) => (
+          {data?.results.map((user) => (
            <tr key={`user-list-${user.id}`}>
              <Table.TD>
                {isUserPermsEditable(user.id) && (
@@ -554,6 +576,69 @@ const UserList: React.FC = () => {
              </Table.TD>
            </tr>
          ))}
+          <tr className="bg-gray-700">
+            <Table.TD colSpan={8} noPadding>
+              <nav
+                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
+                aria-label="Pagination"
+              >
+                <div className="hidden lg:flex lg:flex-1">
+                  <p className="text-sm">
+                    {data.results.length > 0 &&
+                      intl.formatMessage(messages.showingresults, {
+                        from: pageIndex * currentPageSize + 1,
+                        to:
+                          data.results.length < currentPageSize
+                            ? pageIndex * currentPageSize + data.results.length
+                            : (pageIndex + 1) * currentPageSize,
+                        total: data.pageInfo.results,
+                        strong: function strong(msg) {
+                          return <span className="font-medium">{msg}</span>;
+                        },
+                      })}
+                  </p>
+                </div>
+                <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
+                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+                    {intl.formatMessage(messages.resultsperpage, {
+                      pageSize: (
+                        <select
+                          id="pageSize"
+                          name="pageSize"
+                          onChange={(e) => {
+                            setPageIndex(0);
+                            setCurrentPageSize(Number(e.target.value));
+                          }}
+                          value={currentPageSize}
+                          className="inline short"
+                        >
+                          <option value="5">5</option>
+                          <option value="10">10</option>
+                          <option value="25">25</option>
+                          <option value="50">50</option>
+                          <option value="100">100</option>
+                        </select>
+                      ),
+                    })}
+                  </span>
+                </div>
+                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+                  <Button
+                    disabled={!hasPrevPage}
+                    onClick={() => setPageIndex((current) => current - 1)}
+                  >
+                    {intl.formatMessage(messages.previous)}
+                  </Button>
+                  <Button
+                    disabled={!hasNextPage}
+                    onClick={() => setPageIndex((current) => current + 1)}
+                  >
+                    {intl.formatMessage(messages.next)}
+                  </Button>
+                </div>
+              </nav>
+            </Table.TD>
+          </tr>
        </Table.TBody>
      </Table>
    </>
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -170,6 +170,7 @@
  "components.RequestList.previous": "Previous",
  "components.RequestList.requestedAt": "Requested At",
  "components.RequestList.requests": "Requests",
+  "components.RequestList.resultsperpage": "Display {pageSize} results per page",
  "components.RequestList.showallrequests": "Show All Requests",
  "components.RequestList.showingresults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
  "components.RequestList.sortAdded": "Request Date",
@@ -635,14 +636,18 @@
  "components.UserList.importfromplexerror": "Something went wrong while importing users from Plex.",
  "components.UserList.lastupdated": "Last Updated",
  "components.UserList.localuser": "Local User",
+  "components.UserList.next": "Next",
  "components.UserList.password": "Password",
  "components.UserList.passwordinfo": "Password Information",
  "components.UserList.passwordinfodescription": "Email notifications need to be configured and enabled in order to automatically generate passwords.",
  "components.UserList.permissions": "Permissions",
  "components.UserList.plexuser": "Plex User",
+  "components.UserList.previous": "Previous",
+  "components.UserList.resultsperpage": "Display {pageSize} results per page",
  "components.UserList.role": "Role",
  "components.UserList.save": "Save Changes",
  "components.UserList.saving": "Saving…",
+  "components.UserList.showingResults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
  "components.UserList.sortCreated": "Creation Date",
  "components.UserList.sortDisplayName": "Display Name",
  "components.UserList.sortRequests": "Request Count",
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -102,8 +102,9 @@ select.rounded-r-only {
  @apply rounded-l-none;
 }

-input.port {
-  @apply w-24;
+input.short,
+select.short {
+  @apply w-20;
 }

 .protocol {