fix: #419 formatting numbers in plans and jobs

mw-webapp/src/component/editableText/EditableText.tsx

@@ -1,6 +1,7 @@
 import {HTMLInputTypeAttribute, useState} from "react";
 import clsx from "clsx";
 import {renderSpan} from "src/component/editableText/renderSpan";
+import {FormatterInputValue} from "src/component/input/formatters";
 import {Input} from "src/component/input/Input";
 import {KeySymbols} from "src/utils/KeySymbols";
 import styles from "src/component/editableText/EditableText.module.scss";
@@ -11,9 +12,9 @@ import styles from "src/component/editableText/EditableText.module.scss";
 interface EditableTextProps<T> {
 
   /**
-   * Cell item's text
+   * Cell item's value
    */
-  text: T;
+  value: T;
 
   /**
    * Function that update element on Enter click or unfocused
@@ -47,15 +48,15 @@ interface EditableTextProps<T> {
 /**
  * Render Input or span depend on client actions
  */
-export const EditableText = <T extends string | number>(props: EditableTextProps<T>) => {
+export const EditableValue = <T extends string | number>(props: EditableTextProps<T>) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [text, setText] = useState<T>(props.text);
+  const [value, setValue] = useState(props.value);
 
   /**
    * HandleChangeFinish
    */
   const handleChangeFinish = () => {
-    props.onChangeFinish(text);
+    props.onChangeFinish(value);
     setIsEditing(false);
   };
 
@@ -69,24 +70,23 @@ export const EditableText = <T extends string | number>(props: EditableTextProps
   };
 
   /**
-   * Check type of coming value and convert it to Number if need to use input with type "number"
+   * Update value
    */
-  const setValue = (value: string) => {
-    const number = Number(value) ?? 0;
-    const updatedValue = props.type === "number" ? number : value;
-    setText(updatedValue as T);
+  const updateValue = (updatedValue: string | number) => {
+    setValue(updatedValue as T);
   };
 
   /**
    * Render input
    */
   const renderInput = () => (
     <Input
+      formatter={FormatterInputValue.withNoFirstZero}
       type={props.type ?? "text"}
       max={props.max}
-      value={text}
+      value={value}
       autoFocus={true}
-      onChange={setValue}
+      onChange={updateValue}
     />
   );
 
@@ -101,7 +101,7 @@ export const EditableText = <T extends string | number>(props: EditableTextProps
     >
       {isEditing
         ? renderInput()
-        : renderSpan(text)
+        : renderSpan(value)
       }
     </div>
   );

mw-webapp/src/component/input/Input.tsx

@@ -1,17 +1,18 @@
 import {HTMLInputTypeAttribute} from "react";
 import clsx from "clsx";
 import {InputMode} from "src/component/input/InputMode";
+import {ParserInputValue} from "src/component/input/parsers";
 import styles from "src/component/input/Input.module.scss";
 
 /**
  * Input's props
  */
-interface InputProps {
+interface InputProps<T extends string | number> {
 
   /**
    * Input's value
    */
-  value: string | number;
+  value: T;
 
   /**
    * Input's type (what type of value is expected)
@@ -61,25 +62,52 @@ interface InputProps {
   /**
    * Tracks the value entered into the input
    */
-  onChange: (value: string) => void;
+  onChange: (value: T) => void;
+
+  /**
+   * Formatting value
+   */
+  formatter?: (value: T) => T;
+
+  /**
+   * Parsing formatted value
+   */
+  parser?: (value: string) => T;
 
 }
 
 /**
  * Input component
  */
-export const Input = (props: InputProps) => {
+export const Input = <T extends string | number>(props: InputProps<T>) => {
 
   /**
    * Event handler for the input change event
    */
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    props.onChange(event.target.value);
+    let parsedValue: T;
+
+    switch (props.type) {
+      case "number": {
+        parsedValue = props.parser
+          ? props.parser(event.target.value)
+          : ParserInputValue.defaultNumberParser(event.target.value);
+        break;
+      }
+      case "string":
+      default: {
+        parsedValue = props.parser
+          ? props.parser(event.target.value)
+          : ParserInputValue.defaultTextParser(event.target.value);
+        break;
+      }
+    }
+    props.onChange(parsedValue);
   };
 
   return (
     <input
-      value={props.value}
+      value={props.formatter ? props.formatter(props.value) : props.value}
       type={props.type ?? "text"}
       max={props.max}
       placeholder={props.placeholder}

mw-webapp/src/component/input/formatters.ts

@@ -0,0 +1,28 @@
+/**
+ * Formatters
+ */
+export class FormatterInputValue {
+
+  /**
+   * Delete first zero from input number
+   */
+  public static withNoFirstZero(value: string | number) {
+    const SECOND_INDEX = 1;
+    const valueStringified = value.toString();
+
+    const formattedValue = valueStringified.startsWith("0")
+      ? valueStringified.slice(SECOND_INDEX)
+      : value;
+
+    return formattedValue;
+  }
+
+  /**
+   * Default string formatter
+   */
+  public static defaultStringFormatter(value: string) {
+    return value;
+  }
+
+}
+

mw-webapp/src/component/input/parsers.ts

@@ -0,0 +1,20 @@
+/**
+ * Parsers
+ */
+export class ParserInputValue {
+
+  /**
+   * Default text parser
+   */
+  public static defaultTextParser<T = string>(value: string): T {
+    return value as T;
+  }
+
+  /**
+   * Default number parser
+   */
+  public static defaultNumberParser<T = number>(value: string): T {
+    return Number(value) as T;
+  }
+
+}

mw-webapp/src/component/userCard/UserCard.tsx

@@ -28,7 +28,7 @@ export const UserCard = (props: UserCardProps) => {
   const navigate = useNavigate();
 
   return (
-    <a onClick={() => navigate(pages.way.getPath({uuid: props.userPreview.uuid}))}>
+    <a onClick={() => navigate(pages.user.getPath({uuid: props.userPreview.uuid}))}>
       <VerticalContainer className={styles.userCardContainer}>
         <VerticalContainer className={styles.mainInfo}>
           <HorizontalContainer className={styles.nameLikes}>

mw-webapp/src/component/wayCard/WayCard.module.scss

@@ -65,7 +65,7 @@ $wayCardAdditionalHeight: 105px;
 
 .wayTags {
   display: -webkit-box;
-  overflow: hidden;
+  align-items: center;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }

mw-webapp/src/component/wayCard/wayTag/WayTag.module.scss

@@ -8,6 +8,6 @@ $WayTagBorderRadius: 1000px;
   padding: $WayTagPadding;
   border-radius: $WayTagBorderRadius;
   margin-right: $marginMedium;
-  background-color: var(--secondaryBackgroundColor);
+  background-color: var(--primaryBackgroundColor);
   color: var(--fourthBackgroundColor);
 }

mw-webapp/src/logic/wayPage/goalMetricsBlock/GoalMetricItem.tsx

@@ -1,7 +1,7 @@
 import {TrashIcon} from "@radix-ui/react-icons";
 import {Checkbox} from "src/component/checkbox/Сheckbox";
 import {Confirm} from "src/component/confirm/Confirm";
-import {EditableText} from "src/component/editableText/EditableText";
+import {EditableValue} from "src/component/editableText/EditableText";
 import {HorizontalContainer} from "src/component/horizontalContainer/HorizontalContainer";
 import {Tooltip} from "src/component/tooltip/Tooltip";
 import {Metric} from "src/model/businessModel/Metric";
@@ -58,8 +58,8 @@ export const GoalMetricItem = (props: SingleGoalMetricProps) => {
           onChange={(isDone) => props.updateMetric({...props.metric, isDone, doneDate: new Date()})}
         />
         <Tooltip content={tooltipContent}>
-          <EditableText
-            text={props.metric.description ?? ""}
+          <EditableValue
+            value={props.metric.description ?? ""}
             onChangeFinish={(description) => props.updateMetric({...props.metric, description})}
             isEditable={props.isEditable}
           />

mw-webapp/src/logic/wayPage/reportsTable/reportsColumns/ReportsColumns.tsx

@@ -4,7 +4,7 @@ import {clsx} from "clsx";
 import {Button} from "src/component/button/Button";
 import {Checkbox} from "src/component/checkbox/Сheckbox";
 import {Confirm} from "src/component/confirm/Confirm";
-import {EditableText} from "src/component/editableText/EditableText";
+import {EditableValue} from "src/component/editableText/EditableText";
 import {EditableTextarea} from "src/component/editableTextarea/editableTextarea";
 import {HorizontalContainer} from "src/component/horizontalContainer/HorizontalContainer";
 import {Link} from "src/component/link/Link";
@@ -274,12 +274,12 @@ export const Columns = (props: ColumnsProps) => {
                           position={PositionTooltip.RIGHT}
                           content={`Time${Symbols.NO_BREAK_SPACE}spent on job`}
                         >
-                          <EditableText
-                            text={jobDone.time}
+                          <EditableValue
+                            value={jobDone.time}
                             type="number"
                             max={MAX_TIME}
                             onChangeFinish={(time) =>
-                              updateJobDoneTime(jobDone, getValidatedTime(time))}
+                              updateJobDoneTime(jobDone, getValidatedTime(Number(time)))}
                             className={styles.editableTime}
                             isEditable={isUserOwnerOrMentor}
                           />
@@ -460,11 +460,11 @@ export const Columns = (props: ColumnsProps) => {
                           position={PositionTooltip.RIGHT}
                           content={`Estimated${Symbols.NO_BREAK_SPACE}time for the plan`}
                         >
-                          <EditableText
-                            text={plan.estimationTime}
+                          <EditableValue
+                            value={plan.estimationTime}
                             type="number"
                             max={MAX_TIME}
-                            onChangeFinish={(estimationTime) => updatePlanTime(plan, getValidatedTime(estimationTime))}
+                            onChangeFinish={(estimationTime) => updatePlanTime(plan, getValidatedTime(Number(estimationTime)))}
                             className={styles.editableTime}
                             isEditable={plan.ownerUuid === user?.uuid}
                           />