File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| providers |
{
provide: ItemService, useExisting: UserItemService,
}
{
provide: CurrentItemService, useExisting: CurrentUserService,
}
|
| selector |
cx-org-user-form |
| templateUrl |
./user-form.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
unitKey
|
Type : string
|
|
|
Initialize the business unit for the user.
If there's a unit provided, we disable the unit form control.
|
Methods
|
updateRoles
|
updateRoles(event: MouseEvent)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
MouseEvent
|
No
|
|
|
availableRoles
|
Type : B2BUserRole[]
|
Default value : this.b2bUserService.getAllRoles()
|
|
|
|
form
|
Type : FormGroup
|
Default value : this.itemService.getForm()
|
|
|
|
titles$
|
Type : Observable<Title[]>
|
Default value : this.userService.getTitles()
|
|
|
|
units$
|
Type : Observable<B2BUnitNode[]>
|
Default value : this.unitService.getActiveUnitList().pipe(
tap((units) => {
if (units.length === 1) {
this.form?.get('orgUnit.uid').setValue(units[0]?.id);
}
})
)
|
|
|
Accessors
|
unitKey
|
setunitKey(value: string)
|
|
|
Initialize the business unit for the user.
If there's a unit provided, we disable the unit form control.
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
|
|
isAssignedToApprovers
|
getisAssignedToApprovers()
|
|
|
import {
ChangeDetectionStrategy,
Component,
Input,
OnInit,
} from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { B2BUser, B2BUserRole, Title, UserService } from '@spartacus/core';
import {
B2BUnitNode,
B2BUserService,
OrgUnitService,
} from '@spartacus/organization/administration/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { CurrentItemService } from '../../shared/current-item.service';
import { ItemService } from '../../shared/item.service';
import { CurrentUserService } from '../services/current-user.service';
import { UserItemService } from '../services/user-item.service';
@Component({
selector: 'cx-org-user-form',
templateUrl: './user-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: UserItemService,
},
{
provide: CurrentItemService,
useExisting: CurrentUserService,
},
],
})
export class UserFormComponent implements OnInit {
form: FormGroup = this.itemService.getForm();
/**
* Initialize the business unit for the user.
*
* If there's a unit provided, we disable the unit form control.
*/
@Input() set unitKey(value: string) {
if (value) {
this.form?.get('orgUnit.uid').setValue(value);
this.form?.get('orgUnit')?.disable();
}
}
units$: Observable<B2BUnitNode[]> = this.unitService.getActiveUnitList().pipe(
tap((units) => {
if (units.length === 1) {
this.form?.get('orgUnit.uid').setValue(units[0]?.id);
}
})
);
titles$: Observable<Title[]> = this.userService.getTitles();
availableRoles: B2BUserRole[] = this.b2bUserService.getAllRoles();
constructor(
protected itemService: ItemService<B2BUser>,
protected unitService: OrgUnitService,
protected userService: UserService,
protected b2bUserService: B2BUserService
) {}
ngOnInit(): void {
this.unitService.loadList();
}
updateRoles(event: MouseEvent) {
const { checked, value } = event.target as HTMLInputElement;
if (checked) {
this.roles.push(new FormControl(value));
} else {
this.roles.removeAt(this.roles.value.indexOf(value));
}
}
get roles(): FormArray {
return this.form.get('roles') as FormArray;
}
get isAssignedToApprovers(): FormControl {
return this.form.get('isAssignedToApprovers') as FormControl;
}
}
<cx-org-form i18nRoot="orgUser">
<ng-container main *ngIf="form" [formGroup]="form">
<label>
<span class="label-content required">{{
'orgUser.title' | cxTranslate
}}</span>
<ng-select
formControlName="titleCode"
[searchable]="false"
[clearable]="false"
[items]="titles$ | async"
bindLabel="name"
bindValue="code"
appendTo="cx-org-list"
[placeholder]="'orgUser.title' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('titleCode')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgUser.firstName' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
required
placeholder="{{ 'orgUser.firstName' | cxTranslate }}"
formControlName="firstName"
/>
<cx-form-errors [control]="form.get('firstName')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgUser.lastName' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
required
placeholder="{{ 'orgUser.lastName' | cxTranslate }}"
formControlName="lastName"
/>
<cx-form-errors [control]="form.get('lastName')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgUser.email' | cxTranslate
}}</span>
<input
class="form-control"
type="email"
required
placeholder="{{ 'orgUser.email' | cxTranslate }}"
formControlName="email"
/>
<cx-form-errors [control]="form.get('email')"></cx-form-errors>
</label>
<fieldset aria-required="true" class="full-width" formArrayName="roles">
<legend class="label-content required">
{{ 'orgUser.roles' | cxTranslate }}
</legend>
<label
class="form-check"
*ngFor="let role of availableRoles; let i = index"
>
<input
type="checkbox"
class="form-check-input"
[value]="role"
[checked]="roles?.value?.includes(role)"
(change)="updateRoles($event)"
[disabled]="form?.status === 'DISABLED'"
/>
<span class="form-check-label">
{{ 'organization.userRoles.' + role | cxTranslate }}
</span>
</label>
</fieldset>
<label aria-required="true" [formGroup]="form.get('orgUnit')">
<span class="label-content required">{{
'orgUser.orgUnit' | cxTranslate
}}</span>
<ng-select
formControlName="uid"
[searchable]="true"
[clearable]="false"
[items]="units$ | async"
bindLabel="name"
bindValue="id"
appendTo="cx-org-list"
[placeholder]="'orgUser.orgUnit' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('orgUnit.uid')"></cx-form-errors>
</label>
<div *ngIf="isAssignedToApprovers" class="full-width">
<label class="form-check">
<input
type="checkbox"
class="form-check-input"
formControlName="isAssignedToApprovers"
/>
<span class="form-check-label">{{
'orgUser.assignApprover' | cxTranslate
}}</span>
</label>
</div>
</ng-container>
</cx-org-form>
Legend
Html element with directive