Criando os serviços de reserva e atualizando o Order Hub para usar os novos arquivos

Aprenda a criar os serviços create-reservation e reservation-action e atualize o Order Hub para usar os novos arquivos. Nesta lição, você faz várias mudanças em seus arquivos, incluindo a cópia de mudanças de arquivo exportadas do IBM Carbon UI Builder

Procedimento

Crie o serviço e atualize os arquivos do Order Hub para usar os novos arquivos.

Crie um serviço para chamar a API Create reservation (Criar reserva) do site Sterling™ Intelligent Promising Inventory Visibility para criar uma reserva.

Acesse src-custom/app/features/create-reservation e crie uma pasta chamada serviços..
Crie um serviço em src-custom/app/features/create-reservation/services.
Execute o seguinte comando:
```
ng g s create-reservation
```
Isso criará um novo serviço sob a pasta services Esse serviço pode ser usado para incluir chamadas da API (interface de programação de aplicativos).

Copiar o conteúdo a seguir no arquivo create-reservation.service.ts :

import { Injectable } from '@angular/core';
import { BucCommBEHttpWrapperService } from '@buc/svc-angular';
import { Observable, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CreateReservationService {
  private resourceDomain: string = 'inventory';
  private options: any;
  private domain: any;
  public reservationRef: any;
  public itemData: any

  constructor(private http: BucCommBEHttpWrapperService) {
    this.domain = BucCommBEHttpWrapperService.getPathPrefix(this.resourceDomain);
    this.options = BucCommBEHttpWrapperService.getRequestOptions(this.resourceDomain);
  }

  createReservation(tenantId, input): Observable<any> {
    if (tenantId === undefined || tenantId === null || tenantId === '') {
      return throwError(new Error('Missing required  parameter: tenantId'));
    }

    let path = '/{tenant}/v1/reservations';
    path = path.replace('{tenant}', tenantId);
    const url = this.domain + path;
    const obsToReturn$ = this.http.post(url, this.resourceDomain, null, input, this.options);
    return obsToReturn$;
  }

  getReservation(tenantId, referenceId): Observable<any> {
    if (tenantId === undefined || tenantId === null || tenantId === '') {
      return throwError(new Error('Missing required  parameter: tenantId'));
    }
    let path = '/{tenant}/v1/reservations?reference={referenceId}';
    path = path.replace('{tenant}', tenantId).replace('{referenceId}', referenceId);
    const url = this.domain + path;
    const obsToReturn$ = this.http.get(url, this.resourceDomain, null, this.options);
    return obsToReturn$;
  }

}

Crie um serviço de ação de reserva

Crie outro serviço na mesma pasta services .
Execute o seguinte comando:
```
ng g s reservation-action
```
Isso criará um novo serviço sob a pasta services Este serviço pode ser usado para incluir todas as ações do menu overflow

Copie o conteúdo a seguir no arquivo reservation-action.service.ts :

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BucNotificationService, ActionProcessorService } from '@buc/common-components';
import { TranslateService } from '@ngx-translate/core';
import { CustomConstants } from '../custom-constants';
import { map } from 'rxjs/operators';
import { ActionParams } from '@buc/inventory-shared/lib/actions/paramtypes';
import { CreateReservationService } from './create-reservation.service';

@Injectable({
  providedIn: 'root'
})
export class ReservationActionService {

  constructor(    
    public actionSvc: ActionProcessorService,
    public translate: TranslateService,
    public bucNotificationService: BucNotificationService,
    public router: Router,
    public createReservationSvc: CreateReservationService) { 
      actionSvc.select<ActionParams>(CustomConstants.ACTION_IDS_CREATE_RESERVATION).pipe(
        map(res => {
          this.executeActionDetails(res.params);
        })
      ).subscribe();
  }

  async executeActionDetails(params: ActionParams) {
    this.createReservationSvc.itemData = params.data?.item;
  }
}

Inclua o serviço de ação de reserva no código do Order Hub:

Abra o arquivo src-custom/app/app-customization.impl.ts para edição.

Atualize a matriz de importações para incluir módulos para incluir o serviço reservation-action :

           BucActionsModule.forChild(
            [ 
              {
              name: CustomConstants.ACTION_IDS_CREATE_RESERVATION,
              action: ReservationActionService
            }
            ]
          )

Como resultado, a matriz de importações deve ter o seguinte código:

    static readonly imports = [
        RouterModule.forChild(customRoutes),
           BucCommonComponentsModule,
           BucFeatureComponentsModule,
           BucIconsModule,
           SharedModule,
           BucActionsModule.forChild(
            [ 
              {
              name: CustomConstants.ACTION_IDS_CREATE_RESERVATION,
              action: ReservationActionService
            }
            ]
          )
  ];

Atualize a importação com o seguinte código:

import { CustomConstants } from './features/create-reservation/custom-constants';
import { ReservationActionService } from './features/create-reservation/services/reservation-action.service';
import { BucActionsModule } from '@buc/common-components';

Inclua uma nova ação para a reserva de criação:

Abra o arquivo src-custom/app/features/search/inventory-table/inventory-table.component.ts para edição.

