File
projects/congarevenuecloud/elements/src/lib/revalidate-cart-modal/revalidate-cart-modal.component.ts
Description
Revalidate cart modal component is used for showing a modal window with all the cart items which need to be revalidated.
Preview
Implements
OnInit
OnDestroy
Metadata
| selector | apt-revalidate-cart-modal |
| styleUrls | ./revalidate-cart-modal.component.scss |
| templateUrl | ./revalidate-cart-modal.component.html |
Index
Properties |
Methods |
Constructor
constructor(cartService: CartService, revalidateCartService: RevalidateCartService, translateService: TranslateService, modalRef: BsModalRef)
|
|||||||||||||||
|
Parameters :
|
Methods
| applyRevalidation |
applyRevalidation()
|
|
The method is responsible to apply cart revalidation on the selected cartItem records.
Returns :
void
|
| closeModal |
closeModal()
|
|
The method is responsible to close the revalidation cart modal.
Returns :
void
|
| createNewCart |
createNewCart()
|
|
The method is responsible to create new cart.
Returns :
void
|
| toggleAllRecords | ||||||||
toggleAllRecords(event: any)
|
||||||||
|
The method is responsible to select all checkboxes for revalidating the cartItem records.
Parameters :
Returns :
void
|
| toggleItem | ||||||||
toggleItem(item: RevalidationFields)
|
||||||||
|
The method is responsible to toggle user selected checkboxes for revalidating the cartItem records.
Parameters :
Returns :
void
|
Properties
| hasError |
Type : boolean
|
Default value : false
|
|
Flag to determine error on the cart for revalidation. |
| isDisabled |
Type : boolean
|
Default value : false
|
|
Flag to disable hard validation cartItems |
| isHardRevalidation |
Type : boolean
|
Default value : false
|
|
Flag defines whether re-validation is hard or soft type. |
| message |
Type : string
|
|
The property to show message on card creation failure |
| Public modalRef |
Type : BsModalRef
|
| optionalLines |
Type : Array<RevalidationFields>
|
|
List of optional cartItem records for revalidation |
| requiredLines |
Type : Array<RevalidationFields>
|
|
List of required cartItem records for revalidation |
| selectedRecords |
Type : Array<RevalidationFields>
|
Default value : []
|
|
List of selected cartItem records to revalidate |
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()"
*ngIf="!isHardRevalidation">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body bg-white">
<h4 class="modal-title d-flex align-items-center m-0 pb-2 text-truncate font-weight-bold">
{{'REVALIDATE_CART.REVALIDATION_REQUIRED' | translate}}
</h4>
<div class="row">
<div class="col-sm-12" *ngIf="view$ | async as view">
<div class="small">{{ 'REVALIDATE_CART.REVALIDATION_REQUIRED_MSG' | translate }}</div>
<small class="text-danger font-weight-bold" *ngIf="hasError">{{ 'REVALIDATE_CART.REVALIDATION_ERROR' |
translate }}</small>
<small class="text-danger font-weight-bold" *ngIf="message">{{message}}</small>
<div class="revalidate-block">
<table class="table table-sm mt-3 mb-0">
<thead class="thead-light">
<tr>
<th scope="col" width="80" class="border-left">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="toggleAll"
[disabled]="isDisabled" [indeterminate]="view?.checkStatus === 'indeterminate'"
[checked]="view?.checkStatus === 'checked'" (click)="toggleAllRecords($event)">
<label class="custom-control-label" for="toggleAll"></label>
</div>
</th>
<th scope="col" class="border-start-0">{{ 'REVALIDATE_CART.PRODUCTNAME' | translate }}</th>
<th scope="col" width="220" class="border-left">{{ 'COMMON.STATUS' | translate }}</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<div class="inner-body">
<table>
<ng-container *ngFor="let li of view.data; trackBy: trackById">
<tr
[ngClass]="{'table-primary' : li.type === 'hard' || li.state === 'checked'}">
<td width="80" class="border-left border-bottom border-top-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
[id]="'check-' + li?.LineItemId"
[disabled]="li.type === 'hard'"
[checked]="li.state === 'checked'" (click)="toggleItem(li)"
*ngIf="li.state !== 'readonly'">
<label class="custom-control-label"
[for]="'check-' + li?.LineItemId"></label>
</div>
</td>
<td class="border-bottom border-top-0">{{ li.ProductName }}</td>
<td width="220" class="border border-top-0">{{
'REVALIDATE_CART.TO_BE_REVALIDATE' | translate }} ({{ li.type ===
'hard' ? ('REVALIDATE_CART.REQUIRED' | translate) :
('REVALIDATE_CART.OPTIONAL' | translate) }})</td>
</tr>
</ng-container>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="small mt-3">
<span>{{'REVALIDATE_CART.WHAT_TO_DO' | translate}}</span>
<a href="javascript:void(0)" (click)="createNewCart()"
class="ml-1 mr-1">{{'REVALIDATE_CART.DEACTIVATE_CART' | translate}}</a>
<span>{{'REVALIDATE_CART.FORNOW' | translate}}</span>
<small class="d-block mt-3 font-italic text-muted"><i class="fas fa-info-circle mr-1">
</i>{{'REVALIDATE_CART.REVALIDATION_INFO' | translate}} </small>
</div>
</div>
</div>
</div>
<div class="modal-footer bg-white border-top pt-2">
<button class="btn btn-primary btn-raised px-1 m-0" type="button" [disabled]="selectedRecords.length===0"
(click)="applyRevalidation()" [ladda]="loading" data-style="zoom-in">{{'REVALIDATE_CART.REVALIDATE' |
translate}}</button>
</div>
./revalidate-cart-modal.component.scss
.revalidate-block {
.custom-control-label{
margin-left: 1.5rem;
}
table{
tbody{
>tr{
>td{
padding: 0;
.inner-body{
padding: 0;
margin: 0;
overflow: auto;
max-height: 10rem;
table{
width: 100%;
}
}
}
}
}
}
}