File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-configurator-form |
| templateUrl |
./configurator-form.component.html |
Methods
|
createGroupId
|
createGroupId(groupId?: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| groupId |
string
|
Yes
|
|
|
|
activeLanguage$
|
Type : Observable<string>
|
Default value : this.languageService.getActive()
|
|
|
|
configuration$
|
Type : Observable<Configurator.Configuration>
|
Default value : this.configRouterExtractorService.extractRouterData().pipe(
filter(
(routerData) =>
routerData.pageType === ConfiguratorRouter.PageType.CONFIGURATION
),
switchMap((routerData) => {
return this.configuratorCommonsService.getOrCreateConfiguration(
routerData.owner
);
})
)
|
|
|
|
currentGroup$
|
Type : Observable<Configurator.Group>
|
Default value : this.configRouterExtractorService
.extractRouterData()
.pipe(
switchMap((routerData) =>
this.configuratorGroupsService.getCurrentGroup(routerData.owner)
)
)
|
|
|
|
uiType
|
Default value : Configurator.UiType
|
|
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { LanguageService } from '@spartacus/core';
import {
ConfiguratorRouter,
ConfiguratorRouterExtractorService,
} from '@spartacus/product-configurator/common';
import { Observable } from 'rxjs';
import { filter, switchMap, take } from 'rxjs/operators';
import { ConfiguratorCommonsService } from '../../core/facade/configurator-commons.service';
import { ConfiguratorGroupsService } from '../../core/facade/configurator-groups.service';
import { Configurator } from '../../core/model/configurator.model';
import { ConfigFormUpdateEvent } from './configurator-form.event';
import { ConfiguratorStorefrontUtilsService } from '../service/configurator-storefront-utils.service';
@Component({
selector: 'cx-configurator-form',
templateUrl: './configurator-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorFormComponent implements OnInit {
configuration$: Observable<Configurator.Configuration> =
this.configRouterExtractorService.extractRouterData().pipe(
filter(
(routerData) =>
routerData.pageType === ConfiguratorRouter.PageType.CONFIGURATION
),
switchMap((routerData) => {
return this.configuratorCommonsService.getOrCreateConfiguration(
routerData.owner
);
})
);
currentGroup$: Observable<Configurator.Group> =
this.configRouterExtractorService
.extractRouterData()
.pipe(
switchMap((routerData) =>
this.configuratorGroupsService.getCurrentGroup(routerData.owner)
)
);
activeLanguage$: Observable<string> = this.languageService.getActive();
uiType = Configurator.UiType;
constructor(
protected configuratorCommonsService: ConfiguratorCommonsService,
protected configuratorGroupsService: ConfiguratorGroupsService,
protected configRouterExtractorService: ConfiguratorRouterExtractorService,
protected languageService: LanguageService,
protected configUtils: ConfiguratorStorefrontUtilsService
) {}
ngOnInit(): void {
this.configRouterExtractorService
.extractRouterData()
.pipe(take(1))
.subscribe((routingData) => {
//In case the 'forceReload' is set (means the page is launched from the cart),
//we need to initialise the cart configuration
if (routingData.forceReload) {
this.configuratorCommonsService.removeConfiguration(
routingData.owner
);
}
//In case of resolving issues, check if the configuration contains conflicts,
//if not, check if the configuration contains missing mandatory fields and show the group
if (routingData.resolveIssues) {
this.configuratorCommonsService
.hasConflicts(routingData.owner)
.pipe(take(1))
.subscribe((hasConflicts) => {
if (hasConflicts) {
this.configuratorGroupsService.navigateToConflictSolver(
routingData.owner
);
//Only check for Incomplete group when there are no conflicts
} else {
this.configuratorGroupsService.navigateToFirstIncompleteGroup(
routingData.owner
);
}
});
}
});
}
updateConfiguration(event: ConfigFormUpdateEvent): void {
this.configuratorCommonsService.updateConfiguration(
event.ownerKey,
event.changedAttribute,
event.updateType
);
}
isConflictGroupType(groupType: Configurator.GroupType): boolean {
return this.configuratorGroupsService.isConflictGroupType(groupType);
}
/**
* Generates a group ID.
*
* @param {string} groupId - group ID
* @returns {string | undefined} - generated group ID
*/
createGroupId(groupId?: string): string | undefined {
return this.configUtils.createGroupId(groupId);
}
}
<ng-container *ngIf="configuration$ | async as configuration">
<ng-container *ngIf="currentGroup$ | async as currentGroup">
<div id="{{ createGroupId(currentGroup.id) }}" role="tabpanel">
<ng-container *ngIf="isConflictGroupType(currentGroup.groupType)">
<cx-configurator-conflict-description
[currentGroup]="currentGroup"
></cx-configurator-conflict-description>
</ng-container>
<div
class="cx-group-attribute"
*ngFor="
let attribute of currentGroup.attributes;
let indexOfAttribute = index
"
>
<ng-container *ngIf="isConflictGroupType(currentGroup.groupType)">
<cx-configurator-conflict-suggestion
[currentGroup]="currentGroup"
[attribute]="attribute"
[suggestionNumber]="indexOfAttribute"
></cx-configurator-conflict-suggestion>
</ng-container>
<cx-configurator-attribute-header
[attribute]="attribute"
[owner]="configuration.owner"
[groupId]="currentGroup.id"
[groupType]="currentGroup.groupType"
></cx-configurator-attribute-header>
<!-- Single Selection Radio Button -->
<cx-configurator-attribute-radio-button
*ngIf="attribute.uiType === uiType.RADIOBUTTON"
[attribute]="attribute"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-radio-button>
<!-- Single Selection Product Bundle -->
<cx-configurator-attribute-single-selection-bundle
(selectionChange)="updateConfiguration($event)"
[attribute]="attribute"
[ownerKey]="configuration.owner.key"
*ngIf="attribute.uiType === uiType.RADIOBUTTON_PRODUCT"
></cx-configurator-attribute-single-selection-bundle>
<!-- Multi Selection Product Bundle -->
<cx-configurator-attribute-multi-selection-bundle
(selectionChange)="updateConfiguration($event)"
[attribute]="attribute"
[ownerKey]="configuration.owner.key"
*ngIf="attribute.uiType === uiType.CHECKBOXLIST_PRODUCT"
></cx-configurator-attribute-multi-selection-bundle>
<!-- Single Selection Dropdown Product Bundle -->
<cx-configurator-attribute-single-selection-bundle-dropdown
*ngIf="attribute.uiType === uiType.DROPDOWN_PRODUCT"
[attribute]="attribute"
[group]="currentGroup.id"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-single-selection-bundle-dropdown>
<!-- Single Selection Dropdown -->
<cx-configurator-attribute-drop-down
*ngIf="attribute.uiType === uiType.DROPDOWN"
[attribute]="attribute"
[group]="currentGroup.id"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-drop-down>
<cx-configurator-attribute-input-field
*ngIf="attribute.uiType === uiType.STRING"
[attribute]="attribute"
[group]="currentGroup.id"
[ownerType]="configuration.owner.type"
[ownerKey]="configuration.owner.key"
(inputChange)="updateConfiguration($event)"
>
</cx-configurator-attribute-input-field>
<ng-container *ngIf="activeLanguage$ | async as activeLanguage">
<cx-configurator-attribute-numeric-input-field
*ngIf="attribute.uiType === uiType.NUMERIC"
[attribute]="attribute"
[group]="currentGroup.id"
[ownerKey]="configuration.owner.key"
[language]="activeLanguage"
(inputChange)="updateConfiguration($event)"
></cx-configurator-attribute-numeric-input-field>
</ng-container>
<!-- Multi Selection Checkbox -->
<cx-configurator-attribute-checkbox-list
*ngIf="attribute.uiType === uiType.CHECKBOXLIST"
[attribute]="attribute"
[group]="currentGroup.id"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-checkbox-list>
<cx-configurator-attribute-checkbox
*ngIf="attribute.uiType === uiType.CHECKBOX"
[attribute]="attribute"
[group]="currentGroup.id"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-checkbox>
<cx-configurator-attribute-read-only
*ngIf="attribute.uiType === uiType.READ_ONLY"
[attribute]="attribute"
[group]="currentGroup.id"
></cx-configurator-attribute-read-only>
<cx-configurator-attribute-multi-selection-image
*ngIf="attribute.uiType === uiType.MULTI_SELECTION_IMAGE"
[attribute]="attribute"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-multi-selection-image>
<cx-configurator-attribute-single-selection-image
*ngIf="attribute.uiType === uiType.SINGLE_SELECTION_IMAGE"
[attribute]="attribute"
[ownerKey]="configuration.owner.key"
(selectionChange)="updateConfiguration($event)"
></cx-configurator-attribute-single-selection-image>
<em *ngIf="attribute.uiType === uiType.NOT_IMPLEMENTED">{{
'configurator.attribute.notSupported' | cxTranslate
}}</em>
<cx-configurator-attribute-footer
[attribute]="attribute"
[owner]="configuration.owner"
[groupId]="currentGroup.id"
></cx-configurator-attribute-footer>
</div>
</div>
</ng-container>
</ng-container>
Legend
Html element with directive