Add placeholders to number and duration criterions

stashapp · Aug 10, 2021 · 6b59789 · 6b59789
1 parent 66767f9
commit 6b59789
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",