Merged in feature/SHIBUI-573 (pull request #111)

SHIBUI-573 - Dashboard refactor for providers/sources

Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>

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"

ui/src/app/metadata/manager/container/dashboard-providers-list.component.html

@@ -0,0 +1,17 @@
+<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>
+
+
+

ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { MetadataProvider } from '../../domain/model';
+import { Observable } from '../../../../../node_modules/rxjs';
+import { Store } from '@ngrx/store';
+import { ProviderState, getAllProviders } from '../../provider/reducer';
+
+@Component({
+    selector: 'dashboard-providers-list',
+    templateUrl: './dashboard-providers-list.component.html'
+})
+
+export class DashboardProvidersListComponent {
+
+    providers$: Observable<MetadataProvider[]>;
+
+    constructor(
+        private store: Store<ProviderState>
+    ) {
+        this.providers$ = this.store.select(getAllProviders);
+    }
+}

ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html

@@ -0,0 +1,44 @@
+<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>

ui/src/app/metadata/manager/container/manager.component.spec.ts → ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts

@@ -5,22 +5,22 @@ 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';
 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);

ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts

@@ -0,0 +1,98 @@
+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 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');
+                }
+            );
+    }
+}

ui/src/app/metadata/manager/container/manager.component.html

@@ -1,42 +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="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">Sources</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" [routerLink]="['./', 'providers']" routerLinkActive="active">Providers</a>
+        </li>
+    </ul>
+    <router-outlet></router-outlet>
 </div>

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;
+    }
 }