File

feature-libs/product-configurator/textfield/components/form/configurator-textfield-form.component.ts

Metadata

selector cx-configurator-textfield-form
templateUrl ./configurator-textfield-form.component.html

Index

Properties
Methods

Constructor

constructor(configuratorTextfieldService: ConfiguratorTextfieldService, configRouterExtractorService: ConfiguratorRouterExtractorService)
Parameters :
Name Type Optional
configuratorTextfieldService ConfiguratorTextfieldService No
configRouterExtractorService ConfiguratorRouterExtractorService No

Methods

updateConfiguration
updateConfiguration(attribute: ConfiguratorTextfield.ConfigurationInfo)

Updates a configuration attribute

Parameters :
Name Type Optional Description
attribute ConfiguratorTextfield.ConfigurationInfo No

Configuration attribute, always containing a string typed value

Returns : void

Properties

configuration$
Type : Observable<ConfiguratorTextfield.Configuration>
Default value : this.configRouterExtractorService.extractRouterData().pipe( switchMap((routerData) => { switch (routerData.owner.type) { case CommonConfigurator.OwnerType.PRODUCT: return this.configuratorTextfieldService.createConfiguration( routerData.owner ); case CommonConfigurator.OwnerType.CART_ENTRY: return this.configuratorTextfieldService.readConfigurationForCartEntry( routerData.owner ); case CommonConfigurator.OwnerType.ORDER_ENTRY: return this.configuratorTextfieldService.readConfigurationForOrderEntry( routerData.owner ); } }) )
isEditable$
Type : Observable<boolean>
Default value : this.configRouterExtractorService .extractRouterData() .pipe( map( (routerData) => routerData.pageType === ConfiguratorRouter.PageType.CONFIGURATION ) )
import { Component } from '@angular/core';
import {
  CommonConfigurator,
  ConfiguratorRouter,
  ConfiguratorRouterExtractorService,
} from '@spartacus/product-configurator/common';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { ConfiguratorTextfieldService } from '../../core/facade/configurator-textfield.service';
import { ConfiguratorTextfield } from '../../core/model/configurator-textfield.model';

@Component({
  selector: 'cx-configurator-textfield-form',
  templateUrl: './configurator-textfield-form.component.html',
})
export class ConfiguratorTextfieldFormComponent {
  configuration$: Observable<ConfiguratorTextfield.Configuration> =
    this.configRouterExtractorService.extractRouterData().pipe(
      switchMap((routerData) => {
        switch (routerData.owner.type) {
          case CommonConfigurator.OwnerType.PRODUCT:
            return this.configuratorTextfieldService.createConfiguration(
              routerData.owner
            );
          case CommonConfigurator.OwnerType.CART_ENTRY:
            return this.configuratorTextfieldService.readConfigurationForCartEntry(
              routerData.owner
            );
          case CommonConfigurator.OwnerType.ORDER_ENTRY:
            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
  ) {}

  /**
   * Updates a configuration attribute
   * @param attribute Configuration attribute, always containing a string typed value
   */
  updateConfiguration(
    attribute: ConfiguratorTextfield.ConfigurationInfo
  ): void {
    this.configuratorTextfieldService.updateConfiguration(attribute);
  }
}
<ng-container *ngIf="configuration$ | async as configuration">
  <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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""