From 72ef2ccd24705b21882d054a9968c08896745801 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Thu, 18 Apr 2024 14:57:08 +0200 Subject: [PATCH 1/7] fix(c-48): contributors --- .../forms/48-avoid-losing-form-data.md | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md new file mode 100644 index 0000000..cf5dfd0 --- /dev/null +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -0,0 +1,42 @@ +--- +title: 🟠 Avoid losing form data +description: Challenge 48 is about Bob 🧙‍♂️ the product owner, he wants to develop a new feature in response to customer complaints about losing form input information. +author: timothy-alcaide +contributors: + - alcaidio + - svenson95 +challengeNumber: 48 +command: avoid-losing-form-data +sidebar: + order: 121 + badge: New +--- + +## Context + +As a member of the development team, you need to address a specific request from the product owner, 🧙‍♂️ Bob. He wants to develop a new feature in response to customer complaints about losing form input information. + +## User Story + +Here's the feature expressed as a user story (functional expectation) : + +"As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the /form page after I have started entering information into the form." + +## Acceptance Criteria + +1. On the /form page: + +- If the input text has been pre-filled, then an alert dialog box opens. +- Otherwise, the user navigates normally. + +2. The content of `dialog.component.ts` must be use for your dialog box content. +3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). +4. Maximize the use of the new concepts and syntax in the latest version of Angular. + +
+ Tips 🤫 (if you really need it and after careful consideration) + +
From bad35ac72f3fb08713715a1f6c677dcc2645331a Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 19 Apr 2024 01:27:26 +0200 Subject: [PATCH 2/7] docs(c48): update docs content --- .../forms/48-avoid-losing-form-data.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md index cf5dfd0..174befe 100644 --- a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -18,25 +18,24 @@ As a member of the development team, you need to address a specific request from ## User Story -Here's the feature expressed as a user story (functional expectation) : +Here's the feature expressed as a user story with a functional expectation: -"As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the /form page after I have started entering information into the form." +> As a user, I would like to have an alert dialog box that appears when +> I attempt to navigate away from the page, after I have started +> entering information into the form. ## Acceptance Criteria -1. On the /form page: +1. If one of the form fields is not empty and the user tries to navigate to a different route or page, or wants to reload the page, show an alert dialog to _avoid losing form data_. -- If the input text has been pre-filled, then an alert dialog box opens. -- Otherwise, the user navigates normally. - -2. The content of `dialog.component.ts` must be use for your dialog box content. +2. The content of `dialog.component.ts` must be used for your alert. 3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
Tips 🤫 (if you really need it and after careful consideration)
    -
  • Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss)
    • -
  • Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).
    • +
  • Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`)
    • +
  • Use the `CanDeactivate` guard - https://angular.io/api/router/CanDeactivate in the new functional approach.
From 322ea9a9aaac78cdac0cfa5162d3b5440198d4cb Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 19 Apr 2024 01:38:14 +0200 Subject: [PATCH 3/7] docs(c48): fix tips styling --- .../docs/challenges/forms/48-avoid-losing-form-data.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md index 174befe..d48f7f8 100644 --- a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -35,7 +35,7 @@ Here's the feature expressed as a user story with a functional expectation:
Tips 🤫 (if you really need it and after careful consideration)
    -
  • Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`)
    • -
  • Use the `CanDeactivate` guard - https://angular.io/api/router/CanDeactivate in the new functional approach.
    • +
  • Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in styles.scss
    • +
  • Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.
From 74c4b104a596988cad3c55cfbf28fb8564287bfa Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 19 Apr 2024 01:47:36 +0200 Subject: [PATCH 4/7] docs(c48): refactor --- .../docs/challenges/forms/48-avoid-losing-form-data.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md index d48f7f8..0636dc9 100644 --- a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -29,13 +29,13 @@ Here's the feature expressed as a user story with a functional expectation: 1. If one of the form fields is not empty and the user tries to navigate to a different route or page, or wants to reload the page, show an alert dialog to _avoid losing form data_. 2. The content of `dialog.component.ts` must be used for your alert. -3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). +3. The appearance and behavior of the alert dialog must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
- Tips 🤫 (if you really need it and after careful consideration) + Tips 🤫 if you really need it and after careful consideration ...
    -
  • Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in styles.scss
    • -
  • Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.
    • + * Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`. + * Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.
From 9f36fc17a537a826709c03d57648ea9240664ee1 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 19 Apr 2024 01:47:52 +0200 Subject: [PATCH 5/7] docs(c48): refactor (2) --- .../content/docs/challenges/forms/48-avoid-losing-form-data.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md index 0636dc9..d2c4ef3 100644 --- a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -34,8 +34,6 @@ Here's the feature expressed as a user story with a functional expectation:
Tips 🤫 if you really need it and after careful consideration ... -
    * Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`. * Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach. -
From e2c10dd374735e6bc3ab930faf12cb17d062d92c Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 19 Apr 2024 01:49:03 +0200 Subject: [PATCH 6/7] docs(c48): refactor (3) --- .../content/docs/challenges/forms/48-avoid-losing-form-data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md index d2c4ef3..7dc40d6 100644 --- a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -34,6 +34,6 @@ Here's the feature expressed as a user story with a functional expectation:
Tips 🤫 if you really need it and after careful consideration ... - * Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`. + * Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - don't forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`. * Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.
From 19c9e4ec060d0a44f537c8dea099df1d9d4839a7 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 19 Apr 2024 01:56:48 +0200 Subject: [PATCH 7/7] docs(c48): revert & fix link --- .../docs/challenges/forms/48-avoid-losing-form-data.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md index 7dc40d6..bbaa486 100644 --- a/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md +++ b/docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md @@ -29,11 +29,13 @@ Here's the feature expressed as a user story with a functional expectation: 1. If one of the form fields is not empty and the user tries to navigate to a different route or page, or wants to reload the page, show an alert dialog to _avoid losing form data_. 2. The content of `dialog.component.ts` must be used for your alert. -3. The appearance and behavior of the alert dialog must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). +3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
- Tips 🤫 if you really need it and after careful consideration ... - * Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - don't forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`. - * Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach. + Tips 🤫 (if you really need it and after careful consideration) +
    +
  • Use the Material CDK Dialog or Overlay - don't forget to add @import '@angular/cdk/overlay-prebuilt.css' in styles.scss
    • +
  • Use the CanDeactivate guard in the new functional approach.
    • +