[Closes #396] Updated xsd elements using select tags to use input with typeahead

angular/projects/shared/src/lib/components/xsd/elements/inputs/xsd-select-state.component.html

@@ -1,9 +1,21 @@
 <ng-container *ngIf="isDisplayOnly">
-  <ng-container *ngIf="enumeratedValue as val; else noVal">{{ val }}</ng-container>
+  <ng-container *ngIf="state as val; else noVal">{{ val.name }}</ng-container>
   <ng-template #noVal>&nbsp;</ng-template>
 </ng-container>
-<div *ngIf="!isDisplayOnly" class="select-wrapper">
-  <select [id]="formName" [name]="formName" [(ngModel)]="value" class="select-wrapper__select" [class.is-invalid]="isInvalid">
-    <option *ngFor="let state of STATES" [value]="state.id">{{ state.name }}</option>
-  </select>
-</div>
+<input
+  type="text"
+  class="form-control"
+  *ngIf="!isDisplayOnly"
+  #instance="ngbTypeahead"
+  [id]="formName"
+  [name]="formName"
+  [ngModel]="state"
+  (ngModelChange)="onChangeState($event)"
+  [ngbTypeahead]="search"
+  [inputFormatter]="formatter"
+  [resultFormatter]="formatter"
+  [editable]="false"
+  [selectOnExact]="true"
+  [class.is-invalid]="isInvalid"
+  (focus)="focus$.next($any($event).target.value)"
+  (click)="click$.next($any($event).target.value)" />

angular/projects/shared/src/lib/components/xsd/elements/inputs/xsd-select-state.component.ts

@@ -1,4 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, OperatorFunction, Subject, merge } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
 import { XsdElementBaseComponent } from '../xsd-element-base.component';
 
@@ -9,26 +13,53 @@ let STATES: any[];
   templateUrl: './xsd-select-state.component.html',
 })
 export class XsdSelectStateComponent extends XsdElementBaseComponent {
+  @ViewChild('instance', { static: true }) instance?: NgbTypeahead;
+  model: any;
+
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+
   STATES: any[] = [];
 
+  search: OperatorFunction<string, readonly any[]> = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance?.isPopupOpen()));
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map((term: string) =>
+        (term === '' ? STATES : STATES.filter((v) => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10),
+      ),
+    );
+  };
+
+  formatter = (x: any) => x.name;
+
   ngOnInit() {
     if (STATES) {
       this.STATES = STATES;
     } else {
-      this.api.states.index().subscribe((res) => {
+      this.api.states.index().subscribe((res: HttpResponse<any>) => {
         STATES = res.body;
+        Object.freeze(STATES);
         this.STATES = STATES;
       });
     }
   }
 
-  get enumeratedValue(): string | null {
-    let result: string | null = null;
+  get state(): any {
     for (const state of this.STATES) {
       if (state.id === this.value) {
-        return state.name;
+        return state;
       }
     }
-    return result;
+    return this.model;
+  }
+
+  onChangeState(state: any) {
+    this.model = state;
+    this.value = state?.id;
   }
 }

angular/projects/shared/src/lib/components/xsd/elements/inputs/xsd-select.component.html

@@ -2,16 +2,20 @@
   <ng-container *ngIf="enumeratedValue as val; else noVal">{{ val }}</ng-container>
   <ng-template #noVal>&nbsp;</ng-template>
 </ng-container>
-<div *ngIf="!isDisplayOnly" class="select-wrapper">
-  <select
-    [id]="formName"
-    [name]="formName"
-    [ngModel]="value"
-    (ngModelChange)="onChange($event)"
-    class="select-wrapper__select"
-    [class.is-invalid]="isInvalid">
-    <option *ngFor="let item of type['xs:restriction']['xs:enumeration']" [ngValue]="item._attributes.value">
-      {{ item['xs:annotation']['xs:documentation']._text }}
-    </option>
-  </select>
-</div>
+<input
+  type="text"
+  class="form-control"
+  *ngIf="!isDisplayOnly"
+  #instance="ngbTypeahead"
+  [id]="formName"
+  [name]="formName"
+  [ngModel]="selectValue"
+  (ngModelChange)="onChange($event)"
+  [ngbTypeahead]="search"
+  [inputFormatter]="formatter"
+  [resultFormatter]="formatter"
+  [editable]="false"
+  [selectOnExact]="true"
+  [class.is-invalid]="isInvalid"
+  (focus)="focus$.next($any($event).target.value)"
+  (click)="click$.next($any($event).target.value)" />

angular/projects/shared/src/lib/components/xsd/elements/inputs/xsd-select.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, OperatorFunction, Subject, merge } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
 import { XsdElementBaseComponent } from '../xsd-element-base.component';
 
@@ -7,35 +10,46 @@ import { XsdElementBaseComponent } from '../xsd-element-base.component';
   templateUrl: './xsd-select.component.html',
 })
 export class XsdSelectComponent extends XsdElementBaseComponent {
-  get minLength(): number | null {
-    if (this.type?.['xs:restriction']?.['xs:minLength']?._attributes?.value) {
-      return parseInt(this.type['xs:restriction']['xs:minLength']._attributes.value);
-    }
-    return null;
-  }
+  @ViewChild('instance', { static: true }) instance?: NgbTypeahead;
+  model: any;
 
-  get maxLength(): number | null {
-    if (this.type?.['xs:restriction']?.['xs:maxLength']?._attributes?.value) {
-      return parseInt(this.type['xs:restriction']['xs:maxLength']._attributes.value);
-    }
-    return null;
-  }
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+  search: OperatorFunction<string, readonly any[]> = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance?.isPopupOpen()));
+    const inputFocus$ = this.focus$;
 
