diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.html b/apps/demo/src/app/cart/components/cart-item/cart-item.component.html
index b8fe36d6d6..8f5f143347 100644
--- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.html
+++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.html
@@ -13,7 +13,13 @@
Qty:
{{item.qty}}
-
+
+
+
+
diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts b/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts
index 56e8aa9fa6..c156cff26a 100644
--- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts
+++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts
@@ -4,28 +4,27 @@ import {
ComponentFixture,
TestBed,
} from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { DaffCartItem } from '@daffodil/cart';
-import {
- DaffCartItemDelete,
- DaffCartItemUpdate,
-} from '@daffodil/cart/state';
+import { DaffCartItemDelete } from '@daffodil/cart/state';
import {
DaffCartStateTestingModule,
MockDaffCartFacade,
} from '@daffodil/cart/state/testing';
import { DaffCartItemFactory } from '@daffodil/cart/testing';
import {
- DaffQtyDropdownModule,
- DaffQtyDropdownComponent,
+ DaffQuantityFieldComponent,
+ DaffQuantityFieldModule,
} from '@daffodil/design';
import { DaffProductImageFactory } from '@daffodil/product/testing';
import { CartItemComponent } from './cart-item.component';
+
@Component({ template: '
' })
class WrapperComponent {
cartItemValue: DaffCartItem;
@@ -35,7 +34,7 @@ describe('CartItemComponent', () => {
let wrapper: WrapperComponent;
let fixture: ComponentFixture
;
let cartItemComponent;
- let qtyDropdownComponent: DaffQtyDropdownComponent;
+ let quantityFieldComponent: DaffQuantityFieldComponent;
let router: Router;
let cartItemFactory: DaffCartItemFactory;
let productImageFactory: DaffProductImageFactory;
@@ -46,8 +45,9 @@ describe('CartItemComponent', () => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
- DaffQtyDropdownModule,
+ DaffQuantityFieldModule,
DaffCartStateTestingModule,
+ ReactiveFormsModule,
],
declarations: [
CartItemComponent,
@@ -70,7 +70,7 @@ describe('CartItemComponent', () => {
wrapper.cartItemValue = mockCartItem;
cartItemComponent = fixture.debugElement.query(By.css('demo-cart-item'));
- qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')).componentInstance;
+ quantityFieldComponent = fixture.debugElement.query(By.css('daff-quantity-field')).componentInstance;
fixture.detectChanges();
});
@@ -83,19 +83,8 @@ describe('CartItemComponent', () => {
expect(cartItemComponent.componentInstance.item).toEqual(mockCartItem);
});
- it('renders a ', () => {
- expect(qtyDropdownComponent).not.toBeNull();
- });
-
- describe('on ', () => {
-
- it('sets qty', () => {
- expect(qtyDropdownComponent.qty).toEqual(mockCartItem.qty);
- });
-
- it('sets id', () => {
- expect(qtyDropdownComponent.id).toEqual(mockCartItem.item_id);
- });
+ it('renders a ', () => {
+ expect(quantityFieldComponent).not.toBeNull();
});
describe('redirectToProduct', () => {
@@ -127,16 +116,6 @@ describe('CartItemComponent', () => {
});
});
- describe('when the user changes the quantity of the item', () => {
-
- it('should notify state of the quantity change', () => {
- const newQuantity = 3;
- qtyDropdownComponent.qtyChanged.emit(newQuantity);
-
- expect(facade.dispatch).toHaveBeenCalledWith(new DaffCartItemUpdate(mockCartItem.item_id, { qty: newQuantity }));
- });
- });
-
describe('when the user clicks the remove button', () => {
it('should remove the item from the cart', () => {
diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts b/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts
index e3bf97cd5c..3ad06a8dcf 100644
--- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts
+++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts
@@ -1,7 +1,13 @@
import {
Component,
+ Inject,
Input,
+ OnInit,
} from '@angular/core';
+import {
+ UntypedFormBuilder,
+ UntypedFormControl,
+} from '@angular/forms';
import { Router } from '@angular/router';
import { DaffCartItem } from '@daffodil/cart';
@@ -10,27 +16,38 @@ import {
DaffCartItemDelete,
DaffCartItemUpdate,
} from '@daffodil/cart/state';
+import {
+ DaffBase64Service,
+ DaffBase64ServiceToken,
+} from '@daffodil/core';
@Component({
selector: 'demo-cart-item',
templateUrl: './cart-item.component.html',
styleUrls: ['./cart-item.component.scss'],
})
-export class CartItemComponent {
+export class CartItemComponent implements OnInit {
@Input() item: DaffCartItem;
+ quantity: UntypedFormControl;
constructor(
private router: Router,
private facade: DaffCartFacade,
+ private formBuilder: UntypedFormBuilder,
+ @Inject(DaffBase64ServiceToken) private base64: DaffBase64Service,
) { }
- redirectToProduct() {
- this.router.navigateByUrl('/product/' + this.item.product_id);
+ ngOnInit() {
+ this.quantity = this.formBuilder.control(this.item.qty);
}
- onQtyChanged(qty) {
- this.facade.dispatch(new DaffCartItemUpdate(this.item.item_id, { qty }));
+ get quantityId() {
+ return `cart-quantity-${this.base64.encode(this.item.id)}`;
+ }
+
+ redirectToProduct() {
+ this.router.navigateByUrl('/product/' + this.item.product_id);
}
removeItem() {
diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts b/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts
index bb344908b2..5773d0c1f3 100644
--- a/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts
+++ b/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts
@@ -1,14 +1,20 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
-import { DaffQtyDropdownModule } from '@daffodil/design';
+import {
+ DaffFormFieldModule,
+ DaffQuantityFieldModule,
+} from '@daffodil/design';
import { CartItemComponent } from './cart-item.component';
@NgModule({
imports: [
CommonModule,
- DaffQtyDropdownModule,
+ ReactiveFormsModule,
+ DaffFormFieldModule,
+ DaffQuantityFieldModule,
],
declarations: [
CartItemComponent,
diff --git a/apps/demo/src/app/product/components/product/product.component.html b/apps/demo/src/app/product/components/product/product.component.html
index fcedba88a7..20ebd62d61 100644
--- a/apps/demo/src/app/product/components/product/product.component.html
+++ b/apps/demo/src/app/product/components/product/product.component.html
@@ -11,7 +11,13 @@ {{product.name}}