Added Expand All / Collapse All button for series seasons

frontend/src/pages/Episodes/index.tsx

@@ -18,6 +18,8 @@ import { useLanguageProfileBy } from "@/utilities/languages";
 import {
   faAdjust,
   faBriefcase,
+  faCircleChevronDown,
+  faCircleChevronRight,
   faCloudUploadAlt,
   faHdd,
   faSearch,
@@ -28,11 +30,23 @@ import { Container, Group, Stack } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { useDocumentTitle } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
-import { FunctionComponent, useCallback, useMemo, useRef } from "react";
+import {
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Navigate, useParams } from "react-router-dom";
 import Table from "./table";
 
 const SeriesEpisodesView: FunctionComponent = () => {
+  const [state, setState] = useState({
+    expand: false,
+    buttonText: "Expand All",
+    initial: true,
+  });
+
   const params = useParams();
   const id = Number.parseInt(params.id as string);
 
@@ -94,6 +108,12 @@ const SeriesEpisodesView: FunctionComponent = () => {
     return <Navigate to={RouterNames.NotFound}></Navigate>;
   }
 
+  const toggleState = () => {
+    state.expand
+      ? setState({ expand: false, buttonText: "Expand All", initial: false })
+      : setState({ expand: true, buttonText: "Collapse All", initial: false });
+  };
+
   return (
     <Container px={0} fluid>
       <QueryOverlay result={seriesQuery}>
@@ -189,12 +209,22 @@ const SeriesEpisodesView: FunctionComponent = () => {
             >
               Edit Series
             </Toolbox.Button>
+            <Toolbox.Button
+              icon={state.expand ? faCircleChevronRight : faCircleChevronDown}
+              onClick={() => {
+                toggleState();
+              }}
+            >
+              {state.buttonText}
+            </Toolbox.Button>
           </Group>
         </Toolbox>
         <Stack>
           <ItemOverview item={series ?? null} details={details}></ItemOverview>
           <QueryOverlay result={episodesQuery}>
             <Table
+              expand={state.expand}
+              initial={state.initial}
               episodes={episodes ?? null}
               profile={profile}
               disabled={hasTask || !series || series.profileId === null}

frontend/src/pages/Episodes/table.tsx

@@ -31,9 +31,17 @@ interface Props {
   episodes: Item.Episode[] | null;
   disabled?: boolean;
   profile?: Language.Profile;
+  expand?: boolean;
+  initial?: boolean;
 }
 
-const Table: FunctionComponent<Props> = ({ episodes, profile, disabled }) => {
+const Table: FunctionComponent<Props> = ({
+  episodes,
+  profile,
+  disabled,
+  expand,
+  initial,
+}) => {
   const onlyDesired = useShowOnlyDesired();
 
   const profileItems = useProfileItemsToLanguages(profile);
@@ -212,9 +220,18 @@ const Table: FunctionComponent<Props> = ({ episodes, profile, disabled }) => {
 
   useEffect(() => {
     if (instance.current) {
-      instance.current.toggleRowExpanded([`season:${maxSeason}`], true);
+      if (initial) {
+        // expand the last/current season on initial display
+        instance.current.toggleRowExpanded([`season:${maxSeason}`], true);
+        // make sure season 0 is collapsed
+        instance.current.toggleRowExpanded([`season:0`], false);
+      } else {
+        if (expand !== undefined) {
+          instance.current.toggleAllRowsExpanded(expand);
+        }
+      }
     }
-  }, [maxSeason]);
+  }, [maxSeason, expand, initial]);
 
   return (
     <GroupTable