Use RatingSystem control in RatingFilter (#3133)

* Use RatingSystem control in RatingFilter * Improve styling for rating on performer page
2025-12-17 20:34:37 +03:00 · 2022-11-17 10:10:40 +11:00
parent 3660bf2d1a
commit f0bf780c2e
9 changed files with 92 additions and 121 deletions
--- a/ui/v2.5/src/components/List/AddFilterDialog.tsx
+++ b/ui/v2.5/src/components/List/AddFilterDialog.tsx
@@ -216,11 +216,7 @@ export const AddFilterDialog: React.FC<IAddFilterProps> = ({
      }
      if (criterion instanceof RatingCriterion) {
        return (
-          <RatingFilter
-            criterion={criterion}
-            onValueChanged={onValueChanged}
-            configuration={config}
-          />
+          <RatingFilter criterion={criterion} onValueChanged={onValueChanged} />
        );
      }
      if (
@@ -307,12 +303,32 @@ export const AddFilterDialog: React.FC<IAddFilterProps> = ({
    );
  }

+  function isValid() {
+    if (criterion.criterionOption.type === "none") {
+      return false;
+    }
+
+    if (criterion instanceof RatingCriterion) {
+      switch (criterion.modifier) {
+        case CriterionModifier.Equals:
+        case CriterionModifier.NotEquals:
+        case CriterionModifier.LessThan:
+          return !!criterion.value.value;
+        case CriterionModifier.Between:
+        case CriterionModifier.NotBetween:
+          return criterion.value.value < (criterion.value.value2 ?? 0);
+      }
+    }
+
+    return true;
+  }
+
  const title = !editingCriterion
    ? intl.formatMessage({ id: "search_filter.add_filter" })
    : intl.formatMessage({ id: "search_filter.update_filter" });
  return (
    <>
-      <Modal show onHide={() => onCancel()}>
+      <Modal show onHide={() => onCancel()} className="add-filter-dialog">
        <Modal.Header>{title}</Modal.Header>
        <Modal.Body>
          <div className="dialog-content">
@@ -322,10 +338,7 @@ export const AddFilterDialog: React.FC<IAddFilterProps> = ({
          </div>
        </Modal.Body>
        <Modal.Footer>
-          <Button
-            onClick={onAddFilter}
-            disabled={criterion.criterionOption.type === "none"}
-          >
+          <Button onClick={onAddFilter} disabled={!isValid()}>
            {title}
          </Button>
        </Modal.Footer>
--- a/ui/v2.5/src/components/List/Filters/RatingFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/RatingFilter.tsx
@@ -1,135 +1,61 @@
-import React, { useRef } from "react";
-import { Form } from "react-bootstrap";
-import { useIntl } from "react-intl";
+import React from "react";
+import { FormattedMessage } from "react-intl";
 import { CriterionModifier } from "../../../core/generated-graphql";
 import { INumberValue } from "../../../models/list-filter/types";
 import { Criterion } from "../../../models/list-filter/criteria/criterion";
-import {
-  convertFromRatingFormat,
-  convertToRatingFormat,
-  defaultRatingSystemOptions,
-} from "src/utils/rating";
-import * as GQL from "src/core/generated-graphql";
-import { IUIConfig } from "src/core/config";
+import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";

-interface IDurationFilterProps {
+interface IRatingFilterProps {
  criterion: Criterion<INumberValue>;
  onValueChanged: (value: INumberValue) => void;
-  configuration: GQL.ConfigDataFragment | undefined;
 }

-export const RatingFilter: React.FC<IDurationFilterProps> = ({
+export const RatingFilter: React.FC<IRatingFilterProps> = ({
  criterion,
  onValueChanged,
-  configuration,
 }) => {
-  const intl = useIntl();
-  const ratingSystem =
-    (configuration?.ui as IUIConfig)?.ratingSystemOptions ??
-    defaultRatingSystemOptions;
+  function getRatingSystem(field: "value" | "value2") {
+    const defaultValue = field === "value" ? 0 : undefined;

-  const valueStage = useRef<INumberValue>(criterion.value);
-
-  function onChanged(
-    event: React.ChangeEvent<HTMLInputElement>,
-    property: "value" | "value2"
-  ) {
-    const value = parseInt(event.target.value, 10);
-    valueStage.current[property] = !Number.isNaN(value)
-      ? convertFromRatingFormat(value, ratingSystem.type)
-      : 0;
+    return (
+      <div>
+        <RatingSystem
+          value={criterion.value[field]}
+          onSetRating={(value) => {
+            onValueChanged({
+              ...criterion.value,
+              [field]: value ?? defaultValue,
+            });
+          }}
+          valueRequired
+        />
+      </div>
+    );
  }

-  function onBlurInput() {
-    onValueChanged(valueStage.current);
-  }
-
-  let equalsControl: JSX.Element | null = null;
  if (
    criterion.modifier === CriterionModifier.Equals ||
-    criterion.modifier === CriterionModifier.NotEquals
-  ) {
-    equalsControl = (
-      <Form.Group>
-        <Form.Control
-          className="btn-secondary"
-          type="number"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onChanged(e, "value")
-          }
-          onBlur={onBlurInput}
-          defaultValue={
-            convertToRatingFormat(criterion.value?.value, ratingSystem) ?? ""
-          }
-          placeholder={intl.formatMessage({ id: "criterion.value" })}
-        />
-      </Form.Group>
-    );
-  }
-
-  let lowerControl: JSX.Element | null = null;
-  if (
+    criterion.modifier === CriterionModifier.NotEquals ||
    criterion.modifier === CriterionModifier.GreaterThan ||
-    criterion.modifier === CriterionModifier.Between ||
-    criterion.modifier === CriterionModifier.NotBetween
+    criterion.modifier === CriterionModifier.LessThan
  ) {
-    lowerControl = (
-      <Form.Group>
-        <Form.Control
-          className="btn-secondary"
-          type="number"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onChanged(e, "value")
-          }
-          onBlur={onBlurInput}
-          defaultValue={
-            convertToRatingFormat(criterion.value?.value, ratingSystem) ?? ""
-          }
-          placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
-        />
-      </Form.Group>
-    );
+    return getRatingSystem("value");
  }

-  let upperControl: JSX.Element | null = null;
  if (
-    criterion.modifier === CriterionModifier.LessThan ||
    criterion.modifier === CriterionModifier.Between ||
    criterion.modifier === CriterionModifier.NotBetween
  ) {
-    upperControl = (
-      <Form.Group>
-        <Form.Control
-          className="btn-secondary"
-          type="number"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onChanged(
-              e,
-              criterion.modifier === CriterionModifier.LessThan
-                ? "value"
-                : "value2"
-            )
-          }
-          onBlur={onBlurInput}
-          defaultValue={
-            convertToRatingFormat(
-              criterion.modifier === CriterionModifier.LessThan
-                ? criterion.value?.value
-                : criterion.value?.value2,
-              ratingSystem
-            ) ?? ""
-          }
-          placeholder={intl.formatMessage({ id: "criterion.less_than" })}
-        />
-      </Form.Group>
+    return (
+      <div className="rating-filter">
+        {getRatingSystem("value")}
+        <span className="and-divider">
+          <FormattedMessage id="between_and" />
+        </span>
+        {getRatingSystem("value2")}
+      </div>
    );
  }

-  return (
-    <>
-      {equalsControl}
-      {lowerControl}
-      {upperControl}
-    </>
-  );
+  return <></>;
 };
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -107,3 +107,12 @@ input[type="range"].zoom-slider {
    }
  }
 }
+
+.add-filter-dialog .rating-stars {
+  font-size: 1.3em;
+  margin-left: 0.25em;
+}
+
+.rating-filter .and-divider {
+  margin-left: 0.5em;
+}
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -41,6 +41,10 @@
        }
      }
    }
+
+    .rating-number .form-control {
+      width: inherit;
+    }
  }

  .alias {
--- a/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx
+++ b/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx
@@ -17,6 +17,7 @@ export interface IRatingStarsProps {
  onSetRating?: (value?: number) => void;
  disabled?: boolean;
  precision: RatingStarPrecision;
+  valueRequired?: boolean;
 }

 export const RatingStars: React.FC<IRatingStarsProps> = (
@@ -62,7 +63,15 @@ export const RatingStars: React.FC<IRatingStarsProps> = (
    ) {
      const f = newToggleFraction();
      if (!f) {
-        newRating = undefined;
+        if (props.valueRequired) {
+          if (fraction) {
+            newRating = stars + 1;
+          } else {
+            newRating = stars;
+          }
+        } else {
+          newRating = undefined;
+        }
      } else if (fraction) {
        // we're toggling from an existing fraction so use the stars value
        newRating = stars + f;
@@ -143,10 +152,17 @@ export const RatingStars: React.FC<IRatingStarsProps> = (

    if (hoverRating) {
      if (hoverRating === stars && precision === 1) {
+        if (props.valueRequired) {
+          return { rating: r, fraction: 0 };
+        }
+
        // unsetting
        return undefined;
      }
      if (hoverRating === stars + 1 && fraction && fraction === precision) {
+        if (props.valueRequired) {
+          return { rating: r, fraction: 0 };
+        }
        // unsetting
        return undefined;
      }
--- a/ui/v2.5/src/components/Shared/Rating/RatingSystem.tsx
+++ b/ui/v2.5/src/components/Shared/Rating/RatingSystem.tsx
@@ -13,6 +13,7 @@ export interface IRatingSystemProps {
  value?: number;
  onSetRating?: (value?: number) => void;
  disabled?: boolean;
+  valueRequired?: boolean;
 }

 export const RatingSystem: React.FC<IRatingSystemProps> = (
@@ -32,6 +33,7 @@ export const RatingSystem: React.FC<IRatingSystemProps> = (
        precision={
          ratingSystemOptions.starPrecision ?? defaultRatingStarPrecision
        }
+        valueRequired={props.valueRequired}
      />
    );
  }
--- a/ui/v2.5/src/locales/en-GB.json
+++ b/ui/v2.5/src/locales/en-GB.json
@@ -127,6 +127,7 @@
  "birth_year": "Birth Year",
  "birthdate": "Birthdate",
  "bitrate": "Bit Rate",
+  "between_and": "and",
  "captions": "Captions",
  "career_length": "Career Length",
  "component_tagger": {
--- a/ui/v2.5/src/models/list-filter/criteria/criterion.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
@@ -342,7 +342,7 @@ export class NullNumberCriterionOption extends CriterionOption {
        CriterionModifier.IsNull,
        CriterionModifier.NotNull,
      ],
-      defaultModifier: CriterionModifier.GreaterThan,
+      defaultModifier: CriterionModifier.Equals,
      inputType: "number",
    });
  }
--- a/ui/v2.5/src/models/list-filter/criteria/rating.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/rating.ts
@@ -42,11 +42,11 @@ export class RatingCriterion extends Criterion<INumberValue> {
      this.modifier === CriterionModifier.Between ||
      this.modifier === CriterionModifier.NotBetween
    ) {
-      return `${convertToRatingFormat(value, this.ratingSystem)}, ${
+      return `${convertToRatingFormat(value, this.ratingSystem) ?? 0}, ${
        convertToRatingFormat(value2, this.ratingSystem) ?? 0
      }`;
    } else {
-      return `${convertToRatingFormat(value, this.ratingSystem)}`;
+      return `${convertToRatingFormat(value, this.ratingSystem) ?? 0}`;
    }
  }