From 36943ec9dc8e99fc779d71e3c19de92c01cc69cf Mon Sep 17 00:00:00 2001
From: Peter Kristof <peter.kristof@zeiss.com>
Date: Fri, 17 Nov 2023 12:01:08 +0100
Subject: [PATCH 1/3] CFWEB-71 Add singnal to product detail component.

---
 .../product-detail/product-detail.component.html    | 11 +++++++++++
 .../product-detail/product-detail.component.ts      | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.html b/src/app/catalog/product/components/product-detail/product-detail.component.html
index fdff9ae..0b4ac25 100644
--- a/src/app/catalog/product/components/product-detail/product-detail.component.html
+++ b/src/app/catalog/product/components/product-detail/product-detail.component.html
@@ -7,12 +7,23 @@
   <div class="row">
     <div class="product-details" *ngIf="product$ | async as product">
       <img class="product-img" src="{{ product.image }}" alt="product image" />
+
       <div class="product-description">
         <h2>{{ product.title }}</h2>
+
         <h3>Price</h3>
         <p>{{ product.price }}</p>
+
+        <div>
+          <h3>Number of funnels</h3>
+          <button class="confirmation-button" (click)="decreaseProductNumber()">-</button>
+          {{ productNumber() }}
+          <button class="confirmation-button" (click)="increseProductNumber()">+</button>
+        </div>
+
         <h3>Ingredients</h3>
         <p>{{ product.description }}</p>
+
         <button class="confirmation-button" (click)="showConfirmation()">Buy Online</button>
       </div>
     </div>
diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.ts b/src/app/catalog/product/components/product-detail/product-detail.component.ts
index 2bab890..85b1d2c 100644
--- a/src/app/catalog/product/components/product-detail/product-detail.component.ts
+++ b/src/app/catalog/product/components/product-detail/product-detail.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, signal } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 import { selectCurrentProductDetails } from '@app/catalog/product/store/product.selectors';
@@ -14,12 +14,15 @@ import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-product-detail',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './product-detail.component.html',
   styleUrls: ['./product-detail.component.scss'],
 })
 export class ProductDetailComponent implements OnInit {
   product$ = this.store.select(selectCurrentProductDetails);
 
+  productNumber = signal(1);
+
   constructor(private store: Store<StateWithCatalog>, private route: ActivatedRoute) {}
 
   backToProductOverview(): void {
@@ -30,6 +33,14 @@ export class ProductDetailComponent implements OnInit {
     this.store.dispatch(navigate({ url: '/order' }));
   }
 
+  increseProductNumber(): void {
+    this.productNumber.update((c) => c + 1);
+  }
+
+  decreaseProductNumber(): void {
+    this.productNumber.update((c) => (c > 1 ? c - 1 : 1));
+  }
+
   ngOnInit() {
     const productId: number = Number.parseInt(this.route.snapshot.paramMap.get('id'));
     this.store.dispatch(loadProductDetails({ productId: productId }));

From a414f560b1ed57362f50cc1e294e3c62c0661062 Mon Sep 17 00:00:00 2001
From: Peter Kristof <peter.kristof@zeiss.com>
Date: Mon, 18 Dec 2023 15:30:09 +0100
Subject: [PATCH 2/3] Change number of funnels to number of items.

---
 .../components/product-detail/product-detail.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.html b/src/app/catalog/product/components/product-detail/product-detail.component.html
index 0b4ac25..eb4e561 100644
--- a/src/app/catalog/product/components/product-detail/product-detail.component.html
+++ b/src/app/catalog/product/components/product-detail/product-detail.component.html
@@ -15,7 +15,7 @@ <h3>Price</h3>
         <p>{{ product.price }}</p>
 
         <div>
-          <h3>Number of funnels</h3>
+          <h3>Number of items</h3>
           <button class="confirmation-button" (click)="decreaseProductNumber()">-</button>
           {{ productNumber() }}
           <button class="confirmation-button" (click)="increseProductNumber()">+</button>

From 1f0f9f5f6e87eac77ac22479df82be1921af6b88 Mon Sep 17 00:00:00 2001
From: Peter Kristof <peter.kristof@zeiss.com>
Date: Mon, 15 Jan 2024 13:09:45 +0100
Subject: [PATCH 3/3] Add tests for product number signal.

---
 .../product-detail.component.spec.ts          | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/app/catalog/product/components/product-detail/product-detail.component.spec.ts b/src/app/catalog/product/components/product-detail/product-detail.component.spec.ts
index 9224210..9b0986d 100644
--- a/src/app/catalog/product/components/product-detail/product-detail.component.spec.ts
+++ b/src/app/catalog/product/components/product-detail/product-detail.component.spec.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
@@ -60,4 +60,32 @@ describe('ProductDetailComponent', () => {
       expect(store.dispatch).toHaveBeenCalledWith(navigate({ url: '/' }));
     });
   });
+
+  describe('increseProductNumber', () => {
+    it('should increase product number', () => {
+      component.increseProductNumber();
+
+      expect(component.productNumber()).toBe(2);
+    });
+  });
+
+  describe('decreaseProductNumber', () => {
+    it('should decrease product number', () => {
+      component.productNumber = signal(2);
+
+      component.decreaseProductNumber();
+
+      expect(component.productNumber()).toBe(1);
+    });
+  });
+
+  describe('decreaseProductNumber', () => {
+    describe('when decrease called for original value', () => {
+      it('should keep original product number', () => {
+        component.decreaseProductNumber();
+
+        expect(component.productNumber()).toBe(1);
+      });
+    });
+  });
 });