SHIBUI-1332 converted filter list to re-usable component

TIER · Jul 19, 2019 · 1afd847 · 1afd847
1 parent 08ddd97
commit 1afd847
Show file tree

Hide file tree

Showing 18 changed files with 198 additions and 94 deletions.
diff --git a/ui/src/app/metadata/configuration/configuration.module.ts b/ui/src/app/metadata/configuration/configuration.module.ts
@@ -25,6 +25,7 @@ import { HistoryListComponent } from './component/history-list.component';
 import { DomainModule } from '../domain/domain.module';
 import { MetadataComparisonComponent } from './container/metadata-comparison.component';
 import { CompareVersionEffects } from './effect/compare.effect';
+import { FilterModule } from '../filter/filter.module';
 
 @NgModule({
     declarations: [
@@ -47,7 +48,8 @@ import { CompareVersionEffects } from './effect/compare.effect';
         I18nModule,
         NgbPopoverModule,
         RouterModule,
-        DomainModule
+        DomainModule,
+        FilterModule
     ],
     exports: [],
     providers: []

diff --git a/ui/src/app/metadata/configuration/container/configuration.component.html b/ui/src/app/metadata/configuration/container/configuration.component.html
@@ -13,7 +13,11 @@
                     </li>
                 </ol>
             </nav>
-            <h2 class="mb-4">Source Configuration</h2>
+            <h2 class="mb-4" [ngSwitch]="type$ | async">
+                <ng-container *ngSwitchCase="'resolver'" translate="label.source">Source</ng-container>
+                <ng-container *ngSwitchDefault translate="label.provider">Provider</ng-container>
+                Configuration
+            </h2>
             <ng-container *ngIf="name$ | async">
                 <router-outlet></router-outlet>
             </ng-container>

diff --git a/ui/src/app/metadata/configuration/container/configuration.component.ts b/ui/src/app/metadata/configuration/container/configuration.component.ts
@@ -20,6 +20,7 @@ export class ConfigurationComponent implements OnDestroy {
     private ngUnsubscribe: Subject<void> = new Subject<void>();
 
     name$: Observable<string>;
+    type$: Observable<string>
 
     constructor(
         private store: Store<fromConfiguration.ConfigurationState>,
@@ -53,6 +54,7 @@ export class ConfigurationComponent implements OnDestroy {
         });
 
         this.name$ = this.store.select(fromReducer.getConfigurationModelName);
+        this.type$ = this.store.select(fromReducer.getConfigurationModelType);
     }
 
     ngOnDestroy() {

diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -9,10 +9,19 @@
             <i class="fa fa-history sr-hidden"></i>&nbsp;
             <translate-i18n key="action.version-history">Version History</translate-i18n>
         </a>
-        <div class="btn-group">
-            <a class="btn" routerLink="../options" routerLinkActive="btn-primary" translate="action.options">Options</a>
-            <a class="btn" routerLink="../xml" routerLinkActive="btn-primary" translate="action.xml">XML</a>
+        <div class="btn-group" *ngIf="hasXml$ | async">
+            <a class="btn"
+                routerLink="../options"
+                routerLinkActive="btn-primary"
+                translate="action.options">Options</a>
+            <a class="btn"
+                routerLink="../xml"
+                routerLinkActive="btn-primary"
+                translate="action.xml">XML</a>
         </div>
     </div>
-    <metadata-configuration [configuration]="configuration$ | async"></metadata-configuration>
+    <metadata-configuration
+        [configuration]="configuration$ | async">
+    </metadata-configuration>
+    <filter-list [filters]="filters$ | async"></filter-list>
 </div>
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.ts b/ui/src/app/metadata/configuration/container/metadata-options.component.ts
@@ -1,19 +1,23 @@
 import { Store } from '@ngrx/store';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 
 import {
     ConfigurationState,
     getConfigurationSections,
-    getConfigurationModel,
     getSelectedVersion,
     getSelectedVersionNumber,
     getSelectedIsCurrent,
-    getConfigurationModelEnabled
+    getConfigurationModelEnabled,
+    getConfigurationHasXml,
+    getConfigurationModel
 } from '../reducer';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import { MetadataVersion } from '../model/version';
-import { map } from 'rxjs/operators';
+import { MetadataFilter } from '../../domain/model';
+import { getAdditionalFilters } from '../../filter/reducer';
+import { ClearFilters, LoadFilterRequest } from '../../filter/action/collection.action';
+import { takeUntil, map } from 'rxjs/operators';
 import { Metadata } from '../../domain/domain.type';
 
 @Component({
@@ -22,21 +26,44 @@ import { Metadata } from '../../domain/domain.type';
     templateUrl: './metadata-options.component.html',
     styleUrls: []
 })
-export class MetadataOptionsComponent {
+export class MetadataOptionsComponent implements OnDestroy {
+
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
 
     configuration$: Observable<MetadataConfiguration>;
     isEnabled$: Observable<boolean>;
     version$: Observable<MetadataVersion>;
     versionNumber$: Observable<number>;
     isCurrent$: Observable<boolean>;
+    hasXml$: Observable<boolean>;
+    filters$: Observable<unknown[]>;
+    model$: Observable<Metadata>;
 
     constructor(
         private store: Store<ConfigurationState>
     ) {
         this.configuration$ = this.store.select(getConfigurationSections);
+        this.model$ = this.store.select(getConfigurationModel);
         this.isEnabled$ = this.store.select(getConfigurationModelEnabled);
         this.version$ = this.store.select(getSelectedVersion);
         this.versionNumber$ = this.store.select(getSelectedVersionNumber);
         this.isCurrent$ = this.store.select(getSelectedIsCurrent);
+        this.hasXml$ = this.store.select(getConfigurationHasXml);
+        this.filters$ = this.store.select(getAdditionalFilters);
+
+        this.model$
+            .pipe(
+                takeUntil(this.ngUnsubscribe)
+            )
+            .subscribe(p => {
+                this.store.dispatch(new LoadFilterRequest(p.resourceId));
+            });
+    }
+
+    ngOnDestroy(): void {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+
+        this.store.dispatch(new ClearFilters());
     }
 }
diff --git a/ui/src/app/metadata/configuration/effect/configuration.effect.ts b/ui/src/app/metadata/configuration/effect/configuration.effect.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Effect, Actions, ofType } from '@ngrx/effects';
-import { switchMap, catchError, map, tap, withLatestFrom } from 'rxjs/operators';
+import { switchMap, catchError, map, tap, withLatestFrom, filter } from 'rxjs/operators';
 import { of, Observable } from 'rxjs';
 import * as FileSaver from 'file-saver';
 import { Store } from '@ngrx/store';
@@ -53,22 +53,11 @@ export class MetadataConfigurationEffects {
     @Effect()
     loadMetadataXml$ = this.actions$.pipe(
         ofType<LoadMetadataRequest>(ConfigurationActionTypes.LOAD_METADATA_REQUEST),
-        switchMap(action => {
-            let loader: Observable<string>;
-            switch (action.payload.type) {
-                case 'filter':
-                    loader = this.entityService.preview(action.payload.id);
-                    break;
-                default:
-                    loader = this.providerService.preview(action.payload.id);
-                    break;
-            }
-
-            return loader.pipe(
-                map(xml => new LoadXmlSuccess(xml)),
-                catchError(error => of(new LoadXmlError(error)))
-            );
-        })
+        filter(action => action.payload.type === 'resolver'),
+        switchMap(action => this.providerService.preview(action.payload.id).pipe(
+            map(xml => new LoadXmlSuccess(xml)),
+            catchError(error => of(new LoadXmlError(error)))
+        ))
     );
 
     @Effect()

diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -104,9 +104,15 @@ export const getConfigurationModelEnabledFn =
 export const getConfigurationModelNameFn =
     (config: Metadata) => config ? ('serviceProviderName' in config) ? config.serviceProviderName : config.name : false;
 
+export const getConfigurationModelTypeFn =
+    (config: Metadata) => config ? ('@type' in config) ? config['@type'] : 'resolver' : null;
+
 export const getConfigurationModelEnabled = createSelector(getConfigurationModel, getConfigurationModelEnabledFn);
 export const getConfigurationModelName = createSelector(getConfigurationModel, getConfigurationModelNameFn);
+export const getConfigurationModelType = createSelector(getConfigurationModel, getConfigurationModelTypeFn);
 
+export const getConfigurationHasXml = createSelector(getConfigurationXml, xml => !!xml);
+export const getConfigurationFilters = createSelector(getConfigurationModel, model => model.metadataFilters);
 // Version History
 
 export const getHistoryState = createSelector(getState, getHistoryStateFn);

diff --git a/ui/src/app/metadata/configuration/service/configuration.service.ts b/ui/src/app/metadata/configuration/service/configuration.service.ts
@@ -8,19 +8,23 @@ import { MetadataProviderEditorTypes } from '../../provider/model';
 import { Schema } from '../model/schema';
 import { TYPES } from '../configuration.values';
 import { ResolverService } from '../../domain/service/resolver.service';
+import { MetadataProviderService } from '../../domain/service/provider.service';
 
 @Injectable()
 export class MetadataConfigurationService {
 
     constructor(
         private resolverService: ResolverService,
+        private providerService: MetadataProviderService,
         private http: HttpClient
     ) {}
 
     find(id: string, type: string): Observable<Metadata> {
         switch (type) {
             case TYPES.resolver:
                 return this.resolverService.find(id);
+            case TYPES.provider:
+                return this.providerService.find(id);
             default:
                 return throwError(new Error('Type not supported'));
         }

diff --git a/ui/src/app/metadata/domain/service/entity-id.service.ts b/ui/src/app/metadata/domain/service/entity-id.service.ts
@@ -14,8 +14,6 @@ export class EntityIdService {
     readonly entitiesEndpoint = '/entities';
     readonly base = '/api';
 
-    private subj: Subject<string[]> = new Subject();
-
     constructor(
         private http: HttpClient
     ) { }

diff --git a/ui/src/app/metadata/filter/container/filter-list.component.html b/ui/src/app/metadata/filter/container/filter-list.component.html
@@ -0,0 +1,62 @@
+<table class="table table-striped table-hover">
+    <thead class="">
+        <tr>
+            <th></th>
+            <th></th>
+            <th translate="label.filter-name">Filter Name</th>
+            <th translate="label.filter-type">Filter Type</th>
+            <th translate="label.filter-enabled">Enabled?</th>
+            <th translate="action.edit">Edit</th>
+            <th translate="action.delete">Delete</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let filter of filters; let i = index; first as isFirst; last as isLast;">
+            <td class="td-sm">
+                <div class="d-flex justify-content-center">
+                    <button class="btn btn-link" (click)="onUpdateOrderUp.emit(filter)" [disabled]="isFirst">
+                        <i class="fa fa-arrow-circle-up fa-lg sr-hidden"></i>
+                        <span class="sr-only" translate="action.move-up">Move Up</span>
+                    </button>
+                    <button class="btn btn-link" (click)="onUpdateOrderDown.emit(filter)" [disabled]="isLast">
+                        <i class="fa fa-arrow-circle-down fa-lg sr-hidden"></i>
+                        <span class="sr-only" translate="action.move-up">Move Down</span>
+                    </button>
+                </div>
+            </td>
+            <td class="td-xs">{{ i + 1 }}</td>
+            <td class="td-lg">{{ filter.name }}</td>
+            <td class="td-lg">{{ filter['@type'] }}</td>
+            <td class="td-sm">
+                <div class="d-flex justify-content-center">
+                    <div class="custom-control custom-switch">
+                        <input type="checkbox"
+                            class="custom-control-input"
+                            [disabled]="disabled"
+                            [id]="'customSwitch' + i"
+                            [value]="filter.filterEnabled"
+                            [checked]="filter.filterEnabled"
+                            (change)="onToggleEnabled.emit(filter)">
+                        <label class="custom-control-label" [for]="'customSwitch' + i">
+                            <span class="sr-only">Toggle this switch element</span>
+                        </label>
+                    </div>
+                    <i class="fa fa-spinner fa-pulse fa-lg fa-fw" *ngIf="disabled"></i>
+                </div>
+            </td>
+            <td class="td-sm">
+                <a class="btn btn-link" [class.disabled]="disabled"
+                    [routerLink]="['../', 'filter', filter.resourceId, 'edit']">
+                    <i class="fa fa-edit fa-lg sr-hidden text-info"></i>
+                    <span class="sr-only" translate="action.edit">Edit</span>
+                </a>
+            </td>
+            <td class="td-sm">
+                <button class="btn btn-link" (click)="onRemove.emit(filter.resourceId)">
+                    <i class="fa fa-trash fa-lg sr-hidden text-danger"></i>
+                    <span class="sr-only" translate="action.edit">Delete</span>
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/ui/src/app/metadata/filter/container/filter-list.component.scss b/ui/src/app/metadata/filter/container/filter-list.component.scss
@@ -0,0 +1,17 @@
+:host {
+    .table {
+        .td-sm {
+            max-width: 100px;
+        }
+        .td-xs {
+            max-width: 20px;
+        }
+        .td-lg {
+            width: 30%;
+        }
+
+        td {
+            vertical-align: middle;
+        }
+    }
+}
diff --git a/ui/src/app/metadata/filter/container/filter-list.component.spec.ts b/ui/src/app/metadata/filter/container/filter-list.component.spec.ts
diff --git a/ui/src/app/metadata/filter/container/filter-list.component.ts b/ui/src/app/metadata/filter/container/filter-list.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { MetadataFilter } from '../../domain/model';
+
+import {} from '../../filter/action/collection.action';
+import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
+
+@Component({
+    selector: 'filter-list',
+    templateUrl: './filter-list.component.html',
+    styleUrls: ['./filter-list.component.scss']
+})
+export class FilterListComponent {
+
+    @Input() filters: MetadataFilter[];
+    @Input() disabled: boolean;
+
+    @Output() onUpdateOrderUp: EventEmitter<MetadataFilter> = new EventEmitter();
+    @Output() onUpdateOrderDown: EventEmitter<MetadataFilter> = new EventEmitter();
+    @Output() onRemove: EventEmitter<MetadataFilter> = new EventEmitter();
+    @Output() onToggleEnabled: EventEmitter<MetadataFilter> = new EventEmitter();
+
+    formats = NAV_FORMATS;
+
+    constructor() {}
+}
diff --git a/ui/src/app/metadata/filter/filter.module.ts b/ui/src/app/metadata/filter/filter.module.ts
@@ -22,14 +22,16 @@ import { FilterCollectionEffects } from './effect/collection.effect';
 import { FormModule } from '../../schema-form/schema-form.module';
 import { I18nModule } from '../../i18n/i18n.module';
 import { FilterComponent } from './container/filter.component';
+import { FilterListComponent } from './container/filter-list.component';
 
 @NgModule({
     declarations: [
         NewFilterComponent,
         EditFilterComponent,
         SelectFilterComponent,
         SearchDialogComponent,
-        FilterComponent
+        FilterComponent,
+        FilterListComponent
     ],
     entryComponents: [
         SearchDialogComponent
@@ -45,6 +47,9 @@ import { FilterComponent } from './container/filter.component';
         RouterModule,
         FormModule,
         I18nModule
+    ],
+    exports: [
+        FilterListComponent
     ]
 })
 export class FilterModule {

diff --git a/ui/src/app/metadata/manager/component/provider-search.component.html b/ui/src/app/metadata/manager/component/provider-search.component.html
@@ -10,7 +10,8 @@
             aria-label="To search for a source, enter name then press enter"
             formControlName="search"
             role="textbox"
-            (keyup)="search.emit($event.target.value)">
+            (keyup)="search.emit($event.target.value)"
+            disableValidation="true">
         <div class="input-group-append">
             <button class="btn btn-link"
                 type="button"

diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
@@ -28,7 +28,7 @@
                         <tr *ngFor="let provider of limited$ | async; index as i; first as isFirst; last as isLast;">
                             <td>
                                 <div class="d-flex align-items-center">
-                                    <div *ngIf="!(isSearching$ | async)" class="provider-index text-center text-primary font-weight-bold">{{ i }}</div>
+                                    <div *ngIf="!(isSearching$ | async)" class="provider-index text-center text-primary font-weight-bold">{{ i + 1 }}</div>
                                     <div *ngIf="(isSearching$ | async)" class="provider-index text-center text-primary font-weight-bold">&mdash;</div>
                                     &nbsp;
                                     <button class="btn btn-link px-1"
@@ -46,8 +46,7 @@
                                 </div>
                             </td>
                             <td>
-                                <!--<a [routerLink]="['/', 'metadata', 'provider', provider.id, 'configuration', 'options']">{{ provider.name }}</a>-->
-                                <a href="" (click)="edit(provider, $event)">{{ provider.name }}</a>
+                                <a [routerLink]="['/', 'metadata', 'provider', provider.id, 'configuration', 'options']">{{ provider.name }}</a>
                             </td>
                             <td>{{ provider['@type'] }}</td>
                             <td>{{ provider.createdBy }}</td>