File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| providers |
{
provide: ItemService, useExisting: UserItemService,
}
|
| selector |
cx-org-user-details |
| templateUrl |
./user-details.component.html |
|
isInEditMode$
|
Default value : this.itemService.isInEditMode$
|
|
|
|
model$
|
Type : Observable<B2BUser>
|
Default value : this.itemService.key$.pipe(
switchMap((code) => this.itemService.load(code)),
startWith({})
)
|
|
|
|
userGuardSubscription
|
Type : Subscription
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { B2BUser } from '@spartacus/core';
import { Observable, Subscription } from 'rxjs';
import { startWith, switchMap } from 'rxjs/operators';
import { ItemService } from '../../shared/item.service';
import { UserItemService } from '../services/user-item.service';
@Component({
selector: 'cx-org-user-details',
templateUrl: './user-details.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: ItemService,
useExisting: UserItemService,
},
],
host: { class: 'content-wrapper' },
})
export class UserDetailsComponent {
userGuardSubscription: Subscription;
model$: Observable<B2BUser> = this.itemService.key$.pipe(
switchMap((code) => this.itemService.load(code)),
startWith({})
);
isInEditMode$ = this.itemService.isInEditMode$;
constructor(protected itemService: ItemService<B2BUser>) {}
}
<cx-org-card
*ngIf="model$ | async as model"
i18nRoot="orgUser.details"
[cxFocus]="{ refreshFocus: model }"
>
<a
actions
class="link edit"
[class.disabled]="!model.active || (isInEditMode$ | async)"
[routerLink]="{ cxRoute: 'orgUserEdit', params: model } | cxUrl"
>
{{ 'organization.edit' | cxTranslate }}
</a>
<cx-org-toggle-status
actions
key="customerId"
i18nRoot="orgUser"
></cx-org-toggle-status>
<cx-org-disable-info info i18nRoot="orgUser"> </cx-org-disable-info>
<section main class="details" cxOrgItemExists>
<div class="property">
<label>{{ 'orgUser.name' | cxTranslate }}</label>
<span class="value">
{{ model.name }}
</span>
</div>
<div class="property full-width">
<label>{{ 'orgUser.uid' | cxTranslate }}</label>
<span class="value">
{{ model.uid }}
</span>
</div>
<div class="property">
<label>{{ 'orgUser.roles' | cxTranslate }}</label>
<ul class="value">
<li
*ngFor="let role of model.roles; let isLast = last"
[innerText]="'organization.userRoles.' + role | cxTranslate"
></li>
<li *ngIf="model.roles?.length === 0">-</li>
</ul>
</div>
<div class="property">
<label>{{ 'orgUser.orgUnit' | cxTranslate }}</label>
<a
class="value"
[routerLink]="
{
cxRoute: 'orgUnitDetails',
params: model.orgUnit
} | cxUrl
"
>
{{ model.orgUnit?.name }}
</a>
</div>
<div class="property full-width">
<a
*ngIf="model.customerId"
class="link"
[class.disabled]="!model.active"
[routerLink]="
{ cxRoute: 'orgUserChangePassword', params: model } | cxUrl
"
>
{{ 'orgUser.links.password' | cxTranslate }}
</a>
</div>
</section>
<section main class="link-list">
<ng-container *ngIf="model.customerId">
<a
class="link"
[routerLink]="{ cxRoute: 'orgUserApprovers', params: model } | cxUrl"
routerLinkActive="is-current"
>
{{ 'orgUser.links.approvers' | cxTranslate }}
</a>
<a
class="link"
[routerLink]="{ cxRoute: 'orgUserUserGroups', params: model } | cxUrl"
routerLinkActive="is-current"
>
{{ 'orgUser.links.userGroup' | cxTranslate }}
</a>
<a
class="link"
[routerLink]="{ cxRoute: 'orgUserPermissions', params: model } | cxUrl"
routerLinkActive="is-current"
>
{{ 'orgUser.links.permission' | cxTranslate }}
</a>
</ng-container>
</section>
</cx-org-card>
Legend
Html element with directive