File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| host |
{
} |
| providers |
{
provide: ItemService, useExisting: PermissionItemService,
}
{
provide: CurrentItemService, useExisting: CurrentPermissionService,
}
|
| selector |
cx-org-permission-form |
| templateUrl |
./permission-form.component.html |
|
currencies$
|
Type : Observable<Currency[]>
|
Default value : this.currencyService.getAll().pipe(
tap((currency) => {
if (currency.length === 1) {
this.form?.get('currency.isocode')?.setValue(currency[0]?.isocode);
}
})
)
|
|
|
|
form
|
Type : FormGroup
|
Default value : this.itemService.getForm()
|
|
|
|
periods
|
Default value : Object.keys(Period)
|
|
|
|
types$
|
Type : Observable<OrderApprovalPermissionType[]>
|
Default value : this.permissionService.getTypes()
|
|
|
|
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 { FormGroup } from '@angular/forms';
import {
Currency,
CurrencyService,
OrderApprovalPermissionType,
} from '@spartacus/core';
import {
B2BUnitNode,
OrgUnitService,
Period,
Permission,
PermissionService,
} 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 { CurrentPermissionService } from '../services/current-permission.service';
import { PermissionItemService } from '../services/permission-item.service';
@Component({
selector: 'cx-org-permission-form',
templateUrl: './permission-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: PermissionItemService,
},
{
provide: CurrentItemService,
useExisting: CurrentPermissionService,
},
],
})
export class PermissionFormComponent implements OnInit {
form: FormGroup = this.itemService.getForm();
units$: Observable<B2BUnitNode[]> = this.unitService.getActiveUnitList().pipe(
tap((units) => {
if (units.length === 1) {
this.form?.get('orgUnit.uid')?.setValue(units[0]?.id);
}
})
);
currencies$: Observable<Currency[]> = this.currencyService.getAll().pipe(
tap((currency) => {
if (currency.length === 1) {
this.form?.get('currency.isocode')?.setValue(currency[0]?.isocode);
}
})
);
types$: Observable<OrderApprovalPermissionType[]> =
this.permissionService.getTypes();
periods = Object.keys(Period);
constructor(
protected itemService: ItemService<Permission>,
protected unitService: OrgUnitService,
protected currencyService: CurrencyService,
protected permissionService: PermissionService
) {}
ngOnInit(): void {
this.unitService.loadList();
}
}
<cx-org-form i18nRoot="orgPurchaseLimit">
<ng-container *ngIf="form" [formGroup]="form" main>
<label>
<span class="label-content required">{{
'orgPurchaseLimit.code' | cxTranslate
}}</span>
<input
class="form-control"
type="text"
required
placeholder="{{ 'orgPurchaseLimit.code' | cxTranslate }}"
formControlName="code"
/>
<cx-form-errors [control]="form.get('code')"></cx-form-errors>
</label>
<label
*ngIf="(types$ | async)?.length"
aria-required="true"
[formGroup]="form.get('orderApprovalPermissionType')"
>
<span class="label-content required">{{
'orgPurchaseLimit.orderApprovalPermissionType' | cxTranslate
}}</span>
<ng-select
formControlName="code"
[searchable]="false"
[clearable]="false"
[items]="types$ | async"
bindLabel="name"
bindValue="code"
[readonly]="form.disabled"
appendTo="cx-org-list"
[placeholder]="
'orgPurchaseLimit.orderApprovalPermissionType' | cxTranslate
"
>
</ng-select>
<cx-form-errors
[control]="form.get('orderApprovalPermissionType.code')"
></cx-form-errors>
</label>
<label aria-required="true" *ngIf="form.get('periodRange')">
<span class="label-content required">{{
'orgPurchaseLimit.periodRange' | cxTranslate
}}</span>
<ng-select
formControlName="periodRange"
[searchable]="false"
[clearable]="false"
[items]="periods"
appendTo="cx-org-list"
[placeholder]="'orgPurchaseLimit.periodRange' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('periodRange')"></cx-form-errors>
</label>
<label
aria-required="true"
*ngIf="form.get('currency')"
[formGroup]="form.get('currency')"
>
<span class="label-content required">{{
'orgPurchaseLimit.currency' | cxTranslate
}}</span>
<ng-select
*ngIf="currencies$ | async as currencies"
formControlName="isocode"
[searchable]="false"
[clearable]="false"
[items]="currencies"
bindLabel="name"
bindValue="isocode"
[placeholder]="'orgPurchaseLimit.currency' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('currency.isocode')"></cx-form-errors>
</label>
<label *ngIf="form.get('threshold')">
<span class="label-content required">{{
'orgPurchaseLimit.threshold' | cxTranslate
}}</span>
<input
class="form-control"
type="number"
required
placeholder="{{ 'orgPurchaseLimit.threshold' | cxTranslate }}"
formControlName="threshold"
/>
<cx-form-errors [control]="form.get('threshold')"></cx-form-errors>
</label>
<label aria-required="true" [formGroup]="form.get('orgUnit')">
<span class="label-content required">{{
'orgPurchaseLimit.orgUnit' | cxTranslate
}}</span>
<ng-select
formControlName="uid"
[searchable]="true"
[clearable]="false"
[items]="units$ | async"
bindLabel="name"
bindValue="id"
[readonly]="form.get('orgUnit').disabled"
appendTo="cx-org-list"
[placeholder]="'orgPurchaseLimit.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