Skip to content

Commit

Permalink
Updated filter editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Mar 16, 2021
1 parent 41e4d7a commit 1522853
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 83 deletions.
54 changes: 25 additions & 29 deletions ui/src/app/metadata/filter/container/edit-filter-step.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { Store } from '@ngrx/store';
import { Subject, Observable, Subscription } from 'rxjs';

import * as fromFilter from '../reducer';
import { MetadataFilterTypes } from '../model';
import { FormDefinition } from '../../../wizard/model';
import { FormDefinition, WizardStep } from '../../../wizard/model';
import { MetadataFilter } from '../../domain/model';
import { SchemaService } from '../../../schema-form/service/schema.service';
import { UpdateFilterRequest } from '../action/collection.action';
import { CancelCreateFilter, UpdateFilterChanges } from '../action/filter.action';
import { UpdateFilterChanges } from '../action/filter.action';
import { PreviewEntity } from '../../domain/action/entity.action';
import { shareReplay, map, withLatestFrom, filter, switchMap, startWith, defaultIfEmpty, takeUntil } from 'rxjs/operators';
import { shareReplay, map, withLatestFrom, filter, switchMap, takeUntil } from 'rxjs/operators';
import * as fromWizard from '../../../wizard/reducer';
import { LockEditor, UnlockEditor } from '../../../wizard/action/wizard.action';

