Merge branch 'feature/SHIBUI-1281' into feature/SHIBUI-1268

TIER · Jun 21, 2019 · c3e6a81 · c3e6a81
2 parents a46c753 + 230b3fb
commit c3e6a81
Show file tree

Hide file tree

Showing 20 changed files with 118 additions and 77 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -385,6 +385,11 @@ label.email=Email
 label.role=Role
 label.delete=Delete?
 
+label.title=Title
+label.enabled=Enabled
+label.author=Author
+label.creation-date=Creation Date
+
 label.metadata-resolver-history=Metadata resolver history
 label.metadata-version-history=Metadata Version History
 label.select-version=Select Version

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -43,6 +43,7 @@
     "deepmerge": "^2.2.1",
     "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",
+    "ngx-infinite-scroll": "^7.2.0",
     "ngx-schema-form": "^2.2.0-beta.1",
     "rxjs": "^6.5.1",
     "rxjs-compat": "^6.5.1",

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
@@ -58,7 +58,7 @@
         </ul>
     </div>
 </nav>
-<main>
+<main class="pad-content">
     <router-outlet></router-outlet>
     <notification-list></notification-list>
 </main>

diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss
@@ -13,3 +13,15 @@ nav.navbar {
         max-height: 60px;
     }
 }
+
+@media only screen and (min-width: 1024px) {
+    .pad-content {
+        padding: 1rem 3rem;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .pad-content {
+        padding: 2rem 5rem;
+    }
+}
diff --git a/ui/src/app/metadata/configuration/reducer/configuration.reducer.spec.ts b/ui/src/app/metadata/configuration/reducer/configuration.reducer.spec.ts
@@ -12,7 +12,8 @@ describe('Configuration Reducer', () => {
     const model: MetadataResolver = {
         id: 'foo',
         serviceProviderName: 'foo',
-        '@type': 'MetadataResolver'
+        '@type': 'MetadataResolver',
+        createdBy: 'admin'
     };
     const xml = `<entity-descriptor></entity-descriptor>`;
 

diff --git a/ui/src/app/metadata/domain/entity/filter/entity-attributes-filter.ts b/ui/src/app/metadata/domain/entity/filter/entity-attributes-filter.ts
@@ -7,6 +7,7 @@ export class EntityAttributesFilterEntity implements MetadataFilter, MetadataEnt
     modifiedDate?: string;
     version: string;
     resourceId: string;
+    createdBy: string;
 
     name = '';
     filterEnabled = false;

diff --git a/ui/src/app/metadata/domain/entity/filter/nameid-format-filter.ts b/ui/src/app/metadata/domain/entity/filter/nameid-format-filter.ts
@@ -7,6 +7,7 @@ export class NameIDFormatFilterEntity implements MetadataFilter, MetadataEntity
     modifiedDate?: string;
     version: string;
     resourceId: string;
+    createdBy: string;
 
     name = '';
     filterEnabled = false;

diff --git a/ui/src/app/metadata/domain/entity/resolver/file-backed-http-metadata-resolver.ts b/ui/src/app/metadata/domain/entity/resolver/file-backed-http-metadata-resolver.ts
@@ -18,6 +18,7 @@ export class FileBackedHttpMetadataResolver implements MetadataResolver, Metadat
     createdDate?: string;
     modifiedDate?: string;
     version: string;
+    createdBy: string;
 
     entityId = '';
     serviceProviderName = '';
@@ -48,6 +49,8 @@ export class FileBackedHttpMetadataResolver implements MetadataResolver, Metadat
 
     attributeRelease = [] as string[];
 
+    [property: string]: unknown;
+
     constructor(descriptor?: Partial<MetadataResolver>) {
         Object.assign(this, descriptor);
     }
@@ -65,7 +68,7 @@ export class FileBackedHttpMetadataResolver implements MetadataResolver, Metadat
     }
 
     getCreationDate(): Date {
-        return new Date(this.createdDate);
+        return this.createdDate ? new Date(this.createdDate) : null;
     }
 
     get name(): string {

diff --git a/ui/src/app/metadata/domain/model/metadata-base.ts b/ui/src/app/metadata/domain/model/metadata-base.ts
@@ -1,6 +1,7 @@
 export interface MetadataBase {
     id?: string;
     createdDate?: string;
+    createdBy: string;
     modifiedDate?: string;
     version?: string;
 }
diff --git a/ui/src/app/metadata/domain/model/metadata-entity.ts b/ui/src/app/metadata/domain/model/metadata-entity.ts
@@ -3,6 +3,8 @@ export interface MetadataEntity {
     enabled: boolean;
     kind: string;
 
+    createdBy: string;
+
     getId(): string;
     getDisplayId(): string;
     isDraft(): boolean;

diff --git a/ui/src/app/metadata/manager/component/provider-search.component.html b/ui/src/app/metadata/manager/component/provider-search.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="searchForm">
-    <div class="input-group input-group-sm">
+    <div class="input-group">
         <label [for]="search" class="sr-only" translate="action.search">Search</label>
         <input
             id="search"
@@ -12,7 +12,7 @@
             role="textbox"
             (keyup)="search.emit($event.target.value)">
         <div class="input-group-append">
-            <button class="btn btn-light"
+            <button class="btn btn-link"
                 type="button"
                 tabindex="0"
                 aria-label="Clear search text field"

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
@@ -1,45 +1,51 @@
 <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" translate="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>
+            <span class="lead" translate="label.current-metadata-sources">Current Metadata Sources</span>
         </div>
         <div class="p-3">
-            <ul class="list-unstyled m-0">
-                <li *ngFor="let resolver of limited$ | async; index as i"
-                    [ngClass]="{'mt-2': i > 0}"
-                    aria-label="Provider Item Accordion. Press Spacebar to open">
-                    <resolver-item
-                        [entity]="resolver"
-                        [isOpen]="(entitiesOpen$ | async)[resolver.getId()]"
-                        (select)="edit(resolver)"
-                        (toggle)="toggleEntity(resolver)"
-                        (preview)="viewConfiguration(resolver)"
-                        (delete)="deleteResolver(resolver)"
-                        (history)="viewMetadataHistory(resolver)"
-                        [allowDelete]="resolver.isDraft()">
-                    </resolver-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>
+            <provider-search
+                class="w-50 d-block"
+                [query]="searchQuery$ | async"
+                [searching]="loading$ | async"
+                (search)="search($event)">
+            </provider-search>
+            <div class="table-responsive mt-3" *ngIf="limited$ | async">
+                <table class="table table-striped w-100 table-hover">
+                    <thead>
+                        <th translate="label.title">Title</th>
+                        <th class="w-40" translate="label.entity-id">Entity ID</th>
+                        <th class="w-15" translate="label.author">Author</th>
+                        <th class="w-15" translate="label.creation-date">Created Date</th>
+                        <th class="text-right w-15" translate="label.enabled">Enabled</th>
+                    </thead>
+                    <tbody infiniteScroll
+                            [infiniteScrollDistance]="2"
+                            [infiniteScrollThrottle]="50"
+                            (scrolled)="onScroll($event)">
+                        <tr *ngFor="let resolver of limited$ | async; index as i">
+                            <td><a [routerLink]="['/', 'metadata', 'resolver', resolver.getId(), 'configuration', 'options']">{{ resolver.name }}</a></td>
+                            <td>{{ resolver.getDisplayId() }}</td>
+                            <td>{{ resolver.createdBy }}</td>
+                            <td>{{ resolver.getCreationDate() ? (resolver.getCreationDate() | customDate) : '&mdash;' }}</td>
+                            <td class="text-right">
+                                <span class="badge badge-warning"
+                                    *ngIf="resolver.isDraft()"
+                                    aria-label="Warning Badge: Incomplete Form"
+                                    translate="message.incomplete-form">
+                                    Incomplete Form
+                                </span>
+                                <span class="badge"
+                                    *ngIf="!resolver.isDraft()"
+                                    [class.badge-danger]="!resolver.enabled"
+                                    [class.badge-success]="resolver.enabled">
+                                    <span *ngIf="resolver.enabled" translate="value.enabled">Enabled</span>
+                                    <span *ngIf="!resolver.enabled" translate="value.disabled">Enabled</span>
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>

diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
@@ -1,6 +1,6 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { NgbPaginationModule, NgbModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -11,9 +11,9 @@ import { RouterStub } from '../../../../testing/router.stub';
 import { NgbModalStub } from '../../../../testing/modal.stub';
 import { FileBackedHttpMetadataResolver } from '../../domain/entity';
 import { DashboardResolversListComponent } from './dashboard-resolvers-list.component';
-import { ResolverItemComponent } from '../component/resolver-item.component';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 import { CustomDatePipe } from '../../../shared/pipe/date.pipe';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 
 describe('Dashboard Resolvers List Page', () => {
@@ -49,12 +49,13 @@ describe('Dashboard Resolvers List Page', () => {
                 ReactiveFormsModule,
                 NgbPaginationModule,
                 NgbModalModule,
-                MockI18nModule
+                MockI18nModule,
+                InfiniteScrollModule,
+                RouterModule
             ],
             declarations: [
                 DashboardResolversListComponent,
                 ProviderSearchComponent,
-                ResolverItemComponent,
                 DeleteDialogComponent,
                 CustomDatePipe
             ],
@@ -75,23 +76,6 @@ describe('Dashboard Resolvers List Page', () => {
         expect(fixture).toBeDefined();
     });
 
-    xdescribe('getPagedResolvers method', () => {});
-
-    describe('changePage method', () => {
-        it('should update the page value', () => {
-            let page = 2;
-            instance.changePage(page);
-            expect(instance.page).toBe(page);
-        });
-
-        it('should update the paged resolvers list', () => {
-            let page = 2;
-            spyOn(instance, 'getPagedResolvers');
-            instance.changePage(page);
-            expect(instance.getPagedResolvers).toHaveBeenCalled();
-        });
-    });
-
     describe('toggleResolver method', () => {
         it('should fire a redux action', () => {
             instance.toggleEntity(draft);

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
@@ -6,12 +6,10 @@ 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({
@@ -26,7 +24,7 @@ export class DashboardResolversListComponent implements OnInit {
 
     total$: Observable<number>;
     page = 1;
-    limit = 8;
+    limit = 20;
     limited$: Observable<MetadataEntity[]>;
 
     entitiesOpen$: Observable<{ [key: string]: boolean }>;
@@ -54,13 +52,13 @@ export class DashboardResolversListComponent implements OnInit {
         return list$.pipe(
             map((providers: MetadataEntity[]) => {
                 let maxIndex = (page * this.limit) - 1,
-                    minIndex = ((page - 1) * this.limit);
+                    minIndex = 0;
                 return providers.filter((resolver: MetadataEntity, index: number) => (maxIndex >= index && index >= minIndex));
             })
         );
     }
 
-    changePage(index: number): void {
+    loadMore(index: number): void {
         this.page = index;
         this.limited$ = this.getPagedResolvers(index, this.resolvers$);
     }
@@ -70,6 +68,10 @@ export class DashboardResolversListComponent implements OnInit {
         this.page = 1;
     }
 
+    onScroll(event: Event): void {
+        this.loadMore(this.page + 1);
+    }
+
     edit(entity: MetadataEntity): void {
         if (entity.isDraft()) {
             this.router.navigate(['metadata', 'resolver', 'new', 'blank', 'common'], {
@@ -86,11 +88,6 @@ export class DashboardResolversListComponent implements OnInit {
         this.store.dispatch(new ToggleEntityDisplay(entity.getId()));
     }
 
-    viewConfiguration(entity: MetadataEntity): void {
-        // this.store.dispatch(new PreviewEntity({ id: entity.getId(), entity }));
-        this.router.navigate(['metadata', 'resolver', entity.getId(), 'configuration', 'options']);
-    }
-
     viewMetadataHistory(entity: MetadataEntity): void {
         this.router.navigate(['metadata', 'resolver', entity.getId(), 'versions']);
     }

diff --git a/ui/src/app/metadata/manager/manager.module.ts b/ui/src/app/metadata/manager/manager.module.ts
@@ -6,6 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { NgbPaginationModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { ManagerComponent } from './container/manager.component';
 import { EntityItemComponent } from './component/entity-item.component';
@@ -44,7 +45,8 @@ import { I18nModule } from '../../i18n/i18n.module';
         NgbDropdownModule,
         HttpClientModule,
         SharedModule,
-        I18nModule
+        I18nModule,
+        InfiniteScrollModule
     ],
     exports: [
         ResolverItemComponent

diff --git a/ui/src/app/metadata/provider/reducer/collection.reducer.spec.ts b/ui/src/app/metadata/provider/reducer/collection.reducer.spec.ts
@@ -24,6 +24,7 @@ describe('Provider Collection Reducer', () => {
                     name: 'name',
                     '@type': 'foo',
                     enabled: true,
+                    createdBy: 'admin',
                     createdDate: new Date().toLocaleDateString(),
                     sortKey: 1,
                     xmlId: 'foo',
@@ -34,6 +35,7 @@ describe('Provider Collection Reducer', () => {
                     name: 'bar',
                     '@type': 'bar',
                     enabled: false,
+                    createdBy: 'admin',
                     createdDate: new Date().toLocaleDateString(),
                     sortKey: 2,
                     xmlId: 'bar',