feat: minor cost center approval ui improvements

intershop · Oct 7, 2021 · e46efc2 · e46efc2 · github-actions · Oct 7, 2021
1 parent dd01f0f
commit e46efc2
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 20 deletions.
diff --git a/...n-detail/requisition-cost-center-approval/requisition-cost-center-approval.component.html b/...n-detail/requisition-cost-center-approval/requisition-cost-center-approval.component.html
@@ -13,9 +13,8 @@
       <div class="row section">
         <div class="col-md-6 pt-1">
           <dl class="row dl-horizontal dl-separator">
-            <dt class="col-6">
-              {{ 'approval.detailspage.cost_center.label' | translate }} {{ ccVal.budgetLabel | translate }}
-            </dt>
+            <!-- prettier-ignore -->
+            <dt class="col-6">{{ 'approval.detailspage.cost_center.label' | translate }} {{ ccVal.budgetLabel | translate }}</dt>
             <dd class="col-6">
               <strong>
                 <ng-container *ngIf="costCenter?.budget; else noLimit">
@@ -54,9 +53,8 @@
       <div *ngIf="buyer" class="row" data-testing-id="cost-center-buyer-budget">
         <div class="col-md-6">
           <dl class="row dl-horizontal dl-separator">
-            <dt class="col-6">
-              {{ 'approval.detailspage.buyer.label' | translate }} {{ bVal.budgetLabel | translate }}
-            </dt>
+            <!-- prettier-ignore -->
+            <dt class="col-6">{{ 'approval.detailspage.buyer.label' | translate }} {{ bVal.budgetLabel | translate }}</dt>
             <dd class="col-6">
               <strong>
                 <ng-container *ngIf="buyer?.budget; else noLimit">

diff --git a/...sition-management/src/app/pages/requisition-detail/requisition-detail-page.component.html b/...sition-management/src/app/pages/requisition-detail/requisition-detail-page.component.html
@@ -25,7 +25,17 @@ <h1>
   >
     <ish-requisition-summary [requisition]="requisition" [view]="view"></ish-requisition-summary>
 
-    <ish-requisition-buyer-approval [requisition]="requisition"></ish-requisition-buyer-approval>
+    <!-- display approval box in buyer view or for customer approvers only -->
+    <ish-requisition-buyer-approval
+      *ngIf="view === 'buyer'; else customerApprover"
+      [requisition]="requisition"
+    ></ish-requisition-buyer-approval>
+    <ng-template #customerApprover>
+      <ish-requisition-buyer-approval
+        *ishIsAuthorizedTo="'APP_B2B_ORDER_APPROVAL'"
+        [requisition]="requisition"
+      ></ish-requisition-buyer-approval>
+    </ng-template>
 
     <ish-requisition-cost-center-approval [requisition]="requisition"></ish-requisition-cost-center-approval>
 

diff --git a/...ion-management/src/app/pages/requisition-detail/requisition-detail-page.component.spec.ts b/...ion-management/src/app/pages/requisition-detail/requisition-detail-page.component.spec.ts
@@ -2,10 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
+import { AuthorizationToggleDirective } from 'ish-core/directives/authorization-toggle.directive';
 import { AddressComponent } from 'ish-shared/components/address/address/address.component';
 import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
 import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
@@ -44,6 +45,7 @@ describe('Requisition Detail Page Component', () => {
         MockComponent(RequisitionCostCenterApprovalComponent),
         MockComponent(RequisitionRejectDialogComponent),
         MockComponent(RequisitionSummaryComponent),
+        MockDirective(AuthorizationToggleDirective),
         RequisitionDetailPageComponent,
       ],
     })

diff --git a/...t/src/app/pages/requisition-detail/requisition-summary/requisition-summary.component.html b/...t/src/app/pages/requisition-detail/requisition-summary/requisition-summary.component.html
@@ -16,8 +16,15 @@
     <dt class="col-6 col-sm-4 col-md-3">{{ 'approval.detailspage.order_date.label' | translate }}</dt>
     <dd class="col-6 col-sm-8 col-md-9">{{ requisition.creationDate | ishDate }}</dd>
 
+    <ng-container *ngIf="requisition.costCenter">
+      <dt class="col-6 col-sm-4 col-md-3">{{ 'approval.detailspage.cost_center.label' | translate }}</dt>
+      <dd class="col-6 col-sm-8 col-md-9">{{ requisition.costCenter }} {{ costCenterName }}</dd>
+    </ng-container>
+
     <ng-container *ngIf="view === 'buyer'">
-      <dt class="col-6 col-sm-4 col-md-3">{{ 'approval.detailspage.approver.label' | translate }}</dt>
+      <dt class="col-6 col-sm-4 col-md-3">
+        {{ 'approval.detailspage.approver.label' | translate: { '0': customerApproverCount } }}
+      </dt>
       <dd class="col-6 col-sm-8 col-md-9">
         <ng-container *ngIf="requisition.approval?.statusCode !== 'PENDING'; else pendingCustomerApprovers">
           {{ requisition.approval?.approver?.firstName }} {{ requisition.approval?.approver?.lastName }}
