Use RatingSystem control in RatingFilter (#3133)

* Use RatingSystem control in RatingFilter
* Improve styling for rating on performer page

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

@@ -216,11 +216,7 @@ export const AddFilterDialog: React.FC<IAddFilterProps> = ({
       }
       if (criterion instanceof RatingCriterion) {
         return (
-          <RatingFilter
+          <RatingFilter criterion={criterion} onValueChanged={onValueChanged} />
-            criterion={criterion}
-            onValueChanged={onValueChanged}
-            configuration={config}
-          />
         );
       }
       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
+          <Button onClick={onAddFilter} disabled={!isValid()}>
-            onClick={onAddFilter}
-            disabled={criterion.criterionOption.type === "none"}
-          >
             {title}
           </Button>
         </Modal.Footer>

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

@@ -1,135 +1,61 @@
-import React, { useRef } from "react";
+import React from "react";
-import { Form } from "react-bootstrap";
+import { FormattedMessage } from "react-intl";
-import { useIntl } 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 {
+import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
-  convertFromRatingFormat,
-  convertToRatingFormat,
-  defaultRatingSystemOptions,
-} from "src/utils/rating";
-import * as GQL from "src/core/generated-graphql";
-import { IUIConfig } from "src/core/config";
 
-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();
+  function getRatingSystem(field: "value" | "value2") {
-  const ratingSystem =
+    const defaultValue = field === "value" ? 0 : undefined;
-    (configuration?.ui as IUIConfig)?.ratingSystemOptions ??
-    defaultRatingSystemOptions;
 
-  const valueStage = useRef<INumberValue>(criterion.value);
+    return (
-
+      <div>
-  function onChanged(
+        <RatingSystem
-    event: React.ChangeEvent<HTMLInputElement>,
+          value={criterion.value[field]}
-    property: "value" | "value2"
+          onSetRating={(value) => {
-  ) {
+            onValueChanged({
-    const value = parseInt(event.target.value, 10);
+              ...criterion.value,
-    valueStage.current[property] = !Number.isNaN(value)
+              [field]: value ?? defaultValue,
-      ? convertFromRatingFormat(value, ratingSystem.type)
+            });
-      : 0;
+          }}
+          valueRequired
+        />
+      </div>
+    );
   }
 
-  function onBlurInput() {
-    onValueChanged(valueStage.current);
-  }
-
-  let equalsControl: JSX.Element | null = null;
   if (
     criterion.modifier === CriterionModifier.Equals ||
-    criterion.modifier === CriterionModifier.NotEquals
+    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.GreaterThan ||
-    criterion.modifier === CriterionModifier.Between ||
+    criterion.modifier === CriterionModifier.LessThan
-    criterion.modifier === CriterionModifier.NotBetween
   ) {
-    lowerControl = (
+    return getRatingSystem("value");
-      <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>
-    );
   }
 
-  let upperControl: JSX.Element | null = null;
   if (
-    criterion.modifier === CriterionModifier.LessThan ||
     criterion.modifier === CriterionModifier.Between ||
     criterion.modifier === CriterionModifier.NotBetween
   ) {
-    upperControl = (
+    return (
-      <Form.Group>
+      <div className="rating-filter">
-        <Form.Control
+        {getRatingSystem("value")}
-          className="btn-secondary"
+        <span className="and-divider">
-          type="number"
+          <FormattedMessage id="between_and" />
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+        </span>
-            onChanged(
+        {getRatingSystem("value2")}
-              e,
+      </div>
-              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 (
+  return <></>;
-    <>
-      {equalsControl}
-      {lowerControl}
-      {upperControl}
-    </>
-  );
 };

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;
+}

ui/v2.5/src/components/Performers/styles.scss

@@ -41,6 +41,10 @@
         }
       }
     }
+
+    .rating-number .form-control {
+      width: inherit;
+    }
   }
 
   .alias {

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;
       }

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}
       />
     );
   }

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": {

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",
     });
   }

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}`;
     }
   }