Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 12:54:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Show stash-ids with their endpoint (#4216)

Browse Source
This commit is contained in:
WithoutPants
2023-10-18 07:56:49 +11:00
committed by GitHub
parent 21baa23fc5
commit a83dfff5ff
8 changed files with 79 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
View File

@@ -3,10 +3,10 @@ import { useIntl } from "react-intl";
import { TagLink } from "src/components/Shared/TagLink";
import * as GQL from "src/core/generated-graphql";
import TextUtils from "src/utils/text";
import { getStashboxBase } from "src/utils/stashbox";
import { cmToImperial, cmToInches, kgToLbs } from "src/utils/units";
import { DetailItem } from "src/components/Shared/DetailItem";
import { CountryFlag } from "src/components/Shared/CountryFlag";
import { StashIDPill } from "src/components/Shared/StashID";
interface IPerformerDetails {
performer: GQL.PerformerDataFragment;
@@ -42,25 +42,11 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
return (
<ul className="pl-0">
{performer.stash_ids.map((stashID) => {
const base = getStashboxBase(stashID.endpoint);
const link = base ? (
<a
href={`${base}performers/${stashID.stash_id}`}
target="_blank"
rel="noopener noreferrer"
>
{stashID.stash_id}
</a>
) : (
stashID.stash_id
);
return (
<li key={stashID.stash_id} className="row no-gutters">
{link}
</li>
);
})}
{performer.stash_ids.map((stashID) => (
<li key={stashID.stash_id} className="row no-gutters">
<StashIDPill stashID={stashID} linkType="performers" />
</li>
))}
</ul>
);
}

15
ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx
View File

@@ -47,6 +47,7 @@ import {
import { StringListInput } from "src/components/Shared/StringListInput";
import isEqual from "lodash-es/isEqual";
import { DateInput } from "src/components/Shared/DateInput";
import { StashIDPill } from "src/components/Shared/StashID";
const isScraper = (
scraper: GQL.Scraper | GQL.StashBox
@@ -792,18 +793,6 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
<Col sm={fieldXS} xl={fieldXL}>
<ul className="pl-0">
{formik.values.stash_ids.map((stashID) => {
const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
const link = base ? (
<a
href={`${base}performers/${stashID.stash_id}`}
target="_blank"
rel="noopener noreferrer"
>
{stashID.stash_id}
</a>
) : (
stashID.stash_id
);
return (
<li key={stashID.stash_id} className="row no-gutters mb-1">
<Button
@@ -814,7 +803,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
>
<Icon icon={faTrashAlt} />
</Button>
{link}
<StashIDPill stashID={stashID} linkType="performers" />
</li>
);
})}

16
ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
View File

@@ -55,6 +55,7 @@ import {
Performer,
PerformerSelect,
} from "src/components/Performers/PerformerSelect";
import { StashIDPill } from "src/components/Shared/StashID";
const SceneScrapeDialog = lazyComponent(() => import("./SceneScrapeDialog"));
const SceneQueryModal = lazyComponent(() => import("./SceneQueryModal"));
@@ -904,19 +905,6 @@ export const SceneEditPanel: React.FC<IProps> = ({
</Form.Label>
<ul className="pl-0">
{formik.values.stash_ids.map((stashID) => {
const base =
stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
const link = base ? (
<a
href={`${base}scenes/${stashID.stash_id}`}
target="_blank"
rel="noopener noreferrer"
>
{stashID.stash_id}
</a>
) : (
stashID.stash_id
);
return (
<li key={stashID.stash_id} className="row no-gutters">
<Button
@@ -934,7 +922,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
>
<Icon icon={faTrashAlt} />
</Button>
{link}
<StashIDPill stashID={stashID} linkType="scenes" />
</li>
);
})}

16
ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
View File

@@ -15,8 +15,8 @@ import { mutateSceneSetPrimaryFile } from "src/core/StashService";
import { useToast } from "src/hooks/Toast";
import NavUtils from "src/utils/navigation";
import TextUtils from "src/utils/text";
import { getStashboxBase } from "src/utils/stashbox";
import { TextField, URLField, URLsField } from "src/utils/field";
import { StashIDPill } from "src/components/Shared/StashID";
interface IFileInfoPanelProps {
sceneID: string;
@@ -197,21 +197,9 @@ export const SceneFileInfoPanel: React.FC<ISceneFileInfoPanelProps> = (
<dd>
<dl>
{props.scene.stash_ids.map((stashID) => {
const base = getStashboxBase(stashID.endpoint);
const link = base ? (
<a
href={`${base}scenes/${stashID.stash_id}`}
target="_blank"
rel="noopener noreferrer"
>
{stashID.stash_id}
</a>
) : (
stashID.stash_id
);
return (
<dd key={stashID.stash_id} className="row no-gutters">
{link}
<StashIDPill stashID={stashID} linkType="scenes" />
</dd>
);
})}

34
ui/v2.5/src/components/Shared/StashID.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React, { useMemo } from "react";
import { StashId } from "src/core/generated-graphql";
import { ConfigurationContext } from "src/hooks/Config";
import { getStashboxBase } from "src/utils/stashbox";
type LinkType = "performers" | "scenes" | "studios";
export const StashIDPill: React.FC<{
stashID: StashId;
linkType: LinkType;
}> = ({ stashID, linkType }) => {
const { configuration } = React.useContext(ConfigurationContext);
const { endpoint, stash_id } = stashID;
const endpointName = useMemo(() => {
return (
configuration?.general.stashBoxes.find((sb) => sb.endpoint === endpoint)
?.name ?? endpoint
);
}, [configuration?.general.stashBoxes, endpoint]);
const base = getStashboxBase(endpoint);
const link = `${base}${linkType}/${stash_id}`;
return (
<span className="stash-id-pill" data-endpoint={endpointName}>
<span>{endpointName}</span>
<a href={link} target="_blank" rel="noopener noreferrer">
{stash_id}
</a>
</span>
);
};

29
ui/v2.5/src/components/Shared/styles.scss
View File

@@ -480,3 +480,32 @@ div.react-datepicker {
.string-list-row .input-group {
flex-wrap: nowrap;
}
.stash-id-pill {
display: inline-block;
font-size: 90%;
font-weight: 700;
line-height: 1;
padding-bottom: 0.25em;
padding-top: 0.25em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
span,
a {
display: inline-block;
padding: 0.25em 0.6em;
}
span {
background-color: $primary;
border-radius: 0.25rem 0 0 0.25rem;
min-width: 5em;
}
a {
background-color: $secondary;
border-radius: 0 0.25rem 0.25rem 0;
}
}

15
ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx
View File

@@ -1,6 +1,7 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
import { DetailItem } from "src/components/Shared/DetailItem";
import { StashIDPill } from "src/components/Shared/StashID";
interface IStudioDetailsPanel {
studio: GQL.StudioDataFragment;
@@ -21,21 +22,9 @@ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
return (
<ul className="pl-0">
{studio.stash_ids.map((stashID) => {
const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
const link = base ? (
<a
href={`${base}studios/${stashID.stash_id}`}
target="_blank"
rel="noopener noreferrer"
>
{stashID.stash_id}
</a>
) : (
stashID.stash_id
);
return (
<li key={stashID.stash_id} className="row no-gutters">
{link}
<StashIDPill stashID={stashID} linkType="studios" />
</li>
);
})}

15
ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx
View File

@@ -17,6 +17,7 @@ import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
import isEqual from "lodash-es/isEqual";
import { useToast } from "src/hooks/Toast";
import { handleUnsavedChanges } from "src/utils/navigation";
import { StashIDPill } from "src/components/Shared/StashID";
interface IStudioEditPanel {
studio: Partial<GQL.StudioDataFragment>;
@@ -165,18 +166,6 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
<Col xs={fieldXS} xl={fieldXL}>
<ul className="pl-0">
{formik.values.stash_ids.map((stashID) => {
const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
const link = base ? (
<a
href={`${base}studios/${stashID.stash_id}`}
target="_blank"
rel="noopener noreferrer"
>
{stashID.stash_id}
</a>
) : (
stashID.stash_id
);
return (
<li key={stashID.stash_id} className="row no-gutters">
<Button
@@ -190,7 +179,7 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
>
<Icon icon={faTrashAlt} />
</Button>
{link}
<StashIDPill stashID={stashID} linkType="studios" />
</li>
);
})}