Skip to content

Commit

Permalink
Added navigation to edit filter
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Mar 16, 2021
1 parent d817386 commit 41e4d7a
Show file tree
Hide file tree
Showing 24 changed files with 478 additions and 110 deletions.
3 changes: 2 additions & 1 deletion ui/src/app/app.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ const routes: Routes = [
scrollOffset: [0, 64],
anchorScrolling: 'enabled',
scrollPositionRestoration: 'enabled',
relativeLinkResolution: 'legacy'
relativeLinkResolution: 'legacy',
paramsInheritanceStrategy: 'always'
})],
exports: [RouterModule]
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,17 @@ export class MetadataOptionsComponent implements OnDestroy {
}

updateOrderUp(filter: MetadataFilter): void {
this.store.dispatch(new ChangeFilterOrderUp(filter.resourceId));
this.store.dispatch(new ChangeFilterOrderUp({
id: filter.resourceId,
providerId: this.activatedRoute.snapshot.params.providerId
}));
}

updateOrderDown(filter: MetadataFilter): void {
this.store.dispatch(new ChangeFilterOrderDown(filter.resourceId));
this.store.dispatch(new ChangeFilterOrderDown({
id: filter.resourceId,
providerId: this.activatedRoute.snapshot.params.providerId
}));
}

removeFilter(id: string): void {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Store } from '@ngrx/store';

import { Observable } from 'rxjs';
import { skipWhile, combineLatest, map } from 'rxjs/operators';
import { skipWhile, map } from 'rxjs/operators';

