All files / projects/requisition-management/src/app/pages/requisition-detail/requisition-buyer-approval requisition-buyer-approval.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div *ngIf="requisition?.userBudget" class="row">
  <ish-info-box heading="approval.detailspage.buyer_budget.heading" class="infobox-wrapper col-12">
    <div class="row">
      <div class="col-md-6">
        <dl class="row dl-horizontal dl-separator">
          <dt class="col-6">{{ 'approval.detailspage.buyer.label' | translate }}</dt>
          <dd class="col-6">{{ requisition.user.firstName }} {{ requisition.user.lastName }}</dd>
        </dl>
      </div>
    </div>
    <div class="row section">
      <div class="col-md-6 pt-1">
        <dl class="row dl-horizontal dl-separator">
          <dt class="col-6">{{ 'approval.detailspage.order_spend_limit.label' | translate }}</dt>
          <dd class="col-6">
            <strong>
              <ng-container *ngIf="requisition.userBudget?.orderSpentLimit; else noLimit">
                {{ requisition.userBudget.orderSpentLimit | ishPrice }}
              </ng-container>
              <ng-template #noLimit>
                {{ 'account.budget.unlimited' | translate }}
              </ng-template>
            </strong>
          </dd>
        </dl>
      </div>
      <div *ngIf="requisition.userBudget?.orderSpentLimit" class="col-md-6 mb-2">
        <ish-budget-bar [budget]="requisition.userBudget?.orderSpentLimit" [spentBudget]="orderTotal" />
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <dl *ngIf="requisition.userBudget.budgetPeriod !== 'none'" class="row dl-horizontal dl-separator">
          <!-- prettier-ignore -->
          <dt class="col-6">{{ 'account.budget.label' | translate: { '0': requisition?.userBudget?.budgetPeriod } }}</dt>
          <dd class="col-6">
            <strong>
              <ng-container *ngIf="requisition.userBudget.budget; else noLimit">
                {{ requisition.userBudget.budget | ishPrice }}
              </ng-container>
            </strong>
          </dd>
        </dl>
        <dl *ngIf="requisition.userBudget?.spentBudget?.value !== undefined" class="row dl-horizontal dl-separator">
          <dt class="col-6">{{ 'account.budget.already_spent.label' | translate }}</dt>
          <dd class="col-6" [ngClass]="{ 'text-danger': spentPercentage > 1 }">
            {{ requisition.userBudget.spentBudget | ishPrice }}
            <ng-container *ngIf="requisition.userBudget.budget">({{ spentPercentage | percent }})</ng-container>
          </dd>
        </dl>
        <dl
          *ngIf="requisition.approval.statusCode !== 'APPROVED'; else leftBudgetDisplay"
          class="row dl-horizontal dl-separator"
        >
          <dt class="col-6">{{ 'approval.detailspage.budget.including_order.label' | translate }}</dt>
          <dd class="col-6" [ngClass]="{ 'text-danger': spentPercentageIncludingThisRequisition > 1 }">
            {{
              requisition.userBudget?.spentBudgetIncludingThisRequisition || requisition.totals.total
                | ishPrice : 'gross'
            }}
            <ng-container *ngIf="requisition.userBudget.budget"
              >({{ spentPercentageIncludingThisRequisition | percent }})</ng-container
            >
          </dd>
        </dl>
        <ng-template #leftBudgetDisplay>
          <dl *ngIf="requisition.userBudget.budget" class="row dl-horizontal dl-separator">
            <dt class="col-6">{{ 'account.budget.left.label' | translate }}</dt>
            <dd class="col-6">
              {{ this.requisition.userBudget?.remainingBudget | ishPrice }} ({{ leftPercentage | percent }})
            </dd>
          </dl>
        </ng-template>
      </div>
      <div *ngIf="requisition.userBudget?.budget" class="col-md-6 mb-3">
        <ish-budget-bar
          [budget]="requisition.userBudget?.budget"
          [spentBudget]="requisition.userBudget?.spentBudget"
          [additionalAmount]="requisition.approval.statusCode !== 'APPROVED' ? orderTotal : undefined"
        />
      </div>
    </div>
  </ish-info-box>
</div>