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

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

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