UI: Improve load units models

ui-ngx/src/app/shared/components/unit-input.component.ts

@@ -15,11 +15,18 @@
 ///
 
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms';
-import { Observable, of } from 'rxjs';
-import { searchUnits, Unit, unitBySymbol, units } from '@shared/models/unit.models';
-import { map, mergeMap, startWith, tap } from 'rxjs/operators';
+import { ControlValueAccessor, FormBuilder, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { EMPTY, Observable, of, ReplaySubject, switchMap } from 'rxjs';
+import { searchUnits, Unit, unitBySymbol } from '@shared/models/unit.models';
+import { map, mergeMap, share, startWith, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
+import { ResourcesService } from '@core/services/resources.service';
+
+const unitsModels = '/assets/model/units.json';
+
+interface UnitsJson {
+  units: Array<Unit>;
+}
 
 @Component({
   selector: 'tb-unit-input',
@@ -51,13 +58,12 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit {
 
   private dirty = false;
 
-  private translatedUnits: Array<Unit> = units.map(u => ({symbol: u.symbol,
-    name: this.translate.instant(u.name),
-    tags: u.tags}));
+  private fetchUnits$: Observable<Array<Unit>> = null;
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder,
+  constructor(private fb: FormBuilder,
+              private resourcesService: ResourcesService,
               private translate: TranslateService) {
   }
 
@@ -68,7 +74,6 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit {
         tap(value => {
           this.updateView(value);
         }),
-        startWith<string | Unit>(''),
         map(value => (value as Unit)?.symbol ? (value as Unit).symbol : (value ? value as string : '')),
         mergeMap(symbol => this.fetchUnits(symbol) )
       );
@@ -77,13 +82,15 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit {
   writeValue(symbol?: string): void {
     this.searchText = '';
     this.modelValue = symbol;
-    let res: Unit | string = null;
-    if (symbol) {
-      const unit = unitBySymbol(symbol);
-      res = unit ? unit : symbol;
-    }
-    this.unitsFormControl.patchValue(res, {emitEvent: false});
+    EMPTY.pipe(
+      startWith(''),
+      switchMap(() => symbol
+        ? this.unitsConstant().pipe(map(units => unitBySymbol(units, symbol) ?? symbol))
+        : of(null))
+    ).subscribe(result => {
+      this.unitsFormControl.patchValue(result, {emitEvent: false});
       this.dirty = true;
+    });
   }
 
   onFocus() {
@@ -114,12 +121,9 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit {
 
   fetchUnits(searchText?: string): Observable<Array<Unit | string>> {
     this.searchText = searchText;
-    const result = searchUnits(this.translatedUnits, searchText);
-    if (result.length) {
-      return of(result);
-    } else {
-      return of([]);
-    }
+    return this.unitsConstant().pipe(
+      map(unit => searchUnits(unit, searchText))
+    );
   }
 
   registerOnChange(fn: any): void {
@@ -145,4 +149,23 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit {
       this.unitInput.nativeElement.focus();
     }, 0);
   }
+
+  private unitsConstant(): Observable<Array<Unit>> {
+    if (this.fetchUnits$ === null) {
+      this.fetchUnits$ = this.resourcesService.loadJsonResource<UnitsJson>(unitsModels).pipe(
+        map(units => units.units.map(u => ({
+          symbol: u.symbol,
+          name: this.translate.instant(u.name),
+          tags: u.tags
+        }))),
+        share({
+          connector: () => new ReplaySubject(1),
+          resetOnError: false,
+          resetOnComplete: false,
+          resetOnRefCountZero: false
+        })
+      );
+    }
+    return this.fetchUnits$;
+  }
 }