Support filtering by StashID endpoint (#3005)

* Add endpoint to stash_id filter in UI

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/List/AddFilterDialog.tsx

@@ -22,6 +22,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import {
   criterionIsHierarchicalLabelValue,
   criterionIsNumberValue,
+  criterionIsStashIDValue,
   criterionIsDateValue,
   criterionIsTimestampValue,
   CriterionType,
@@ -36,6 +37,8 @@ import { DateFilter } from "./Filters/DateFilter";
 import { TimestampFilter } from "./Filters/TimestampFilter";
 import { CountryCriterion } from "src/models/list-filter/criteria/country";
 import { CountrySelect } from "../Shared";
+import { StashIDCriterion } from "src/models/list-filter/criteria/stash-ids";
+import { StashIDFilter } from "./Filters/StashIDFilter";
 import { ConfigurationContext } from "src/hooks/Config";
 import { RatingCriterion } from "../../models/list-filter/criteria/rating";
 import { RatingFilter } from "./Filters/RatingFilter";
@@ -134,6 +137,16 @@ export const AddFilterDialog: React.FC<IAddFilterProps> = ({
     }
 
     function renderSelect() {
+      // always show stashID filter
+      if (criterion instanceof StashIDCriterion) {
+        return (
+          <StashIDFilter
+            criterion={criterion}
+            onValueChanged={onValueChanged}
+          />
+        );
+      }
+
       // Hide the value select if the modifier is "IsNull" or "NotNull"
       if (
         criterion.modifier === CriterionModifier.IsNull ||
@@ -162,6 +175,7 @@ export const AddFilterDialog: React.FC<IAddFilterProps> = ({
         options &&
         !criterionIsHierarchicalLabelValue(criterion.value) &&
         !criterionIsNumberValue(criterion.value) &&
+        !criterionIsStashIDValue(criterion.value) &&
         !criterionIsDateValue(criterion.value) &&
         !criterionIsTimestampValue(criterion.value) &&
         !Array.isArray(criterion.value)

ui/v2.5/src/components/List/Filters/StashIDFilter.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { useIntl } from "react-intl";
+import { IStashIDValue } from "../../../models/list-filter/types";
+import { Criterion } from "../../../models/list-filter/criteria/criterion";
+import { CriterionModifier } from "src/core/generated-graphql";
+
+interface IStashIDFilterProps {
+  criterion: Criterion<IStashIDValue>;
+  onValueChanged: (value: IStashIDValue) => void;
+}
+
+export const StashIDFilter: React.FC<IStashIDFilterProps> = ({
+  criterion,
+  onValueChanged,
+}) => {
+  const intl = useIntl();
+
+  function onEndpointChanged(event: React.ChangeEvent<HTMLInputElement>) {
+    onValueChanged({
+      endpoint: event.target.value,
+      stashID: criterion.value.stashID,
+    });
+  }
+
+  function onStashIDChanged(event: React.ChangeEvent<HTMLInputElement>) {
+    onValueChanged({
+      stashID: event.target.value,
+      endpoint: criterion.value.endpoint,
+    });
+  }
+
+  return (
+    <div>
+      <Form.Group>
+        <Form.Control
+          className="btn-secondary"
+          onBlur={onEndpointChanged}
+          defaultValue={criterion.value ? criterion.value.endpoint : ""}
+          placeholder={intl.formatMessage({ id: "stash_id_endpoint" })}
+        />
+      </Form.Group>
+      {criterion.modifier !== CriterionModifier.IsNull &&
+        criterion.modifier !== CriterionModifier.NotNull && (
+          <Form.Group>
+            <Form.Control
+              className="btn-secondary"
+              onBlur={onStashIDChanged}
+              defaultValue={criterion.value ? criterion.value.stashID : ""}
+              placeholder={intl.formatMessage({ id: "stash_id" })}
+            />
+          </Form.Group>
+        )}
+    </div>
+  );
+};