import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MenuItem, Message, SelectItem } from 'primeng/primeng';
import { MessageService } from 'primeng/components/common/messageservice';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {

  cols: any[];

  messages: Message[] = [];

  // acknowledgements: Acknowledgement[];

  selectedAcknowledgement: Acknowledgement;

  acknowledgement: Acknowledgement = new PrimeAcknowledgement();

  purchaseOrders: any[];

  purchaseOrderAck: any[];

  shipments: any[];

  shipmentAck: any[];

  APInvoices: any[];

  apInvoiceAck: any[];

  // Filter dropdown for ClientStatusID
  statusID: SelectItem[];

  // Filter dropdown for Acknowledgement StatusID
  ackStatusID: SelectItem[];

  // Filter dropdown for BizType
  bizType: SelectItem[];

  // selected filters
  selectedClientStatusID: string;
  selectedAckStatusID: string;
  selectedBizType: string;
  dateFilter: string;

  // acknowledged
  acknowledgedAckStatusID: string;
  acknowledgedStatusID: string;

  // Which API endpoint to select from PO, Shipment, Invoices. Default is 1 or PO
  APIendpoint: SelectItem[];
  selectedAPIendpoint = '1';

  // Show only Acknowledged item switch. Default is set to true
  showAcknowledged: SelectItem[];
  selectedShowAcknowledged = 'true';

  // Row select presents modal form for acknowledging
  form: FormGroup;

  displayDialog: boolean;

  loading: boolean;
  poLoading: boolean;
  shipmentLoading: boolean;
  apInvoiceLoading: boolean;
  ackloading: boolean;

  constructor(
    fb: FormBuilder,
    filterForm: FormBuilder
  ) {
    this.form = fb.group({
      'APIUserID': new FormControl('', Validators.required),
      'ChangeVersionID': new FormControl('', Validators.required),
      'Comment': new FormControl(''),
      'StatusID': new FormControl('', Validators.required),
      'AcknowledgementStatusID': new FormControl('', Validators.required),
      'DataChangeTypeID': new FormControl('', Validators.required),
      'DataChangeChildTypeID': new FormControl('', Validators.required),
      'DataChangePrimaryID': new FormControl('', Validators.required)
    });
    this.APIendpoint = [];
    this.APIendpoint.push({ label: 'Purchase Orders', value: '1' });
    this.APIendpoint.push({ label: 'Shipments', value: '2' });
    // this.APIendpoint.push({label:'AR Invoices', value:'3'});
    this.APIendpoint.push({ label: 'AP Invoices', value: '4' });

    this.showAcknowledged = [];
    this.showAcknowledged.push({ label: 'True', value: 'true' });
    this.showAcknowledged.push({ label: 'False', value: 'false' });

    this.setDropdownFilters();
  }

  ngOnInit() {
    this.cols = [
      { field: 'DataChangePrimaryID', header: 'DataChangePrimaryID' },
      { field: 'ClientStatusID', header: 'Status ID' },
      { field: 'AcknowledgementStatusID', header: 'Acknowledgement Status ID' },
      { field: 'BizType', header: 'Biz Type' },
      { field: 'AcknowledgedDate', header: 'Acknowledged Date' },
      { field: 'ClientComment', header: 'Comment' },
      { field: 'SupplimentData', header: 'Shipments' }
    ];

    this.updateTable();
  }
  setDropdownFilters() {
    this.statusID = [];
    this.statusID.push({ label: 'Not yet acknowledged', value: 0 });
    this.statusID.push({ label: 'Success', value: 1 });
    this.statusID.push({ label: 'Error', value: 2 });

    this.ackStatusID = [];
    this.ackStatusID.push({ label: 'Requires Acknowledgement', value: 1 });
    this.ackStatusID.push({ label: 'Awaiting Acknowledgement', value: 2 });
    this.ackStatusID.push({ label: 'Acknowledged Successfully', value: 3 });
    this.ackStatusID.push({ label: 'Auto Acknowledgement - Max Errors', value: 7 });

    this.bizType = [];
    this.bizType.push({ label: 'Brokered', value: 'B ' });
    this.bizType.push({ label: 'ScaleConnect', value: 'Scale' });
  }
  updateTable() {
    this.loading = true;
    this._DJJService.getAcknowledgementUrl(this.selectedAPIendpoint, this.selectedShowAcknowledged)
      .then(
        acknowledgements => {
          this.acknowledgements = acknowledgements;
        },
        error => {
          this.messageService.add({
            severity: 'error',
            summary: 'Error loading acknowledgement table',
            detail: <any>error });
        }
      )
      .then(() => this.loading = false);
  }
  resetTable(tt) {
    this.selectedClientStatusID = null;
    this.selectedAckStatusID = null;
    this.selectedBizType = null;
    this.dateFilter = null;

    this.setDropdownFilters();
    tt.reset();
  }
  modifyAcknowledgement(value: string) {
    this.acknowledgements[this.findSelectedAcknowledgementIndex()] = this.form.value;

    this.loading = true;
    this._DJJService.postAcknowledgement(this.form.value)
      .then(
        success => {
          this.form.reset();
          this.updateTable();
        },
        error => {
          this.messageService.add({
            severity: 'error',
            summary: 'Error modifiying ' + this.form.value.DataChangePrimaryID,
            detail: <any>error
          });
          this.loading = false;
          this.updateTable();
        }
      )
      .then(() => { this.loading = false; });
    this.displayDialog = false;
  }
  reprocessAcknowledgement(value: string) {
    this.acknowledgements[this.findSelectedAcknowledgementIndex()] = this.form.value;

    this.form.patchValue({
      StatusID: 0,
      AcknowledgementStatusID: 1,
      Comment: ''
    });

    this._DJJService.postAcknowledgement(this.form.value)
      .then(
        success => {
          this.form.reset();
          this.updateTable();
        },
        error => {
          this.messageService.add({
            severity: 'error',
            summary: 'Error re-processing ' + this.form.value.DataChangePrimaryID,
            detail: <any>error
          });
          this.loading = false;
          this.updateTable();
        }
      )
      .then(() => { this.loading = false; });
    this.displayDialog = false;
  }
  onRowExpand(event) {
    if (event.data.DataChangeTypeID === 1) {
      this.loading = true;
      // this.ackloading = true;

      this._DJJService.getPurchaseOrders(event.data.DataChangePrimaryID)
        .then(purchaseOrders => { this.purchaseOrders = purchaseOrders.POHeader; })
        // .then(error => { this.errorMessage = <any>error; this.loading = false; })
        .then(() => this.loading = false);

      this._DJJService.getPOAcknowledgementUrl(event.data.DataChangePrimaryID)
        .then(purchaseOrderAck => { this.purchaseOrderAck = purchaseOrderAck; })
        // .then(error => { this.errorMessage = <any>error; this.ackloading = false; })
        .then(() => this.ackloading = false);
    }
    if (event.data.DataChangeTypeID === 2) {
      this.loading = true;
      // this.ackloading = true;

      this._DJJService.getShipments(event.data.DataChangePrimaryID)
        .then(shipments => { this.shipments = shipments; })
        // .then(error => { this.errorMessage = <any>error; this.loading = false; })
        .then(() => this.loading = false);

      this._DJJService.getShipmentAcknowledgementUrl(event.data.DataChangePrimaryID)
        .then(shipmentAck => { this.shipmentAck = shipmentAck; })
        // .then(error => { this.errorMessage = <any>error; this.ackloading = false; })
        .then(() => this.ackloading = false);
    }
    if (event.data.DataChangeTypeID === 4) {
      this.loading = true;
      // this.ackloading = true;

      this._DJJService.getAPInvoices(event.data.DataChangePrimaryID)
        .then(APInvoices => { this.APInvoices = APInvoices.APInvoices; })
        // .then(error => { this.errorMessage = <any>error; this.loading = false; })
        .then(() => this.loading = false);

      this._DJJService.getAPInvoiceAcknowledgementUrl(event.data.DataChangePrimaryID)
        .then(apInvoiceAck => { this.apInvoiceAck = apInvoiceAck; })
        // .then(error => { this.errorMessage = <any>error; this.ackloading = false; })
        .then(() => this.ackloading = false);
    }
  }
  // Method called when selecting datatable row
  onRowSelect(event) {
    this.acknowledgement = this.cloneAcknowledgement(event.data);

    this.acknowledgedStatusID = this.acknowledgement.ClientStatusID;

    this.acknowledgedAckStatusID = this.acknowledgement.AcknowledgementStatusID;

    this.displayDialog = true;
  }
  cloneAcknowledgement(a: Acknowledgement): Acknowledgement {
    const acknowledgement = new PrimeAcknowledgement();
    for (const field of Object.keys(this.acknowledgement)) {
      acknowledgement[field] = a[field];
    }
    return acknowledgement;
  }
  findSelectedAcknowledgementIndex(): number {
    return this.acknowledgements.indexOf(this.selectedAcknowledgement);
  }
  closeForm() {
    this.form.reset();
  }
  
  acknowledgements = [
    {
        "DataChangeID": 427265,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60386,
        "ChangeVersionID": 17642448,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 460813,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-22T13:22:09.135562-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:11317819:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 440528,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 76499263,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 481369,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-03-05T15:15:03.8996102-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11601242:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 437406,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 78953247,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 473500,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-03-01T10:20:30.4583153-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11505298: PO Line Updated PO Line Added",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 425470,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 64390911,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 459110,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-21T15:32:13.5969566-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11313083: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 366902,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 19656098,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 353099,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-10T15:15:15.7267415-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:9892398: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 408719,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 61691725,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 424764,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-09T13:27:14.1950141-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:10968160: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 414167,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 92073687,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 434013,
        "AcknowledgementStatusID": 7,
        "AcknowledgementStatusName": "Auto Acknowledgement - Error Max",
        "AcknowledgementStatusDesc": "Record has hit max amount of errors on transmission",
        "AcknowledgedDate": "2018-02-14T12:02:10.4184705-05:00",
        "ClientStatusID": 2,
        "ErrorCount": 1,
        "ClientComment": "FlowId:11092178: MESSAGE TEXT - Cannot update quantity. \n\nCause: You will not be able to update the quantity for any one or more of the following reasons:\n\n1. New quantity is less than received quantity. \n2. New quantity is less than billed quantity.\n3. N",
        "MaxErrorCount": 0,
        "WaitTimeInterval": 1440,
        "MaxTimeInterval": 10080,
        "SupplimentData": null
    },
    {
        "DataChangeID": 414328,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 67288514,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 434234,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-14T14:51:11.2121879-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11102686: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 397441,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 60911,
        "ChangeVersionID": 64363280,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 408439,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-01T11:35:13.3806358-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:10670647: PO Line Updated PO Line Added",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 416196,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 45460490,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 435894,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-15T11:59:40.2064965-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11107153: PO Line Updated PO Line Added",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 375512,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 75801056,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 370478,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-17T12:50:20.9356822-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:10081036: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 371951,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 63134762,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 367991,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-15T13:50:18.2998585-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "PO Created",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 423724,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 91681136,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 457215,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-20T18:17:10.1011544-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11255003: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 437412,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 36300729,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 473507,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-03-01T10:25:09.5638887-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:11496704: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 437413,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 70939216,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 473513,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-03-01T10:30:05.0946393-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:11496723:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 437568,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61261,
        "ChangeVersionID": 99561731,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 473747,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-03-01T13:30:09.4741775-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11497784: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 431583,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61881,
        "ChangeVersionID": 77046001,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 468131,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-26T13:30:06.4880546-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:11449655:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 416505,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61881,
        "ChangeVersionID": 94575683,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 436209,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-15T15:29:32.3642288-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "PO Created",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 437748,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 62290,
        "ChangeVersionID": 30887350,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 474033,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-03-01T17:10:11.1438513-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "PO Created",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 362134,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 218034,
        "ChangeVersionID": 8991756,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 350716,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-08T06:06:12.8969358-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:9817715:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6651388, 6655261, 6662485, 6671367, 6678414, 6693032, 6713534, 6720393, 6726819, 6736126, 6739084, 6746398, 6752716, 6763431, 6770082, 6775229, 6776591, 6782656, 6796592, 6807536, 6809618, 6813375, 6823040, 6823043, 6823728, 6834787, 6832698, 6832699, 6841946, 6847238, 6857284, 6857283, 6857287, 6860908, 6869099, 6869098, 6874220, 6874681, 6879173, 6877147, 6879723, 6699787, 6698495, 6702184, 6687263, 6689708, 6706290, 6712110"
    },
    {
        "DataChangeID": 383876,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 229780,
        "ChangeVersionID": 9432397,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 391310,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-23T09:20:14.0438842-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:10140202:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6843301, 6846019, 6870006, 6870053, 6869899, 6870656, 6871332, 6871564, 6871675, 6871708, 6873157, 6846017, 6872035, 6871943, 6873846, 6873399, 6873440, 6873862, 6873938, 6875221, 6875313, 6846027, 6870693, 6872502, 6875964, 6861558, 6866828, 6875303, 6875309, 6875317, 6875318, 6875337, 6875345, 6875394, 6877397, 6875937, 6876086, 6846026, 6876138, 6876119, 6876124, 6876144, 6876790, 6877284, 6877283, 6877398, 6877482, 6877493, 6877832, 6878513, 6879164, 6879163, 6879169, 6879242, 6879259, 6879260, 6879511, 6879774, 6846029, 6879865, 6880231, 6880413, 6880558, 6880498, 6880602, 6880653, 6881308, 6881368, 6847605, 6847018, 6847400, 6847418, 6844077, 6847520, 6847653, 6847606, 6848342, 6849227, 6849298, 6849280, 6849385, 6849408, 6850708, 6843237, 6850704, 6850807, 6850904, 6851321, 6851243, 6851426, 6852510, 6852509, 6852855, 6852798, 6844154, 6846024, 6864195, 6852556, 6852560, 6852563, 6852799, 6854416, 6855300, 6854418, 6854423, 6855297, 6855613, 6844378, 6856406, 6856628, 6856644, 6856664, 6858288, 6858892, 6858286, 6858686, 6860201, 6860251, 6844445, 6860290, 6860240, 6860301, 6860426, 6860656, 6861475, 6861989, 6862157, 6862258, 6844464, 6862252, 6862307, 6862916, 6862943, 6863335, 6863339, 6863380, 6864258, 6864266, 6844717, 6866328, 6866137, 6866368, 6865710, 6867527, 6867564, 6867652, 6867959, 6867766, 6845995, 6867978, 6868614, 6868671, 6868736, 6868851, 6869683, 6869699, 6869729, 6870015, 6870663"
    },
    {
        "DataChangeID": 375394,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 229964,
        "ChangeVersionID": 33125120,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 370360,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-17T10:55:08.4661709-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:10050798:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6842111, 6854403, 6858227, 6858226, 6860599, 6860598, 6865482, 6867914, 6867913, 6869575, 6869576, 6872886"
    },
    {
        "DataChangeID": 381220,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 230107,
        "ChangeVersionID": 43399396,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 379609,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-22T11:00:18.7021172-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:10121263:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6876126, 6878535, 6878529, 6847680, 6847681, 6847685, 6847668, 6851043, 6851189, 6852956, 6855304, 6856144, 6856601, 6856741, 6858245, 6862533, 6862825, 6866853, 6869961, 6874774, 6877081, 6877089, 6881409, 6880069, 6881586, 6881633, 6881635, 6881682, 6882038"
    },
    {
        "DataChangeID": 375358,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 230148,
        "ChangeVersionID": 88313588,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 370328,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-17T10:20:07.3868418-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:10080632:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 362137,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 230148,
        "ChangeVersionID": 5602952,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 350716,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-08T06:06:14.8090565-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:9817715:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 383896,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 59299,
        "ChangeVersionID": 92664855,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 391318,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-23T09:25:11.31592-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:10140204:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 390614,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61260,
        "ChangeVersionID": 90952428,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 398091,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-26T23:10:21.4020621-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:10282280: PO Line Updated",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 371894,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 61260,
        "ChangeVersionID": 7459539,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 2,
        "APICallBatchID": 367969,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-15T13:25:27.8255146-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "PO Created",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": null
    },
    {
        "DataChangeID": 362132,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 203700,
        "ChangeVersionID": 4932906,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 350716,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-08T06:06:11.5848527-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:9817715:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6407211"
    },
    {
        "DataChangeID": 362133,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 218031,
        "ChangeVersionID": 76055306,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 350716,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-08T06:06:12.2558941-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:9817715:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6847237, 6848275, 6848274, 6850697, 6853342, 6855116, 6855115, 6853341, 6857285, 6857286, 6860905, 6865523, 6865524, 6869085, 6869084, 6874217, 6874679, 6877157, 6877158, 6879717, 6880020, 6879725, 6880019, 6880018, 6651386, 6651391, 6654147, 6654146, 6655260, 6655259, 6656179, 6662508, 6662483, 6662484, 6664575, 6667496, 6671366, 6673342, 6675224, 6678468, 6681557, 6681559, 6687262, 6687261, 6687930, 6691033, 6693031, 6693030, 6699786, 6699785, 6696459, 6700668, 6702179, 6702180, 6706289, 6712109, 6713533, 6713532, 6715939, 6720391, 6720392, 6723925, 6723926, 6725357, 6731596, 6731597, 6734427, 6734426, 6736125, 6737757, 6737756, 6739082, 6739083, 6741464, 6744630, 6746396, 6746397, 6748619, 6750964, 6756547, 6756548, 6759014, 6760980, 6765335, 6765334, 6770081, 6770596, 6772060, 6775228, 6776590, 6778612, 6780827, 6785136, 6796591, 6798947, 6802721, 6807535, 6809614, 6823039, 6813374, 6813373, 6816259, 6819826, 6823041, 6823042, 6823727, 6823726, 6826650, 6831641, 6831640, 6832696, 6832697, 6841361, 6841362, 6847236, 6715940"
    },
    {
        "DataChangeID": 400685,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 229115,
        "ChangeVersionID": 93467937,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 416900,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-02-05T09:35:09.816287-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:10871550:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6819395, 6825067, 6826417, 6828740, 6835142, 6840783, 6840818, 6840819, 6835889"
    },
    {
        "DataChangeID": 383858,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 229956,
        "ChangeVersionID": 68136976,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 391304,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-23T09:15:11.6826002-05:00",
        "ClientStatusID": 1,
        "ErrorCount": null,
        "ClientComment": "FlowId:10160334:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6843940, 6848207, 6848208, 6852385, 6854970, 6868126, 6868135, 6872152, 6872578, 6875366, 6884797, 6859077"
    },
    {
        "DataChangeID": 360268,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 229956,
        "ChangeVersionID": 27628818,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 347881,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-05T10:30:55.3433111-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:9812497:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6843940, 6848207, 6848208, 6852385, 6854970, 6868126, 6868135, 6872152, 6872578, 6875366, 6884797, 6859077"
    },
    {
        "DataChangeID": 360338,
        "APIUserID": "7da287b4-0deb-4d2e-a69e-150738aa59fd",
        "BizType": "B ",
        "DataChangePrimaryID": 229956,
        "ChangeVersionID": 81416484,
        "DataChangeTypeID": 1,
        "DataChangeTypeName": "PO",
        "DataChangeChildTypeID": 1,
        "APICallBatchID": 347902,
        "AcknowledgementStatusID": 3,
        "AcknowledgementStatusName": "Acknowledged by Version",
        "AcknowledgementStatusDesc": "Record was acknowledged by each change",
        "AcknowledgedDate": "2018-01-05T11:00:56.4786196-05:00",
        "ClientStatusID": 1,
        "ErrorCount": 0,
        "ClientComment": "FlowId:9804151:",
        "MaxErrorCount": null,
        "WaitTimeInterval": null,
        "MaxTimeInterval": null,
        "SupplimentData": " 6843940, 6848207, 6848208, 6852385, 6854970, 6868126, 6868135, 6872152, 6872578, 6875366, 6884797, 6859077"
    }
    ]
  
}
class PrimeAcknowledgement implements Acknowledgement {
  constructor(
    public DataChangeID?,
    public APIUserID?,
    public BizType?,
    public DataChangePrimaryID?,
    public ChangeVersionID?,
    public DataChangeTypeID?,
    public DataChangeTypeName?,
    public DataChangeChildTypeID?,
    public APICallBatchID?,
    public AcknowledgementStatusID?,
    public AcknowledgementStatusName?,
    public AcknowledgementStatusDesc?,
    public AcknowledgedDate?,
    public ClientStatusID?,
    public ErrorCount?,
    public ClientComment?,
    public ApplicationID?,
  ) { }
}
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule }    from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent }   from './app.component';