Inclua a importação a seguir:

import { CustomConstants } from '../../create-reservation/custom-constants';

Inclua o método a seguir no final:

    private _setCreateReservation(itemData) {
      this.actionService.dispatch<ActionParams>(
        CustomConstants.ACTION_IDS_CREATE_RESERVATION,
        {
          searchCriteria: this.searchCriteria,
          data: itemData,
          pageNumber: 1,
          initialLoad: true,
          dataMap: [itemData],
          ctxSvc: this.ctxSvc,
        }
      );
    }

No método onOverflowMenuClick , inclua a seguinte constante na matriz de itens:
```
CustomConstants.ACTION_CREATE_RESERVATION
```

Como resultado, o método onOverflowMenuClick deve ser semelhante ao código a seguir:

  onOverflowMenuClick(item: any) {
    this.itemData = item.key;
    this.overflowMenuId = item.key.itemDescriptiveKey;
    const items = [
      Constants.ACTION_SET_SAFETY_STOCKS,
      Constants.ACTION_SET_FULFILLMENT_OPTIONS,
      Constants.ACTION_TRANSFER_INVENTORY,
      Constants.ACTION_ADJUST_INVENTORY,
      CustomConstants.ACTION_CREATE_RESERVATION
    ];
    if (item.key.type.bundle) {
      this.removeOverflowMenuActions(items);
    } else {
      this._setOverflowMenu(item.key.type.modelItem);

    }
  }

No método onOverflowMenuActionSelected , inclua um novo caso:

    case CustomConstants.ACTION_CREATE_RESERVATION:
      this._setCreateReservation({ item: this.itemData });
      break;

Como resultado, o método onOverflowMenuActionSelected deve ser semelhante ao código a seguir:

  protected onOverflowMenuActionSelected(id: string) {
    switch (id) {
    case Constants.ACTION_IDS_VIEW_DETAILS:
      this._details({ item: this.itemData });
      break;
    case Constants.ACTION_SET_SAFETY_STOCKS:
      this._setSafetyStockMultiple();
      break;
    case Constants.ACTION_SET_FULFILLMENT_OPTIONS:
      this._setFulfillmentOptionsMultiple();
      break;
    case Constants.ACTION_TRANSFER_INVENTORY:
      this._moveInventory({ data: { itemData: this.itemData } });
      break;
    case Constants.ACTION_ADJUST_INVENTORY:
      this._setAdjustInventoryMultiple();
      break;
    case CustomConstants.ACTION_CREATE_RESERVATION:
      this._setCreateReservation({ item: this.itemData });
      break;
      
    }
   
  }

No método _setOverflowMenu , inclua novo ID de ação na matriz actionIds :
```
CustomConstants.ACTION_CREATE_RESERVATION
```

Como resultado, o método _setOverflowMenu deve ser semelhante ao código a seguir:

  private _setOverflowMenu(modelItemSelected = false) {
    this.getActionResourceIds();

    let actionIds = [];
    if (this.searchCriteria.filterCriteria.locationType !== Constants.VALUE_CONSIDERALLNODES) {
      actionIds = [
        Constants.ACTION_IDS_VIEW_DETAILS,
        Constants.ACTION_SET_SAFETY_STOCKS,
        Constants.ACTION_SET_FULFILLMENT_OPTIONS,
        Constants.ACTION_TRANSFER_INVENTORY,
        CustomConstants.ACTION_CREATE_RESERVATION
      ];
      if (!modelItemSelected) {
        actionIds.splice(1, 0, Constants.ACTION_ADJUST_INVENTORY);
      }
      if (this.isSafetyStockRuleEnabled) {
        const index = actionIds.indexOf(Constants.ACTION_SET_SAFETY_STOCKS);
        if (index !== -1) {
          actionIds.splice(index, 1);
        }
      }
    } else {
      actionIds = [Constants.ACTION_IDS_VIEW_DETAILS];
    }
    const tableConfiguration = this.getTableConfiguration();
    tableConfiguration.setActiveOverflowMenuActions(actionIds);
    this.setOverflowMenuResourceIds(this.actionResourceIds, actionIds);
    this.overflowMenu = tableConfiguration.getOverflowMenuActions();
  }

Copiar arquivos do IBM Carbon UI Builder:

Nota: pode haver pequenas diferenças entre o HTML de amostra fornecido neste tutorial e o HTML exportado do IBM Carbon UI Builder. Isso é esperado porque o IBM Carbon UI Builder é uma ferramenta on-line que é atualizada regularmente.

Acesse src-custom/app/features/create-reservation e crie uma pasta chamada componentes..
Crie os seguintes arquivos dentro da pasta components :
- create-reservation-form.component.ts
- create-reservation-form.component.html
- create-reservation-form.component.scss
- create-reservation-form.module.ts
Abra seu formulário no IBM Carbon UI Builder e clique em Exportar. Assegure-se de que a guia Angular esteja selecionada.
Copie o conteúdo de src/app/components/create-reservation-form/create-reservation-form.component.ts do código do IBM Carbon UI Builder no arquivo create-reservation-form.component.ts recém-criado.
Abra o arquivo create-reservation-form.component.html recém-criado para edição.

