-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
SHIBUI-573 Refactored Sources page with tabs
- Loading branch information
Showing
8 changed files
with
179 additions
and
165 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
ui/src/app/metadata/manager/component/provider-search.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 16 additions & 2 deletions
18
ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
45 changes: 44 additions & 1 deletion
45
ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 90 additions & 2 deletions
92
ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| } | ||
| ); | ||
| } | ||
| } |
60 changes: 9 additions & 51 deletions
60
ui/src/app/metadata/manager/container/manager.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
10 changes: 10 additions & 0 deletions
10
ui/src/app/metadata/manager/container/manager.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
Oops, something went wrong.