Calculation/Elements: add number formatter

Components/Calculation/config/elements-props.ts

@@ -3,24 +3,37 @@ import DownloadOutlined from 'Elements/icons/DownloadOutlined';
 import date from 'tools/date';
 import type { ElementsProps } from './elements-components';
 
+function parser(value?: string) {
+  const normalized = (value || '0').replace(/\s/g, '').replaceAll(',', '.');
+
+  return Number.parseFloat(normalized);
+}
+const formatter = (value?: number) => Intl.NumberFormat('ru').format(value || 0);
+
 const props: Partial<ElementsProps> = {
   tbxLeaseObjectPrice: {
     min: 0,
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
+    parser,
+    formatter,
   },
   tbxLeaseObjectPriceWthtVAT: {
     min: 0,
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
+    parser,
+    formatter,
   },
   tbxVATInLeaseObjectPrice: {
     min: 0,
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
+    parser,
+    formatter,
   },
   tbxEngineHours: {
     min: 0,
@@ -33,7 +46,8 @@ const props: Partial<ElementsProps> = {
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxSupplierDiscountPerc: {
@@ -62,7 +76,8 @@ const props: Partial<ElementsProps> = {
     min: 0,
     max: 50,
     precision: 4,
-
+    parser,
+    formatter,
     addonAfter: '%',
   },
   tbxFirstPaymentRub: {
@@ -70,7 +85,8 @@ const props: Partial<ElementsProps> = {
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxLastPaymentPerc: {
@@ -78,7 +94,8 @@ const props: Partial<ElementsProps> = {
     max: 70,
     step: 1,
     precision: 6,
-
+    parser,
+    formatter,
     addonAfter: '%',
   },
   tbxLastPaymentRub: {
@@ -86,7 +103,8 @@ const props: Partial<ElementsProps> = {
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxRedemptionPaymentSum: {
@@ -94,7 +112,8 @@ const props: Partial<ElementsProps> = {
     max: 2000,
     step: 1000,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxLeasingPeriod: {
@@ -129,6 +148,9 @@ const props: Partial<ElementsProps> = {
     min: 0,
     max: 1_000_000_000,
     step: 10_000,
+    parser,
+    formatter,
+    addonAfter: '₽',
   },
   selectLeaseObjectType: {
     showSearch: true,
@@ -165,6 +187,8 @@ const props: Partial<ElementsProps> = {
     max: 20_000,
     step: 10,
     precision: 2,
+    parser,
+    formatter,
     addonAfter: 'л.с.',
   },
   tbxEngineVolume: {
@@ -172,21 +196,29 @@ const props: Partial<ElementsProps> = {
     max: 99.9999,
     step: 0.5,
     precision: 4,
+    parser,
+    formatter,
     addonAfter: 'л',
   },
   tbxMaxMass: {
     min: 0,
     max: 999_999,
     step: 100,
+    parser,
+    formatter,
     addonAfter: 'кг',
   },
   tbxCountSeats: {
     min: 0,
     max: 2000,
+    parser,
+    formatter,
   },
   tbxMaxSpeed: {
     min: 0,
     max: 2000,
+    parser,
+    formatter,
     addonAfter: 'км/ч',
   },
   selectDealer: {
@@ -237,6 +269,8 @@ const props: Partial<ElementsProps> = {
     max: MAX_FRANCHISE,
     step: 10_000,
     precision: 2,
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxInsAgeDrivers: {
@@ -270,11 +304,15 @@ const props: Partial<ElementsProps> = {
     min: 0,
     max: 34_999_990,
     step: 10_000,
+    parser,
+    formatter,
   },
   tbxMinPriceChange: {
     min: 0,
     max: 34_999_990,
     step: 10_000,
+    parser,
+    formatter,
   },
   tbxImporterRewardPerc: {
     min: 0,
@@ -287,6 +325,8 @@ const props: Partial<ElementsProps> = {
     max: 1_000_000_000,
     step: 10_000,
     precision: 2,
+    parser,
+    formatter,
   },
   selectLead: {
     showSearch: true,
@@ -306,7 +346,8 @@ const props: Partial<ElementsProps> = {
     max: 500,
     step: 0.0001,
     precision: 6,
-
+    parser,
+    formatter,
     addonAfter: '%',
   },
   linkDownloadKp: {
@@ -330,7 +371,8 @@ const props: Partial<ElementsProps> = {
     min: 0,
     step: 1000,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxVehicleTaxInYear: {
@@ -338,7 +380,8 @@ const props: Partial<ElementsProps> = {
     step: 100,
     max: 9_999_999,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   tbxVehicleTaxInLeasingPeriod: {
@@ -346,7 +389,8 @@ const props: Partial<ElementsProps> = {
     step: 100,
     max: 9_999_999,
     precision: 2,
-
+    parser,
+    formatter,
     addonAfter: '₽',
   },
   selectObjectRegionRegistration: {
@@ -355,7 +399,8 @@ const props: Partial<ElementsProps> = {
   tbxInsKaskoPriceLeasePeriod: {
     min: 0,
     precision: 2,
-
+    parser,
+    formatter,
     readOnly: true,
     controls: false,
   },