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 | 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 1x 1x | import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { RxState } from '@rx-angular/state';
import { Observable, combineLatest, map, switchMap } from 'rxjs';
import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
import { CustomFields, CustomFieldsComponentInput } from 'ish-core/models/custom-field/custom-field.model';
interface ComponentState {
form: FormGroup;
customFields: CustomFieldsComponentInput[];
fields: FormlyFieldConfig[];
model: CustomFields;
}
/**
* The Custom Fields Formly Component displays the custom fields form using RxState functionality.
*/
@Component({
selector: 'ish-custom-fields-formly',
templateUrl: './custom-fields-formly.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomFieldsFormlyComponent extends RxState<ComponentState> implements OnInit, OnChanges {
@Input({ required: true }) set form(form: ComponentState['form']) {
this.set({ form });
}
@Input({ required: true }) set fields(customFields: ComponentState['customFields']) {
this.set({ customFields });
}
@Input() labelClass: string;
@Input() fieldClass: string;
fields$: Observable<ComponentState['fields']>;
model$: Observable<ComponentState['model']>;
form$: Observable<ComponentState['form']>;
constructor(private checkoutFacade: CheckoutFacade) {
super();
}
ngOnChanges(s: SimpleChanges): void {
// reset model if the user has cancelled the form
Iif (s.form?.currentValue && !s.form.firstChange) {
this.setModel();
}
}
ngOnInit(): void {
this.form$ = this.select('form');
this.connect(
'fields',
this.select('customFields').pipe(
switchMap(fields =>
combineLatest(
fields.map(field =>
this.checkoutFacade.customField$(field.name).pipe(
map(definition => ({
key: field.name,
type: 'ish-text-input-field',
templateOptions: {
label: definition.displayName,
labelClass: this.labelClass,
fieldClass: this.fieldClass,
},
}))
)
)
)
)
)
);
this.fields$ = this.select('fields');
this.setModel();
}
private setModel() {
this.connect(
'model',
this.select('customFields').pipe(
map(fields => fields.reduce((acc, field) => ({ ...acc, [field.name]: field.value }), {}))
)
);
this.model$ = this.select('model');
}
}
|