import { WizardStep } from '../../../wizard/model';
import * as fromWizard from '../../../wizard/reducer';
Expand Down
32 changes: 25 additions & 7 deletions ui/src/app/metadata/filter/action/collection.action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,19 @@ export class LoadFilterError implements Action {
export class UpdateFilterRequest implements Action {
readonly type = FilterCollectionActionTypes.UPDATE_FILTER_REQUEST;

constructor(public payload: MetadataFilter) { }
constructor(public payload: {
filter: MetadataFilter,
providerId: string;
}) { }
}

export class UpdateFilterSuccess implements Action {
readonly type = FilterCollectionActionTypes.UPDATE_FILTER_SUCCESS;

constructor(public payload: Update<MetadataFilter>) { }
constructor(public payload: {
providerId: string,
update: Update<MetadataFilter>
}) { }
}

export class UpdateFilterFail implements Action {
Expand All @@ -97,7 +103,10 @@ export class UpdateFilterFail implements Action {
export class UpdateFilterConflict implements Action {
readonly type = FilterCollectionActionTypes.UPDATE_FILTER_CONFLICT;

constructor(public payload: MetadataFilter) { }
constructor(public payload: {
providerId: string,
filter: MetadataFilter
}) { }
}

export class AddFilterRequest implements Action {
Expand Down Expand Up @@ -143,13 +152,16 @@ export class ClearFilters implements Action {
export class SetOrderFilterRequest implements Action {
readonly type = FilterCollectionActionTypes.SET_ORDER_FILTER_REQUEST;

constructor(public payload: string[]) { }
constructor(public payload: {
order: string[],
providerId: string
}) { }
}

export class SetOrderFilterSuccess implements Action {
readonly type = FilterCollectionActionTypes.SET_ORDER_FILTER_SUCCESS;

constructor() { }
constructor(public payload: string) { }
}

export class SetOrderFilterFail implements Action {
Expand Down Expand Up @@ -179,13 +191,19 @@ export class GetOrderFilterFail implements Action {
export class ChangeFilterOrderUp implements Action {
readonly type = FilterCollectionActionTypes.CHANGE_FILTER_ORDER_UP;

constructor(public payload: string) { }
constructor(public payload: {
id: string,
providerId: string
}) { }
}

export class ChangeFilterOrderDown implements Action {
readonly type = FilterCollectionActionTypes.CHANGE_FILTER_ORDER_DOWN;

constructor(public payload: string) { }
constructor(public payload: {
id: string,
providerId: string
}) { }
}

export type FilterCollectionActionsUnion =
Expand Down
28 changes: 28 additions & 0 deletions ui/src/app/metadata/filter/action/editor.action.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Action } from '@ngrx/store';

export enum EditorActionTypes {
UPDATE_STATUS = '[Filter Editor] Update Status',
SELECT_PROVIDER_TYPE = '[Filter Editor] Select Filter Type',
CLEAR = '[Filter Editor] Clear'
}

export class UpdateStatus implements Action {
readonly type = EditorActionTypes.UPDATE_STATUS;

constructor(public payload: { [key: string]: string }) { }
}

export class SelectFilterType implements Action {
readonly type = EditorActionTypes.SELECT_PROVIDER_TYPE;

constructor(public payload: string) { }
}

export class ClearEditor implements Action {
readonly type = EditorActionTypes.CLEAR;
}

export type EditorActionUnion =
| UpdateStatus
| SelectFilterType
| ClearEditor;
13 changes: 11 additions & 2 deletions ui/src/app/metadata/filter/action/filter.action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ export enum FilterActionTypes {
CLEAR_FILTER = '[Filter] Clear Filter',
LOAD_ENTITY_PREVIEW = '[Filter] Load Preview data',
LOAD_ENTITY_PREVIEW_SUCCESS = '[Filter] Load Preview data success',
LOAD_ENTITY_PREVIEW_ERROR = '[Filter] Load Preview data error'
LOAD_ENTITY_PREVIEW_ERROR = '[Filter] Load Preview data error',

RESET_CHANGES = '[Filter] Reset Changes'
}

export class SelectId implements Action {
Expand All @@ -37,6 +39,8 @@ export class LoadEntityPreviewError implements Action {

export class CancelCreateFilter implements Action {
readonly type = FilterActionTypes.CANCEL_CREATE_FILTER;

constructor(public payload: string) { }
}

export class ClearFilter implements Action {
Expand All @@ -55,6 +59,10 @@ export class SelectFilterType implements Action {
constructor(public payload: string) { }
}

export class ResetChanges implements Action {
readonly type = FilterActionTypes.RESET_CHANGES;
}

export type FilterActionsUnion =
| SelectId
| SelectFilterType
Expand All @@ -63,4 +71,5 @@ export type FilterActionsUnion =
| LoadEntityPreview
| LoadEntityPreviewSuccess
| LoadEntityPreviewError
| ClearFilter;
| ClearFilter
| ResetChanges;
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<ng-container *ngIf="definition$ | async">
<div class="alert alert-danger d-flex justify-content-between font-weight-bold mb-3" *ngIf="(step$ | async).locked">
<span class="d-flex justify-content-between">
<toggle-switch id="toggle" [formControl]="lock"></toggle-switch>
<span class="p-1">{{ lock.value ? 'Locked' : 'Unlocked' }}</span>
</span>
<span class="p-1">For Advanced Knowledge Only</span>
</div>
<sf-form
[schema]="schema$ | async"
[model]="model$ | async"
[validators]="validators$ | async"
[bindings]="bindings$ | async"
(onChange)="valueChangeSubject.next($event)"
(onErrorChange)="statusChangeSubject.next($event)"></sf-form>
</ng-container>
119 changes: 119 additions & 0 deletions ui/src/app/metadata/filter/container/edit-filter-step.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import { Component, OnDestroy } from '@angular/core';
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 { PreviewEntity } from '../../domain/action/entity.action';
import { shareReplay, map, withLatestFrom, filter, switchMap, startWith, defaultIfEmpty, takeUntil } from 'rxjs/operators';

@Component({
selector: 'edit-filter-step-page',
templateUrl: './edit-filter-step.component.html'
})
export class EditFilterStepComponent 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;
type$: Observable<string>;

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

actions: any;

defSub: Subscription;

constructor(
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.defSub = this.definition$.subscribe(d => this.definition = d);

this.definition$.subscribe(console.log);

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'] : ''));

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.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)
))
);

this.store
.select(fromFilter.getFilter)
.subscribe(filter => this.filter = filter);

this.actions = {
preview: (property: any, parameters: any) => {
this.preview(parameters.filterId);
}
};
}

ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
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,
entity: this.definition.getEntity(this.filter)
}));
}
}

25 changes: 18 additions & 7 deletions ui/src/app/metadata/filter/container/edit-filter.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,24 @@
</ng-container>
</div>
</div>
<sf-form
[schema]="schema$ | async"
[model]="model$ | async"
[validators]="validators$ | async"
[actions]="actions"
(onChange)="valueChangeSubject.next($event)"
(onErrorChange)="statusChangeSubject.next($event)"></sf-form>
<hr />
<div class="row">
<div class="col-lg-3 d-none d-lg-block">
<editor-nav
[format]="formats.TABS"
[status]="status$ | async">
</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>
</div>
</div>
</div>
</div>
</section>
Expand Down
Loading

0 comments on commit 41e4d7a

Please sign in to comment.