NAS-111962 / 22.12 / NAS-111962: Not an interger error in Transfers field in Sync Cloud ta… (#7070)

* NAS-111962: Not an interger error in Transfers field in Sync Cloud task FIX

* NAS-111962: small refactoring

* NAS-111962: small refactoring #2

src/app/modules/entity/entity-form/components/form-input/form-input.component.html

-<div id="{{config.name}}" class="dynamic-field form-input form-element" [formGroup]="group" [ngClass]="fieldShow" [class.has-pwtoggle]="config.togglePw" [class.has-tooltip]="config.tooltip" *ngIf="!config['isHidden']">
-
+<div
+  *ngIf="!config['isHidden']"
+  id="{{ config.name }}"
+  class="dynamic-field form-input form-element"
+  [formGroup]="group"
+  [ngClass]="fieldShow"
+  [class.has-pwtoggle]="config.togglePw"
+  [class.has-tooltip]="config.tooltip"
+>
   <div *ngIf="config.placeholder" class="label-container">
     <label class="label input-text">
-      {{config.placeholder | translate}}
+      {{ config.placeholder | translate }}
       <span *ngIf="config.required">*</span>
     </label>
-    <ix-tooltip *ngIf="config.tooltip" [header]="config.placeholder" [message]="config.tooltip"></ix-tooltip>
+    <ix-tooltip
+      *ngIf="config.tooltip"
+      [header]="config.placeholder"
+      [message]="config.tooltip"
+    ></ix-tooltip>
   </div>
 
   <!-- need to prevent browser autofill :/ -->
-  <input name="DummyUsername" type="text">
-  <input name="DummyPassword" type="password">
+  <input name="DummyUsername" type="text" />
+  <input name="DummyPassword" type="password" />
 
-  <div class="full-width" [ngClass]="{'has_toggle_pw': config.togglePw}" *ngIf="config.inputType != 'file' else elseBlock">
+  <div
+    *ngIf="config.inputType != 'file'; else elseBlock"
+    class="full-width"
+    [ngClass]="{ has_toggle_pw: config.togglePw }"
+  >
     <mat-spinner
-			diameter='30'
-			class="form-input-spinner"
-			id="{{config.name}}_form-input-spinner"
-			*ngIf="config.isLoading">
+      diameter="30"
+      class="form-input-spinner"
+      id="{{ config.name }}_form-input-spinner"
+      *ngIf="config.isLoading"
+    >
     </mat-spinner>
     <div *ngIf="config.maskValue">
-      <p>{{'Enter' | translate}} <strong>{{config.maskValue}}</strong> {{'below to confirm.' | translate}}</p>
-      <p [ngStyle]="{'position': 'relative', 'top':'15px', 'opacity': '.38'}">{{config.maskValue}}</p>
+      <p>
+        {{ 'Enter' | translate }} <strong>{{ config.maskValue }}</strong>
+        {{ 'below to confirm.' | translate }}
+      </p>
+      <p [ngStyle]="{ position: 'relative', top: '15px', opacity: '.38' }">
+        {{ config.maskValue }}
+      </p>
     </div>
     <div class="input-container">
-      <span *ngIf="config.searchable" class="searchable"><mat-icon>search</mat-icon></span>
+      <span *ngIf="config.searchable" class="searchable"
+        ><mat-icon>search</mat-icon></span
+      >
       <input
-        [ngStyle]="{'padding-left': config.searchable ? '2rem' : '', 'padding-right': shouldShowResetInput() ? '2rem': ''}"
+        autocomplete="new-password"
+        ix-auto
+        ix-auto-type="input"
+        ix-auto-identifier="{{ config.placeholder }}"
+        [ngStyle]="{
+          'padding-left': config.searchable ? '2rem' : '',
+          'padding-right': shouldShowResetInput() ? '2rem' : ''
+        }"
         [type]="config.inputType ? config.inputType : 'text'"
