Fixed events and refactored quantity options pipe

Rachnerd · Rachnerd · commit 97c99981aa00 · 2022-04-21T20:39:03.000+02:00
diff --git a/src/app/molecules/quantity-picker/quantity-picker.component.html b/src/app/molecules/quantity-picker/quantity-picker.component.html
@@ -7,7 +7,7 @@
   <option value="" selected disabled hidden>
     {{ quantity.min }}
   </option>
-  <option *ngFor="let option of quantity | toQuantityOptions">
+  <option *ngFor="let option of quantity | quantityOptions">
     {{ option }}
   </option>
 </select>
diff --git a/src/app/molecules/quantity-picker/quantity-picker.component.mocks.ts b/src/app/molecules/quantity-picker/quantity-picker.component.mocks.ts
@@ -1,6 +1,6 @@
 import { Quantity } from './quantity-picker.component';
 
-type MockKeys = 'PRIMARY' | 'WITH_STEPS' | 'MIN_QUANTITY';
+type MockKeys = 'PRIMARY' | 'WITH_STEPS' | 'MIN_QUANTITY' | 'WITH_MAX';
 
 export const QuantityPickerMocks: Record<MockKeys, Quantity> = {
   PRIMARY: {
@@ -14,4 +14,5 @@ export const QuantityPickerMocks: Record<MockKeys, Quantity> = {
     max: 100,
   },
   MIN_QUANTITY: { min: 1, step: 1, max: 1 },
+  WITH_MAX: { min: 4, step: 4, max: 12 },
 };
diff --git a/src/app/molecules/quantity-picker/quantity-picker.component.stories.ts b/src/app/molecules/quantity-picker/quantity-picker.component.stories.ts
@@ -27,6 +27,11 @@ WithSteps.args = {
   quantity: QuantityPickerMocks.WITH_STEPS,
 };
 
+export const WithMax = Template.bind({});
+WithMax.args = {
+  quantity: QuantityPickerMocks.WITH_MAX,
+};
+
 export const WithInput = Template.bind({});
 WithInput.args = {
   quantity: QuantityPickerMocks.PRIMARY,
diff --git a/src/app/molecules/quantity-picker/quantity-picker.module.ts b/src/app/molecules/quantity-picker/quantity-picker.module.ts
@@ -4,10 +4,10 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'src/app/atoms/button/button.module';
 import { IconModule } from 'src/app/atoms/icon/icon.module';
 import { QuantityPickerComponent } from './quantity-picker.component';
-import { ToQuantityOptionsPipe } from './shared/to-quantity-options.pipe';
+import { QuantityOptionsPipe } from './shared/quantity-options.pipe';
 
 @NgModule({
-  declarations: [QuantityPickerComponent, ToQuantityOptionsPipe],
+  declarations: [QuantityPickerComponent, QuantityOptionsPipe],
   imports: [CommonModule, ButtonModule, IconModule, ReactiveFormsModule],
   exports: [QuantityPickerComponent],
 })
diff --git a/src/app/molecules/quantity-picker/shared/quantity-options.pipe.spec.ts b/src/app/molecules/quantity-picker/shared/quantity-options.pipe.spec.ts
@@ -1,8 +1,8 @@
-import { ToQuantityOptionsPipe } from './to-quantity-options.pipe';
+import { QuantityOptionsPipe } from './quantity-options.pipe';
 
 describe('ToQuantityOptionsPipe', () => {
   it('create an instance', () => {
-    const pipe = new ToQuantityOptionsPipe();
+    const pipe = new QuantityOptionsPipe();
     expect(pipe).toBeTruthy();
   });
 });
diff --git a/src/app/molecules/quantity-picker/shared/quantity-options.pipe.ts b/src/app/molecules/quantity-picker/shared/quantity-options.pipe.ts
@@ -6,9 +6,9 @@ const MAX_AMOUNT_OF_OPTIONS = 8;
 export type Option = number | 'More';
 
 @Pipe({
-  name: 'toQuantityOptions',
+  name: 'quantityOptions',
 })
-export class ToQuantityOptionsPipe implements PipeTransform {
+export class QuantityOptionsPipe implements PipeTransform {
   transform({ min, max, step }: Quantity): Option[] {
     const options: Option[] = [];
     for (let i = min; i <= max; i += step) {
diff --git a/src/app/organisms/products-list-dynamic/products-list-dynamic.component.ts b/src/app/organisms/products-list-dynamic/products-list-dynamic.component.ts
@@ -1,8 +1,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
   QueryList,
   ViewChildren,
   ViewContainerRef,
@@ -23,6 +25,11 @@ import {
 import { ProductUnion } from '../products-list/products-list.component';
 import { ProductsHostDirective } from './shared/products-host.directive';
 
+interface AddToCartEvent {
+  product: ProductDefault;
+  quantity: number;
+}
+
 @Component({
   selector: 'ov-products-list-dynamic',
   templateUrl: './products-list-dynamic.component.html',
@@ -32,6 +39,8 @@ import { ProductsHostDirective } from './shared/products-host.directive';
 export class ProductsListDynamicComponent implements OnInit {
   @Input() products!: ProductUnion[];
 
+  @Output() addToCart = new EventEmitter<AddToCartEvent>();
+
   @ViewChildren(ProductsHostDirective)
   productsHosts!: QueryList<ProductsHostDirective>;
 
@@ -89,9 +98,12 @@ export class ProductsListDynamicComponent implements OnInit {
      * Handle outputs
      */
     this.subscriptions.add(
-      instance.addToCart.subscribe((quantity) => {
-        console.log(product, quantity);
-      })
+      instance.addToCart.subscribe((quantity) =>
+        this.addToCart.emit({
+          product,
+          quantity,
+        })
+      )
     );
   }
 
diff --git a/src/app/organisms/products-list/products-list.component.html b/src/app/organisms/products-list/products-list.component.html
@@ -21,7 +21,7 @@
       <ov-product-default
         *ngIf="asProduct(product)! as product"
         [product]="product"
-        (addToCart)="addToCart($event, product)"
+        (addToCart)="addProductToCart($event, product)"
       ></ov-product-default>
     </ng-container>
   </li>
diff --git a/src/app/organisms/products-list/products-list.component.ts b/src/app/organisms/products-list/products-list.component.ts
@@ -3,12 +3,20 @@ import {
   Component,
   Input,
   OnInit,
+  Output,
+  EventEmitter,
 } from '@angular/core';
 import { ProductDefault } from '../../molecules/product-default/product-default.component';
 import { ProductOutOfStock } from '../../molecules/product-out-of-stock/product-out-of-stock.component';
 import { ProductReplaced } from '../../molecules/product-replaced/product-replaced.component';
 
 export type ProductUnion = ProductDefault | ProductReplaced | ProductOutOfStock;
+
+export interface AddToCartEvent {
+  product: ProductDefault;
+  quantity: number;
+}
+
 @Component({
   selector: 'ov-products-list',
   templateUrl: './products-list.component.html',
@@ -18,6 +26,8 @@ export type ProductUnion = ProductDefault | ProductReplaced | ProductOutOfStock;
 export class ProductsListComponent implements OnInit {
   @Input() products!: ProductUnion[];
 
+  @Output() addToCart = new EventEmitter<AddToCartEvent>();
+
   productIntersectionMargin = '-200px 0px -350px 0px';
 
   ngOnInit(): void {}
@@ -34,8 +44,11 @@ export class ProductsListComponent implements OnInit {
     return product.type === 'product-replaced' ? product : undefined;
   }
 
-  addToCart(quantity: number, product: ProductDefault) {
-    console.log(product, quantity);
+  addProductToCart(quantity: number, product: ProductDefault) {
+    this.addToCart.emit({
+      product,
+      quantity,
+    });
   }
 
   productIntersect({ target, isIntersecting }: IntersectionObserverEntry) {
diff --git a/src/app/pages/page-products/page-products.component.html b/src/app/pages/page-products/page-products.component.html
@@ -2,6 +2,9 @@
   <ng-template ovSide>Some side stuff</ng-template>
   <section main>
     <h2>Products</h2>
-    <ov-products-list [products]="products"></ov-products-list>
+    <ov-products-list
+      [products]="products"
+      (addToCart)="addProductToCart($event)"
+    ></ov-products-list>
   </section>
 </ov-template-default>
diff --git a/src/app/pages/page-products/page-products.component.ts b/src/app/pages/page-products/page-products.component.ts
@@ -4,7 +4,10 @@ import {
   Input,
   OnInit,
 } from '@angular/core';
-import { ProductUnion } from '../../organisms/products-list/products-list.component';
+import {
+  AddToCartEvent,
+  ProductUnion,
+} from '../../organisms/products-list/products-list.component';
 @Component({
   selector: 'ov-page-products',
   templateUrl: './page-products.component.html',
@@ -15,4 +18,8 @@ export class PageProductsComponent implements OnInit {
   @Input() products!: ProductUnion[];
 
   ngOnInit(): void {}
+
+  addProductToCart({ product, quantity }: AddToCartEvent) {
+    console.log(`Add  ${quantity}x ${product.id} to cart`);
+  }
 }
