Merged in feature/SHIBUI-304 (pull request #53)

Added Metadata Filter functionality to dashboard display

* reorganization collection code

* Moved code to domain folder

* Added filters to dashboard display

* Adding dropdown filters

* Implemented dashboard filter by type

* Implemented filter icons

* Fixed tests

* Fixed styling

Approved-by: Ryan Mathis <rmathis@unicon.net>

ui/src/app/app.component.ts

@@ -5,8 +5,8 @@ import 'rxjs/add/operator/map';
 
 import * as fromRoot from './core/reducer';
 import { VersionInfo } from './core/model/version';
-import { LoadProviderRequest } from './metadata-provider/action/provider.action';
-import { LoadDraftRequest } from './metadata-provider/action/draft.action';
+import { LoadProviderRequest } from './domain/action/provider-collection.action';
+import { LoadDraftRequest } from './domain/action/draft-collection.action';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
 @Component({
     selector: 'app-root',

ui/src/app/dashboard/action/dashboard.action.ts

@@ -1,21 +1,21 @@
 import { Action } from '@ngrx/store';
-import { MetadataProvider } from '../../domain/model/metadata-provider';
+import { MetadataEntity } from '../../domain/domain.type';
 
-export const TOGGLE_PROVIDER_DISPLAY = '[Dashboard] Display Provider';
-export const PREVIEW_PROVIDER = '[Dashboard] Preview Provider';
+export const TOGGLE_ENTITY_DISPLAY = '[Dashboard] Display Entity';
+export const PREVIEW_ENTITY = '[Dashboard] Preview Entity';
 
-export class ToggleProviderDisplay implements Action {
-    readonly type = TOGGLE_PROVIDER_DISPLAY;
+export class ToggleEntityDisplay implements Action {
+    readonly type = TOGGLE_ENTITY_DISPLAY;
 
     constructor(public payload: string) { }
 }
 
-export class PreviewProvider implements Action {
-    readonly type = PREVIEW_PROVIDER;
+export class PreviewEntity implements Action {
+    readonly type = PREVIEW_ENTITY;
 
-    constructor(public payload: MetadataProvider) { }
+    constructor(public payload: MetadataEntity) { }
 }
 
 export type Actions =
-    | ToggleProviderDisplay
-    | PreviewProvider;
+    | ToggleEntityDisplay
+    | PreviewEntity;

ui/src/app/dashboard/action/search.action.ts

@@ -1,24 +1,33 @@
 import { Action } from '@ngrx/store';
 import { MetadataProvider } from '../../domain/model/metadata-provider';
+import { MetadataFilter } from '../../domain/model/metadata-filter';
 
-export const PROVIDER_SEARCH = '[Metadata Provider Search] Provider Search';
-export const PROVIDER_SEARCH_COMPLETE = '[Metadata Provider Search] Provider Search COMPLETE';
+export const ENTITY_SEARCH = '[Metadata Entity Search] Entity Search';
+export const ENTITY_FILTER = '[Metadata Entity Filter] Entity Filter';
+export const ENTITY_SEARCH_COMPLETE = '[Metadata Entity Search] Entity Search COMPLETE';
 
 /**
  * Add Provider to Collection Actions
  */
 export class SearchAction implements Action {
-    readonly type = PROVIDER_SEARCH;
+    readonly type = ENTITY_SEARCH;
 
-    constructor(public payload) { }
+    constructor(public payload: string) { }
+}
+
+export class FilterAction implements Action {
+    readonly type = ENTITY_FILTER;
+
+    constructor(public payload: string) { }
 }
 
 export class SearchCompleteAction implements Action {
-    readonly type = PROVIDER_SEARCH_COMPLETE;
+    readonly type = ENTITY_SEARCH_COMPLETE;
 
-    constructor(public payload: MetadataProvider[]) { }
+    constructor(public payload: Array<MetadataProvider | MetadataFilter>) { }
 }
 
 export type Actions =
     | SearchAction
+    | FilterAction
     | SearchCompleteAction;

ui/src/app/dashboard/component/entity-item.component.html

@@ -0,0 +1,80 @@
+<div class="card">
+    <div class="card-header" (click)="toggle.emit(entity)" (keydown.space)="toggle.emit(entity)" tabindex="0">
+        <div class="row">
+            <div class="col-9 clearfix">
+                <div class="w-10 pr-3 pull-left">
+                    <i class="fa fa-3x text-primary" [class.fa-caret-right]="!isOpen" [class.fa-caret-down]="isOpen"></i>
+                    &nbsp;
+                    <span class="label-icon sr-hidden" [ngSwitch]="entity.type">
+                        <i class="fa fa-3x text-info fa-cubes" *ngSwitchCase="types.filter"></i>
+                        <i class="fa fa-3x text-info fa-cube" *ngSwitchCase="types.provider"></i>
+                        <i class="fa fa-3x text-info fa-" *ngSwitchDefault></i>
+                    </span>
+                </div>
+                <div>
+                    {{ entity.name }}
+                    <i *ngIf="entity.createdDate" class="fa" [ngClass]="{
+                                    'fa-check-circle text-success': entity.enabled,
+                                    'fa-times-circle text-danger': !entity.enabled
+                                }"></i>
+                    <span *ngIf="!entity.createdDate" class="badge badge-warning" i18n="@@warning--incomplete-form" aria-label="Warning Badge: Incomplete Form">Incomplete Form</span>
+                    <small class="d-block">{{ entity.entityId }}</small>
+                </div>
+            </div>
+            <div class="col-3 text-right">
+                <button class="btn btn-link" (click)="preview.emit(entity)" *ngIf="entity.createdDate" aria-label="Review the XML of the selected service provider">
+                    <i class="fa fa-eye fa-2x"></i>
+                </button>
+                <button class="btn btn-link" (click)="select.emit(entity)" aria-label="Edit selected service provider">
+                    <i class="fa fa-edit fa-2x"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="collapse" [ngClass]="{'show': isOpen}">
+        <div class="card-body" tabindex="0">
+            <div class="row">
+                <div class="col-10">
+                    <div class="row">
+                        <div class="col text-right font-weight-bold" i18n="@@label--service-provider">
+                            {entity.type, select, filter {Filter} provider {Service Provider} other {other}} Name:
+                        </div>
+                        <div class="col">{{ entity.name }}</div>
+                        <div class="col text-right font-weight-bold" i18n="@@label--created-date">Created Date:</div>
+                        <div class="col" *ngIf="entity.createdDate">{{ entity.createdDate | date:'medium' }}</div>
+                        <div class="col" *ngIf="!entity.createdDate"> &mdash; </div>
+                    </div>
+                    <div class="row">
+                        <div class="col text-right font-weight-bold" i18n="@@label--service-entity-id">
+                            {entity.type, select, filter {Filter} provider {Service Provider} other {other}} Entity ID:
+                        </div>
+                        <div class="col">{{ entity.entityId }}</div>
+                        <div class="col text-right font-weight-bold" i18n="@@label--service-provider-status">
+                            {entity.type, select, filter {Filter} provider {Service Provider} other {other}} Status:
+                        </div>
+                        <div class="col" *ngIf="entity.createdDate">
+                            <i class="fa" [ngClass]="{
+                                'fa-check-circle text-success': entity.enabled,
+                                'fa-times-circle text-danger': !entity.enabled
+                            }"></i>
+                            <span *ngIf="entity.enabled" i18n="@@value--enabled">Enabled</span>
+                            <span *ngIf="!entity.enabled" i18n="@@value--disabled">Disabled</span>
+                        </div>
+                        <div class="col" *ngIf="!entity.createdDate">
+                            <span class="badge badge-warning" i18n="@@warning--incomplete-form">Incomplete Form</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-2">
+                    <button *ngIf="!entity.createdDate && entity.type === 'provider'"
+                        class="btn btn-link pull-right"
+                        (click)="delete.emit(entity)"
+                        aria-label="Delete selected service provider">
+                        <i class="fa fa-trash fa-2x text-danger"></i>
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>

ui/src/app/dashboard/component/provider-item.component.scss → ui/src/app/dashboard/component/entity-item.component.scss

@@ -1,6 +1,7 @@
 @import '../../../theme/palette';
 
 .card {
+    background-color: rgba($light-grey, 0.5);
     &:focus {
         outline: -webkit-focus-ring-color auto 5px;
     }
@@ -9,4 +10,10 @@
             outline: -webkit-focus-ring-color auto 5px;
         }
     }
+
+    .label-icon {
+        display: inline-block;
+        min-width: 64px;
+        text-align: center;
+    }
 }

ui/src/app/dashboard/component/provider-item.component.spec.ts → ui/src/app/dashboard/component/entity-item.component.spec.ts

@@ -1,11 +1,11 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ProviderItemComponent } from './provider-item.component';
+import { EntityItemComponent } from './entity-item.component';
 import { MetadataProvider } from '../../domain/model/metadata-provider';
 
 describe('Provider List item', () => {
-    let fixture: ComponentFixture<ProviderItemComponent>;
-    let instance: ProviderItemComponent;
+    let fixture: ComponentFixture<EntityItemComponent>;
+    let instance: EntityItemComponent;
 
     let provider = { entityId: 'foo', serviceProviderName: 'bar' } as MetadataProvider;
 
@@ -15,12 +15,12 @@ describe('Provider List item', () => {
             imports: [
                 NoopAnimationsModule
             ],
-            declarations: [ProviderItemComponent],
+            declarations: [EntityItemComponent],
         });
 
-        fixture = TestBed.createComponent(ProviderItemComponent);
+        fixture = TestBed.createComponent(EntityItemComponent);
         instance = fixture.componentInstance;
-        instance.provider = provider;
+        instance.entity = provider;
     });
 
     it('should compile', () => {

ui/src/app/dashboard/component/entity-item.component.ts

@@ -0,0 +1,23 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { MetadataEntity, DomainTypes } from '../../domain/domain.type';
+
+@Component({
+    selector: 'entity-item',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './entity-item.component.html',
+    styleUrls: ['./entity-item.component.scss']
+})
+export class EntityItemComponent {
+
+    types = DomainTypes;
+
+    @Input() entity: MetadataEntity;
+    @Input() isOpen: boolean;
+    @Output() select = new EventEmitter<MetadataEntity>();
+    @Output() toggle = new EventEmitter<MetadataEntity>();
+    @Output() preview = new EventEmitter<MetadataEntity>();
+    @Output() delete = new EventEmitter<MetadataEntity>();
+
+} /* istanbul ignore next */

ui/src/app/dashboard/component/provider-search.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="searchForm">
+    <label for="search" class="sr-only" i18n="@@action--search">Search</label>
     <div class="input-group">
-        <label for="search" class="sr-only" i18n="@@action--search">Search</label>
         <input
             id="search"
             type="text"
@@ -11,14 +11,13 @@
             aria-label="To search for a service provider, enter name then press enter"
             formControlName="search"
             (keyup)="search.emit($event.target.value)">
-        <span class="input-group-btn">
+        <div class="input-group-append">
             <button class="btn btn-light"
                 type="button"
                 tabindex="0"
                 aria-label="Clear search text field"
                 (click)="search.emit('')"
-                [disabled]="!query.length"
                 i18n="@@action--clear">Clear</button>
-        </span>
+        </div>
     </div>
 </form>