@@ -28,6 +35,20 @@
           </ng-container>
         </ng-template>
       </dd>
+      <ng-container
+        *ngIf="
+          requisition.approval?.costCenterApproval?.approvers?.length && requisition.approval?.statusCode === 'PENDING'
+        "
+      >
+        <dt class="col-6 col-sm-4 col-md-3">
+          {{ 'approval.detailspage.cost_center.label' | translate }}
+          {{ 'approval.detailspage.approver.label' | translate: { '0': 1 } }}
+        </dt>
+        <dd class="col-6 col-sm-8 col-md-9">
+          {{ requisition.approval?.costCenterApproval?.approvers[0].firstName }}
+          {{ requisition.approval?.costCenterApproval?.approvers[0].lastName }}
+        </dd>
+      </ng-container>
     </ng-container>
 
     <ng-container *ngIf="view === 'approver'">

diff --git a/...ent/src/app/pages/requisition-detail/requisition-summary/requisition-summary.component.ts b/...ent/src/app/pages/requisition-detail/requisition-summary/requisition-summary.component.ts
@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+
+import { AttributeHelper } from 'ish-core/models/attribute/attribute.helper';
 
 import { Requisition, RequisitionViewer } from '../../../models/requisition/requisition.model';
 
@@ -7,7 +9,25 @@ import { Requisition, RequisitionViewer } from '../../../models/requisition/requ
   templateUrl: './requisition-summary.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RequisitionSummaryComponent {
+export class RequisitionSummaryComponent implements OnInit {
   @Input() requisition: Requisition;
   @Input() view: RequisitionViewer = 'buyer';
+
+  costCenterName: string;
+  customerApproverCount: number;
+
+  ngOnInit() {
+    this.costCenterName = AttributeHelper.getAttributeValueByAttributeName(
+      this.requisition?.attributes,
+      'BusinessObjectAttributes#Order_CostCenter_Name'
+    );
+
+    this.customerApproverCount = this.getCustomerApproverCount();
+  }
+
+  getCustomerApproverCount() {
+    return this.requisition?.approval?.statusCode === 'PENDING'
+      ? this.requisition?.approval?.customerApprovers?.length || 1
+      : 1;
+  }
 }
diff --git a/projects/requisition-management/src/app/store/requisitions/requisitions.effects.spec.ts b/projects/requisition-management/src/app/store/requisitions/requisitions.effects.spec.ts
@@ -166,7 +166,7 @@ describe('Requisitions Effects', () => {
 
     it('should redirect to listing', done => {
       effects.updateRequisitionStatus$.subscribe(() => {
-        expect(location.path()).toEqual(`/account/requisitions/approver/testUUID;status=PENDING`);
+        expect(location.path()).toEqual(`/account/requisitions/approver`);
         done();
       });
     });

diff --git a/projects/requisition-management/src/app/store/requisitions/requisitions.effects.ts b/projects/requisition-management/src/app/store/requisitions/requisitions.effects.ts
@@ -79,12 +79,7 @@ export class RequisitionsEffects {
           .pipe(
             concatMap(requisition =>
               /* ToDo: use only relative routes */
-              from(
-                this.router.navigate([
-                  `/account/requisitions/approver/${requisition.id}`,
-                  { status: requisition.approval?.statusCode },
-                ])
-              ).pipe(
+              from(this.router.navigate([`/account/requisitions/approver`])).pipe(
                 concatMap(() => {
                   let messageAction;
                   switch (requisition.approval?.statusCode) {

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -482,7 +482,7 @@
   "approval.detailspage.approval_date.label": "Date of Approval",
   "approval.detailspage.approval_status.label": "Approval Status",
   "approval.detailspage.approve.button.label": "Approve",
-  "approval.detailspage.approver.label": "Approver(s)",
+  "approval.detailspage.approver.label": "{{0, plural, =1{Approver} other{Approvers}}}",
   "approval.detailspage.budget.including_order.label": "Including this order",
   "approval.detailspage.buyer.label": "Buyer",
   "approval.detailspage.buyer_budget.heading": "Buyer approval",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -482,7 +482,7 @@
   "approval.detailspage.approval_date.label": "Date d’approbation",
   "approval.detailspage.approval_status.label": "Approval Status",
   "approval.detailspage.approve.button.label": "Approuver",
-  "approval.detailspage.approver.label": "Approbateur(s)",
+  "approval.detailspage.approver.label": "{{0, plural, =1{Approbateur} other{Approbateurs}}}",
   "approval.detailspage.budget.including_order.label": "Comprenant cette commande",
   "approval.detailspage.buyer.label": "Acheteur",
   "approval.detailspage.buyer_budget.heading": "Approbation du client",