Fixing routing/unsaved changes issues

TIER · Oct 18, 2018 · 9f7405b · 9f7405b
1 parent 10ca896
commit 9f7405b
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 53 deletions.
diff --git a/ui/src/app/metadata/domain/component/editor-nav.component.ts b/ui/src/app/metadata/domain/component/editor-nav.component.ts
@@ -45,9 +45,5 @@ export class EditorNavComponent {
         this.currentPage$ = this.current$.pipe(map(this.getFilterId));
         this.currentLabel$ = this.current$.pipe(map(this.getFilterLabel));
     }
-
-    gotoPage(page: string = ''): void {
-        this.onPageSelect.emit(page);
-    }
 }
 
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.html b/ui/src/app/metadata/provider/container/provider-edit.component.html
@@ -12,8 +12,7 @@
             <div class="col-6 d-lg-none order-1">
                 <editor-nav
                     [format]="formats.DROPDOWN"
-                    [status]="status$ | async"
-                    (onPageSelect)="setIndex($event)">
+                    [status]="status$ | async">
                     <a class="dropdown-item"
                         [routerLink]="['../', 'filters']"
                         routerLinkActive="active"
@@ -55,8 +54,7 @@
         <div class="row">
             <div class="col-lg-3 d-none d-lg-block">
                 <editor-nav
-                    [format]="formats.TABS"
-                    (onPageSelect)="setIndex($event)">
+                    [format]="formats.TABS">
                     <a class="nav-link"
                         [routerLink]="['../', 'filters']"
                         routerLinkActive="active"

diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts b/ui/src/app/metadata/provider/container/provider-edit.component.spec.ts
@@ -97,13 +97,6 @@ describe('Provider Edit Component', () => {
         expect(app).toBeTruthy();
     }));
 
