feat: add Tailwind CSS and update component styles

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+      "@tailwindcss/postcss": {}
+    }
+}

package.json

@@ -20,8 +20,11 @@
     "@angular/platform-server": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@angular/ssr": "^19.2.8",
+    "@tailwindcss/postcss": "^4.1.5",
     "express": "^4.18.2",
+    "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

src/app/app.component.html

@@ -1,21 +1,3 @@
-<ng-container *ngIf="isLoadingUsers()">
+<div class="container mx-auto p-4 m-3 flex justify-center items-center min-h-screen">
-    <p>Loading...</p>
+  <app-product-overview></app-product-overview>
-</ng-container>
-<ng-container *ngIf="!isLoadingUsers()">
-<select id="userId" (change)="onUserSelect($event)">
-  <ng-container *ngFor="let user of users()">
-    <option [value]="user.id">{{user.name}}</option>
-  </ng-container>
-</select>
-</ng-container>
-
-<ng-container *ngIf="isLoadingTodos()">
-  <p>Loading...</p>
-</ng-container>
-<div *ngIf="!isLoadingTodos() && selectedUserId() !== null && todos()">
-  <select id="todoId">
-    <ng-container *ngFor="let todo of todos()">
-      <option [value]="todo.id">{{todo.title}}</option>
-    </ng-container>
-  </select>
 </div>

src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'angular-workshop' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular-workshop');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-workshop');
-  });
-});

src/app/app.component.ts

@@ -1,44 +1,12 @@
-import { Component, signal, ChangeDetectionStrategy, inject, WritableSignal } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { UserService } from './user.service';
+import { ProductOverviewComponent } from "./product-overview/product-overview.component";
-import { NgFor, NgIf } from '@angular/common';
-
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [NgFor, NgIf],
+  imports: [ProductOverviewComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   title = 'angular-workshop';
-  
-  private userService = inject(UserService);
-  
-  selectedUserId = signal<number | null>(null);
-
-  users: WritableSignal<any[]> = signal([]);
-  
-  todos: WritableSignal<any[]> = signal([]);
-
-  isLoadingUsers = signal(true);
-  isLoadingTodos = signal(false);
-  
-  ngOnInit() {
-    this.userService.getUsers().subscribe(users => {
-      this.users.set(users);
-      this.isLoadingUsers.set(false)
-    });
-  }
-  
-  onUserSelect(event: Event): void {
-    const userId = Number((event.target as HTMLSelectElement).value);
-    this.selectedUserId.set(userId);
-    this.isLoadingTodos.set(true);
-    this.userService.getTodos(userId).subscribe({
-      next: (todos) => this.todos.set(todos),
-      error: () => this.isLoadingTodos.set(false),
-      complete: () => this.isLoadingTodos.set(false)
-    });
-  }
 }

src/app/app.config.ts

@@ -7,7 +7,6 @@ import { provideHttpClient, withFetch } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-
     provideRouter(routes), 
     provideHttpClient(withFetch())
   ]

src/app/product-overview/product-overview.component.html

@@ -0,0 +1,17 @@
+<div class="flex flex-col gap-6 p-6 max-w-lg mx-auto bg-white rounded-lg shadow-md">
+  <app-product-selection 
+    (productChange)="onProductChange($event)" 
+    (quantityChange)="onQuantityChange($event)"
+    class="w-full">
+  </app-product-selection>
+  
+  <app-product-quantity 
+    [product]="selectedProduct()" 
+    (quantityChange)="onQuantityChange($event)"
+    class="w-full">
+  </app-product-quantity>
+
+  <div class="mt-4 border-t pt-4 min-h-[40px]">
+    <p class="text-xl font-semibold text-right">Total: {{ total() | currency : 'EUR' : 'symbol' : '1.2-2' }}</p>
+  </div>
+</div>

