Asp.net And HTML Css And Web Development: How To Sort Row Of Grid in Angular 6

Asp.net And HTML Css And Web Development: How To Sort Row Of Grid in Angular 6: How To Sort Row Of Grid in Angular 6 Setup For Sortable JS 1). Install Plugin  "'angular-sortablejs" 2). set ref...

How To Sort Row Of Grid in Angular 6

How To Sort Row Of Grid in Angular 6

Setup For Sortable JS

1). Install Plugin  "'angular-sortablejs"

2). set reference or import service
     import { SortablejsOptions } from 'angular-sortablejs';

3).Define Variable in Class
    public sortableOptions: SortablejsOptions;

4).Define Function in class for Get Rows of Grid or table
   get fieldRows() {
     return this.contractFormService.fieldRows(this.newContractIOTForm, this.discountType,                   this.discountTypeID, this.j);
    }

5).Call Method in OnInit() method
    this.sortableOptions = {
    onSort: (event: any) => {
    this.contractFormService.sortFormFields(
    this.j,
    this.newContractIOTForm,
    this.discountType,
    this.fieldRows, this.discountTypeID);
                                 }
    };


6). set property of Grid in html of Currunt ts file 

   [sortablejs]="fieldRows" [sortablejsOptions]="sortableOptions"

7). Define Common Function for sorting Functionality for Data
 
 sortFormFields(j: number, newContractIOTForm: FormGroup, discountType: string,            arrayIndexes: AbstractControl[], TypeID) {
   const discountTypeList = newContractIOTForm.get(discountType).get('DiscountTypes').value;
   if (discountTypeList) {
   for (let index = 0; index < discountTypeList.length; index++) {
   const discountTypeID = discountTypeList[index].DiscountTypeID;
  const offerFields: FormArray = this.getDiscountFields(newContractIOTForm, discountType,     discountTypeID);
   if (TypeID === discountTypeID) {
   const _temp: FormArray = offerFields.controls[j] as FormArray;
    arrayIndexes.forEach((ele: FormGroup, i) => {
  const fields = _temp.controls[i] as FormGroup;
fields.setValue(ele.value);
});
}

How to Generate Pdf in angular 6

How to Generate Pdf in angular 6

_________________________________________________________________________________

import { Injectable } from '@angular/core';
import * as jspdf from 'jspdf';
import 'jspdf-autotable';
import * as logoFile from './tritexlogo.js';
import { formatCurrency, formatNumber } from '@angular/common';
@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  generatePDF(data) {
    const DiscountPeriodStyle = { lineWidth: 0.25, overflow: 'linebreak', halign: 'left', fontSize: 9 };
    const DiscountPeriodHeader = [
      [
        {
          content: 'Discount Periods - ' + 'Short stub', colSpan: 3, styles: { halign: 'center' }
        }
      ],
      [
        {
          content: 'Sr. No.', styles: DiscountPeriodStyle
        },
        {
          content: 'Start Date', styles: DiscountPeriodStyle
        },
        {
          content: 'End Date', styles: DiscountPeriodStyle
        }],

    ];
    const OfferIsBandedTied = (data.Offer && data.Offer.DiscountTypes) ?
      data.Offer.DiscountTypes.filter(x => x.DiscountTypeID === 4).length : 0;
    const BidIsBandedTied = (data.Bid && data.Bid.DiscountTypes) ? data.Bid.DiscountTypes.filter(x => x.DiscountTypeID === 4).length : 0;
    let pageLayout = '';
    if (BidIsBandedTied > 0 || OfferIsBandedTied > 0) {
      pageLayout = 'landscape';
    }
    const pdf = new jspdf(pageLayout);
    const yOffset = (pdf.internal.pageSize.height / 2);
    const LogoPosition = (pageLayout && pageLayout === 'landscape') ? ((pdf.internal.pageSize.height / 2) + 15) : (yOffset / 2);
    pdf.addImage(logoFile.logoBase64, 'JPEG', LogoPosition, 5);
    const HeaderStyle = { fontStyle: 'bold', fontSize: 9, cellWidth: (pdf.internal.pageSize.width / 9) };
    const item = [];
    if (data.CounterPartyTADIGCodes) {
      data.CounterPartyTADIGCodes = data.CounterPartyTADIGCodes.filter(x => x.IsSelected === true);
    }
    if (data.TradingEntityTADIGCodes) {
      data.TradingEntityTADIGCodes = data.TradingEntityTADIGCodes.filter(x => x.IsSelected === true);
    }
    pdf.autoTable({
      theme: 'plain',
      startY: 41,
      styles: {
        cellPadding: 1,
        fontSize: 9
      },
      tableWidth: (pdf.internal.pageSize.width) - 20,
      margin: { left: 10, top: 10 },
      columnStyles: {
        2: {
          cellWidth: (pdf.internal.pageSize.width / 6)
        },
        5: {
          cellWidth: (pdf.internal.pageSize.width / 6)
        }
      },
      body: [
        [
          { content: 'Tritex ContractID', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'ReferenceNo'), colSpan: 4 }
        ],
        [
          { content: 'Deal Type', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'ContractDealType'), colSpan: 4 }
        ],
        [
          { content: 'Direction', styles: HeaderStyle },
          { content: ':' },
          { content: data.TypeName, colSpan: 4 }
        ],
        [
          { content: '', colSpan: 6 }
        ],

        [
          { content: 'Party A', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'TradingEntityName') },
          { content: 'Party B', styles: HeaderStyle },
          { content: ':' },
          { content: data.CounterPartyName }
        ],
        [
          { content: 'Party A TCID', styles: HeaderStyle },
          { content: ':' },
          { content: data.TradingEntityTCID },
          { content: 'Party B TCID', styles: HeaderStyle },
          { content: ':' },
          { content: data.CounterPartyTCID }
        ],
        [
          { content: 'Party A TAP Codes', styles: HeaderStyle },
          { content: ':' },
          {
            content: this.checkExistValue(data, 'TradingEntityTADIGCodes', 'Array', 'TadigCode')
          }
          ,
          { content: 'Party B TAP Codes', styles: HeaderStyle },
          { content: ':' },
          {
            content: this.checkExistValue(data, 'CounterPartyTADIGCodes', 'Array', 'TadigCode')
          }
        ],
        [
          { content: '', colSpan: 6 }
        ],

        [
          { content: 'Trade Date', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'TradeDate'), colSpan: 4 }
        ],
        [
          { content: 'Start Date', styles: HeaderStyle },
          { content: ':' },
          { content: data.StartDate, colSpan: 4 }
        ],
        [
          { content: 'Auto-renew', styles: HeaderStyle },
          { content: ':' },
          { content: data.IsAutoRenewal ? 'Yes' : 'No', colSpan: 4 }
        ],
        [
          { content: 'End date of First Discount Period', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'EndDate'), colSpan: 4 }
        ],
        [
          { content: 'Number of Discount Period', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'NoOfDiscountPeriods'), colSpan: 4 }
        ],
        [
          { content: 'Length of Discount Period', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data, 'DiscountPeriodName'), colSpan: 4 }
        ],
        [
          { content: 'Agreement Notification Period', styles: HeaderStyle },
          { content: ':' },
          {
            content: this.checkExistValue(data, 'TerminationName'), colSpan: 4
          }
        ],
      ]
    });
    data.DiscountPeriods.forEach(element => {
      item.push([element.DiscountPeriod, element.DiscountPeriodStartDate, element.DiscountPeriodEndDate]);
    });
    data.DiscountPeriods = item;
    pdf.autoTable({
      theme: 'plain',
      margin: { left: 10, top: 10 },
      head: DiscountPeriodHeader,
      tableWidth: (pdf.internal.pageSize.width / 2),
      body: data.DiscountPeriods,
      styles: DiscountPeriodStyle,
      didDrawCell: data.DiscountPeriods
    });
    pdf.autoTable({
      theme: 'plain',
      styles: {
        cellPadding: 1,
        fontSize: 9
      },
      columnStyles: {

        2: {
          cellWidth: (pdf.internal.pageSize.width / 6)
        },
        5: {
          cellWidth: (pdf.internal.pageSize.width / 6)
        }
      },
      pageBreak: (pageLayout && pageLayout === 'landscape') ? 'avoid' : 'auto',
      tableWidth: (pdf.internal.pageSize.width) - 20,
      margin: { left: 10, top: 10 },
      body: [
        [
          {
            content: 'Party A HPMN', styles: {
              fontStyle: 'bold',
              fontSize: 9,
              cellWidth: (pdf.internal.pageSize.width / 9),
              valign: 'middle',
              halign: 'center',
              textColor: [120, 120, 120]
            },
            colSpan: 3
          },

          {
            content: 'Party B VPMN', styles: {
              fontStyle: 'bold',
              fontSize: 9,
              cellWidth: (pdf.internal.pageSize.width / 9),
              valign: 'middle',
              halign: 'center',
              textColor: [120, 120, 120]
            },
            colSpan: 3
          },

        ],

        [
          { content: 'Settlement', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data.Offer, 'SettlementTypeName') },
          { content: 'Settlement', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data.Bid, 'SettlementTypeName') }
        ],
        [
          { content: 'Tax Treatment', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data.Offer, 'TaxTreatmentValue') },
          { content: 'Tax Treatment', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data.Bid, 'TaxTreatmentValue') }
        ],
        [
          { content: 'Exclusions Services', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data.Offer, 'Exclusions', 'Array', 'ExclusionName') },
          { content: 'Exclusions Services', styles: HeaderStyle },
          { content: ':' },
          { content: this.checkExistValue(data.Bid, 'Exclusions', 'Array', 'ExclusionName') }
        ],
        [
          { content: 'Exclusion Counties', styles: HeaderStyle },
          { content: ':' },
          {
            content: (data.Offer ? this.checkExistValue(data.Offer.ExclusionsCountryRegion, 'Countries', 'Array', 'CountryName')
              : 'N/A')
          },
          { content: 'Exclusion Counties', styles: HeaderStyle },
          { content: ':' },
          {
            content: (data.Bid ? this.checkExistValue(data.Bid.ExclusionsCountryRegion, 'Countries', 'Array', 'CountryName')
              : 'N/A')
          }
        ],
      ]
    });
    if (data && data.Offer) {
      this.getDiscountGrids(data.Offer, pdf, DiscountPeriodStyle, 'A', 'HPMN');
    }
    if (data && data.Bid) {
      this.getDiscountGrids(data.Bid, pdf, DiscountPeriodStyle, 'B', 'VPMN');
    }
    this.setWaterMark(pdf);

    pdf.save(data.ReferenceNo + '.pdf');
  }
  getDiscountGrids(data, pdf, DiscountPeriodStyle, type, value) {
    pdf.autoTable({
      theme: 'plain',
      styles: {
        overflow: 'linebreak',
        halign: 'left',
        fontStyle: 'bold', fontSize: 12,
      },
      tableWidth: (pdf.internal.pageSize.width) - 20,
      margin: { left: 10, top: 10 },
      body:
        [
          { content: 'Party ' + type + ' as ' + value + ' Pricing Grid ' }
        ]
    });
    if (data.Financial && data.Financial.length > 0) {
      this.getAYCEGrid(data.Financial, pdf, DiscountPeriodStyle);
    }
    if (data.FlatRate && data.FlatRate.length > 0) {
      this.getFlatRateGrid(data.FlatRate, pdf, DiscountPeriodStyle);
    }
    if (data.BalancedUnbalanced && data.BalancedUnbalanced.length > 0) {
      this.getBalancedUnbalancedGrid(data.BalancedUnbalanced, pdf, DiscountPeriodStyle);
    }
    if (data.BandedTiered && data.BandedTiered.length > 0) {
      this.getBandedTieredGrid(data.BandedTiered, pdf, DiscountPeriodStyle);
    }
  }
  getFlatRateGrid(FlatRate, pdf, DiscountPeriodStyle) {
    FlatRate.forEach((el, index) => {
      const PricingGridHeader = [
        [
          {
            content: 'Flat Rate', colSpan: 8, styles: { halign: 'center' }
          }
        ],
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 8, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Terminated in', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Traffic rate', styles: DiscountPeriodStyle
          },
          {
            content: 'per', styles: DiscountPeriodStyle
          },
          {
            content: 'Charging Interval', styles: DiscountPeriodStyle
          }
        ],

      ];
      const PricingGridHeader1 = [
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 8, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Terminated in', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Traffic rate', styles: DiscountPeriodStyle
          },
          {
            content: 'per', styles: DiscountPeriodStyle
          },
          {
            content: 'Charging Interval', styles: DiscountPeriodStyle
          }
        ],

      ];

      const itemlist = [];
      el.forEach(element => {
        itemlist.push([element.ServiceName, element.OperatorAffiliate.map(x => x.TadigCode), element.OriginatedIn.map(x => x.CountryName),
        element.TerminatedName, element.ISO, this.convertDecimalFormat(element.TrafficRate),
        element.PerUnitName, element.ChargingIntervalName]);
      });
      pdf.autoTable({
        theme: 'plain',
        margin: { left: 10, top: 10 },
        head: index === 0 ? PricingGridHeader : PricingGridHeader1,
        pageBreak: 'auto',
        showHead: 'firstPage',
        tableWidth: (pdf.internal.pageSize.width) - 20,
        body: itemlist,
        styles: DiscountPeriodStyle,
        didDrawCell: itemlist
      });

    });

  }
  getBalancedUnbalancedGrid(BalancedUnbalanced, pdf, DiscountPeriodStyle) {
    BalancedUnbalanced.forEach((el, index) => {
      const PricingGridHeader = [
        [
          {
            content: 'Balanced / Unbalanced', colSpan: 9, styles: { halign: 'center' }
          }
        ],
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 9, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Terminated in', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Balanced Traffic rate', styles: DiscountPeriodStyle
          },
          {
            content: 'UnBalanced Traffic rate', styles: DiscountPeriodStyle
          },
          {
            content: 'per', styles: DiscountPeriodStyle
          },
          {
            content: 'Charging Interval', styles: DiscountPeriodStyle
          }
        ],

      ];
      const PricingGridHeader1 = [
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 9, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Terminated in', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Balanced Traffic rate', styles: DiscountPeriodStyle
          },
          {
            content: 'UnBalanced Traffic rate', styles: DiscountPeriodStyle
          },
          {
            content: 'per', styles: DiscountPeriodStyle
          },
          {
            content: 'Charging Interval', styles: DiscountPeriodStyle
          }
        ],

      ];
      const itemlist = [];
      el.forEach(element => {
        itemlist.push([element.ServiceName, element.OperatorAffiliate.map(x => x.TadigCode), element.OriginatedIn.map(x => x.CountryName),
        element.TerminatedName, element.ISO, this.convertDecimalFormat(element.BalancedTrafficRate),
        this.convertDecimalFormat(element.UnbalancedTrafficRate), element.PerUnitName,
        element.ChargingIntervalName]);
      });

      pdf.autoTable({
        theme: 'plain',
        columnStyles: {
          1: {
            cellWidth: (pdf.internal.pageSize.width / 9)
          },
          2: {
            cellWidth: (pdf.internal.pageSize.width / 9)
          }
        },
        margin: { left: 10, top: 10 },
        head: index === 0 ? PricingGridHeader : PricingGridHeader1,
        pageBreak: 'auto',
        showHead: 'firstPage',
        tableWidth: (pdf.internal.pageSize.width) - 20,
        body: itemlist,
        styles: DiscountPeriodStyle,
      });

    });

  }
  getAYCEGrid(Financial, pdf, DiscountPeriodStyle) {
    Financial.forEach((el, index) => {
      const PricingGridHeader = [
        [
          {
            content: 'All You Can Eat', colSpan: 5, styles: { halign: 'center' }
          }
        ],
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 5, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'AYCERate', styles: DiscountPeriodStyle
          }

        ],

      ];
      const PricingGridHeader1 = [
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 5, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },

          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'AYCERate', styles: DiscountPeriodStyle
          }

        ],

      ];
      const itemlist = [];
      el.forEach(element => {
        itemlist.push([element.Services.map(x => x.ServiceName),
        element.OperatorAffiliate.map(x => x.TadigCode), element.OriginatedIn.map(x => x.CountryName),
        element.ISO, this.convertDecimalFormat(element.AYCERate)]);
      });

      pdf.autoTable({
        theme: 'plain',
        columnStyles: {
          1: {
            cellWidth: (pdf.internal.pageSize.width / 5)
          },
          2: {
            cellWidth: (pdf.internal.pageSize.width / 5)
          }
        },
        margin: { left: 10, top: 10 },
        head: index === 0 ? PricingGridHeader : PricingGridHeader1,
        pageBreak: 'auto',
        showHead: 'firstPage',
        tableWidth: (pdf.internal.pageSize.width) - 20,
        body: itemlist,
        styles: DiscountPeriodStyle
      });

    });

  }
  getBandedTieredGrid(BandedTiered, pdf, DiscountPeriodStyle) {
    BandedTiered.forEach((el, index) => {
      const PricingGridHeader = [
        [
          {
            content: 'Banded / Tiered', colSpan: 12, styles: { halign: 'center' }
          }
        ],
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 12, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'TerminatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Band Threshold Type', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Traffic Rate', styles: DiscountPeriodStyle
          },

          {
            content: '  \u003E\u003D  ', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Band Threshold', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Back To First', styles: DiscountPeriodStyle
          },

          {
            content: 'per ', styles: DiscountPeriodStyle
          },


          {
            content: 'Charging Interval', styles: DiscountPeriodStyle
          }
        ],

      ];
      const PricingGridHeader1 = [
        [
          {
            content: 'Discount Period -' + (index + 1), colSpan: 12, styles: { halign: 'left' }
          }
        ],
        [
          {
            content: 'Service.', styles: DiscountPeriodStyle
          },
          {
            content: 'Operator Affiliates', styles: DiscountPeriodStyle
          },
          {
            content: 'OriginatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'TerminatedIn', styles: DiscountPeriodStyle
          },
          {
            content: 'Currency', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Band Threshold Type', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Traffic Rate', styles: DiscountPeriodStyle
          },

          {
            content: '\u003E\u003D', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Band Threshold', styles: DiscountPeriodStyle
          }
          ,
          {
            content: 'Back To First', styles: DiscountPeriodStyle
          },

          {
            content: 'per ', styles: DiscountPeriodStyle
          },


          {
            content: 'Charging Interval', styles: DiscountPeriodStyle
          }
        ]

      ];

      const itemlist = [];
      el.forEach(element => {
        element.Bands.forEach((elementItem, i) => {
          if (element.Bands.length > 1) {
            if (i === 0) {
              itemlist.push([
                {
                  content: element.ServiceName, rowSpan: element.Bands.length
                },
                {
                  content: element.OperatorAffiliate.map(x => x.TadigCode), rowSpan: element.Bands.length
                },
                {
                  content: element.OriginatedIn.map(x => x.CountryName), rowSpan: element.Bands.length
                },
                {
                  content: element.TerminatedName, rowSpan: element.Bands.length
                },
                {
                  content: element.ISO, rowSpan: element.Bands.length
                }, {
                  content: elementItem.BandThresholdTypeName
                },
                {
                  content: this.convertDecimalFormat(elementItem.TrafficRate),
                },
                {
                  content: '\u003E\u003D'
                },
                {

                  content: elementItem.BandThresholdTypeName !== 'Commitment' ?
                    (elementItem.BandThresholdTypeName !== 'Volume' ? this.convertDecimalFormat(elementItem.BandThreshold) :
                      this.convertCurruncyFormat(elementItem.BandThreshold)) : ''
                },
                {
                  content: (elementItem.IsBandBackToFirst) ? 'Yes' : 'No'
                },
                {
                  content: element.PerUnitName, rowSpan: element.Bands.length
                },
                {
                  content: element.ChargingIntervalName, rowSpan: element.Bands.length
                }
              ]);
            } else {
              itemlist.push([
                elementItem.BandThresholdTypeName,
                this.convertDecimalFormat(elementItem.TrafficRate),
                '\u003E\u003D',
                elementItem.BandThresholdTypeName !== 'Commitment' ?
                  (elementItem.BandThresholdTypeName !== 'Volume' ? this.convertDecimalFormat(elementItem.BandThreshold) :
                    this.convertCurruncyFormat(elementItem.BandThreshold)) : '',
                (elementItem.IsBandBackToFirst) ? 'Yes' : 'No'
              ]);
            }
          } else {
            itemlist.push([
              {
                content: element.ServiceName
              },
              {
                content: element.OperatorAffiliate.map(x => x.TadigCode)
              },
              {
                content: element.OriginatedIn.map(x => x.CountryName)
              },
              {
                content: element.TerminatedName
              },
              {
                content: element.ISO
              },
              {
                content: elementItem.BandThresholdTypeName,
              },
              {
                content: this.convertDecimalFormat(elementItem.TrafficRate),
              },
              {
                content: '\u003E\u003D'
              },
              {
                content: elementItem.BandThresholdTypeName !== 'Commitment' ?
                  (elementItem.BandThresholdTypeName !== 'Volume' ? this.convertDecimalFormat(elementItem.BandThreshold) :
                    this.convertCurruncyFormat(elementItem.BandThreshold)) : ''
              },
              {
                content: (elementItem.IsBandBackToFirst) ? 'Yes' : 'No'
              },
              {
                content: element.PerUnitName
              },
              {
                content: element.ChargingIntervalName
              }]);
          }

        });

      });
      pdf.autoTable({
        theme: 'plain',
        margin: { left: 10, top: 10 },
        head: index === 0 ? PricingGridHeader : PricingGridHeader1,
        pageBreak: 'auto',
        showHead: 'firstPage',
        tableWidth: (pdf.internal.pageSize.width) - 20,
        body: itemlist,
        styles: DiscountPeriodStyle,
        didDrawCell: itemlist
      });


    });

  }
  checkExistValue(item, key, type?, searchkey?) {
    if (type === 'Array') {
      return (item && item[key]) ? item[key].map(x => x[searchkey]) : 'N/A';
    } else {
      return (item && item[key]) ? item[key] : 'N/A';
    }
  }
  convertDecimalFormat(rate) {
    return formatCurrency(rate, 'en', '', 'USD', '1.2-6');
  }

  convertCurruncyFormat(rate) {
    return formatNumber(rate, 'en');
  }
  setWaterMark(pdf) {
    const totalPages = pdf.internal.getNumberOfPages();
    for (let i = 1; i <= totalPages; i++) {
      pdf.setPage(i);
      // pdf.setTextColor(230);
      // pdf.setFontSize(65);
      // pdf.text((pdf.internal.pageSize.width / 2) - 30, pdf.internal.pageSize.height / 2 - 30, 'Tritex', null, 45);
      pdf.setFontSize(9);
      pdf.setTextColor(170);
      pdf.text(10, (pdf.internal.pageSize.height) - 5, 'Page-' + i);
      // pdf.text((pdf.internal.pageSize.width) - 35, 5, 'Tritex One Page PDF');
    }
  }


}

