Asp.net And HTML Css And Web Development: How To Use Mat Table /Data Table in angular 6

Asp.net And HTML Css And Web Development: How To Use Mat Table /Data Table in angular 6: How To Use Mat Table /Data Table in angular 6 Here We Are Highlight Code in red line for Toggle Button of plus and minus for Extend Ro...

How To Use Mat Table /Data Table in angular 6

How To Use Mat Table /Data Table in angular 6

Here We Are Highlight Code in red line for Toggle Button of plus and minus for Extend Row in dataTable in Mat or Mat-table

1). From " View-Users.Component.ts" File

import { join } from 'path';
import { map } from 'rxjs/operators';
import { Component, OnInit, ViewChild } from '@angular/core';
import { SearchUser } from '../../../../../models/SearchUser.model';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { UserService } from '../../../../../services/user/user.service';
import { LoggerService } from '../../../../../services/log4ts/logger.service';
import { Router } from '@angular/router';
import swal from 'sweetalert2';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { BrowserStorageService } from '../../../../../utility/browser-storage.service';
import { AuthenticationService } from '@alfresco/adf-core';
import * as moment from 'moment';
import { ApiService } from '../../../../../services/api.service';
import { SpinnerService } from '../../../../../services/spinner.service';
import { Constants } from '../../../../../constants/app.constants';

@Component({
  selector: 'app-view-users',
  templateUrl: './view-users.component.html',
  styleUrls: ['./view-users.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ])],
})
export class ViewUsersComponent implements OnInit {
  dataSource = new MatTableDataSource();
  rowCount = 0;
  isExpansionDetailRow = null;

  error: any;
  public data: SearchUser[];
  public filterQuery = '';
  userId: string;
  responseStatus = null;
  @ViewChild('successContractSwal') successContractSwal: any;
  constructor(public userService: UserService,
    private authService: AuthenticationService,
    private apiService: ApiService,
    private spinner: SpinnerService,
    private browserStorageService: BrowserStorageService, private loggerService: LoggerService, private router: Router) {
  }
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild('MatPaginator') paginator: MatPaginator;
  displayedColumns = [
    'IsExtended', 'EmailID', 'Name', 'RoleName', 'UserBelong', 'CreatedBy', 'CreatedDate', 'Action'];
  ngOnInit() {
    this.apiService.isSpinner = false;
    this.spinner.displaySpinner(true);
    this.userId = this.browserStorageService.getLocalStorageItem('userId');
    this.getUserData();
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
  public toInt(num: string) {
    return +num;
  }
  private showPopup(type: string, title: string, text: string) {
    this.successContractSwal.type = type;
    this.successContractSwal.title = title;
    this.successContractSwal.text = text;
    this.successContractSwal.show();

  }

  getUserdetail(UserID: any) {
    this.browserStorageService.setSessionStorageItem('TritexUuid', UserID);
    this.setRedirectAddUserUrl();
  }

  setRedirectAddUserUrl() {
    this.router.navigate(['/mastersetup/users/add-users/' + new Date().getTime() + '/' + new Date().getDate()]);
  }

  public sortByWordLength = (a: any) => {
    return a.name.length;
  }

  public getDate(regDate: string) {
    const date = new Date(regDate);
    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: '2-digit' });
  }

  getUserData() {
    this.responseStatus = null;
    const UserRoleList = this.browserStorageService.getSessionStorageItem('UserRoleNames').split(',');
    this.userService.searchUser(UserRoleList.indexOf('SUPER_ADMIN') > -1 ?
      null : this.browserStorageService.getLocalStorageItem('userId'),
      localStorage.getItem('ticket-ECM')).then((res: any) => {
        this.responseStatus = res.status;
        this.data = res.result;
        this.data.forEach((element: any) => {
          element.CreatedDate = moment(element.CreatedDate, 'DD/MM/YYYY HH:mm:ss');
          element.IsExtendedRow = false;
        });

        this.dataSource = new MatTableDataSource(this.data);
        // inner object filter
        this.dataSource.filterPredicate = (data: any, filter: string) => {
          const accumulator = (currentTerm, key) => {
            return key === 'UserGroupOperator' ? currentTerm + data.UserGroupOperator.map(x => x.Code).join('')
              + data.UserGroupOperator.map(x => x.Name).join('') : currentTerm + data[key];
          };
          const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();
          const transformedFilter = filter.trim().toLowerCase();
          return dataStr.indexOf(transformedFilter) !== -1;
        };
        this.rowCount = this.data.length;
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.apiService.isSpinner = true;
        this.spinner.displaySpinner(false);
      }).catch((error) => {
        this.apiService.isSpinner = true;
        this.spinner.displaySpinner(false);
        this.error = error;
        this.showPopup('error', 'Error!', error.message);
      });

  }

  isExpandedRow(element) {

    this.dataSource.data.forEach((data: any) => {
      if (element === data) {
        element.IsExtendedRow = !element.IsExtendedRow;
      } else {
        data.IsExtendedRow = false;
      }

    });

  }
  
}