// Import PrimeNG modules
import {AccordionModule} from 'primeng/primeng';
import {AutoCompleteModule} from 'primeng/primeng';
import {BreadcrumbModule} from 'primeng/primeng';
import {ButtonModule} from 'primeng/primeng';
import {CalendarModule} from 'primeng/primeng';
import {CarouselModule} from 'primeng/primeng';
import {ChartModule} from 'primeng/primeng';
import {CheckboxModule} from 'primeng/primeng';
import {ChipsModule} from 'primeng/primeng';
import {CodeHighlighterModule} from 'primeng/primeng';
import {ConfirmDialogModule} from 'primeng/primeng';
import {SharedModule} from 'primeng/primeng';
import {ContextMenuModule} from 'primeng/primeng';
import {DataGridModule} from 'primeng/primeng';
import {DataListModule} from 'primeng/primeng';
import {DataScrollerModule} from 'primeng/primeng';
import {DataTableModule} from 'primeng/primeng';
import {DialogModule} from 'primeng/primeng';
import {DragDropModule} from 'primeng/primeng';
import {DropdownModule} from 'primeng/primeng';
import {EditorModule} from 'primeng/primeng';
import {FieldsetModule} from 'primeng/primeng';
import {FileUploadModule} from 'primeng/primeng';
import {GalleriaModule} from 'primeng/primeng';
import {GMapModule} from 'primeng/primeng';
import {GrowlModule} from 'primeng/primeng';
import {InplaceModule} from 'primeng/primeng';
import {InputMaskModule} from 'primeng/primeng';
import {InputSwitchModule} from 'primeng/primeng';
import {InputTextModule} from 'primeng/primeng';
import {InputTextareaModule} from 'primeng/primeng';
import {LightboxModule} from 'primeng/primeng';
import {ListboxModule} from 'primeng/primeng';
import {MegaMenuModule} from 'primeng/primeng';
import {MenuModule} from 'primeng/primeng';
import {MenubarModule} from 'primeng/primeng';
import {MessagesModule} from 'primeng/primeng';
import {MultiSelectModule} from 'primeng/primeng';
import {OrderListModule} from 'primeng/primeng';
import {OverlayPanelModule} from 'primeng/primeng';
import {PaginatorModule} from 'primeng/primeng';
import {PanelModule} from 'primeng/primeng';
import {PanelMenuModule} from 'primeng/primeng';
import {PasswordModule} from 'primeng/primeng';
import {PickListModule} from 'primeng/primeng';
import {ProgressBarModule} from 'primeng/primeng';
import {RadioButtonModule} from 'primeng/primeng';
import {RatingModule} from 'primeng/primeng';
import {ScheduleModule} from 'primeng/primeng';
import {SelectButtonModule} from 'primeng/primeng';
import {SlideMenuModule} from 'primeng/primeng';
import {SliderModule} from 'primeng/primeng';
import {SpinnerModule} from 'primeng/primeng';
import {SplitButtonModule} from 'primeng/primeng';
import {StepsModule} from 'primeng/primeng';
import {TabMenuModule} from 'primeng/primeng';
import {TabViewModule} from 'primeng/primeng';
import {TableModule} from 'primeng/table';
import {TerminalModule} from 'primeng/primeng';
import {TieredMenuModule} from 'primeng/primeng';
import {ToggleButtonModule} from 'primeng/primeng';
import {ToolbarModule} from 'primeng/primeng';
import {TableModule} from 'primeng/table';
import {TooltipModule} from 'primeng/primeng';
import {TreeModule} from 'primeng/primeng';
import {TreeTableModule} from 'primeng/primeng';

