Phash distance filter (#3596)

* Add phash_distance filter criterion
* Add distance to phash filter in UI

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

@@ -38,6 +38,8 @@ import { RatingFilter } from "./Filters/RatingFilter";
 import { BooleanFilter } from "./Filters/BooleanFilter";
 import { OptionsListFilter } from "./Filters/OptionsListFilter";
 import { PathFilter } from "./Filters/PathFilter";
+import { PhashCriterion } from "src/models/list-filter/criteria/phash";
+import { PhashFilter } from "./Filters/PhashFilter";
 
 interface IGenericCriterionEditor {
   criterion: Criterion<CriterionValue>;
@@ -172,6 +174,11 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
         <RatingFilter criterion={criterion} onValueChanged={onValueChanged} />
       );
     }
+    if (criterion instanceof PhashCriterion) {
+      return (
+        <PhashFilter criterion={criterion} onValueChanged={onValueChanged} />
+      );
+    }
     if (
       criterion instanceof CountryCriterion &&
       (criterion.modifier === CriterionModifier.Equals ||

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { useIntl } from "react-intl";
+import { IPhashDistanceValue } from "../../../models/list-filter/types";
+import { Criterion } from "../../../models/list-filter/criteria/criterion";
+import { CriterionModifier } from "src/core/generated-graphql";
+
+interface IPhashFilterProps {
+  criterion: Criterion<IPhashDistanceValue>;
+  onValueChanged: (value: IPhashDistanceValue) => void;
+}
+
+export const PhashFilter: React.FC<IPhashFilterProps> = ({
+  criterion,
+  onValueChanged,
+}) => {
+  const intl = useIntl();
+  const { value } = criterion;
+
+  function valueChanged(event: React.ChangeEvent<HTMLInputElement>) {
+    onValueChanged({
+      value: event.target.value,
+      distance: criterion.value.distance,
+    });
+  }
+
+  function distanceChanged(event: React.ChangeEvent<HTMLInputElement>) {
+    let distance = parseInt(event.target.value);
+    if (distance < 0 || isNaN(distance)) {
+      distance = 0;
+    }
+
+    onValueChanged({
+      distance,
+      value: criterion.value.value,
+    });
+  }
+
+  return (
+    <div>
+      <Form.Group>
+        <Form.Control
+          className="btn-secondary"
+          onChange={valueChanged}
+          value={value ? value.value : ""}
+          placeholder={intl.formatMessage({ id: "phash" })}
+        />
+      </Form.Group>
+      {criterion.modifier !== CriterionModifier.IsNull &&
+        criterion.modifier !== CriterionModifier.NotNull && (
+          <Form.Group>
+            <Form.Control
+              className="btn-secondary"
+              onChange={distanceChanged}
+              type="number"
+              value={value ? value.distance : ""}
+              placeholder={intl.formatMessage({ id: "distance" })}
+            />
+          </Form.Group>
+        )}
+    </div>
+  );
+};