SHIBUI-331 Implemented unsaved changes modal in provider editor

TIER · Aug 14, 2018 · ed5fe9f · ed5fe9f
1 parent 4b0f3f6
commit ed5fe9f
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 11 deletions.
diff --git a/ui/src/app/metadata/domain/service/provider.service.ts b/ui/src/app/metadata/domain/service/provider.service.ts
@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { MetadataProvider } from '../../domain/model';
 import { FileBackedHttpMetadataProvider } from '../model/providers';
 import { ProviderOrder } from '../model/metadata-order';
 
+
 @Injectable()
 export class MetadataProviderService {
 
@@ -17,7 +19,9 @@ export class MetadataProviderService {
         private http: HttpClient
     ) {}
     query(): Observable<MetadataProvider[]> {
-        return this.http.get<MetadataProvider[]>(`${this.base}${this.endpoint}`, {});
+        return this.http.get<MetadataProvider[]>(`${this.base}${this.endpoint}`).pipe(
+            map(providers => providers.filter(p => p['@type'] !== 'BaseMetadataResolver'))
+        );
     }
 
     find(id: string): Observable<MetadataProvider> {

diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.ts
@@ -28,7 +28,6 @@ export class DashboardProvidersListComponent implements OnInit {
     ngOnInit(): void {
         this.providers$ = this.store.select(getOrderedProviders);
         this.providersOpen$ = this.store.select(getOpenProviders);
-        this.providers$.subscribe(p => console.log(p));
     }
 
     view(id: string, page: string): void {

diff --git a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html b/ui/src/app/metadata/provider/component/unsaved-provider.dialog.html
@@ -0,0 +1,16 @@
+<ng-container>
+    <div aria-label="Save your information? modal" role="region" tabindex="0">
+        <div class="modal-header">
+            <h4 class="modal-title" i18n="@@message--unsaved-dialog-title">Save your information?</h4>
+        </div>
+        <div class="modal-body">
+            <p i18n="@@message--unsaved-editor">You have not saved your changes. If you exit this screen, your changes will be lost.</p>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-primary" (click)="this.close()">
+                <span i18n="@@action--discard-changes" aria-label="Discard changes, go back to dashboard">Discard Changes</span>
+            </button>
+            <button type="button" class="btn btn-secondary" (click)="this.dismiss()" i18n="@@action--cancel" aria-label="Close modal and go back to editing">Cancel</button>
+        </div>
+    </div>
+</ng-container>
diff --git a/ui/src/app/metadata/provider/component/unsaved-provider.dialog.ts b/ui/src/app/metadata/provider/component/unsaved-provider.dialog.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Store, Action } from '@ngrx/store';
+import { Subject } from 'rxjs/Subject';
+
+import * as fromEditor from '../reducer';
+
+@Component({
+    selector: 'unsaved-provider',
+    templateUrl: './unsaved-provider.dialog.html'
+})
+export class UnsavedProviderComponent {
+    readonly subject: Subject<boolean> = new Subject<boolean>();
+
+    constructor(
+        public activeModal: NgbActiveModal,
+        private store: Store<fromEditor.State>
+    ) { }
+
+    close(): void {
+        this.activeModal.close();
+    }
+
+    dismiss(): void {
+        this.activeModal.dismiss();
+    }
+}
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.ts b/ui/src/app/metadata/provider/container/provider-edit.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Router, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable, of } from 'rxjs';
 import { skipWhile, map, combineLatest } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import * as fromWizard from '../../../wizard/reducer';
@@ -12,6 +12,9 @@ import { ClearProvider } from '../action/entity.action';
 import { Wizard } from '../../../wizard/model';
 import { UpdateProviderRequest } from '../action/collection.action';
 import { NAV_FORMATS } from '../component/provider-editor-nav.component';
+import { NgbModal } from '../../../../../node_modules/@ng-bootstrap/ng-bootstrap';
+import { UnsavedDialogComponent } from '../../resolver/component/unsaved-dialog.component';
+import { UnsavedProviderComponent } from '../component/unsaved-provider.dialog';
 
 @Component({
     selector: 'provider-edit',
@@ -36,7 +39,8 @@ export class ProviderEditComponent implements OnDestroy {
     constructor(
         private store: Store<fromProvider.ProviderState>,
         private router: Router,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private modalService: NgbModal
     ) {
         this.provider$ = this.store.select(fromProvider.getSelectedProvider).pipe(skipWhile(d => !d));
         this.definition$ = this.store.select(fromWizard.getWizardDefinition).pipe(skipWhile(d => !d));
@@ -77,6 +81,10 @@ export class ProviderEditComponent implements OnDestroy {
     }
 
     ngOnDestroy() {
+        this.clear();
+    }
+
+    clear(): void {
         this.store.dispatch(new ClearProvider());
         this.store.dispatch(new ClearWizard());
         this.store.dispatch(new ClearEditor());
@@ -87,7 +95,27 @@ export class ProviderEditComponent implements OnDestroy {
     }
 
     cancel(): void {
+        this.clear();
         this.router.navigate(['metadata', 'manager', 'providers']);
     }
+
+    canDeactivate(
+        currentRoute: ActivatedRouteSnapshot,
+        currentState: RouterStateSnapshot,
+        nextState: RouterStateSnapshot
+    ): Observable<boolean> {
+        if (nextState.url.match('edit')) { return of(true); }
+        if (Object.keys({ ...this.latest }).length > 0) {
+            let modal = this.modalService.open(UnsavedProviderComponent);
+            modal.result.then(
+                () => {
+                    this.clear();
+                    this.router.navigate([nextState.url]);
+                },
+                () => console.warn('denied')
+            );
+        }
+        return this.store.select(fromProvider.getEntityIsSaved);
+    }
 }
 
diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
@@ -28,6 +28,7 @@ import { EntityEffects } from './effect/entity.effect';
 import { ProviderFilterListComponent } from './container/provider-filter-list.component';
 
 import { ProviderEditorNavComponent } from './component/provider-editor-nav.component';
+import { UnsavedProviderComponent } from './component/unsaved-provider.dialog';
 
 @NgModule({
     declarations: [
@@ -40,9 +41,12 @@ import { ProviderEditorNavComponent } from './component/provider-editor-nav.comp
         ProviderSelectComponent,
         ProviderFilterListComponent,
         SummaryPropertyComponent,
-        ProviderEditorNavComponent
+        ProviderEditorNavComponent,
+        UnsavedProviderComponent
+    ],
+    entryComponents: [
+        UnsavedProviderComponent
     ],
-    entryComponents: [],
     imports: [
         ReactiveFormsModule,
         CommonModule,

diff --git a/ui/src/app/metadata/provider/provider.routing.ts b/ui/src/app/metadata/provider/provider.routing.ts
@@ -10,6 +10,7 @@ import { ProviderFilterListComponent } from './container/provider-filter-list.co
 import { NewFilterComponent } from '../filter/container/new-filter.component';
 import { FilterComponent } from '../filter/container/filter.component';
 import { EditFilterComponent } from '../filter/container/edit-filter.component';
+import { CanDeactivateGuard } from '../../core/service/can-deactivate.guard';
 
 export const ProviderRoutes: Routes = [
     {
@@ -44,6 +45,9 @@ export const ProviderRoutes: Routes = [
                                 path: ':form',
                                 component: ProviderEditStepComponent
                             }
+                        ],
+                        canDeactivate: [
+                            CanDeactivateGuard
                         ]
                     },
                     {
@@ -61,8 +65,7 @@ export const ProviderRoutes: Routes = [
                         children: [
                             {
                                 path: 'edit',
-                                component: EditFilterComponent,
-                                canDeactivate: []
+                                component: EditFilterComponent
                             }
                         ]
                     }

diff --git a/ui/src/app/metadata/provider/reducer/entity.reducer.ts b/ui/src/app/metadata/provider/reducer/entity.reducer.ts
@@ -41,7 +41,7 @@ export function reducer(state = initialState, action: EntityActionUnion): Entity
     }
 }
 
-export const isEntitySaved = (state: EntityState) => !Object.keys(state.changes).length && !state.saving;
+export const isEntitySaved = (state: EntityState) => state.changes ? !Object.keys(state.changes).length && !state.saving : true;
 export const getEntityChanges = (state: EntityState) => state.changes;
 export const isEditorSaving = (state: EntityState) => state.saving;
 export const getUpdatedEntity = (state: EntityState) => state.changes;
diff --git a/ui/src/app/metadata/resolver/container/editor.component.ts b/ui/src/app/metadata/resolver/container/editor.component.ts
@@ -76,7 +76,6 @@ export class EditorComponent implements OnInit, OnDestroy {
         );
 
         this.providerName$ = this.resolver$.pipe(map(p => p.serviceProviderName));
-        this.changes$ = this.store.select(fromResolver.getEditorChanges);
         this.editorIndex$ = this.route.params.pipe(map(params => Number(params.index)));
         this.currentPage$ = this.editorIndex$.pipe(map(index => EditorDef.find(r => r.index === index)));
         this.editor = EditorDef;