Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 2x 2x 2x 2x 2x 2x 2x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 18x 7x 7x 11x 7x 7x | import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, Self } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { RxState } from '@rx-angular/state';
import { combineLatest } from 'rxjs';
import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
import { CustomFieldsComponentInput } from 'ish-core/models/custom-field/custom-field.model';
import { LineItemUpdate } from 'ish-core/models/line-item-update/line-item-update.model';
import { LineItemView } from 'ish-core/models/line-item/line-item.model';
interface ComponentState {
lineItem: Partial<Pick<LineItemView, 'id' | 'productSKU' | 'customFields'>>;
visible: boolean;
customFields: CustomFieldsComponentInput[];
editMode: 'edit' | 'add'; // 'edit' for editable custom fields with existing values, else 'add' new values (relevant for translations)
}
/**
* The Line Item Information Edit Component displays the basket line item attribute values. If editable it shows a link to add/edit these attributes.
*/
@Component({
selector: 'ish-line-item-information-edit',
templateUrl: './line-item-information-edit.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ProductContextFacade],
})
export class LineItemInformationEditComponent extends RxState<ComponentState> implements OnInit {
@Input({ required: true }) set lineItem(lineItem: ComponentState['lineItem']) {
this.set({ lineItem });
this.resetContext();
}
@Input() editable = false;
@Output() updateItem = new EventEmitter<LineItemUpdate>();
customFieldsForm = new FormGroup({});
collapsed = true;
constructor(@Self() private context: ProductContextFacade, private checkoutFacade: CheckoutFacade) {
super();
}
ngOnInit() {
this.connect(
'visible',
this.checkoutFacade.customFieldsForScope$('BasketLineItem'),
(_, customFields) => customFields.length > 0
);
this.connect(
'customFields',
combineLatest([
this.checkoutFacade.customFieldsForScope$('BasketLineItem'),
this.select('lineItem', 'customFields'),
]),
(_, [customFields, customFieldsData]) =>
customFields.map(field => ({
name: field.name,
editable: field.editable,
value: customFieldsData[field.name],
}))
);
this.connect('editMode', this.select('lineItem', 'customFields'), (_, customFieldsData) =>
Object.keys(customFieldsData).length > 0 ? 'edit' : 'add'
);
}
getLineItemId() {
return this.get('lineItem')?.id;
}
private resetContext() {
const lineItem = this.get('lineItem');
this.context.set({ sku: lineItem.productSKU });
}
save() {
const customFields = this.customFieldsForm.value;
this.updateItem.emit({
itemId: this.getLineItemId(),
customFields: Object.keys(customFields).length > 0 ? customFields : undefined,
});
}
cancel() {
this.collapsed = true;
this.resetContext();
this.customFieldsForm.reset();
}
}
|