src/app/product-overview/product-overview.component.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
+import { ProductSelectionComponent, Product } from '../product-selection/product-selection.component';
+import { ProductQuantityComponent } from '../product-quantity/product-quantity.component';
+import { CurrencyPipe } from '@angular/common';
+@Component({
+  selector: 'app-product-overview',
+  standalone: true,
+  imports: [ProductSelectionComponent, ProductQuantityComponent, CurrencyPipe],
+  templateUrl: './product-overview.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductOverviewComponent {
+  selectedProduct = signal<Product | null>(null);
+  quantity = signal<number>(1);
+  
+  total = computed(() => {
+    const product = this.selectedProduct();
+    return product ? product.price * this.quantity() : 0;
+  });
+
+  onProductChange(product: Product) {
+    this.selectedProduct.set(product);
+  }
+
+  onQuantityChange(quantity: number) {
+    this.quantity.set(quantity);
+  }
+}

src/app/product-quantity/product-quantity.component.html

@@ -0,0 +1,11 @@
+<div class="min-h-[90px]">
+  <div class="mb-2 font-medium text-gray-700">Quantity</div>
+  <input 
+    type="number" 
+    [ngModel]="quantity" 
+    (ngModelChange)="onQuantityChange($event)" 
+    [disabled]="!product" 
+    min="1"
+    class="block w-full h-[42px] px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+  >
+</div>

src/app/product-quantity/product-quantity.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core';
+import { Product } from '../product-selection/product-selection.component';
+import { FormsModule } from '@angular/forms';
+import { ProductService } from '../services/product.service';
+
+@Component({
+  selector: 'app-product-quantity',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './product-quantity.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductQuantityComponent {
+
+  @Input({ required: true }) set product(value: Product | null) {
+    this.productService.setProduct(value);
+  }
+  get product(): Product | null {
+    return this.productService.getProduct();
+  }
+
+  @Output() quantityChange = new EventEmitter<number>();
+
+  constructor(private productService: ProductService) {}
+
+  get quantity(): number {
+    return this.productService.getQuantity();
+  }
+
+  onQuantityChange(value: number) {
+    this.productService.setQuantity(value);
+    this.quantityChange.emit(value);
+  }
+}

src/app/product-selection/product-selection.component.html

@@ -0,0 +1,21 @@
+<div class="min-h-[120px]">
+  <ng-container *ngIf="isProductLoading()">
+    <div class="flex items-center justify-center h-[72px] p-4 text-gray-500 border border-gray-300 rounded-md">
+      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      Loading...
+    </div>
+  </ng-container>
+  <ng-container *ngIf="!isProductLoading()">
+    <div class="mb-2 font-medium text-gray-700">Select Product</div>
+    <select 
+      [ngModel]="selectedProduct()" 
+      (ngModelChange)="onProductChange($event)"
+      class="block w-full h-[42px] px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+      <option [ngValue]="null">Select a product</option>
+      <option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
+    </select>
+  </ng-container>
+</div>

src/app/product-selection/product-selection.component.ts

@@ -0,0 +1,58 @@
+import { NgFor, NgIf } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Component, ChangeDetectionStrategy, Output, EventEmitter, signal, inject, computed, OnInit } from '@angular/core';
+import { ProductService } from '../services/product.service';
+
+export type Product = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  category: string;
+  image: string;
+  rating: {
+    rate: number;
+    count: number;
+  }
+}
+
+@Component({
+  selector: 'app-product-selection',
+  standalone: true,
+  imports: [NgFor, CurrencyPipe, FormsModule, NgIf],
+  templateUrl: './product-selection.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class ProductSelectionComponent implements OnInit {
+  products = signal<Product[]>([]);
+
+  selectedProduct = signal<Product | null>(null);
+
+  quantity = signal<number>(1);
+
+  isProductLoading = signal(true);
+  
+  @Output() quantityChange = new EventEmitter<number>();
+  @Output() productChange = new EventEmitter<Product>();
+
+  private productService = inject(ProductService);
+
+  ngOnInit() {
+    this.productService.getProducts().subscribe(products => {
+      this.products.set(products);
+      this.isProductLoading.set(false);
+    });
+  }
+
+  onProductChange(selectedProduct: Product) {
+    this.selectedProduct.set(selectedProduct);
+    const product = this.selectedProduct();
+    if (product) {
+      this.productChange.emit(product);
+      this.quantity.set(1);
+      this.quantityChange.emit(1);
+    }
+  }
+}

src/app/services/product.service.ts

@@ -0,0 +1,45 @@
+import { Injectable, signal, WritableSignal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { delay, Observable, shareReplay } from 'rxjs';
+import { Product } from '../product-selection/product-selection.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  private productSignal = signal<Product | null>(null);
+  private quantitySignal = signal<number>(1);
+
+  constructor(private http: HttpClient) {}
+
+  setProduct(product: Product | null): void {
+    this.productSignal.set(product);
+    if (product) {
+      this.quantitySignal.set(1);
+    }
+  }
+
+  getProduct(): Product | null {
+    return this.productSignal();
+  }
+
+  setQuantity(quantity: number): void {
+    this.quantitySignal.set(quantity);
+  }
+
+  getQuantity(): number {
+    return this.quantitySignal();
+  }
+
+  getProducts(): Observable<any[]> {
+    return this.http.get<any[]>('https://fakestoreapi.com/products').pipe(
+      delay(1000)
+    );
+  }
+
+  getProductById(id: number): Observable<any> {
+    return this.http.get<any>(`https://fakestoreapi.com/products/${id}`).pipe(
+      delay(1000)
+    );
+  }
+} 

src/app/services/user.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  constructor(private http: HttpClient) {}
+}

src/app/user.service.ts

@@ -1,34 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { delay, Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UserService {
-  constructor(private http: HttpClient) {}
-
-  getUsers(): Observable<any[]> {
-    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users').pipe(
-      delay(1000)
-    )
-  }
-
-  getUser(id: number): Observable<any> {
-    return this.http.get<any>(`https://jsonplaceholder.typicode.com/users/${id}`).pipe(
-      delay(1000)
-    )
-  }
-
-  getTodos(userId: number): Observable<any[]> {
-    return this.http.get<any[]>(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`).pipe(
-      delay(1000)
-    )
-  }
-
-  getTodo(id: number): Observable<any> {
-    return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${id}`).pipe(
-      delay(1000)
-    )
-  }
-}

src/styles.css

@@ -1 +1 @@
-/* You can add global styles to this file, and also import other style files */
+@import "tailwindcss";