File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| providers |
VisualPickingProductListService
|
| selector |
cx-epd-visualization-product-list |
| templateUrl |
./visual-picking-product-list.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
selectedProductCodes
|
Type : []
|
|
|
|
singleSelection
|
Type : boolean
|
Default value : true
|
|
|
Outputs
|
selectedProductCodesChange
|
|
|
|
selectedProductCodesChange
|
Default value : this.visualPickingProductListService.selectedProductCodesChange
|
Decorators :
@Output()
|
|
|
|
singleSelection
|
Default value : true
|
Decorators :
@Input()
|
|
|
|
title
|
Type : string
|
Decorators :
@Input()
|
|
|
Accessors
|
selectedProductCodes
|
getselectedProductCodes()
|
|
|
setselectedProductCodes(selectedProductCodes: string[])
|
|
|
Parameters :
| Name |
Type |
Optional |
| selectedProductCodes |
string[]
|
No
|
|
|
itemsPerSlide
|
getitemsPerSlide()
|
|
|
setitemsPerSlide(itemsPerSlide: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| itemsPerSlide |
number
|
No
|
|
|
activeSlideStartIndex
|
getactiveSlideStartIndex()
|
|
|
setactiveSlideStartIndex(activeSlideStartIndex: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| activeSlideStartIndex |
number
|
No
|
|
|
filteredItems$
|
getfilteredItems$()
|
|
|
import {
ChangeDetectionStrategy,
Component,
Input,
OnInit,
Output,
} from '@angular/core';
import { Observable } from 'rxjs';
import { VisualPickingProductListItem } from './model/visual-picking-product-list-item.model';
import { VisualPickingProductListService } from './visual-picking-product-list.service';
@Component({
selector: 'cx-epd-visualization-product-list',
templateUrl: './visual-picking-product-list.component.html',
providers: [VisualPickingProductListService],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VisualPickingProductListComponent implements OnInit {
constructor(
protected visualPickingProductListService: VisualPickingProductListService
) {}
@Input() title: string;
@Input() singleSelection = true;
@Input('selectedProductCodes')
set selectedProductCodes(selectedProductCodes: string[]) {
this.visualPickingProductListService.selectedProductCodes =
selectedProductCodes;
}
get selectedProductCodes(): string[] {
return this.visualPickingProductListService.selectedProductCodes;
}
@Output()
selectedProductCodesChange =
this.visualPickingProductListService.selectedProductCodesChange;
get itemsPerSlide(): number {
return this.visualPickingProductListService.itemsPerSlide;
}
set itemsPerSlide(itemsPerSlide: number) {
this.visualPickingProductListService.itemsPerSlide = itemsPerSlide;
}
get activeSlideStartIndex(): number {
return this.visualPickingProductListService.activeSlideStartIndex;
}
set activeSlideStartIndex(activeSlideStartIndex: number) {
this.visualPickingProductListService.activeSlideStartIndex =
activeSlideStartIndex;
}
get filteredItems$(): Observable<VisualPickingProductListItem[]> {
return this.visualPickingProductListService.filteredItems$;
}
ngOnInit(): void {
this.visualPickingProductListService.initialize();
}
}
<cx-epd-visualization-paged-list
[items]="filteredItems$ | async"
[title]="title"
[headerTemplate]="headerTemplate"
[template]="itemTemplate"
[itemsPerSlide]="itemsPerSlide"
[(activeSlideStartIndex)]="activeSlideStartIndex"
>
</cx-epd-visualization-paged-list>
<ng-template #headerTemplate>
<div class="cx-item-list-header row">
<div class="cx-item-list-desc col-6">
{{
'epdVisualization.visualPicking.visualPickingProductList.description'
| cxTranslate
}}
</div>
<div class="cx-item-list-price col-4">
{{
'epdVisualization.visualPicking.visualPickingProductList.itemPrice'
| cxTranslate
}}
</div>
<!-- Add to cart -->
<div class="cx-item-list-total col-2"></div>
</div>
</ng-template>
<ng-template #itemTemplate let-item="item" let-active="active">
<div
*ngIf="active"
class="row no-gutters list-item"
tabindex="0"
(click)="selectedProductCodes = [item.product.code]"
(keydown.enter)="selectedProductCodes = [item.product.code]"
(keydown.space)="selectedProductCodes = [item.product.code]"
[class.selected]="item.selected"
>
<!-- Item Description -->
<div class="col-6 flex-row">
<!-- Thumbnail -->
<div class="thumbnail-container">
<div class="thumbnail" [class.selected]="item.selected">
<cx-media
[container]="item.product.images?.PRIMARY"
format="thumbnail"
></cx-media>
</div>
</div>
<!-- Name -->
<div class="flex-column">
<div *ngIf="item.product.name" class="cx-name">
<a
class="cx-link"
[routerLink]="{ cxRoute: 'product', params: item.product } | cxUrl"
(keydown.enter)="$event.currentTarget.click()"
>{{ item.product.name }}</a
>
</div>
<!-- ID -->
<div *ngIf="item.product.code" class="cx-code">
{{
'epdVisualization.visualPicking.visualPickingProductList.id'
| cxTranslate
}}
{{ item.product.code }}
</div>
</div>
</div>
<!-- Item Price -->
<div class="col-4 flex-column">
<div *ngIf="item.product.price" class="cx-price">
{{ item.product.price?.formattedValue }}
</div>
</div>
<!-- Add to Cart -->
<div class="cx-add-to-cart col-2 flex-column">
<ng-container
*ngIf="
item.product.price !== undefined &&
item.product.stock.stockLevelStatus !== 'outOfStock'
"
>
<div
(click)="addToCartComponent.addToCart(); $event.preventDefault()"
(keydown.enter)="
addToCartComponent.addToCart(); $event.preventDefault()
"
(keydown.space)="
addToCartComponent.addToCart(); $event.preventDefault()
"
>
<cx-epd-visualization-compact-add-to-cart
#addToCartComponent
[showQuantity]="false"
[product]="item.product"
></cx-epd-visualization-compact-add-to-cart>
</div>
</ng-container>
<ng-container #noPrice *ngIf="item.product.price === undefined">
</ng-container>
<ng-container
*ngIf="
item.product.price !== undefined &&
item.product.stock.stockLevelStatus === 'outOfStock'
"
>
<div class="cx-out-of-stock">
{{
'epdVisualization.visualPicking.visualPickingProductList.outOfStock'
| cxTranslate
}}
</div>
</ng-container>
</div>
</div>
</ng-template>
Legend
Html element with directive