Skip to content

Commit

Permalink
Implemented data retrieval for comparison
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Sep 17, 2019
1 parent fbad911 commit dbcdcdf
Show file tree
Hide file tree
Showing 13 changed files with 357 additions and 116 deletions.
2 changes: 0 additions & 2 deletions ui/src/app/metadata/configuration/action/compare.action.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { Action } from '@ngrx/store';
import { MetadataHistory } from '../model/history';
import { MetadataVersion } from '../model/version';
import { Metadata } from '../../domain/domain.type';

export enum CompareActionTypes {
Expand Down
62 changes: 62 additions & 0 deletions ui/src/app/metadata/configuration/action/filter.action.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { Action } from '@ngrx/store';
import { Metadata } from '../../domain/domain.type';
import { FormDefinition } from '../../../wizard/model/form-definition';
import { FilterComparison } from '../model/compare';
import { Schema } from '../model/schema';

export enum FilterCompareActionTypes {
LOAD_SCHEMA_REQUEST = '[Filter Compare Version] Compare Version Request',
LOAD_SCHEMA_SUCCESS = '[Filter Compare Version] Compare Version Success',
LOAD_SCHEMA_ERROR = '[Filter Compare Version] Compare Version Error',
SET_SCHEMA = '[Filter Compare Version] Set Schema',
SET_DEFINITION = '[Filter Compare Version] Set Definition',
COMPARE_FILTERS = '[Filter Compare Version] Compare Filters',
CLEAR = '[Filter Compare Version] Clear Filter Comparison'
}

export class LoadFilterSchemaRequest implements Action {
readonly type = FilterCompareActionTypes.LOAD_SCHEMA_REQUEST;

constructor(public payload: string) { }
}

export class LoadFilterSchemaSuccess implements Action {
readonly type = FilterCompareActionTypes.LOAD_SCHEMA_SUCCESS;

constructor(public payload: Schema) { }
}

export class LoadFilterSchemaError implements Action {
readonly type = FilterCompareActionTypes.LOAD_SCHEMA_ERROR;

constructor(public payload: any) { }
}

export class SetFilterComparisonSchema implements Action {
readonly type = FilterCompareActionTypes.SET_SCHEMA;
constructor(public payload: any) { }
}

export class SetFilterComparisonDefinition implements Action {
readonly type = FilterCompareActionTypes.SET_DEFINITION;
constructor(public payload: FormDefinition<Metadata>) { }
}

export class ClearFilterComparison implements Action {
readonly type = FilterCompareActionTypes.CLEAR;
}

export class CompareFilterVersions implements Action {
readonly type = FilterCompareActionTypes.COMPARE_FILTERS;

constructor(public payload: FilterComparison) { }
}

export type FilterCompareActionsUnion =
| LoadFilterSchemaRequest
| LoadFilterSchemaSuccess
| LoadFilterSchemaError
| SetFilterComparisonSchema
| SetFilterComparisonDefinition
| CompareFilterVersions
| ClearFilterComparison;
Original file line number Diff line number Diff line change
Expand Up @@ -3,106 +3,47 @@
<span [ngStyle]="{'width.%': width}" *ngIf="!comparing">Order</span>
<span [ngStyle]="{'width.%': width}" *ngIf="comparing">Option</span>
<strong *ngFor="let date of filters.dates" [ngStyle]="{'width.%': width}">
{{ date | date:'medium' }}
{{ date | date:DATE_FORMAT }}
</strong>
</div>
<ng-container *ngIf="!comparing">
<div class="">
<ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;"
class="list-group-item">
<div class="d-flex border-bottom border-light">
<div [ngStyle]="{'width.%': width}" class="py-2">
{{ i + 1 }}
</div>
<div *ngFor="let filter of version; let i = index; even as isEven"
[ngStyle]="{'width.%': width}"
class="border-primary p-2 d-flex align-items-center"
[ngClass]="{'bg-lighter': isEven && selected !== filter.id, 'bg-primary-light': selected === filter.id}">
<div class="">
<ng-container *ngFor="let version of filters.filters; let i = index; first as isFirst; last as isLast;">
<div class="d-flex border-bottom border-light">
<div [ngStyle]="{'width.%': width}" class="py-2">
{{ i + 1 }}
</div>
<div *ngFor="let filter of version; let i = index; even as isEven"
[ngStyle]="{'width.%': width}"
class="border-primary">
<div class="p-2 w-100" *ngIf="!filter">-</div>
<div *ngIf="filter"
class="p-2 d-flex align-items-center"
[ngClass]="{
'bg-lighter': isEven && selected !== filter.resourceId,
'bg-primary-light': selected === filter.resourceId
}">
<div class="w-50">
<p>{{ filter.name }}</p>
<p class="mb-0 text-muted">{{ filter.type }}</p>
<p class="mb-0">{{ filter.name }}</p>
<p class="mb-0 text-muted">{{ filter['@type'] }}</p>
</div>
<button class="btn btn-link mx-auto"
*ngIf="filter.comparable"
(click)="selected = (selected !== filter.id) ? filter.id : null">
<button class="btn btn-link mx-auto" *ngIf="filter.comparable"
(click)="selected = (selected !== filter.resourceId) ? filter.resourceId : null">
<i class="fa fa-lg"
[ngClass]="{'fa-check-square-o': selected === filter.id, 'fa-square-o': selected !== filter.id}"
[ngClass]="{'fa-check-square-o': selected === filter.resourceId, 'fa-square-o': selected !== filter.resourceId}"
aria-hidden="true"></i>
<span class="sr-only">Compare</span>
</button>
</div>
</div>
</ng-container>
</div>
<div class="d-flex justify-content-end my-2">
<button class="btn btn-primary" [disabled]="!selected" (click)="compare(selected)">
<translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
</button>
</div>
</ng-container>
<ng-container *ngIf="comparing">
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Type</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">EntityAttributesFilter</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Name</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Test Filter 1</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Renamed Filter</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Target Type</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Entity ID</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">Entity ID</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Target Value</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">http://idp.unicon.net/idp/shibboleth</span>
</div>
<div class="d-flex border-bottom border-light py-2">
<span class="d-block"
role="term"
[ngStyle]="{'width.%': width}">Enabled?</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">false</span>
<span class="d-block"
role="definition"
[ngStyle]="{'width.%': width}">true</span>
</div>
<div class="d-flex justify-content-end my-2">
<button class="btn btn-success" (click)="comparing = null">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
Filter Versions
</button>
</div>
</ng-container>

