All files / projects/organization-management/src/app/components/cost-center-budget cost-center-budget.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
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div *ngIf="costCenter">
  <div [ngbPopover]="BudgetPopover" placement="top" data-testing-id="cost-center-budget-popover">
    <div class="progress" [ngClass]="progressBarClass">
      <div
        class="progress-bar"
        [ngClass]="{ 'bg-danger': spentBudgetPercentage * 100 > 90 }"
        [ngStyle]="{ width: progressBarWidth | percent }"
        role="progressbar"
        [attr.aria-label]="'account.budget.already_spent.costcenter.aria_label' | translate : { '0': costCenter.name }"
        [attr.aria-valuetext]="spentBudgetPercentage | percent"
      >
        <span class="progress-display">{{ spentBudgetPercentage | percent }}</span>
        <ng-template #BudgetPopover>
          <div class="row">
            <div class="col-md-6 mb-2">
              {{ 'account.budget.label' | translate : { '0': costCenter.budgetPeriod } }}:
            </div>
            <div class="col-md-6 text-right">{{ costCenter.budget | ishPrice }}</div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-2">{{ 'account.budget.already_spent.label' | translate }}:</div>
            <div class="col-md-6 text-right">
              {{ costCenter.spentBudget | ishPrice }} ({{ spentBudgetPercentage | percent }})
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-2">{{ 'account.budget.left.label' | translate }}:</div>
            <div class="col-md-6 text-right">
              {{ costCenter.remainingBudget | ishPrice }} ({{ remainingBudgetPercentage | percent }})
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-2">{{ 'account.budget.pending_orders.label' | translate }}:</div>
            <div class="col-md-6 text-right">
              {{ costCenter.pendingOrders }}
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-2">{{ 'account.budget.approved_orders.label' | translate }}:</div>
            <div class="col-md-6 text-right">
              {{ costCenter.approvedOrders }}
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
</div>