Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 4x | @if (costCenter) {
<div>
<div data-testing-id="cost-center-budget-popover" placement="top" triggers="hover" [ngbPopover]="BudgetPopover">
<div class="progress" [ngClass]="progressBarClass">
<div
class="progress-bar"
role="progressbar"
[attr.aria-label]="'account.budget.already_spent.costcenter.aria_label' | translate: { '0': costCenter.name }"
[attr.aria-valuetext]="spentBudgetPercentage | percent"
[ngClass]="{ 'bg-danger': spentBudgetPercentage * 100 > 90 }"
[ngStyle]="{ width: progressBarWidth | 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-end">{{ 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-end">
{{ 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-end">
{{ 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-end">
{{ 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-end">
{{ costCenter.approvedOrders }}
</div>
</div>
</ng-template>
</div>
</div>
</div>
</div>
}
|