[ACA] Dialogs - close on navigation by default (#634)

* close modals on navigation by default

* lint

* modals effect and action

* add to store module

* register in module

* close modals if auth fails

* rename action

* change dialog selector

src/app/app.component.ts

@@ -39,7 +39,8 @@ import {
   SetLanguagePickerAction,
   SnackbarErrorAction,
   SetCurrentUrlAction,
-  SetInitialStateAction
+  SetInitialStateAction,
+  CloseModalDialogsAction
 } from './store/actions';
 import {
   AppStore,
@@ -47,7 +48,6 @@ import {
   INITIAL_APP_STATE
 } from './store/states/app.state';
 import { filter } from 'rxjs/operators';
-import { MatDialog } from '@angular/material';
 
 @Component({
   selector: 'app-root',
@@ -64,8 +64,7 @@ export class AppComponent implements OnInit {
     private alfrescoApiService: AlfrescoApiService,
     private authenticationService: AuthenticationService,
     private uploadService: UploadService,
-    private extensions: AppExtensionService,
-    private dialogRef: MatDialog
+    private extensions: AppExtensionService
   ) {}
 
   ngOnInit() {
@@ -76,9 +75,9 @@ export class AppComponent implements OnInit {
             provider: 'ECM',
             url: this.router.url
           });
-          this.router.navigate(['/login']);
 
-          this.dialogRef.closeAll();
+          this.store.dispatch(new CloseModalDialogsAction());
+          this.router.navigate(['/login']);
         }
       }
     });

src/app/material.module.ts

@@ -31,7 +31,8 @@ import {
   MatDialogModule,
   MatInputModule,
   MatSnackBarModule,
-  MatProgressBarModule
+  MatProgressBarModule,
+  MAT_DIALOG_DEFAULT_OPTIONS
 } from '@angular/material';
 
 @NgModule({
@@ -52,6 +53,12 @@ import {
     MatInputModule,
     MatSnackBarModule,
     MatProgressBarModule
+  ],
+  providers: [
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: { closeOnNavigation: true, hasBackdrop: true }
+    }
   ]
 })
 export class MaterialModule {}

src/app/store/actions.ts

@@ -32,3 +32,4 @@ export * from './actions/viewer.actions';
 export * from './actions/search.actions';
 export * from './actions/library.actions';
 export * from './actions/upload.actions';
+export * from './actions/modals.actions';

src/app/store/actions/modals.actions.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Action } from '@ngrx/store';
+
+export const CLOSE_MODAL_DIALOGS = 'CLOSE_MODAL_DIALOGS';
+
+export class CloseModalDialogsAction implements Action {
+  readonly type = CLOSE_MODAL_DIALOGS;
+  constructor() {}
+}

src/app/store/app-store.module.ts

@@ -40,7 +40,8 @@ import {
   SearchEffects,
   SiteEffects,
   UploadEffects,
-  FavoriteEffects
+  FavoriteEffects,
+  ModalsEffects
 } from './effects';
 
 @NgModule({
@@ -56,7 +57,8 @@ import {
       SearchEffects,
       SiteEffects,
       UploadEffects,
-      FavoriteEffects
+      FavoriteEffects,
+      ModalsEffects
     ]),
     !environment.production
       ? StoreDevtoolsModule.instrument({ maxAge: 25 })

src/app/store/effects.ts

@@ -32,3 +32,4 @@ export * from './effects/viewer.effects';
 export * from './effects/search.effects';
 export * from './effects/library.effects';
 export * from './effects/upload.effects';
+export * from './effects/modals.effects';

src/app/store/effects/modals.effects.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { CloseModalDialogsAction, CLOSE_MODAL_DIALOGS } from '../actions';
+import { MatDialog } from '@angular/material';
+
+@Injectable()
+export class ModalsEffects {
+  constructor(private actions$: Actions, private matDialog: MatDialog) {}
+
+  @Effect({ dispatch: false })
+  closeAll$ = this.actions$.pipe(
+    ofType<CloseModalDialogsAction>(CLOSE_MODAL_DIALOGS),
+    map(() => this.matDialog.closeAll())
+  );
+}