From 4075525ff5d7d6b32a681ccb764cb96f09a3a954 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 10 Jul 2018 10:42:13 -0700
Subject: [PATCH] SHIBUI-573 Refactored Sources page with tabs

---
 .../component/provider-search.component.html  |   2 +-
 .../dashboard-providers-list.component.html   |  18 ++-
 .../dashboard-resolvers-list.component.html   |  45 +++++++-
 ...ashboard-resolvers-list.component.spec.ts} |  12 +-
 .../dashboard-resolvers-list.component.ts     |  92 ++++++++++++++-
 .../manager/container/manager.component.html  |  60 ++--------
 .../manager/container/manager.component.scss  |  10 ++
 .../manager/container/manager.component.ts    | 105 +-----------------
 8 files changed, 179 insertions(+), 165 deletions(-)
 rename ui/src/app/metadata/manager/container/{manager.component.spec.ts => dashboard-resolvers-list.component.spec.ts} (92%)

diff --git a/ui/src/app/metadata/manager/component/provider-search.component.html b/ui/src/app/metadata/manager/component/provider-search.component.html
index ad739471d..2a0682179 100644
--- a/ui/src/app/metadata/manager/component/provider-search.component.html
+++ b/ui/src/app/metadata/manager/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">
+    <div class="input-group input-group-sm">
         <input
             id="search"
             type="text"
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
index b30d2702a..cf446c1d1 100644
--- a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
+++ b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
@@ -1,3 +1,17 @@
-Metadata providers
+<section class="section">
+    <div class="section-body border border-top-0 border-primary">
+        <div class="section-header bg-primary p-2 text-light">
+            <div class="row justify-content-between">
+                <div class="col-12">
+                    <span class="lead" i18n="@@label--current-metadata-sources">Current Metadata Providers</span>
+                </div>
+            </div>
+        </div>
+        <div class="p-3">
+            <code><pre>{{ providers$ | async | json }}</pre></code>
+        </div>
+    </div>
+</section>
+
+
 
-<code><pre>{{ providers$ | async | json }}</pre></code>
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
index 634e521e8..647b976a0 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
@@ -1 +1,44 @@
-Metadata resolvers
+<section class="section">
+    <div class="section-body border border-top-0 border-primary">
+        <div class="section-header bg-primary p-2 text-light">
+            <div class="row justify-content-between">
+                <div class="col-md-8">
+                    <span class="lead" i18n="@@label--current-metadata-sources">Current Metadata Sources</span>
+                </div>
+                <div class="col-md-4">
+                    <provider-search
+                        [query]="searchQuery$ | async"
+                        [searching]="loading$ | async"
+                        (search)="search($event)">
+                    </provider-search>
+                </div>
+            </div>
+        </div>
+        <div class="p-3">
+            <ul class="list-unstyled m-0">
+                <li *ngFor="let entity of limited$ | async; index as i"
+                    [ngClass]="{'mt-2': i > 0}"
+                    aria-label="Provider Item Accordion. Press Spacebar to open">
+                    <entity-item
+                        [entity]="entity"
+                        [isOpen]="(entitiesOpen$ | async)[entity.getId()]"
+                        (select)="edit(entity)"
+                        (toggle)="toggleEntity(entity)"
+                        (preview)="openPreviewDialog(entity)"
+                        (delete)="deleteResolver(entity)">
+                    </entity-item>
+                </li>
+            </ul>
+            <div class="mt-3 clearfix" *ngIf="(total$ | async) > limit">
+                <ngb-pagination
+                    class="float-right"
+                    [collectionSize]="total$ | async"
+                    [page]="page"
+                    [pageSize]="limit"
+                    (pageChange)="changePage($event)"
+                    aria-label="Pages">
+                </ngb-pagination>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/ui/src/app/metadata/manager/container/manager.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
similarity index 92%
rename from ui/src/app/metadata/manager/container/manager.component.spec.ts
rename to ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
index 7d92250bd..9a9a8150d 100644
--- a/ui/src/app/metadata/manager/container/manager.component.spec.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
@@ -5,7 +5,6 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap/pagination/pagination.module';
 import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
-import { ManagerComponent } from './manager.component';
 import * as fromDashboard from '../reducer';
 import { ProviderSearchComponent } from '../component/provider-search.component';
 import { EntityItemComponent } from '../component/entity-item.component';
