feat(challenge 48): implement unsaved changes guard and dialog for form navigation

Author: truonghungit

apps/forms/48-avoid-losing-form-data/src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Route } from '@angular/router';
+import { unsavedChangesGuard } from './guards/unsaved-changes.guard';
 import { JoinComponent } from './pages/join.component';
 import { PageComponent } from './pages/page.component';
 
@@ -11,6 +12,7 @@ export const appRoutes: Route[] = [
   {
     path: 'form',
     loadComponent: () => JoinComponent,
+    canDeactivate: [unsavedChangesGuard],
   },
   {
     path: 'page-1',

apps/forms/48-avoid-losing-form-data/src/app/guards/unsaved-changes.guard.ts

@@ -0,0 +1,19 @@
+import { CanDeactivateFn } from '@angular/router';
+import { Observable } from 'rxjs';
+
+export interface CanDeactivateComponent {
+  canDeactivate: () => boolean | Observable<boolean>;
+}
+
+export const unsavedChangesGuard: CanDeactivateFn<CanDeactivateComponent> = (
+  component,
+) => {
+  if (
+    component.canDeactivate &&
+    typeof component.canDeactivate === 'function'
+  ) {
+    return component.canDeactivate();
+  }
+
+  return true;
+};

apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts

@@ -1,15 +1,56 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Dialog } from '@angular/cdk/dialog';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+  inject,
+  viewChild,
+} from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { CanDeactivateComponent } from '../guards/unsaved-changes.guard';
+import { AlertDialogComponent } from '../ui/dialog.component';
 import { FormComponent } from '../ui/form.component';
 
 @Component({
   imports: [FormComponent],
   template: `
-    <section class="mx-auto	max-w-screen-sm">
+    <section class="mx-auto max-w-screen-sm">
       <div class="rounded-lg bg-white p-8 shadow-lg lg:p-12">
-        <app-form />
+        <app-form #form />
       </div>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JoinComponent {}
+export class JoinComponent implements CanDeactivateComponent {
+  dialog = inject(Dialog);
+  formComponentRef = viewChild(FormComponent);
+
+  @HostListener('window:beforeunload', ['$event'])
+  beforeUnloadHandler(event: BeforeUnloadEvent) {
+    const form = this.formComponentRef()?.form;
+    if (form && form.dirty) {
+      event.preventDefault();
+    }
+  }
+
+  canDeactivate(): Observable<boolean> | boolean {
+    const form = this.formComponentRef()?.form;
+    if (!form || !form.dirty) {
+      return true;
+    }
+
+    const dialogRef = this.dialog.open(AlertDialogComponent, {
+      role: 'alertdialog',
+      ariaDescribedBy: 'dialog-description',
+      ariaLabelledBy: 'dialog-title',
+      ariaModal: true,
+    });
+
+    return dialogRef.closed.pipe(
+      map((canLeave) => {
+        return canLeave === true;
+      }),
+    );
+  }
+}

apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 // NOTE : this is just the dialog content, you need to implement dialog logic
 
@@ -13,17 +14,21 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
       <div class="mt-4 flex gap-2">
         <button
-          class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
+          class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700"
+          (click)="dialogRef.close(true)">
           Yes continue
         </button>
 
         <button
-          class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50">
+          class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50"
+          (click)="dialogRef.close(false)">
           Stay on page
         </button>
       </div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AlertDialogComponent {}
+export class AlertDialogComponent {
+  dialogRef = inject(DialogRef<boolean, AlertDialogComponent>);
+}