2). From " View-Users.Component.html" File

<div class="tab-container">
  <div class="box-section">
    <swal #successContractSwal title="Success!" type="success" text="" (confirm)="getUserData()"
      [options]="{ showConfirmButton: true, confirmButtonText: 'OK', confirmButtonColor: '#DD6B55' }"></swal>
    <div class="box-view box-blue" #respMessage>
      <div class="box-header bottom-border">
        <h3 class="box-header-title">User List</h3>
      </div>
      <div class="form-section">
        <div class="box-body">
          <div class="row">
            <div class="col-md-1">
            </div>
            <div *ngIf="data" class="col-md-11">
              <div class="col-md-3 offset-md-9 d-flex justify-content-end filter-row" style="padding-left: 10px;">
                <div class="input-group" style="margin-top: 10px;margin-bottom: 15px;">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fa fa-search"></i>
                    </span>
                  </div>
                  <input type="text" class="form-control" (keyup)="applyFilter($event.target.value)"
                    placeholder="Search">
                </div>
              </div>
            </div>
          </div>
          <div class="row" style="margin-bottom: 15px;">
            <div class="col-md-12">
              <div class="workflow-table custom-table-responsive">
                <div class="example-container mat-elevation-z8">

                  <mat-table #table mat-table matSort [dataSource]="dataSource" multiTemplateDataRows
                    class="table-responsive">
                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

                    <ng-container matColumnDef="IsExtended">
                      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
                      <mat-cell *matCellDef="let element" style="justify-content: center;">
                        <!-- <i [ngClass]="{'fa fa-plus': !element.IsExtendedRow, 'fa fa-minus': element.IsExtendedRow}"></i> -->
                        <i class="{{!element.IsExtendedRow ? 'fa fa-plus' : 'fa fa-minus'}}"></i>
                      </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="EmailID">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> EmailID </mat-header-cell>
                      <mat-cell *matCellDef="let element">
                        <a href="JavaScript:void(0);" (click)="getUserdetail(element.UserID)">
                          {{element.EmailID}}
                        </a>
                      </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Name">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                      <mat-cell *matCellDef="let element">{{ element.Name }}</mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="RoleName">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> Role's </mat-header-cell>
                      <mat-cell *matCellDef="let element">{{ element.RoleName | permissionPipe}}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="UserBelong">
                      <mat-header-cell *matHeaderCellDef mat-sort-header>User Belong </mat-header-cell>
                      <mat-cell *matCellDef="let element">{{ element.UserBelong }}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="CreatedBy">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> Created By</mat-header-cell>
                      <mat-cell *matCellDef="let element">{{ element.CreatedBy }}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="CreatedDate">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> Created Date</mat-header-cell>
                      <mat-cell *matCellDef="let element">{{ element.CreatedDate | date : 'dd/MM/yyyy HH:mm:ss'}}
                      </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Action">
                      <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
                      <mat-cell *matCellDef="let element">
                        <a href="JavaScript:void(0);" tooltip="Click to release lock" placement="bottom"
                          (click)="LockUser(element)" *ngIf="element.isAccountLocked">
                          <i class="fa fa-lock" aria-hidden="true"></i>
                        </a>
                      </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="noData">
                      <mat-footer-cell *matFooterCellDef colspan="8">
                        Whoa! No User Data Found !
                      </mat-footer-cell>
                    </ng-container>

                    <ng-container matColumnDef="expandedDetail">
                      <mat-cell *matCellDef="let detail" class="period-bg-ligt-blue">
                        <ng-container *ngIf="detail.UserGroupOperator.length==0">
                          no record found
                        </ng-container>
                        <ng-container class="row" *ngIf="detail.UserGroupOperator.length>0">
                          <div class="col-md-6 col-sm-12">
                            <table class="table table-responsive-sm table-bordered table-sm">
                              <thead>
                                <tr>
                                  <th>Name</th>
                                  <th>Code</th>
                                  <th>IsTritex</th>
                                  <th>#</th>
                                </tr>
                              </thead>
                              <tbody>
                                <ng-container *ngFor="let item of detail.UserGroupOperator">
                                  <tr>
                                    <td>
                                      {{item.Name}}
                                    </td>
                                    <td>
                                      {{item.Code}}
                                    </td>
                                    <td style="text-align: center;"> <i *ngIf="item.IsTritex"
                                        class="fa fa fa-check"></i>
                                    </td>
                                    <td>{{item.isGroup===1?'Group':'Operator'}}</td>
                                  </tr>
                                </ng-container>
                              </tbody>
                            </table>
                          </div>
                        </ng-container>
                      </mat-cell>
                    </ng-container>

                    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"
                      [class.expanded]="expandedElement == row"
                      (click)="(expandedElement !== row)? expandedElement = row:expandedElement=[]; isExpandedRow(row)">
                    </mat-row>

                    <mat-row *matRowDef="let row; columns: ['expandedDetail'];when: isExpansionDetailRow"
                      [@detailExpand]="(row == expandedElement && row.UserGroupOperator.length>0) ? 'expanded' : 'collapsed'"
                      style="overflow: hidden">
                    </mat-row>

                    <mat-footer-row *matFooterRowDef="['noData']"
                      [ngClass]="{'hide':!(rowCount=== 0 && responseStatus)}">
                    </mat-footer-row>

                  </mat-table>
                  <mat-paginator #MatPaginator [pageSize]="50" [pageSizeOptions]="[5, 10, 20,50,100]"
                    showFirstLastButtons>
                  </mat-paginator>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