-				[attr.value]="config.value"
-				[formControlName]="config.name"
-				[readonly]="config.readonly"
-				[required]="config.required"
-				[max]="config.max"
-				[min]="config.min"
-				(blur)="blurEvent()"
-				autocomplete="new-password"
-				ix-auto
-				ix-auto-type="input"
-				ix-auto-identifier="{{config.placeholder}}"
-				(change)="valueChange()"
-				(paste)="onPaste($event)"
-				(input)="onInput()">
+        [attr.value]="config.value"
+        [formControlName]="config.name"
+        [readonly]="config.readonly"
+        [required]="config.required"
+        [max]="config.max"
+        [min]="config.min"
+        (blur)="blurEvent()"
+        (change)="valueChange()"
+        (paste)="onPaste($event)"
+        (input)="onInput($event)"
+      />
       <span *ngIf="shouldShowResetInput()" class="reset-input">
-        <mat-icon (click)="resetInput()" fontSet="mdi-set" fontIcon="mdi-close-circle"></mat-icon>
+        <mat-icon
+          fontSet="mdi-set"
+          fontIcon="mdi-close-circle"
+          (click)="resetInput()"
+        ></mat-icon>
       </span>
     </div>
     <button
       *ngIf="config.togglePw"
-      mat-icon-button type="button"
+      mat-icon-button
+      type="button"
       class="toggle_pw"
+      ix-auto
+      ix-auto-type="button"
+      ix-auto-identifier="{{ config.name }}_toggle-pw"
       (click)="togglePassword()"
-  		ix-auto
-  		ix-auto-type="button"
-  		ix-auto-identifier="{{config.name}}_toggle-pw">
-      <i class="material-icons" matTooltip="Hide" *ngIf="showPassword">visibility</i>
-      <i class="material-icons" matTooltip="Show" *ngIf="!showPassword">visibility_off</i>
+    >
+      <i class="material-icons" matTooltip="Hide" *ngIf="showPassword"
+        >visibility</i
+      >
+      <i class="material-icons" matTooltip="Show" *ngIf="!showPassword"
+        >visibility_off</i
+      >
     </button>
   </div>
+
   <ng-template #elseBlock>
-    <span [style.margin-right.px]="10">{{config.placeholder | translate}}</span>
-    <input type="file" id="fileInput" (change)="changeListener($event)"/>
+    <span [style.margin-right.px]="10">{{
+      config.placeholder | translate
+    }}</span>
+    <input type="file" id="fileInput" (change)="changeListener($event)" />
   </ng-template>
+
   <div class="margin-for-error">
-    <ix-form-errors [control]="group.controls[config.name]" [config]="config"></ix-form-errors>
-    <mat-error *ngIf="config['hasErrors']"><div [innerHTML]="config['errors']"></div></mat-error>
-    <mat-error *ngIf="config.warnings"><div [innerHTML]="config.warnings | translate"></div></mat-error>
-    <mat-hint *ngIf="config.hint"><div [innerHTML]="config.hint | translate"></div></mat-hint>
+    <ix-form-errors
+      [control]="group.controls[config.name]"
+      [config]="config"
+    ></ix-form-errors>
+    <mat-error *ngIf="config['hasErrors']">
+      <div [innerHTML]="config['errors']"></div
+    ></mat-error>
+    <mat-error *ngIf="config.warnings"
+      ><div [innerHTML]="config.warnings | translate"></div
+    ></mat-error>
+    <mat-hint *ngIf="config.hint"
+      ><div [innerHTML]="config.hint | translate"></div
+    ></mat-hint>
   </div>
 </div>

src/app/modules/entity/entity-form/components/form-input/form-input.component.ts

