From 8397179363beb9c27b88204d92a0eba71c5aa6a9 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 6 Dec 2018 07:10:00 -0700
Subject: [PATCH] SHIBUI-799 Implemented UI for NameIDFOrmat Filter

---
 package-lock.json                             |  3 --
 .../container/new-filter.component.html       |  4 +-
 ui/src/app/schema-form/registry.ts            |  4 ++
 ui/src/app/schema-form/schema-form.module.ts  |  6 ++-
 .../array/inline-obj-list.component.html      | 40 +++++++++++++++++++
 .../widget/array/inline-obj-list.component.ts | 11 +++++
 .../widget/object/inline-obj.component.html   |  9 +++++
 .../widget/object/inline-obj.component.ts     | 10 +++++
 .../assets/schema/filter/nameid.schema.json   | 13 +++++-
 9 files changed, 92 insertions(+), 8 deletions(-)
 delete mode 100644 package-lock.json
 create mode 100644 ui/src/app/schema-form/widget/array/inline-obj-list.component.html
 create mode 100644 ui/src/app/schema-form/widget/array/inline-obj-list.component.ts
 create mode 100644 ui/src/app/schema-form/widget/object/inline-obj.component.html
 create mode 100644 ui/src/app/schema-form/widget/object/inline-obj.component.ts

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 48e341a09..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "lockfileVersion": 1
-}
diff --git a/ui/src/app/metadata/filter/container/new-filter.component.html b/ui/src/app/metadata/filter/container/new-filter.component.html
index 6168e374d..0e6d05a7d 100644
--- 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>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
index f1b6149a2..266aeb9a2 100644
--- 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
index 8927b9876..842e903dd 100644
--- 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
new file mode 100644
index 000000000..af4099b54
--- /dev/null
+++ 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>
\ No newline at end of file
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
new file mode 100644
index 000000000..31a15068a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..a9f57749f
--- /dev/null
+++ 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>
\ No newline at end of file
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
new file mode 100644
index 000000000..4ab29534a
--- /dev/null
+++ 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
index b52ee8ceb..47cb75304 100644
--- 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",