How to Generate XML in angular js (angular 6)

How to Generate XML in angular js (angular 6)


_________________________________________________________________________________

import { Injectable } from '@angular/core';
import * as XMLWriter from 'xml-writer';
import * as FileSaver from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class XmlService {
  xw = new XMLWriter;
  constructor() { }

  public generateXml(paramData: any, _ReferenceNo) {
    // Start XML Node
    this.xw = new XMLWriter;
    this.xw.startDocument();
    this.xw.startElement('root');
    this.xw.text('*TAP Instruction sheet created and approved on the Tritex IOT Management platform');
    this.generateNode(paramData, true); // For Home
    this.generateNode(paramData, false); // For Visitor
    this.xw.endElement();

    const blob = new Blob([this.xw], { type: 'application/xhtml+xml;charset=UTF-8' });
    FileSaver.saveAs(blob, _ReferenceNo + '.xhtml');
  }

  generateNode(paramData, isHome) {
    const tapValue = paramData.newTAPInstructionForm;
    const taxTreatmentList = paramData.taxTreatmentList;
    const chargingIntervalEnumList = paramData.chargingIntervalEnumList;
    const perEnumList = paramData.perEnumList;
    const serviceList = paramData.serviceList;
    const tapServiceList = paramData.tapServiceList;

    const _entity = isHome ? tapValue.HomeEntity : tapValue.VisitorEntity;
    const _sectionText = isHome ? 'HPMN' : 'VPMN';

    _entity.forEach(element => {
      // this.xw.startElement('section').writeAttribute('S', _sectionText).writeAttribute('OC', element.OperatorCode)
      //   .writeElement('tag', 'Some content');
      // this.xw.endElement();
      this.xw.startElement('section').writeAttribute('S', _sectionText).writeAttribute('OC', element.OperatorCode);
      const ISO = element.OperatorCurrencyISO;
      console.log(ISO);
      // Common Details
      this.xw.startElement('CD').writeAttribute('EDT', element.EffectiveDate);
      if (isHome) {
        this.xw.writeAttribute('PA', tapValue.TradingEntity);
        this.xw.writeAttribute('PB', tapValue.CounterParty);
        this.xw.writeAttribute('O', element.OperatorName);
        this.xw.writeAttribute('TC', element.OperatorCode);
      } else {
        this.xw.writeAttribute('PA', tapValue.TradingEntity);
        this.xw.writeAttribute('PB', tapValue.CounterParty);
        this.xw.writeAttribute('O', element.OperatorName);
        this.xw.writeAttribute('TC', element.OperatorCode);
      }

      // Period
      element.EntityDetails[0].TapService.forEach((eleTapService, periodIndex) => {
        // const tempEleTabDetails = eleTapService.TapService[periodIndex];
        this.xw.startElement('PD');
        this.xw.writeAttribute('P', 'Period' + Number(periodIndex + 1));
        this.xw.writeAttribute('SDT', (eleTapService.StartDate) ? eleTapService.StartDate as string : 'n/a');
        this.xw.writeAttribute('EDT', (eleTapService.EndDate) ? eleTapService.EndDate as string : 'n/a');
        this.xw.writeAttribute('ISO', (ISO) ? ISO as string : 'n/a');
        element.EntityDetails.forEach((eleEntity, entityIndex) => {
          const eleTabDetails = eleEntity.TapService[periodIndex].TapServicePeriodWise;

          this.xw.startElement('RW');
          this.xw.writeAttribute('PA', eleEntity.PartyATAPCode);
          this.xw.writeAttribute('PB', eleEntity.PartyBTAPCode);
          this.xw.writeAttribute('E', (element.Exclusions) ? element.Exclusions : 'n/a');
          this.xw.writeAttribute('T', taxTreatmentList.filter(x => x.EnumID === eleEntity.TaxTreatmentEnumID)
            .map(x => x.DisplayName).toString());

          eleTabDetails.forEach((eleTab) => {
            this.xw.startElement('RD');
            this.xw.writeAttribute('MS', tapServiceList.filter(x => x.EnumID === eleTab.TapServiceEnumID)
              .map(x => x.SubType).toString());
            this.xw.writeAttribute('SS', serviceList.filter(x => x.EnumID === eleTab.ServiceEnumID).map(x => x.DisplayName).toString());
            this.xw.writeElement('R', (eleTab.Rate) ? eleTab.Rate as string : 'n/a');
            if (eleTab.TapServiceEnumID === 7 || eleTab.TapServiceEnumID === 8) {
              this.xw.writeElement('P', perEnumList.filter(x => x.EnumID === eleTab.PerEnumID).map(x => x.DisplayName).toString());
            }
            this.xw.writeElement('I', chargingIntervalEnumList.filter(x => x.EnumID === eleTab.IntervalEnumID)
              .map(x => x.DisplayName).toString());
            this.xw.endElement(); // RD
          });

          this.xw.endElement(); // RW
        });
        this.xw.endElement(); // PD
      });

      this.xw.endElement(); // Common Details
      this.xw.endElement(); // section
    });
  }
}

Featured Post

How To Dynamic Upload multiple files with extra detail of model in asp.net core

 How To Dynamic Upload multiple files with extra detail of model in asp.net core  1). firstly create Model File  namespace MyModel {     pub...

Popular Posts