-import {
-  Component, ViewChild,
-} from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import globalHelptext from 'app/helptext/global-helptext';
@@ -10,7 +8,10 @@ import { EntityFormService } from 'app/modules/entity/entity-form/services/entit
 
 @Component({
   templateUrl: './form-input.component.html',
-  styleUrls: ['./form-input.component.scss', '../dynamic-field/dynamic-field.scss'],
+  styleUrls: [
+    './form-input.component.scss',
+    '../dynamic-field/dynamic-field.scss',
+  ],
 })
 export class FormInputComponent implements Field {
   @ViewChild('fileInput', { static: true }) fileInput: HTMLInputElement;
@@ -21,9 +22,10 @@ export class FormInputComponent implements Field {
   showPassword = false;
   private hasPasteEvent = false;
 
-  constructor(public translate: TranslateService,
-    private formService: EntityFormService) {
-  }
+  constructor(
+    public translate: TranslateService,
+    private formService: EntityFormService,
+  ) {}
 
   changeListener($event: Event): void {
     this.readFile($event.target as HTMLInputElement);
@@ -81,34 +83,47 @@ export class FormInputComponent implements Field {
     }
 
     if (this.config.inputType === 'number') {
-      const numberValue = this.group.controls[this.config.name].value * 1;
-      this.group.controls[this.config.name].setValue(numberValue);
+      const numberValue = this.group.controls[this.config.name].value;
+
       if (this.config.min !== undefined && numberValue < this.config.min) {
         this.group.controls[this.config.name].setErrors({
           manualValidateError: true,
-          manualValidateErrorMsg: globalHelptext.invalidInputValueWithMin + String(this.config.min),
+          manualValidateErrorMsg:
+            globalHelptext.invalidInputValueWithMin + String(this.config.min),
         });
       }
 
       if (this.config.max !== undefined && numberValue > this.config.max) {
         this.group.controls[this.config.name].setErrors({
           manualValidateError: true,
-          manualValidateErrorMsg: globalHelptext.invalidInputValueWithMax + String(this.config.max),
+          manualValidateErrorMsg:
+            globalHelptext.invalidInputValueWithMax + String(this.config.max),
         });
       }
     }
   }
 
   hasValue(): boolean {
-    return this.group.controls[this.config.name].value && this.group.controls[this.config.name].value.toString().length;
+    return (
+      this.group.controls[this.config.name].value
+      && this.group.controls[this.config.name].value.toString().length
+    );
   }
 
   shouldShowResetInput(): boolean {
-    return this.hasValue() && !this.config.readonly && !this.config.togglePw && this.config.inputType !== 'password' && !this.config.disabled;
+    return (
+      this.hasValue()
+      && !this.config.readonly
+      && !this.config.togglePw
+      && this.config.inputType !== 'password'
+      && !this.config.disabled
+    );
   }
 
   resetInput(): void {
-    this.group.controls[this.config.name].setValue('');
+    this.group.controls[this.config.name].setValue(
+      this.config.inputType === 'number' ? null : '',
+    );
   }
 
   onPaste(event: ClipboardEvent): void {
@@ -126,7 +141,25 @@ export class FormInputComponent implements Field {
     }
   }
 
-  onInput(): void {
+  onInput(event: Event): void {
+    const inputValue = (event as MessageEvent).data;
+
+    if (this.config.inputType === 'number') {
+      if (this.config.errors) {
+        this.config.errors = null;
+      }
+
+      if (!this.shouldShowResetInput() && !inputValue !== null) {
+        this.group.controls[this.config.name].setErrors({
+          pattern: true,
+        });
+      }
+
+      if (inputValue === null) {
+        this.group.controls[this.config.name].setValue(null);
+      }
+    }
+
     if (this.hasPasteEvent) {
       this.hasPasteEvent = false;
     } else {

src/assets/i18n/uk.json

@@ -20,7 +20,7 @@
   "LDAP": "",
   "LUN ID": "",
   "MTU": "",
-  "Manage Advanced Settings": "",
+  "Manage Advanced Settings": "Керувати розширеними налаштуваннями",
   "N/A": "",
   "NAA": "",
   "NFS": "",
@@ -48,7 +48,7 @@
   "Share Attached": "",
   "Sysctl": "",
   "TLS Crypt Auth": "",
-  "This dataset is used by the system": "",
+  "This dataset is used by the system": "Цей набір даних використовується системою",
   "TrueCommand": "",
   "UID": "",
   "UPS": "",
@@ -60,7 +60,7 @@
   "WebDAV Share": "",
   "Webdav": "",
   "ZFS Health": "",
-  "Zvol Space Management": "",
+  "Zvol Space Management": "Керування простором Zvol",
   " Please click the button below to add {item}.": "Натисніть кнопку нижче, щоб додати {item}.",
   " When the <b>UPS Mode</b> is set to <i>slave</i>. Enter the open network port number of the UPS <i>Master</i> system. The default port is <i>3493</i>.": "Коли <b>Режим ДБЖ</b> встановлений у <i>відомий</i>. Введіть номер відкритого мережного порту <і>провідної</i> ДБЖ. Стандартний порт - <i>3493</i>.",
   " bytes.": "байт.",