Inclua o código a seguir:

<form [formGroup]="createReservationForm">
</form>

Após a primeira linha do código recém-incluído, copie o conteúdo de src/app/components/create-reservation-form/create-reservation-form.component.html do código do IBM Carbon UI Builder no arquivo.

Como o módulo de formulários reativos é usado, um formGroup é necessário para o envio de formulário e formControlName é necessário para cada campo

Portanto:

Inclua o seguinte formControlName para cada campo: formControlName = reference para reference campos de entrada.
Depois de incluir o formControlName , ele deve ser semelhante ao fragmento a seguir:
```
<input ibmText name="reference" formControlName="reference" placeholder=""
/>
```
Da mesma forma, um formControlName é necessário para cada campo no formulário.
Substitua todos os parâmetros (event) no arquivo por ($event)..

Fazer isso resolve os seguintes erros: Property 'value' does not exist on type EventTarget in TypeScript.
Altere o evento (selected) do nó de remessa e do grupo de distribuição conforme a seguir em cada um de seus fragmentos ibm-dropdown :
Na lista suspensa do nó de remessa, denotada pelo fragmento ibm-dropdown com formControlName="shippingNode", altere o evento (selected) para:
```
(selected)="onSelectShippingNode($event)"
```
Na lista suspensa do grupo de distribuição, denotada pelo fragmento ibm-dropdown com formControlName="dg", altere o evento (selected) para:
```
(selected)="onSelectDistributionGroup($event)"
```
Esses métodos são necessários para capturar eventos quando o nó de remessa ou o menu suspenso do grupo de distribuição é selecionado

Por exemplo:

Depois de incluir todos os valores de controle, o arquivo create-reservation-form.component.html é semelhante ao código a seguir:

<form [formGroup]="createReservationForm">
    <ibm-accordion [align]="accordion165433494446278754849833236715917Align">
        <ibm-accordion-item
            [title]="accordionItem36327672493936585592059716298563Title"
            (selected)="accordionItem36327672493936585592059716298563Selected.emit($event)"
        >
            <div ibmGrid>
                <div ibmRow>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Reference
                            <input ibmText name="reference" formControlName="reference" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Segment type
                            <input ibmText name="segmentType"formControlName="segmentType" placeholder="" />
                        </ibm-label>
                    </div>
                </div>
                <div ibmRow class="margin-top">
                    <div ibmCol>
                        <ibm-label helperText="">
                            Time to expire
                            <input ibmText name="timeToExpire" formControlName="timeToExpire"  placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-dropdown
                            [label]="demandTypeLabel"
                            [helperText]="demandTypeHelperText"
                            [placeholder]="demandTypePlaceholder"
                            [theme]="demandTypeTheme"
                            [invalid]="demandTypeInvalid"
                            [invalidText]="demandTypeInvalidText"
                            [size]="demandTypeSize"
                            [warn]="demandTypeWarn"
                            [warnText]="demandTypeWarnText"
                            [disabled]="demandTypeDisabled"
                            [dropUp]="demandTypeDropUp"
                            [selectionFeedback]="demandTypeSelectionFeedback"
                            [type]="demandTypeType"
                            (selected)="demandTypeSelected.emit($event)"
                            (close)="demandTypeClose.emit($event)"
                            formControlName="demandType"
                        >
                            <ibm-dropdown-list [items]="demandTypeItems"></ibm-dropdown-list>
                        </ibm-dropdown>
                    </div>
                </div>
                <div ibmRow class="margin-top">
                    <div ibmCol>
                        <ibm-label helperText="">
                            Segment
                            <input ibmText name="segment" formControlName="segment" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-checkbox
                            name="considerSafetyStock"
                            id="considerSafetyStock"
                            [(checked)]="considerSafetyStockChecked"
                            (checkedChange)="considerSafetyStockCheckedChange.emit($event)"
                            class="checkbox-margin"
                            formControlName="considerSafetyStock"
                        >
                            Consider safety stock
                        </ibm-checkbox>
                    </div>
                </div>
                <div ibmRow class="margin-top">
                    <div ibmCol>
                        <ibm-label helperText="">
                            Line Id
                            <input ibmText name="lineId" formControlName="lineId" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Item Id
                            <input ibmText name="itemId" formControlName="itemId" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Unit of measure
                            <input ibmText name="unitOfMeasure" formControlName="unitOfMeasure" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Product class
                            <input ibmText name="productClass" formControlName="productClass"  placeholder="" />
                        </ibm-label>
                    </div>
                </div>
                <div ibmRow class="margin-top">
                    <div ibmCol>
                        <ibm-label helperText="">
                            Delivery method
                            <input ibmText name="deliveryMethod" formControlName="deliveryMethod" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-number
                            [helperText]="quantityHelperText"
                            name="quantity"
                            [value]="quantityValue"
                            (change)="quantityValueChange.emit($event.value)"
                            [label]="quantityLabel"
                            [theme]="quantityTheme"
                            [min]="quantityMin"
                            [max]="quantityMax"
                            [step]="quantityStep"
                            [invalid]="quantityInvalid"
                            [invalidText]="quantityInvalidText"
                            [warn]="quantityWarn"
                            [warnText]="quantityWarnText"
                            [size]="quantitySize"
                            [disabled]="quantityDisabled"
                            formControlName="quantity"
                        >
                        </ibm-number>
                    </div>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Segment
                            <input ibmText name="lineSegment" formControlName="lineSegment" placeholder="" />
                        </ibm-label>
                    </div>
                    <div ibmCol>
                        <ibm-label helperText="">
                            Segment Type
                            <input ibmText name="lineSegmentType" formControlName="lineSegmentType" placeholder="" />
                        </ibm-label>
                    </div>
                </div>
                <div ibmRow class="margin-top">
                    <div ibmCol>
                        <ibm-dropdown
                            [label]="shippingNodeLabel"
                            [helperText]="shippingNodeHelperText"
                            [placeholder]="shippingNodePlaceholder"
                            [theme]="shippingNodeTheme"
                            [invalid]="shippingNodeInvalid"
                            [invalidText]="shippingNodeInvalidText"
                            [size]="shippingNodeSize"
                            [warn]="shippingNodeWarn"
                            [warnText]="shippingNodeWarnText"
                            [disabled]="shippingNodeDisabled"
                            [dropUp]="shippingNodeDropUp"
                            [selectionFeedback]="shippingNodeSelectionFeedback"
                            [type]="shippingNodeType"
                            (selected)="onSelectShippingNode($event)"
                            (close)="shippingNodeClose.emit($event)"
                            formControlName="shippingNode"
                        >
                            <ibm-dropdown-list [items]="shippingNodeItems"></ibm-dropdown-list>
                        </ibm-dropdown>
                    </div>
                    <div ibmCol>
                        <ibm-dropdown
                            [label]="dgLabel"
                            [helperText]="dgHelperText"
                            [placeholder]="dgPlaceholder"
                            [theme]="dgTheme"
                            [invalid]="dgInvalid"
                            [invalidText]="dgInvalidText"
                            [size]="dgSize"
                            [warn]="dgWarn"
                            [warnText]="dgWarnText"
                            [disabled]="dgDisabled"
                            [dropUp]="dgDropUp"
                            [selectionFeedback]="dgSelectionFeedback"
                            [type]="dgType"
                            (selected)="onSelectDistributionGroup($event)"
                            (close)="dgClose.emit($event)"
                            formControlName="dg"
                        >
                            <ibm-dropdown-list [items]="dgItems"></ibm-dropdown-list>
                        </ibm-dropdown>
                    </div>
                </div>
                <div ibmRow class="margin-top">
                    <div ibmCol>
                        <button
                            ibmButton="secondary"
                            (click)="button3886839157349837322918347909375902Clicked.emit()"
                        >
                            Cancel
                        </button>
                        <button
                            ibmButton="primary"
                            (click)="onSave()"
                            class="create-btn-margin"
                        >
                            Create
                        </button>
                    </div>
                </div>
            </div>
        </ibm-accordion-item>
    </ibm-accordion>
    
    
