Exit confirmation

src/app/app.component.ts

@@ -198,6 +198,9 @@ export class AppComponent {
       cancel:'CANCEL',
       submit:'LOGOUT'
     }
+    this._location.subscribe(() => {
+      this.utilService.alertClose();
+    });
     this.utilService.alertPopup(msg).then(async (data) => {
       if(data){
         await this.localStorage.setLocalData(localKeys.SELECTED_LANGUAGE, "en");
@@ -249,8 +252,4 @@ export class AppComponent {
       this.routerSubscription.unsubscribe();
     }
   }
-  @HostListener('window:popstate', ['$event'])
-  onPopState(event: any) {
-    this.utilService.alertClose()
-  }
 }

src/app/core/guards/private.guard.ts

@@ -4,20 +4,18 @@ import { Observable } from 'rxjs';
 import { Router } from '@angular/router';
 import { CommonRoutes } from 'src/global.routes';
 import { UserService } from '../services/user/user.service';
-import { UtilService } from '../services';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PrivateGuard implements CanActivate {
-  constructor(private userService:UserService,private router: Router, private utilService: UtilService){}
+  constructor(private userService:UserService,private router: Router){}
   canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
 
     return this.userService.getUserValue().then((result) => {
       if (result) {
-        this.utilService?.alertClose();
         return true;
       }
       else {

src/app/pages/create-session/create-session.page.ts

@@ -18,6 +18,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { CREATE_SESSION_FORM, PLATFORMS } from 'src/app/core/constants/formConstant';
 import { FormService } from 'src/app/core/services/form/form.service';
 import { map } from 'rxjs/operators';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationDialogComponent } from 'src/app/shared/components/confirmation-dialog/confirmation.component';
 
 @Component({
   selector: 'app-create-session',
@@ -70,7 +72,8 @@ export class CreateSessionPage implements OnInit {
     private alert: AlertController,
     private form: FormService,
     private changeDetRef: ChangeDetectorRef,
-    private router: Router
+    private router: Router,
+    private dialog: MatDialog
   ) {
   }
   async ngOnInit() {
@@ -114,42 +117,28 @@ export class CreateSessionPage implements OnInit {
     this.selectedHint = this.meetingPlatforms[0].hint;
   }
 
-  async canPageLeave() {
-    if(this.type=='default'){
-      if (!this.form1?.myForm.pristine || this.profileImageData.haveValidationError) {
-        let texts: any;
+  async canPageLeave(): Promise<any> {
+    if (this.form1 && !this.form1.myForm.pristine || !this.profileImageData.isUploaded) {
+      let texts: any;
         this.translate.get(['SESSION_FORM_UNSAVED_DATA', 'EXIT', 'CANCEL', 'EXIT_HEADER_LABEL']).subscribe(text => {
           texts = text;
         })
-        const alert = await this.alert.create({
+      let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        data: {
           header: texts['EXIT_HEADER_LABEL'],
           message: texts['SESSION_FORM_UNSAVED_DATA'],
-          buttons: [
-            {
-              text: texts['EXIT'],
-              cssClass: "alert-button-bg-white",
-              role: 'exit',
-              handler: () => { }
-            },
-            {
-              text: texts['CANCEL'],
-              cssClass: "alert-button-red",
-              role: 'cancel',
-              handler: () => { }
-            }
-          ]
-        });
-        await alert.present();
-        let data = await alert.onDidDismiss();
-        if(data.role == 'exit'){
-          return true
-        } 
-        return false
-      } else {
-        return true;
-      }
+          cancelButtonText: texts['EXIT'],
+          okButtonText: texts['CANCEL'],
+        },
+      });
+      return new Promise<boolean>((resolve) =>{
+        dialogRef.afterClosed().subscribe(result =>{
+          resolve(result);
+        })
+      })
+    } else {
+      return true;
     }
-    return true
   }
 
 

src/app/pages/edit-profile/edit-profile.page.ts

@@ -21,6 +21,8 @@ import { AlertController, Platform } from '@ionic/angular';
 import { isDeactivatable } from 'src/app/core/guards/canDeactive/deactive.guard';
 import { TranslateService } from '@ngx-translate/core';
 import { map } from 'rxjs/operators';
+import { ConfirmationDialogComponent } from 'src/app/shared/components/confirmation-dialog/confirmation.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-edit-profile',
@@ -57,7 +59,8 @@ export class EditProfilePage implements OnInit, isDeactivatable {
     private loaderService: LoaderService,
     private alert: AlertController,
     private translate: TranslateService,
-    private toast: ToastService
+    private toast: ToastService,
+    private dialog: MatDialog
   ) {
   }
   async ngOnInit() {
@@ -76,38 +79,27 @@ export class EditProfilePage implements OnInit, isDeactivatable {
     }
   }
 
-  async canPageLeave() {
+ async canPageLeave(): Promise<any> {
     if (this.form1 && !this.form1.myForm.pristine || !this.profileImageData.isUploaded) {
       let texts: any;
       this.translate
         .get(['FORM_UNSAVED_DATA', 'CANCEL', 'OK', 'EXIT_HEADER_LABEL'])
         .subscribe((text) => {
           texts = text;
         });
-      const alert = await this.alert.create({
-        header: texts['EXIT_HEADER_LABEL'],
-        message: texts['FORM_UNSAVED_DATA'],
-        buttons: [
-          {
-            text: texts['CANCEL'],
-            cssClass: 'alert-button-bg-white',
-            role: 'exit',
-            handler: () => {},
-          },
-          {
-            text: texts['OK'],
-            role: 'cancel',
-            cssClass: 'alert-button-red',
-            handler: () => {},
-          },
-        ],
+      let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        data: {
+          header: texts['EXIT_HEADER_LABEL'],
+          message: texts['FORM_UNSAVED_DATA'],
+          cancelButtonText: texts['CANCEL'],
+          okButtonText: texts['OK'],
+        }
       });
-      await alert.present();
-      let data = await alert.onDidDismiss();
-      if (data.role == 'exit') {
-        return true;
-      }
-      return false;
+      return new Promise<boolean>((resolve) =>{
+        dialogRef.afterClosed().subscribe(result =>{
+          resolve(result);
+        })
+      })
     } else {
       return true;
     }

src/app/pages/session-detail/session-detail.page.ts

@@ -36,7 +36,8 @@ export class SessionDetailPage implements OnInit {
 
   constructor(private localStorage: LocalStorageService, private router: Router,
     private activatedRoute: ActivatedRoute, private sessionService: SessionService,
-    private utilService: UtilService, private toast: ToastService, private user: UserService ,private toaster: ToastController,private translate : TranslateService,) {
+    private utilService: UtilService, private toast: ToastService, private user: UserService ,private toaster: ToastController,private translate : TranslateService,
+    private _location: Location,) {
     this.id = this.activatedRoute.snapshot.paramMap.get('id')
     this.isMobile = utilService.isMobile()
   }
@@ -283,6 +284,11 @@ export class SessionDetailPage implements OnInit {
       cancel: 'CANCEL',
       submit: 'UN_ENROLL'
     }
+
+    this._location.subscribe(() => {
+      this.utilService.alertClose();
+    });
+
     this.utilService.alertPopup(msg).then(async data => {
       if (data) {
         let result = await this.sessionService.unEnrollSession(this.id);

src/app/pages/tabs/dashboard/dashboard.page.ts

@@ -57,7 +57,6 @@ export class DashboardPage implements OnInit {
   }
 
   segmentChanged(ev: any) {
-    console.log('Segment changed', ev);
     this.segment = ev.detail.value;
     this.chart.destroy();
     this.dataAvailable = true;

src/app/shared/components/confirmation-dialog/confirmation.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmationdialog.component.html',
+  styleUrls: ['./confirmationdialog.component.scss'],
+})
+export class ConfirmationDialogComponent implements OnInit{
+
+  @Output() buttonClick = new EventEmitter()
+
+  constructor(public dialogRef: MatDialogRef<ConfirmationDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {dialogRef.disableClose = true;}
+    ngOnInit() {
+    }
+    onCancel(){
+      this.dialogRef.close();
+    }
+
+  onButtonText() {
+    this.buttonClick.emit();
+  }
+}

src/app/shared/components/confirmation-dialog/confirmationdialog.component.html

@@ -0,0 +1,13 @@
+<h2 mat-dialog-title>{{ data.header }}</h2>
+<mat-dialog-content>
+  {{ data.message }}
+</mat-dialog-content>
+<mat-dialog-actions class="custom-dialog-actions">
+  <button mat-button [mat-dialog-close]="true" class="custom-cancel-button" color="primary" (click)="onButtonText()">
+    {{ data.cancelButtonText }}
+  </button>
+  <button mat-button color="primary" class="custom-ok-button" (click)="onCancel()" >
+    {{ data.okButtonText }}
+  </button>
+</mat-dialog-actions>
+

src/app/shared/components/confirmation-dialog/confirmationdialog.component.scss

@@ -0,0 +1,13 @@
+.custom-dialog-actions {
+  justify-content: flex-end;
+}
+
+.custom-cancel-button {
+  color: var(--ion-color-primary);
+  background-color: var(--white);
+}
+
+.custom-ok-button {
+  color: var(--white);
+  background-color: var(--ion-color-primary);
+}

src/app/shared/shared.module.ts

@@ -31,6 +31,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';                                              
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [
@@ -54,7 +56,8 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
     MentorCardComponent,
     NumberOnlyDirective,
     JoinDialogBoxComponent,
-    ModelComponent
+    ModelComponent,
+    ConfirmationDialogComponent
   ],
   imports: [
     CommonModule,
@@ -70,6 +73,7 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
     ReactiveFormsModule,
     MatButtonModule,
     NgxMatMomentModule, 
+    MatDialogModule
   ],
   exports: [
     DynamicFormComponent,