All files / projects/organization-management/src/app/pages/cost-center-detail cost-center-detail-page.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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (costCenter$ | async; as costCenter) {
<div>
  <h1>{{ costCenter.name }}</h1>
 
  <ish-error-message [error]="costCentersError$ | async" />
 
  <div class="row section">
    <div class="col-10 col-lg-8">
      <h2 class="h3">{{ 'account.costcenter.details.details.heading' | translate }}</h2>
      <div class="row">
        <div class="col-md-12">
          <dl class="row dl-horizontal dl-separator">
            <dt class="col-md-4">{{ 'account.costcenter.id.label' | translate }}</dt>
            <dd data-testing-id="id-field" class="col-md-8">
              {{ costCenter.costCenterId }}
              @if (costCenter.active === false) {
              <span class="input-help">{{ 'account.costCenter.status.inactive' | translate }}</span>
              }
            </dd>
            <dt class="col-md-4">{{ 'account.costcenter.name.label' | translate }}</dt>
            <dd data-testing-id="name-field" class="col-md-8">{{ costCenter.name }}</dd>
            <dt class="col-md-4">{{ 'account.costcenter.manager.label' | translate }}</dt>
            <dd class="col-md-8" data-testing-id="owner-field">
              {{ costCenter.costCenterOwner.firstName }} {{ costCenter.costCenterOwner.lastName }}
            </dd>
            <dt class="col-md-4">{{ 'account.budget.label' | translate : { '0': costCenter.budgetPeriod } }}</dt>
            <dd class="col-md-8">{{ costCenter.budget | ishPrice }}</dd>
            <dt class="col-md-4">{{ 'account.budget.already_spent.label' | translate }}</dt>
            <dd class="col-md-8">{{ costCenter.spentBudget | ishPrice }}</dd>
          </dl>
        </div>
        <div class="offset-md-4 col-md-8">
          <ish-cost-center-budget [costCenter]="costCenter" />
        </div>
      </div>
    </div>
 
    @if (isEditable$ | async) {
    <div class="col-2 col-lg-4 mt-2">
      <a
        routerLink="edit"
        class="btn-tool"
        [title]="'account.costcenter.update.link' | translate : { '0': costCenter.name }"
        data-testing-id="edit-cost-center"
      >
        <i class="bi bi-pencil-fill"></i>
      </a>
    </div>
    }
  </div>
 
  <!--- display the order list only if the current user is the manager of this cost center -->
  @if ((user$ | async)?.login === costCenter.costCenterOwner?.login) {
 
  <h2 class="h3">{{ 'account.costcenter.details.orders.list.title' | translate }}</h2>
  <ish-order-list
    [orders]="costCenter?.orders | slice : 0 : 10"
    [columnsToDisplay]="['creationDate', 'orderNo', 'buyer', 'lineItems', 'status', 'orderTotal']"
  />
 
  }
 
  <h2 class="h3">
    {{ 'account.costcenter.details.buyers.list.title' | translate }}
    @if (isEditable$ | async) {
    <a routerLink="buyers" class="btn btn-secondary" data-testing-id="add-cost-center-buyers">{{
      'account.costcenter.details.buyers.action.add' | translate
    }}</a>
    }
  </h2>
 
  <ish-cost-center-users-list [costCenter]="costCenter" [isEditable]="isEditable$ | async" />
</div>
}
 
<a routerLink=".." data-testing-id="back-to-cost-center-management">{{
  'account.organization.cost_center_management.back_to_list' | translate
}}</a>