@NgModule({
  imports: [ 
        BrowserModule, 
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        AccordionModule,
        AutoCompleteModule,
        BreadcrumbModule,
        ButtonModule,
        CalendarModule,
        CarouselModule,
        ChartModule,
        CheckboxModule,
        ChipsModule,
        CodeHighlighterModule,
        ConfirmDialogModule,
        SharedModule,
        ContextMenuModule,
        DataGridModule,
        DataListModule,
        DataScrollerModule,
        DataTableModule,
        DialogModule,
        DragDropModule,
        DropdownModule,
        EditorModule,
        FieldsetModule,
        FileUploadModule,
        GalleriaModule,
        GMapModule,
        GrowlModule,
        InplaceModule,
        InputMaskModule,
        InputSwitchModule,
        InputTextModule,
        InputTextareaModule,
        LightboxModule,
        ListboxModule,
        MegaMenuModule,
        MenuModule,
        MenubarModule,
        MessagesModule,
        MultiSelectModule,
        OrderListModule,
        OverlayPanelModule,
        PaginatorModule,
        PanelModule,
        PanelMenuModule,
        PasswordModule,
        PickListModule,
        ProgressBarModule,
        RadioButtonModule,
        RatingModule,
        ScheduleModule,
        SelectButtonModule,
        SlideMenuModule,
        SliderModule,
        SpinnerModule,
        SplitButtonModule,
        StepsModule,
        TableModule,
        TabMenuModule,
        TabViewModule,
        TerminalModule,
        TieredMenuModule,
        ToggleButtonModule,
        ToolbarModule,
        TooltipModule,
        TreeModule,
        TreeTableModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
body {
  padding: 2em;
  font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    
    <!-- PrimeNG style dependencies -->
    <link rel="stylesheet" href="https://unpkg.com/primeng@5.2.3/resources/themes/omega/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeng@5.2.3/resources/primeng.min.css" />

    <!-- 1. Load libraries -->
    <!-- Polyfill for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'https://unpkg.com/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

     // angular bundles
'@angular/animations': 'npm:@angular/animations@5.2.0/bundles/animations.umd.js',
 '@angular/animations/browser': 'npm:@angular/animations@5.2.0/bundles/animations-browser.umd.js',
 '@angular/core': 'npm:@angular/core@5.2.0/bundles/core.umd.js',
 '@angular/common': 'npm:@angular/common@5.2.0/bundles/common.umd.js',
 '@angular/compiler': 'npm:@angular/compiler@5.2.0/bundles/compiler.umd.js',
 '@angular/platform-browser': 'npm:@angular/platform-browser@5.2.0/bundles/platform-browser.umd.js',
 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.2.0/bundles/platform-browser-dynamic.umd.js',
 '@angular/platform-browser/animations': 'npm:@angular/platform-browser@5.2.0/bundles/platform-browser-animations.umd.js',
 '@angular/http': 'npm:@angular/http@5.2.0/bundles/http.umd.js',
 '@angular/router': 'npm:@angular/router@5.2.0/bundles/router.umd.js',
 '@angular/forms': 'npm:@angular/forms@5.2.0/bundles/forms.umd.js',
 '@angular/upgrade': 'npm:@angular/upgrade@5.2.0/bundles/upgrade.umd.js',
 '@angular/upgrade/static': 'npm:@angular/upgrade@5.2.0/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ts':                        'npm:plugin-typescript@4.0.10/lib/plugin.js',
      'typescript':                'npm:typescript@2.0.3/lib/typescript.js',
      'primeng':                   'npm:primeng@5.2.3'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      primeng: {
        defaultExtension: 'js'
      }
    }
  });

  if (!global.noBootstrap) { bootstrap(); }

  // Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
  function bootstrap() {
    console.log('Auto-bootstrapping');

    // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
    System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));

    // bootstrap and launch the app (equivalent to standard main.ts)
    Promise.all([
      System.import('@angular/platform-browser-dynamic'),
      getAppModule()
    ])
    .then(function (imports) {
      var platform = imports[0];
      var app      = imports[1];
      platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
    })
    .catch(function(err){ console.error(err); });
  }

  // Import AppModule or make the default AppModule if there isn't one
  // returns a promise for the AppModule
  function getAppModule() {
    if (global.noAppModule) {
      return makeAppModule();
    }
    return System.import('app/app.module').catch(makeAppModule)
  }

  function makeAppModule() {
    console.log('No AppModule; making a bare-bones, default AppModule');

    return Promise.all([
      System.import('@angular/core'),
      System.import('@angular/platform-browser'),
      System.import('app/app.component')
    ])
    .then(function (imports) {

      var core    = imports[0];
      var browser = imports[1];
      var appComp = imports[2].AppComponent;

      var AppModule = function() {}

      AppModule.annotations = [
        new core.NgModule({
          imports:      [ browser.BrowserModule ],
          declarations: [ appComp ],
          bootstrap:    [ appComp ]
        })
      ]
      return {AppModule: AppModule};
    })
  }
})(this);
<h2>PrimeNG Issue Template</h2>
<p>Please create a test case and attach the link of the plunkr to your github issue report.</p>

