From 0c8bf122498e2c20a49258c55600099b636f70c5 Mon Sep 17 00:00:00 2001 From: Alex89198900 Date: Thu, 8 Feb 2024 20:11:11 +0200 Subject: [PATCH 1/9] fix: #419 formatting numbers in plans and jobs" git commit --m fix: --- mw-webapp/src/component/input/Input.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/mw-webapp/src/component/input/Input.tsx b/mw-webapp/src/component/input/Input.tsx index 1c3138269..8ec7e42a2 100644 --- a/mw-webapp/src/component/input/Input.tsx +++ b/mw-webapp/src/component/input/Input.tsx @@ -1,4 +1,4 @@ -import {HTMLInputTypeAttribute} from "react"; +import {HTMLInputTypeAttribute, MutableRefObject, useRef} from "react"; import clsx from "clsx"; import {InputMode} from "src/component/input/InputMode"; import styles from "src/component/input/Input.module.scss"; @@ -69,16 +69,19 @@ interface InputProps { * Input component */ export const Input = (props: InputProps) => { + const refInput = useRef() as MutableRefObject; /** * Event handler for the input change event */ const onChange = (event: React.ChangeEvent) => { props.onChange(event.target.value); + refInput.current.value = ""; }; return ( Date: Sat, 10 Feb 2024 13:53:00 +0200 Subject: [PATCH 2/9] refactor: #419 formatter --- .../src/component/editableText/EditableText.tsx | 3 ++- mw-webapp/src/component/input/Input.tsx | 5 +---- mw-webapp/src/utils/FormatterUtils.ts | 15 +++++++++++++++ 3 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 mw-webapp/src/utils/FormatterUtils.ts diff --git a/mw-webapp/src/component/editableText/EditableText.tsx b/mw-webapp/src/component/editableText/EditableText.tsx index 788fdcf35..20b35a295 100644 --- a/mw-webapp/src/component/editableText/EditableText.tsx +++ b/mw-webapp/src/component/editableText/EditableText.tsx @@ -2,6 +2,7 @@ import {HTMLInputTypeAttribute, useState} from "react"; import clsx from "clsx"; import {renderSpan} from "src/component/editableText/renderSpan"; import {Input} from "src/component/input/Input"; +import {FormatterUtils} from "src/utils/FormatterUtils"; import {KeySymbols} from "src/utils/KeySymbols"; import styles from "src/component/editableText/EditableText.module.scss"; @@ -72,7 +73,7 @@ export const EditableText = (props: EditableTextProps * Check type of coming value and convert it to Number if need to use input with type "number" */ const setValue = (value: string) => { - const number = Number(value) ?? 0; + const number = FormatterUtils.defaultFormatter(value); const updatedValue = props.type === "number" ? number : value; setText(updatedValue as T); }; diff --git a/mw-webapp/src/component/input/Input.tsx b/mw-webapp/src/component/input/Input.tsx index 8ec7e42a2..1c3138269 100644 --- a/mw-webapp/src/component/input/Input.tsx +++ b/mw-webapp/src/component/input/Input.tsx @@ -1,4 +1,4 @@ -import {HTMLInputTypeAttribute, MutableRefObject, useRef} from "react"; +import {HTMLInputTypeAttribute} from "react"; import clsx from "clsx"; import {InputMode} from "src/component/input/InputMode"; import styles from "src/component/input/Input.module.scss"; @@ -69,19 +69,16 @@ interface InputProps { * Input component */ export const Input = (props: InputProps) => { - const refInput = useRef() as MutableRefObject; /** * Event handler for the input change event */ const onChange = (event: React.ChangeEvent) => { props.onChange(event.target.value); - refInput.current.value = ""; }; return ( Date: Tue, 13 Feb 2024 22:19:26 +0200 Subject: [PATCH 3/9] refactor: #419 input --- .../component/editableText/EditableText.tsx | 23 +++++++++++++++---- mw-webapp/src/component/input/Input.tsx | 15 ++++++++++-- mw-webapp/src/utils/FormatterUtils.ts | 8 +++---- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/mw-webapp/src/component/editableText/EditableText.tsx b/mw-webapp/src/component/editableText/EditableText.tsx index 20b35a295..87a6e8d78 100644 --- a/mw-webapp/src/component/editableText/EditableText.tsx +++ b/mw-webapp/src/component/editableText/EditableText.tsx @@ -1,8 +1,8 @@ -import {HTMLInputTypeAttribute, useState} from "react"; +import {HTMLInputTypeAttribute, useEffect, useState} from "react"; import clsx from "clsx"; import {renderSpan} from "src/component/editableText/renderSpan"; import {Input} from "src/component/input/Input"; -import {FormatterUtils} from "src/utils/FormatterUtils"; +import {FormatterInputValue} from "src/utils/FormatterUtils"; import {KeySymbols} from "src/utils/KeySymbols"; import styles from "src/component/editableText/EditableText.module.scss"; @@ -73,9 +73,21 @@ export const EditableText = (props: EditableTextProps * Check type of coming value and convert it to Number if need to use input with type "number" */ const setValue = (value: string) => { - const number = FormatterUtils.defaultFormatter(value); - const updatedValue = props.type === "number" ? number : value; - setText(updatedValue as T); + const checkedValue = value || 0; + setText(checkedValue as T); + }; + + /** + * Formatting value entered into the input + */ + const formatterValue = (value: string|number) => { + const formattedValue = FormatterInputValue.defaultFormatter(value); + const updatedValue = props.type === "number" ? formattedValue : value; + useEffect(() => { + setText(updatedValue as T); + }, [ updatedValue]); + + return updatedValue; }; /** @@ -83,6 +95,7 @@ export const EditableText = (props: EditableTextProps */ const renderInput = () => ( void; + /** + * Formatting value entered into the input + */ + formatter?: (stateValue: string | number) => string | number; + + /** + * Parsing formated value + */ + parser?: (rawValue: string) => string; + } /** @@ -74,12 +84,13 @@ export const Input = (props: InputProps) => { * Event handler for the input change event */ const onChange = (event: React.ChangeEvent) => { - props.onChange(event.target.value); + const parsedValue = props.parser ? props.parser(event.target.value) : event.target.value; + props.onChange(parsedValue); }; return ( Date: Wed, 14 Feb 2024 18:07:09 +0200 Subject: [PATCH 4/9] refactor: #419 formatter --- mw-webapp/src/utils/FormatterUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mw-webapp/src/utils/FormatterUtils.ts b/mw-webapp/src/utils/FormatterUtils.ts index 9831888b6..156d8ac9b 100644 --- a/mw-webapp/src/utils/FormatterUtils.ts +++ b/mw-webapp/src/utils/FormatterUtils.ts @@ -8,8 +8,8 @@ export class FormatterInputValue { /** * Checking for zero and formatting the value */ - public static defaultFormatter(value: string| number) { - return typeof value === "string" && value.startsWith("0") ? value.slice(FIRST_INDEX) : Number(value); + public static defaultFormatter(value: string | number) { + return typeof value === "string" && value.startsWith("0") ? value.slice(FIRST_INDEX) : value; } } From 33a1346510ad9682f0e4810cc4a0eccf5f9060a5 Mon Sep 17 00:00:00 2001 From: Alex89198900 Date: Wed, 14 Feb 2024 19:25:43 +0200 Subject: [PATCH 5/9] fix: #419 variables name --- mw-webapp/src/utils/FormatterUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mw-webapp/src/utils/FormatterUtils.ts b/mw-webapp/src/utils/FormatterUtils.ts index 156d8ac9b..b76a356f1 100644 --- a/mw-webapp/src/utils/FormatterUtils.ts +++ b/mw-webapp/src/utils/FormatterUtils.ts @@ -1,4 +1,4 @@ -const FIRST_INDEX = 1; +const SECOND_INDEX = 1; /** * Formatter utils @@ -9,7 +9,7 @@ export class FormatterInputValue { * Checking for zero and formatting the value */ public static defaultFormatter(value: string | number) { - return typeof value === "string" && value.startsWith("0") ? value.slice(FIRST_INDEX) : value; + return typeof value === "string" && value.startsWith("0") ? value.slice(SECOND_INDEX) : value; } } From 7a38ec265188bd5519a35ed0c6ed49adf0b9414c Mon Sep 17 00:00:00 2001 From: Ekaterina1994 Date: Thu, 15 Feb 2024 18:18:10 +0300 Subject: [PATCH 6/9] fix: #419 fixed formatter for input --- .../component/editableText/EditableText.tsx | 42 +++++++------------ mw-webapp/src/component/input/Input.tsx | 34 +++++++++++---- mw-webapp/src/component/input/formatters.ts | 21 ++++++++++ mw-webapp/src/component/input/parsers.ts | 20 +++++++++ .../goalMetricsBlock/GoalMetricItem.tsx | 6 +-- .../reportsColumns/ReportsColumns.tsx | 14 +++---- mw-webapp/src/utils/FormatterUtils.ts | 15 ------- 7 files changed, 90 insertions(+), 62 deletions(-) create mode 100644 mw-webapp/src/component/input/formatters.ts create mode 100644 mw-webapp/src/component/input/parsers.ts delete mode 100644 mw-webapp/src/utils/FormatterUtils.ts diff --git a/mw-webapp/src/component/editableText/EditableText.tsx b/mw-webapp/src/component/editableText/EditableText.tsx index 87a6e8d78..38a4a568b 100644 --- a/mw-webapp/src/component/editableText/EditableText.tsx +++ b/mw-webapp/src/component/editableText/EditableText.tsx @@ -1,8 +1,8 @@ -import {HTMLInputTypeAttribute, useEffect, useState} from "react"; +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 {FormatterInputValue} from "src/utils/FormatterUtils"; import {KeySymbols} from "src/utils/KeySymbols"; import styles from "src/component/editableText/EditableText.module.scss"; @@ -12,9 +12,9 @@ import styles from "src/component/editableText/EditableText.module.scss"; interface EditableTextProps { /** - * Cell item's text + * Cell item's value */ - text: T; + value: T; /** * Function that update element on Enter click or unfocused @@ -48,15 +48,15 @@ interface EditableTextProps { /** * Render Input or span depend on client actions */ -export const EditableText = (props: EditableTextProps) => { +export const EditableValue = (props: EditableTextProps) => { const [isEditing, setIsEditing] = useState(false); - const [text, setText] = useState(props.text); + const [value, setValue] = useState(props.value); /** * HandleChangeFinish */ const handleChangeFinish = () => { - props.onChangeFinish(text); + props.onChangeFinish(value); setIsEditing(false); }; @@ -70,24 +70,10 @@ export const EditableText = (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 checkedValue = value || 0; - setText(checkedValue as T); - }; - - /** - * Formatting value entered into the input - */ - const formatterValue = (value: string|number) => { - const formattedValue = FormatterInputValue.defaultFormatter(value); - const updatedValue = props.type === "number" ? formattedValue : value; - useEffect(() => { - setText(updatedValue as T); - }, [ updatedValue]); - - return updatedValue; + const updateValue = (updatedValue: string | number) => { + setValue(updatedValue as T); }; /** @@ -95,12 +81,12 @@ export const EditableText = (props: EditableTextProps */ const renderInput = () => ( ); @@ -115,7 +101,7 @@ export const EditableText = (props: EditableTextProps > {isEditing ? renderInput() - : renderSpan(text) + : renderSpan(value) } ); diff --git a/mw-webapp/src/component/input/Input.tsx b/mw-webapp/src/component/input/Input.tsx index 3fd860de9..34a389ae0 100644 --- a/mw-webapp/src/component/input/Input.tsx +++ b/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 { /** * Input's value */ - value: string | number; + value: T; /** * Input's type (what type of value is expected) @@ -61,30 +62,45 @@ interface InputProps { /** * Tracks the value entered into the input */ - onChange: (value: string) => void; + onChange: (value: T) => void; /** - * Formatting value entered into the input + * Formatting value */ - formatter?: (stateValue: string | number) => string | number; + formatter?: (value: T) => T; /** - * Parsing formated value + * Parsing formatted value */ - parser?: (rawValue: string) => string; + parser?: (value: string) => T; } /** * Input component */ -export const Input = (props: InputProps) => { +export const Input = (props: InputProps) => { /** * Event handler for the input change event */ const onChange = (event: React.ChangeEvent) => { - const parsedValue = props.parser ? props.parser(event.target.value) : 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; + } + default: { + parsedValue = props.parser + ? props.parser(event.target.value) + : ParserInputValue.defaultTextParser(event.target.value); + break; + } + } props.onChange(parsedValue); }; diff --git a/mw-webapp/src/component/input/formatters.ts b/mw-webapp/src/component/input/formatters.ts new file mode 100644 index 000000000..db3579eda --- /dev/null +++ b/mw-webapp/src/component/input/formatters.ts @@ -0,0 +1,21 @@ +/** + * 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 = typeof value === "number" && valueStringified.startsWith("0") + ? valueStringified.slice(SECOND_INDEX) + : value; + + return formattedValue; + } + +} + diff --git a/mw-webapp/src/component/input/parsers.ts b/mw-webapp/src/component/input/parsers.ts new file mode 100644 index 000000000..0e804dbf4 --- /dev/null +++ b/mw-webapp/src/component/input/parsers.ts @@ -0,0 +1,20 @@ +/** + * Parsers + */ +export class ParserInputValue { + + /** + * Default text parser + */ + public static defaultTextParser(value: string): T { + return value as T; + } + + /** + * Default number parser + */ + public static defaultNumberParser(value: string): T { + return Number(value) as T; + } + +} diff --git a/mw-webapp/src/logic/wayPage/goalMetricsBlock/GoalMetricItem.tsx b/mw-webapp/src/logic/wayPage/goalMetricsBlock/GoalMetricItem.tsx index efda49763..fbcf0a22c 100644 --- a/mw-webapp/src/logic/wayPage/goalMetricsBlock/GoalMetricItem.tsx +++ b/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()})} /> - props.updateMetric({...props.metric, description})} isEditable={props.isEditable} /> diff --git a/mw-webapp/src/logic/wayPage/reportsTable/reportsColumns/ReportsColumns.tsx b/mw-webapp/src/logic/wayPage/reportsTable/reportsColumns/ReportsColumns.tsx index 73ba36f66..3af98f834 100644 --- a/mw-webapp/src/logic/wayPage/reportsTable/reportsColumns/ReportsColumns.tsx +++ b/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`} > - - 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`} > - updatePlanTime(plan, getValidatedTime(estimationTime))} + onChangeFinish={(estimationTime) => updatePlanTime(plan, getValidatedTime(Number(estimationTime)))} className={styles.editableTime} isEditable={plan.ownerUuid === user?.uuid} /> diff --git a/mw-webapp/src/utils/FormatterUtils.ts b/mw-webapp/src/utils/FormatterUtils.ts deleted file mode 100644 index b76a356f1..000000000 --- a/mw-webapp/src/utils/FormatterUtils.ts +++ /dev/null @@ -1,15 +0,0 @@ -const SECOND_INDEX = 1; - -/** - * Formatter utils - */ -export class FormatterInputValue { - - /** - * Checking for zero and formatting the value - */ - public static defaultFormatter(value: string | number) { - return typeof value === "string" && value.startsWith("0") ? value.slice(SECOND_INDEX) : value; - } - -} From 6c8b32de7b66000414dd9069e175434381bd08db Mon Sep 17 00:00:00 2001 From: Ekaterina1994 Date: Fri, 16 Feb 2024 10:29:51 +0300 Subject: [PATCH 7/9] fix: #419 fix --- mw-webapp/src/component/input/Input.tsx | 1 + mw-webapp/src/component/input/formatters.ts | 9 ++++++++- mw-webapp/src/component/userCard/UserCard.tsx | 2 +- mw-webapp/src/component/wayCard/WayCard.module.scss | 2 +- .../src/component/wayCard/wayTag/WayTag.module.scss | 2 +- 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/mw-webapp/src/component/input/Input.tsx b/mw-webapp/src/component/input/Input.tsx index 34a389ae0..dc07ed780 100644 --- a/mw-webapp/src/component/input/Input.tsx +++ b/mw-webapp/src/component/input/Input.tsx @@ -94,6 +94,7 @@ export const Input = (props: InputProps) => { : ParserInputValue.defaultNumberParser(event.target.value); break; } + case "string": default: { parsedValue = props.parser ? props.parser(event.target.value) diff --git a/mw-webapp/src/component/input/formatters.ts b/mw-webapp/src/component/input/formatters.ts index db3579eda..4649512d6 100644 --- a/mw-webapp/src/component/input/formatters.ts +++ b/mw-webapp/src/component/input/formatters.ts @@ -10,12 +10,19 @@ export class FormatterInputValue { const SECOND_INDEX = 1; const valueStringified = value.toString(); - const formattedValue = typeof value === "number" && valueStringified.startsWith("0") + const formattedValue = valueStringified.startsWith("0") ? valueStringified.slice(SECOND_INDEX) : value; return formattedValue; } + /** + * Default string formatter + */ + public static defaultStringFormatter(value: string) { + return value; + } + } diff --git a/mw-webapp/src/component/userCard/UserCard.tsx b/mw-webapp/src/component/userCard/UserCard.tsx index d413d1dc8..9a45f4a7f 100644 --- a/mw-webapp/src/component/userCard/UserCard.tsx +++ b/mw-webapp/src/component/userCard/UserCard.tsx @@ -28,7 +28,7 @@ export const UserCard = (props: UserCardProps) => { const navigate = useNavigate(); return ( - navigate(pages.way.getPath({uuid: props.userPreview.uuid}))}> + navigate(pages.user.getPath({uuid: props.userPreview.uuid}))}> diff --git a/mw-webapp/src/component/wayCard/WayCard.module.scss b/mw-webapp/src/component/wayCard/WayCard.module.scss index 40fcfdbd7..c44be62ef 100644 --- a/mw-webapp/src/component/wayCard/WayCard.module.scss +++ b/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; } diff --git a/mw-webapp/src/component/wayCard/wayTag/WayTag.module.scss b/mw-webapp/src/component/wayCard/wayTag/WayTag.module.scss index 493643d87..a6ffc3237 100644 --- a/mw-webapp/src/component/wayCard/wayTag/WayTag.module.scss +++ b/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); } From 80962c957a4658a512c2516310a67264fad142a7 Mon Sep 17 00:00:00 2001 From: Ekaterina1994 Date: Fri, 16 Feb 2024 10:41:13 +0300 Subject: [PATCH 8/9] fix: #419 fix --- mw-webapp/src/component/editableText/EditableText.tsx | 11 ++++++++++- mw-webapp/src/component/input/formatters.ts | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/mw-webapp/src/component/editableText/EditableText.tsx b/mw-webapp/src/component/editableText/EditableText.tsx index 38a4a568b..96a5bd096 100644 --- a/mw-webapp/src/component/editableText/EditableText.tsx +++ b/mw-webapp/src/component/editableText/EditableText.tsx @@ -76,12 +76,21 @@ export const EditableValue = (props: EditableTextProp setValue(updatedValue as T); }; + /** + * Get formatted value + */ + const getFormattedValue = (incomingValue: string | number) => { + return typeof incomingValue === "number" + ? FormatterInputValue.withNoFirstZero(incomingValue) + : FormatterInputValue.defaultStringFormatter(incomingValue); + }; + /** * Render input */ const renderInput = () => ( Date: Fri, 16 Feb 2024 11:04:57 +0300 Subject: [PATCH 9/9] fix: #419 fix --- mw-webapp/src/component/input/formatters.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/mw-webapp/src/component/input/formatters.ts b/mw-webapp/src/component/input/formatters.ts index e16095a2e..80f85d380 100644 --- a/mw-webapp/src/component/input/formatters.ts +++ b/mw-webapp/src/component/input/formatters.ts @@ -7,14 +7,7 @@ export class FormatterInputValue { * Delete first zero from input number */ public static withNoFirstZero(value: number) { - const SECOND_INDEX = 1; - const valueStringified = value.toString(); - - const formattedValue = valueStringified.startsWith("0") - ? valueStringified.slice(SECOND_INDEX) - : value; - - return formattedValue; + return String(value); } /**