File
Description
Product attribute component is used to configure attributes on a product.
Usage
Example :import { ProductAttributeModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [ProductAttributeModule, ...]
})
export class AppModule {}
<apt-product-attribute
[product]="product"
[container]="productContainer"
lineType="Option"
[(productAttributeValue)]="productAttributeValue"
(productAttributeValueChange)="handleAttributeValueChange($event)"
></apt-product-attribute>
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
accordion
|
Type : boolean
|
Default value : true
|
Property binding to control expand/collapse for multiple attribute groups.
|
|
collapseAll
|
Type : boolean
|
Default value : true
|
Property binding to control expand/collapse of attribute groups.
|
|
container
|
Type : string
|
Unique id of type string to render attribute group.
|
|
lineType
|
Type : "Product" | "Option"
|
Default value : 'Product'
|
Sets the line type Product or Option.
|
|
productAttributeValue
|
Type : AttributeValue
|
Default value : new AttributeValue()
|
2-way data bind [(productAttributeValue)]
|
|
readOnly
|
Type : boolean
|
Default value : false
|
The flag is set to false by default, to show READ-ONLY version of attributes with default configuration.
If the flag is set to true it allows to configure the attributes.
|
|
relatedTo
|
Type : CartItem
|
Related cart item for attribute.
|
Outputs
|
attributeValueChange
|
Type : EventEmitter<boolean>
|
Event emitter emits the boolean value when the attribute value changes to the calling component
|
Methods
|
attributeChange
|
attributeChange(attrValue: ProductAttribute, field: string, attributeGroupList: Array, matrixView?: Array<ProductAttributeMatrixView>, metadata?: any, attribute?: ProductAttribute)
|
Method gets invoked whenever there is change in the attribute value and set the ProductAttributeValue object,
after validating ProductAttributeRule/ ProductAttributeMatrixview if set any.
Parameters :
| Name |
Type |
Optional |
Description |
| attrValue |
ProductAttribute
|
No
|
is an instance of product attribute value.
|
| field |
string
|
No
|
is of type string the value of the field.
|
| attributeGroupList |
Array<ProductAttributeGroup>
|
No
|
is an Array of Product Attribute group member object.
|
| matrixView |
Array<ProductAttributeMatrixView>
|
Yes
|
optional paramenter to pass Array of Product Attribute matrix view if exist.
|
| metadata |
any
|
Yes
|
optional paramenter to pass the metadata of the attribute if available.
|
| attribute |
ProductAttribute
|
Yes
|
optional paramenter is an instance of Product Attributeis exists.
|
|
|
trackById
|
trackById(index, record: AObject)
|
Parameters :
| Name |
Type |
Optional |
| index |
|
No
|
| record |
AObject
|
No
|
|
|
attrClicked
|
Type : boolean
|
Default value : false
|
|
attributeActions
|
Type : []
|
|
attributeGroupList
|
Type : Array<ProductAttributeGroup>
|
|
metadata$
|
Type : Observable<any>
|
|
subscriptions
|
Type : Array<Subscription>
|
Default value : new Array()
|
|
usercleared
|
Type : object
|
Default value : {}
|
|
userselected
|
Type : object
|
Default value : {}
|
<ng-container *ngIf="product$ | async as product">
<ng-container *ngIf="lineType === 'Product'">
<div class="card mb-0" *ngFor="let group of product?.AttributeGroups; let attrIndex = index; trackBy: trackById">
<div [id]="'ac' + group.AttributeGroup.Id" class="accordion">
<div class="card-header px-2 py-1" *ngIf="lineType === 'Product'">
<h2 class="mb-0">
<ng-container
*ngTemplateOutlet="groupHeaderTemplate; context: {attributeGroup: group.AttributeGroup, index: attrIndex}">
</ng-container>
</h2>
</div>
<div [id]="'ac' + container + '-' + group.AttributeGroup.Id" class="collapse"
[ngClass]="{'show': (attrIndex === 0 && collapseAll) || !accordion}"
[attr.data-parent]="'#' + container">
<div class="card-body pl-3">
<ng-container
*ngTemplateOutlet="groupTemplate; context: {attributeGroup: group.AttributeGroup, attributeValue: productAttributeValue, matrixView: product?.ProductAttributeMatrixViews,product: product}">
</ng-container>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="lineType === 'Option'">
<div class="mb-3" *ngFor="let group of product?.AttributeGroups; let attrIndex = index; trackBy: trackById">
<div [id]="'ac' + group.AttributeGroup.Id" class="accordion">
<h5 class="mb-0 border-bottom">
<ng-container
*ngTemplateOutlet="groupHeaderTemplate; context: {attributeGroup: group.AttributeGroup, index: attrIndex}">
</ng-container>
</h5>
<div class="pl-4 collapse" [id]="'ac' + container + '-' + group.AttributeGroup?.Id"
[ngClass]="{'show': (attrIndex === 0 && collapseAll) || !accordion}"
[attr.data-parent]="'#ac' + group.AttributeGroup.Id">
<ng-container
*ngTemplateOutlet="groupTemplate; context: {attributeGroup: group.AttributeGroup, attributeValue: productAttributeValue, matrixView: product?.ProductAttributeMatrixViews, product: product}">
</ng-container>
</div>
</div>
</div>
</ng-container>
<ng-template #groupHeaderTemplate let-attributeGroup="attributeGroup" let-index="index">
<button class="btn btn-link chevron" type="button" data-toggle="collapse"
[attr.data-target]="'#' + 'ac' + container + '-' + attributeGroup?.Id"
[attr.aria-expanded]="(index === 0 && collapseAll) || !accordion ? 'true' : 'false'">
{{attributeGroup?.Name}}
</button>
</ng-template>
<ng-template #groupTemplate let-attributeGroup="attributeGroup" let-attributeValue="attributeValue"
let-matrixView="matrixView" let-product="product">
<div class="row no-gutters">
<ng-container *ngFor="let member of attributeGroup?.AttributeGroupMembers;let i= index; trackBy: trackById">
<ng-container *ngIf="(isRuleAction(member) && attributeValue); else actions">
<div class="col-12 p-3" [class.col-md-4]="attributeGroup?.ThreeColumnAttributeDisplay"
[class.col-md-6]="attributeGroup?.TwoColumnAttributeDisplay">
<apt-input-field [entity]="attributeValue" [field]="member?.Attribute?.Name"
[id]="'#' + attributeGroup?.Id + i" [fieldType]="member?.Attribute?.Type"
[label]="member?.Attribute?.DisplayName" [readonly]="readOnly"
[lookupObjectName]="member?.Attribute?.LookupObjectName"
[(ngModel)]="productAttribute[member.Attribute.Name]" [defaultValue]="false"
[picklistValues]="member?.Attribute?.PickListValue"
(ngModelChange)="attributeChange(attributeValue, member?.Attribute?.Name, product?.AttributeGroups, matrixView, member?.Attribute)"
(click)="attrClicked = true">
</apt-input-field>
</div>
</ng-container>
<ng-template #actions>
<ng-container *ngFor="let action of attributeActions">
<div *ngIf="((member?.Attribute?.Name === action?.FieldApi) && action?.Action !='Hidden' && attributeValue)"
class="col-12 p-3" [class.col-md-4]="attributeGroup?.ThreeColumnAttributeDisplay"
[class.col-md-6]="attributeGroup?.TwoColumnAttributeDisplay">
<apt-input-field [entity]="attributeValue" [field]="member?.Attribute?.Name"
[id]="'#' + attributeGroup?.Id + i" [fieldType]="member.Attribute.Type"
[label]="member.Attribute.DisplayName"
[lookupObjectName]="member.Attribute.LookupObjectName" [errorMsg]="'ERROR.REQUIRED_FIELD'" [readonly]="action?.Action ==='Disabled' || readOnly"
[required]="action?.Action ==='Required'"
[(ngModel)]="productAttribute[member.Attribute.Name]" [defaultValue]="false"
[picklistValues]="member.Attribute.PickListValue"
(ngModelChange)="attributeChange(attributeValue, member.Attribute.Name, product?.AttributeGroups, matrixView, member.Attribute)"
(click)="attrClicked = true">
</apt-input-field>
</div>
</ng-container>
</ng-template>
</ng-container>
</div>
</ng-template>
</ng-container>
Legend
Html element with directive