-    describe('setIndex method', () => {
-        it('should interrupt event default and dispatch an event', () => {
-            app.setIndex('common');
-            expect(store.dispatch).toHaveBeenCalled();
-        });
-    });
-
     describe('go method', () => {
         it('should route to the given child form', () => {
             spyOn(router, 'navigate');

diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.ts b/ui/src/app/metadata/provider/container/provider-edit.component.ts
@@ -46,22 +46,16 @@ export class ProviderEditComponent implements OnDestroy, CanComponentDeactivate
         private modalService: NgbModal,
         private diffService: DifferentialService
     ) {
-        this.provider$ = this.store.select(fromProvider.getSelectedProvider).pipe(skipWhile(d => !d));
-        this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(skipWhile(d => !d));
-        this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(skipWhile(i => !i));
+        this.provider$ = this.store.select(fromProvider.getSelectedProvider).pipe(filter(d => !!d));
+        this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(filter(d => !!d));
+        this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(filter(i => !!i));
         this.valid$ = this.store.select(fromProvider.getEditorIsValid);
         this.isInvalid$ = this.valid$.pipe(map(v => !v));
         this.status$ = this.store.select(fromProvider.getInvalidEditorForms);
         this.isSaving$ = this.store.select(fromProvider.getEntityIsSaving);
 
-        let startIndex$ = this.route.firstChild ?
-            this.route.firstChild.params.pipe(map(p => p.form || 'filters')) :
-            this.definition$.pipe(map(d => d.steps[0].id));
-
-        startIndex$
-            .subscribe(index => {
-                this.store.dispatch(new SetIndex(index));
-            });
+        let startIndex$ = this.route.firstChild.params.pipe(map(p => p.form || 'filters'));
+        startIndex$.subscribe(index => this.store.dispatch(new SetIndex(index)));
 
         this.index$.subscribe(id => id && this.go(id));
 
@@ -82,10 +76,6 @@ export class ProviderEditComponent implements OnDestroy, CanComponentDeactivate
         this.router.navigate(['./', id], { relativeTo: this.route });
     }
 
-    setIndex(id: string): void {
-        this.store.dispatch(new SetIndex(id));
-    }
-
     ngOnDestroy() {
         this.clear();
     }

diff --git a/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts
@@ -9,7 +9,7 @@ import { MetadataResolver } from '../../domain/model';
 import { LockEditor, UnlockEditor } from '../../../wizard/action/wizard.action';
 
 import * as fromWizard from '../../../wizard/reducer';
-import { withLatestFrom, map, skipWhile, distinctUntilChanged, startWith, combineLatest, filter } from 'rxjs/operators';
+import { withLatestFrom, map, distinctUntilChanged, filter } from 'rxjs/operators';
 import { UpdateChanges } from '../action/entity.action';
 import { FormControl } from '@angular/forms';
 
@@ -96,7 +96,7 @@ export class ResolverEditStepComponent implements OnDestroy {
         this.valueChangeEmitted$.pipe(
             map(changes => changes.value),
             withLatestFrom(this.definition$, this.store.select(fromResolver.getSelectedResolver)),
-            filter(([changes, definition]) => !definition || !changes),
+            filter(([changes, definition]) => definition && changes),
             map(([changes, definition, resolver]) => definition.parser({ ...resolver, ...changes }))
         )
         .subscribe(changes => this.store.dispatch(new UpdateChanges(changes)));

diff --git a/ui/src/app/metadata/resolver/container/resolver-edit.component.html b/ui/src/app/metadata/resolver/container/resolver-edit.component.html
@@ -13,8 +13,7 @@
             <div class="col-6 d-lg-none order-1">
                 <editor-nav
                     [format]="formats.DROPDOWN"
-                    [status]="status$ | async"
-                    (onPageSelect)="setIndex($event)">
+                    [status]="status$ | async">
                 </editor-nav>
             </div>
             <div class="col-6 col-lg-3 order-2 text-right">
@@ -50,8 +49,7 @@
             <div class="col-lg-3 d-none d-lg-block">
                 <editor-nav
                     [format]="formats.TABS"
-                    [status]="status$ | async"
-                    (onPageSelect)="setIndex($event)">
+                    [status]="status$ | async">
                 </editor-nav>
             </div>
             <div class="col-lg-9">

diff --git a/ui/src/app/metadata/resolver/container/resolver-edit.component.ts b/ui/src/app/metadata/resolver/container/resolver-edit.component.ts
@@ -45,19 +45,16 @@ export class ResolverEditComponent implements OnDestroy, CanComponentDeactivate
         private modalService: NgbModal,
         private diffService: DifferentialService
     ) {
-        this.resolver$ = this.store.select(fromResolver.getSelectedResolver).pipe(skipWhile(d => !d));
-        this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(skipWhile(d => !d));
-        this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(skipWhile(i => !i));
+        this.resolver$ = this.store.select(fromResolver.getSelectedResolver).pipe(filter(d => !!d));
+        this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(filter(d => !!d));
+        this.index$ = this.store.select(fromWizard.getWizardIndex).pipe(filter(i => !!i));
         this.valid$ = this.store.select(fromResolver.getEntityIsValid);
         this.isInvalid$ = this.valid$.pipe(map(v => !v));
         this.status$ = this.store.select(fromResolver.getInvalidEntityForms);
         this.isSaving$ = this.store.select(fromResolver.getEntityIsSaving);
 
-        let startIndex$ = this.route.firstChild ?
-            this.route.firstChild.params.pipe(map(p => p.form)) :
-            this.definition$.pipe(filter(d => !!d), map(d => d.steps[0].id));
-
-        startIndex$.subscribe(index => this.setIndex(index));
+        let startIndex$ = this.route.firstChild.params.pipe(map(p => p.form));
+        startIndex$.subscribe(index => this.store.dispatch(new SetIndex(index)));
 
         this.index$.subscribe(index => index && this.go(index));
 
@@ -74,16 +71,11 @@ export class ResolverEditComponent implements OnDestroy, CanComponentDeactivate
         this.router.navigate(['./', index], { relativeTo: this.route });
     }
 
-    setIndex(id: string): void {
-        this.store.dispatch(new SetIndex(id));
-    }
-
     ngOnDestroy() {
         this.clear();
     }
 
     clear(): void {
-        this.store.dispatch(new ClearWizard());
         this.store.dispatch(new Clear());
     }
 
@@ -105,6 +97,7 @@ export class ResolverEditComponent implements OnDestroy, CanComponentDeactivate
             return of(true);
         }
         const diff = this.diffService.updatedDiff(this.resolver, this.latest);
+        console.log(diff, this.resolver, this.latest);
         if (diff && Object.keys(diff).length > 0) {
             let modal = this.modalService.open(UnsavedEntityComponent);
             modal.result.then(

diff --git a/ui/src/app/metadata/resolver/container/resolver-select.component.html b/ui/src/app/metadata/resolver/container/resolver-select.component.html
@@ -1,3 +1,3 @@
-<ng-container *ngIf="resolver$ | async">
+<div class="container-fluid p-3" *ngIf="resolver$ | async">
     <router-outlet></router-outlet>
-</ng-container>
+</div>
diff --git a/ui/src/app/metadata/resolver/resolver.routing.ts b/ui/src/app/metadata/resolver/resolver.routing.ts
@@ -60,11 +60,14 @@ export const ResolverRoutes: Routes = [
                         path: 'edit',
                         component: ResolverEditComponent,
                         children: [
+                            { path: '', redirectTo: 'common', pathMatch: 'prefix' },
                             {
                                 path: ':form',
-                                component: ResolverEditStepComponent,
-                                canDeactivate: [CanDeactivateGuard]
+                                component: ResolverEditStepComponent
                             }
+                        ],
+                        canDeactivate: [
+                            CanDeactivateGuard
                         ]
                     }
                 ]