File

feature-libs/organization/administration/components/unit/form/unit-form.component.ts

Implements

OnInit

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

Constructor

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

Inputs

createChildUnit
Type : boolean
Default value : false
i18nRoot
Type : string
Default value : 'orgUnit'

Methods

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

Properties

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
Component
Html element with directive

result-matching ""

    No results matching ""