From 909719e72bcecd5e0c024ba96ba69e9b4b718652 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 29 Jun 2018 11:08:00 -0700
Subject: [PATCH] Implemented Common Attributes form

---
 ui/src/app/schema-form/registry.ts            | 54 +++++++++++++++++--
 ui/src/app/schema-form/schema-form.module.ts  |  8 ++-
 .../boolean-radio.component.html              | 11 +++-
 .../widget/select/select.component.html       | 22 ++++++++
 .../widget/select/select.component.ts         |  9 ++++
 .../widget/text/string.component.html         | 15 ++++--
 .../widget/text/string.component.scss         |  0
 .../widget/text/string.component.ts           |  3 +-
 .../schema-form/widget/widget.component.scss  |  7 +++
 ui/src/app/shared/shared.module.ts            |  3 +-
 .../filebacked-http-common.schema.json        | 16 +++---
 11 files changed, 129 insertions(+), 19 deletions(-)
 create mode 100644 ui/src/app/schema-form/widget/select/select.component.html
 create mode 100644 ui/src/app/schema-form/widget/select/select.component.ts
 create mode 100644 ui/src/app/schema-form/widget/text/string.component.scss
 create mode 100644 ui/src/app/schema-form/widget/widget.component.scss

diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
index 202e6d14e..a3bc92856 100644
--- a/ui/src/app/schema-form/registry.ts
+++ b/ui/src/app/schema-form/registry.ts
@@ -1,14 +1,62 @@
-import { DefaultWidgetRegistry } from 'ngx-schema-form';
 import { BooleanRadioComponent } from './widget/boolean-radio/boolean-radio.component';
 import { FieldsetComponent } from './widget/fieldset/fieldset.component';
 import { CustomStringComponent } from './widget/text/string.component';
 