<div class="ui-g">
  <div class="ui-g-12 ui-g-nopad">
    <div class="ui-g-12 ui-lg-6 ui-xl-8">
      <i class="fa fa-search" style="float:left"></i>
      <span class="md-inputfield" style="float:left;margin-right:15px">
          <input type="text" pInputText size="30" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
          <label>Global Search</label>
      </span>
      <p-dropdown [options]="APIendpoint" [(ngModel)]="selectedAPIendpoint" (onChange)="updateTable()"></p-dropdown>
      <p-inputSwitch onLabel="Yes" offLabel="No" [(ngModel)]="selectedShowAcknowledged" (onChange)="updateTable()"></p-inputSwitch>
    </div>
    <div class="ui-g-12 ui-lg-6 ui-xl-4 ui-g-nopad">
      <div class="ui-g-4 ui-fluid">
        <button pButton type="button" icon="ui-icon-refresh" label="Reset" (click)="resetTable(tt)"></button>
      </div>
      <div class="ui-g-4 ui-fluid">
        <button pButton type="button" icon="ui-icon-update" label="Update" (click)="updateTable()"></button>
      </div>
      <div class="ui-g-4 ui-fluid">
        <button [disabled]="!acknowledgements" pButton type="button" icon="ui-icon-file-download" label="CSV" (click)="tt.exportCSV()"></button>
      </div>
    </div>
  </div>