-  get pattern(): string | null {
-    if (this.type?.['xs:restriction']?.['xs:pattern']?._attributes?.value) {
-      return this.type['xs:restriction']['xs:pattern']._attributes.value;
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map((term: string) =>
+        (term === ''
+          ? this.enumeration
+          : this.enumeration.filter((v) => v['xs:annotation']['xs:documentation']._text.toLowerCase().indexOf(term.toLowerCase()) > -1)
+        ).slice(0, 10),
+      ),
+    );
+  };
+
+  formatter = (x: any) => x['xs:annotation']['xs:documentation']._text;
+
+  get selectValue(): any {
+    for (const item of this.enumeration) {
+      if (item._attributes.value === this.value) {
+        return item;
+      }
     }
-    return null;
+    return this.model;
   }
 
-  onChange(newValue: string) {
-    for (let item of this.type?.['xs:restriction']?.['xs:enumeration']) {
-      const { value, nemsisCode } = item._attributes ?? {};
-      if (value === newValue && nemsisCode) {
-        this.setCustomValue(nemsisCode, value);
-        return;
-      }
+  onChange(newValue: any) {
+    this.model = newValue;
+    const { value, nemsisCode } = newValue?._attributes ?? {};
+    if (nemsisCode) {
+      this.setCustomValue(nemsisCode, value);
+      return;
     }
-    this.value = newValue;
+    this.value = value;
   }
 }

angular/projects/shared/src/lib/components/xsd/elements/xsd-element-base.component.ts

@@ -112,6 +112,10 @@ export class XsdElementBaseComponent {
     return !!this.type?.['xs:restriction']?.['xs:enumeration'];
   }
 
+  get enumeration(): any[] {
+    return this.type?.['xs:restriction']?.['xs:enumeration'] ?? [];
+  }
+
   get primitiveType(): string {
     return this.type?.['xs:restriction']?._attributes?.base;
   }
@@ -503,7 +507,6 @@ export class XsdElementBaseComponent {
     if (value) {
       this.delValue();
       this.setAttr('xsi:nil', 'true');
-      this.NV = this.nilValues[0]?.['xs:restriction']?.['xs:enumeration']?._attributes?.value;
       // if this is a repeating element, remove the other values
       if (Array.isArray(this.data[this.name]) && this.data[this.name].length > 1) {
         this.data[this.name].splice(1, this.data[this.name].length - 1);

angular/projects/shared/src/lib/components/xsd/elements/xsd-element-input.component.html

@@ -45,6 +45,7 @@
     [displayOnly]="displayOnly">
   </shared-xsd-input>
   <shared-xsd-select
+    class="d-flex"
     *ngSwitchCase="COMPONENT_TYPES.select"
     [xsd]="xsd"
     [record]="record"
@@ -59,6 +60,7 @@
     [displayOnly]="displayOnly">
   </shared-xsd-select>
   <shared-xsd-select-state
+    class="d-flex"
     *ngSwitchCase="COMPONENT_TYPES.selectState"
     [xsd]="xsd"
     [record]="record"

angular/projects/shared/src/lib/components/xsd/elements/xsd-element-nillable.component.html

@@ -3,30 +3,38 @@
 </ng-container>
 <ng-container *ngIf="!isNil || !isDisplayOnly">
   <ng-template #nillableContent>
-    <ng-container *ngIf="!isNil">
-      <shared-xsd-element-input
-        class="form-floating"
-        [xsd]="xsd"
-        [record]="record"
-        [stack]="stack"
-        [basePath]="basePath"
-        [element]="element"
-        [data]="data"
-        [error]="error"
-        [index]="index"
-        [selectedValue]="selectedValue"
-        [displayOnly]="isDisplayOnly"></shared-xsd-element-input>
-    </ng-container>
-    <div *ngIf="isNil" class="select-wrapper">
-      <select [(ngModel)]="NV" [id]="formName + '-NV'" [name]="formName + '-NV'" class="select-wrapper__select">
-        <option *ngFor="let nv of nilValues" [value]="nv['xs:restriction']['xs:enumeration']._attributes.value">
-          {{ nv['xs:restriction']['xs:enumeration']['xs:annotation']['xs:documentation']._text }}
-        </option>
-      </select>
-    </div>
+    <shared-xsd-element-input
+      *ngIf="!isNil"
+      class="form-floating"
+      [xsd]="xsd"
+      [record]="record"
+      [stack]="stack"
+      [basePath]="basePath"
+      [element]="element"
+      [data]="data"
+      [error]="error"
+      [index]="index"
+      [selectedValue]="selectedValue"
+      [displayOnly]="isDisplayOnly"></shared-xsd-element-input>
+    <input
+      *ngIf="isNil"
+      #instance="ngbTypeahead"
+      type="text"
+      class="form-control"
+      [id]="formName + '-NV'"
+      [name]="formName + '-NV'"
+      [ngModel]="nilValue"
+      (ngModelChange)="onChange($event)"
+      [ngbTypeahead]="search"
+      [inputFormatter]="formatter"
+      [resultFormatter]="formatter"
+      [editable]="false"
+      [selectOnExact]="true"
+      (focus)="focus$.next($any($event).target.value)"
+      (click)="click$.next($any($event).target.value)" />
     <div *ngIf="isNillable && !isDisplayOnly && !index" class="input-group-append">
       <div class="form-check">
-        <input [(ngModel)]="isNil" [id]="formName + '-nil'" type="checkbox" class="form-check-input" />
+        <input (change)="onToggle($event)" [(ngModel)]="isNil" [id]="formName + '-nil'" type="checkbox" class="form-check-input" />
         <label [for]="formName + '-nil'" class="form-check-label">Nil?</label>
       </div>
     </div>

angular/projects/shared/src/lib/components/xsd/elements/xsd-element-nillable.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, OperatorFunction, Subject, merge } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
 import { XsdElementBaseComponent } from './xsd-element-base.component';
 
@@ -7,4 +10,59 @@ import { XsdElementBaseComponent } from './xsd-element-base.component';
   templateUrl: './xsd-element-nillable.component.html',
   styleUrls: ['./xsd-element-nillable.component.scss'],
 })
-export class XsdElementNillableComponent extends XsdElementBaseComponent {}
+export class XsdElementNillableComponent extends XsdElementBaseComponent {
+  @ViewChild('instance', { static: true }) instance?: NgbTypeahead;
+  model: any;
+
+  focus$ = new Subject<string>();
+  click$ = new Subject<string>();
+  search: OperatorFunction<string, readonly any[]> = (text$: Observable<string>) => {
+    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance?.isPopupOpen()));
+    const inputFocus$ = this.focus$;
+
+    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map((term: string) =>
+        (term === ''
+          ? this.nilValues
+          : this.nilValues.filter(
+              (nv: any) =>
+                nv['xs:restriction']['xs:enumeration']['xs:annotation']['xs:documentation']._text
+                  .toLowerCase()
+                  .indexOf(term.toLowerCase()) > -1,
+            )
+        ).slice(0, 10),
+      ),
+    );
+  };
+
+  formatter = (nv: any) => nv['xs:restriction']['xs:enumeration']['xs:annotation']['xs:documentation']._text;
+
+  get nilValue(): any {
+    for (const nv of this.nilValues) {
+      if (nv['xs:restriction']['xs:enumeration']._attributes.value === this.NV) {
+        return nv;
+      }
+    }
+    return this.model;
+  }
+
+  onChange(newValue: any) {
+    this.model = newValue;
+    this.NV = newValue?.['xs:restriction']['xs:enumeration']._attributes.value;
+  }
+
+  onToggle($event: any) {
+    const { checked } = $event?.target;
+    setTimeout(() => {
+      if (checked) {
+        (document.querySelector(`[id="${this.formName}-NV"]`) as HTMLElement)?.focus();
+      } else {
+        (document.querySelector(`[id="${this.formName}"]`) as HTMLElement)?.focus();
+        this.model = '';
+      }
+    }, 100);
+  }
+}