SHIBUI-579 Added metadata filters

TIER · Jul 2, 2018 · 26828df · 26828df
1 parent 436bf90
commit 26828df
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 31 deletions.
diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
@@ -4,18 +4,17 @@ import { CustomStringComponent } from './widget/text/string.component';
 
 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 { TextAreaWidget } from 'ngx-schema-form';
 import { CustomSelectComponent } from './widget/select/select.component';
 import { DatalistComponent } from './widget/datalist/datalist.component';
 import { CustomCheckboxComponent } from './widget/check/checkbox.component';
+import { CustomTextAreaComponent } from './widget/textarea/textarea.component';
+import { CustomArrayComponent } from './widget/array/array.component';
 
 
 export class CustomWidgetRegistry extends WidgetRegistry {
@@ -35,24 +34,25 @@ export class CustomWidgetRegistry extends WidgetRegistry {
         this.register('time', CustomStringComponent);
 
         this.register('boolean-radio', BooleanRadioComponent);
+
         this.register('fieldset', FieldsetComponent);
+        this.register('array', CustomArrayComponent);
 
         this.register('select', CustomSelectComponent);
         this.register('boolean', CustomCheckboxComponent);
         this.register('checkbox', CustomCheckboxComponent);
 
+        this.register('textarea', CustomTextAreaComponent);
+
         this.register('datalist', DatalistComponent);
 
         /* 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);
 

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -12,14 +12,18 @@ import { SharedModule } from '../shared/shared.module';
 import { CustomSelectComponent } from './widget/select/select.component';
 import { DatalistComponent } from './widget/datalist/datalist.component';
 import { CustomCheckboxComponent } from './widget/check/checkbox.component';
+import { CustomTextAreaComponent } from './widget/textarea/textarea.component';
+import { CustomArrayComponent } from './widget/array/array.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
     FieldsetComponent,
     CustomStringComponent,
     CustomSelectComponent,
     DatalistComponent,
-    CustomCheckboxComponent
+    CustomCheckboxComponent,
+    CustomTextAreaComponent,
+    CustomArrayComponent
 ];
 
 @NgModule({

diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
@@ -0,0 +1,23 @@
+<div class="widget form-group">
+    <div class="d-flex justify-content-start">
+        <label [attr.for]="id" class="m-0 pt-1 control-label">
+            {{ schema.title }}
+        </label>
+        &nbsp;
+        <button (click)="addItem()" class="btn btn-success btn-sm array-add-button">
+            Add &nbsp;
+            <i class="fa fa-plus" aria-hidden="true"></i>
+        </button>
+    </div>
+    <div *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex" class="mt-2">
+        <div class="row">
+            <sf-form-element class="col-sm-11" [formProperty]="itemProperty"></sf-form-element>
+            <div class="col-sm-1">
+                <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
+                    <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <span *ngIf="schema.description" class="sr-only">{{schema.description}}</span>
+</div>
diff --git a/ui/src/app/schema-form/widget/array/array.component.ts b/ui/src/app/schema-form/widget/array/array.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+import { ArrayWidget } from 'ngx-schema-form';
+
+@Component({
+    selector: 'array-component',
+    templateUrl: `./array.component.html`
+})
+export class CustomArrayComponent extends ArrayWidget {}
diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -1,18 +1,27 @@
 <div class="widget form-group">
-    <label [attr.for]="id" class="horizontal control-label">
-        {{ schema.title }}
-    </label>
-    <div *ngIf="schema.type!='array'" class="checkbox">
-        <label class="horizontal control-label">
-            <input [formControl]="control"
-                [attr.name]="name"
-                [indeterminate]="control.value !== false && control.value !== true ? true :null"
-                type="checkbox"
-                [attr.disabled]="schema.readOnly">
-            <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control"> {{schema.description}}
-        </label>
-    </div>
-    <ng-container *ngIf="schema.type==='array'">
+    <ng-container *ngIf="schema.type !== 'array'">
+        <div class="d-flex justify-content-start">
+            <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
+                <input [formControl]="control"
+                    class="custom-control-input"
+                    [attr.name]="name"
+                    [indeterminate]="control.value !== false && control.value !== true ? true :null"
+                    type="checkbox"
+                    [attr.disabled]="schema.readOnly"
+                    id="{{ schema.id }}-control">
+                <input id="{{ schema.id }}-control" *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
+                <label for="{{ schema.id }}-control" class="custom-control-label">
+                    {{ schema.title }}
+                </label>
+            </div>
+            <div>
+                <ng-template #tooltip>{{ 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>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="schema.type === 'array'">
         <div *ngFor="let option of schema.items.oneOf" class="checkbox">
             <label class="horizontal control-label">
                 <input [attr.name]="name" 
@@ -25,4 +34,18 @@
             </label>
         </div>
     </ng-container>
-</div>
+</div>
+<!--
+
+<fieldset aria-label="Don't sign the response? Checkbox - select for yes">
+    <div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
+        <input disableValidation="true" type="checkbox" class="custom-control-input" formControlName="dontSignResponse" id="dontSignResponse"
+            [value]="true" role="checkbox" aria-checked="false">
+        <label class="custom-control-label" i18n="@@label--dont-sign-the-response" for="dontSignResponse">Don't Sign the Response</label>
+    </div>
+    <ng-template #tooltipDontSignResponse i18n="@@tooltip--dont-sign-response">Don't Sign Response popover</ng-template>
+    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipDontSignResponse" i18n-aria-label="@@tooltip--instruction"
+        aria-label="Information icon - press spacebar to read additional information for this form field"></i>
+</fieldset>
+
+-->
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -1,7 +1,7 @@
 <div class="widget form-group">
-    <label [attr.for]="id" class="horizontal control-label">
+    <label [attr.for]="id" class="horizontal control-label" *ngIf="schema.title">
         {{ 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"

diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -0,0 +1,21 @@
+<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>
+    <textarea [attr.readonly]="schema.readOnly"
+        [name]="name"
+        class="text-widget textarea-widget form-control"
+        [attr.placeholder]="schema.placeholder"
+        [attr.maxLength]="schema.maxLength || null"
+        [attr.minLength]="schema.minLength || null"
+        [rows]="schema.widget.rows || 5"
+        [formControl]="control"></textarea>
+</div>
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.ts b/ui/src/app/schema-form/widget/textarea/textarea.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+import { TextAreaWidget } from 'ngx-schema-form';
+
+@Component({
+  selector: 'textarea-component',
+  templateUrl: `./textarea.component.html`
+})
+export class CustomTextAreaComponent extends TextAreaWidget {}
diff --git a/ui/src/assets/schema/provider/filebacked-http-filters.schema.json b/ui/src/assets/schema/provider/filebacked-http-filters.schema.json
@@ -15,7 +15,7 @@
                     "properties": {
                         "maxValidityInterval": {
                             "title": "Max Validity Interval",
-                            "description": "",
+                            "description": "Max Validity Interval",
                             "type": "number"
                         }
                     }
@@ -29,14 +29,15 @@
                     "properties": {
                         "requireSignedRoot": {
                             "title": "Require Signed Root",
-                            "description": "",
+                            "description": "Require Signed Root",
                             "type": "boolean",
                             "default": true
                         },
                         "certificateFile": {
                             "title": "Certificate File",
-                            "description": "",
-                            "type": "string"
+                            "description": "Certificate File",
+                            "type": "string",
+                            "widget": "textarea"
                         }
                     }
                 },
@@ -49,7 +50,7 @@
                     "properties": {
                         "retainedRoles": {
                             "title": "Retained Roles",
-                            "description": "",
+                            "description": "Retained Roles",
                             "type": "array",
                             "items": {
                                 "widget": {
@@ -74,13 +75,13 @@
                         },
                         "removeRolelessEntityDescriptors": {
                             "title": "Remove Roleless Entity Descriptors?",
-                            "description": "",
+                            "description": "Remove Roleless Entity Descriptors?",
                             "type": "boolean",
                             "default": true
                         },
                         "removeEmptyEntitiesDescriptors": {
                             "title": "Remove Empty Entities Descriptors?",
-                            "description": "",
+                            "description": "Remove Empty Entities Descriptors?",
                             "type": "boolean",
                             "default": true
                         }