File
Implements
|
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()
|
|
|
|
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 { Currency, CurrencyService } from '@spartacus/core';
import {
B2BUnitNode,
Budget,
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 { BudgetItemService } from '../services/budget-item.service';
import { CurrentBudgetService } from '../services/current-budget.service';
import { createCodeForEntityName } from '../../shared/utility/entity-code';
@Component({
selector: 'cx-org-budget-form',
templateUrl: './budget-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'content-wrapper' },
providers: [
{
provide: ItemService,
useExisting: BudgetItemService,
},
{
provide: CurrentItemService,
useExisting: CurrentBudgetService,
},
],
})
export class BudgetFormComponent 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);
}
})
);
constructor(
protected itemService: ItemService<Budget>,
protected unitService: OrgUnitService,
protected currencyService: CurrencyService
) {}
ngOnInit(): void {
this.unitService.loadList();
}
createCodeWithName(name: AbstractControl, code: AbstractControl): void {
createCodeForEntityName(name, code);
}
}
<cx-org-form i18nRoot="orgBudget">
<ng-container *ngIf="form" [formGroup]="form" main>
<label>
<span class="label-content required">{{
'orgBudget.name' | cxTranslate
}}</span>
<input
type="text"
class="form-control"
required
placeholder="{{ 'orgBudget.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">{{
'orgBudget.code' | cxTranslate
}}</span>
<input
class="form-control"
type="text"
required
placeholder="{{ 'orgBudget.code' | cxTranslate }}"
formControlName="code"
/>
<cx-form-errors [control]="form.get('code')"></cx-form-errors>
</label>
<label>
<span class="label-content">{{
'orgBudget.startDate' | cxTranslate
}}</span>
<cx-date-picker
[control]="form.get('startDate')"
[max]="form.get('endDate').value"
(update)="form.get('endDate').updateValueAndValidity()"
></cx-date-picker>
</label>
<label>
<span class="label-content">{{ 'orgBudget.endDate' | cxTranslate }}</span>
<cx-date-picker
[control]="form.get('endDate')"
[min]="form.get('startDate').value"
(update)="form.get('startDate').updateValueAndValidity()"
></cx-date-picker>
</label>
<label aria-required="true" [formGroup]="form.get('currency')">
<span class="label-content required">{{
'orgBudget.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]="'orgBudget.currency' | cxTranslate"
>
</ng-select>
<cx-form-errors [control]="form.get('currency.isocode')"></cx-form-errors>
</label>
<label>
<span class="label-content">{{ 'orgBudget.amount' | cxTranslate }}</span>
<input
aria-required="true"
type="number"
class="form-control"
placeholder="{{ 'orgBudget.amount' | cxTranslate }}"
formControlName="budget"
min="0"
/>
<cx-form-errors [control]="form.get('budget')"></cx-form-errors>
</label>
<label
aria-required="true"
*ngIf="units$ | async as units"
[formGroup]="form.get('orgUnit')"
>
<span class="label-content required">{{
'orgBudget.businessUnits' | cxTranslate
}}</span>
<ng-select
formControlName="uid"
[searchable]="true"
[clearable]="false"
[items]="units"
bindLabel="name"
bindValue="id"
[readonly]="form.get('orgUnit.uid').disabled"
appendTo="cx-org-list"
[placeholder]="'orgBudget.businessUnits' | 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