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 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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 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"
[attr.aria-valuemax]="progress.total"
[attr.aria-valuemin]="0"
[attr.aria-valuenow]="progress.current"
[style.width.%]="progress.percentage"
>
<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 class="table table-lg mobile-optimized" [dataSource]="importedCostCenters">
<!-- Cost Center Id -->
<ng-container cdkColumnDef="costCenterId">
<th *cdkHeaderCellDef cdk-header-cell scope="col">
{{ 'account.costcenter.list.header.no' | translate }}
</th>
<td *cdkCellDef="let imported" cdk-cell [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 *cdkHeaderCellDef cdk-header-cell scope="col">
{{ 'account.costcenter.list.header.name' | translate }}
</th>
<td *cdkCellDef="let imported" cdk-cell [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 *cdkHeaderCellDef cdk-header-cell scope="col">
{{ 'account.costcenter.list.header.manager' | translate }}
</th>
<td
*cdkCellDef="let imported"
cdk-cell
[attr.data-label]="'account.costcenter.list.header.manager' | translate"
>
{{ imported.costCenter.costCenterOwner?.login }}
</td>
</ng-container>
<!-- Cost Center Budget -->
<ng-container cdkColumnDef="costCenterBudget">
<th *cdkHeaderCellDef cdk-header-cell scope="col">
{{ 'account.costcenter.list.header.budgetspent' | translate }}
</th>
<td
*cdkCellDef="let imported"
cdk-cell
[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 *cdkHeaderCellDef cdk-header-cell class="w-25" scope="col">
{{ 'account.costcenter.list.header.status' | translate }}
</th>
<td
*cdkCellDef="let imported"
cdk-cell
[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 *cdkHeaderRowDef="columnsToDisplay" cdk-header-row></tr>
<tr *cdkRowDef="let row; columns: columnsToDisplay" cdk-row></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>
}
|