Skip to content

Commit

Permalink
SHIBUI-522 Updated Filter edit/create form
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Jun 11, 2018
1 parent acfc2db commit c2d25bd
Show file tree
Hide file tree
Showing 10 changed files with 71 additions and 96 deletions.
18 changes: 9 additions & 9 deletions ui/src/app/metadata-filter/container/edit-filter.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div class="container-fluid p-3" role="main">
<section class="section">
<section class="section" *ngIf="filter$ | async">
<div class="section-header bg-info p-2 text-white">
<div class="row justify-content-between">
<div class="col-md-12">
<span class="display-6">
<i class="fa fa-fw fa-gears"></i>
<ng-container i18n="@@label--edit-filter">Edit Filter - {{ (filter$ | async).filterName }}</ng-container>
<ng-container i18n="@@label--edit-filter">Edit Filter - {{ (filter$ | async).name }}</ng-container>
</span>
</div>
</div>
Expand All @@ -17,7 +17,7 @@
<fieldset class="">
<div class="form-group">
<div class="row">
<label for="filterName" class="col-sm-10">
<label for="name" class="col-sm-10">
<span>
<ng-container i18n="@@label--filter-name">
Filter Name
Expand All @@ -34,9 +34,9 @@
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</div>
<input id="filterName" type="text" class="form-control" placeholder="" formControlName="filterName" />
<ng-container *ngIf="form.get('filterName').touched && form.get('filterName').invalid">
<small class="form-text text-danger" *ngIf="form.get('filterName').hasError('required')">
<input id="name" type="text" class="form-control" placeholder="" formControlName="name" />
<ng-container *ngIf="form.get('name').touched && form.get('name').invalid">
<small class="form-text text-danger" *ngIf="form.get('name').hasError('required')">
<ng-container i18n="@@message--filter-name-required">Filter Name is required</ng-container>
</small>
</ng-container>
Expand Down Expand Up @@ -134,12 +134,12 @@
<fieldset class="col-lg-6">
<div class="form-group">
<div class="row">
<label for="filterName" class="col-sm-10" i18n="@@label--entity-preview">
<label for="name" class="col-sm-10" i18n="@@label--entity-preview">
Entity ID Preview (read-only)
</label>
<span class="text-right col-sm-2">
<ng-template #tooltipFilterName i18n="@@tooltip--entity-preview">Entity Preview</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
<ng-template #tooltipName i18n="@@tooltip--entity-preview">Entity Preview</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipName" i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</div>
Expand Down
54 changes: 29 additions & 25 deletions ui/src/app/metadata-filter/container/edit-filter.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
import { Component, OnInit, OnDestroy, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { Observable, Subject } from 'rxjs';
import { withLatestFrom, distinctUntilChanged, takeUntil, startWith } from 'rxjs/operators';
import { withLatestFrom, distinctUntilChanged, takeUntil, startWith, filter } from 'rxjs/operators';

import * as fromRoot from '../../app.reducer';
import * as fromFilter from '../reducer';
import * as fromCollection from '../../domain/reducer';

import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
import { ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
import { CancelCreateFilter, SelectId, UpdateFilterChanges } from '../action/filter.action';
import { AddFilterRequest, UpdateFilterRequest } from '../../domain/action/filter-collection.action';
import { UpdateFilterRequest } from '../../domain/action/filter-collection.action';
import { MetadataFilter } from '../../domain/model/metadata-filter';
import { Filter } from '../../domain/entity/filter';
import { EntityValidators } from '../../domain/service/entity-validators.service';
import { SearchDialogComponent } from '../component/search-dialog.component';
import { QueryEntityIds, ViewMoreIds, ClearSearch } from '../action/search.action';
import { AutoCompleteComponent } from '../../shared/autocomplete/autocomplete.component';
import { MDUI } from '../../domain/model/mdui';
import { PreviewEntity } from '../../domain/action/entity.action';
import { MetadataEntity } from '../../domain/domain.type';
import { EntityAttributesFilter } from '../../domain/entity/entity-attributes.filter';

@Component({
selector: 'edit-filter-page',
Expand Down Expand Up @@ -52,12 +50,12 @@ export class EditFilterComponent implements OnInit, OnDestroy {
'',
[Validators.required]
],
filterName: ['', [Validators.required]],
name: ['', [Validators.required]],
filterEnabled: [false]
});

filter: MetadataFilter;
filterEntity: Filter;
filterEntity: EntityAttributesFilter;

isValid = false;

Expand All @@ -67,7 +65,11 @@ export class EditFilterComponent implements OnInit, OnDestroy {
private fb: FormBuilder
) {
this.changes$ = this.store.select(fromFilter.getFilter);
this.changes$.subscribe(c => this.changes = new Filter(c));
this.changes$
.pipe(
distinctUntilChanged()
)
.subscribe(c => this.changes = new EntityAttributesFilter(c));

this.showMore$ = this.store.select(fromFilter.getViewingMore);
this.selected$ = this.store.select(fromFilter.getSelected);
Expand All @@ -80,20 +82,23 @@ export class EditFilterComponent implements OnInit, OnDestroy {

this.entityIds$.subscribe(ids => this.ids = ids);

this.filter$.pipe(
withLatestFrom(this.isSaving$)
).subscribe(([filter, saving]) => {
let { entityId, filterName, filterEnabled } = new Filter(filter);
this.form.reset({
entityId,
filterName,
filterEnabled
this.filter$
.pipe(
filter(f => !!f)
)
.subscribe(filter => {
this.filterEntity = new EntityAttributesFilter(filter);
let { entityId, name, filterEnabled } = this.filterEntity;
this.form.patchValue({
entityId,
name,
filterEnabled
});
this.filter = filter;
this.store.dispatch(new SelectId(entityId));

this.form.get('entityId').disable();
});
this.filter = filter;
this.filterEntity = new Filter(filter);

this.store.dispatch(new SelectId(entityId));
});
}

ngOnInit(): void {
Expand All @@ -105,13 +110,12 @@ export class EditFilterComponent implements OnInit, OnDestroy {
takeUntil(this.ngUnsubscribe),
startWith(this.form.value)
).subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes)));

this.valueEmitter.changeEmitted$.pipe(
takeUntil(this.ngUnsubscribe),
startWith(this.form.value)
).subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes)));