3).users.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

import {
  MatInputModule,
  MatSelectModule,
  MatButtonModule,
  MatCheckboxModule,
  MatRadioModule,
  MatDatepickerModule, MatTableModule,
  MatPaginatorModule,
  MatSortModule
} from '@angular/material';
import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';
import { NgSelectModule } from '@ng-select/ng-select';
// import { DataTableModule } from 'angular2-datatable';
import { DataFilterPipeModule } from '../../../../pipes/data-filter-pipe.module';
import { BsDropdownModule } from 'ngx-bootstrap';
import { CustomModalModule } from '../../../../modal/custom-modal.module';
import { ViewUsersComponent } from './view-users/view-users.component';
import { TooltipModule } from 'ngx-bootstrap';
import { ProfileModule } from '../../profile/profile.module';
const routes: Routes = [
  {
    path: '',
    component: ViewUsersComponent,
    data: {
      title: 'Search'
    }
  },
  {
    path: 'add-users/:refresh1',
    component: AddUsersComponent,
    data: {
      title: 'Add'
    }
  },
  {
    path: 'add-users/:refresh1/:refresh2',
    component: AddUsersComponent,
    data: {
      title: 'Edit'
    }
  },
  {
    path: 'view-users/:refresh',
    component: ViewUsersComponent,
    data: {
      title: 'Search'
    }
  }
];
@NgModule({
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    MatInputModule,
    MatSelectModule,
    SweetAlert2Module.forRoot(),
    NgSelectModule,
    DataFilterPipeModule,
    MatButtonModule,
    MatCheckboxModule,
    MatRadioModule,
    MatDatepickerModule,
    CustomModalModule,
    NgMultiSelectDropDownModule,
    BsDropdownModule.forRoot(),
    MatTableModule,
    MatPaginatorModule,
    TooltipModule.forRoot(),
    ProfileModule,
    MatSortModule
  ],
  declarations: [ ViewUsersComponent]
})
export class UsersModule { }

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');
    }
  }


}

Featured Post

Asp.net And HTML Css And Web Development: How To Use Mat Table /Data Table in angular 6

Asp.net And HTML Css And Web Development: How To Use Mat Table /Data Table in angular 6 : How To Use Mat Table /Data Table in angular 6 ...

Popular Posts