</div>
</ng-container>
</div>
<div class="d-flex justify-content-end my-2">
<button class="btn btn-primary" [disabled]="!selected" (click)="compareSelected()">
<translate-i18n key="label.compare-selected">Compare Selected</translate-i18n>
</button>
</div>
</ng-container>
<div class="alert alert-info m-4" *ngIf="filters && filters.dates.length < 1">
<h3 translate="message.no-filters">No Filters</h3>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,38 @@
import { Component, Input } from '@angular/core';
import { FilterConfiguration } from '../model/metadata-configuration';


import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FilterConfiguration, MetadataConfiguration } from '../model/metadata-configuration';
import { CONFIG_DATE_FORMAT } from '../configuration.values';
import { Observable, Subject } from 'rxjs';
import { FilterComparison } from '../model/compare';

@Component({
selector: 'filter-version-list',
templateUrl: './filter-version-list.component.html'
})
export class FilterVersionListComponent {

private selectFiltersSubject: Subject<string> = new Subject();

@Input() filters: FilterConfiguration;
@Output() compare: EventEmitter<FilterComparison> = new EventEmitter();

selected: string;
comparing: string;
selectedFilters$: Observable<MetadataConfiguration>;

constructor() {
DATE_FORMAT = CONFIG_DATE_FORMAT;

}
constructor() {}

compareSelected() {
const reduced = this.filters.filters.reduce((acc, l) => acc.concat(l), []);
const filtered = reduced.filter(f => f && f.resourceId === this.selected);
const type = filtered[0]['@type'];

compare(id: string): void {
this.comparing = id;
this.compare.emit({
modelId: this.selected,
modelType: type,
models: filtered
});
}

get width(): string {
Expand Down
2 changes: 2 additions & 0 deletions ui/src/app/metadata/configuration/configuration.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { RestoreEditStepComponent } from './container/restore-edit-step.componen

import { IndexResolver } from './service/index-resolver.service';
import { FilterVersionListComponent } from './component/filter-version-list.component';
import { FilterCompareVersionEffects } from './effect/filter.effect';

@NgModule({
declarations: [
Expand Down Expand Up @@ -111,6 +112,7 @@ export class MetadataConfigurationModule {
MetadataHistoryEffects,
CompareVersionEffects,
RestoreEffects,
FilterCompareVersionEffects,
VersionEffects
])
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,20 @@ <h2 class="mb-4" [ngSwitch]="type$ | async">
<metadata-configuration
[configuration]="versions$ | async"
[editable]="false"></metadata-configuration>
<filter-version-list class="d-block p-2"></filter-version-list>

<div class="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
<h2 class="title h4 m-0 flex-grow-1">
<span class="text ml-2" translate="label.metadata-filters">Metadata Filters</span>
</h2>
</div>
<ng-container>
<filter-version-list
class="d-block p-2"
[filters]="filters$ | async"
(compare)="compareFilters($event)">
</filter-version-list>
</ng-container>

</div>
<div *ngIf="loading$ | async" class="d-flex justify-content-center">
<i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
import { Observable, BehaviorSubject, Subscription, combineLatest } from 'rxjs';
import { Observable, BehaviorSubject, Subscription } from 'rxjs';
import { Store } from '@ngrx/store';
import { ActivatedRoute } from '@angular/router';
import { map, withLatestFrom } from 'rxjs/operators';
import { ConfigurationState, getComparisonConfigurationCount } from '../reducer';
import { CompareVersionRequest, ClearVersions, ViewChanged } from '../action/compare.action';
import { MetadataConfiguration } from '../model/metadata-configuration';
import { MetadataConfiguration, FilterConfiguration } from '../model/metadata-configuration';
import * as fromReducer from '../reducer';

import { CompareFilterVersions } from '../action/filter.action';
import { FilterComparison } from '../model/compare';

@Component({
selector: 'metadata-comparison',
Expand All @@ -25,7 +26,8 @@ export class MetadataComparisonComponent implements OnDestroy {
loading$: Observable<boolean> = this.store.select(fromReducer.getComparisonLoading);
limited$: Observable<boolean> = this.store.select(fromReducer.getViewChangedOnly);
sub: Subscription;

filters$: Observable<FilterConfiguration> = this.store.select(fromReducer.getComparisonFilterConfiguration);
filterCompare$: Observable<MetadataConfiguration> = this.store.select(fromReducer.getLimitedFilterComparisonConfiguration);

constructor(
private store: Store<ConfigurationState>,
Expand All @@ -45,6 +47,12 @@ export class MetadataComparisonComponent implements OnDestroy {
withLatestFrom(this.limited$),
map(([compare, limit]) => new ViewChanged(!limit))
).subscribe(this.store);

this.filterCompare$.subscribe(console.log);
}

compareFilters (comparison: FilterComparison) {
this.store.dispatch(new CompareFilterVersions(comparison));
}

ngOnDestroy(): void {
Expand Down
63 changes: 63 additions & 0 deletions ui/src/app/metadata/configuration/effect/filter.effect.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects';
import {
LoadFilterSchemaRequest,
CompareFilterVersions,
SetFilterComparisonDefinition,
LoadFilterSchemaSuccess,
LoadFilterSchemaError,
SetFilterComparisonSchema
} from '../action/filter.action';
import { Store } from '@ngrx/store';
import { State } from '../reducer';
import { FilterCompareActionTypes } from '../action/filter.action';
import { MetadataConfigurationService } from '../service/configuration.service';
import { switchMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class FilterCompareVersionEffects {

@Effect()
setDefinition$ = this.actions$.pipe(
ofType<CompareFilterVersions>(FilterCompareActionTypes.COMPARE_FILTERS),
map(action => action.payload),
map(comparison => {
const def = this.configService.getDefinition(comparison.modelType);
return new SetFilterComparisonDefinition(def);
})
);

@Effect()
loadSchemaOnDefinitionSet$ = this.actions$.pipe(
ofType<SetFilterComparisonDefinition>(FilterCompareActionTypes.SET_DEFINITION),
map(action => action.payload),
map(def => new LoadFilterSchemaRequest(def.schema))
);

@Effect()
loadSchemaData$ = this.actions$.pipe(
ofType<LoadFilterSchemaRequest>(FilterCompareActionTypes.LOAD_SCHEMA_REQUEST),
switchMap(action =>
this.configService
.loadSchema(action.payload)
.pipe(
map(schema => new LoadFilterSchemaSuccess(schema)),
catchError(error => of(new LoadFilterSchemaError(error)))
)
)
);

@Effect()
loadSchemaSuccess$ = this.actions$.pipe(
ofType<LoadFilterSchemaSuccess>(FilterCompareActionTypes.LOAD_SCHEMA_SUCCESS),
map(action => action.payload),
map(schema => new SetFilterComparisonSchema(schema))
);

constructor(
private configService: MetadataConfigurationService,
private store: Store<State>,
private actions$: Actions
) {}
}
Loading

0 comments on commit dbcdcdf

Please sign in to comment.