- {gallery.studio && (
-
-
- 
-
-
- )}
+
@@ -409,11 +423,7 @@ export const GalleryPage: React.FC = ({ gallery, add }) => {
{!!gallery.date && (
-
+
)}
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx
index 9e859c1c8..e0c115f34 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx
@@ -1,106 +1,113 @@
-import React from "react";
+import React, { useCallback } from "react";
import * as GQL from "src/core/generated-graphql";
import { GalleriesCriterion } from "src/models/list-filter/criteria/galleries";
import { ListFilterModel } from "src/models/list-filter/filter";
-import { ImageList } from "src/components/Images/ImageList";
+import { FilteredImageList } from "src/components/Images/ImageList";
import { showWhenSelected } from "src/components/List/ItemList";
import { mutateAddGalleryImages } from "src/core/StashService";
import { useToast } from "src/hooks/Toast";
import { useIntl } from "react-intl";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { galleryTitle } from "src/core/galleries";
+import { IItemListOperation } from "src/components/List/FilteredListToolbar";
+import { PatchComponent } from "src/patch";
interface IGalleryAddProps {
active: boolean;
gallery: GQL.GalleryDataFragment;
+ extraOperations?: IItemListOperation[];
}
-export const GalleryAddPanel: React.FC = ({
- active,
- gallery,
-}) => {
- const Toast = useToast();
- const intl = useIntl();
+export const GalleryAddPanel: React.FC = PatchComponent(
+ "GalleryAddPanel",
+ ({ active, gallery, extraOperations = [] }) => {
+ const Toast = useToast();
+ const intl = useIntl();
- function filterHook(filter: ListFilterModel) {
- const galleryValue = {
- id: gallery.id,
- label: galleryTitle(gallery),
- };
- // if galleries is already present, then we modify it, otherwise add
- let galleryCriterion = filter.criteria.find((c) => {
- return c.criterionOption.type === "galleries";
- }) as GalleriesCriterion | undefined;
+ const filterHook = useCallback(
+ (filter: ListFilterModel) => {
+ const galleryValue = {
+ id: gallery.id,
+ label: galleryTitle(gallery),
+ };
+ // if galleries is already present, then we modify it, otherwise add
+ let galleryCriterion = filter.criteria.find((c) => {
+ return c.criterionOption.type === "galleries";
+ }) as GalleriesCriterion | undefined;
- if (
- galleryCriterion &&
- galleryCriterion.modifier === GQL.CriterionModifier.Excludes
- ) {
- // add the gallery if not present
- if (
- !galleryCriterion.value.find((p) => {
- return p.id === gallery.id;
- })
- ) {
- galleryCriterion.value.push(galleryValue);
- }
-
- galleryCriterion.modifier = GQL.CriterionModifier.Excludes;
- } else {
- // overwrite
- galleryCriterion = new GalleriesCriterion();
- galleryCriterion.modifier = GQL.CriterionModifier.Excludes;
- galleryCriterion.value = [galleryValue];
- filter.criteria.push(galleryCriterion);
- }
-
- return filter;
- }
-
- async function addImages(
- result: GQL.FindImagesQueryResult,
- filter: ListFilterModel,
- selectedIds: Set
- ) {
- try {
- await mutateAddGalleryImages({
- gallery_id: gallery.id!,
- image_ids: Array.from(selectedIds.values()),
- });
- const imageCount = selectedIds.size;
- Toast.success(
- intl.formatMessage(
- { id: "toast.added_entity" },
- {
- count: imageCount,
- singularEntity: intl.formatMessage({ id: "image" }),
- pluralEntity: intl.formatMessage({ id: "images" }),
+ if (
+ galleryCriterion &&
+ galleryCriterion.modifier === GQL.CriterionModifier.Excludes
+ ) {
+ // add the gallery if not present
+ if (
+ !galleryCriterion.value.find((p) => {
+ return p.id === gallery.id;
+ })
+ ) {
+ galleryCriterion.value.push(galleryValue);
}
- )
- );
- } catch (e) {
- Toast.error(e);
+
+ galleryCriterion.modifier = GQL.CriterionModifier.Excludes;
+ } else {
+ // overwrite
+ galleryCriterion = new GalleriesCriterion();
+ galleryCriterion.modifier = GQL.CriterionModifier.Excludes;
+ galleryCriterion.value = [galleryValue];
+ filter.criteria.push(galleryCriterion);
+ }
+
+ return filter;
+ },
+ [gallery]
+ );
+
+ async function addImages(
+ result: GQL.FindImagesQueryResult,
+ filter: ListFilterModel,
+ selectedIds: Set
+ ) {
+ try {
+ await mutateAddGalleryImages({
+ gallery_id: gallery.id!,
+ image_ids: Array.from(selectedIds.values()),
+ });
+ const imageCount = selectedIds.size;
+ Toast.success(
+ intl.formatMessage(
+ { id: "toast.added_entity" },
+ {
+ count: imageCount,
+ singularEntity: intl.formatMessage({ id: "image" }),
+ pluralEntity: intl.formatMessage({ id: "images" }),
+ }
+ )
+ );
+ } catch (e) {
+ Toast.error(e);
+ }
}
+
+ const otherOperations = [
+ ...extraOperations,
+ {
+ text: intl.formatMessage(
+ { id: "actions.add_to_entity" },
+ { entityType: intl.formatMessage({ id: "gallery" }) }
+ ),
+ onClick: addImages,
+ isDisplayed: showWhenSelected,
+ postRefetch: true,
+ icon: faPlus,
+ },
+ ];
+
+ return (
+
+ );
}
-
- const otherOperations = [
- {
- text: intl.formatMessage(
- { id: "actions.add_to_entity" },
- { entityType: intl.formatMessage({ id: "gallery" }) }
- ),
- onClick: addImages,
- isDisplayed: showWhenSelected,
- postRefetch: true,
- icon: faPlus,
- },
- ];
-
- return (
-
- );
-};
+);
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
index 128e70d38..ebb465868 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
@@ -19,12 +19,14 @@ const GalleryCreate: React.FC = () => {
const [createGallery] = useGalleryCreate();
- async function onSave(input: GQL.GalleryCreateInput) {
+ async function onSave(input: GQL.GalleryCreateInput, andNew?: boolean) {
const result = await createGallery({
variables: { input },
});
if (result.data?.galleryCreate) {
- history.push(`/galleries/${result.data.galleryCreate.id}`);
+ if (!andNew) {
+ history.push(`/galleries/${result.data.galleryCreate.id}`);
+ }
Toast.success(
intl.formatMessage(
{ id: "toast.created_entity" },
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx
index 597a57b15..ead882ec0 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx
@@ -6,6 +6,7 @@ import { TagLink } from "src/components/Shared/TagLink";
import { PerformerCard } from "src/components/Performers/PerformerCard";
import { sortPerformers } from "src/core/performers";
import { PhotographerLink } from "src/components/Shared/Link";
+import { CustomFields } from "src/components/Shared/CustomFields";
interface IGalleryDetailProps {
gallery: GQL.GalleryDataFragment;
@@ -108,6 +109,7 @@ export const GalleryDetailPanel: React.FC = ({
{renderDetails()}
{renderTags()}
{renderPerformers()}
+
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
index b9eea8f5d..14b5d6aad 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Prompt } from "react-router-dom";
-import { Button, Form, Col, Row } from "react-bootstrap";
+import { Button, Dropdown, Form, Col, Row, SplitButton } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import * as yup from "yup";
@@ -31,11 +31,16 @@ import { Studio, StudioSelect } from "src/components/Studios/StudioSelect";
import { Scene, SceneSelect } from "src/components/Scenes/SceneSelect";
import { useTagsEdit } from "src/hooks/tagsEdit";
import { ScraperMenu } from "src/components/Shared/ScraperMenu";
+import {
+ CustomFieldsInput,
+ formatCustomFieldInput,
+} from "src/components/Shared/CustomFields";
+import { cloneDeep } from "@apollo/client/utilities";
interface IProps {
gallery: Partial
;
isVisible: boolean;
- onSubmit: (input: GQL.GalleryCreateInput) => Promise;
+ onSubmit: (input: GQL.GalleryCreateInput, andNew?: boolean) => Promise;
onDelete: () => void;
}
@@ -76,6 +81,7 @@ export const GalleryEditPanel: React.FC = ({
tag_ids: yup.array(yup.string().required()).defined(),
scene_ids: yup.array(yup.string().required()).defined(),
details: yup.string().ensure(),
+ custom_fields: yup.object().required().defined(),
});
const initialValues = {
@@ -89,15 +95,26 @@ export const GalleryEditPanel: React.FC = ({
tag_ids: (gallery?.tags ?? []).map((t) => t.id),
scene_ids: (gallery?.scenes ?? []).map((s) => s.id),
details: gallery?.details ?? "",
+ custom_fields: cloneDeep(gallery?.custom_fields ?? {}),
};
type InputValues = yup.InferType;
+ const [customFieldsError, setCustomFieldsError] = useState();
+
+ function submit(values: InputValues) {
+ const input = {
+ ...schema.cast(values),
+ custom_fields: formatCustomFieldInput(isNew, values.custom_fields),
+ };
+ onSave(input);
+ }
+
const formik = useFormik({
initialValues,
enableReinitialize: true,
validate: yupFormikValidate(schema),
- onSubmit: (values) => onSave(schema.cast(values)),
+ onSubmit: submit,
});
const { tags, updateTagsStateFromScraper, tagsControl } = useTagsEdit(
@@ -162,10 +179,25 @@ export const GalleryEditPanel: React.FC = ({
);
}, [scrapers]);
- async function onSave(input: InputValues) {
+ const cover = useMemo(() => {
+ if (gallery?.paths?.cover) {
+ return (
+
+
+
);
};
diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx
index 0b94baf27..6401738fa 100644
--- a/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx
+++ b/ui/v2.5/src/components/Groups/GroupDetails/GroupEditPanel.tsx
@@ -28,10 +28,15 @@ import { Studio, StudioSelect } from "src/components/Studios/StudioSelect";
import { useTagsEdit } from "src/hooks/tagsEdit";
import { Group } from "src/components/Groups/GroupSelect";
import { RelatedGroupTable, IRelatedGroupEntry } from "./RelatedGroupTable";
+import {
+ CustomFieldsInput,
+ formatCustomFieldInput,
+} from "src/components/Shared/CustomFields";
+import { cloneDeep } from "@apollo/client/utilities";
interface IGroupEditPanel {
group: Partial
Windows | 
macOS | 
Linux | 
Docker
:---:|:---:|:---:|:---:
[Latest Release](https://github.com/stashapp/stash/releases/latest/download/stash-win.exe)