From 15228533c287e94a9f1ead7d954c937260bba2fa Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Tue, 16 Mar 2021 12:46:18 -0700 Subject: [PATCH] Updated filter editor --- .../container/edit-filter-step.component.ts | 54 +++++++++---------- .../container/edit-filter.component.html | 14 ++--- .../filter/container/edit-filter.component.ts | 54 +++++++------------ .../filter/effect/collection.effect.ts | 9 ++-- ui/src/app/metadata/filter/filter.module.ts | 2 + .../entity-attributes-configuration.filter.ts | 10 ++-- .../app/metadata/provider/provider.routing.ts | 11 +++- 7 files changed, 71 insertions(+), 83 deletions(-) diff --git a/ui/src/app/metadata/filter/container/edit-filter-step.component.ts b/ui/src/app/metadata/filter/container/edit-filter-step.component.ts index 281b86b95..d09f78cbf 100644 --- a/ui/src/app/metadata/filter/container/edit-filter-step.component.ts +++ b/ui/src/app/metadata/filter/container/edit-filter-step.component.ts @@ -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', @@ -29,6 +29,7 @@ export class EditFilterStepComponent implements OnDestroy { definition$: Observable>; definition: FormDefinition; schema$: Observable; + bindings$: Observable; model$: Observable; isSaving$: Observable; @@ -37,6 +38,8 @@ export class EditFilterStepComponent implements OnDestroy { type$: Observable; validators$: Observable<{ [key: string]: any }>; + status$: Observable; + step$: Observable; actions: any; @@ -46,24 +49,23 @@ export class EditFilterStepComponent implements OnDestroy { private store: Store, 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'] : '')); @@ -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) )) ); @@ -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, diff --git a/ui/src/app/metadata/filter/container/edit-filter.component.html b/ui/src/app/metadata/filter/container/edit-filter.component.html index cf62ba24b..c003e2ddf 100644 --- a/ui/src/app/metadata/filter/container/edit-filter.component.html +++ b/ui/src/app/metadata/filter/container/edit-filter.component.html @@ -12,7 +12,7 @@ -
+
@@ -22,8 +22,8 @@
- -
diff --git a/ui/src/app/metadata/filter/container/edit-filter.component.ts b/ui/src/app/metadata/filter/container/edit-filter.component.ts index d70537a3f..6eb9e7908 100644 --- a/ui/src/app/metadata/filter/container/edit-filter.component.ts +++ b/ui/src/app/metadata/filter/container/edit-filter.component.ts @@ -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', @@ -23,12 +22,6 @@ export class EditFilterComponent implements OnDestroy { private ngUnsubscribe: Subject = new Subject(); - valueChangeSubject = new Subject>(); - private valueChangeEmitted$ = this.valueChangeSubject.asObservable(); - - statusChangeSubject = new Subject<{ value: any[] }>(); - private statusChangeEmitted$ = this.statusChangeSubject.asObservable(); - definition$: Observable>; definition: FormDefinition; schema$: Observable; @@ -36,13 +29,12 @@ export class EditFilterComponent implements OnDestroy { model$: Observable; isSaving$: Observable; filter: MetadataFilter; - isValid: boolean; + isValid$: Observable; + isInvalid$: Observable; type$: Observable; status$: Observable; - validators$: Observable<{ [key: string]: any }>; - actions: any; defSub: Subscription; @@ -51,7 +43,6 @@ export class EditFilterComponent implements OnDestroy { constructor( private store: Store, - private schemaService: SchemaService, private route: ActivatedRoute ) { @@ -59,34 +50,27 @@ export class EditFilterComponent implements OnDestroy { 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) diff --git a/ui/src/app/metadata/filter/effect/collection.effect.ts b/ui/src/app/metadata/filter/effect/collection.effect.ts index 683d71b17..9e15e691c 100644 --- a/ui/src/app/metadata/filter/effect/collection.effect.ts +++ b/ui/src/app/metadata/filter/effect/collection.effect.ts @@ -162,13 +162,16 @@ export class FilterCollectionEffects { updateFilter$ = this.actions$.pipe( ofType(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, @@ -178,7 +181,7 @@ export class FilterCollectionEffects { } })), catchError(err => of(err.status === 409 ? new UpdateFilterConflict({ - filter, + filter: updates, providerId }) : new UpdateFilterFail(err))) ); diff --git a/ui/src/app/metadata/filter/filter.module.ts b/ui/src/app/metadata/filter/filter.module.ts index f30d517df..6514b5a06 100644 --- a/ui/src/app/metadata/filter/filter.module.ts +++ b/ui/src/app/metadata/filter/filter.module.ts @@ -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, diff --git a/ui/src/app/metadata/filter/model/entity-attributes-configuration.filter.ts b/ui/src/app/metadata/filter/model/entity-attributes-configuration.filter.ts index 081aed521..6117c9427 100644 --- a/ui/src/app/metadata/filter/model/entity-attributes-configuration.filter.ts +++ b/ui/src/app/metadata/filter/model/entity-attributes-configuration.filter.ts @@ -6,10 +6,14 @@ export const EntityAttributesFilterConfiguration: Wizard = { ...EntityAttributesFilter, steps: [ { - id: 'target', + id: 'common', label: 'label.target', index: 1, fields: [ + 'name', + '@type', + 'resourceId', + 'filterEnabled', 'entityAttributesFilterTarget' ] }, @@ -19,10 +23,6 @@ export const EntityAttributesFilterConfiguration: Wizard = { index: 2, initialValues: [], fields: [ - 'name', - '@type', - 'resourceId', - 'filterEnabled', 'relyingPartyOverrides' ] }, diff --git a/ui/src/app/metadata/provider/provider.routing.ts b/ui/src/app/metadata/provider/provider.routing.ts index ee73ed01b..975b9b427 100644 --- a/ui/src/app/metadata/provider/provider.routing.ts +++ b/ui/src/app/metadata/provider/provider.routing.ts @@ -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'; @@ -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 } + } + ] } ] }