Issue #1142: format number input (#1194)

* Issue #1142: format number input * issue #1142: handle case defaultValue is undefined * issue #1142: handle case defaultValue is undefined
nashtech-garage · Oct 16, 2024 · e831407 · e831407
1 parent c6405a4
commit e831407
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/backoffice/common/items/Input.tsx b/backoffice/common/items/Input.tsx
@@ -1,5 +1,6 @@
 import { HTMLInputTypeAttribute } from 'react';
 import { FieldValues, Path, RegisterOptions, UseFormRegister } from 'react-hook-form';
+import { NumericFormat } from 'react-number-format';
 
 type InputProps<T extends FieldValues> = {
   labelText: string;
@@ -13,6 +14,10 @@ type InputProps<T extends FieldValues> = {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
+type NumberFormatProps<T extends FieldValues> = InputProps<T> & {
+  setValue: (field: Path<T>, value: any) => void;
+};
+
 type CheckProps<T extends FieldValues> = InputProps<T> & {
   defaultChecked?: any;
 };
@@ -60,6 +65,38 @@ export const Input = <T extends FieldValues>({
   </div>
 );
 
+export const NumberFormatInput = <T extends FieldValues>({
+  labelText,
+  field,
+  register,
+  registerOptions = {},
+  error,
+  defaultValue,
+  setValue,
+  disabled = false,
+}: NumberFormatProps<T>) => (
+  <div className="mb-3">
+    <label className="form-label" htmlFor={field}>
+      {labelText} {registerOptions?.required && <span className="text-danger">*</span>}
+    </label>
+    <NumericFormat
+      id={field}
+      className={`form-control ${error ? 'border-danger' : ''}`}
+      defaultValue={defaultValue ? Number(defaultValue) : 0}
+      allowLeadingZeros={false}
+      disabled={disabled}
+      fixedDecimalScale
+      {...register(field, registerOptions)}
+      thousandSeparator=","
+      onValueChange={(values) => {
+        const { value } = values;
+        setValue(field, value);
+      }}
+    />
+    <p className="error-field mt-1">{error}</p>
+  </div>
+);
+
 export const TextArea = <T extends FieldValues>({
   labelText,
   field,

diff --git a/backoffice/modules/catalog/components/ProductGeneralInformation.tsx b/backoffice/modules/catalog/components/ProductGeneralInformation.tsx
@@ -6,7 +6,7 @@ import slugify from 'slugify';
 
 import { TaxClass } from '@taxModels/TaxClass';
 import { getTaxClasses } from '@taxServices/TaxClassService';
-import { CheckBox, Input, Select, TextArea } from '../../../common/items/Input';
+import { CheckBox, Input, NumberFormatInput, Select, TextArea } from '../../../common/items/Input';
 import { OptionSelect } from '../../../common/items/OptionSelect';
 import TextEditor from '../../../common/items/TextEditor';
 import { Brand } from '../models/Brand';
@@ -123,11 +123,12 @@ const ProductGeneralInformation = ({ register, errors, setValue }: Props) => {
           setValue('specification', value);
         }}
       />
-      <Input
+      <NumberFormatInput
         labelText="Price"
         field="price"
         defaultValue={product?.price}
         register={register}
+        setValue={setValue}
         error={errors.price?.message}
         type="number"
         registerOptions={{
@@ -141,7 +142,7 @@ const ProductGeneralInformation = ({ register, errors, setValue }: Props) => {
         field="weight"
         defaultValue={product?.weight}
         register={register}
-        error={errors.price?.message}
+        error={errors.weight?.message}
         type="number"
         registerOptions={{
           required: { value: true, message: 'Product weight is required' },
@@ -170,7 +171,7 @@ const ProductGeneralInformation = ({ register, errors, setValue }: Props) => {
         field="length"
         defaultValue={product?.length}
         register={register}
-        error={errors.price?.message}
+        error={errors.length?.message}
         type="number"
         registerOptions={{
           required: { value: true, message: 'Product length is required' },
@@ -183,7 +184,7 @@ const ProductGeneralInformation = ({ register, errors, setValue }: Props) => {
         field="width"
         defaultValue={product?.width}
         register={register}
-        error={errors.price?.message}
+        error={errors.width?.message}
         type="number"
         registerOptions={{
           required: { value: true, message: 'Product width is required' },
@@ -196,7 +197,7 @@ const ProductGeneralInformation = ({ register, errors, setValue }: Props) => {
         field="height"
         defaultValue={product?.height}
         register={register}
-        error={errors.price?.message}
+        error={errors.height?.message}
         type="number"
         registerOptions={{
           required: { value: true, message: 'Product height is required' },

diff --git a/backoffice/package-lock.json b/backoffice/package-lock.json
diff --git a/backoffice/package.json b/backoffice/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.35.0",
     "react-icons": "^4.4.0",
+    "react-number-format": "^5.4.2",
     "react-paginate": "^8.1.3",
     "react-quill": "^2.0.0",
     "react-select": "^5.7.0",