File

feature-libs/organization/administration/components/cost-center/form/cost-center-form.component.ts

Metadata

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

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(itemService: ItemService<CostCenter>, unitService: OrgUnitService, currencyService: CurrencyService)
Parameters :
Name Type Optional
itemService ItemService<CostCenter> No
unitService OrgUnitService No
currencyService CurrencyService No

Inputs

unitKey
Type : string

Initialize the business unit for the cost center.

If there's a unit provided, we disable the form control.

Methods

createCodeWithName
createCodeWithName(name: AbstractControl, code: AbstractControl)
Parameters :
Name Type Optional
name AbstractControl No
code AbstractControl No
Returns : void

Properties

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('unit.uid')?.setValue(units[0]?.id); } }) )

Accessors

unitKey
setunitKey(value: string)

Initialize the business unit for the cost center.

If there's a unit provided, we disable the form control.

Parameters :
Name Type Optional
value string No
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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""