diff --git a/apps/testing-modal/README.md b/apps/testing-modal/README.md index 494a0f05c..027d4d52f 100644 --- a/apps/testing-modal/README.md +++ b/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. -modal testing -modal testing solution author +modal testing +modal testing solution author diff --git a/apps/testing-modal/project.json b/apps/testing-modal/project.json index dc1c24890..ac10dec28 100644 --- a/apps/testing-modal/project.json +++ b/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": { diff --git a/apps/testing-modal/src/app/app.component.ts b/apps/testing-modal/src/app/app.component.ts index 75e5e652c..8c0fd8d84 100644 --- a/apps/testing-modal/src/app/app.component.ts +++ b/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: ` `, - styles: [], + host: { + class: 'p-4 block flex gap-4 items-center', + }, + template: ` + + Name + + + + +
{{ result$ | async }}
+ `, }) export class AppComponent { - title = 'testing-modal'; + private modal = inject(MatDialog); + private result = new BehaviorSubject(''); + 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 !!' + ) + ); + } } diff --git a/apps/testing-modal/src/app/error.dialog.ts b/apps/testing-modal/src/app/error.dialog.ts new file mode 100644 index 000000000..2dd11e1cb --- /dev/null +++ b/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: ` +

Error

+
+ You must enter a name first!! +
+
+ +
+ `, +}) +export class ErrorDialog {} diff --git a/apps/testing-modal/src/app/nx-welcome.component.ts b/apps/testing-modal/src/app/nx-welcome.component.ts deleted file mode 100644 index 485b05504..000000000 --- a/apps/testing-modal/src/app/nx-welcome.component.ts +++ /dev/null @@ -1,801 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -/* eslint-disable */ - -@Component({ - selector: 'app-nx-welcome', - standalone: true, - imports: [CommonModule], - template: ` - - -
-
- -
-

- Hello there, - Welcome testing-modal 👋 -

-
- - -
-
-

- - - - You're up and running -

- What's next? -
-
- - - -
-
- - -
- - -
- - -
-

Next steps

-

Here are some things you can do with Nx:

-
- - - - - Add UI library - - 
# Generate UI lib
-nx g @nrwl/angular:lib ui
-
-# Add a component
-nx g @nrwl/angular:component button --project ui
-
-
- - - - - View interactive project graph - - 
nx graph
-
-
- - - - - Run affected commands - - 
# see what's been affected by changes
-nx affected:graph
-
-# run tests for current changes
-nx affected:test
-
-# run e2e tests for current changes
-nx affected:e2e
-
-
- -

- Carefully crafted with - - - -

-
-
- `, - styles: [], - encapsulation: ViewEncapsulation.None, -}) -export class NxWelcomeComponent {} diff --git a/apps/testing-modal/src/app/profil-confirmation.dialog.ts b/apps/testing-modal/src/app/profil-confirmation.dialog.ts new file mode 100644 index 000000000..a872daf69 --- /dev/null +++ b/apps/testing-modal/src/app/profil-confirmation.dialog.ts @@ -0,0 +1,22 @@ +/* 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: ` +

Profil

+
Name: {{ data.name }}
+
+ + +
+ `, +}) +export class ProfilConfirmationDialog { + data = inject(MAT_DIALOG_DATA); +} diff --git a/apps/testing-modal/src/main.ts b/apps/testing-modal/src/main.ts index 31c5da482..c2e29fbdb 100644 --- a/apps/testing-modal/src/main.ts +++ b/apps/testing-modal/src/main.ts @@ -1,4 +1,7 @@ import { bootstrapApplication } from '@angular/platform-browser'; +import { provideAnimations } from '@angular/platform-browser/animations'; import { AppComponent } from './app/app.component'; -bootstrapApplication(AppComponent).catch((err) => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [provideAnimations()], +}).catch((err) => console.error(err));