feat: read-only view for textfield configurator (#13963)

Introduces a read-only mode for the textfield (template) configurator page. Includes the routes, OCC, state, facade and component layer. Allows to view a configuration attached to an order entry in order history. Closes #13939
SAP · Oct 8, 2021 · 19848ed · 19848ed
1 parent b8af7ca
commit 19848ed
Show file tree

Hide file tree

Showing 29 changed files with 543 additions and 19 deletions.
diff --git a/feature-libs/product-configurator/common/shared/utils/common-configurator-utils.service.ts b/feature-libs/product-configurator/common/shared/utils/common-configurator-utils.service.ts
@@ -49,7 +49,9 @@ export class CommonConfiguratorUtilsService {
   decomposeOwnerId(ownerId: string): any {
     const parts: string[] = ownerId.split('+');
     if (parts.length !== 2) {
-      throw new Error('We only expect 2 parts in ownerId, separated by +');
+      throw new Error(
+        'We only expect 2 parts in ownerId, separated by +, but was: ' + ownerId
+      );
     }
     const result = { documentId: parts[0], entryNumber: parts[1] };
     return result;

diff --git a/feature-libs/product-configurator/textfield/_index.scss b/feature-libs/product-configurator/textfield/_index.scss
@@ -1,7 +1,8 @@
 @import 'styles/index';
 
 $configurator-textfield-components: cx-configurator-textfield-input-field,
-  cx-configurator-textfield-form, cx-configurator-textfield-add-to-cart-button !default;
+  cx-configurator-textfield-input-field-readonly, cx-configurator-textfield-form,
+  cx-configurator-textfield-add-to-cart-button !default;
 
 $configurator-textfield-pages: TextfieldConfigurationTemplate !default;
 

diff --git a/...product-configurator/textfield/components/form/configurator-textfield-form.component.html b/...product-configurator/textfield/components/form/configurator-textfield-form.component.html
@@ -1,14 +1,27 @@
 <ng-container *ngIf="configuration$ | async as configuration">
-  <div
-    class="cx-attribute"
-    *ngFor="let attribute of configuration.configurationInfos"
-  >
-    <cx-configurator-textfield-input-field
-      [attribute]="attribute"
-      (inputChange)="updateConfiguration($event)"
-    ></cx-configurator-textfield-input-field>
-  </div>
-  <cx-configurator-textfield-add-to-cart-button
-    [configuration]="configuration"
-  ></cx-configurator-textfield-add-to-cart-button>
+  <ng-container *ngIf="isEditable$ | async as isEditable; else readonly">
+    <div
+      class="cx-attribute"
+      *ngFor="let attribute of configuration.configurationInfos"
+    >
+      <cx-configurator-textfield-input-field
+        [attribute]="attribute"
+        (inputChange)="updateConfiguration($event)"
+      ></cx-configurator-textfield-input-field>
+    </div>
+
+    <cx-configurator-textfield-add-to-cart-button
+      [configuration]="configuration"
+    ></cx-configurator-textfield-add-to-cart-button>
+  </ng-container>
+  <ng-template #readonly>
+    <div
+      class="cx-attribute"
+      *ngFor="let attribute of configuration.configurationInfos"
+    >
+      <cx-configurator-textfield-input-field-readonly
+        [attribute]="attribute"
+      ></cx-configurator-textfield-input-field-readonly>
+    </div>
+  </ng-template>
 </ng-container>
diff --git a/...duct-configurator/textfield/components/form/configurator-textfield-form.component.spec.ts b/...duct-configurator/textfield/components/form/configurator-textfield-form.component.spec.ts
@@ -22,8 +22,10 @@ import { ConfiguratorTextfieldFormComponent } from './configurator-textfield-for
 
 const PRODUCT_CODE = 'CONF_LAPTOP';
 const CART_ENTRY_KEY = '3';
+const ORDER_ENTRY_KEY = '00100/3';
 const ATTRIBUTE_NAME = 'AttributeName';
 const ROUTE_CONFIGURATION = 'configureTEXTFIELD';
+const ROUTE_CONFIGURATION_OVERVIEW = 'configureOverviewTEXTFIELD';
 const mockRouterState: any = {
   state: {
     params: {
@@ -57,6 +59,11 @@ class MockConfiguratorTextfieldService {
       p: productConfig,
     });
   }
+  readConfigurationForOrderEntry(): Observable<ConfiguratorTextfield.Configuration> {
+    return cold('-p', {
+      p: productConfig,
+    });
+  }
 }
 describe('TextfieldFormComponent', () => {
   let component: ConfiguratorTextfieldFormComponent;
@@ -133,9 +140,55 @@ describe('TextfieldFormComponent', () => {
     );
   });
 
+  it('should know textfield configuration after init when starting from order entry', () => {
+    mockRouterState.state = {
+      params: {
+        ownerType: CommonConfigurator.OwnerType.ORDER_ENTRY,
+        entityKey: ORDER_ENTRY_KEY,
+      },
+      semanticRoute: ROUTE_CONFIGURATION,
+    };
+
+    expect(component.configuration$).toBeObservable(
+      cold('--p', {
+        p: productConfig,
+      })
+    );
+  });
+
   it('should call update configuration on facade in case it was triggered on component', () => {
     spyOn(textfieldService, 'updateConfiguration').and.callThrough();
     component.updateConfiguration(productConfig.configurationInfos[0]);
     expect(textfieldService.updateConfiguration).toHaveBeenCalledTimes(1);
   });
+
+  it('should detect that content is editable in case route refers to configuration', () => {
+    mockRouterState.state = {
+      params: {
+        ownerType: CommonConfigurator.OwnerType.PRODUCT,
+        entityKey: PRODUCT_CODE,
+      },
+      semanticRoute: ROUTE_CONFIGURATION,
+    };
+    expect(component.isEditable$).toBeObservable(
+      cold('-b', {
+        b: true,
+      })
+    );
+  });
+
+  it('should detect that content is read-only in case route refers to configuration overview', () => {
+    mockRouterState.state = {
+      params: {
+        ownerType: CommonConfigurator.OwnerType.PRODUCT,
+        entityKey: PRODUCT_CODE,
+      },
+      semanticRoute: ROUTE_CONFIGURATION_OVERVIEW,
+    };
+    expect(component.isEditable$).toBeObservable(
+      cold('-b', {
+        b: false,
+      })
+    );
+  });
 });
diff --git a/...s/product-configurator/textfield/components/form/configurator-textfield-form.component.ts b/...s/product-configurator/textfield/components/form/configurator-textfield-form.component.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import {
   CommonConfigurator,
+  ConfiguratorRouter,
   ConfiguratorRouterExtractorService,
 } from '@spartacus/product-configurator/common';
 import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { ConfiguratorTextfieldService } from '../../core/facade/configurator-textfield.service';
 import { ConfiguratorTextfield } from '../../core/model/configurator-textfield.model';
 
@@ -26,11 +27,22 @@ export class ConfiguratorTextfieldFormComponent {
               routerData.owner
             );
           case CommonConfigurator.OwnerType.ORDER_ENTRY:
-            throw new Error('Order history integration not yet implemented');
+            return this.configuratorTextfieldService.readConfigurationForOrderEntry(
+              routerData.owner
+            );
         }
       })
     );
 
