feat: extend order list filter by buyer selection (#1697)

* requires ICM 12.1.0 with new permission APP_B2B_MANAGE_ORDERS

docs/guides/migrations.md

@@ -63,6 +63,9 @@ For the migration of customer projects it needs to be checked whether a `customD
 Additionally it needs to be checked if the `textarea-description` wrapper is configured anywhere else then the default assignment to the `ish-textarea-field`.
 If so these wrapper configurations need to be replaced with `maxlength-description`.
 
+B2B users with the permission `APP_B2B_MANAGE_ORDERS` (only available for admin users in ICM 12.1.0 and higher) see now the orders of all users of the company on the My Account order history page.
+They can filter the orders by buyer in order to see only e.g. the own orders again.
+
 ## From 5.0 to 5.1
 
 The OrderListComponent is strictly presentational, components using it have to supply the data.

projects/organization-management/src/app/components/buyers-select/buyers-select.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="buyers$ | async as buyers">
+  <select [formControl]="control" class="form-control" data-testing-id="buyers-select-box">
+    <option value="all">
+      {{ 'account.order_history.filter.all_buyers' | translate }}
+    </option>
+    <ng-container *ngIf="buyers.length">
+      <ng-container *ngFor="let buyer of buyers">
+        <option [value]="buyer.businessPartnerNo">{{ buyer.firstName }} {{ buyer.lastName }}</option>
+      </ng-container>
+    </ng-container>
+  </select>
+</ng-container>

projects/organization-management/src/app/components/buyers-select/buyers-select.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
+
+import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
+
+import { BuyersSelectComponent } from './buyers-select.component';
+
+describe('Buyers Select Component', () => {
+  let component: BuyersSelectComponent;
+  let fixture: ComponentFixture<BuyersSelectComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    const organizationManagementFacade = mock(OrganizationManagementFacade);
+
+    when(organizationManagementFacade.users$).thenReturn(of([]));
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      declarations: [BuyersSelectComponent],
+      providers: [{ provide: OrganizationManagementFacade, useFactory: () => instance(organizationManagementFacade) }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BuyersSelectComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+
+    component.control = new FormControl('test');
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should display the buyers select box after creation', () => {
+    fixture.detectChanges();
+
+    expect(element.querySelector('[data-testing-id=buyers-select-box]')).toBeTruthy();
+  });
+});

projects/organization-management/src/app/components/buyers-select/buyers-select.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
+
+import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
+
+@Component({
+  selector: 'ish-buyers-select',
+  templateUrl: './buyers-select.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+@GenerateLazyComponent()
+export class BuyersSelectComponent implements OnInit {
+  @Input() control: FormControl;
+
+  private organizationManagementFacade = inject(OrganizationManagementFacade);
+
+  buyers$ = this.organizationManagementFacade.users$;
+
+  ngOnInit() {
+    this.organizationManagementFacade.fetchUsers();
+  }
+}

projects/organization-management/src/app/exports/index.ts

@@ -4,4 +4,5 @@ export { OrganizationManagementBreadcrumbService } from '../services/organizatio
 
 export { UserBudget } from '../models/user-budget/user-budget.model';
 export { LazyBudgetWidgetComponent } from './lazy-budget-widget/lazy-budget-widget.component';
+export { LazyBuyersSelectComponent } from './lazy-buyers-select/lazy-buyers-select.component';
 export { LazyCostCenterWidgetComponent } from './lazy-cost-center-widget/lazy-cost-center-widget.component';

projects/organization-management/src/app/exports/organization-management-exports.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 
 import { LazyBudgetWidgetComponent } from './lazy-budget-widget/lazy-budget-widget.component';
+import { LazyBuyersSelectComponent } from './lazy-buyers-select/lazy-buyers-select.component';
 import { LazyCostCenterWidgetComponent } from './lazy-cost-center-widget/lazy-cost-center-widget.component';
 
 @NgModule({
   imports: [],
-  declarations: [LazyBudgetWidgetComponent, LazyCostCenterWidgetComponent],
-  exports: [LazyBudgetWidgetComponent, LazyCostCenterWidgetComponent],
+  declarations: [LazyBudgetWidgetComponent, LazyBuyersSelectComponent, LazyCostCenterWidgetComponent],
+  exports: [LazyBudgetWidgetComponent, LazyBuyersSelectComponent, LazyCostCenterWidgetComponent],
 })
 export class OrganizationManagementExportsModule {}

projects/organization-management/src/app/facades/organization-management.facade.ts

@@ -76,6 +76,10 @@ export class OrganizationManagementFacade {
     return this.store.pipe(select(getCurrentUserBudget));
   }
 
+  fetchUsers() {
+    this.store.dispatch(loadUsers());
+  }
+
   addUser(user: B2bUser) {
     this.store.dispatch(
       addUser({

projects/organization-management/src/app/models/b2b-user/b2b-user.mapper.spec.ts

@@ -11,6 +11,8 @@ describe('B2b User Mapper', () => {
       const userData = {
         firstName: 'Patricia',
         lastName: 'Miller',
+        businessPartnerNo: 'pmiller',
+        email: 'test@test.intershop.de',
         preferredInvoiceToAddress: BasketMockData.getAddress(),
         preferredShipToAddress: { urn: 'urn:1234' } as Address,
         preferredPaymentInstrument: { id: '1234' } as PaymentInstrument,
@@ -23,9 +25,9 @@ describe('B2b User Mapper', () => {
         {
           "active": true,
           "birthday": undefined,
-          "businessPartnerNo": undefined,
+          "businessPartnerNo": "pmiller",
           "department": undefined,
-          "email": undefined,
+          "email": "test@test.intershop.de",
           "fax": undefined,
           "firstName": "Patricia",
           "lastName": "Miller",
@@ -55,6 +57,7 @@ describe('B2b User Mapper', () => {
             },
             { name: 'firstName', value: 'Patricia' },
             { name: 'lastName', value: 'Miller' },
+            { name: 'businessPartnerNo', value: 'pmiller' },
             { name: 'active', value: true },
             { name: 'budgetPeriod', type: 'String', value: 'monthly' },
             { name: 'orderSpentLimit', type: 'MoneyRO', value: { currency: 'USD', value: 500 } },
@@ -70,6 +73,7 @@ describe('B2b User Mapper', () => {
         [
           {
             "active": true,
+            "businessPartnerNo": "pmiller",
             "firstName": "Patricia",
             "lastName": "Miller",
             "login": "pmiller@test.intershop.de",

projects/organization-management/src/app/models/b2b-user/b2b-user.mapper.ts

@@ -15,6 +15,7 @@ export class B2bUserMapper {
         login: e.login,
         firstName: AttributeHelper.getAttributeValueByAttributeName(e.attributes, 'firstName'),
         lastName: AttributeHelper.getAttributeValueByAttributeName(e.attributes, 'lastName'),
+        businessPartnerNo: AttributeHelper.getAttributeValueByAttributeName(e.attributes, 'businessPartnerNo'),
         roleIDs: AttributeHelper.getAttributeValueByAttributeName(e.attributes, 'roleIDs'),
         active: AttributeHelper.getAttributeValueByAttributeName(e.attributes, 'active'),
         userBudget: {

projects/organization-management/src/app/organization-management.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from 'ish-shared/shared.module';
 
 import { BudgetWidgetComponent } from './components/budget-widget/budget-widget.component';
+import { BuyersSelectComponent } from './components/buyers-select/buyers-select.component';
 import { CostCenterBudgetComponent } from './components/cost-center-budget/cost-center-budget.component';
 import { CostCenterBuyerEditDialogComponent } from './components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component';
 import { CostCenterFormComponent } from './components/cost-center-form/cost-center-form.component';
@@ -15,6 +16,7 @@ import { UserRolesSelectionComponent } from './components/user-roles-selection/u
 import { OrganizationManagementStoreModule } from './store/organization-management-store.module';
 
 const exportedComponents = [
+  BuyersSelectComponent,
   CostCenterBudgetComponent,
   CostCenterBuyerEditDialogComponent,
   CostCenterFormComponent,

src/app/core/facades/account.facade.ts

@@ -23,7 +23,7 @@ import {
   loadAddresses,
   updateCustomerAddress,
 } from 'ish-core/store/customer/addresses';
-import { getUserRoles } from 'ish-core/store/customer/authorization';
+import { getUserPermissions, getUserRoles } from 'ish-core/store/customer/authorization';
 import {
   firstGDPRDataRequest,
   getDataRequestError,
@@ -96,6 +96,10 @@ export class AccountFacade {
   userLoading$ = this.store.pipe(select(getUserLoading));
   isLoggedIn$ = this.store.pipe(select(getUserAuthorized));
   roles$ = this.store.pipe(select(getUserRoles));
+  isOrderManager$ = this.store.pipe(
+    select(getUserPermissions),
+    map(permissions => permissions?.includes('APP_B2B_MANAGE_ORDERS'))
+  );
 
   loginUser(credentials: Credentials) {
     this.store.dispatch(loginUser({ credentials }));

src/app/core/models/order-list-query/order-list-query.model.ts

@@ -31,4 +31,5 @@ export interface OrderListQuery {
   lineItem_product?: string[];
   lineItem_customerProductID?: string[];
   lineItem_partialOrderNo?: string[];
+  buyer?: string;
 }

src/app/core/services/order/order.service.ts

@@ -133,7 +133,9 @@ export class OrderService {
    * @returns       A list of the user's orders
    */
   getOrders(query: OrderListQuery): Observable<Order[]> {
-    let params = orderListQueryToHttpParams(query);
+    const q = query?.buyer === 'all' ? { ...query, buyer: undefined as string, allBuyers: 'true' } : query;
+
+    let params = orderListQueryToHttpParams(q);
     // for 7.10 compliance - ToDo: will be removed in PWA 6.0
     params = params.set('page[limit]', query.limit);
 

src/app/pages/account-order-history/account-order-filters/account-order-filters.component.html

@@ -1,9 +1,9 @@
-<form [formGroup]="form" (ngSubmit)="submitForm()">
+<form *ngIf="fields$ | async as fields" [formGroup]="form" (ngSubmit)="submitForm()">
   <div>
-    <formly-form [form]="form" [fields]="[fields[0]]" />
+    <formly-form [form]="form" [fields]="[fields[0]]" [model]="model$ | async" />
   </div>
   <div [ngbCollapse]="formIsCollapsed">
-    <formly-form [form]="form" [fields]="fields.slice(1)" />
+    <formly-form [form]="form" [fields]="fields.slice(1)" [model]="model$ | async" />
   </div>
   <div class="row mb-4">
     <div class="col-md-4 d-flex align-items-center">
@@ -20,7 +20,6 @@
         {{ 'account.order_history.filter.clear' | translate }}
       </button>
       <button type="submit" class="btn btn-primary mr-0">
-        <fa-icon [icon]="['fas', 'search']" />
         {{ 'account.order_history.filter.apply' | translate }}
       </button>
     </div>

src/app/pages/account-order-history/account-order-filters/account-order-filters.component.spec.ts

@@ -1,20 +1,27 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyForm } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
+
+import { AccountFacade } from 'ish-core/facades/account.facade';
 
 import { AccountOrderFiltersComponent } from './account-order-filters.component';
 
 describe('Account Order Filters Component', () => {
   let component: AccountOrderFiltersComponent;
   let fixture: ComponentFixture<AccountOrderFiltersComponent>;
   let element: HTMLElement;
+  let accountFacade: AccountFacade;
 
   beforeEach(async () => {
+    accountFacade = mock(AccountFacade);
+    when(accountFacade.isOrderManager$).thenReturn(of(true));
+    when(accountFacade.isLoggedIn$).thenReturn(of(true));
     await TestBed.configureTestingModule({
       imports: [
         MockComponent(FormlyForm),
@@ -23,7 +30,8 @@ describe('Account Order Filters Component', () => {
         RouterTestingModule,
         TranslateModule.forRoot(),
       ],
-      declarations: [AccountOrderFiltersComponent, MockComponent(FaIconComponent)],
+      declarations: [AccountOrderFiltersComponent],
+      providers: [{ provide: AccountFacade, useFactory: () => instance(accountFacade) }],
     }).compileComponents();
   });