</form>

Os valores sanfonados e os valores de botão serão diferentes do design desenvolvido. Ao copiar o código anterior:

Inclua as propriedades sanfona [align] e [title] conforme os comentários no código ao exportar o fragmento.
Assegure-se de que a propriedade do botão Criar e Excluir (clique) seja igual ao design do fragmento.

Copie o conteúdo de src/app/components/create-reservation-form/create-reservation-form.module.ts do código do IBM Carbon UI Builder no arquivo create-reservation-form.module.ts recém-criado.

Além do módulo acima, alguns módulos angulares também são necessários: FormsModule e ReactiveFormsModule.

O arquivo deve conter o seguinte código:

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import {
    AccordionModule,
    GridModule,
    InputModule,
    DropdownModule,
    CheckboxModule,
    NumberModule,
    ComboBoxModule,
    ButtonModule
} from 'carbon-components-angular';
import { CreateReservationForm } from './create-reservation-form.component';
@NgModule({
    imports: [
        AccordionModule, GridModule, InputModule, DropdownModule, CheckboxModule, NumberModule, ComboBoxModule, ButtonModule, FormsModule, ReactiveFormsModule
    ],
    declarations: [CreateReservationForm],
    exports: [CreateReservationForm]
})
export class CreateReservationFormModule { }

Copiar o conteúdo de src/app/components/create-reservation-form/create-reservation-form.component.scss do código do IBM Carbon UI Builder no arquivo create-reservation-form.component.scss recém-criado.

Abra o arquivo create-reservation-form.component.ts recém-criado para edição.

Altere o nome do seletor para 'buc-create-reservation-form'

@Component({
	selector: "buc-create-reservation-form",
	templateUrl: "./create-reservation-form.component.html",
	styleUrls: ["./create-reservation-form.component.scss"]
})

Implementar a interface OnInit neste componente. Inclua

implements
OnInit

após o nome da classe..