@Component({
selector: 'edit-filter-step-page',
Expand All @@ -29,6 +29,7 @@ export class EditFilterStepComponent implements OnDestroy {
definition$: Observable<FormDefinition<MetadataFilter>>;
definition: FormDefinition<MetadataFilter>;
schema$: Observable<any>;
bindings$: Observable<any>;

model$: Observable<MetadataFilter>;
isSaving$: Observable<boolean>;
Expand All @@ -37,6 +38,8 @@ export class EditFilterStepComponent implements OnDestroy {
type$: Observable<string>;

validators$: Observable<{ [key: string]: any }>;
status$: Observable<any>;
step$: Observable<WizardStep>;

actions: any;

Expand All @@ -46,24 +49,23 @@ export class EditFilterStepComponent implements OnDestroy {
private store: Store<fromFilter.State>,
private schemaService: SchemaService
) {
this.definition$ = this.store.select(fromFilter.getFilterType).pipe(
takeUntil(this.ngUnsubscribe),
filter(t => !!t),
map(t => MetadataFilterTypes[t])
);
this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(filter(d => !!d))

this.defSub = this.definition$.subscribe(d => this.definition = d);

this.definition$.subscribe(console.log);
this.schema$ = this.store.select(fromWizard.getSchema);
this.bindings$ = this.definition$.pipe(map(d => d.bindings));

this.step$ = this.store.select(fromWizard.getCurrent);

this.step$.subscribe(s => {
if (s && s.locked) {
this.store.dispatch(new LockEditor());
} else {
this.store.dispatch(new UnlockEditor());
}
});

this.schema$ = this.definition$.pipe(
takeUntil(this.ngUnsubscribe),
filter(d => !!d),
switchMap(d => {
return this.schemaService.get(d.schema).pipe(takeUntil(this.ngUnsubscribe));
}),
shareReplay()
);
this.isSaving$ = this.store.select(fromFilter.getCollectionSaving);
this.model$ = this.store.select(fromFilter.getSelectedFilter);
this.type$ = this.model$.pipe(map(f => f && f.hasOwnProperty('@type') ? f['@type'] : ''));
Expand All @@ -73,14 +75,16 @@ export class EditFilterStepComponent implements OnDestroy {
this.isValid = valid.value ? valid.value.length === 0 : true;
});

this.status$ = this.store.select(fromFilter.getInvalidEditorForms);

this.validators$ = this.store.select(fromFilter.getFilterNames).pipe(
takeUntil(this.ngUnsubscribe),
withLatestFrom(
this.store.select(fromFilter.getSelectedFilter),
this.definition$
),
map(([names, filter, definition]) => definition.getValidators(
names.filter(n => n !== filter.name)
map(([names, provider, definition]) => definition.getValidators(
names.filter(n => n !== provider.name)
))
);

Expand All @@ -101,14 +105,6 @@ export class EditFilterStepComponent implements OnDestroy {
this.defSub.unsubscribe();
}

save(): void {
this.store.dispatch(new UpdateFilterRequest(this.filter));
}

cancel(): void {
this.store.dispatch(new CancelCreateFilter());
}

preview(id: string): void {
this.store.dispatch(new PreviewEntity({
id,
Expand Down
14 changes: 4 additions & 10 deletions ui/src/app/metadata/filter/container/edit-filter.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>
</div>
</div>
<div class="section-body p-4 border border-top-0 border-info" *ngIf="schema$ | async">
<div class="section-body p-4 border border-top-0 border-info">
<div class="mx-3 my-2">
<div class="d-flex justify-content-between">
<div class="d-block w-50">
Expand All @@ -22,8 +22,8 @@
</div>
</div>
<div class="py-2">
<ng-container *ngIf="schema$ | async">
<button (click)="this.save()" type="submit" class="btn btn-primary" [disabled]="!isValid || (isSaving$ | async)">
<ng-container>
<button (click)="this.save()" type="submit" class="btn btn-primary" [disabled]="(!isInvalid$ | async) || (isSaving$ | async)">
<i class="fa fa-fw fa-lg" [ngClass]="{
'fa-save': !(isSaving$ | async),
'fa-spinner': (isSaving$ | async),
Expand All @@ -47,13 +47,7 @@
</editor-nav>
</div>
<div class="col-lg-9">
<sf-form
[schema]="schema$ | async"
[model]="model$ | async"
[validators]="validators$ | async"
[actions]="actions"
(onChange)="valueChangeSubject.next($event)"
(onErrorChange)="statusChangeSubject.next($event)"></sf-form>
<router-outlet></router-outlet>
</div>
</div>
</div>
Expand Down
54 changes: 19 additions & 35 deletions ui/src/app/metadata/filter/container/edit-filter.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@ import { Store } from '@ngrx/store';
import { Subject, Observable, Subscription } from 'rxjs';

import * as fromFilter from '../reducer';
import { MetadataFilterTypes } from '../model';
import { FormDefinition } from '../../../wizard/model';
import { MetadataFilter } from '../../domain/model';
import { SchemaService } from '../../../schema-form/service/schema.service';
import { UpdateFilterRequest } from '../action/collection.action';
import { CancelCreateFilter, UpdateFilterChanges } from '../action/filter.action';
import { CancelCreateFilter } from '../action/filter.action';
import { PreviewEntity } from '../../domain/action/entity.action';
import { NAV_FORMATS } from '../../domain/component/editor-nav.component';
import { shareReplay, map, withLatestFrom, filter, switchMap, takeUntil } from 'rxjs/operators';
import { map, filter } from 'rxjs/operators';
import * as fromWizard from '../../../wizard/reducer';
import { ActivatedRoute } from '@angular/router';
import { LoadSchemaRequest, SetIndex } from '../../../wizard/action/wizard.action';

@Component({
selector: 'edit-filter-page',
Expand All @@ -23,26 +22,19 @@ export class EditFilterComponent implements OnDestroy {

private ngUnsubscribe: Subject<void> = new Subject<void>();

valueChangeSubject = new Subject<Partial<any>>();
private valueChangeEmitted$ = this.valueChangeSubject.asObservable();

statusChangeSubject = new Subject<{ value: any[] }>();
private statusChangeEmitted$ = this.statusChangeSubject.asObservable();

definition$: Observable<FormDefinition<MetadataFilter>>;
definition: FormDefinition<MetadataFilter>;
schema$: Observable<any>;

model$: Observable<MetadataFilter>;
isSaving$: Observable<boolean>;
filter: MetadataFilter;
isValid: boolean;
isValid$: Observable<boolean>;
isInvalid$: Observable<boolean>;
type$: Observable<string>;

status$: Observable<any>;

validators$: Observable<{ [key: string]: any }>;

actions: any;

defSub: Subscription;
Expand All @@ -51,42 +43,34 @@ export class EditFilterComponent implements OnDestroy {

constructor(
private store: Store<fromFilter.State>,
private schemaService: SchemaService,
private route: ActivatedRoute
) {

this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(filter(d => !!d))

this.defSub = this.definition$.subscribe(d => this.definition = d);

this.schema$ = this.definition$.pipe(
takeUntil(this.ngUnsubscribe),
filter(d => !!d),
switchMap(d => this.schemaService.get(d.schema).pipe(takeUntil(this.ngUnsubscribe))),
shareReplay()
);
this.store
.select(fromWizard.getCurrentWizardSchema)
.pipe(filter(s => !!s))
.subscribe(s => {
if (s) {
this.store.dispatch(new LoadSchemaRequest(s));
}
});

let startIndex$ = this.route.firstChild.params.pipe(map(p => p.form || 'filters'));
startIndex$.subscribe(index => this.store.dispatch(new SetIndex(index)));


this.isSaving$ = this.store.select(fromFilter.getCollectionSaving);
this.model$ = this.store.select(fromFilter.getSelectedFilter);
this.type$ = this.model$.pipe(map(f => f && f.hasOwnProperty('@type') ? f['@type'] : ''));

this.valueChangeEmitted$.subscribe(changes => this.store.dispatch(new UpdateFilterChanges(changes.value)));
this.statusChangeEmitted$.subscribe(valid => {
this.isValid = valid.value ? valid.value.length === 0 : true;
});

this.status$ = this.store.select(fromFilter.getInvalidEditorForms);

this.validators$ = this.store.select(fromFilter.getFilterNames).pipe(
takeUntil(this.ngUnsubscribe),
withLatestFrom(
this.store.select(fromFilter.getSelectedFilter),
this.definition$
),
map(([names, provider, definition]) => definition.getValidators(
names.filter(n => n !== provider.name)
))
);
this.isValid$ = this.store.select(fromFilter.getEditorIsValid);
this.isInvalid$ = this.isValid$.pipe(map(v => !v));

this.store
.select(fromFilter.getFilter)
Expand Down
9 changes: 6 additions & 3 deletions ui/src/app/metadata/filter/effect/collection.effect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,13 +162,16 @@ export class FilterCollectionEffects {
updateFilter$ = this.actions$.pipe(
ofType<UpdateFilterRequest>(FilterCollectionActionTypes.UPDATE_FILTER_REQUEST),
map(action => action.payload),
switchMap((action) => {
withLatestFrom(this.store.select(fromFilter.getSelectedFilter)),
switchMap(([action, original]) => {
const { filter, providerId } = action;
delete filter.modifiedDate;
delete filter.createdDate;

const updates = ({ ...original, ...filter });

return this.filterService
.update(providerId, filter)
.update(providerId, updates)
.pipe(
map(resp => new UpdateFilterSuccess({
providerId,
Expand All @@ -178,7 +181,7 @@ export class FilterCollectionEffects {
}
})),
catchError(err => of(err.status === 409 ? new UpdateFilterConflict({
filter,
filter: updates,
providerId
}) : new UpdateFilterFail(err)))
);
Expand Down
2 changes: 2 additions & 0 deletions ui/src/app/metadata/filter/filter.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ import { FormModule } from '../../schema-form/schema-form.module';
import { I18nModule } from '../../i18n/i18n.module';
import { FilterComponent } from './container/filter.component';
import { FilterListComponent } from './component/filter-list.component';
import { EditFilterStepComponent } from './container/edit-filter-step.component';

@NgModule({
declarations: [
NewFilterComponent,
EditFilterComponent,
EditFilterStepComponent,
SelectFilterComponent,
SearchDialogComponent,
FilterComponent,
Expand Down
10 changes: 5 additions & 5 deletions ui/src/app/metadata/filter/model/entity-attributes-configuration.filter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,14 @@ export const EntityAttributesFilterConfiguration: Wizard<MetadataFilter> = {
...EntityAttributesFilter,
steps: [
{
id: 'target',
id: 'common',
label: 'label.target',
index: 1,
fields: [
'name',
'@type',
'resourceId',
'filterEnabled',
'entityAttributesFilterTarget'
]
},
Expand All @@ -19,10 +23,6 @@ export const EntityAttributesFilterConfiguration: Wizard<MetadataFilter> = {
index: 2,
initialValues: [],
fields: [
'name',
'@type',
'resourceId',
'filterEnabled',
'relyingPartyOverrides'
]
},
Expand Down
11 changes: 10 additions & 1 deletion ui/src/app/metadata/provider/provider.routing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ProviderFilterListComponent } from './container/provider-filter-list.co
import { NewFilterComponent } from '../filter/container/new-filter.component';
import { SelectFilterComponent } from '../filter/container/select-filter.component';
import { EditFilterComponent } from '../filter/container/edit-filter.component';
import { EditFilterStepComponent } from '../filter/container/edit-filter-step.component';
import { CanDeactivateGuard } from '../../core/service/can-deactivate.guard';
import { FilterComponent } from '../filter/container/filter.component';
import { AdminGuard } from '../../core/service/admin.guard';
Expand Down Expand Up @@ -79,7 +80,15 @@ export const ProviderRoutes: Routes = [
{
path: 'edit',
component: EditFilterComponent,
data: { title: `Edit Metadata Filter` }
data: { title: `Edit Metadata Filter` },
children: [
{ path: '', redirectTo: 'common', pathMatch: 'prefix' },
{
path: ':form',
component: EditFilterStepComponent,
data: { title: `Edit Metadata Filter`, subtitle: true }
}
]
}
]
}
Expand Down

0 comments on commit 1522853

Please sign in to comment.