File

feature-libs/organization/administration/components/unit/links/addresses/details/unit-address-details.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
providers { provide: ItemService, useExisting: UnitAddressItemService, }
selector cx-org-unit-address-details
templateUrl ./unit-address-details.component.html

Index

Properties
Methods

Constructor

constructor(itemService: ItemService<Address>, currentUnitService: CurrentUnitService, userAddressService: UserAddressService)
Parameters :
Name Type Optional
itemService ItemService<Address> No
currentUnitService CurrentUnitService No
userAddressService UserAddressService No

Methods

getCountry
getCountry(isoCode)
Parameters :
Name Optional
isoCode No
Returns : Observable<Country>

Properties

model$
Type : Observable<Address>
Default value : this.itemService.key$.pipe( withLatestFrom(this.unit$), switchMap(([code, unit]) => this.itemService.load(unit.uid, code)), shareReplay({ bufferSize: 1, refCount: true }) )
unit$
Type : Observable<B2BUnit>
Default value : this.currentUnitService.item$
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Address, B2BUnit, Country, UserAddressService } from '@spartacus/core';
import { Observable } from 'rxjs';
import {
  map,
  shareReplay,
  switchMap,
  tap,
  withLatestFrom,
} from 'rxjs/operators';
import { ItemService } from '../../../../shared/item.service';
import { CurrentUnitService } from '../../../services/current-unit.service';
import { UnitAddressItemService } from '../services/unit-address-item.service';

@Component({
  selector: 'cx-org-unit-address-details',
  templateUrl: './unit-address-details.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'content-wrapper' },
  providers: [
    {
      provide: ItemService,
      useExisting: UnitAddressItemService,
    },
  ],
})
export class UnitAddressDetailsComponent {
  unit$: Observable<B2BUnit> = this.currentUnitService.item$;

  model$: Observable<Address> = this.itemService.key$.pipe(
    withLatestFrom(this.unit$),
    switchMap(([code, unit]) => this.itemService.load(unit.uid, code)),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  getCountry(isoCode): Observable<Country> {
    return this.userAddressService.getDeliveryCountries().pipe(
      tap((countries: Country[]) => {
        if (Object.keys(countries).length === 0) {
          this.userAddressService.loadDeliveryCountries();
        }
      }),
      map((countries) =>
        countries.find((country) => country.isocode === isoCode)
      )
    );
  }

  constructor(
    protected itemService: ItemService<Address>,
    protected currentUnitService: CurrentUnitService,
    protected userAddressService: UserAddressService
  ) {}
}
<ng-container *ngIf="unit$ | async as unit">
  <cx-org-card
    *ngIf="model$ | async as model"
    i18nRoot="orgUnitAddress.details"
    [subtitle]="'orgUnitAddress.details.subtitle' | cxTranslate: { item: unit }"
    [cxFocus]="{ refreshFocus: model }"
  >
    <a class="link" actions routerLink="edit">
      {{ 'organization.edit' | cxTranslate }}
    </a>

    <cx-org-delete-item
      actions
      key="id"
      [additionalParam]="unit.uid"
      i18nRoot="orgUnitAddress"
    ></cx-org-delete-item>

    <section main class="details">
      <div class="property">
        <label>{{ 'orgUnit.name' | cxTranslate }}</label>
        <span class="value"> {{ model.firstName }} {{ model.lastName }} </span>
      </div>

      <div class="property">
        <label>{{ 'orgUnit.unit' | cxTranslate }}</label>
        <span class="value">
          <a
            [routerLink]="
              {
                cxRoute: 'orgUnitDetails',
                params: unit
              } | cxUrl
            "
          >
            {{ unit.name }}
          </a>
        </span>
      </div>

      <div class="property full-width">
        <label>{{ 'orgUnitAddress.formattedAddress' | cxTranslate }}</label>
        <span class="value">
          {{ model.formattedAddress }}
        </span>
      </div>

      <div class="property">
        <label>{{ 'orgUnitAddress.country' | cxTranslate }}</label>
        <span class="value">
          {{ (getCountry(model.country.isocode) | async)?.name }}
        </span>
      </div>
    </section>
  </cx-org-card>
</ng-container>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""