File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-order-approval-detail-form |
| templateUrl |
./order-approval-detail-form.component.html |
Methods
|
cancelDecisionForm
|
cancelDecisionForm()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
approvalDecisionValue
|
Default value : OrderApprovalDecisionValue
|
|
|
|
approvalForm
|
Type : FormGroup
|
Default value : this.fb.group({
comment: [''],
})
|
|
|
|
approvalFormVisible
|
Default value : false
|
|
|
|
Protected
decisionResultLoading$
|
Default value : this.orderApprovalService.getMakeDecisionResultLoading()
|
|
|
|
loading$
|
Default value : combineLatest([
this.orderApprovalLoading$,
this.decisionResultLoading$,
]).pipe(
map(
([approvalLoading, decisionResultLoading]) =>
approvalLoading || decisionResultLoading
)
)
|
|
|
|
orderApproval$
|
Type : Observable<OrderApproval>
|
Default value : this.orderApprovalDetailService.getOrderApproval()
|
|
|
|
Protected
orderApprovalLoading$
|
Type : Observable<boolean>
|
Default value : this.orderApprovalDetailService
.getOrderApprovalCodeFromRoute()
.pipe(
switchMap((approvalCode: string) =>
this.orderApprovalService.getOrderApprovalLoading(approvalCode)
)
)
|
|
|
import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { combineLatest, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import {
OrderApproval,
OrderApprovalDecisionValue,
} from '../../../core/model/order-approval.model';
import { OrderApprovalService } from '../../../core/services/order-approval.service';
import { OrderApprovalDetailService } from '../order-approval-detail.service';
@Component({
selector: 'cx-order-approval-detail-form',
templateUrl: './order-approval-detail-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrderApprovalDetailFormComponent implements OnDestroy {
approvalDecisionValue = OrderApprovalDecisionValue;
approvalDecision: OrderApprovalDecisionValue;
approvalFormVisible = false;
approvalForm: FormGroup = this.fb.group({
comment: [''],
});
protected orderApprovalLoading$: Observable<boolean> =
this.orderApprovalDetailService
.getOrderApprovalCodeFromRoute()
.pipe(
switchMap((approvalCode: string) =>
this.orderApprovalService.getOrderApprovalLoading(approvalCode)
)
);
protected decisionResultLoading$ =
this.orderApprovalService.getMakeDecisionResultLoading();
loading$ = combineLatest([
this.orderApprovalLoading$,
this.decisionResultLoading$,
]).pipe(
map(
([approvalLoading, decisionResultLoading]) =>
approvalLoading || decisionResultLoading
)
);
orderApproval$: Observable<OrderApproval> =
this.orderApprovalDetailService.getOrderApproval();
constructor(
protected orderApprovalDetailService: OrderApprovalDetailService,
protected orderApprovalService: OrderApprovalService,
private fb: FormBuilder
) {
this.orderApprovalService.resetMakeDecisionProcessState();
}
displayDecisionForm(decision: OrderApprovalDecisionValue) {
this.approvalDecision = decision;
if (decision === OrderApprovalDecisionValue.APPROVE) {
this.approvalForm.controls.comment.clearValidators();
} else {
this.approvalForm.controls.comment.setValidators([Validators.required]);
}
this.approvalFormVisible = true;
}
cancelDecisionForm() {
this.approvalFormVisible = false;
this.approvalForm.reset();
}
submitDecision(orderApproval: OrderApproval) {
if (this.approvalForm.valid) {
this.orderApprovalService.makeDecision(orderApproval.code, {
decision: this.approvalDecision,
comment: this.approvalForm.controls.comment.value,
});
this.approvalFormVisible = false;
} else {
this.approvalForm.markAllAsTouched();
}
}
ngOnDestroy(): void {
this.orderApprovalService.resetMakeDecisionProcessState();
}
}
<ng-container *ngIf="orderApproval$ | async as orderApproval">
<div *ngIf="loading$ | async; else approvalFormTemplate">
<div class="cx-spinner">
<cx-spinner></cx-spinner>
</div>
</div>
<ng-template #approvalFormTemplate>
<ng-container *ngIf="orderApproval?.approvalDecisionRequired">
<div *ngIf="approvalFormVisible" class="cx-approval-form-header row">
<div class="cx-approval-form-label col-sm-12">
{{
'orderApprovalDetails.form.title_' + approvalDecision
| cxTranslate
: {
orderCode: orderApproval?.order?.code,
orderTotal:
orderApproval?.order?.totalPriceWithTax?.formattedValue
}
}}
</div>
</div>
<form
[formGroup]="approvalForm"
(ngSubmit)="submitDecision(orderApproval)"
*ngIf="approvalFormVisible"
>
<label
>{{
'orderApprovalDetails.form.comment_' + approvalDecision + '.label'
| cxTranslate
}}
<textarea
class="form-control"
rows="3"
formControlName="comment"
maxlength="255"
></textarea>
<cx-form-errors
[control]="approvalForm.get('comment')"
></cx-form-errors>
</label>
<div class="form-group row">
<div class="col-lg-6 col-md-12">
<button
class="btn btn-block btn-secondary"
(click)="cancelDecisionForm()"
type="button"
>
{{ 'orderApprovalDetails.form.cancel' | cxTranslate }}
</button>
</div>
<div class="col-lg-6 col-md-12">
<button class="btn btn-block btn-primary" type="submit">
{{
'orderApprovalDetails.form.submit_' + approvalDecision
| cxTranslate
}}
</button>
</div>
</div>
</form>
</ng-container>
<ng-container *ngIf="!approvalFormVisible">
<div class="form-group row">
<div class="col-lg-4 col-md-12">
<a
[routerLink]="{ cxRoute: 'orderApprovals' } | cxUrl"
class="btn btn-block btn-secondary"
>{{ 'orderApprovalDetails.back' | cxTranslate }}</a
>
</div>
<div
class="col-lg-4 col-md-12"
*ngIf="orderApproval?.approvalDecisionRequired"
>
<button
class="btn btn-block btn-primary"
(click)="displayDecisionForm(approvalDecisionValue.REJECT)"
>
{{ 'orderApprovalDetails.showForm_REJECT' | cxTranslate }}
</button>
</div>
<div
class="col-lg-4 col-md-12"
*ngIf="orderApproval?.approvalDecisionRequired"
>
<button
class="btn btn-block btn-primary"
(click)="displayDecisionForm(approvalDecisionValue.APPROVE)"
>
{{ 'orderApprovalDetails.showForm_APPROVE' | cxTranslate }}
</button>
</div>
</div>
</ng-container>
</ng-template>
</ng-container>
Legend
Html element with directive