-export class CustomWidgetRegistry extends DefaultWidgetRegistry {
+import { WidgetRegistry } from 'ngx-schema-form';
+
+import { ArrayWidget } from 'ngx-schema-form';
+import { ButtonWidget } from 'ngx-schema-form';
+import { CheckboxWidget } from 'ngx-schema-form';
+import { FileWidget } from 'ngx-schema-form';
+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';
+
+
+
+export class CustomWidgetRegistry extends WidgetRegistry {
     constructor() {
         super();
 
+        /* Custom */
+        this.register('string', CustomStringComponent);
+        this.register('search', CustomStringComponent);
+        this.register('tel', CustomStringComponent);
+        this.register('url', CustomStringComponent);
+        this.register('email', CustomStringComponent);
+        this.register('password', CustomStringComponent);
+        this.register('color', CustomStringComponent);
+        this.register('date', CustomStringComponent);
+        this.register('date-time', CustomStringComponent);
+        this.register('time', CustomStringComponent);
+
         this.register('boolean-radio', BooleanRadioComponent);
         this.register('fieldset', FieldsetComponent);
-        this.register('custom-string', CustomStringComponent);
+
+        this.register('select', CustomSelectComponent);
+
+        /* NGX-Form */
+        this.register('array', ArrayWidget);
+        this.register('object', ObjectWidget);
+
+        this.register('integer', IntegerWidget);
+        this.register('number', IntegerWidget);
+        this.register('range', RangeWidget);
+
+        this.register('textarea', TextAreaWidget);
+
+        this.register('file', FileWidget);
+        this.register('radio', RadioWidget);
+        this.register('boolean', CheckboxWidget);
+        this.register('checkbox', CheckboxWidget);
+
+        this.register('button', ButtonWidget);
+
+        this.setDefaultWidget(CustomStringComponent);
     }
 }
diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
index bc143a661..4ea92397d 100644
--- a/ui/src/app/schema-form/schema-form.module.ts
+++ b/ui/src/app/schema-form/schema-form.module.ts
@@ -7,17 +7,23 @@ import { BooleanRadioComponent } from './widget/boolean-radio/boolean-radio.comp
 import { SchemaService } from './service/schema.service';
 import { FieldsetComponent } from './widget/fieldset/fieldset.component';
 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';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
     FieldsetComponent,
-    CustomStringComponent
+    CustomStringComponent,
+    CustomSelectComponent
 ];
 
 @NgModule({
     imports: [
         CommonModule,
         ReactiveFormsModule,
+        NgbPopoverModule,
+        SharedModule,
         SchemaFormModule.forRoot()
     ],
     declarations: COMPONENTS,
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
index a1ae8dad7..3d6070d92 100644
--- a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
+++ b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -1,5 +1,14 @@
 <div class="widget form-group">
-    <label>{{ schema.title }}</label>
+    <label class="d-flex justify-content-start 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>
     <div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
         <label class="control-label">
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
new file mode 100644
index 000000000..a29321e7a
--- /dev/null
+++ b/ui/src/app/schema-form/widget/select/select.component.html
@@ -0,0 +1,22 @@
+<div class="widget form-group">
+    <label [attr.for]="id" class="horizontal control-label">
+        {{ schema.title }}
+        <span>
+            <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>
+    <select *ngIf="schema.type != 'array'" [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+        <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">
+        <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
+    </select>
+    <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
+</div>
\ No newline at end of file
diff --git a/ui/src/app/schema-form/widget/select/select.component.ts b/ui/src/app/schema-form/widget/select/select.component.ts
new file mode 100644
index 000000000..15e90e04f
--- /dev/null
+++ b/ui/src/app/schema-form/widget/select/select.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+import { ControlWidget } from 'ngx-schema-form';
+
+@Component({
+    selector: 'select-component',
+    templateUrl: `./select.component.html`
+})
+export class CustomSelectComponent extends ControlWidget { }
diff --git a/ui/src/app/schema-form/widget/text/string.component.html b/ui/src/app/schema-form/widget/text/string.component.html
index 972c239ea..b581f242e 100644
--- a/ui/src/app/schema-form/widget/text/string.component.html
+++ b/ui/src/app/schema-form/widget/text/string.component.html
@@ -1,8 +1,15 @@
 <div class="widget form-group">
-    <label [attr.for]="id" class="horizontal control-label">
-        {{ schema.title }}
+    <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="formHelp">{{schema.description}}</span>
+    <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
     <input [name]="name"
         [attr.readonly]="schema.readOnly?true:null"
         class="text-widget.id textline-widget form-control"
@@ -12,6 +19,6 @@
         [attr.placeholder]="schema.placeholder"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
-        [attr.disabled]="!formProperty.visible">
+        [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null">
     <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [attr.name]="name" type="hidden" [formControl]="control">
 </div>
\ No newline at end of file
diff --git a/ui/src/app/schema-form/widget/text/string.component.scss b/ui/src/app/schema-form/widget/text/string.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/src/app/schema-form/widget/text/string.component.ts b/ui/src/app/schema-form/widget/text/string.component.ts
index 52d4d34f1..26c1f5c44 100644
--- a/ui/src/app/schema-form/widget/text/string.component.ts
+++ b/ui/src/app/schema-form/widget/text/string.component.ts
@@ -3,7 +3,8 @@ import { ControlWidget } from 'ngx-schema-form';
 
 @Component({
     selector: 'custom-string',
-    templateUrl: `./string.component.html`
+    templateUrl: `./string.component.html`,
+    styleUrls: ['../widget.component.scss']
 })
 export class CustomStringComponent extends ControlWidget {
 
diff --git a/ui/src/app/schema-form/widget/widget.component.scss b/ui/src/app/schema-form/widget/widget.component.scss
new file mode 100644
index 000000000..278567f46
--- /dev/null
+++ b/ui/src/app/schema-form/widget/widget.component.scss
@@ -0,0 +1,7 @@
+:host {
+    .widget {
+        .popover {
+            
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index 88abddf1b..4af6af8ce 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -34,7 +34,8 @@ import { PrettyXml } from './pipe/pretty-xml.pipe';
         FormsModule,
         InputDefaultsDirective,
         I18nTextComponent,
-        ValidFormIconComponent
+        ValidFormIconComponent,
+        InfoLabelDirective
     ]
 })
 export class SharedModule { }
diff --git a/ui/src/assets/schema/provider/filebacked-http-common.schema.json b/ui/src/assets/schema/provider/filebacked-http-common.schema.json
index 8fcaddf4e..806c7c053 100644
--- a/ui/src/assets/schema/provider/filebacked-http-common.schema.json
+++ b/ui/src/assets/schema/provider/filebacked-http-common.schema.json
@@ -19,12 +19,12 @@
         },
         "metadataURL": {
             "title": "Metadata URL",
-            "description": "",
+            "description": "Metadata URL",
             "type": "string"
         },
         "initializeFromBackupFile": {
             "title": "Initialize From Backup File?",
-            "description": "",
+            "description": "Initialize From Backup File?",
             "type": "boolean",
             "widget": {
                 "id": "boolean-radio"
@@ -47,7 +47,7 @@
         },
         "backingFile": {
             "title": "Backing File",
-            "description": "",
+            "description": "Backing File",
             "type": "string",
             "visibleIf": {
                 "initializeFromBackupFile": [
@@ -57,7 +57,7 @@
         },
         "backupFileInitNextRefreshDelay": {
             "title": "Backup File Init Next Refresh Delay",
-            "description": "",
+            "description": "Backup File Init Next Refresh Delay",
             "type": "string",
             "visibleIf": {
                 "initializeFromBackupFile": [
@@ -67,7 +67,7 @@
         },
         "requireValidMetadata": {
             "title": "Require Valid Metadata?",
-            "description": "",
+            "description": "Require Valid Metadata?",
             "type": "boolean",
             "widget": {
                 "id": "boolean-radio"
@@ -90,7 +90,7 @@
         },
         "failFastInitialization": {
             "title": "Fail Fast Initialization?",
-            "description": "",
+            "description": "Fail Fast Initialization?",
             "type": "boolean",
             "widget": {
                 "id": "boolean-radio"
@@ -113,7 +113,7 @@
         },
         "useDefaultPredicateRegistry": {
             "title": "Use Default Predicate Registry?",
-            "description": "",
+            "description": "Use Default Predicate Registry?",
             "type": "boolean",
             "widget": {
                 "id": "boolean-radio"
@@ -136,7 +136,7 @@
         },
         "satisfyAnyPredicates": {
             "title": "Satisy Any Predicates?",
-            "description": "",
+            "description": "Satisy Any Predicates?",
             "type": "boolean",
             "widget": {
                 "id": "boolean-radio"