Challenge 56 multi step reactive form and signals (tomalaforge#1030)

 feat: challenge 55 form and signal

Author: tomalaforge

apps/signal/56-forms-and-signal/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+ "extends": ["../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "app",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "app",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}

apps/signal/56-forms-and-signal/README.md

@@ -0,0 +1,13 @@
+# forms and signal
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve signal-forms-and-signal
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/signal/56-forms-and-signal/).

apps/signal/56-forms-and-signal/project.json

@@ -0,0 +1,74 @@
+{
+ "name": "signal-forms-and-signal",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/signal/56-forms-and-signal/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/signal/56-forms-and-signal",
+ "index": "apps/signal/56-forms-and-signal/src/index.html",
+ "browser": "apps/signal/56-forms-and-signal/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/signal/56-forms-and-signal/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "apps/signal/56-forms-and-signal/public"
+ }
+ ],
+ "styles": ["apps/signal/56-forms-and-signal/src/styles.scss"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "signal-forms-and-signal:build:production"
+ },
+ "development": {
+ "buildTarget": "signal-forms-and-signal:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "signal-forms-and-signal:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint"
+ }
+ }
+}

apps/signal/56-forms-and-signal/public/favicon.ico

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+ standalone: true,
+ imports: [RouterOutlet],
+ selector: 'app-root',
+ template: `
+ <h1 class="text-3xl">Shop</h1>
+ <div class="w-[500px] ">
+ <router-outlet />
+ </div>
+ `,
+ host: {
+ class: 'w-full flex justify-center flex-col items-center p-4 gap-10',
+ },
+})
+export class AppComponent {}

apps/signal/56-forms-and-signal/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideRouter(routes, withComponentInputBinding()),
+ ],
+};

apps/signal/56-forms-and-signal/src/app/app.config.ts

@@ -0,0 +1,29 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: '',
+ redirectTo: 'dashboard',
+ pathMatch: 'full',
+ },
+ {
+ path: 'dashboard',
+ loadComponent: () => import('./dashboard.component'),
+ },
+ {
+ path: 'order',
+ loadComponent: () => import('./order.component'),
+ },
+ {
+ path: 'checkout',
+ loadComponent: () => import('./checkout.component'),
+ },
+ {
+ path: 'payment',
+ loadComponent: () => import('./payment.component'),
+ },
+ {
+ path: '**',
+ redirectTo: 'dashboard',
+ },
+];

apps/signal/56-forms-and-signal/src/app/app.routes.ts

@@ -0,0 +1,56 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ input,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { products } from './products';
+
+@Component({
+ selector: 'app-dashboard',
+ standalone: true,
+ imports: [RouterLink],
+ template: `
+ <h2 class="mb-1 w-full bg-gray-400 p-2 text-white">Checkout</h2>
+ <button
+ routerLink="/order"
+ queryParamsHandling="merge"
+ class="mb-5 text-blue-400">
+ < back to order
+ </button>
+ <section class="mb-5 flex justify-between">
+ <div class="font-bold">Your order:</div>
+ <div>
+ {{ quantity() }} x {{ product()?.name }}: {{ product()?.price }}€
+ </div>
+ </section>
+
+ <div>Billing Information</div>
+ <div>...</div>
+ <div>...</div>
+ <div>...</div>
+ <div>...</div>
+ <div>...</div>
+
+ <button
+ routerLink="/payment"
+ [queryParams]="{ quantity: quantity() }"
+ queryParamsHandling="merge"
+ class="w-full rounded-full border bg-blue-500 p-2 text-white">
+ Pay
+ </button>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class DashboardComponent {
+ quantity = input(1);
+ productId = input('1');
+
+ product = computed(() =>
+ products.find((product) => product.id === this.productId()),
+ );
+ totalWithVAT = computed(
+ () => this.quantity() * (this.product()?.price ?? 0) * 1.21,
+ );
+}

apps/signal/56-forms-and-signal/src/app/checkout.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { products } from './products';
+
+@Component({
+ selector: 'app-dashboard',
+ standalone: true,
+ imports: [RouterLink],
+ template: `
+ <h2 class="mb-5 w-full bg-gray-400 p-2 text-white">List of Products</h2>
+ <ul class="w-full *:border-b *:border-l *:border-r *:p-4">
+ @for (product of products; track product.id) {
+ <li [class.border-t]="$first">
+ <div class="flex w-full justify-between">
+ {{ product.name }} ({{ product.price }}€)
+ <button
+ class="w-20 rounded-full border bg-blue-500 p-2 text-white"
+ routerLink="/order"
+ [queryParams]="{ productId: product.id }">
+ Buy
+ </button>
+ </div>
+ </li>
+ }
+ </ul>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class DashboardComponent {
+ products = products;
+}

apps/signal/56-forms-and-signal/src/app/dashboard.component.ts

@@ -0,0 +1,72 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ input,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { products } from './products';
+
+@Component({
+ selector: 'app-order',
+ standalone: true,
+ imports: [RouterLink, ReactiveFormsModule],
+ template: `
+ <h2 class="mb-5 w-full bg-gray-400 p-2 text-white">Order</h2>
+ <section class="flex flex-col gap-5">
+ <form class="flex items-center justify-between gap-5" [formGroup]="form">
+ <label for="countries" class="mb-2 block text-nowrap text-gray-900">
+ Select a quantity
+ </label>
+ <select
+ formControlName="quantity"
+ id="countries"
+ class="block w-32 rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ </select>
+ </form>
+ <div class="flex justify-between">
+ <div>SubTotal</div>
+ <div>{{ totalWihoutVat() }} €</div>
+ </div>
+ <div class="flex justify-between">
+ <div>VAT (21%)</div>
+ <div>{{ vat() }} €</div>
+ </div>
+ <div class="flex justify-between">
+ <div>Total</div>
+ <div>{{ total() }} €</div>
+ </div>
+ <button
+ routerLink="/checkout"
+ [queryParams]="{ quantity: quantity() }"
+ queryParamsHandling="merge"
+ class="w-full rounded-full border bg-blue-500 p-2 text-white">
+ Checkout
+ </button>
+ </section>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class OrderComponent {
+ form = new FormGroup({
+ quantity: new FormControl(1, { nonNullable: true }),
+ });
+
+ productId = input('1');
+ price = computed(
+ () => products.find((p) => p.id === this.productId())?.price ?? 0,
+ );
+ quantity = toSignal(this.form.controls.quantity.valueChanges, {
+ initialValue: this.form.getRawValue().quantity,
+ });
+ totalWihoutVat = computed(() => Number(this.price()) * this.quantity());
+ vat = computed(() => this.totalWihoutVat() * 0.21);
+ total = computed(() => this.totalWihoutVat() + this.vat());
+}