SHIBUI-799 Implemented UI for NameIDFOrmat Filter

TIER · Dec 6, 2018 · 8397179 · 8397179
1 parent 2f755df
commit 8397179
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/src/app/metadata/filter/container/new-filter.component.html b/ui/src/app/metadata/filter/container/new-filter.component.html
@@ -50,6 +50,4 @@
             </div>
         </div>
     </section>
-</div>
-<pre>{{ changes$ | async | json }}</pre>
-<pre>{{ schema$ | async | json }}</pre>
+</div>
diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
@@ -18,6 +18,8 @@ import { ChecklistComponent } from './widget/check/checklist.component';
 import { IconButtonComponent } from './widget/button/icon-button.component';
 import { CustomObjectWidget } from './widget/object/object.component';
 import { CustomRadioComponent } from './widget/radio/radio.component';
+import { InlineObjectListComponent } from './widget/array/inline-obj-list.component';
+import { InlineObjectComponent } from './widget/object/inline-obj.component';
 
 export class CustomWidgetRegistry extends WidgetRegistry {
     constructor() {
@@ -39,6 +41,8 @@ export class CustomWidgetRegistry extends WidgetRegistry {
 
         this.register('fieldset', FieldsetComponent);
         this.register('object', CustomObjectWidget);
+        this.register('inline-obj-list', InlineObjectListComponent);
+        this.register('inline-obj', InlineObjectComponent);
 
         this.register('array', CustomArrayComponent);
         this.register('checklist', ChecklistComponent);

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -21,6 +21,8 @@ import { IconButtonComponent } from './widget/button/icon-button.component';
 import { I18nModule } from '../i18n/i18n.module';
 import { CustomObjectWidget } from './widget/object/object.component';
 import { CustomRadioComponent } from './widget/radio/radio.component';
+import { InlineObjectListComponent } from './widget/array/inline-obj-list.component';
+import { InlineObjectComponent } from './widget/object/inline-obj.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
@@ -36,7 +38,9 @@ export const COMPONENTS = [
     ChecklistComponent,
     IconButtonComponent,
     CustomRadioComponent,
-    CustomObjectWidget
+    CustomObjectWidget,
+    InlineObjectListComponent,
+    InlineObjectComponent
 ];
 
 @NgModule({

diff --git a/ui/src/app/schema-form/widget/array/inline-obj-list.component.html b/ui/src/app/schema-form/widget/array/inline-obj-list.component.html
@@ -0,0 +1,40 @@
+<div class="widget form-group">
+    <div class="d-flex justify-content-start">
+        <label [attr.for]="id" class="m-0 pt-1 control-label">
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
+        </label>
+        &nbsp;&nbsp;
+        <button (click)="addItem()" class="btn btn-success btn-sm array-add-button">
+            <translate-i18n key="action.add">Add</translate-i18n>&nbsp;&nbsp;
+            <i class="fa fa-plus" aria-hidden="true"></i>
+        </button>
+        &nbsp;
+        <span class="text-right" *ngIf="schema.description">
+            <info-icon [description]="schema.description | translate"></info-icon>
+        </span>
+        <small class="form-text text-danger px-2" *ngIf="hasErrors">
+            <ng-container *ngFor="let error of errors$ | async; let first=first;">
+                <ng-container *ngIf="!first">, </ng-container>
+                <translate-i18n [key]="messages[error.code]">{{ error.message }}</translate-i18n>
+            </ng-container>
+        </small>
+    </div>
+    <ul class="mt-2 no-style d-flex justify-content-between flex-wrap">
+        <li *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex" class="w-50">
+            <div class="d-flex flex-row justify-content-between m-3">
+                <div class="flex-grow-1 bg-light border rounded p-3">
+                    <sf-form-element class="" [formProperty]="itemProperty"></sf-form-element>
+                    <div class="py-2 text-right">
+                        <button class="btn btn-danger" (click)="removeItem(i)" role="button">
+                            <i class="fa fa-fw fa-trash fa-lg"></i>
+                            <span translate="action.remove">Remove</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
+    <span *ngIf="schema.description" class="sr-only">
+        <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
+    </span>
+</div>
diff --git a/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts b/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { ObjectWidget } from 'ngx-schema-form';
+import { CustomArrayComponent } from './array.component';
+
+/* tslint:disable */
+@Component({
+    selector: 'inline-obj-list',
+    templateUrl: `./inline-obj-list.component.html`
+})
+export class InlineObjectListComponent extends CustomArrayComponent { }
diff --git a/ui/src/app/schema-form/widget/object/inline-obj.component.html b/ui/src/app/schema-form/widget/object/inline-obj.component.html
@@ -0,0 +1,9 @@
+<div class="flex-column">
+<ng-container *ngFor="let fieldset of formProperty.schema.fieldsets; let i = index;">
+    <fieldset class="d-flex flex-row justify-content-between">
+        <div *ngFor="let fieldId of fieldset.fields" class="flex-fill">
+            <sf-form-element [formProperty]="formProperty.getProperty(fieldId)"></sf-form-element>
+        </div>
+    </fieldset>
+</ng-container>
+</div>
diff --git a/ui/src/app/schema-form/widget/object/inline-obj.component.ts b/ui/src/app/schema-form/widget/object/inline-obj.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { CustomObjectWidget } from './object.component';
+
+/* tslint:disable */
+@Component({
+    selector: 'inline-obj',
+    templateUrl: `./inline-obj.component.html`
+})
+export class InlineObjectComponent extends CustomObjectWidget { }
diff --git a/ui/src/assets/schema/filter/nameid.schema.json b/ui/src/assets/schema/filter/nameid.schema.json
@@ -9,7 +9,12 @@
                 "@type",
                 "resourceId",
                 "version",
-                "removeExistingFormats",
+                "removeExistingFormats"
+            ]
+        },
+        {
+            "type": "group-lg",
+            "fields": [
                 "formats"
             ]
         }
@@ -57,10 +62,16 @@
         },
         "formats": {
             "type": "array",
+            "widget": {
+                "id": "inline-obj-list"
+            },
             "title": "label.nameid-formats",
             "description": "tooltip.nameid-formats",
             "items": {
                 "type": "object",
+                "widget": {
+                    "id": "inline-obj"
+                },
                 "properties": {
                     "format": {
                         "type": "string",