feature-libs/organization/administration/components/cost-center/form/cost-center-form.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| host | { |
| providers |
{
provide: ItemService, useExisting: CostCenterItemService,
}
{
provide: CurrentItemService, useExisting: CurrentCostCenterService,
}
|
| selector | cx-org-cost-center-form |
| templateUrl | ./cost-center-form.component.html |
Properties |
Methods |
Inputs |
Accessors |
constructor(itemService: ItemService<CostCenter>, unitService: OrgUnitService, currencyService: CurrencyService)
|
||||||||||||
|
Parameters :
|
| unitKey | |
Type : string
|
|
|
Initialize the business unit for the cost center. If there's a unit provided, we disable the form control. |
|
| createCodeWithName | |||||||||
createCodeWithName(name: AbstractControl, code: AbstractControl)
|
|||||||||
|
Parameters :
Returns :
void
|
| form |
Type : FormGroup
|
Default value : this.itemService.getForm()
|
| unitKey | ||||||
setunitKey(value: string)
|
||||||
|
Initialize the business unit for the cost center. If there's a unit provided, we disable the form control.
Parameters :
Returns :
void
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { AbstractControl, FormGroup } from '@angular/forms';
import { CostCenter, Currency, CurrencyService } from '@spartacus/core';
import {
B2BUnitNode,
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 { CostCenterItemService } from '../services/cost-center-item.service';
import { CurrentCostCenterService } from '../services/current-cost-center.service';
import { createCodeForEntityName } from '../../shared/utility/entity-code';
@Component({
selector: 'cx-org-cost-center-form',
templateUrl: './cost-center-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: CostCenterItemService,
},
{
provide: CurrentItemService,
useExisting: CurrentCostCenterService,
},
],
})
export class CostCenterFormComponent {
form: FormGroup = this.itemService.getForm();
/**
* Initialize the business unit for the cost center.
*
* If there's a unit provided, we disable the form control.
*/
@Input() set unitKey(value: string) {
if (value) {
this.form?.get('unit.uid').setValue(value);
this.form?.get('unit')?.disable();
}
}
units$: Observable<B2BUnitNode[]> = this.unitService.getActiveUnitList().pipe(
tap((units) => {
if (units.length === 1) {
this.form?.get('unit.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);
}
})
);
constructor(
protected itemService: ItemService<CostCenter>,
protected unitService: OrgUnitService,
protected currencyService: CurrencyService
) {}
createCodeWithName(name: AbstractControl, code: AbstractControl): void {
createCodeForEntityName(name, code);
}
}
<cx-org-form i18nRoot="orgCostCenter">
<ng-container *ngIf="form" [formGroup]="form" main>
<label>
<span class="label-content required">{{
'orgCostCenter.name' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
required
placeholder="{{ 'orgCostCenter.name' | cxTranslate }}"
formControlName="name"
(blur)="createCodeWithName(form.get('name'), form.get('code'))"
/>
<cx-form-errors [control]="form.get('name')"></cx-form-errors>
</label>
<label>
<span class="label-content required">{{
'orgCostCenter.code' | cxTranslate
}}</span>
<input
class="form-control"
type="text"
required
placeholder="{{ 'orgCostCenter.code' | cxTranslate }}"
formControlName="code"
/>
<cx-form-errors [control]="form.get('code')"></cx-form-errors>
</label>
<label aria-required="true" formGroupName="currency">
<span class="label-content required">{{
'orgCostCenter.currency' | cxTranslate
}}</span>
<ng-select
formControlName="isocode"
[searchable]="false"
[clearable]="false"
[items]="currencies$ | async"
bindLabel="name"
bindValue="isocode"
[class.invalid]="form.get('currency.isocode').invalid"
appendTo="cx-org-list"
[placeholder]="'orgCostCenter.currency' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('currency.isocode')"></cx-form-errors>
</label>
<label aria-required="true" [formGroup]="form.get('unit')">
<span class="label-content required">{{
'orgCostCenter.unit' | cxTranslate
}}</span>
<ng-select
formControlName="uid"
[searchable]="true"
[clearable]="false"
[items]="units$ | async"
bindLabel="name"
bindValue="id"
[readonly]="form.get('unit.uid').disabled"
appendTo="cx-org-list"
[placeholder]="'orgCostCenter.unit' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('unit.uid')"></cx-form-errors>
</label>
</ng-container>
</cx-org-form>