All files / projects/organization-management/src/app/pages/cost-center-import cost-center-import-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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h1>{{ 'account.costcenter.import.heading' | translate }}</h1>
<p>{{ 'account.costcenter.import.info' | translate }}</p>
 
@if (importedCostCenters$ | async; as importedCostCenters) {
<div class="loading-container">
  @if (importedCostCenters.length > 0) {
  <!-- cost center import progress bar -->
  @if (importProgress$ | async; as progress) { @if (progress.total > 0) {
  <div class="mb-3">
    <div class="progress">
      <div
        class="progress-bar"
        role="progressbar"
        [style.width.%]="progress.percentage"
        [attr.aria-valuemin]="0"
        [attr.aria-valuenow]="progress.current"
        [attr.aria-valuemax]="progress.total"
      >
        <span class="progress-display">
          {{
            'account.costcenter.import.progress'
              | translate
                : {
                    total: progress.total,
                    processed: progress.current,
                    percentage: progress.percentage
                  }
          }}
        </span>
      </div>
    </div>
  </div>
  } }
 
  <!-- imported cost centers table -->
  <table cdk-table [dataSource]="importedCostCenters" class="table table-lg mobile-optimized">
    <!-- Cost Center Id -->
    <ng-container cdkColumnDef="costCenterId">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef>
        {{ 'account.costcenter.list.header.no' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let imported" [attr.data-label]="'account.costcenter.list.header.no' | translate">
        @if (imported.costCenter.id) {
        <a [routerLink]="['..', imported.costCenter.id]">{{ imported.costCenter.costCenterId }}</a>
        } @else {
        {{ imported.costCenter.costCenterId }}
        } @if (imported.costCenter.active === false) {
        <span class="input-help">
          {{ 'account.costCenter.status.inactive' | translate }}
        </span>
        }
      </td>
    </ng-container>
 
    <!-- Cost Center Name -->
    <ng-container cdkColumnDef="costCenterName">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef>
        {{ 'account.costcenter.list.header.name' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let imported" [attr.data-label]="'account.costcenter.list.header.name' | translate">
        @if (imported.costCenter.id) {
        <a [routerLink]="['..', imported.costCenter.id]">{{ imported.costCenter.name }}</a>
        } @else {
        {{ imported.costCenter.name }}
        }
      </td>
    </ng-container>
 
    <!-- Cost Center Manager -->
    <ng-container cdkColumnDef="costCenterManager">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef>
        {{ 'account.costcenter.list.header.manager' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let imported" [attr.data-label]="'account.costcenter.list.header.manager' | translate">
        {{ imported.costCenter.costCenterOwner?.login }}
      </td>
    </ng-container>
 
    <!-- Cost Center Budget -->
    <ng-container cdkColumnDef="costCenterBudget">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef>
        {{ 'account.costcenter.list.header.budgetspent' | translate }}
      </th>
      <td
        cdk-cell
        *cdkCellDef="let imported"
        [attr.data-label]="'account.costcenter.list.header.budgetspent' | translate"
      >
        {{ imported.costCenter.budget?.value }}
        {{ imported.costCenter.budget?.currency }}
        ({{ imported.costCenter.budgetPeriod }})
      </td>
    </ng-container>
 
    <!-- Import Status -->
    <ng-container cdkColumnDef="status">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef class="w-25">
        {{ 'account.costcenter.list.header.status' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let imported" [attr.data-label]="'account.costcenter.list.header.status' | translate">
        <span [ngClass]="imported.status === 'success' ? 'text-success' : 'text-error'">
          {{
            imported.status === 'success' ? ('account.costcenter.import.status.success' | translate) : imported.status
          }}
        </span>
      </td>
    </ng-container>
 
    <!-- Header and Row Declarations -->
    <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
    <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay"></tr>
  </table>
 
  <a [routerLink]="['/account/organization/cost-centers']">
    {{ 'account.costcenter.import.back' | translate }}
  </a>
  } @else { @if (loading$ | async) {
  <ish-loading />
  } @else {
  <p>{{ 'account.costcenter.import.empty' | translate }}</p>
  } }
</div>
}