fix: cost center management improvements and fixes

- display of the progress bar in case the budget is exceeded
- cost center widget ui improvements for phone view
- display error messages on cost center detail page

closes #990

projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html

@@ -4,7 +4,7 @@
       <div
         class="progress-bar"
         [ngClass]="{ 'bg-danger': spentBudgetPercentage * 100 > 90 }"
-        [ngStyle]="{ width: spentBudgetPercentage | percent }"
+        [ngStyle]="{ width: progressBarWidth | percent }"
         role="progressbar"
       >
         <span class="progress-display">{{ spentBudgetPercentage | percent }}</span>

projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.ts

@@ -28,4 +28,8 @@ export class CostCenterBudgetComponent implements OnChanges {
         this.costCenter.budget.value === 0 ? 0 : this.costCenter.remainingBudget.value / this.costCenter.budget.value;
     }
   }
+
+  get progressBarWidth() {
+    return Math.min(this.spentBudgetPercentage, 1);
+  }
 }

projects/organization-management/src/app/components/cost-center-widget/cost-center-widget.component.html

@@ -4,13 +4,11 @@
       <ng-container *ngIf="costCenters$ | async as costCenters; else emptyList">
         <ng-container *ngIf="costCenters.length; else emptyList">
           <ng-container *ngFor="let cc of costCenters$ | async">
-            <div class="row mt-0">
+            <div class="row mt-0 mb-3">
               <div class="col-12 col-md-5">
-                <p>
-                  <a [routerLink]="['/account/organization/cost-centers/', cc.id]">
-                    {{ cc.costCenterId }} {{ cc.name }}
-                  </a>
-                </p>
+                <a [routerLink]="['/account/organization/cost-centers/', cc.id]">
+                  {{ cc.costCenterId }} {{ cc.name }}
+                </a>
               </div>
               <div class="col-12 col-md-7">
                 <ish-cost-center-budget

projects/organization-management/src/app/pages/cost-center-detail/cost-center-detail-page.component.html

@@ -1,6 +1,8 @@
 <div *ngIf="costCenter$ | async as costCenter">
   <h1>{{ costCenter.name }}</h1>
 
+  <ish-error-message [error]="costCentersError$ | async"></ish-error-message>
+
   <div class="row section">
     <div class="col-10 col-lg-8">
       <h3>{{ 'account.costcenter.details.details.heading' | translate }}</h3>

projects/organization-management/src/app/pages/cost-center-detail/cost-center-detail-page.component.spec.ts

@@ -10,6 +10,7 @@ import { CostCenter } from 'ish-core/models/cost-center/cost-center.model';
 import { Price } from 'ish-core/models/price/price.model';
 import { PricePipe } from 'ish-core/models/price/price.pipe';
 import { User } from 'ish-core/models/user/user.model';
+import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
 import { OrderListComponent } from 'ish-shared/components/order/order-list/order-list.component';
 
 import { CostCenterBudgetComponent } from '../../components/cost-center-budget/cost-center-budget.component';
@@ -47,6 +48,7 @@ describe('Cost Center Detail Page Component', () => {
       declarations: [
         CostCenterDetailPageComponent,
         MockComponent(CostCenterBudgetComponent),
+        MockComponent(ErrorMessageComponent),
         MockComponent(CostCenterUsersListComponent),
         MockComponent(FaIconComponent),
         MockComponent(OrderListComponent),

projects/organization-management/src/app/pages/cost-center-detail/cost-center-detail-page.component.ts

@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { CostCenter } from 'ish-core/models/cost-center/cost-center.model';
+import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { User } from 'ish-core/models/user/user.model';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
@@ -14,6 +15,7 @@ import { OrganizationManagementFacade } from '../../facades/organization-managem
 })
 export class CostCenterDetailPageComponent implements OnInit {
   costCenter$: Observable<CostCenter>;
+  costCentersError$: Observable<HttpError>;
   user$: Observable<User>;
   isEditable$: Observable<boolean>;
 
@@ -24,6 +26,7 @@ export class CostCenterDetailPageComponent implements OnInit {
 
   ngOnInit() {
     this.costCenter$ = this.organizationManagementFacade.selectedCostCenter$;
+    this.costCentersError$ = this.organizationManagementFacade.costCentersError$;
     this.user$ = this.accountFacade.user$;
 
     this.isEditable$ = this.organizationManagementFacade.isCostCenterEditable(this.costCenter$);