@Component({
	selector: "buc-create-reservation-form",
	templateUrl: "./create-reservation-form.component.html",
	styleUrls: ["./create-reservation-form.component.scss"]
})
export class CreateReservationForm implements OnInit{

Em seguida, alguns dos campos precisarão ser atualizados para que possam ser usados:

Altere @Input() quantityValue = 50; para @Input() quantityValue = 1;

Inclua novas variáveis e métodos incluindo novas variáveis após todas as declarações de variáveis:

// new variables
public validDemandTypes;
orgCode: string;
dgMap: any = {};
public tenantId;
public isCancelled: boolean;
createReservationForm: FormGroup;
private nlsMap: any = {
	'custom.LABEL_CREATE_RESERVATION': '',
	'custom.LABEL_RESERVATION_EXPIRY': '',
	'custom.ERROR_INVALID_EXPIRY': '',
	'custom.ERROR_RESERVATION': '',
	'custom.SUCCESS_RESERVATION': ''
};
constructor(
	private locCommonSvc: LocalCommonService,
	public demandService: InventoryDemandService,
	private inventoryShipNodesService: InventoryShipNodesService,
	private dgSvc: InventoryDistributionService,
	private reservationService: CreateReservationService,
	private bucNotificationService: BucNotificationService,
	private router: Router,
	private translateSvc: TranslateService
) {}
ngOnInit(): void {
	this.createReservationForm = new FormGroup({
		reference: new FormControl(),
		timeToExpire: new FormControl(),
		demandType: new FormControl([]),
		segment: new FormControl(),
		segmentType: new FormControl(),
		considerSafetyStock: new FormControl(),
		lineId: new FormControl(),
		itemId: new FormControl(),
		unitOfMeasure: new FormControl(),
		productClass: new FormControl(),
		deliveryMethod: new FormControl(),
		quantity: new FormControl(),
		lineSegment: new FormControl(),
		lineSegmentType: new FormControl(),
		shippingNode: new FormControl(),
		dg: new FormControl()
	});
	this.initialize();
	this.tenantId =
		BucSvcAngularStaticAppInfoFacadeUtil.getInventoryTenantId();
	this._initTranslations();
}
/** Fetch translations for the page */
private async _initTranslations() {
	const keys = Object.keys(this.nlsMap);
	const json = await this.translateSvc.get(keys).toPromise();
	keys.forEach(k => this.nlsMap[k] = json[k]);
}
async initialize(clearForm = false) {
	await this.loadDemandTypes();
	await this.getShipNodes();
	await this.loadDG();
}
// loading demand types
async loadDemandTypes() {
	try {
		this.validDemandTypes = await getValidDemandTypes(this.demandService);
		const data = this.validDemandTypes.map(sup => ({
			content: sup,
			selected: false,
			id: sup
		}));
		this.mapDemandTypes();
	} catch (e) {
		this.locCommonSvc.showErrorNotification('error', e.message);
	}
}
mapDemandTypes() {
	this.demandTypeItems = this.validDemandTypes.map(item => {
		return {
			content: item
		};
	});
}
// loading ship nodes
private async getShipNodes() {
	if (!this.shippingNodeItems || this.shippingNodeItems.length === 0) {
		const response = await
		this.inventoryShipNodesService.getIVShipNodesByTenantID().toPromise();
		let shippingNodes = [];
		if (response && response.length) {
			shippingNodes = response.map(item => item.shipNode);
			this.shippingNodeItems = shippingNodes.map(item => {
				return {
					content: item
				};
			});
		}
	}
}
// loading DG
async loadDG() {
	try {
		const resp = await
		this.dgSvc.getDistributionRuleListByPage(this.orgCode, 1, 999, '').toPromise();
		const list = resp.distributionGroups
			.filter(dg => (!dg.dgType || dg.dgType === 'PROD') &&
				(!dg.dgPurpose || dg.dgPurpose === 'SOURCING'))
			.map(dg => {
				const id = dg.dgId || dg.dgKey;
				this.dgMap[id] = dg;
				return {
					id,
					content: dg.dgName,
					selected: false,
					value: id
				};
			})
			.sort((a, b) =>
				a.content.toLocaleLowerCase().localeCompare(b.content.toLocaleLowerCase()));
		this.dgItems = list;
	} catch (e) {
		this.locCommonSvc.showErrorNotification('error', e.message);
	}
}
async onSave() {
	let shipNodeValue = '';
	if (this.createReservationForm.value.shippingNode &&
		this.createReservationForm.value.shippingNode.length) {
		shipNodeValue = this.createReservationForm.value.shippingNode.find(st =>
			st.selected).content;
	}
	let dgValue = '';
	if (this.createReservationForm.value.dg &&
		this.createReservationForm.value.dg.length) {
		dgValue = this.createReservationForm.value.dg.find(st =>
			st.selected).content;
	}
	let demandTypeValue = '';
	if (this.createReservationForm.value.dg &&
		this.createReservationForm.value.demandType.length) {
		demandTypeValue = this.createReservationForm.value.demandType.content;
	}
	const request = {
		reference: this.createReservationForm.value.reference,
		timeToExpire: this.createReservationForm.value.timeToExpire,
		segment: this.createReservationForm.value.segment,
		segmentType: this.createReservationForm.value.segmentType,
		demandType: this.createReservationForm.value.demandType.content,
		considerSafetyStock: this.createReservationForm.value.considerSafetyStock ?
			this.createReservationForm.value.considerSafetyStock : false,
		lines: [{
			lineId: this.createReservationForm.value.lineId,
			itemId: this.createReservationForm.value.itemId,
			unitOfMeasure: this.createReservationForm.value.unitOfMeasure,
			productClass: this.createReservationForm.value.productClass,
			deliveryMethod: this.createReservationForm.value.deliveryMethod,
			shipNode: shipNodeValue,
			distributionGroup: dgValue,
			segment: this.createReservationForm.value.lineSegment,
			segmentType: this.createReservationForm.value.lineSegmentType,
			quantity: this.createReservationForm.value.quantity
		}]
	};
	// Call reservation API here
	try {
		await this.reservationService.createReservation(this.tenantId,
			request).toPromise();
		this.showNotification('success',
			this.nlsMap['custom.SUCCESS_RESERVATION']);
	} catch (error) {
		this.showNotification('error', this.nlsMap['custom.ERROR_RESERVATION'] +
			' ' + error.error_message);
	}
}
// notification
showNotification(statusType, message) {
	const notification = new BucNotificationModel({
		statusType,
		statusContent: message
	});
	this.bucNotificationService.send([notification]);
}
onCancel() {
	this.isCancelled = true;
	this.router.navigate([Constants.RESULTS_ROUTE]);
}

Atualize a seção de importação com as seguintes linhas:

import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { BucNotificationModel, BucNotificationService } from "@buc/common-components";
import { InventoryDemandService, InventoryDistributionService,
    CommonService as LocalCommonService, 
    getValidDemandTypes,
    Constants , InventoryShipNodesService} from "@buc/inventory-shared";
import { TranslateService } from "@ngx-translate/core";
import { BucSvcAngularStaticAppInfoFacadeUtil } from '@buc/svc-angular';
import { CreateReservationService } from "../services/create-reservation.service";

Como resultado, o arquivo create-reservation-form.component.ts deve ser semelhante ao arquivo a seguir:

import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { BucNotificationModel, BucNotificationService } from "@buc/common-components";
import { InventoryDemandService, InventoryDistributionService,
    CommonService as LocalCommonService, 
    getValidDemandTypes,
    Constants , InventoryShipNodesService} from "@buc/inventory-shared";
import { TranslateService } from "@ngx-translate/core";
import { BucSvcAngularStaticAppInfoFacadeUtil } from '@buc/svc-angular';
import { CreateReservationService } from "../services/create-reservation.service";

@Component({
	selector: "buc-create-reservation-form",
	templateUrl: "./create-reservation-form.component.html",
	styleUrls: ["./create-reservation-form.component.scss"]
})
export class CreateReservationForm implements OnInit{
	@Input() accordion165433494446278754849833236715917Align = "end";
	@Input() accordionItem36327672493936585592059716298563Title =
		"Create reservation";

