feat: requisition approval usability improvements (#887)

- refactor: budget localization keys
intershop · Oct 22, 2021 · 2de6856 · 2de6856
1 parent 7b412b7
commit 2de6856
Show file tree

Hide file tree

Showing 29 changed files with 240 additions and 129 deletions.
diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.html b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
@@ -11,7 +11,7 @@
 
   <ng-container *ngIf="budget.budget; else noBudget">
     <dl class="row dl-horizontal dl-separator">
-      <dt class="col-7">{{ 'account.budget.type.' + budget.budgetPeriod + '.label' | translate }}</dt>
+      <dt class="col-7">{{ 'account.budget.label' | translate: { '0': budget.budgetPeriod } }}</dt>
       <dd class="col-5 column-price font-weight-bold text-right">{{ budget.budget | ishPrice }}</dd>
     </dl>
     <dl class="row dl-horizontal dl-separator">
@@ -30,7 +30,7 @@
           <ng-template #BudgetPopover>
             <div class="row">
               <div class="col-md-6">
-                <label>{{ 'account.budget.type.' + budget.budgetPeriod + '.label' | translate }}:</label>
+                <label>{{ 'account.budget.label' | translate: { '0': budget.budgetPeriod } }}:</label>
               </div>
               <div class="col-md-6 text-right">{{ budget.budget | ishPrice }}</div>
             </div>

diff --git a/...ects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts b/...ects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
@@ -68,7 +68,7 @@ describe('User Budget Component', () => {
           <dd class="col-5 column-price font-weight-bold text-right">USD 100</dd>
         </dl>
         <dl class="row dl-horizontal dl-separator">
-          <dt class="col-7">account.budget.type.monthly.label</dt>
+          <dt class="col-7">account.budget.label</dt>
           <dd class="col-5 column-price font-weight-bold text-right">USD 5000</dd>
         </dl>
         <dl class="row dl-horizontal dl-separator">

diff --git a/...management/src/app/pages/user-detail/user-detail-budget/user-detail-budget.component.html b/...management/src/app/pages/user-detail/user-detail-budget/user-detail-budget.component.html
@@ -13,7 +13,7 @@ <h3>{{ 'account.user.details.profile.budget_limits.heading' | translate }}</h3>
             <dd class="col-md-8">{{ 'account.budget.unlimited' | translate }}</dd>
           </ng-template>
           <ng-container *ngIf="budget.budget; else noBudget">
-            <dt class="col-md-4">{{ 'account.budget.type.' + budget.budgetPeriod + '.label' | translate }}</dt>
+            <dt class="col-md-4">{{ 'account.budget.label' | translate: { '0': budget.budgetPeriod } }}</dt>
             <dd class="col-md-8" data-testing-id="budget-field">
               {{ budget.budget | ishPrice }}
             </dd>

diff --git a/...agement/src/app/pages/user-detail/user-detail-budget/user-detail-budget.component.spec.ts b/...agement/src/app/pages/user-detail/user-detail-budget/user-detail-budget.component.spec.ts
@@ -63,7 +63,7 @@ describe('User Detail Budget Component', () => {
         <dl class="row dl-horizontal dl-separator">
           <dt class="col-md-4">account.user.new.order_spend_limit.label</dt>
           <dd class="col-md-8" data-testing-id="order-spend-limit-field">USD 100</dd>
-          <dt class="col-md-4">account.budget.type.monthly.label</dt>
+          <dt class="col-md-4">account.budget.label</dt>
           <dd class="col-md-8" data-testing-id="budget-field">USD 5000</dd>
         </dl>
       </div>

diff --git a/...quisition-management/src/app/components/approval-widget/approval-widget.component.spec.ts b/...quisition-management/src/app/components/approval-widget/approval-widget.component.spec.ts
@@ -28,10 +28,12 @@ describe('Approval Widget Component', () => {
       approval: {
         status: 'Approval Pending',
         statusCode: 'pending',
-        customerApprovers: [
-          { firstName: 'Jack', lastName: 'Link' },
-          { firstName: 'Bernhhard', lastName: 'Boldner' },
-        ],
+        customerApproval: {
+          approvers: [
+            { firstName: 'Jack', lastName: 'Link' },
+            { firstName: 'Bernhhard', lastName: 'Boldner' },
+          ],
+        },
       },
       user: { firstName: 'Patricia', lastName: 'Miller' },
       totals: {
@@ -52,10 +54,12 @@ describe('Approval Widget Component', () => {
       approval: {
         status: 'Approval Pending',
         statusCode: 'pending',
-        customerApprovers: [
-          { firstName: 'Jack', lastName: 'Link' },
-          { firstName: 'Bernhhard', lastName: 'Boldner' },
-        ],
+        customerApproval: {
+          approvers: [
+            { firstName: 'Jack', lastName: 'Link' },
+            { firstName: 'Bernhhard', lastName: 'Boldner' },
+          ],
+        },
       },
       user: { firstName: 'Patricia', lastName: 'Miller' },
       totals: {

diff --git a/...ion-management/src/app/components/requisition-widget/requisition-widget.component.spec.ts b/...ion-management/src/app/components/requisition-widget/requisition-widget.component.spec.ts
@@ -28,10 +28,12 @@ describe('Requisition Widget Component', () => {
       approval: {
         status: 'Approval Pending',
         statusCode: 'pending',
-        customerApprovers: [
-          { firstName: 'Jack', lastName: 'Link' },
-          { firstName: 'Bernhhard', lastName: 'Boldner' },
-        ],
+        customerApproval: {
+          approvers: [
+            { firstName: 'Jack', lastName: 'Link' },
+            { firstName: 'Bernhhard', lastName: 'Boldner' },
+          ],
+        },
       },
       user: { firstName: 'Patricia', lastName: 'Miller' },
       totals: {
@@ -52,10 +54,12 @@ describe('Requisition Widget Component', () => {
       approval: {
         status: 'Approval Pending',
         statusCode: 'pending',
-        customerApprovers: [
-          { firstName: 'Jack', lastName: 'Link' },
-          { firstName: 'Bernhhard', lastName: 'Boldner' },
-        ],
+        customerApproval: {
+          approvers: [
+            { firstName: 'Jack', lastName: 'Link' },
+            { firstName: 'Bernhhard', lastName: 'Boldner' },
+          ],
+        },
       },
       user: { firstName: 'Patricia', lastName: 'Miller' },
       totals: {

diff --git a/projects/requisition-management/src/app/models/requisition/requisition.interface.ts b/projects/requisition-management/src/app/models/requisition/requisition.interface.ts
@@ -1,4 +1,5 @@
 import { AddressData } from 'ish-core/models/address/address.interface';
+import { BasketApprover } from 'ish-core/models/basket-approval/basket-approval.model';
 import { BasketInfo } from 'ish-core/models/basket-info/basket-info.model';
 import { BasketRebateData } from 'ish-core/models/basket-rebate/basket-rebate.interface';
 import { BasketBaseData } from 'ish-core/models/basket/basket.interface';
@@ -27,6 +28,7 @@ export interface RequisitionBaseData extends BasketBaseData {
   userBudgets: RequisitionUserBudget;
 
   approvalStatus: RequisitionApproval;
+  approvalStatuses?: { approvalDate: number; approver: BasketApprover; statusCode: string }[];
 }
 
 export interface RequisitionData {

diff --git a/projects/requisition-management/src/app/models/requisition/requisition.mapper.spec.ts b/projects/requisition-management/src/app/models/requisition/requisition.mapper.spec.ts
@@ -34,12 +34,20 @@ describe('Requisition Mapper', () => {
           costCenterApproval: {
             approvers: [{ email: 'jlink@test.intershop.de' }],
           },
+          customerApproval: {
+            approvers: [{ email: 'bboldner@test.intershop.de' }],
+          },
         },
         approvalStatus: {
-          status: 'APPROVED',
-          approver: { firstName: 'Bernhard', lastName: 'Boldner' },
-          approvalDate: 76543627,
+          statusCode: 'PENDING',
         },
+        approvalStatuses: [
+          {
+            statusCode: 'APPROVED',
+            approver: { firstName: 'Bernhard', lastName: 'Boldner', email: 'bboldner@test.intershop.de' },
+            approvalDate: 76543627,
+          },
+        ],
         userInformation: { firstName: 'Patricia', lastName: 'Miller', email: 'pmiller@test.intershop.de' },
         userBudgets: {
           budgetPeriod: 'weekly',
@@ -55,20 +63,30 @@ describe('Requisition Mapper', () => {
       expect(mapped).toMatchInlineSnapshot(`
         Object {
           "approval": Object {
-            "approvalDate": 76543627,
-            "approver": Object {
-              "firstName": "Bernhard",
-              "lastName": "Boldner",
-            },
+            "approvers": Array [
+              Object {
+                "email": "bboldner@test.intershop.de",
+                "firstName": "Bernhard",
+                "lastName": "Boldner",
+              },
+            ],
             "costCenterApproval": Object {
               "approvers": Array [
                 Object {
                   "email": "jlink@test.intershop.de",
                 },
               ],
+              "statusCode": "PENDING",
+            },
+            "customerApproval": Object {
+              "approvers": Array [
+                Object {
+                  "email": "bboldner@test.intershop.de",
+                },
+              ],
+              "statusCode": "APPROVED",
             },
-            "customerApprovers": undefined,
-            "status": "APPROVED",
+            "statusCode": "PENDING",
           },
           "attributes": undefined,
           "bucketId": undefined,

diff --git a/projects/requisition-management/src/app/models/requisition/requisition.mapper.ts b/projects/requisition-management/src/app/models/requisition/requisition.mapper.ts
@@ -30,8 +30,25 @@ export class RequisitionMapper {
           user: data.userInformation,
           approval: {
             ...data.approvalStatus,
-            customerApprovers: data.approval?.customerApproval?.approvers,
-            costCenterApproval: data.approval?.costCenterApproval,
+            approvers: data.approvalStatuses?.map(status => status.approver),
+            customerApproval: {
+              ...data.approval?.customerApproval,
+              statusCode:
+                data.approvalStatuses?.length &&
+                data.approval?.customerApproval?.approvers?.some(
+                  appr => appr.email === data.approvalStatuses[0]?.approver.email
+                )
+                  ? data.approvalStatuses[0].statusCode
+                  : 'PENDING',
+            },
+            costCenterApproval: {
+              ...data.approval?.costCenterApproval,
+              statusCode:
+                data.approvalStatuses?.length &&
+                data.approval?.costCenterApproval?.approvers[0].email === data.approvalStatuses[0]?.approver.email
+                  ? data.approvalStatuses[0].statusCode
+                  : 'PENDING',
+            },
           },
         };
       } else {

diff --git a/projects/requisition-management/src/app/models/requisition/requisition.model.ts b/projects/requisition-management/src/app/models/requisition/requisition.model.ts
@@ -15,11 +15,15 @@ export interface RequisitionApproval {
   status: string;
   statusCode: string;
   approvalDate?: number;
-  approver?: { firstName: string; lastName: string };
+  approvers?: BasketApprover[];
   approvalComment?: string;
-  customerApprovers?: BasketApprover[];
+  customerApproval?: {
+    approvers?: BasketApprover[];
+    statusCode?: string;
+  };
   costCenterApproval?: {
     approvers?: BasketApprover[];
+    statusCode?: string;
     costCenterName?: string;
     costCenterID?: string;
     costCenter?: CostCenter;

diff --git a/...s/requisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.html b/...s/requisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.html
@@ -31,7 +31,8 @@
     <div class="row">
       <div class="col-md-6">
         <dl *ngIf="requisition.userBudget.budgetPeriod !== 'none'" class="row dl-horizontal dl-separator">
-          <dt class="col-6">{{ budgetLabel | translate }}</dt>
+          <!-- prettier-ignore -->
+          <dt class="col-6">{{ 'account.budget.label' | translate: { '0': requisition?.userBudget?.budgetPeriod } }}</dt>
           <dd class="col-6">
             <strong>
               <ng-container *ngIf="requisition.userBudget.budget; else noLimit">

diff --git a/...equisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.spec.ts b/...equisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.spec.ts
@@ -52,7 +52,7 @@ describe('Requisition Buyer Approval Component', () => {
       orderNo: '10001',
       approval: {
         statusCode: 'APPROVED',
-        approver: { firstName: 'Bernhard', lastName: 'Boldner' },
+        approvers: [{ firstName: 'Bernhard', lastName: 'Boldner' }],
         approvalDate: 76543627,
       },
       user: { firstName: 'Patricia', lastName: 'Miller', email: 'pmiller@test.intershop.de' },
@@ -85,7 +85,7 @@ describe('Requisition Buyer Approval Component', () => {
       Patricia Miller
       approval.detailspage.order_spend_limit.label
       $500.00
-      account.budget.type.weekly.label
+      account.budget.label
       $3,000.00
       account.budget.already_spent.label
       $300.00 (10%)
@@ -104,7 +104,7 @@ describe('Requisition Buyer Approval Component', () => {
       Patricia Miller
       approval.detailspage.order_spend_limit.label
       $500.00
-      account.budget.type.weekly.label
+      account.budget.label
       $3,000.00
       account.budget.already_spent.label
       $300.00 (10%)

diff --git a/...ges/requisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.ts b/...ges/requisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.ts
@@ -20,11 +20,9 @@ export class RequisitionBuyerApprovalComponent implements OnChanges {
   spentPercentage: number;
   spentPercentageIncludingThisRequisition: number;
   leftPercentage: number;
-  budgetLabel: string;
 
   ngOnChanges() {
     this.calculate();
-    this.budgetLabel = `account.budget.type.${this.requisition?.userBudget?.budgetPeriod}.label`;
   }
 
   /**  calculates all displayed prices and percentages */

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
@@ -1,5 +1,5 @@
-<ng-container *ngIf="approverEmail === (userEmail$ | async)">
-  <div *ngIf="costCenter" class="row">
+<ng-container *ngIf="costCenter">
+  <div *ngIf="costCenter?.costCenterOwner.email === (userEmail$ | async)" class="row">
     <ish-info-box heading="approval.detailspage.costcenter.approval.heading" class="infobox-wrapper col-12">
       <div class="row">
         <div class="col-md-6">
@@ -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.costcenter.budget.label' | translate: { '0': costCenter.budgetPeriod } }}</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.budget.label' | translate: { '0': buyer.budgetPeriod } }}</dt>
             <dd class="col-6">
               <strong>
                 <ng-container *ngIf="buyer?.budget; else noLimit">

diff --git a/...etail/requisition-cost-center-approval/requisition-cost-center-approval.component.spec.ts b/...etail/requisition-cost-center-approval/requisition-cost-center-approval.component.spec.ts
@@ -56,11 +56,12 @@ describe('Requisition Cost Center Approval Component', () => {
       orderNo: '10001',
       approval: {
         statusCode: 'APPROVED',
-        approver: { firstName: 'Bernhard', lastName: 'Boldner' },
+        approvers: [{ firstName: 'Bernhard', lastName: 'Boldner', email: 'bboldner@test.intershop.de' }],
         approvalDate: 76543627,
         costCenterApproval: {
           approvers: [{ email: 'jlink@test.intershop.de' }],
           costCenter: {
+            costCenterOwner: { email: 'jlink@test.intershop.de' },
             costCenterId: '100450',
             name: 'Headquarter',
             budgetPeriod: 'weekly',
@@ -108,14 +109,14 @@ describe('Requisition Cost Center Approval Component', () => {
     fixture.detectChanges();
 
     expect(element.textContent.replace(/^\s*[\r\n]*/gm, '')).toMatchInlineSnapshot(`
-"approval.detailspage.cost_center.label
-100450 Headquarter
-approval.detailspage.cost_center.label account.budget.type.weekly.label
-$3,000.00
-account.budget.already_spent.label
-$300.00 (10%)
-"
-`);
+      "approval.detailspage.cost_center.label
+      100450 Headquarter
+      approval.detailspage.costcenter.budget.label
+      $3,000.00
+      account.budget.already_spent.label
+      $300.00 (10%)
+      "
+    `);
   });
 
   it('should display cost center buyer budget information if there are buyer data', () => {
@@ -134,7 +135,7 @@ $300.00 (10%)
     expect(
       element.querySelector('[data-testing-id="cost-center-buyer-budget"]').textContent.replace(/^\s*[\r\n]*/gm, '')
     ).toMatchInlineSnapshot(`
-      "approval.detailspage.buyer.label account.budget.type.monthly.label
+      "approval.detailspage.buyer.budget.label
       $4,000.00
       account.budget.already_spent.label
       $200.00 (5%)