From 8a91cb612162246ff90611ac4d55d65448f368ce Mon Sep 17 00:00:00 2001
From: joaobazzo <mairac@kyros.com.br>
Date: Mon, 12 May 2025 19:21:40 -0400
Subject: [PATCH] feat(48): 48-solution

---
 .../src/app/app.routes.ts                     |  3 +++
 .../src/app/pages/join.component.ts           | 25 ++++++++++++++++---
 .../src/app/ui/dialog.component.ts            | 23 +++++++++++------
 .../src/app/ui/form.component.ts              | 15 ++++++++++-
 .../48-avoid-losing-form-data/src/styles.scss |  2 ++
 5 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/apps/forms/48-avoid-losing-form-data/src/app/app.routes.ts b/apps/forms/48-avoid-losing-form-data/src/app/app.routes.ts
index 84be34b9a..e1022760c 100644
--- a/apps/forms/48-avoid-losing-form-data/src/app/app.routes.ts
+++ b/apps/forms/48-avoid-losing-form-data/src/app/app.routes.ts
@@ -11,6 +11,9 @@ export const appRoutes: Route[] = [
   {
     path: 'form',
     loadComponent: () => JoinComponent,
+    canDeactivate: [
+      (component: JoinComponent) => component.hasUnsavedChanges(),
+    ],
   },
   {
     path: 'page-1',
diff --git a/apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts b/apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts
index 51449a7fb..6e00f3d80 100644
--- a/apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts
+++ b/apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts
@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Dialog } from '@angular/cdk/dialog';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { map } from 'rxjs';
+import { AlertDialogComponent } from '../ui/dialog.component';
 import { FormComponent } from '../ui/form.component';
 
 @Component({
@@ -6,10 +9,26 @@ import { FormComponent } from '../ui/form.component';
   template: `
     <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 (hasValue)="hasValue = $event" />
       </div>
     </section>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JoinComponent {}
+export class JoinComponent {
+  hasValue = false;
+  dialog = inject(Dialog);
+
+  hasUnsavedChanges() {
+    if (this.hasValue) {
+      const dialogRef = this.dialog.open(AlertDialogComponent, {
+        disableClose: true,
+        ariaLabel: 'Alert dialog',
+        ariaDescribedBy: 'alert-description',
+      });
+      return dialogRef.closed.pipe(map((res) => res));
+    } else {
+      return true;
+    }
+  }
+}
diff --git a/apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts b/apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts
index 661da9bcf..147cb6b77 100644
--- a/apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts
+++ b/apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts
@@ -1,24 +1,31 @@
-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
 
 @Component({
   standalone: true,
   template: `
-    <div role="alert" class="rounded-xl border border-gray-100 bg-white p-5">
-      <h3 class="block text-xl font-medium text-red-600">
+    <div
+      class="rounded-xl border border-gray-100 bg-white p-5"
+      role="alertdialog"
+      aria-labelledby="alert-title"
+      aria-describedby="alert-description">
+      <h3 id="alert-title" class="block text-xl font-medium text-red-600">
         You have unsaved information!
       </h3>
-
-      <p class="mt-1 text-gray-700">Do you want to continue and lose them?</p>
-
+      <p id="alert-description" class="mt-1 text-gray-700">
+        Do you want to continue and lose them?
+      </p>
       <div class="mt-4 flex gap-2">
         <button
+          (click)="dialogRef.close(true)"
           class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
           Yes continue
         </button>
 
         <button
+          (click)="dialogRef.close(false)"
           class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50">
           Stay on page
         </button>
@@ -27,4 +34,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AlertDialogComponent {}
+export class AlertDialogComponent {
+  public dialogRef = inject(DialogRef);
+}
diff --git a/apps/forms/48-avoid-losing-form-data/src/app/ui/form.component.ts b/apps/forms/48-avoid-losing-form-data/src/app/ui/form.component.ts
index f3190d517..66f6e884d 100644
--- a/apps/forms/48-avoid-losing-form-data/src/app/ui/form.component.ts
+++ b/apps/forms/48-avoid-losing-form-data/src/app/ui/form.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  output,
+} from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
@@ -63,6 +68,7 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 })
 export class FormComponent {
   private fb = inject(FormBuilder);
+  hasValue = output<boolean>();
 
   form = this.fb.nonNullable.group({
     name: ['', { validators: [Validators.required] }],
@@ -74,4 +80,11 @@ export class FormComponent {
   onSubmit() {
     if (this.form.valid) this.form.reset();
   }
+
+  ngOnInit() {
+    this.form.valueChanges.subscribe((value) => {
+      const hasValue = Object.values(value).some((v) => v.trim());
+      this.hasValue.emit(hasValue);
+    });
+  }
 }
diff --git a/apps/forms/48-avoid-losing-form-data/src/styles.scss b/apps/forms/48-avoid-losing-form-data/src/styles.scss
index 77e408aa8..7387a0317 100644
--- a/apps/forms/48-avoid-losing-form-data/src/styles.scss
+++ b/apps/forms/48-avoid-losing-form-data/src/styles.scss
@@ -2,4 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@angular/cdk/overlay-prebuilt.css'
+
 /* You can add global styles to this file, and also import other style files */