</div>

<p-table #tt [columns]="cols" [value]="acknowledgements" [paginator]="true" [rows]="5" [rowsPerPageOptions]="[25,50,100]" selectionMode="single" [(selection)]="selectedAcknowledgement" (onRowSelect)="onRowSelect($event)" exportFilename="{{acknowledgement.DataChangeTypeName}}Acknowledgements"
sortField="DataChangePrimaryID" sortOrder="-1" [responsive]="true" dataKey="DataChangePrimaryID">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th rowspan="2" style="width:70px">Details</th>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th *ngFor="let col of columns" [ngSwitch]="col.field">
        <input *ngSwitchCase="'DataChangePrimaryID'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')" style="width:100%">
        <p-multiSelect *ngSwitchCase="'ClientStatusID'" [options]="statusID" [(ngModel)]="selectedClientStatusID" defaultLabel="All Client Status IDs" (onChange)="tt.filter($event.value=selectedClientStatusID,col.field,'in')" styleClass="ui-column-filter" [style]="{'width':'100%'}"></p-multiSelect>
        <p-multiSelect *ngSwitchCase="'AcknowledgementStatusID'" [options]="ackStatusID" [(ngModel)]="selectedAckStatusID" defaultLabel="All Ack Status IDs" (onChange)="tt.filter($event.value=selectedAckStatusID,col.field,'in')" styleClass="ui-column-filter"
        [style]="{'width':'100%'}"></p-multiSelect>
        <p-multiSelect *ngSwitchCase="'BizType'" [options]="bizType" [(ngModel)]="selectedBizType" defaultLabel="All Biz Types" (onChange)="tt.filter($event.value=selectedBizType,col.field,'in')" styleClass="ui-column-filter" [style]="{'width':'100%'}"></p-multiSelect>
        <p-calendar *ngSwitchCase="'AcknowledgedDate'" [(ngModel)]="dateFilter" placeholder="Select Date" showIcon="true" dateFormat="yy-mm-dd" dataType="string" (onSelect)="tt.filter($event.value=dateFilter,col.field,col.filterMatchMode)" styleClass="ui-column-filter"
        [style]="{'width':'100%'}"></p-calendar>
        <input *ngSwitchCase="'ClientComment'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')" style="width:100%">
        <input *ngSwitchCase="'SupplimentData'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')" style="width:100%">
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded">
    <tr [pSelectableRow]="rowData">
      <td>
        <a href="#" [pRowToggler]="rowData">
          <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
        </a>
      </td>
      <td><span class="ui-column-title">ID / Number</span> {{rowData.DataChangePrimaryID}}</td>

      <td *ngIf="rowData.ClientStatusID=='0'"><span class="ui-column-title">Nucor Status</span> Not yet acknowledged</td>
      <td *ngIf="rowData.ClientStatusID=='1'"><span class="ui-column-title">Nucor Status</span> Success</td>
      <td *ngIf="rowData.ClientStatusID=='2'"><span class="ui-column-title">Nucor Status</span> Error</td>

      <td *ngIf="rowData.AcknowledgementStatusID=='1'"><span class="ui-column-title">DJJ Status</span> Requires Acknowledgement</td>
      <td *ngIf="rowData.AcknowledgementStatusID=='2'"><span class="ui-column-title">DJJ Status</span> Awaiting Acknowledgement</td>
      <td *ngIf="rowData.AcknowledgementStatusID=='3'"><span class="ui-column-title">DJJ Status</span> Success</td>
      <td *ngIf="rowData.AcknowledgementStatusID=='7'"><span class="ui-column-title">DJJ Status</span> Max Error</td>

      <td *ngIf="rowData.BizType=='B '"><span class="ui-column-title">Biz Type</span> Brokered</td>
      <td *ngIf="rowData.BizType=='Scale'"><span class="ui-column-title">Biz Type</span>ScaleConnect</td>

      <td><span class="ui-column-title">Acknowledged Date</span>{{rowData.AcknowledgedDate | date}}</td>
      <td><span class="ui-column-title">Client Comment</span>{{rowData.ClientComment}}</td>
      <td><span class="ui-column-title">Shipments</span>{{rowData.SupplimentData}}</td>

    </tr>
  </ng-template>
  <ng-template pTemplate="rowexpansion" let-rowData let-acknowledgement let-columns="columns">
    <div class="ui-g">
      <div class="ui-g-12">
        <h2>Acknowledgement Details: {{acknowledgement.DataChangePrimaryID}}</h2>
        <h2>Comment: {{acknowledgement.ClientComment}}</h2>
      </div>
    </div>
  </ng-template>
  <ng-template pTemplate="summary" let-acknowledgement let-rowData let-columns="columns">
    <span *ngIf="acknowledgements?.length> 1">
                      There are {{acknowledgements?.length}}
                      <span *ngFor="let acknowledgement of acknowledgements; let firstItem = first;let col of columns">
                        <span *ngIf="firstItem">{{acknowledgement?.DataChangeTypeName}}s</span>
      </span>
    </span>
    <span *ngIf="acknowledgements?.length == 1">
                      There is {{acknowledgements?.length}}
                      <span *ngFor="let acknowledgement of acknowledgements; let firstItem = first;let col of columns">
                          <span *ngIf="firstItem">{{acknowledgement?.DataChangeTypeName}}</span>
    </span>
    </span>
  </ng-template>
  <ng-template pTemplate="emptymessage" let-columns>
    <tr>
      <td [attr.colspan]="columns.length">
        No records found
      </td>
    </tr>
  </ng-template>
