All files / src/app/shared/components/custom-fields/custom-fields-view custom-fields-view.component.ts

100% Statements 14/14
83.33% Branches 5/6
100% Functions 8/8
100% Lines 13/13

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 434x 4x   4x                         4x     3x   3x       3x   3x     3x 3x   3x   9x 7x            
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable, ReplaySubject, combineLatest, filter, map, switchMap } from 'rxjs';
 
import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
import { CustomFieldDefinition } from 'ish-core/models/custom-field-definition/custom-field-definition.model';
import { CustomFieldsComponentInput } from 'ish-core/models/custom-field/custom-field.model';
 
/**
 * Custom Fields View Component for displaying (basket) custom fields with their values.
 */
@Component({
  selector: 'ish-custom-fields-view',
  templateUrl: './custom-fields-view.component.html',
  styleUrls: ['./custom-fields-view.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomFieldsViewComponent implements OnInit {
  @Input({ required: true })
  set fields(val: CustomFieldsComponentInput[]) {
    this.fields$.next(val);
  }
  @Input() showEmpty = false;
 
  data$: Observable<(CustomFieldsComponentInput & Pick<CustomFieldDefinition, 'displayName'>)[]>;
 
  private fields$ = new ReplaySubject<CustomFieldsComponentInput[]>(1);
 
  constructor(private checkoutFacade: CheckoutFacade) {}
 
  ngOnInit(): void {
    this.data$ = this.fields$.pipe(
      filter(fields => fields?.length > 0),
      switchMap(fields =>
        combineLatest(
          fields
            .filter(field => this.showEmpty || field.value !== undefined)
            .map(field => this.checkoutFacade.customField$(field.name).pipe(map(def => ({ ...def, ...field }))))
        )
      )
    );
  }
}