	@Input() demandTypeLabel = "Demand type";
	@Input() demandTypeHelperText = "";
	@Input() demandTypePlaceholder = "";
	@Input() demandTypeTheme = "dark";
	@Input() demandTypeInvalid = false;
	@Input() demandTypeInvalidText = "";
	@Input() demandTypeSize = "md";
	@Input() demandTypeWarn = false;
	@Input() demandTypeWarnText = "";
	@Input() demandTypeDisabled = false;
	@Input() demandTypeDropUp = false;
	@Input() demandTypeSelectionFeedback = "top-after-reopen";
	@Input() demandTypeType: "single" | "multi" = "single";
	@Input() demandTypeItems = [];

	@Input() considerSafetyStockChecked = false;

	@Input() quantityHelperText = "";
	@Input() quantityValue = 1;
	@Input() quantityLabel = "Quantity";
	@Input() quantityTheme = "";
	@Input() quantityMin = 0;
	@Input() quantityMax = 100;
	@Input() quantityStep = 1;
	@Input() quantityInvalid = false;
	@Input() quantityInvalidText = undefined;
	@Input() quantityWarn = undefined;
	@Input() quantityWarnText = undefined;
	@Input() quantitySize = "md";
	@Input() quantityDisabled = undefined;

	@Input() shippingNodeLabel = "Shipping node";
	@Input() shippingNodeHelperText = "";
	@Input() shippingNodePlaceholder = "";
	@Input() shippingNodeTheme = "dark";
	@Input() shippingNodeInvalid = false;
	@Input() shippingNodeInvalidText = "";
	@Input() shippingNodeSize = "md";
	@Input() shippingNodeWarn = false;
	@Input() shippingNodeWarnText = "";
	@Input() shippingNodeDisabled = false;
	@Input() shippingNodeDropUp = false;
	@Input() shippingNodeSelectionFeedback = "top-after-reopen";
	@Input() shippingNodeType: "single" | "multi" = "single";
	@Input() shippingNodeItems = [];