</p-table>

<p-dataTable #exportCSV #dt [value]="acknowledgements" [rows]="5" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" [globalFilter]="globalFilter" reorderableColumns="true" expandableRows="true" [responsive]="true" sortField="DataChangePrimaryID"
                sortOrder="-1" selectionMode="single" (onRowSelect)="onRowSelect($event)" (onRowExpand)="onRowExpand($event)" [(selection)]="selectedAcknowledgement" exportFilename="{{acknowledgement.DataChangeTypeName}}Acknowledgements" rowExpandMode="single">
                <!-- expander looks at the template component of this page -->
                <p-column expander="true" header="Details" styleClass="col-icon"></p-column>
                <p-column field="DataChangePrimaryID" header="ID / Number" [sortable]="true" [filter]="true" filterMatchMode="contains" styleClass="col-data"></p-column>
                <p-column field="ClientStatusID" header="Client Status ID" [sortable]="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
                    <ng-template pTemplate="filter" let-col>
                        <p-multiSelect [disabled]="!acknowledgements" [options]="statusID" [(ngModel)]="selectedClientStatusID" defaultLabel="All Client Status IDs" (onChange)="dt.filter($event.value=selectedClientStatusID,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
                    </ng-template>
                    <ng-template let-acknowledgement="rowData" pTemplate="body">
                        <span *ngIf="acknowledgement.ClientStatusID=='0'">Not yet acknowledged</span>
                        <span *ngIf="acknowledgement.ClientStatusID=='1'">Success</span>
                        <span *ngIf="acknowledgement.ClientStatusID=='2'">Error</span>
                    </ng-template>
                </p-column>
                <p-column field="AcknowledgementStatusID" header="Acknowledgement Status ID" [sortable]="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
                    <ng-template pTemplate="filter" let-col>
                        <p-multiSelect [disabled]="!acknowledgements" [options]="ackStatusID" [(ngModel)]="selectedAckStatusID" defaultLabel="All Ack Status IDs" (onChange)="dt.filter($event.value=selectedAckStatusID,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
                    </ng-template>
                    <ng-template let-acknowledgement="rowData" pTemplate="body">
                        <span *ngIf="acknowledgement.AcknowledgementStatusID=='1'">Requires Acknowledgement</span>
                        <span *ngIf="acknowledgement.AcknowledgementStatusID=='2'">Awaiting Acknowledgement</span>
                        <span *ngIf="acknowledgement.AcknowledgementStatusID=='3'">Success</span>
                        <span *ngIf="acknowledgement.AcknowledgementStatusID=='7'">Max Error</span>
                    </ng-template>
                </p-column>
                <p-column field="BizType" header="Biz Type" [sortable]="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
                    <ng-template pTemplate="filter" let-col>
                        <p-multiSelect [disabled]="!acknowledgements" [options]="bizType" [(ngModel)]="selectedBizType" defaultLabel="All Biz Types" (onChange)="dt.filter($event.value=selectedBizType,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
                    </ng-template>
                    <ng-template let-acknowledgement="rowData" pTemplate="body">
                        <span *ngIf="acknowledgement.BizType=='B '">Brokered</span>
                        <span *ngIf="acknowledgement.BizType=='Scale'">ScaleConnect</span>
                    </ng-template>
                </p-column>
                <p-column field="AcknowledgedDate" header="Acknowledged Date" [sortable]="true" [filter]="true" filterMatchMode="contains" [style]="{'overflow':'visible'}">
                    <ng-template pTemplate="filter" let-col>
                        <p-calendar [disabled]="!acknowledgements" [(ngModel)]="dateFilter" placeholder="Select Date" showIcon="true" dateFormat="yy-mm-dd" dataType="string" (onSelect)="dt.filter($event.value=dateFilter,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-calendar>
                    </ng-template>
                    <ng-template let-acknowledgement="rowData" pTemplate>
                        {{acknowledgement.AcknowledgedDate | date:'medium'}}
                    </ng-template>
                </p-column>
                <p-column field="ClientComment" header="Client Comment" [sortable]="true" [filter]="true" filterMatchMode="contains">
                    <ng-template let-acknowledgement="rowData" pTemplate>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('BPEL')">{{acknowledgement?.ClientComment | slice:0:15}} BPEL Fault</span>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('ITEM_DESCRIPTION')">{{acknowledgement?.ClientComment | slice:0:15}} No Item Description. Please check that there is a value for ConsumerItemRefID / Nucor Item ID. If there is no ConsumerItemRefID / Nucor Item ID you will need to add an item mapping for the item from DJJ to Nucor.</span>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('You cannot enter a transaction date that is earlier than the creation date or shipped date on the shipment')">{{acknowledgement?.ClientComment | slice:0:15}} {{acknowledgement?.ClientComment | slice:149}}</span>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('Table_name:RCV_TRANSACTIONS_INTERFACE Column_name:QUANTITY Error message name:RCV_SHIP_QTY_OVER_TOLERANCE Error message:Warning: ')">{{acknowledgement?.ClientComment | slice:0:15}} {{acknowledgement?.ClientComment | slice:145}}</span>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('Please enter a GL Date within an open inventory accounting period.')">{{acknowledgement?.ClientComment | slice:0:15}} {{acknowledgement?.ClientComment | slice:145:212}}</span>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('The ITEM_ID specified is invalid.  The value specified')">{{acknowledgement?.ClientComment | slice:0:15}} {{acknowledgement?.ClientComment | slice:166:235}}</span>
                        <span *ngIf="acknowledgement?.ClientComment?.includes('The expected delivery date')">{{acknowledgement?.ClientComment | slice:0:15}} Please check that the Estimated Arrival Date is earlier than the Date Shipped.</span>
                        <!-- FlowId:8916623:shipment# 6847264_1 cannot be accepted as nuc_scale_connect_yn flag for the item:1000682 is set to N; -->
                        <span *ngIf="
                            !acknowledgement?.ClientComment?.includes('ITEM_DESCRIPTION')
                            && !acknowledgement?.ClientComment?.includes('BPEL')
                            && !acknowledgement?.ClientComment?.includes('You cannot enter a transaction date that is earlier than the creation date or shipped date on the shipment')
                            && !acknowledgement?.ClientComment?.includes('Table_name:RCV_TRANSACTIONS_INTERFACE Column_name:QUANTITY Error message name:RCV_SHIP_QTY_OVER_TOLERANCE Error message:Warning:')
                            && !acknowledgement?.ClientComment?.includes('Please enter a GL Date within an open inventory accounting period.')
                            && !acknowledgement?.ClientComment?.includes('The ITEM_ID specified is invalid.  The value specified')
                            && !acknowledgement?.ClientComment?.includes('The expected delivery date')
                            ">{{acknowledgement.ClientComment}}</span>
                    </ng-template>
                </p-column>
                <div *ngIf="selectedAPIendpoint==='1'">
                    <p-column field="SupplimentData" header="Shipments" [sortable]="true" [filter]="true" filterMatchMode="contains"></p-column>
                </div>
                <!-- These columns are hidden so that they show up on the ExportCSV. They also have the filter so that they can be searched when multiple acknowledgements are shown-->
                <p-column field="DataChangeTypeName" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="DataChangeID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="APIUserID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="ChangeVersionID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="DataChangeTypeID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="DataChangeChildTypeID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="APICallBatchID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="AcknowledgementStatusID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="AcknowledgementStatusName" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="AcknowledgementStatusDesc" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="ClientStatusID" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="ErrorCount" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="MaxErrorCount" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="WaitTimeInterval" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <p-column field="MaxTimeInterval" hidden="true" [filter]="true" filterMatchMode="contains"></p-column>
                <ng-template let-acknowledgement pTemplate="rowexpansion">
                    <div class="ui-g">
                        <div class="ui-g-12">
                            <h2>Acknowledgement Details: {{acknowledgement.DataChangePrimaryID}}</h2>
                        </div>
                        <div class="ui-g-12 ui-md-6 ui-lg-4">
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Nucor Status ID: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.ClientStatusID}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Nucor Comment: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.ClientComment}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">DJJ Status ID: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.AcknowledgementStatusID}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">DJJ Status Name: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.AcknowledgementStatusName}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">DJJ Status Description: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.AcknowledgementStatusDesc}}
                                </div>
                            </div>
                        </div>
                        <div class="ui-g-12 ui-md-6 ui-lg-4">
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Error Count: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.ErrorCount}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Max Error Count: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.MaxErrorCount}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Wait Time Interval: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.WaitTimeInterval}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Max Time Interval: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.MaxTimeInterval}}
                                </div>
                            </div>
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Acknowledged Date: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.AcknowledgedDate | date:'medium'}}
                                </div>
                            </div>
                        </div>
                        <div *ngIf="acknowledgement.DataChangeTypeID===1" class="ui-g-12 ui-md-6 ui-lg-4">
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-4">Shipments: </div>
                                <div class="ui-g-8">
                                    {{acknowledgement.SupplimentData}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Purchase Orders -->
                    <svg *ngIf="poLoading" class="splash-loader" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                    </svg>
                    <div *ngIf="acknowledgement.DataChangeTypeID===1">
                        <div *ngFor="let PO of purchaseOrders" class="ui-g">
                            <div class="ui-g-12 ui-lg-8">
                                <h2>Purchase Order Details: {{PO.POID}}</h2>
                                <div class="ui-g-12 ui-md-6 ui-lg-6">
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Effective Date: </div>
                                        <div class="ui-g-8">
                                            {{PO.EffectiveDate | date}}
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Quantity: </div>
                                        <div class="ui-g-8">
                                            <div *ngFor="let POLine of PO.POLine">
                                                {{POLine.QtyOrderedLB | number:'1.0-0'}} LBS
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Price Rate: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <div *ngFor="let ShipToLocation of POLine.ShipToLocation">
                                                    {{ShipToLocation.PriceRate | currency:'USD':true:'1.2-2'}} per {{ShipToLocation.PriceRateUOMCode}}
                                                </div>
                                            </ng-template>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Shipper #: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <ng-template ngFor [ngForOf]="POLine.ShipToLocation" let-ShipToLocation>
                                                    <div *ngFor="let POFufillment of ShipToLocation.POFufillment">
                                                        {{POFufillment.SupplierID}}
                                                    </div>
                                                </ng-template>
                                            </ng-template>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Freight: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <ng-template ngFor [ngForOf]="POLine.ShipToLocation" let-ShipToLocation>
                                                    <ng-template ngFor [ngForOf]="ShipToLocation.POFufillment" let-POFufillment>
                                                        <div *ngFor="let FreightRate of POFufillment.FreightRate">
                                                            {{FreightRate.FrtEffectiveRate | currency:'USD':true:'1.2-2'}} per {{FreightRate.FrtEffectiveRateUOMCode}}
                                                        </div>
                                                    </ng-template>
                                                </ng-template>
                                            </ng-template>
                                        </div>
                                        <div class="ui-g-12 ui-g-nopad">
                                            <div class="ui-g-4"> Freight Vendor: </div>
                                            <div class="ui-g-8">
                                                <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                    <ng-template ngFor [ngForOf]="POLine.ShipToLocation" let-ShipToLocation>
                                                        <ng-template ngFor [ngForOf]="ShipToLocation.POFufillment" let-POFufillment>
                                                            <div *ngFor="let FreightRate of POFufillment.FreightRate">
                                                                {{FreightRate.MainFrtVendorName}}
                                                            </div>
                                                        </ng-template>
                                                    </ng-template>
                                                </ng-template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-g-12 ui-md-6 ui-lg-6">
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Expiration Date: </div>
                                        <div class="ui-g-8">
                                            {{PO.ExpirationDate | date}}
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Material: </div>
                                        <div class="ui-g-8">
                                            <div *ngFor="let POLine of PO.POLine">
                                                {{POLine.ItemLongName}} ({{POLine.ItemID}})
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Total Price: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <div *ngFor="let ShipToLocation of POLine.ShipToLocation">
                                                    {{POLine.QtyOrderedLB | number:'1.0-0'}} {{ShipToLocation.PriceRate | currency:'USD':true:'1.2-2'}} per {{ShipToLocation.PriceRateUOMCode}}
                                                </div>
                                            </ng-template>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Origin: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <ng-template ngFor [ngForOf]="POLine.ShipToLocation" let-ShipToLocation>
                                                    <ng-template ngFor [ngForOf]="ShipToLocation.POFufillment" let-POFufillment>
                                                        <div *ngFor="let FreightRate of POFufillment.FreightRate">
                                                            {{POFufillment.SupplierName}}, {{POFufillment.ShipFromCity}}, {{POFufillment.ShipFromState}}
                                                        </div>
                                                    </ng-template>
                                                </ng-template>
                                            </ng-template>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Guaranteed Minimum: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <ng-template ngFor [ngForOf]="POLine.ShipToLocation" let-ShipToLocation>
                                                    <ng-template ngFor [ngForOf]="ShipToLocation.POFufillment" let-POFufillment>
                                                        <div *ngFor="let FreightRate of POFufillment.FreightRate">
                                                            {{FreightRate.FrtEffectiveRateMinLB | number:'1.0-0'}} {{FreightRate.FrtEffectiveRateMinUOMCode}}
                                                        </div>
                                                    </ng-template>
                                                </ng-template>
                                            </ng-template>
                                        </div>
                                    </div>
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-4">Mode: </div>
                                        <div class="ui-g-8">
                                            <ng-template ngFor [ngForOf]="PO.POLine" let-POLine>
                                                <div *ngFor="let ShipToLocation of POLine.ShipToLocation">
                                                    {{ShipToLocation.ModeCode}}
                                                </div>
                                            </ng-template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </p-dataTable>

<p-dialog header="Acknowledge {{acknowledgement.DataChangeTypeName}} {{acknowledgement.DataChangePrimaryID}}" [resizable]="false" responsive="true" width="350" [(visible)]="displayDialog" [formGroup]="form" (onAfterHide)="closeForm()" [contentStyle]="{'overflow':'visible'}">
  <div class="ui-g ui-fluid form-group" *ngIf="acknowledgement">
    <!-- hidden -->
    <div [hidden]="acknowledgement">
      <div class="ui-g-12">
        <span class="md-inputfield">
                                <input pInputText id="DataChangePrimaryID" formControlName="DataChangePrimaryID" [(ngModel)]="acknowledgement.DataChangePrimaryID" name="DataChangePrimaryID">
                                <label>Document ID</label>
                            </span>
      </div>
      <div class="ui-g-12">
        <span class="md-inputfield">
                                <input pInputText id="APIUserID" formControlName="APIUserID" [(ngModel)]="acknowledgement.APIUserID" name="APIUserID">
                                <label>API User ID</label>
                            </span>
      </div>
      <div class="ui-g-12">
        <span class="md-inputfield">
                                <input pInputText id="ChangeVersionID" formControlName="ChangeVersionID" [(ngModel)]="acknowledgement.ChangeVersionID" name="ChangeVersionID">
                                <label>Change Version ID</label>
                            </span>
      </div>
      <div class="ui-g-12">
        <span class="md-inputfield">
                                <input pInputText id="DataChangeTypeID" formControlName="DataChangeTypeID" [(ngModel)]="acknowledgement.DataChangeTypeID" name="DataChangeTypeID">
                                <label>Data Change Type ID</label>
                            </span>
      </div>
      <div class="ui-g-12">
        <span class="md-inputfield">
                                <input pInputText id="DataChangeChildTypeID" formControlName="DataChangeChildTypeID" [(ngModel)]="acknowledgement.DataChangeChildTypeID" name="DataChangeChildTypeID">
                                <label>Data Change Child Type ID</label>
                            </span>
      </div>
    </div>
    <!-- hidden -->
    <div class="ui-g-12">
      <label class="md-inputfield" style="padding-bottom:5px;color:gray">Client Status ID</label>
      <p-dropdown [options]="statusID" [autoWidth]="false" placeholder="Select a Status ID" formControlName="StatusID" [(ngModel)]="acknowledgedStatusID" styleClass="ui-column-filter"></p-dropdown>
    </div>
    <div class="ui-g-12">
      <label class="md-inputfield" style="padding-bottom:5px;color:gray">Acknowledgement Status ID</label>
      <!-- <p-dropdown [options]="ackStatusID" [autoWidth]="false" placeholder="Select a Ack Status ID" formControlName="AcknowledgementStatusID" [(ngModel)]="acknowledgedAckStatusID" styleClass="ui-column-filter"></p-dropdown> -->
      <p-dropdown [options]="ackStatusID" [autoWidth]="false" placeholder="Select a Ack Status ID" formControlName="AcknowledgementStatusID" [(ngModel)]="acknowledgedAckStatusID" styleClass="ui-column-filter"></p-dropdown>
    </div>
    <div class="ui-g-12">
      <label label class="md-inputfield" style="padding-bottom:5px;color:gray">Comment</label>
      <textarea pInputTextarea rows="8" cols="30" id="Comment" formControlName="Comment" [(ngModel)]="acknowledgement.ClientComment" name="Comment"></textarea>
    </div>
  </div>
  <p-footer>
    <button styleClass="flat" type="submit" pButton icon="ui-icon-send" label="Re-Process" [disabled]="!form.valid" (click)="reprocessAcknowledgement(form.value)"></button>
    <button styleClass="flat" type="submit" pButton icon="ui-icon-send" label="Submit" [disabled]="!form.valid" (click)="modifyAcknowledgement(form.value)"></button>
  </p-footer>
</p-dialog>
# PrimeNG Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.