@@ -13,14 +12,15 @@ import { DeleteDialogComponent } from '../component/delete-dialog.component';
 import { RouterStub } from '../../../../testing/router.stub';
 import { NgbModalStub } from '../../../../testing/modal.stub';
 import { FileBackedHttpMetadataResolver } from '../../domain/entity';
+import { DashboardResolversListComponent } from './dashboard-resolvers-list.component';
 
 
-describe('Metadata Manager Page', () => {
-    let fixture: ComponentFixture<ManagerComponent>;
+describe('Dashboard Resolvers List Page', () => {
+    let fixture: ComponentFixture<DashboardResolversListComponent>;
     let store: Store<fromDashboard.DashboardState>;
     let router: Router;
     let modal: NgbModal;
-    let instance: ManagerComponent;
+    let instance: DashboardResolversListComponent;
 
     let draft = new FileBackedHttpMetadataResolver({
             entityId: 'foo',
@@ -48,14 +48,14 @@ describe('Metadata Manager Page', () => {
                 NgbModalModule
             ],
             declarations: [
-                ManagerComponent,
+                DashboardResolversListComponent,
                 ProviderSearchComponent,
                 EntityItemComponent,
                 DeleteDialogComponent
             ],
         });
 
-        fixture = TestBed.createComponent(ManagerComponent);
+        fixture = TestBed.createComponent(DashboardResolversListComponent);
         instance = fixture.componentInstance;
         store = TestBed.get(Store);
         router = TestBed.get(Router);
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
index d1748b372..962efd52e 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
@@ -1,10 +1,98 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { MetadataEntity, MetadataResolver } from '../../domain/model';
+import { MetadataTypes, Metadata } from '../../domain/domain.type';
+import * as searchActions from '../action/search.action';
+import * as fromDashboard from '../reducer';
+import { ToggleEntityDisplay } from '../action/manager.action';
+import { DeleteDialogComponent } from '../component/delete-dialog.component';
+import { PreviewEntity } from '../../domain/action/entity.action';
+import { RemoveDraftRequest } from '../../resolver/action/draft.action';
 
 @Component({
     selector: 'dashboard-resolvers-list',
     templateUrl: './dashboard-resolvers-list.component.html'
 })
 
-export class DashboardResolversListComponent {
+export class DashboardResolversListComponent implements OnInit {
+    searchQuery$: Observable<string>;
+    resolvers$: Observable<MetadataEntity[]>;
+    loading$: Observable<boolean>;
+
+    total$: Observable<number>;
+    page = 1;
+    limit = 8;
+    limited$: Observable<MetadataEntity[]>;
+
+    entitiesOpen$: Observable<{ [key: string]: boolean }>;
+
+    constructor(
+        private store: Store<fromDashboard.DashboardState>,
+        private router: Router,
+        private modalService: NgbModal
+    ) {
+        this.resolvers$ = store.select(fromDashboard.getSearchResults);
+        this.searchQuery$ = store.select(fromDashboard.getSearchQuery);
+        this.loading$ = store.select(fromDashboard.getSearchLoading);
+        this.entitiesOpen$ = store.select(fromDashboard.getOpenProviders);
+
+        this.total$ = this.resolvers$.pipe(map(list => list.length));
+
+        this.limited$ = this.getPagedResolvers(this.page, this.resolvers$);
+    }
+
+    ngOnInit(): void {
+        this.search();
+    }
+
+    getPagedResolvers(page: number, list$: Observable<MetadataEntity[]>): Observable<MetadataEntity[]> {
+        return list$.pipe(
+            map((providers: MetadataEntity[]) => {
+                let maxIndex = (page * this.limit) - 1,
+                    minIndex = ((page - 1) * this.limit);
+                return providers.filter((resolver: MetadataEntity, index: number) => (maxIndex >= index && index >= minIndex));
+            })
+        );
+    }
+
+    changePage(index: number): void {
+        this.page = index;
+        this.limited$ = this.getPagedResolvers(index, this.resolvers$);
+    }
+
+    search(query: string = ''): void {
+        this.store.dispatch(new searchActions.SearchAction(query));
+        this.page = 1;
+    }
+
+    edit(entity: MetadataEntity): void {
+        this.router.navigate(['metadata', 'resolver', entity.getId(), entity.isDraft() ? 'wizard' : 'edit']);
+    }
+
+    toggleEntity(entity: MetadataEntity): void {
+        this.store.dispatch(new ToggleEntityDisplay(entity.getId()));
+    }
+
+    openPreviewDialog(entity: MetadataEntity): void {
+        this.store.dispatch(new PreviewEntity(entity));
+    }
 
+    deleteResolver(entity: MetadataResolver): void {
+        this.modalService
+            .open(DeleteDialogComponent)
+            .result
+            .then(
+                success => {
+                    this.store.dispatch(new RemoveDraftRequest(entity));
+                },
+                err => {
+                    console.log('Cancelled');
+                }
+            );
+    }
 }
diff --git a/ui/src/app/metadata/manager/container/manager.component.html b/ui/src/app/metadata/manager/container/manager.component.html
index 26cc154eb..054e5c5c4 100644
--- a/ui/src/app/metadata/manager/container/manager.component.html
+++ b/ui/src/app/metadata/manager/container/manager.component.html
@@ -1,53 +1,11 @@
 <div class="container-fluid p-3" role="main">
-    <section class="section">
-        <div class="section-header bg-primary p-2 text-light">
-            <div class="row justify-content-between">
-                <div class="col-md-8">
-                    <span class="lead" i18n="@@label--current-metadata-sources">Current Metadata Sources</span>
-                </div>
-                <div class="col-md-4">
-                    <provider-search
-                        [query]="searchQuery$ | async"
-                        [searching]="loading$ | async"
-                        (search)="search($event)">
-                    </provider-search>
-                </div>
-            </div>
-        </div>
-        <div class="section-body p-2 border border-top-0 border-primary">
-            <ul class="nav nav-tabs">
-                <li class="nav-item">
-                    <a class="nav-link" [routerLink]="['./', 'resolvers']" routerLinkActive="active">Resolvers</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" [routerLink]="['./', 'providers']" routerLinkActive="active">Providers</a>
-                </li>
-            </ul>
-            <router-outlet></router-outlet>
-            <!--
-                <ul class="list-unstyled m-0">
-                    <li *ngFor="let entity of limited$ | async; index as i" [ngClass]="{'mt-2': i > 0}" aria-label="Provider Item Accordion. Press Spacebar to open">
-                        <entity-item
-                            [entity]="entity"
-                            [isOpen]="(entitiesOpen$ | async)[entity.getId()]"
-                            (select)="edit(entity)"
-                            (toggle)="toggleEntity(entity)"
-                            (preview)="openPreviewDialog(entity)"
-                            (delete)="deleteResolver(entity)">
-                        </entity-item>
-                    </li>
-                </ul>
-                <div class="mt-3 clearfix" *ngIf="(total$ | async) > limit">
-                    <ngb-pagination
-                        class="float-right"
-                        [collectionSize]="total$ | async"
-                        [page]="page"
-                        [pageSize]="limit"
-                        (pageChange)="changePage($event)"
-                        aria-label="Pages">
-                    </ngb-pagination>
-                </div>
-            -->
-        </div>
-    </section>
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a class="nav-link" [routerLink]="['./', 'resolvers']" routerLinkActive="active">Resolvers</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" [routerLink]="['./', 'providers']" routerLinkActive="active">Providers</a>
+        </li>
+    </ul>
+    <router-outlet></router-outlet>
 </div>
diff --git a/ui/src/app/metadata/manager/container/manager.component.scss b/ui/src/app/metadata/manager/container/manager.component.scss
index e740b1be2..be974d8a3 100644
--- a/ui/src/app/metadata/manager/container/manager.component.scss
+++ b/ui/src/app/metadata/manager/container/manager.component.scss
@@ -1,5 +1,15 @@
+@import '../../../../theme/palette';
+
 :host {
     .lead {
         line-height: 36px;
     }
+
+    .nav-tabs, .nav-link.active {
+        border-color: $blue;
+    }
+
+    .nav-link:hover {
+        border-bottom-color: $blue;
+    }
 }
\ No newline at end of file
diff --git a/ui/src/app/metadata/manager/container/manager.component.ts b/ui/src/app/metadata/manager/container/manager.component.ts
index 6a3331584..77a9b0cbb 100644
--- a/ui/src/app/metadata/manager/container/manager.component.ts
+++ b/ui/src/app/metadata/manager/container/manager.component.ts
@@ -1,109 +1,10 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { Router } from '@angular/router';
-import { Store } from '@ngrx/store';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { MetadataEntity, MetadataResolver } from '../../domain/model';
-import { MetadataTypes, Metadata } from '../../domain/domain.type';
-import * as searchActions from '../action/search.action';
-import * as fromDashboard from '../reducer';
-import { ToggleEntityDisplay } from '../action/manager.action';
-import { DeleteDialogComponent } from '../component/delete-dialog.component';
-import { PreviewEntity } from '../../domain/action/entity.action';
-import { RemoveDraftRequest } from '../../resolver/action/draft.action';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'manager-page',
     templateUrl: './manager.component.html',
     styleUrls: ['./manager.component.scss']
 })
-export class ManagerComponent implements OnInit {
-    searchQuery$: Observable<string>;
-    resolvers$: Observable<MetadataEntity[]>;
-    loading$: Observable<boolean>;
-
-    total$: Observable<number>;
-    page = 1;
-    limit = 8;
-    limited$: Observable<MetadataEntity[]>;
-
-    entitiesOpen$: Observable<{[key: string]: boolean}>;
-
-    filterOptions = ['all', MetadataTypes.FILTER, MetadataTypes.PROVIDER];
-    filtering$: Observable<string>;
-    filtering = 'all';
-
-    constructor(
-        private store: Store<fromDashboard.DashboardState>,
-        private router: Router,
-        private modalService: NgbModal
-    ) {
-        this.resolvers$ = store.select(fromDashboard.getSearchResults);
-        this.searchQuery$ = store.select(fromDashboard.getSearchQuery);
-        this.loading$ = store.select(fromDashboard.getSearchLoading);
-        this.entitiesOpen$ = store.select(fromDashboard.getOpenProviders);
-        this.filtering$ = store.select(fromDashboard.getFilterType);
-        this.filtering$.subscribe(f => this.filtering = f);
-
-        this.total$ = this.resolvers$.pipe(map(list => list.length));
-
-        this.limited$ = this.getPagedResolvers(this.page, this.resolvers$);
-    }
-
-    ngOnInit (): void {
-        this.search();
-        this.changeFilter('all');
-    }
-
-    getPagedResolvers(page: number, list$: Observable<MetadataEntity[]>): Observable<MetadataEntity[]> {
-        return list$.pipe(
-            map((providers: MetadataEntity[]) => {
-                let maxIndex = (page * this.limit) - 1,
-                    minIndex = ((page - 1) * this.limit);
-                return providers.filter((resolver: MetadataEntity, index: number) =>  (maxIndex >= index && index >= minIndex) );
-            })
-        );
-    }
-
-    changeFilter(type: string): void {
-        this.store.dispatch(new searchActions.FilterAction(type));
-    }
-
-    changePage(index: number): void {
-        this.page = index;
-        this.limited$ = this.getPagedResolvers(index, this.resolvers$);
-    }
-
-    search(query: string = ''): void {
-        this.store.dispatch(new searchActions.SearchAction(query));
-        this.page = 1;
-    }
-
-    edit(entity: MetadataEntity): void {
-        this.router.navigate(['metadata', 'resolver', entity.getId(), entity.isDraft() ? 'wizard' : 'edit']);
-    }
-
-    toggleEntity(entity: MetadataEntity): void {
-        this.store.dispatch(new ToggleEntityDisplay(entity.getId()));
-    }
-
-    openPreviewDialog(entity: MetadataEntity): void {
-        this.store.dispatch(new PreviewEntity(entity));
-    }
-
-    deleteResolver(entity: MetadataResolver): void {
-        this.modalService
-            .open(DeleteDialogComponent)
-            .result
-            .then(
-                success => {
-                    this.store.dispatch(new RemoveDraftRequest(entity));
-                },
-                err => {
-                    console.log('Cancelled');
-                }
-            );
-    }
+export class ManagerComponent {
+    constructor() {}
 }