From 6b5978945d7e6792089b53e8ca1e86b2c8361f3e Mon Sep 17 00:00:00 2001
From: gitgiggety <gitgiggety@outlook.com>
Date: Sun, 8 Aug 2021 20:02:44 +0200
Subject: [PATCH] Add placeholders to number and duration criterions

---
 .../List/Filters/DurationFilter.tsx           | 26 ++++++++++++++-----
 .../components/List/Filters/NumberFilter.tsx  | 22 +++++++++++++---
 .../src/components/Shared/DurationInput.tsx   |  9 ++++++-
 ui/v2.5/src/locales/en-GB.json                |  5 ++++
 4 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/ui/v2.5/src/components/List/Filters/DurationFilter.tsx b/ui/v2.5/src/components/List/Filters/DurationFilter.tsx
index aea22cd21c4..3fffa954a20 100644
--- a/ui/v2.5/src/components/List/Filters/DurationFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/DurationFilter.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Form } from "react-bootstrap";
+import { useIntl } from "react-intl";
 import { CriterionModifier } from "../../../core/generated-graphql";
 import { DurationInput } from "../../Shared";
 import { INumberValue } from "../../../models/list-filter/types";
@@ -14,10 +15,9 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
   criterion,
   onValueChanged,
 }) => {
-  function onChanged(
-    valueAsNumber: number,
-    property: "value" | "value2"
-  ) {
+  const intl = useIntl();
+
+  function onChanged(valueAsNumber: number, property: "value" | "value2") {
     const { value } = criterion;
     value[property] = valueAsNumber;
     onValueChanged(value);
@@ -33,6 +33,7 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
         <DurationInput
           numericValue={criterion.value?.value}
           onValueChange={(v: number) => onChanged(v, "value")}
+          placeholder={intl.formatMessage({ id: "criterion.value" })}
         />
       </Form.Group>
     );
@@ -49,6 +50,7 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
         <DurationInput
           numericValue={criterion.value?.value}
           onValueChange={(v: number) => onChanged(v, "value")}
+          placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
         />
       </Form.Group>
     );
@@ -63,8 +65,20 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
     upperControl = (
       <Form.Group>
         <DurationInput
-          numericValue={criterion.modifier === CriterionModifier.LessThan ? criterion.value?.value : criterion.value?.value2}
-          onValueChange={(v: number) => onChanged(v, criterion.modifier === CriterionModifier.LessThan ? "value" : "value2")}
+          numericValue={
+            criterion.modifier === CriterionModifier.LessThan
+              ? criterion.value?.value
+              : criterion.value?.value2
+          }
+          onValueChange={(v: number) =>
+            onChanged(
+              v,
+              criterion.modifier === CriterionModifier.LessThan
+                ? "value"
+                : "value2"
+            )
+          }
+          placeholder={intl.formatMessage({ id: "criterion.less_than" })}
         />
       </Form.Group>
     );
diff --git a/ui/v2.5/src/components/List/Filters/NumberFilter.tsx b/ui/v2.5/src/components/List/Filters/NumberFilter.tsx
index 10d66350689..d636b5fbd19 100644
--- a/ui/v2.5/src/components/List/Filters/NumberFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/NumberFilter.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import { Form } from "react-bootstrap";
+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";
@@ -13,13 +14,16 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
   criterion,
   onValueChanged,
 }) => {
+  const intl = useIntl();
+
   const valueStage = useRef<INumberValue>(criterion.value);
 
   function onChanged(
     event: React.ChangeEvent<HTMLInputElement>,
     property: "value" | "value2"
   ) {
-    valueStage.current[property] = parseInt(event.target.value, 10);
+    const value = parseInt(event.target.value, 10);
+    valueStage.current[property] = !Number.isNaN(value) ? value : 0;
   }
 
   function onBlurInput() {
@@ -41,6 +45,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
           }
           onBlur={onBlurInput}
           defaultValue={criterion.value?.value ?? ""}
+          placeholder={intl.formatMessage({ id: "criterion.value" })}
         />
       </Form.Group>
     );
@@ -62,6 +67,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
           }
           onBlur={onBlurInput}
           defaultValue={criterion.value?.value ?? ""}
+          placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
         />
       </Form.Group>
     );
@@ -79,10 +85,20 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
           className="btn-secondary"
           type="number"
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onChanged(e, criterion.modifier === CriterionModifier.LessThan? "value" : "value2")
+            onChanged(
+              e,
+              criterion.modifier === CriterionModifier.LessThan
+                ? "value"
+                : "value2"
+            )
           }
           onBlur={onBlurInput}
-          defaultValue={(criterion.modifier === CriterionModifier.LessThan ? criterion.value?.value : criterion.value?.value2) ?? ""}
+          defaultValue={
+            (criterion.modifier === CriterionModifier.LessThan
+              ? criterion.value?.value
+              : criterion.value?.value2) ?? ""
+          }
+          placeholder={intl.formatMessage({ id: "criterion.less_than" })}
         />
       </Form.Group>
     );
diff --git a/ui/v2.5/src/components/Shared/DurationInput.tsx b/ui/v2.5/src/components/Shared/DurationInput.tsx
index d8363b882e0..4329ffcb2c6 100644
--- a/ui/v2.5/src/components/Shared/DurationInput.tsx
+++ b/ui/v2.5/src/components/Shared/DurationInput.tsx
@@ -13,6 +13,7 @@ interface IProps {
   ): void;
   onReset?(): void;
   className?: string;
+  placeholder?: string;
 }
 
 export const DurationInput: React.FC<IProps> = (props: IProps) => {
@@ -108,7 +109,13 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => {
               props.onValueChange(undefined);
             }
           }}
-          placeholder={!props.disabled ? "hh:mm:ss" : undefined}
+          placeholder={
+            !props.disabled
+              ? props.placeholder
+                ? `${props.placeholder} (hh:mm:ss)`
+                : "hh:mm:ss"
+              : undefined
+          }
         />
         <InputGroup.Append>
           {maybeRenderReset()}
diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json
index 55852ffed92..c38e541341d 100644
--- a/ui/v2.5/src/locales/en-GB.json
+++ b/ui/v2.5/src/locales/en-GB.json
@@ -380,6 +380,11 @@
   "country": "Country",
   "cover_image": "Cover Image",
   "created_at": "Created At",
+  "criterion": {
+    "greater_than": "Greater than",
+    "less_than": "Less than",
+    "value": "Value"
+  },
   "criterion_modifier": {
     "equals": "is",
     "excludes": "excludes",