	@Input() dgLabel = "Distribution group";
	@Input() dgHelperText = "";
	@Input() dgPlaceholder = "";
	@Input() dgTheme = "dark";
	@Input() dgInvalid = false;
	@Input() dgInvalidText = "";
	@Input() dgSize = "md";
	@Input() dgWarn = false;
	@Input() dgWarnText = "";
	@Input() dgDisabled = false;
	@Input() dgDropUp = false;
	@Input() dgSelectionFeedback = "top-after-reopen";
	@Input() dgType: "single" | "multi" = "single";
	@Input() dgItems = [];

	@Output() accordionItem36327672493936585592059716298563Selected =
		new EventEmitter();

	@Output() demandTypeSelected = new EventEmitter<any>();
	@Output() demandTypeClose = new EventEmitter<any>();

	@Output() considerSafetyStockCheckedChange = new EventEmitter<boolean>();

	@Output() quantityValueChange = new EventEmitter<number>();
	@Output() quantityChange = new EventEmitter<any>();

	@Output() shippingNodeSelected = new EventEmitter<any>();
	@Output() shippingNodeClose = new EventEmitter<any>();

	@Output() dgSelected = new EventEmitter<any>();
	@Output() dgClose = new EventEmitter<any>();

	@Output() button3886839157349837322918347909375902Clicked =
		new EventEmitter();

	@Output() creatClicked = new EventEmitter();

 // new variables
public validDemandTypes;
orgCode: string;
dgMap: any = {};
public tenantId;
public isCancelled: boolean;
createReservationForm: FormGroup;
private nlsMap: any = {
	'custom.LABEL_CREATE_RESERVATION': '',
	'custom.LABEL_RESERVATION_EXPIRY': '',
	'custom.ERROR_INVALID_EXPIRY': '',
	'custom.ERROR_RESERVATION': '',
	'custom.SUCCESS_RESERVATION': ''
};
constructor(
	private locCommonSvc: LocalCommonService,
	public demandService: InventoryDemandService,
	private inventoryShipNodesService: InventoryShipNodesService,
	private dgSvc: InventoryDistributionService,
	private reservationService: CreateReservationService,
	private bucNotificationService: BucNotificationService,
	private router: Router,
	private translateSvc: TranslateService,
	private route: ActivatedRoute
) {}
ngOnInit(): void {
	this.createReservationForm = new FormGroup({
		reference: new FormControl(),
		timeToExpire: new FormControl(),
		demandType: new FormControl([]),
		segment: new FormControl(),
		segmentType: new FormControl(),
		considerSafetyStock: new FormControl(),
		lineId: new FormControl(),
		itemId: new FormControl(),
		unitOfMeasure: new FormControl(),
		productClass: new FormControl(),
		deliveryMethod: new FormControl(),
		quantity: new FormControl(),
		lineSegment: new FormControl(),
		lineSegmentType: new FormControl(),
		shippingNode: new FormControl(),
		dg: new FormControl()
	});
	this.initialize();
	this.tenantId =
		BucSvcAngularStaticAppInfoFacadeUtil.getInventoryTenantId();
	this._initTranslations();
}
/** Fetch translations for the page */
private async _initTranslations() {
	const keys = Object.keys(this.nlsMap);
	const json = await this.translateSvc.get(keys).toPromise();
	keys.forEach(k => this.nlsMap[k] = json[k]);
}
async initialize(clearForm = false) {
	await this.loadDemandTypes();
	await this.getShipNodes();
	await this.loadDG();
	// set default values in the form
	this.createReservationForm.controls['itemId'].setValue(this.reservationService.itemData?.itemId);
	this.createReservationForm.controls['productClass'].setValue(this.reservationService.itemData?.productClass);
	this.createReservationForm.controls['unitOfMeasure'].setValue(this.reservationService.itemData?.unitOfMeasure);
}

// loading demand types
async loadDemandTypes() {
	try {
		this.validDemandTypes = await getValidDemandTypes(this.demandService);
		const data = this.validDemandTypes.map(sup => ({
			content: sup,
			selected: false,
			id: sup
		}));
		this.mapDemandTypes();
	} catch (e) {
		this.locCommonSvc.showErrorNotification('error', e.message);
	}
}
mapDemandTypes() {
	this.demandTypeItems = this.validDemandTypes.map(item => {
		return {
			content: item
		};
	});
}

// loading ship nodes
private async getShipNodes() {
	if (!this.shippingNodeItems || this.shippingNodeItems.length === 0) {
		const response = await
		this.inventoryShipNodesService.getIVShipNodesByTenantID().toPromise();
		let shippingNodes = [];
		if (response && response.length) {
			shippingNodes = response.map(item => item.shipNode);
			this.shippingNodeItems = shippingNodes.map(item => {
				return {
					content: item
				};
			});
		}
	}
}
// loading DG
async loadDG() {
	try {
		const resp = await
		this.dgSvc.getDistributionRuleListByPage(this.orgCode, 1, 999, '').toPromise();
		const list = resp.distributionGroups
			.filter(dg => (!dg.dgType || dg.dgType === 'PROD') &&
				(!dg.dgPurpose || dg.dgPurpose === 'SOURCING'))
			.map(dg => {
				const id = dg.dgId || dg.dgKey;
				this.dgMap[id] = dg;
				return {
					id,
					content: dg.dgName,
					selected: false,
					value: id
				};
			})
			.sort((a, b) =>
				a.content.toLocaleLowerCase().localeCompare(b.content.toLocaleLowerCase()));
		this.dgItems = list;
	} catch (e) {
		this.locCommonSvc.showErrorNotification('error', e.message);
	}
}
async onSave() {
	const request = {
		reference: this.createReservationForm.value.reference,
		timeToExpire: this.createReservationForm.value.timeToExpire,
		segment: this.createReservationForm.value.segment,
		segmentType: this.createReservationForm.value.segmentType,
		demandType: this.createReservationForm.value.demandType.content,
		considerSafetyStock: this.createReservationForm.value.considerSafetyStock ?
			this.createReservationForm.value.considerSafetyStock : false,
		lines: [{
			lineId: this.createReservationForm.value.lineId,
			itemId: this.createReservationForm.value.itemId,
			unitOfMeasure: this.createReservationForm.value.unitOfMeasure,
			productClass: this.createReservationForm.value.productClass,
			deliveryMethod: this.createReservationForm.value.deliveryMethod,
			shipNode: this.createReservationForm.value.shippingNode?this.createReservationForm.value.shippingNode.content:'',
			distributionGroup: this.createReservationForm.value.dg?this.createReservationForm.value.dg.content:'',
			segment: this.createReservationForm.value.lineSegment,
			segmentType: this.createReservationForm.value.lineSegmentType,
			quantity: this.createReservationForm.value.quantity
		}]
	};
	// Call reservation API here
	try {
		await this.reservationService.createReservation(this.tenantId,
			request).toPromise();
		this.showNotification('success',
			this.nlsMap['custom.SUCCESS_RESERVATION']);
		// enabling dg and shipping node
		this.dgDisabled = false;
		this.shippingNodeDisabled = false;
		// After successful reservation storing reference id to populate data in table
		this.reservationService.reservationRef = this.createReservationForm.value.reference;

	} catch (error) {
		console.log("error", error)
		this.showNotification('error', this.nlsMap['custom.ERROR_RESERVATION'] +
			' ' + error.error.error_message);
	}
}
// notification
showNotification(statusType, message) {
	const notification = new BucNotificationModel({
		statusType,
		statusContent: message
	});
	this.bucNotificationService.send([notification]);
}
onCancel() {
	this.isCancelled = true;
	this.router.navigate([Constants.RESULTS_ROUTE]);
}

onSelectShippingNode(event) {
	// Disabling dg once shipping node is selected
	this.dgDisabled = true;
  }

