All files / projects/requisition-management/src/app/pages/requisition-detail/budget-bar budget-bar.component.ts

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
3x
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
2x
2x
2x
 
2x
 
2x
 
 
 
2x
 
 
 
 
4x
 
 
 
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 
import { Price } from 'ish-core/models/price/price.model';
 
/**
 * The budget bar visualizes the current and spent budget of a user. If an additional amount is defined, it will be displayed in addition to the spent  budget.
 *
 * @example
 * <ish-budget-bar
      [budget]=requisition.userBudget?.budget
      [spentBudget]="requisition.userBudget?.spentBudget"
      [additionalAmount]="orderTotal"
   ></ish-budget-bar>
 */
 
@Component({
  selector: 'ish-budget-bar',
  templateUrl: './budget-bar.component.html',
  styleUrls: ['./budget-bar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BudgetBarComponent implements OnChanges {
  @Input({ required: true }) budget: Price;
  @Input() spentBudget: Price;
  @Input() additionalAmount: Price;
 
  budgetPercentage: number;
  overflowPercentage: number;
  additionalPercentage: number;
 
  displayClass: string;
  addDisplayClass: string;
 
  ngOnChanges() {
    this.calculate();
  }
 
  /**  calculates all displayed prices and percentages */
  private calculate() {
    if (this.budget?.value) {
      this.budgetPercentage = this.spentBudget?.value ? (this.spentBudget.value / this.budget.value) * 100 : 0;
      this.displayClass = this.getDisplayColor(this.budgetPercentage);
 
      this.overflowPercentage = this.budgetPercentage > 100 ? (this.budget.value / this.spentBudget.value) * 100 : 0;
 
      this.additionalPercentage = this.overflowPercentage
        ? (this.additionalAmount?.value / (this.spentBudget.value + this.additionalAmount?.value)) * 100
        : (this.additionalAmount?.value / this.budget.value) * 100;
 
      this.addDisplayClass = this.getDisplayColor(this.budgetPercentage + this.additionalPercentage);
    }
  }
 
  private getDisplayColor(percentage: number): string {
    return percentage >= 90 ? 'bg-danger' : percentage >= 70 ? 'bg-warning' : 'bg-success';
  }
}