File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-quick-order-item |
| templateUrl |
./quick-order-item.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
loading
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
removeEntry
|
removeEntry()
|
|
|
|
|
|
Protected
watchProductAdd
|
watchProductAdd()
|
|
|
|
Returns : Subscription
|
|
index
|
Type : number
|
Decorators :
@Input()
|
|
|
|
loading
|
Type : boolean
|
Default value : false
|
Decorators :
@Input()
|
|
|
|
Protected
subscription
|
Default value : new Subscription()
|
|
|
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnDestroy,
OnInit,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { QuickOrderFacade } from '@spartacus/cart/quick-order/root';
import { OrderEntry } from '@spartacus/core';
import { Subscription } from 'rxjs';
@Component({
selector: 'cx-quick-order-item',
templateUrl: './quick-order-item.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class QuickOrderItemComponent implements OnInit, OnDestroy {
quantityControl: FormControl;
get entry(): OrderEntry {
return this._entry;
}
@Input('entry') set entry(value: OrderEntry) {
this._entry = value;
this.quantityControl = new FormControl(this.entry.quantity, {
updateOn: 'blur',
});
}
@Input()
index: number;
@Input()
loading: boolean = false;
protected _entry: OrderEntry;
protected subscription = new Subscription();
constructor(
protected cd: ChangeDetectorRef,
protected quickOrderService: QuickOrderFacade
) {}
ngOnInit(): void {
this.subscription.add(
this.quantityControl.valueChanges.subscribe(() => {
this.quickOrderService.updateEntryQuantity(
this.index,
this.quantityControl.value
);
})
);
this.subscription.add(this.watchProductAdd());
}
removeEntry(): void {
this.quickOrderService.softDeleteEntry(this.index);
this.cd.detectChanges();
}
protected watchProductAdd(): Subscription {
return this.quickOrderService.getProductAdded().subscribe((productCode) => {
if (productCode === this.entry.product?.code) {
this.quantityControl = new FormControl(this.entry.quantity);
this.cd.detectChanges();
}
});
}
ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
}
<div class="cx-quick-order-table-item">
<div class="row">
<div class="col-2 col-md-1 cx-quick-order-image-container">
<div class="cx-quick-order-table-item-product-image">
<a
[ngClass]="{ disabled: loading }"
[routerLink]="{ cxRoute: 'product', params: entry.product } | cxUrl"
tabindex="-1"
>
<cx-media
[container]="entry?.product?.images?.PRIMARY"
format="cartIcon"
></cx-media>
</a>
</div>
</div>
<div class="col-10 col-md-11 cx-quick-order-info-container">
<div class="row">
<div
class="
cx-quick-order-table-item-product-information
col-md-4 col-lg-4 col-xl-4
"
>
<div class="cx-name">
<a
[ngClass]="{ disabled: loading }"
[routerLink]="
{ cxRoute: 'product', params: entry.product } | cxUrl
"
class="cx-link"
>{{ entry.product?.name || '-' }}
</a>
</div>
<div class="cx-code">
{{ 'quickOrderTable.id' | cxTranslate }} {{ entry.product?.code }}
</div>
</div>
<div class="cx-quick-order-table-item-price col-md-2 col-lg-2 col-xl-2">
<span class="cx-label">
{{ 'quickOrderTable.itemPrice' | cxTranslate }}
</span>
<div class="cx-value">
{{ entry.basePrice?.formattedValue || '-' }}
</div>
</div>
<div
class="cx-quick-order-table-item-quantity col-md-4 col-lg-4 col-xl-4"
>
<span class="cx-label">
{{ 'quickOrderTable.qty' | cxTranslate }}
</span>
<cx-item-counter
[control]="quantityControl"
[max]="entry.product?.stock?.stockLevel"
[readonly]="loading"
></cx-item-counter>
</div>
<div
class="cx-quick-order-table-item-action col-md-2 col-lg-2 col-xl-2"
>
<button
(click)="removeEntry()"
[disabled]="loading"
class="link cx-action-link"
>
{{ 'common.remove' | cxTranslate }}
</button>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive