Add placeholders to number and duration criterions

stashapp · Aug 8, 2021 · 1ee1b0f · 1ee1b0f
1 parent 87109dd
commit 1ee1b0f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 25 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,6 +15,8 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
   criterion,
   onValueChanged,
 }) => {
+  const intl = useIntl();
+
   function onChanged(
     valueAsNumber: number,
     property: "exact" | "lower" | "upper"
@@ -31,8 +34,9 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
     equalsControl = (
       <Form.Group>
         <DurationInput
-          numericValue={criterion.value?.exact ? criterion.value.exact : 0}
+          numericValue={criterion.value?.exact}
           onValueChange={(v: number) => onChanged(v, "exact")}
+          placeholder={intl.formatMessage({ id: "criterion.value" })}
         />
       </Form.Group>
     );
@@ -47,8 +51,9 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
     lowerControl = (
       <Form.Group>
         <DurationInput
-          numericValue={criterion.value?.lower ? criterion.value.lower : 0}
+          numericValue={criterion.value?.lower}
           onValueChange={(v: number) => onChanged(v, "lower")}
+          placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
         />
       </Form.Group>
     );
@@ -63,8 +68,9 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
     upperControl = (
       <Form.Group>
         <DurationInput
-          numericValue={criterion.value?.upper ? criterion.value.upper : 0}
+          numericValue={criterion.value?.upper}
           onValueChange={(v: number) => onChanged(v, "upper")}
+          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: "exact" | "lower" | "upper"
   ) {
-    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?.exact ?? ""}
+          placeholder={intl.formatMessage({ id: "criterion.value" })}
         />
       </Form.Group>
     );
@@ -62,6 +67,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
           }
           onBlur={onBlurInput}
           defaultValue={criterion.value?.lower ?? ""}
+          placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
         />
       </Form.Group>
     );
@@ -83,6 +89,7 @@ export const NumberFilter: React.FC<IDurationFilterProps> = ({
           }
           onBlur={onBlurInput}
           defaultValue={criterion.value?.upper ?? ""}
+          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
@@ -370,6 +370,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",

diff --git a/ui/v2.5/src/models/list-filter/criteria/criterion.ts b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
@@ -323,25 +323,25 @@ export class NumberCriterion extends Criterion<INumberValue> {
   protected toCriterionInput(): IntCriterionInput {
     return {
       modifier: this.modifier,
-      exact: this.value.exact,
-      lower: this.value.lower,
-      upper: this.value.upper,
+      exact: this.value.exact ?? 0,
+      lower: this.value.lower ?? 0,
+      upper: this.value.upper ?? 0,
     };
   }
 
   public getLabelValue() {
     return this.modifier === CriterionModifier.Between ||
       this.modifier === CriterionModifier.NotBetween
-      ? `${this.value.lower}, ${this.value.upper}`
+      ? `${this.value.lower ?? 0}, ${this.value.upper ?? 0}`
       : this.modifier === CriterionModifier.GreaterThan
-      ? `${this.value.lower}`
+      ? `${this.value.lower ?? 0}`
       : this.modifier === CriterionModifier.LessThan
-      ? `${this.value.upper}`
-      : `${this.value.exact}`;
+      ? `${this.value.upper ?? 0}`
+      : `${this.value.exact ?? 0}`;
   }
 
   constructor(type: CriterionOption) {
-    super(type, { exact: 0, lower: 0, upper: 0 });
+    super(type, { exact: undefined, lower: undefined, upper: undefined });
   }
 }
 
@@ -460,7 +460,7 @@ export function createMandatoryNumberCriterionOption(value: CriterionType) {
 
 export class DurationCriterion extends Criterion<INumberValue> {
   constructor(type: CriterionOption) {
-    super(type, { exact: 0, lower: 0, upper: 0 });
+    super(type, { exact: undefined, lower: undefined, upper: undefined });
   }
 
   public encodeValue() {
@@ -474,25 +474,25 @@ export class DurationCriterion extends Criterion<INumberValue> {
   protected toCriterionInput(): IntCriterionInput {
     return {
       modifier: this.modifier,
-      exact: this.value.exact,
-      lower: this.value.lower,
-      upper: this.value.upper,
+      exact: this.value.exact ?? 0,
+      lower: this.value.lower ?? 0,
+      upper: this.value.upper ?? 0,
     };
   }
 
   public getLabelValue() {
     return this.modifier === CriterionModifier.Between ||
       this.modifier === CriterionModifier.NotBetween
       ? `${DurationUtils.secondsToString(
-          this.value.lower
-        )} ${DurationUtils.secondsToString(this.value.upper)}`
+          this.value.lower ?? 0
+        )} ${DurationUtils.secondsToString(this.value.upper ?? 0)}`
       : this.modifier === CriterionModifier.GreaterThan
-      ? DurationUtils.secondsToString(this.value.lower)
+      ? DurationUtils.secondsToString(this.value.lower ?? 0)
       : this.modifier === CriterionModifier.LessThan
-      ? DurationUtils.secondsToString(this.value.upper)
+      ? DurationUtils.secondsToString(this.value.upper ?? 0)
       : this.modifier === CriterionModifier.Equals ||
         this.modifier === CriterionModifier.NotEquals
-      ? DurationUtils.secondsToString(this.value.exact)
+      ? DurationUtils.secondsToString(this.value.exact ?? 0)
       : "?";
   }
 }
diff --git a/ui/v2.5/src/models/list-filter/types.ts b/ui/v2.5/src/models/list-filter/types.ts
@@ -24,9 +24,9 @@ export interface IHierarchicalLabelValue {
 }
 
 export interface INumberValue {
-  exact: number;
-  lower: number;
-  upper: number;
+  exact: number | undefined;
+  lower: number | undefined;
+  upper: number | undefined;
 }
 
 export function criterionIsHierarchicalLabelValue(