Updating the table configuration and data

• Delete the import {CreateReservationTableComponent} statement.
• Delete CreateReservationTableComponent from the declarations array.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule
  ]
})
export class ExtSearchModule { }

• Add the following import statement.

  import { CreateReservationTableComponent } from './features/create-reservation/create-reservation-table/create-reservation-table.component';

• Add CreateReservationTableComponent to the components array.

  static readonly components = [CreateReservationComponent, CreateReservationTableComponent];
  

[showSelectionColumn]="false"

private ctx: InventoryContextService,
private invAvlSvc: InventoryAvailabilityService,
private reservationService: CreateReservationService

1. Add the following variable to the CreateReservationTableComponent class. This variable is used in the API call.

   public tenantId;

2. Add the following code to the ngOninit() method to populate the tenantId:

   this.tenantId =
   BucSvcAngularStaticAppInfoFacadeUtil.getInventoryTenantId();

3. Add the corresponding import statement:

   import { BucSvcAngularStaticAppInfoFacadeUtil } from '@buc/svc-angular';

4. Add the following code:

   getInventoryAvailabilityBreakup() {
   	const searchCriteria = this.ctx.getSearchCriteria();
   	const item = (this.reservationService.itemData?.itemId) ? [this.reservationService.itemData.itemId] : [''];
   	const nodes = searchCriteria.filterCriteria.nodes;
   	this.parentPage.nodesIds = nodes;
   	const data = [];
   	return this.invAvlSvc.getAvailabilityBreakupInventory(item, nodes,
   		[], [searchCriteria.operators.uom.value],
   		[searchCriteria.operators.pc.value], searchCriteria.filterCriteria,
   		searchCriteria.operators.org.value, '').pipe(
   		map((response: InventoryBreakupResponse) => {
   			response.nodes.forEach(el => {
   				const colD = {
   					breakup: {},
   					itemId: '',
   					availableOnHand: '',
   					nodeId: '',
   					totalReservedQuantity: ''
   				};
   				colD.breakup = el.breakup;
   				colD.availableOnHand = response.summary?.availToSell;
   				colD.nodeId = el.nodeId;
   				colD.totalReservedQuantity = el.breakup.totalReservedQuantity;
   				data.push(colD);
   			});
   			return data;
   		}),
   		catchError(() => {
   			this.multiModel.totalDataLength = 0;
   			return [];
   		})
   	);
   }
   getReservation() {
   	return this.reservationService.getReservation(this.tenantId,
   		this.reservationService.reservationRef).pipe(
   		catchError(() => {
   			this.multiModel.totalDataLength = 0;
   			return [];
   		})
   	);
   }

1. Replace the fetchTableData() method with the following code to call getReservation and getInventoryAvailabilityBreakup:

   protected fetchTableData(): Observable < any[] > {
   	const observables = [];
   	observables.push(this.getReservation());
   	observables.push(this.getInventoryAvailabilityBreakup());
   	return forkJoin(observables).pipe(map((res) => {
   		const reservationResp: any = res[0];
   		const nodebrkUp: any = res[1];
   		const rows = reservationResp.map((item: any) => ({
   			shipNode: item.shipNode,
   			reservedQuantity: item.reservedQuantity,
   			totalOnhandSupplyQuantity: nodebrkUp.map((data) => data.nodeId ===
   				item.shipNode ? data.breakup.totalOnhandSupplyQuantity[0] : '')
   		}))
   		return rows;
   	}));
   }

2. To display information in the table, you need to use the existing getAvailabilityBreakupInventory API and getReservation API from the inventory-shared package. Therefore, you need to add the following import statements:

   import { InventoryAvailabilityService, InventoryContextService } from '@buc/inventory-shared';
   import { InventoryBreakupResponse } from '@buc/inventory-shared/lib/services/inventory-availability.service';
   import { CreateReservationService } from "../services/create-reservation.service";
   import { map, catchError } from 'rxjs/operators'; import { forkJoin } from 'rxjs';

1. Add the BucNotificationService as constructor parameter:

   private bucNotificationService: BucNotificationService

2. Add the showNotification method:

   // notification
   showNotification(statusType, message) {
   	const notification = new BucNotificationModel({
   		statusType,
   		statusContent: message
   	});
   	this.bucNotificationService.send([notification]);
   }

3. Add the corresponding import statement:

   import { BucNotificationModel, BucNotificationService} from '@buc/common-components';

<div class="screen-footer">
    <!-- button row -->
  <div class="bx--row">
    <div class="bx--col">
      <buc-button [attr.tid]="'create-rule-cancel'" class="padding-right--1rem" [type]="'secondary'"
          (click)="onCancel()" [btnSize]="'normal'">
          {{ 'custom.LABEL_CANCEL' | translate }}
      </buc-button>
      <buc-button id="saveBtn" [attr.tid]="'create-rule-save'" [type]="'primary'" [btnSize]="'normal'"
          (click)="onSave()">
          {{ 'custom.LABEL_CREATE' | translate }}
      </buc-button>
    </div>
  </div>
</div>

"custom": {
	"LABEL_CREATE_RESERVATION": "Create reservation",
	"SUCCESS_RESERVATION": "Reservation successful",
	"ERROR_RESERVATION": "Reservation failed:",
	"LABEL_CREATE": "Create",
	"LABEL_CANCEL": "Cancel"
},