Merged in feature/SHIBUI-581 (pull request #100)

SHIBUI-581 Implemented reloading attributes form * SHIBUI-581 Adding autocomplete component * SHIBUI-581 Implemented reloading attributes form Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
TIER · Jul 2, 2018 · eea081e · eea081e
1 parent 80f175d
commit eea081e
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 24 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -33,6 +33,7 @@
     "@ngrx/store": "^5.2.0",
     "bootstrap": "4.1.1",
     "core-js": "^2.4.1",
+    "datalist-polyfill": "^1.16.1",
     "deep-object-diff": "^1.1.0",
     "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",

diff --git a/ui/src/app/schema-form/model/one-of.ts b/ui/src/app/schema-form/model/one-of.ts
@@ -0,0 +1,4 @@
+export interface OneOf {
+    enum: string[];
+    description: string;
+}
diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
@@ -12,11 +12,9 @@ import { IntegerWidget } from 'ngx-schema-form';
 import { ObjectWidget } from 'ngx-schema-form';
 import { RadioWidget } from 'ngx-schema-form';
 import { RangeWidget } from 'ngx-schema-form';
-import { SelectWidget } from 'ngx-schema-form';
-import { StringWidget } from 'ngx-schema-form';
 import { TextAreaWidget } from 'ngx-schema-form';
 import { CustomSelectComponent } from './widget/select/select.component';
-
+import { DatalistComponent } from './widget/datalist/datalist.component';
 
 
 export class CustomWidgetRegistry extends WidgetRegistry {
@@ -40,6 +38,8 @@ export class CustomWidgetRegistry extends WidgetRegistry {
 
         this.register('select', CustomSelectComponent);
 
+        this.register('datalist', DatalistComponent);
+
         /* NGX-Form */
         this.register('array', ArrayWidget);
         this.register('object', ObjectWidget);

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -10,12 +10,14 @@ import { CustomStringComponent } from './widget/text/string.component';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '../shared/shared.module';
 import { CustomSelectComponent } from './widget/select/select.component';
+import { DatalistComponent } from './widget/datalist/datalist.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
     FieldsetComponent,
     CustomStringComponent,
-    CustomSelectComponent
+    CustomSelectComponent,
+    DatalistComponent
 ];
 
 @NgModule({

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -0,0 +1,22 @@
+<div class="widget form-group">
+    <label [attr.for]="id" class="d-flex justify-content-between control-label">
+        <span>{{ schema.title }}</span>
+        <span *ngIf="schema.description">
+            <ng-template #tooltip i18n="@@tooltip--description">{{ schema.description }}</ng-template>
+            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
+                [ngbPopover]="tooltip"
+                i18n-aria-label="@@tooltip--instruction"
+                aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+        </span>
+    </label>
+    <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
+    <auto-complete
+        [attr.id]="id"
+        [formControl]="control"
+        [matches]="schema.widget.data"
+        [required]="true"
+        [dropdown]="true"
+        role="textbox"
+        aria-label="Name ID Format (type for auto-complete)">
+    </auto-complete>
+</div>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.ts b/ui/src/app/schema-form/widget/datalist/datalist.component.ts
@@ -0,0 +1,10 @@
+import { Component, OnChanges } from '@angular/core';
+
+import { ControlWidget } from 'ngx-schema-form';
+import { OneOf } from '../../model/one-of';
+
+@Component({
+    selector: 'datalist-component',
+    templateUrl: `./datalist.component.html`
+})
+export class DatalistComponent extends ControlWidget {}
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -12,7 +12,8 @@
     <span *ngIf="schema.description" class="sr-only">
         {{ schema.description }}
     </span>
-    <select *ngIf="schema.type != 'array'" [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+    <select *ngIf="schema.type !== 'array'" [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+        <option disabled selected>{{ schema.title }}</option>
         <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
     </select>
     <select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -1,19 +1,30 @@
 <div id="{{ id }}-container" class="dropdown form-group" (keydown)="handleKeyDown($event)" role='combobox' [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'">
     <label for="{{ id }}__input" attr.aria-labelledby="{{ id }}__input" class="sr-only"></label>
-    <input
-        #inputField
-        [formControl]="input"
-        [disableValidation]="true"
-        id="{{ id }}__input"
-        class="form-control"
-        autoComplete="off"
-        type="text"
-        role="textbox"
-        [attr.aria-activedescendant]="activeDescendant"
-        attr.aria-owns="{{ id }}__listbox"
-        (focus)="handleInputFocus()"
-        (blur)="handleInputBlur()"
-    />
+    <div [ngClass]="{'input-group': dropdown}">
+        <input
+            #inputField
+            [formControl]="input"
+            [disableValidation]="true"
+            id="{{ id }}__input"
+            class="form-control"
+            autoComplete="off"
+            type="text"
+            role="textbox"
+            [attr.aria-activedescendant]="activeDescendant"
+            attr.aria-owns="{{ id }}__listbox"
+            (focus)="handleInputFocus()"
+            (blur)="handleInputBlur()"
+        />
+        <div class="input-group-append" *ngIf="dropdown">
+            <button class="btn btn-outline-secondary"
+                type="button"
+                aria-haspopup="true"
+                aria-expanded="false"
+                (click)="state.setState({menuOpen: true})">
+                <i class="fa fa-caret-down"></i>
+            </button>
+        </div>
+    </div>
     <ul class="dropdown-menu"
         id="{{ id }}__listbox"
         role="listbox"

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.scss b/ui/src/app/shared/autocomplete/autocomplete.component.scss
@@ -1,8 +1,17 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
 .dropdown.form-group {
     margin-bottom: 0px;
 }
 
 .dropdown-menu {
     min-width: 100%;
     width: auto;
+}
+
+:host {
+    .btn-outline-secondary {
+        border-color: $input-border-color;
+    }
 }
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.ts b/ui/src/app/shared/autocomplete/autocomplete.component.ts
@@ -19,8 +19,8 @@ import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, Validators } from
 import { Observable, Subject, Subscription, interval } from 'rxjs';
 import { takeUntil, combineLatest, map } from 'rxjs/operators';
 
-import { keyCodes, isPrintableKeyCode } from '../../shared/keycodes';
-import { AutoCompleteState, AutoCompleteStateEmitter, defaultState } from './autocomplete.model';
+import { keyCodes } from '../../shared/keycodes';
+import { AutoCompleteStateEmitter } from './autocomplete.model';
 import { NavigatorService } from '../../core/service/navigator.service';
 
 const POLL_TIMEOUT = 1000;
@@ -48,6 +48,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     @Input() showMoreText = 'Show More...';
     @Input() limit = 0;
     @Input() processing = false;
+    @Input() dropdown = false;
 
     @Output() more: EventEmitter<any> = new EventEmitter<any>();
     @Output() onChange: EventEmitter<string> = new EventEmitter<string>();

diff --git a/ui/src/assets/schema/provider/filebacked-http-reloading.schema.json b/ui/src/assets/schema/provider/filebacked-http-reloading.schema.json
@@ -7,12 +7,40 @@
                 "minRefreshDelay": {
                     "title": "Min Refresh Delay",
                     "description": "",
-                    "type": "string"
+                    "type": "string",
+                    "widget": {
+                        "id": "datalist",
+                        "data": [
+                            "PT0S",
+                            "PT30S",
+                            "PT1M",
+                            "PT10M",
+                            "PT30M",
+                            "PT1H",
+                            "PT4H",
+                            "PT12H",
+                            "PT24H"
+                        ]
+                    }
                 },
                 "maxRefreshDelay": {
                     "title": "Max Refresh Delay",
                     "description": "",
-                    "type": "string"
+                    "type": "string",
+                    "widget": {
+                        "id": "datalist",
+                        "data": [
+                            "PT0S",
+                            "PT30S",
+                            "PT1M",
+                            "PT10M",
+                            "PT30M",
+                            "PT1H",
+                            "PT4H",
+                            "PT12H",
+                            "PT24H"
+                        ]
+                    }
                 },
                 "refreshDelayFactor": {
                     "title": "Refresh Delay Factor",
@@ -45,7 +73,21 @@
                 "expirationWarningThreshold": {
                     "title": "Expiration Warning Threshold",
                     "description": "",
-                    "type": "string"
+                    "type": "string",
+                    "widget": {
+                        "id": "datalist",
+                        "data": [
+                            "PT0S",
+                            "PT30S",
+                            "PT1M",
+                            "PT10M",
+                            "PT30M",
+                            "PT1H",
+                            "PT4H",
+                            "PT12H",
+                            "PT24H"
+                        ]
+                    }
                 }
             }
         }

diff --git a/ui/src/polyfills.ts b/ui/src/polyfills.ts
@@ -70,3 +70,5 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Need to import at least one locale-data with intl.
  */
 // import 'intl/locale-data/jsonp/en';
+
+import 'datalist-polyfill';