feat(challenge20): create challenge testing modal

apps/testing-modal/README.md

@@ -28,10 +28,10 @@ I created some `it` blocks but feel free to add more test if you like to. -->
 6. `npx nx component-test testing-modal --watch` to test your application with Cypress
 7. _...work on it_
 8. Commit your work
-9. Submit a PR with a title beginning with **Answer:21** that I will review and other dev can review.
+9. Submit a PR with a title beginning with **Answer:20** that I will review and other dev can review.
 
-<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A21+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="modal testing"/></a>
-<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A21+label%3A"answer+author"'><img src="https://img.shields.io/badge/-Author solution-important" alt="modal testing solution author"/></a>
+<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A20+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="modal testing"/></a>
+<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A20+label%3A"answer+author"'><img src="https://img.shields.io/badge/-Author solution-important" alt="modal testing solution author"/></a>
 
 <!-- <a href="{Blog post url}" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/-Blog post explanation-blue" alt="nested testing blog article"/></a> -->
 

apps/testing-modal/project.json

@@ -19,7 +19,10 @@
           "apps/testing-modal/src/favicon.ico",
           "apps/testing-modal/src/assets"
         ],
-        "styles": ["apps/testing-modal/src/styles.scss"],
+        "styles": [
+          "apps/testing-modal/src/styles.scss",
+          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+        ],
         "scripts": []
       },
       "configurations": {

apps/testing-modal/src/app/app.component.ts

@@ -1,13 +1,65 @@
-import { NxWelcomeComponent } from './nx-welcome.component';
-import { Component } from '@angular/core';
-
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BehaviorSubject } from 'rxjs';
+import { ErrorDialog } from './error.dialog';
+import { ProfilConfirmationDialog } from './profil-confirmation.dialog';
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent],
+  imports: [
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    AsyncPipe,
+  ],
   selector: 'app-root',
-  template: ` <app-nx-welcome></app-nx-welcome> `,
-  styles: [],
+  host: {
+    class: 'p-4 block flex gap-4 items-center',
+  },
+  template: `
+    <mat-form-field appearance="fill">
+      <mat-label>Name</mat-label>
+      <input
+        type="text"
+        matInput
+        [formControl]="name"
+        placeholder="enter your name" />
+    </mat-form-field>
+    <button (click)="confirm()" mat-flat-button color="primary">Confirm</button>
+
+    <div>{{ result$ | async }}</div>
+  `,
 })
 export class AppComponent {
-  title = 'testing-modal';
+  private modal = inject(MatDialog);
+  private result = new BehaviorSubject<string>('');
+  result$ = this.result.asObservable();
+
+  name = new FormControl('', { nonNullable: true });
+
+  confirm() {
+    if (!this.name.value) {
+      this.modal.open(ErrorDialog);
+      return;
+    }
+
+    this.modal
+      .open(ProfilConfirmationDialog, {
+        data: {
+          name: this.name.value,
+        },
+      })
+      .afterClosed()
+      .subscribe((result) =>
+        this.result.next(
+          result ? 'Name has been submitted' : 'Name is invalid !!'
+        )
+      );
+  }
 }

apps/testing-modal/src/app/error.dialog.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @angular-eslint/component-class-suffix */
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
+  template: `
+    <h1 mat-dialog-title>Error</h1>
+    <div mat-dialog-content>
+      You must enter a <span class="font-bold">name</span> first!!
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button mat-dialog-close>OK</button>
+    </div>
+  `,
+})
+export class ErrorDialog {}