  onSelectDistributionGroup(event){
	// Disabling shipping node once dg is selected
	this.shippingNodeDisabled = true;
  }
}

Abra o arquivo src-custom/app/app-customization.impl.ts para edição.

Inclua CreateResevationFormModule na matriz de importações..

Atualize a importação correspondente

import { CreateReservationFormModule } from './features/create-reservation/components/create-reservation-form.module';

Como resultado, o arquivo src-custom/app/app-customization.impl.ts deve ser semelhante ao arquivo a seguir:

import { RouterModule, Routes } from '@angular/router';
import { InventoryModuleUrlGuardServiceFn } from '@buc/inventory-shared';
import { BucCommonClassesConnectorResourcePermissionsGuard } from '@buc/svc-angular';
import { CreateReservationComponent } from './features/create-reservation/create-reservation.component';
import { BucActionsModule, BucCommonComponentsModule, BucFeatureComponentsModule, BucIconsModule } from '@buc/common-components';
import { SharedModule } from '@buc/inventory-shared';
import { CreateReservationFormModule } from './features/create-reservation/components/create-reservation-form.module';
import { CustomConstants } from './features/create-reservation/custom-constants';
import { ReservationActionService } from './features/create-reservation/services/reservation-action.service';
export const customRoutes: Routes = [
   {
    canActivate: [InventoryModuleUrlGuardServiceFn, BucCommonClassesConnectorResourcePermissionsGuard],
    path: 'create-reservation',
    component: CreateReservationComponent,
    data: {
      id: 'CUSINV0001' // New resourceId to control permissions
    }
  }
];
export class AppCustomizationImpl {
    static readonly components = [CreateReservationComponent];
    static readonly providers = [];
    static readonly imports = [
        RouterModule.forChild(customRoutes),
           BucCommonComponentsModule,
           BucFeatureComponentsModule,
           BucIconsModule,
           SharedModule,
           CreateReservationFormModule,
           BucActionsModule.forChild(
            [ 
              {
              name: CustomConstants.ACTION_IDS_CREATE_RESERVATION,
              action: ReservationActionService
            }
            ]
          )
  ];
    static readonly exports = [RouterModule];
}

Inclua o seguinte código no arquivo src-custom/app/features/create-reservation/create-reservation.component.html após o <!–Reservation form --> comentário:
```
<buc-create-reservation-form></buc-create-reservation-form>
```
Volte para o Order Hub e recarregue o quadro. O formulário deve estar visível na UI: