File
projects/congarevenuecloud/elements/src/lib/line-item-table-row/additional-information/additional-information.component.ts
Description
This component is work in progress.
Additional information component is used to show additional info section when there are more than three line item fields to be displayed on cart page.
Preview
Usage
Example :import { LineItemTableRowModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [LineItemTableRowModule, ...]
})
export class AppModule {}```typescript
<apt-additional-information
[parent]="parent"
[cart]="cart"
[editableFields]="editableFields"
[userView]="userView"
[quantity]="quantity">
</apt-additional-information>Metadata
| selector | apt-additional-information |
| styleUrls | ./additional-information.component.scss |
| templateUrl | ./additional-information.component.html |
Index
Methods |
Inputs |
Constructor
constructor(cartService: CartService, cartItemService: CartItemService)
|
|||||||||
|
Parameters :
|
Inputs
| cart |
Type : any
|
|
Flag defines whether line item fields should be editable. |
| editableFields |
Type : boolean
|
Default value : true
|
|
Flag defines whether line item fields should be editable. |
| enableOneTime |
Type : boolean
|
|
Flag checks whether enableOneTime is set to true or false. |
| parent |
Type : any
|
|
Line item to show the additional fields information from. |
| quantity |
Type : number
|
|
Flag defines whether line item fields should be editable. |
| userView |
Type : any
|
|
Flag defines whether line item fields should be editable. |
Methods
| updateValues | ||||||||
updateValues(parent: CartItem)
|
||||||||
|
This method updates the cart item field on cart page.
Parameters :
Returns :
void
|
<div class="card border-0 pb-1 px-4">
<div class="card-header accordionHeader bg-transparent collapsed pr-0 border-bottom-0" role="button"
data-toggle="collapse" [attr.data-target]="'#adtlInformation_' + parent.Id">
<i class="fas fa-chevron-right downArrow py-2 px-4 position-absolute"></i>
<span class="ml-lg-3 ml-md-3 ml-sm-3 ml-3">
{{'COMMON.ADDITIONAL_INFORMATION' | translate}}
</span>
</div>
<div class="collapse" [id]="'adtlInformation_' + parent.Id">
<div class="p-3">
<div class="row">
<div class="col-lg-3 col-md-6 col-12" *ngFor="let view of userView.slice(3); let i=index">
<!-- Render input field -->
<ng-container *ngIf="view?.fieldName !== 'StartDate' && view?.fieldName !== 'EndDate'; else date">
<apt-input-field *ngIf="enableFields(view.fieldName,view) && view?.fieldName!= 'ChargeType' ; else outputField"
[entity]="parent" [(ngModel)]="parent[view.fieldName]" [class]="view.fieldName" [field]="view.fieldName"
[textareaRows]="1" (change)="updateValues(parent)" [displayFieldType]="'radio'">
</apt-input-field>
</ng-container>
<!-- Render output field -->
<ng-template #outputField>
<apt-output-field [record]="parent" [class]="view.fieldName" layout="stacked" [field]="view.fieldName"
[label]="view.label" [editable]="editableFields">
</apt-output-field>
</ng-template>
<!-- Render Start/End date -->
<ng-template #date>
<apt-date-range-input
[disableStartDate]="parent?.LineStatus?.toLowerCase() ==='cancelled' || parent?.LineStatus?.toLowerCase() ==='renewed'"
(onStartDateChange)="changeItemQuantity(parent)" (onEndDateChange)="changeItemQuantity(parent)"
[cartItem]="parent"
[readonly]="!view?.isEditable || (parent?.PriceType !== 'Recurring' && parent?.PriceType !== 'Usage')"
[displayDate]="view.fieldName">
</apt-date-range-input>
</ng-template>
</div>
</div>
</div>
</div>
</div>
./additional-information.component.scss
:host > div {
font-size: inherit;
}
.accordionHeader {
cursor: pointer;
.downArrow {
left: 6px;
transition: transform 0.35s ease;
}
&.collapsed {
.downArrow {
transform: rotate(-90deg);
}
}
}