this.form.get('entityId').disable();

id.valueChanges
.pipe(distinctUntilChanged())
.subscribe(entityId => id.valid ? this.store.dispatch(new SelectId(entityId)) : null);
Expand Down Expand Up @@ -168,6 +172,6 @@ export class EditFilterComponent implements OnInit, OnDestroy {
}

preview(entity: MetadataEntity): void {
this.store.dispatch(new PreviewEntity(new Filter(entity)));
this.store.dispatch(new PreviewEntity(new EntityAttributesFilter(entity)));
}
}
9 changes: 5 additions & 4 deletions ui/src/app/metadata-filter/container/filter.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Component, Output, Input, EventEmitter, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';
Expand All @@ -26,9 +25,11 @@ export class FilterComponent implements OnDestroy {
private store: Store<fromFilters.State>,
private route: ActivatedRoute
) {
this.actionsSubscription = route.params.pipe(
this.actionsSubscription = this.route.params.pipe(
distinctUntilChanged(),
map(params => new SelectFilter(params.id))
map(params => {
return new SelectFilter(params.id);
})
).subscribe(store);

this.filter$ = this.store.select(fromCollection.getSelectedFilter);
Expand Down
20 changes: 10 additions & 10 deletions ui/src/app/metadata-filter/container/new-filter.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="col-md-12">
<span class="display-6">
<i class="fa fa-fw fa-gears"></i>
<ng-container i18n="@@label--new-filter">New Filter</ng-container>
<ng-container i18n="@@label--new-filter">new EntityAttributesFilter</ng-container>
</span>
</div>
</div>
Expand All @@ -17,7 +17,7 @@
<fieldset class="">
<div class="form-group">
<div class="row">
<label for="filterName" class="col-sm-10">
<label for="name" class="col-sm-10">
<span>
<ng-container i18n="@@label--filter-name">
Filter Name
Expand All @@ -29,14 +29,14 @@
</span>
</label>
<span class="text-right col-sm-2">
<ng-template #tooltipFilterName i18n="@@tooltip--filter-name">Filter Name</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
<ng-template #tooltipName i18n="@@tooltip--filter-name">Filter Name</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipName" i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</div>
<input id="filterName" type="text" class="form-control" placeholder="" formControlName="filterName" />
<ng-container *ngIf="form.get('filterName').touched && form.get('filterName').invalid">
<small class="form-text text-danger" *ngIf="form.get('filterName').hasError('required')">
<input id="name" type="text" class="form-control" placeholder="" formControlName="name" />
<ng-container *ngIf="form.get('name').touched && form.get('name').invalid">
<small class="form-text text-danger" *ngIf="form.get('name').hasError('required')">
<ng-container i18n="@@message--service-provider-name-required">Filter Name is required</ng-container>
</small>
</ng-container>
Expand Down Expand Up @@ -100,12 +100,12 @@
<fieldset class="col-lg-6">
<div class="form-group">
<div class="row">
<label for="filterName" class="col-sm-10" i18n="@@label--entity-preview">
<label for="name" class="col-sm-10" i18n="@@label--entity-preview">
Entity ID Preview (read-only)
</label>
<span class="text-right col-sm-2">
<ng-template #tooltipFilterName i18n="@@tooltip--entity-preview">Entity Preview</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipFilterName" i18n-aria-label="@@tooltip--instruction"
<ng-template #tooltipName i18n="@@tooltip--entity-preview">Entity Preview</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipName" i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</div>
Expand Down
18 changes: 8 additions & 10 deletions ui/src/app/metadata-filter/container/new-filter.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { Component, OnInit, OnDestroy, SimpleChanges } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { Observable, Subject, Subscription } from 'rxjs';
import { Observable, Subject } from 'rxjs';
import { withLatestFrom, distinctUntilChanged, startWith, takeUntil } from 'rxjs/operators';

import * as fromFilter from '../reducer';
import { ProviderStatusEmitter, ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { ProviderValueEmitter } from '../../domain/service/provider-change-emitter.service';
import { CancelCreateFilter, SelectId, UpdateFilterChanges } from '../action/filter.action';
import { AddFilterRequest } from '../../domain/action/filter-collection.action';
import { MetadataFilter } from '../../domain/model/metadata-filter';
import { Filter } from '../../domain/entity/filter';
import { EntityValidators } from '../../domain/service/entity-validators.service';
import { SearchDialogComponent } from '../component/search-dialog.component';
import { QueryEntityIds, ViewMoreIds, ClearSearch } from '../action/search.action';
import { MDUI } from '../../domain/model/mdui';
import { EntityAttributesFilter } from '../../domain/entity/entity-attributes.filter';

@Component({
selector: 'new-filter-page',
Expand All @@ -26,9 +24,9 @@ export class NewFilterComponent implements OnInit, OnDestroy {

changes$: Observable<MetadataFilter>;
changes: MetadataFilter;
filter: MetadataFilter = new Filter({
filter: EntityAttributesFilter = new EntityAttributesFilter({
entityId: '',
filterName: '',
name: '',
relyingPartyOverrides: {
signAssertion: false,
dontSignResponse: false,
Expand Down Expand Up @@ -56,7 +54,7 @@ export class NewFilterComponent implements OnInit, OnDestroy {
entityId: ['', [Validators.required], [
EntityValidators.existsInCollection(this.store.select(fromFilter.getEntityCollection))
]],
filterName: ['', [Validators.required]],
name: ['', [Validators.required]],
filterEnabled: [false]
});

Expand All @@ -69,7 +67,7 @@ export class NewFilterComponent implements OnInit, OnDestroy {
) {
this.store.dispatch(new ClearSearch());
this.changes$ = this.store.select(fromFilter.getFilter);
this.changes$.subscribe(c => this.changes = new Filter(c));
this.changes$.subscribe(c => this.changes = new EntityAttributesFilter(c));

this.showMore$ = this.store.select(fromFilter.getViewingMore);
this.selected$ = this.store.select(fromFilter.getSelected);
Expand Down
10 changes: 1 addition & 9 deletions ui/src/app/metadata-filter/effect/filter.effect.ts
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,20 @@
import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { of } from 'rxjs';
import { map, switchMap, catchError, withLatestFrom, tap } from 'rxjs/operators';

import { Router } from '@angular/router';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

import * as filterActions from '../action/filter.action';
import * as fromFilter from '../reducer';
import * as fromCollection from '../../domain/reducer';
import * as fromRoot from '../../app.reducer';
import * as collection from '../../domain/action/filter-collection.action';
import { FilterCollectionActionTypes } from '../../domain/action/filter-collection.action';

import { SearchDialogComponent } from '../component/search-dialog.component';
import { EntityIdService } from '../../domain/service/entity-id.service';
import { MetadataResolverService } from '../../domain/service/metadata-resolver.service';
import { ShowContentionAction } from '../../contention/action/contention.action';

import { Contention } from '../../contention/model/contention';
import { MetadataFilter } from '../../domain/domain.type';
import { CancelChanges } from '../../edit-provider/action/editor.action';
import { Update } from '@ngrx/entity';
import { ContentionService } from '../../contention/service/contention.service';

@Injectable()
Expand Down
13 changes: 3 additions & 10 deletions ui/src/app/metadata-filter/effect/search.effect.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { of } from 'rxjs';

import { catchError, map, debounceTime, switchMap } from 'rxjs/operators';

import { Router } from '@angular/router';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

import * as search from '../action/search.action';
import * as filter from '../action/filter.action';
import * as fromFilter from '../reducer';
import * as collection from '../../domain/action/filter-collection.action';

import { SearchDialogComponent } from '../component/search-dialog.component';
import { EntityIdService } from '../../domain/service/entity-id.service';
import { MetadataProvider } from '../../domain/model/metadata-provider';
import { MetadataResolverService } from '../../domain/service/metadata-resolver.service';
import { fromPromise } from 'rxjs/internal-compatibility';
import { SelectId } from '../action/filter.action';


@Injectable()
Expand Down Expand Up @@ -46,7 +39,7 @@ export class SearchIdEffects {
const res = modal.result;
modal.componentInstance.term = q;
return fromPromise(res).pipe(
map(id => new filter.SelectId(id)),
map(id => new SelectId(id)),
catchError(() => of(new search.CancelViewMore()))
);
})
Expand Down
Loading

0 comments on commit c2d25bd

Please sign in to comment.