Skip to content

Commit

Permalink
SHIBUI-580 Re-organized code for provider wizard containers
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Jul 3, 2018
1 parent 2d724c4 commit cba08fc
Show file tree
Hide file tree
Showing 12 changed files with 153 additions and 78 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<sf-form
[schema]="schema$ | async"
[model]="formModel"
(onChange)="changeSubject.next($event)"
(isValid)="onStatusChange($event)"></sf-form>
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { Component, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { withLatestFrom } from 'rxjs/operators';
import { Store } from '@ngrx/store';

import * as fromProvider from '../reducer';
import * as fromWizard from '../../../wizard/reducer';

import { SetDisabled, SetDefinition } from '../../../wizard/action/wizard.action';
import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
import { startWith } from 'rxjs/operators';
import { Wizard } from '../../../wizard/model';
import { MetadataProvider } from '../../domain/model';
import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
import { UpdateProvider } from '../action/entity.action';
import { pick } from '../../../shared/util';

@Component({
selector: 'provider-wizard-step',
templateUrl: './provider-wizard-step.component.html',
styleUrls: []
})

export class ProviderWizardStepComponent implements OnDestroy {
changeSubject = new Subject<Partial<any>>();
private changeEmitted$ = this.changeSubject.asObservable();

schema$: Observable<any>;
schema: any;
definition$: Observable<Wizard<MetadataProvider>>;
changes$: Observable<MetadataProvider>;
currentPage: string;
valid$: Observable<boolean>;

constructor(
private store: Store<fromProvider.ProviderState>
) {
this.store
.select(fromWizard.getCurrentWizardSchema)
.subscribe(s => {
this.store.dispatch(new LoadSchemaRequest(s));
});

this.schema$ = this.store.select(fromProvider.getSchema);
this.valid$ = this.store.select(fromProvider.getEditorIsValid);
this.definition$ = this.store.select(fromWizard.getWizardDefinition);
this.changes$ = this.store.select(fromProvider.getEntityChanges);

this.valid$
.pipe(startWith(false))
.subscribe((valid) => {
this.store.dispatch(new SetDisabled(!valid));
});

this.schema$.subscribe(s => this.schema = s);

this.changeEmitted$
.pipe(
withLatestFrom(this.schema$, this.definition$),
)
.subscribe(
([changes, schema, definition]) => {
const type = changes.value['@type'];
if (type && type !== definition.type) {
const newDefinition = MetadataProviderTypes.find(def => def.type === type);
if (newDefinition) {
this.store.dispatch(new SetDefinition({
...MetadataProviderWizard,
...newDefinition,
steps: [
...MetadataProviderWizard.steps,
...newDefinition.steps
]
}));
changes = { value: pick(Object.keys(schema.properties))(changes.value) };
}
}
this.store.dispatch(new UpdateProvider(changes.value));
}
);
}

ngOnDestroy() {
this.changeSubject.complete();
}

onStatusChange(value): void {
const status = { [this.currentPage]: value ? 'VALID' : 'INVALID' };
this.store.dispatch(new UpdateStatus(status));
}
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';

import * as fromProvider from '../reducer';

@Component({
selector: 'provider-wizard-summary',
templateUrl: './provider-wizard-summary.component.html',
styleUrls: []
})

export class ProviderWizardSummaryComponent {
constructor(
private store: Store<fromProvider.ProviderState>
) {}

save(): void {
console.log('Save!');
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@
<hr />
<div class="row">
<div class="col col-xl-6 col-lg-9 col-xs-12">
<sf-form
[schema]="schema$ | async"
[model]="formModel"
(onChange)="changeSubject.next($event)"
(isValid)="onStatusChange($event)"></sf-form>
<router-outlet></router-outlet>
</div>
<!--
<div class="col col-xl-6 col-lg-9 col-xs-12">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,23 @@

import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription, Observable, Subject } from 'rxjs';
import { distinctUntilChanged, map, withLatestFrom } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';

import * as fromProvider from '../reducer';
import * as fromWizard from '../../../wizard/reducer';

import { SetIndex, SetDisabled, UpdateDefinition, WizardActionTypes, Next, SetDefinition } from '../../../wizard/action/wizard.action';
import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
import { SetIndex, SetDisabled } from '../../../wizard/action/wizard.action';
import { LoadSchemaRequest } from '../action/editor.action';
import { startWith } from 'rxjs/operators';
import { Wizard, WizardStep } from '../../../wizard/model';
import { MetadataProvider } from '../../domain/model';
import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
import { UpdateProvider } from '../action/entity.action';
import { pick } from '../../../shared/util';

@Component({
selector: 'provider-wizard-page',
selector: 'provider-wizard',
templateUrl: './provider-wizard.component.html',
styleUrls: ['./provider-wizard.component.scss']
styleUrls: []
})

export class ProviderWizardComponent implements OnDestroy {
actionsSubscription: Subscription;

changeSubject = new Subject<Partial<any>>();
private changeEmitted$ = this.changeSubject.asObservable();

export class ProviderWizardComponent {
schema$: Observable<any>;
schema: any;
definition$: Observable<Wizard<MetadataProvider>>;
Expand All @@ -49,10 +38,7 @@ export class ProviderWizardComponent implements OnDestroy {
.subscribe(s => {
this.store.dispatch(new LoadSchemaRequest(s));
});

this.schema$ = this.store.select(fromProvider.getSchema);
this.valid$ = this.store.select(fromProvider.getEditorIsValid);
this.definition$ = this.store.select(fromWizard.getWizardDefinition);
this.changes$ = this.store.select(fromProvider.getEntityChanges);
this.store.select(fromWizard.getNext).subscribe(n => this.nextStep = n);
this.store.select(fromWizard.getPrevious).subscribe(p => this.previousStep = p);
Expand All @@ -62,38 +48,6 @@ export class ProviderWizardComponent implements OnDestroy {
.subscribe((valid) => {
this.store.dispatch(new SetDisabled(!valid));
});

this.schema$.subscribe(s => this.schema = s);

this.changeEmitted$
.pipe(
withLatestFrom(this.schema$, this.definition$),
)
.subscribe(
([changes, schema, definition]) => {
const type = changes.value['@type'];
if (type && type !== definition.type) {
const newDefinition = MetadataProviderTypes.find(def => def.type === type);
if (newDefinition) {
this.store.dispatch(new SetDefinition({
...MetadataProviderWizard,
...newDefinition,
steps: [
...MetadataProviderWizard.steps,
...newDefinition.steps
]
}));
changes = { value: pick(Object.keys(schema.properties))(changes.value) };
}
}
this.store.dispatch(new UpdateProvider(changes.value));
}
);
}

ngOnDestroy() {
this.actionsSubscription.unsubscribe();
this.changeSubject.complete();
}

next(): void {
Expand All @@ -109,10 +63,5 @@ export class ProviderWizardComponent implements OnDestroy {
save(): void {
console.log('Save!');
}

onStatusChange(value): void {
const status = { [this.currentPage]: value ? 'VALID' : 'INVALID' };
this.store.dispatch(new UpdateStatus(status));
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import { SetDefinition, SetIndex } from '../../../wizard/action/wizard.action';
import { MetadataProviderWizard } from '../model';

@Component({
selector: 'new-provider-page',
templateUrl: './new-provider.component.html',
styleUrls: ['./new-provider.component.scss']
selector: 'provider-page',
templateUrl: './provider.component.html',
styleUrls: []
})
export class NewProviderComponent {
export class ProviderComponent {
types = MetadataProviderTypes;

constructor(
Expand Down
10 changes: 7 additions & 3 deletions ui/src/app/metadata/provider/provider.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { RouterModule } from '@angular/router';
import { StoreModule } from '@ngrx/store';

import { ProviderWizardComponent } from './container/provider-wizard.component';
import { NewProviderComponent } from './container/new-provider.component';
import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
import { ProviderWizardSummaryComponent } from './container/provider-wizard-summary.component';
import { ProviderComponent } from './container/provider.component';
import { WizardModule } from '../../wizard/wizard.module';
import * as fromProvider from './reducer';
import { EffectsModule } from '@ngrx/effects';
Expand All @@ -19,8 +21,10 @@ import { CustomWidgetRegistry } from '../../schema-form/registry';

@NgModule({
declarations: [
NewProviderComponent,
ProviderWizardComponent
ProviderComponent,
ProviderWizardComponent,
ProviderWizardStepComponent,
ProviderWizardSummaryComponent
],
entryComponents: [],
imports: [
Expand Down
21 changes: 17 additions & 4 deletions ui/src/app/metadata/provider/provider.routing.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
import { Routes } from '@angular/router';

import { NewProviderComponent } from './container/new-provider.component';
import { ProviderComponent } from './container/provider.component';
import { ProviderWizardComponent } from './container/provider-wizard.component';
import { ProviderWizardSummaryComponent } from './container/provider-wizard-summary.component';
import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';

export const ProviderRoutes: Routes = [
{
path: 'provider',
component: NewProviderComponent,
component: ProviderComponent,
children: [
{
path: 'wizard',
redirectTo: `wizard/new`,
pathMatch: 'prefix'
},
{
path: 'wizard/new',
path: 'wizard',
component: ProviderWizardComponent,
canActivate: []
canActivate: [],
children: [
{
path: 'new',
component: ProviderWizardStepComponent
},
{
path: 'summary',
component: ProviderWizardSummaryComponent,
canActivate: []
}
]
}
]
}
Expand Down

0 comments on commit cba08fc

Please sign in to comment.