File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| providers |
{
provide: ItemService, useExisting: UserGroupItemService,
}
|
| selector |
cx-org-user-group-form |
| templateUrl |
./user-group-form.component.html |
|
form
|
Type : FormGroup
|
Default value : this.itemService.getForm()
|
|
|
|
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);
}
})
)
|
|
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { AbstractControl, FormGroup } from '@angular/forms';
import {
B2BUnitNode,
OrgUnitService,
UserGroup,
} from '@spartacus/organization/administration/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ItemService } from '../../shared/item.service';
import { UserGroupItemService } from '../services/user-group-item.service';
import { createCodeForEntityName } from '../../shared/utility/entity-code';
@Component({
selector: 'cx-org-user-group-form',
templateUrl: './user-group-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: UserGroupItemService,
},
],
})
export class UserGroupFormComponent implements OnInit {
form: FormGroup = this.itemService.getForm();
// getList ???
units$: Observable<B2BUnitNode[]> = this.unitService.getActiveUnitList().pipe(
tap((units) => {
if (units.length === 1) {
this.form?.get('orgUnit.uid')?.setValue(units[0]?.id);
}
})
);
constructor(
protected itemService: ItemService<UserGroup>,
protected unitService: OrgUnitService
) {}
ngOnInit(): void {
this.unitService.loadList();
}
createUidWithName(name: AbstractControl, code: AbstractControl): void {
createCodeForEntityName(name, code);
}
}
<cx-org-form i18nRoot="orgUserGroup">
<ng-container *ngIf="form" [formGroup]="form" main>
<label>
<span class="label-content required">{{
'orgUserGroup.name' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
required
placeholder="{{ 'orgUserGroup.name' | cxTranslate }}"
formControlName="name"
(blur)="createUidWithName(form.get('name'), form.get('uid'))"
/>
<cx-form-errors [control]="form.get('name')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgUserGroup.uid' | cxTranslate
}}</span>
<input
class="form-control"
type="text"
required
placeholder="{{ 'orgUserGroup.uid' | cxTranslate }}"
formControlName="uid"
/>
<cx-form-errors [control]="form.get('uid')"></cx-form-errors>
</label>
<label aria-required="true" [formGroup]="form.get('orgUnit')">
<span class="label-content required">{{
'orgUserGroup.orgUnit' | cxTranslate
}}</span>
<ng-select
formControlName="uid"
[searchable]="true"
[clearable]="false"
[items]="units$ | async"
bindLabel="name"
bindValue="id"
[readonly]="form.get('orgUnit.uid').disabled"
appendTo="cx-org-list"
[placeholder]="'orgUserGroup.orgUnit' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('orgUnit.uid')"></cx-form-errors>
</label>
</ng-container>
</cx-org-form>
Legend
Html element with directive