New scene select with additional fields (stashapp#4832)

ipedrazas · May 14, 2024 · ca5febc · ca5febc
1 parent c8aeb79
commit ca5febc
Show file tree

Hide file tree

Showing 10 changed files with 383 additions and 75 deletions.
diff --git a/ui/v2.5/graphql/data/scene.graphql b/ui/v2.5/graphql/data/scene.graphql
@@ -79,3 +79,19 @@ fragment SceneData on Scene {
     label
   }
 }
+
+fragment SelectSceneData on Scene {
+  id
+  title
+  date
+  code
+  studio {
+    name
+  }
+  files {
+    path
+  }
+  paths {
+    screenshot
+  }
+}
diff --git a/ui/v2.5/graphql/queries/scene.graphql b/ui/v2.5/graphql/queries/scene.graphql
@@ -89,3 +89,16 @@ query SceneStreams($id: ID!) {
     }
   }
 }
+
+query FindScenesForSelect(
+  $filter: FindFilterType
+  $scene_filter: SceneFilterType
+  $ids: [ID!]
+) {
+  findScenes(filter: $filter, scene_filter: $scene_filter, ids: $ids) {
+    count
+    scenes {
+      ...SelectSceneData
+    }
+  }
+}
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
@@ -18,14 +18,12 @@ import {
   useListGalleryScrapers,
   mutateReloadScrapers,
 } from "src/core/StashService";
-import { SceneSelect } from "src/components/Shared/Select";
 import { Icon } from "src/components/Shared/Icon";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { useToast } from "src/hooks/Toast";
 import { useFormik } from "formik";
 import { GalleryScrapeDialog } from "./GalleryScrapeDialog";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
-import { galleryTitle } from "src/core/galleries";
 import isEqual from "lodash-es/isEqual";
 import { handleUnsavedChanges } from "src/utils/navigation";
 import {
@@ -40,6 +38,7 @@ import {
 import { formikUtils } from "src/utils/form";
 import { Tag, TagSelect } from "src/components/Tags/TagSelect";
 import { Studio, StudioSelect } from "src/components/Studios/StudioSelect";
+import { Scene, SceneSelect } from "src/components/Scenes/SceneSelect";
 
 interface IProps {
   gallery: Partial<GQL.GalleryDataFragment>;
@@ -56,12 +55,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
 }) => {
   const intl = useIntl();
   const Toast = useToast();
-  const [scenes, setScenes] = useState<{ id: string; title: string }[]>(
-    (gallery?.scenes ?? []).map((s) => ({
-      id: s.id,
-      title: galleryTitle(s),
-    }))
-  );
+  const [scenes, setScenes] = useState<Scene[]>([]);
 
   const [performers, setPerformers] = useState<Performer[]>([]);
   const [tags, setTags] = useState<Tag[]>([]);
@@ -116,12 +110,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
     onSubmit: (values) => onSave(schema.cast(values)),
   });
 
-  interface ISceneSelectValue {
-    id: string;
-    title: string;
-  }
-
-  function onSetScenes(items: ISceneSelectValue[]) {
+  function onSetScenes(items: Scene[]) {
     setScenes(items);
     formik.setFieldValue(
       "scene_ids",
@@ -162,6 +151,10 @@ export const GalleryEditPanel: React.FC<IProps> = ({
     setStudio(gallery.studio ?? null);
   }, [gallery.studio]);
 
+  useEffect(() => {
+    setScenes(gallery.scenes ?? []);
+  }, [gallery.scenes]);
+
   useEffect(() => {
     if (isVisible) {
       Mousetrap.bind("s s", () => {
@@ -412,7 +405,7 @@ export const GalleryEditPanel: React.FC<IProps> = ({
     const title = intl.formatMessage({ id: "scenes" });
     const control = (
       <SceneSelect
-        selected={scenes}
+        values={scenes}
         onSelect={(items) => onSetScenes(items)}
         isMulti
       />

diff --git a/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx b/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import * as GQL from "src/core/generated-graphql";
 import { Icon } from "../Shared/Icon";
 import { LoadingIndicator } from "../Shared/LoadingIndicator";
-import { StringListSelect, GallerySelect, SceneSelect } from "../Shared/Select";
+import { StringListSelect, GallerySelect } from "../Shared/Select";
 import * as FormUtils from "src/utils/form";
 import ImageUtils from "src/utils/image";
 import TextUtils from "src/utils/text";
@@ -35,6 +35,7 @@ import {
   ScrapedStudioRow,
   ScrapedTagsRow,
 } from "../Shared/ScrapeDialog/ScrapedObjectsRow";
+import { Scene, SceneSelect } from "src/components/Scenes/SceneSelect";
 
 interface IStashIDsField {
   values: GQL.StashId[];
@@ -645,12 +646,8 @@ export const SceneMergeModal: React.FC<ISceneMergeModalProps> = ({
   onClose,
   scenes,
 }) => {
-  const [sourceScenes, setSourceScenes] = useState<
-    { id: string; title: string }[]
-  >([]);
-  const [destScene, setDestScene] = useState<{ id: string; title: string }[]>(
-    []
-  );
+  const [sourceScenes, setSourceScenes] = useState<Scene[]>([]);
+  const [destScene, setDestScene] = useState<Scene[]>([]);
 
   const [loadedSources, setLoadedSources] = useState<
     GQL.SlimSceneDataFragment[]
@@ -773,7 +770,7 @@ export const SceneMergeModal: React.FC<ISceneMergeModalProps> = ({
               <SceneSelect
                 isMulti
                 onSelect={(items) => setSourceScenes(items)}
-                selected={sourceScenes}
+                values={sourceScenes}
               />
             </Col>
           </Form.Group>
@@ -805,7 +802,7 @@ export const SceneMergeModal: React.FC<ISceneMergeModalProps> = ({
             <Col sm={9} xl={12}>
               <SceneSelect
                 onSelect={(items) => setDestScene(items)}
-                selected={destScene}
+                values={destScene}
               />
             </Col>
           </Form.Group>