File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| providers |
{
provide: ItemService, useExisting: CostCenterItemService,
}
|
| selector |
cx-org-cost-center-details |
| templateUrl |
./cost-center-details.component.html |
|
isInEditMode$
|
Default value : this.itemService.isInEditMode$
|
|
|
|
model$
|
Type : Observable<CostCenter>
|
Default value : this.itemService.key$.pipe(
switchMap((code) => this.itemService.load(code)),
startWith({})
)
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CostCenter } from '@spartacus/core';
import { Observable } from 'rxjs';
import { startWith, switchMap } from 'rxjs/operators';
import { ItemService } from '../../shared/item.service';
import { CostCenterItemService } from '../services/cost-center-item.service';
@Component({
selector: 'cx-org-cost-center-details',
templateUrl: './cost-center-details.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: ItemService,
useExisting: CostCenterItemService,
},
],
host: { class: 'content-wrapper' },
})
export class CostCenterDetailsComponent {
model$: Observable<CostCenter> = this.itemService.key$.pipe(
switchMap((code) => this.itemService.load(code)),
startWith({})
);
isInEditMode$ = this.itemService.isInEditMode$;
constructor(protected itemService: ItemService<CostCenter>) {}
}
<cx-org-card
*ngIf="model$ | async as model"
i18nRoot="orgCostCenter.details"
[cxFocus]="{ refreshFocus: model }"
>
<a
actions
class="link edit"
[class.disabled]="!model.active || (isInEditMode$ | async)"
[routerLink]="{ cxRoute: 'orgCostCenterEdit', params: model } | cxUrl"
>
{{ 'organization.edit' | cxTranslate }}
</a>
<cx-org-toggle-status actions i18nRoot="orgCostCenter"></cx-org-toggle-status>
<cx-org-disable-info info i18nRoot="orgCostCenter"> </cx-org-disable-info>
<section main class="details" cxOrgItemExists>
<div class="property">
<label>{{ 'orgCostCenter.name' | cxTranslate }}</label>
<span class="value">
{{ model.name }}
</span>
</div>
<div class="property">
<label>{{ 'orgCostCenter.code' | cxTranslate }}</label>
<span class="value">
{{ model.code }}
</span>
</div>
<div class="property">
<label>{{ 'orgCostCenter.active' | cxTranslate }}</label>
<span
class="value"
[class.is-active]="model.active"
[class.is-inactive]="!model.active"
>
{{
(model.active ? 'organization.enabled' : 'organization.disabled')
| cxTranslate
}}
</span>
</div>
<div class="property">
<label>{{ 'orgCostCenter.currency' | cxTranslate }}</label>
<span class="value">
{{ model.currency?.isocode }}
</span>
</div>
<div class="property">
<label>{{ 'orgCostCenter.unit' | cxTranslate }}</label>
<a
class="value"
[routerLink]="
{
cxRoute: 'orgUnitDetails',
params: model.unit
} | cxUrl
"
>
{{ model.unit?.name }}
</a>
</div>
</section>
<section main class="link-list">
<a
*ngIf="model.code"
class="link"
[routerLink]="{ cxRoute: 'orgCostCenterBudgets', params: model } | cxUrl"
routerLinkActive="is-current"
>
{{ 'orgCostCenter.budget.link' | cxTranslate }}
</a>
</section>
</cx-org-card>
Legend
Html element with directive