File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{ } |
| providers |
{
provide: ItemService, useExisting: UnitItemService,
}
{
provide: CurrentItemService, useExisting: CurrentUnitService,
}
|
| selector |
cx-org-unit-form |
| templateUrl |
./unit-form.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
createChildUnit
|
Type : boolean
|
Default value : false
|
|
|
|
i18nRoot
|
Type : string
|
Default value : 'orgUnit'
|
|
|
|
approvalProcess$
|
Type : Observable<B2BApprovalProcess[]>
|
Default value : this.unitService
.getApprovalProcesses()
.pipe(filter((items) => items?.length > 0))
|
|
|
|
createChildUnit
|
Default value : false
|
Decorators :
@Input()
|
|
|
|
form
|
Type : FormGroup
|
Default value : this.itemService.getForm()
|
|
|
|
i18nRoot
|
Type : string
|
Default value : 'orgUnit'
|
Decorators :
@Input()
|
|
|
|
units$
|
Type : Observable<B2BUnitNode[]>
|
Default value : this.itemService.unit$.pipe(
tap((unit) => {
this.form.get('parentOrgUnit.uid')?.setValue(unit);
if (this.createChildUnit) {
this.form.get('parentOrgUnit')?.disable();
}
}),
switchMap(() =>
this.unitService.getActiveUnitList().pipe(
map((units) =>
units.filter((unit) => unit.id !== this.form?.value.uid)
),
tap((units) => {
if (units.length === 1) {
this.form?.get('parentOrgUnit.uid')?.setValue(units[0]?.id);
}
})
)
)
)
|
|
|
import {
ChangeDetectionStrategy,
Component,
Input,
OnInit,
} from '@angular/core';
import { FormGroup } from '@angular/forms';
import { B2BApprovalProcess, B2BUnit } from '@spartacus/core';
import {
B2BUnitNode,
OrgUnitService,
} from '@spartacus/organization/administration/core';
import { Observable } from 'rxjs';
import { filter, map, switchMap, tap } from 'rxjs/operators';
import { CurrentItemService } from '../../shared/current-item.service';
import { ItemService } from '../../shared/item.service';
import { CurrentUnitService } from '../services/current-unit.service';
import { UnitItemService } from '../services/unit-item.service';
import { AbstractControl } from '@angular/forms';
import { createCodeForEntityName } from '../../shared/utility/entity-code';
@Component({
selector: 'cx-org-unit-form',
templateUrl: './unit-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: UnitItemService,
},
{
provide: CurrentItemService,
useExisting: CurrentUnitService,
},
],
})
export class UnitFormComponent implements OnInit {
@Input() i18nRoot = 'orgUnit';
@Input() createChildUnit = false;
form: FormGroup = this.itemService.getForm();
units$: Observable<B2BUnitNode[]> = this.itemService.unit$.pipe(
tap((unit) => {
this.form.get('parentOrgUnit.uid')?.setValue(unit);
if (this.createChildUnit) {
this.form.get('parentOrgUnit')?.disable();
}
}),
switchMap(() =>
this.unitService.getActiveUnitList().pipe(
map((units) =>
units.filter((unit) => unit.id !== this.form?.value.uid)
),
tap((units) => {
if (units.length === 1) {
this.form?.get('parentOrgUnit.uid')?.setValue(units[0]?.id);
}
})
)
)
);
approvalProcess$: Observable<B2BApprovalProcess[]> = this.unitService
.getApprovalProcesses()
.pipe(filter((items) => items?.length > 0));
constructor(
protected itemService: ItemService<B2BUnit>,
protected unitService: OrgUnitService
) {}
ngOnInit(): void {
this.unitService.loadList();
}
createUidWithName(name: AbstractControl, code: AbstractControl): void {
createCodeForEntityName(name, code);
}
}
<cx-org-form [i18nRoot]="i18nRoot">
<ng-container *ngIf="form" [formGroup]="form" main>
<label>
<span class="label-content required">{{
'orgUnit.name' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
required
placeholder="{{ 'orgUnit.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">{{
'orgUnit.uid' | cxTranslate
}}</span>
<input
class="form-control"
type="text"
required
placeholder="{{ 'orgUnit.uid' | cxTranslate }}"
formControlName="uid"
/>
<cx-form-errors [control]="form.get('uid')"></cx-form-errors>
</label>
<label
formGroupName="approvalProcess"
class="full-width"
aria-required="true"
>
<span class="label-content required">{{
'orgUnit.approvalProcess' | cxTranslate
}}</span>
<ng-select
formControlName="code"
[searchable]="false"
[items]="approvalProcess$ | async"
bindLabel="name"
bindValue="code"
appendTo="cx-org-list"
[placeholder]="'orgUnit.approvalProcess' | cxTranslate"
>
</ng-select>
<cx-form-errors
[control]="form.get('approvalProcess.code')"
></cx-form-errors>
</label>
<label
*ngIf="form.get('parentOrgUnit')"
aria-required="true"
formGroupName="parentOrgUnit"
>
<span class="label-content required">{{
'orgUnit.form.parentOrgUnit' | cxTranslate
}}</span>
<ng-select
formControlName="uid"
[searchable]="true"
[clearable]="false"
[items]="units$ | async"
bindLabel="name"
bindValue="id"
appendTo="cx-org-list"
[placeholder]="'orgUnit.form.parentOrgUnit' | cxTranslate"
>
</ng-select>
<cx-form-errors
[control]="form.get('parentOrgUnit.uid')"
></cx-form-errors>
</label>
</ng-container>
</cx-org-form>
Legend
Html element with directive