feat(doc): move modal

apps/test/modal/src/app/app.component.cy.ts

@@ -0,0 +1,19 @@
+import { AppComponent } from './app.component';
+
+describe(AppComponent.name, () => {
+  const setup = () => {
+    cy.mount(AppComponent);
+  };
+
+  test('error modal is displayed if you click on "Confirm" without inputing a name', () => {
+    setup();
+  });
+
+  test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', () => {
+    setup();
+  });
+
+  test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', () => {
+    setup();
+  });
+});

apps/test/modal/src/app/app.component.spec.ts

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/angular';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  test('error modal is displayed if you click on "Confirm" without inputing a name', async () => {
+    await render(AppComponent);
+  });
+
+  test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', async () => {
+    await render(AppComponent);
+  });
+
+  test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', async () => {
+    await render(AppComponent);
+  });
+});

apps/test/modal/src/app/app.component.ts

@@ -0,0 +1,65 @@
+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: [
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    AsyncPipe,
+  ],
+  selector: 'app-root',
+  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 {
+  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/test/modal/src/app/app.config.ts

@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+export const appConfig: ApplicationConfig = {
+  providers: [provideAnimations()],
+};

apps/test/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 {}

apps/test/modal/src/app/profil-confirmation.dialog.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @angular-eslint/component-class-suffix */
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
+  template: `
+    <h1 mat-dialog-title>Profil</h1>
+    <div mat-dialog-content>Name: {{ data.name }}</div>
+    <div mat-dialog-actions>
+      <button mat-button [mat-dialog-close]="false">Cancel</button>
+      <button mat-button [mat-dialog-close]="true">Confirmation</button>
+    </div>
+  `,
+})
+export class ProfilConfirmationDialog {
+  data = inject(MAT_DIALOG_DATA);
+}

apps/test/modal/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>TestingModal</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/test/modal/src/main.ts

@@ -0,0 +1,8 @@
+import { appConfig } from './app/app.config';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);

apps/test/modal/src/styles.scss

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */

apps/test/modal/src/test-setup.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-preset-angular/setup-jest';