Add selection and export for all list pages (#873)

* Include studios in movie export
* Generalise cards
* Add selection and export for movies
* Refactor gallery card
* Refactor export dialogs
* Add performer selection and export
* Add selection and export for studios
* Add selection and export of tags
* Include movie scenes and gallery images

ui/v2.5/src/components/Studios/StudioList.tsx

@@ -1,8 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
+import _ from "lodash";
+import { useHistory } from "react-router-dom";
 import { FindStudiosQueryResult } from "src/core/generated-graphql";
 import { useStudiosList } from "src/hooks";
+import { showWhenSelected } from "src/hooks/ListHook";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
+import { queryFindStudios } from "src/core/StashService";
+import { ExportDialog } from "../Shared/ExportDialog";
 import { StudioCard } from "./StudioCard";
 
 interface IStudioList {
@@ -14,15 +19,108 @@ export const StudioList: React.FC<IStudioList> = ({
   fromParent,
   filterHook,
 }) => {
+  const history = useHistory();
+  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
+  const [isExportAll, setIsExportAll] = useState(false);
+
+  const otherOperations = [
+    {
+      text: "View Random",
+      onClick: viewRandom,
+    },
+    {
+      text: "Export...",
+      onClick: onExport,
+      isDisplayed: showWhenSelected,
+    },
+    {
+      text: "Export all...",
+      onClick: onExportAll,
+    },
+  ];
+
+  const addKeybinds = (
+    result: FindStudiosQueryResult,
+    filter: ListFilterModel
+  ) => {
+    Mousetrap.bind("p r", () => {
+      viewRandom(result, filter);
+    });
+
+    return () => {
+      Mousetrap.unbind("p r");
+    };
+  };
+
+  async function viewRandom(
+    result: FindStudiosQueryResult,
+    filter: ListFilterModel
+  ) {
+    // query for a random studio
+    if (result.data && result.data.findStudios) {
+      const { count } = result.data.findStudios;
+
+      const index = Math.floor(Math.random() * count);
+      const filterCopy = _.cloneDeep(filter);
+      filterCopy.itemsPerPage = 1;
+      filterCopy.currentPage = index + 1;
+      const singleResult = await queryFindStudios(filterCopy);
+      if (
+        singleResult &&
+        singleResult.data &&
+        singleResult.data.findStudios &&
+        singleResult.data.findStudios.studios.length === 1
+      ) {
+        const { id } = singleResult!.data!.findStudios!.studios[0];
+        // navigate to the studio page
+        history.push(`/studios/${id}`);
+      }
+    }
+  }
+
+  async function onExport() {
+    setIsExportAll(false);
+    setIsExportDialogOpen(true);
+  }
+
+  async function onExportAll() {
+    setIsExportAll(true);
+    setIsExportDialogOpen(true);
+  }
+
+  function maybeRenderExportDialog(selectedIds: Set<string>) {
+    if (isExportDialogOpen) {
+      return (
+        <>
+          <ExportDialog
+            exportInput={{
+              studios: {
+                ids: Array.from(selectedIds.values()),
+                all: isExportAll,
+              },
+            }}
+            onClose={() => {
+              setIsExportDialogOpen(false);
+            }}
+          />
+        </>
+      );
+    }
+  }
+
   const listData = useStudiosList({
     renderContent,
     filterHook,
+    addKeybinds,
+    otherOperations,
+    selectable: true,
     persistState: !fromParent,
   });
 
-  function renderContent(
+  function renderStudios(
     result: FindStudiosQueryResult,
-    filter: ListFilterModel
+    filter: ListFilterModel,
+    selectedIds: Set<string>
   ) {
     if (!result.data?.findStudios) return;
 
@@ -34,6 +132,11 @@ export const StudioList: React.FC<IStudioList> = ({
               key={studio.id}
               studio={studio}
               hideParent={fromParent}
+              selecting={selectedIds.size > 0}
+              selected={selectedIds.has(studio.id)}
+              onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+                listData.onSelectChange(studio.id, selected, shiftKey)
+              }
             />
           ))}
         </div>
@@ -47,5 +150,18 @@ export const StudioList: React.FC<IStudioList> = ({
     }
   }
 
+  function renderContent(
+    result: FindStudiosQueryResult,
+    filter: ListFilterModel,
+    selectedIds: Set<string>
+  ) {
+    return (
+      <>
+        {maybeRenderExportDialog(selectedIds)}
+        {renderStudios(result, filter, selectedIds)}
+      </>
+    );
+  }
+
   return listData.template;
 };