StudioSelect parent studio (#395)

stashapp · May 21, 2022 · e0798fd · e0798fd
1 parent 065f509
commit e0798fd
Show file tree

Hide file tree

Showing 20 changed files with 242 additions and 15 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -17,6 +17,7 @@
 @import "./components/performerSelect/styles";
 @import "./components/sceneCard/styles";
 @import "./components/searchField/styles";
+@import "./components/studioSelect/styles";
 @import "./components/tagSelect/styles";
 @import "./components/editImages/styles";
 @import "./components/urlInput/styles";

diff --git a/frontend/src/components/studioSelect/StudioSelect.tsx b/frontend/src/components/studioSelect/StudioSelect.tsx
@@ -15,7 +15,14 @@ import { Studios, StudiosVariables } from "src/graphql/definitions/Studios";
 import { SortDirectionEnum, StudioSortEnum } from "src/graphql";
 import { isUUID } from "src/utils";
 
-type StudioSlim = Pick<Studio_findStudio, "id" | "name">;
+type StudioSlim = Pick<Studio_findStudio, "id" | "name"> &
+  Partial<Pick<Studio_findStudio, "parent">>;
+
+interface IOptionType {
+  value: string;
+  label: string;
+  sublabel: string | undefined;
+}
 
 interface StudioSelectProps {
   initialStudio?: StudioSlim | null;
@@ -39,7 +46,7 @@ const StudioSelect: FC<StudioSelectProps> = ({
 }) => {
   const client = useApolloClient();
 
-  const fetchStudios = async (term: string) => {
+  const fetchStudios = async (term: string): Promise<IOptionType[]> => {
     const value = term.trim();
     if (isUUID(value)) {
       if (value === excludeStudio) {
@@ -56,7 +63,13 @@ const StudioSelect: FC<StudioSelectProps> = ({
         return [];
       }
 
-      return [{ value: studio.id, label: studio.name }];
+      return [
+        {
+          value: studio.id,
+          label: studio.name,
+          sublabel: studio.parent?.name,
+        },
+      ];
     }
 
     const { data } = await client.query<Studios, StudiosVariables>({
@@ -77,6 +90,7 @@ const StudioSelect: FC<StudioSelectProps> = ({
       .map((s) => ({
         value: s.id,
         label: s.name,
+        sublabel: s.parent?.name,
       }))
       .filter((s) => s.value !== excludeStudio);
   };
@@ -87,9 +101,19 @@ const StudioSelect: FC<StudioSelectProps> = ({
     ? {
         value: initialStudio.id,
         label: initialStudio.name,
+        sublabel: initialStudio.parent?.name,
       }
     : undefined;
 
+  const formatStudioName = (opt: IOptionType) => (
+    <>
+      <span>{opt.label}</span>
+      {opt.sublabel && (
+        <small className="bullet-separator parent-studio">{opt.sublabel}</small>
+      )}
+    </>
+  );
+
   return (
     <div className={CLASSNAME}>
       <Async
@@ -104,6 +128,7 @@ const StudioSelect: FC<StudioSelectProps> = ({
           inputValue === "" ? null : `No studios found for "${inputValue}"`
         }
         isClearable={isClearable}
+        formatOptionLabel={formatStudioName}
       />
     </div>
   );

diff --git a/frontend/src/components/studioSelect/styles.scss b/frontend/src/components/studioSelect/styles.scss
@@ -1,17 +1,11 @@
 .StudioSelect {
-  margin-top: 0.5rem;
-
-  &-list {
-    margin-bottom: 1rem;
-  }
-
-  &-container {
-    display: flex;
+  .parent-studio {
+    color: $text-muted;
   }
 
-  &-select {
-    display: inline-block;
-    margin-left: auto;
-    width: 25rem;
+  .react-select__value-container {
+    .parent-studio {
+      color: rgba($black, 0.5);
+    }
   }
 }
diff --git a/frontend/src/graphql/definitions/ApplyEdit.ts b/frontend/src/graphql/definitions/ApplyEdit.ts
@@ -189,10 +189,17 @@ export interface ApplyEdit_applyEdit_target_Scene_images {
   height: number;
 }
 
+export interface ApplyEdit_applyEdit_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface ApplyEdit_applyEdit_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: ApplyEdit_applyEdit_target_Scene_studio_parent | null;
 }
 
 export interface ApplyEdit_applyEdit_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface ApplyEdit_applyEdit_merge_sources_Scene_images {
   height: number;
 }
 
+export interface ApplyEdit_applyEdit_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface ApplyEdit_applyEdit_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: ApplyEdit_applyEdit_merge_sources_Scene_studio_parent | null;
 }
 
 export interface ApplyEdit_applyEdit_merge_sources_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/Edit.ts b/frontend/src/graphql/definitions/Edit.ts
@@ -189,10 +189,17 @@ export interface Edit_findEdit_target_Scene_images {
   height: number;
 }
 
+export interface Edit_findEdit_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface Edit_findEdit_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: Edit_findEdit_target_Scene_studio_parent | null;
 }
 
 export interface Edit_findEdit_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface Edit_findEdit_merge_sources_Scene_images {
   height: number;
 }
 
+export interface Edit_findEdit_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface Edit_findEdit_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: Edit_findEdit_merge_sources_Scene_studio_parent | null;
 }
 
 export interface Edit_findEdit_merge_sources_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/EditFragment.ts b/frontend/src/graphql/definitions/EditFragment.ts
@@ -189,10 +189,17 @@ export interface EditFragment_target_Scene_images {
   height: number;
 }
 
+export interface EditFragment_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface EditFragment_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: EditFragment_target_Scene_studio_parent | null;
 }
 
 export interface EditFragment_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface EditFragment_merge_sources_Scene_images {
   height: number;
 }
 
+export interface EditFragment_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface EditFragment_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: EditFragment_merge_sources_Scene_studio_parent | null;
 }
 
 export interface EditFragment_merge_sources_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/EditUpdate.ts b/frontend/src/graphql/definitions/EditUpdate.ts
@@ -162,10 +162,17 @@ export interface EditUpdate_findEdit_target_Scene_images {
   height: number;
 }
 
+export interface EditUpdate_findEdit_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface EditUpdate_findEdit_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: EditUpdate_findEdit_target_Scene_studio_parent | null;
 }
 
 export interface EditUpdate_findEdit_target_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/Edits.ts b/frontend/src/graphql/definitions/Edits.ts
@@ -189,10 +189,17 @@ export interface Edits_queryEdits_edits_target_Scene_images {
   height: number;
 }
 
+export interface Edits_queryEdits_edits_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface Edits_queryEdits_edits_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: Edits_queryEdits_edits_target_Scene_studio_parent | null;
 }
 
 export interface Edits_queryEdits_edits_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface Edits_queryEdits_edits_merge_sources_Scene_images {
   height: number;
 }
 
+export interface Edits_queryEdits_edits_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface Edits_queryEdits_edits_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: Edits_queryEdits_edits_merge_sources_Scene_studio_parent | null;
 }
 
 export interface Edits_queryEdits_edits_merge_sources_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/PerformerEdit.ts b/frontend/src/graphql/definitions/PerformerEdit.ts
@@ -189,10 +189,17 @@ export interface PerformerEdit_performerEdit_target_Scene_images {
   height: number;
 }
 
+export interface PerformerEdit_performerEdit_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface PerformerEdit_performerEdit_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: PerformerEdit_performerEdit_target_Scene_studio_parent | null;
 }
 
 export interface PerformerEdit_performerEdit_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface PerformerEdit_performerEdit_merge_sources_Scene_images {
   height: number;
 }
 
+export interface PerformerEdit_performerEdit_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface PerformerEdit_performerEdit_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: PerformerEdit_performerEdit_merge_sources_Scene_studio_parent | null;
 }
 
 export interface PerformerEdit_performerEdit_merge_sources_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/PerformerEditUpdate.ts b/frontend/src/graphql/definitions/PerformerEditUpdate.ts
@@ -189,10 +189,17 @@ export interface PerformerEditUpdate_performerEditUpdate_target_Scene_images {
   height: number;
 }
 
+export interface PerformerEditUpdate_performerEditUpdate_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface PerformerEditUpdate_performerEditUpdate_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: PerformerEditUpdate_performerEditUpdate_target_Scene_studio_parent | null;
 }
 
 export interface PerformerEditUpdate_performerEditUpdate_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface PerformerEditUpdate_performerEditUpdate_merge_sources_Scene_ima
   height: number;
 }
 
+export interface PerformerEditUpdate_performerEditUpdate_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface PerformerEditUpdate_performerEditUpdate_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: PerformerEditUpdate_performerEditUpdate_merge_sources_Scene_studio_parent | null;
 }
 
 export interface PerformerEditUpdate_performerEditUpdate_merge_sources_Scene_performers_performer {

diff --git a/frontend/src/graphql/definitions/Scene.ts b/frontend/src/graphql/definitions/Scene.ts
@@ -30,10 +30,17 @@ export interface Scene_findScene_images {
   height: number;
 }
 
+export interface Scene_findScene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface Scene_findScene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: Scene_findScene_studio_parent | null;
 }
 
 export interface Scene_findScene_performers_performer {

diff --git a/frontend/src/graphql/definitions/SceneEdit.ts b/frontend/src/graphql/definitions/SceneEdit.ts
@@ -189,10 +189,17 @@ export interface SceneEdit_sceneEdit_target_Scene_images {
   height: number;
 }
 
+export interface SceneEdit_sceneEdit_target_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface SceneEdit_sceneEdit_target_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: SceneEdit_sceneEdit_target_Scene_studio_parent | null;
 }
 
 export interface SceneEdit_sceneEdit_target_Scene_performers_performer {
@@ -1317,10 +1324,17 @@ export interface SceneEdit_sceneEdit_merge_sources_Scene_images {
   height: number;
 }
 
+export interface SceneEdit_sceneEdit_merge_sources_Scene_studio_parent {
+  __typename: "Studio";
+  id: string;
+  name: string;
+}
+
 export interface SceneEdit_sceneEdit_merge_sources_Scene_studio {
   __typename: "Studio";
   id: string;
   name: string;
+  parent: SceneEdit_sceneEdit_merge_sources_Scene_studio_parent | null;
 }
 
 export interface SceneEdit_sceneEdit_merge_sources_Scene_performers_performer {