+  isEditable$: Observable<boolean> = this.configRouterExtractorService
+    .extractRouterData()
+    .pipe(
+      map(
+        (routerData) =>
+          routerData.pageType === ConfiguratorRouter.PageType.CONFIGURATION
+      )
+    );
+
   constructor(
     protected configuratorTextfieldService: ConfiguratorTextfieldService,
     protected configRouterExtractorService: ConfiguratorRouterExtractorService

diff --git a/feature-libs/product-configurator/textfield/components/index.ts b/feature-libs/product-configurator/textfield/components/index.ts
@@ -1,4 +1,5 @@
 export * from './add-to-cart-button/configurator-textfield-add-to-cart-button.component';
 export * from './form/configurator-textfield-form.component';
 export * from './input-field/configurator-textfield-input-field.component';
+export * from './input-field-readonly/configurator-textfield-input-field-readonly.component';
 export * from './textfield-configurator-components.module';
diff --git a/...omponents/input-field-readonly/configurator-textfield-input-field-readonly.component.html b/...omponents/input-field-readonly/configurator-textfield-input-field-readonly.component.html
@@ -0,0 +1,8 @@
+<label
+  id="{{ getIdLabel(attribute) }}"
+  [attr.aria-label]="attribute.configurationLabel"
+  >{{ attribute.configurationLabel }}</label
+>
+<div attr.aria-labelledby="{{ getIdLabel(attribute) }}">
+  {{ attribute.configurationValue }}
+</div>
diff --git a/...onents/input-field-readonly/configurator-textfield-input-field-readonly.component.spec.ts b/...onents/input-field-readonly/configurator-textfield-input-field-readonly.component.spec.ts
@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ConfiguratorTextfieldInputFieldReadonlyComponent } from './configurator-textfield-input-field-readonly.component';
+
+describe('TextfieldInputFieldReadonlyComponent', () => {
+  let component: ConfiguratorTextfieldInputFieldReadonlyComponent;
+  let htmlElem: HTMLElement;
+  let fixture: ComponentFixture<ConfiguratorTextfieldInputFieldReadonlyComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ConfiguratorTextfieldInputFieldReadonlyComponent],
+      })
+        .overrideComponent(ConfiguratorTextfieldInputFieldReadonlyComponent, {
+          set: {
+            changeDetection: ChangeDetectionStrategy.Default,
+          },
+        })
+        .compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(
+      ConfiguratorTextfieldInputFieldReadonlyComponent
+    );
+    component = fixture.componentInstance;
+    component.attribute = {
+      configurationLabel: 'attributeName',
+      configurationValue: 'input123',
+    };
+    fixture.detectChanges();
+    htmlElem = fixture.nativeElement;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render label', () => {
+    const idLabel = component.getIdLabel(component.attribute);
+    const elementsLabel = htmlElem.querySelectorAll('#' + idLabel);
+    expect(elementsLabel.length).toBe(1);
+    const elementLabel = elementsLabel[0];
+    expect(elementLabel.innerHTML).toBe(component.attribute.configurationLabel);
+  });
+
+  it('should render value', () => {
+    const elementsDiv = htmlElem.querySelectorAll('div');
+    expect(elementsDiv.length).toBe(1);
+    const elementDiv = elementsDiv[0];
+    expect(elementDiv.innerHTML).toContain(
+      component.attribute.configurationValue
+    );
+  });
+});
diff --git a/.../components/input-field-readonly/configurator-textfield-input-field-readonly.component.ts b/.../components/input-field-readonly/configurator-textfield-input-field-readonly.component.ts
@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { ConfiguratorTextfield } from '../../core/model/configurator-textfield.model';
+
+@Component({
+  selector: 'cx-configurator-textfield-input-field-readonly',
+  templateUrl: './configurator-textfield-input-field-readonly.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfiguratorTextfieldInputFieldReadonlyComponent {
+  PREFIX_TEXTFIELD = 'cx-configurator-textfield';
+
+  @Input() attribute: ConfiguratorTextfield.ConfigurationInfo;
+
+  /**
+   * Compiles an ID for the attribute label by using the label from the backend and a prefix 'label'
+   * @param {ConfiguratorTextfield.ConfigurationInfo} attribute Textfield configurator attribute. Carries the attribute label information from the backend
+   * @returns {string} ID
+   */
+  getIdLabel(attribute: ConfiguratorTextfield.ConfigurationInfo): string {
+    return (
+      this.PREFIX_TEXTFIELD + 'label' + this.getLabelForIdGeneration(attribute)
+    );
+  }
+
+  protected getLabelForIdGeneration(
+    attribute: ConfiguratorTextfield.ConfigurationInfo
+  ): string {
+    //replace white spaces with an empty string
+    return attribute.configurationLabel.replace(/\s/g, '');
+  }
+}
diff --git a/...ibs/product-configurator/textfield/components/textfield-configurator-components.module.ts b/...ibs/product-configurator/textfield/components/textfield-configurator-components.module.ts
@@ -12,6 +12,7 @@ import {
 import { ConfiguratorTextfieldAddToCartButtonComponent } from './add-to-cart-button/configurator-textfield-add-to-cart-button.component';
 import { ConfiguratorTextfieldFormComponent } from './form/configurator-textfield-form.component';
 import { ConfiguratorTextfieldInputFieldComponent } from './input-field/configurator-textfield-input-field.component';
+import { ConfiguratorTextfieldInputFieldReadonlyComponent } from './input-field-readonly/configurator-textfield-input-field-readonly.component';
 
 @NgModule({
   imports: [
@@ -35,11 +36,13 @@ import { ConfiguratorTextfieldInputFieldComponent } from './input-field/configur
   declarations: [
     ConfiguratorTextfieldFormComponent,
     ConfiguratorTextfieldInputFieldComponent,
+    ConfiguratorTextfieldInputFieldReadonlyComponent,
     ConfiguratorTextfieldAddToCartButtonComponent,
   ],
   exports: [
     ConfiguratorTextfieldFormComponent,
     ConfiguratorTextfieldInputFieldComponent,
+    ConfiguratorTextfieldInputFieldReadonlyComponent,
     ConfiguratorTextfieldAddToCartButtonComponent,
   ],
 })

diff --git a/...ure-libs/product-configurator/textfield/core/connectors/configurator-textfield.adapter.ts b/...ure-libs/product-configurator/textfield/core/connectors/configurator-textfield.adapter.ts
@@ -38,6 +38,16 @@ export abstract class ConfiguratorTextfieldAdapter {
     parameters: CommonConfigurator.ReadConfigurationFromCartEntryParameters
   ): Observable<ConfiguratorTextfield.Configuration>;
 
+  /**
+   * Abstract method to read a configuration for an order entry
+   *
+   * @param {CommonConfigurator.ReadConfigurationFromOrderEntryParameters} parameters read from order entry parameters object
+   * @returns {Observable<ConfiguratorTextfield.Configuration>} Observable of configurations
+   */
+  abstract readConfigurationForOrderEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromOrderEntryParameters
+  ): Observable<ConfiguratorTextfield.Configuration>;
+
   /**
    * Abstract method to update a configuration attached to a cart entry
    *

diff --git a/...s/product-configurator/textfield/core/connectors/configurator-textfield.connector.spec.ts b/...s/product-configurator/textfield/core/connectors/configurator-textfield.connector.spec.ts
@@ -37,6 +37,10 @@ class MockConfiguratorTextfieldAdapter implements ConfiguratorTextfieldAdapter {
     (params: CommonConfigurator.ReadConfigurationFromCartEntryParameters) =>
       of('readConfigurationForCartEntry' + params)
   );
+  readConfigurationForOrderEntry = createSpy().and.callFake(
+    (params: CommonConfigurator.ReadConfigurationFromOrderEntryParameters) =>
+      of('readConfigurationForOrderEntry' + params)
+  );
 }
 
 describe('ConfiguratorTextfieldConnector', () => {
@@ -100,6 +104,23 @@ describe('ConfiguratorTextfieldConnector', () => {
     expect(adapter.readConfigurationForCartEntry).toHaveBeenCalledWith(params);
   });
 
+  it('should call adapter on readConfigurationForOrderEntry', () => {
+    const adapter = TestBed.inject(
+      ConfiguratorTextfieldAdapter as Type<ConfiguratorTextfieldAdapter>
+    );
+
+    const params: CommonConfigurator.ReadConfigurationFromOrderEntryParameters =
+      {
+        owner: ConfiguratorModelUtils.createInitialOwner(),
+      };
+    let result;
+    service
+      .readConfigurationForOrderEntry(params)
+      .subscribe((res) => (result = res));
+    expect(result).toBe('readConfigurationForOrderEntry' + params);
+    expect(adapter.readConfigurationForOrderEntry).toHaveBeenCalledWith(params);
+  });
+
   it('should call adapter on addToCart', () => {
     const adapter = TestBed.inject(
       ConfiguratorTextfieldAdapter as Type<ConfiguratorTextfieldAdapter>

diff --git a/...e-libs/product-configurator/textfield/core/connectors/configurator-textfield.connector.ts b/...e-libs/product-configurator/textfield/core/connectors/configurator-textfield.connector.ts
@@ -31,6 +31,16 @@ export class ConfiguratorTextfieldConnector {
   ): Observable<ConfiguratorTextfield.Configuration> {
     return this.adapter.readConfigurationForCartEntry(parameters);
   }
+  /**
+   * Reads an existing configuration for an order entry
+   * @param {CommonConfigurator.ReadConfigurationFromOrderEntryParameters} parameters Attributes needed to read a product configuration for an order entry
+   * @returns {Observable<ConfiguratorTextfield.Configuration>} Observable of product configurations
+   */
+  readConfigurationForOrderEntry(
+    parameters: CommonConfigurator.ReadConfigurationFromOrderEntryParameters
+  ): Observable<ConfiguratorTextfield.Configuration> {
+    return this.adapter.readConfigurationForOrderEntry(parameters);
+  }
   /**
    * Updates a configuration that is attached to a cart entry
    * @param parameters Attributes needed to update a cart entries' configuration