File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{ } |
| providers |
{
provide: ItemService, useExisting: UnitAddressItemService,
}
|
| selector |
cx-org-unit-address-details |
| templateUrl |
./unit-address-details.component.html |
Methods
|
getCountry
|
getCountry(isoCode)
|
|
|
|
Returns : Observable<Country>
|
|
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 with directive