Search This Blog

Thursday, March 10, 2022

Added the background Syncing using Subject Behaviour in Angular 8+


<div class="row bg-white pt-3 pb-3 border-bottom mb-4">
    <h5 class="col-md-6 mb-0">OPF Invoice Report
        <span class="subtitle">OPF Invoice Report List</span>
    </h5>
    <div class="col-md-6 mx-auto">
        <div class="float-right">

            <div *ngIf="isLoading" class="mb-1  mr-4"> <h6 class="mb-2"> Syncing is in progress </h6> <mat-progress-bar
                [mode]="'indeterminate'">
      </mat-progress-bar></div>
            <button mat-button class="btn-theme text-uppercase mr-2" [disabled] ="isLoading" (click) = "generateListNow()"><mat-icon>sync</mat-icon> Generate Now</button>

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

<div class="card border-theme-top mb-5 shadow">
    <mat-accordion>
        <mat-expansion-panel >
            <mat-expansion-panel-header>
                <mat-panel-title>
                        <h6 class="mb-0">Filter</h6>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <form [formGroup]="stockReportForm" (ngSubmit)="searchStockReport()">
                <div class="row">



                    <div class="col-md-3">
                        <app-custom-input type="text" label="OPF Number" formInnerControlName="OPFNumber"
                            placeholder="Enter OPF number" [parentForm]="stockReportForm">
                        </app-custom-input>
                        </div>

                    <div class = "col-md-3">
                        <app-custom-datepicker type="date" label="From Date" formInnerControlName="from_date"
                            placeholder="Enter From Date" [parentForm]="stockReportForm">
                        </app-custom-datepicker>
                    </div>
                    <div class="col-md-3">
                        <app-custom-datepicker endDateLabel = "To Date" type="date" label="To Date" formInnerControlName="to_date"
                            placeholder="Enter To Date" [parentForm]="stockReportForm">
                        </app-custom-datepicker>
                    </div>

                    <div class = "col-md-3">
                        <app-auto-complete [displayKey]="displayChannelPartnerKeys1" key="name" label=" Customer Name" formInnerControlName="custNumber" [options]="clientNames"
                        [parentForm]="stockReportForm" >
                      </app-auto-complete>
                    </div>

                    <div class="col-md-3">
                        <app-custom-input type="text" label="Invoice Number" formInnerControlName="invoiceNumber"
                        placeholder="Enter invoice Number" [parentForm]="stockReportForm">
                    </app-custom-input>
                    </div>

                    <div class="col-md-3" *ngIf = '!isChannelPartner'>
                       <app-auto-complete [displayKey]="displayChannelPartnerKeys" key="name" label="Channel Partner" formInnerControlName="cpNumber" [options]="cpList"
                        [parentForm]="stockReportForm">
                      </app-auto-complete>
                    </div>
                   
                    <div class="col-md-3">
                        <app-auto-complete key="OTLnumber" label="OTL Number" formInnerControlName="OTLNumber" [options]="otlList" [parentForm]="stockReportForm"></app-auto-complete>
                      </div>
                   
                    <div class="col-md-3">
                        <app-auto-complete key="partNumber" label="Part Number" formInnerControlName="partNumber" [options]="partList" [parentForm]="stockReportForm"></app-auto-complete>
                    </div>
                 
                   

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control" formControlName = 'status' >
                                <option value = "null" disabled>Select Options</option>
                                <option value = "0" >Not Invoiced</option>
                                <option value = "1" >Partially Invoiced</option>
                                <option value = "2" >Fully Invoiced</option>
                                <option value = "3" >Excess Invoiced</option>
                            </select>
                        </div>
                    </div>
                 
                </div>
                <div class="row">
                    <div class="col">
                        <button *ngIf = "setActionsPermission('EXPORT_OPF_REPORT')" class="float-right bg-theme btn btn-sm text-white ml-2 no-width"  [disabled] = '!gridData.length' matTooltip="Filter and Download" type="button" (click) = "exportStockReport()" ><mat-icon>save_alt</mat-icon></button>
                        <button mat-button class="btn-black float-right"  [disabled] = '!stockReportForm.valid' type = 'submit'>APPLY FILTER</button>
                        <button mat-button class="btn-form-default float-right mr-2" type = 'button' (click)="cancelStockReport()">CLEAR ALL</button>
                    </div>
                </div>
            </form>
        </mat-expansion-panel>
     </mat-accordion>
</div>

<div class="card mb-4 border-theme-top">
    <div class="card-header border-0 bg-white">
        <h6 class="mb-0">OPF Invoice  List
         
        </h6>
    </div>
    <div class="card-body p-0">
        <ag-grid-angular style="width: 100%; height:550px;" class="ag-theme-balham" [headerHeight]=50  
        [gridOptions]="gridOptions" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [animateRows]="true"
        [pagination]="true" (gridReady)="onGridReady($event)">
        </ag-grid-angular>
    </div>
</div>




import { Component, OnInit, ViewEncapsulation, HostListener } from '@angular/core';
import { StorageService } from 'src/app/core/services/storage/storage.service';
import { FormValidatorService } from 'src/app/core/services/formValidator/form-validator.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Roles } from 'src/app/modules/auth/model/user';
import { CpbookingService } from 'src/app/modules/cpadmin/service/cpbooking.service';
import { UtilsService } from 'src/app/core/services/utils/utils.service';
import { StockReportService } from 'src/app/modules/common/service/stock-reports/stock-report.service';
import { PermissionMenuListService } from 'src/app/core/services/utils/permission-menu-list.service';
import { ActionItems } from 'src/app/core/services/constants';
import { MomentService } from 'src/app/core/services/utils/moment.service';
import { IGetRowsParams } from 'ag-grid-community';
import { OutboundService } from '../../../service/outbound/outbound.service';
import { PromptService } from 'src/app/core/modules/shared/components/prompt/prompt.service';
import { syncService } from 'src/app/core/services/utils/sync.service';

@Component({
  selector: 'app-opf-invoice-report',
  templateUrl: './opf-invoice-report.component.html',
  styleUrls: ['./opf-invoice-report.component.css'],
  encapsulation:ViewEncapsulation.None

})
export class OpfInvoiceReportComponent implements OnInit {
  public columnDefs;
  public defaultColDef;
  public gridOptions;
  public gridApi;
  public gridColumnApi;
  public gridData = [];
  public stockReportForm: FormGroup;
  public role;
  public isAdmin:boolean = false;
  public clientNames =[];
  public otlList =[];
  public opfList =[];
  public partList=[];
  public cpList=[];
  public pageSize = 10;
  public isChannelPartner;
  public stockReportPermission;
  public displayChannelPartnerKeys = ['name', 'cpnumber']
  public displayChannelPartnerKeys1 = ['name', 'custNumber']
  public isLoading:any = false;

  constructor(private _StorageService: StorageService,private _permissionMenuListService: PermissionMenuListService, private _bookingService :CpbookingService, private _utilsService : UtilsService,
    private _formValidator: FormValidatorService, private fb: FormBuilder,private _StockReportService:StockReportService,private _momentService: MomentService,
     private _outboundService: OutboundService, private _PromptService: PromptService, private _syncService : syncService) { }
    @HostListener('window:resize', ['$event'])onResize(event) {
      this.gridApi.sizeColumnsToFit();
    }

  ngOnInit() {
    this.loadStockReportForm();
    this.role = this._StorageService.getUserDetails().role;

    this.isAdmin =this._utilsService.isAdminRole(this.role);

    this.isChannelPartner = this._utilsService.isCpRole(this.role);
    // calling filters api
    this.setClientList();
    this.setPartsList();
    this.setOtlList();
    this.setCPList();

    this._syncService.getSync().subscribe(res => {
    debugger;
      this.isLoading = res;

    })
   
    this.defaultColDef = {
      sortable: true,
      filter: true,
      resizable: true,
 
    };
    this.gridOptions = {
      rowHeight: 45,
      paginationPageSize: 10,
      cacheBlockSize : 10,
      rowModelType :'infinite',
      cacheOverflowSize:100,
      maxConcurrentDatasourceRequests: 2
    };

    this.gridOptions.onSortChanged = event => {
      this.gridApi.redrawRows();
    }
    this.columnDefs = [
      {
        field: "",
        headerName: 'S No.',
        width: 100,
        sortable: false,
        filter: false,
        valueGetter: "node.rowIndex + 1",
        suppressSizeToFit: true
      },
      {
        headerName: 'OTL No.',
        field: "OTLNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Number',
        field: "custNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Name',
        field: "custName",
        width: 300,
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Site Id',
        field: "siteId",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Number',
        field: "cpnumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Name',
        field: "cpName",
        width: 350,
        suppressSizeToFit: true
      },        
      {
        headerName: 'CP SITE CITY',
        field: "cp_site_city",
        width: 159,
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Site ID',
        field: "siteId",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF No.',
        field: "OPFNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Created Date',
        field: 'created_on',
        valueFormatter : this.formatDate.bind(this),
        width: 250,
        suppressSizeToFit: true,
      },
      {
        headerName: 'Part No.',
        field: "partNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true,
      },
      {
        headerName: 'Description',
        field: "description",
        width: 250,
        suppressSizeToFit: true
      },

 
      {
        headerName: 'Unit Price ',
        field: "price",
        width: 140,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        cellRenderer :(params) =>{
          return params.value || params.value == 0?  "<div class = 'text-right'>" + this._utilsService.rupeeFormat(this.RoundOFTwoDigit(params.value)) + "</div>"  : ''
        },
        suppressSizeToFit: true,
      },
     
   
      {
        headerName: 'OPF Quantity',
        field: "quantity",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },

     
      {
        headerName: 'OPF Line Value',
        field: "parts_total_amount_with_out_tax",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        cellRenderer :(params) =>{
          return params.value || params.value == 0?  "<div class = 'text-right'>" + this._utilsService.rupeeFormat(this.RoundOFTwoDigit(params.value)) + "</div>"  : ''
        },
        suppressSizeToFit: true,
      },

      {
        headerName: 'Beckman Invoiced Qty',
        field: "quantityInvoiced",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },

      {
        headerName: 'Beckman Invoice Number',
        field: "invoiceNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Total Beckman Invoiced Qty',
        field: "quantity",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Invoice Status',
        field: "invoice_status",
        width: 200,
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Order Status',
        field: "status",
        width: 200,
        suppressSizeToFit: true
      },
      {
        headerName: 'ORACLE Order Number',
        field: "oracleOrderNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
     
    ];
    this.loadReportsPermission()
  }
  setActionsPermission(name){
        return this.stockReportPermission && typeof this.stockReportPermission[ActionItems[name]] != 'undefined'  ?  true : false;

 }

 loadReportsPermission(){
  this._permissionMenuListService.getActionPermission({model : 'appreport'}, response =>{
    this.stockReportPermission= response['appreport'];    
  });
}
generateListNow() {
 this._syncService.setSync(true);

  this._outboundService.generateNow(res => {  
  this._syncService.setSync(false);    
  });    
}
formatDate(params){
  return  params.data? this._momentService.getDateTimeFormat(params.data.created_on):'';
}

  // start - set values for  filter fields
  setPartsList(){
    this._StockReportService.getListParts(this.role,(res) => {
      this.partList =res;
    });
  }

  setClientList(){
    this._bookingService.listHospital( res =>{
      this.clientNames =  this._utilsService.groupByMultipleKeys(res,['name','custNumber'])
    })
  }
  setOtlList(){
    this._bookingService.getListofOTLParts(res =>{
      this.otlList =  this._utilsService.groupByMultipleKeys(res,['name','OTLnumber'])
    })
  }

  setCPList(){
    this._bookingService.listChannelPartner(res=>{
      this.cpList = this._utilsService.groupByMultipleKeys(res,['name','cpnumber'])  
    })
  }
// end - set values for  filter fields


onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  this.gridApi.sizeColumnsToFit();
  this.getStockOverviewReportList()
}

getStockOverviewReportList(){

  let data = {
    created_on_start_date : this._momentService.getFilterFormat(this.stockReportForm.get('from_date').value),
    created_on_end_date : this._momentService.getFilterFormat(this.stockReportForm.get('to_date').value, "toDate"),
  }
return this.getCPList(data);
}
getCPList(data?: any){
 
  let payload = {};
  var datasource = {
    getRows: (params: IGetRowsParams) =>{
      if (data) {
        payload = data;
      }
      payload['page_size'] =this.pageSize
      payload['page'] = ((params.endRow % this.pageSize) == 0) ? (params.endRow / this.pageSize) : (params.endRow / this.pageSize)+1
      payload['sort_key'] =params.sortModel.length ? params.sortModel[0]['colId'] : ''
      payload['sort_type'] = params.sortModel.length ? params.sortModel[0]['sort'] : ''
     
      this._StockReportService.searchGetOpfInvoiceReport(data,(res)=>{
          let length = res['total'];
          this.gridData = res['results'];
          console.log(this.gridData,'-203-');
         
          console.log(res['results']);
          params.successCallback(res['results'], length)
        })
    }
  }
    this.gridApi.setDatasource(datasource);
}

  loadStockReportForm(){
    this.stockReportForm = this.fb.group({
      from_date:[this._momentService.deceedDate(new Date(),31)],
      to_date:[new Date()],
      status:[null],
      custNumber: ['', this._formValidator.requireMatch],
      cpNumber: ['', this._formValidator.requireMatch],
      OPFNumber: [''],
      OTLNumber: ['', this._formValidator.requireMatch],
      partNumber: ['', this._formValidator.requireMatch],
      invoiceNumber : ['']
    });
  }


  exportStockReport(){
    let paylaod =  this.getPayload(this.stockReportForm.value);
    paylaod['is_export'] = true;
    this._StockReportService.exportOpfReportFilter(paylaod);
  }
  getPayload(formValue){
    let data =  {};
    //Success Scenario
     data['created_on_start_date'] = formValue.from_date ? this._momentService.getFilterFormat(formValue.from_date, "toDate") : '';
     data['created_on_end_date'] = formValue.to_date ? this._momentService.getFilterFormat(formValue.to_date, "toDate") : '';
     data['OPFNumber'] =  formValue.OPFNumber ? formValue.OPFNumber : '';
     data['custNumber'] =  formValue.custNumber ? formValue.custNumber.custNumber : '';
     data['invoiceNumber']  =  formValue.invoiceNumber ? formValue.invoiceNumber : '';
     data['OTLNumber'] = formValue.OTLNumber ? formValue.OTLNumber.OTLnumber : '';
     data['partNumber'] =formValue.partNumber ? formValue.partNumber.partNumber : '';
     data['cpnumber'] = formValue.cpNumber ? formValue.cpNumber.cpnumber : '';
     data['invoice_status_value'] = formValue.status ? formValue.status : '';
    return data;
    }
 

  searchStockReport(){

    if (this.stockReportForm.valid){
      let invoiceFilterValues = this.getPayload(this.stockReportForm.value);
      return this.getCPList(invoiceFilterValues);
      }
    }
  cancelStockReport(){
    this.stockReportForm.reset();
    this.stockReportForm.get('from_date').setValue(this._momentService.deceedDate(new Date(),31));
    this.stockReportForm.get('to_date').setValue(new Date())
    this.getStockOverviewReportList();
  }
  RoundOFTwoDigit(num: any){
    var number = Math.round(num * Math.pow(10, 2)) / Math.pow(10, 2);
    return number;
  }

}

import { Component, OnInit, ViewEncapsulation, HostListener } from '@angular/core';
import { StorageService } from 'src/app/core/services/storage/storage.service';
import { FormValidatorService } from 'src/app/core/services/formValidator/form-validator.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Roles } from 'src/app/modules/auth/model/user';
import { CpbookingService } from 'src/app/modules/cpadmin/service/cpbooking.service';
import { UtilsService } from 'src/app/core/services/utils/utils.service';
import { StockReportService } from 'src/app/modules/common/service/stock-reports/stock-report.service';
import { PermissionMenuListService } from 'src/app/core/services/utils/permission-menu-list.service';
import { ActionItems } from 'src/app/core/services/constants';
import { MomentService } from 'src/app/core/services/utils/moment.service';
import { IGetRowsParams } from 'ag-grid-community';
import { OutboundService } from '../../../service/outbound/outbound.service';
import { PromptService } from 'src/app/core/modules/shared/components/prompt/prompt.service';
import { syncService } from 'src/app/core/services/utils/sync.service';

@Component({
  selector: 'app-opf-invoice-report',
  templateUrl: './opf-invoice-report.component.html',
  styleUrls: ['./opf-invoice-report.component.css'],
  encapsulation:ViewEncapsulation.None

})
export class OpfInvoiceReportComponent implements OnInit {
  public columnDefs;
  public defaultColDef;
  public gridOptions;
  public gridApi;
  public gridColumnApi;
  public gridData = [];
  public stockReportForm: FormGroup;
  public role;
  public isAdmin:boolean = false;
  public clientNames =[];
  public otlList =[];
  public opfList =[];
  public partList=[];
  public cpList=[];
  public pageSize = 10;
  public isChannelPartner;
  public stockReportPermission;
  public displayChannelPartnerKeys = ['name', 'cpnumber']
  public displayChannelPartnerKeys1 = ['name', 'custNumber']
  public isLoading:any = false;

  constructor(private _StorageService: StorageService,private _permissionMenuListService: PermissionMenuListService, private _bookingService :CpbookingService, private _utilsService : UtilsService,
    private _formValidator: FormValidatorService, private fb: FormBuilder,private _StockReportService:StockReportService,private _momentService: MomentService,
     private _outboundService: OutboundService, private _PromptService: PromptService, private _syncService : syncService) { }
    @HostListener('window:resize', ['$event'])onResize(event) {
      this.gridApi.sizeColumnsToFit();
    }

  ngOnInit() {
    this.loadStockReportForm();
    this.role = this._StorageService.getUserDetails().role;

    this.isAdmin =this._utilsService.isAdminRole(this.role);

    this.isChannelPartner = this._utilsService.isCpRole(this.role);
    // calling filters api
    this.setClientList();
    this.setPartsList();
    this.setOtlList();
    this.setCPList();

    this._syncService.getSync().subscribe(res => {
    debugger;
      this.isLoading = res;

    })
   
    this.defaultColDef = {
      sortable: true,
      filter: true,
      resizable: true,
 
    };
    this.gridOptions = {
      rowHeight: 45,
      paginationPageSize: 10,
      cacheBlockSize : 10,
      rowModelType :'infinite',
      cacheOverflowSize:100,
      maxConcurrentDatasourceRequests: 2
    };

    this.gridOptions.onSortChanged = event => {
      this.gridApi.redrawRows();
    }
    this.columnDefs = [
      {
        field: "",
        headerName: 'S No.',
        width: 100,
        sortable: false,
        filter: false,
        valueGetter: "node.rowIndex + 1",
        suppressSizeToFit: true
      },
      {
        headerName: 'OTL No.',
        field: "OTLNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Number',
        field: "custNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Name',
        field: "custName",
        width: 300,
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Site Id',
        field: "siteId",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Number',
        field: "cpnumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Name',
        field: "cpName",
        width: 350,
        suppressSizeToFit: true
      },        
      {
        headerName: 'CP SITE CITY',
        field: "cp_site_city",
        width: 159,
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Site ID',
        field: "siteId",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF No.',
        field: "OPFNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Created Date',
        field: 'created_on',
        valueFormatter : this.formatDate.bind(this),
        width: 250,
        suppressSizeToFit: true,
      },
      {
        headerName: 'Part No.',
        field: "partNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true,
      },
      {
        headerName: 'Description',
        field: "description",
        width: 250,
        suppressSizeToFit: true
      },

 
      {
        headerName: 'Unit Price ',
        field: "price",
        width: 140,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        cellRenderer :(params) =>{
          return params.value || params.value == 0?  "<div class = 'text-right'>" + this._utilsService.rupeeFormat(this.RoundOFTwoDigit(params.value)) + "</div>"  : ''
        },
        suppressSizeToFit: true,
      },
     
   
      {
        headerName: 'OPF Quantity',
        field: "quantity",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },

     
      {
        headerName: 'OPF Line Value',
        field: "parts_total_amount_with_out_tax",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        cellRenderer :(params) =>{
          return params.value || params.value == 0?  "<div class = 'text-right'>" + this._utilsService.rupeeFormat(this.RoundOFTwoDigit(params.value)) + "</div>"  : ''
        },
        suppressSizeToFit: true,
      },

      {
        headerName: 'Beckman Invoiced Qty',
        field: "quantityInvoiced",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },

      {
        headerName: 'Beckman Invoice Number',
        field: "invoiceNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Total Beckman Invoiced Qty',
        field: "quantity",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Invoice Status',
        field: "invoice_status",
        width: 200,
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Order Status',
        field: "status",
        width: 200,
        suppressSizeToFit: true
      },
      {
        headerName: 'ORACLE Order Number',
        field: "oracleOrderNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
     
    ];
    this.loadReportsPermission()
  }
  setActionsPermission(name){
        return this.stockReportPermission && typeof this.stockReportPermission[ActionItems[name]] != 'undefined'  ?  true : false;

 }

 loadReportsPermission(){
  this._permissionMenuListService.getActionPermission({model : 'appreport'}, response =>{
    this.stockReportPermission= response['appreport'];    
  });
}
generateListNow() {
 this._syncService.setSync(true);

  this._outboundService.generateNow(res => {  
  this._syncService.setSync(false);    
  });    
}
formatDate(params){
  return  params.data? this._momentService.getDateTimeFormat(params.data.created_on):'';
}

  // start - set values for  filter fields
  setPartsList(){
    this._StockReportService.getListParts(this.role,(res) => {
      this.partList =res;
    });
  }

  setClientList(){
    this._bookingService.listHospital( res =>{
      this.clientNames =  this._utilsService.groupByMultipleKeys(res,['name','custNumber'])
    })
  }
  setOtlList(){
    this._bookingService.getListofOTLParts(res =>{
      this.otlList =  this._utilsService.groupByMultipleKeys(res,['name','OTLnumber'])
    })
  }

  setCPList(){
    this._bookingService.listChannelPartner(res=>{
      this.cpList = this._utilsService.groupByMultipleKeys(res,['name','cpnumber'])  
    })
  }
// end - set values for  filter fields


onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  this.gridApi.sizeColumnsToFit();
  this.getStockOverviewReportList()
}

getStockOverviewReportList(){

  let data = {
    created_on_start_date : this._momentService.getFilterFormat(this.stockReportForm.get('from_date').value),
    created_on_end_date : this._momentService.getFilterFormat(this.stockReportForm.get('to_date').value, "toDate"),
  }
return this.getCPList(data);
}
getCPList(data?: any){
 
  let payload = {};
  var datasource = {
    getRows: (params: IGetRowsParams) =>{
      if (data) {
        payload = data;
      }
      payload['page_size'] =this.pageSize
      payload['page'] = ((params.endRow % this.pageSize) == 0) ? (params.endRow / this.pageSize) : (params.endRow / this.pageSize)+1
      payload['sort_key'] =params.sortModel.length ? params.sortModel[0]['colId'] : ''
      payload['sort_type'] = params.sortModel.length ? params.sortModel[0]['sort'] : ''
     
      this._StockReportService.searchGetOpfInvoiceReport(data,(res)=>{
          let length = res['total'];
          this.gridData = res['results'];
          console.log(this.gridData,'-203-');
         
          console.log(res['results']);
          params.successCallback(res['results'], length)
        })
    }
  }
    this.gridApi.setDatasource(datasource);
}

  loadStockReportForm(){
    this.stockReportForm = this.fb.group({
      from_date:[this._momentService.deceedDate(new Date(),31)],
      to_date:[new Date()],
      status:[null],
      custNumber: ['', this._formValidator.requireMatch],
      cpNumber: ['', this._formValidator.requireMatch],
      OPFNumber: [''],
      OTLNumber: ['', this._formValidator.requireMatch],
      partNumber: ['', this._formValidator.requireMatch],
      invoiceNumber : ['']
    });
  }


  exportStockReport(){
    let paylaod =  this.getPayload(this.stockReportForm.value);
    paylaod['is_export'] = true;
    this._StockReportService.exportOpfReportFilter(paylaod);
  }
  getPayload(formValue){
    let data =  {};
    //Success Scenario
     data['created_on_start_date'] = formValue.from_date ? this._momentService.getFilterFormat(formValue.from_date, "toDate") : '';
     data['created_on_end_date'] = formValue.to_date ? this._momentService.getFilterFormat(formValue.to_date, "toDate") : '';
     data['OPFNumber'] =  formValue.OPFNumber ? formValue.OPFNumber : '';
     data['custNumber'] =  formValue.custNumber ? formValue.custNumber.custNumber : '';
     data['invoiceNumber']  =  formValue.invoiceNumber ? formValue.invoiceNumber : '';
     data['OTLNumber'] = formValue.OTLNumber ? formValue.OTLNumber.OTLnumber : '';
     data['partNumber'] =formValue.partNumber ? formValue.partNumber.partNumber : '';
     data['cpnumber'] = formValue.cpNumber ? formValue.cpNumber.cpnumber : '';
     data['invoice_status_value'] = formValue.status ? formValue.status : '';
    return data;
    }
 

  searchStockReport(){

    if (this.stockReportForm.valid){
      let invoiceFilterValues = this.getPayload(this.stockReportForm.value);
      return this.getCPList(invoiceFilterValues);
      }
    }
  cancelStockReport(){
    this.stockReportForm.reset();
    this.stockReportForm.get('from_date').setValue(this._momentService.deceedDate(new Date(),31));
    this.stockReportForm.get('to_date').setValue(new Date())
    this.getStockOverviewReportList();
  }
  RoundOFTwoDigit(num: any){
    var number = Math.round(num * Math.pow(10, 2)) / Math.pow(10, 2);
    return number;
  }

}

import { Component, OnInit, ViewEncapsulation, HostListener } from '@angular/core';
import { StorageService } from 'src/app/core/services/storage/storage.service';
import { FormValidatorService } from 'src/app/core/services/formValidator/form-validator.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Roles } from 'src/app/modules/auth/model/user';
import { CpbookingService } from 'src/app/modules/cpadmin/service/cpbooking.service';
import { UtilsService } from 'src/app/core/services/utils/utils.service';
import { StockReportService } from 'src/app/modules/common/service/stock-reports/stock-report.service';
import { PermissionMenuListService } from 'src/app/core/services/utils/permission-menu-list.service';
import { ActionItems } from 'src/app/core/services/constants';
import { MomentService } from 'src/app/core/services/utils/moment.service';
import { IGetRowsParams } from 'ag-grid-community';
import { OutboundService } from '../../../service/outbound/outbound.service';
import { PromptService } from 'src/app/core/modules/shared/components/prompt/prompt.service';
import { syncService } from 'src/app/core/services/utils/sync.service';

@Component({
  selector: 'app-opf-invoice-report',
  templateUrl: './opf-invoice-report.component.html',
  styleUrls: ['./opf-invoice-report.component.css'],
  encapsulation:ViewEncapsulation.None

})
export class OpfInvoiceReportComponent implements OnInit {
  public columnDefs;
  public defaultColDef;
  public gridOptions;
  public gridApi;
  public gridColumnApi;
  public gridData = [];
  public stockReportForm: FormGroup;
  public role;
  public isAdmin:boolean = false;
  public clientNames =[];
  public otlList =[];
  public opfList =[];
  public partList=[];
  public cpList=[];
  public pageSize = 10;
  public isChannelPartner;
  public stockReportPermission;
  public displayChannelPartnerKeys = ['name', 'cpnumber']
  public displayChannelPartnerKeys1 = ['name', 'custNumber']
  public isLoading:any = false;

  constructor(private _StorageService: StorageService,private _permissionMenuListService: PermissionMenuListService, private _bookingService :CpbookingService, private _utilsService : UtilsService,
    private _formValidator: FormValidatorService, private fb: FormBuilder,private _StockReportService:StockReportService,private _momentService: MomentService,
     private _outboundService: OutboundService, private _PromptService: PromptService, private _syncService : syncService) { }
    @HostListener('window:resize', ['$event'])onResize(event) {
      this.gridApi.sizeColumnsToFit();
    }

  ngOnInit() {
    this.loadStockReportForm();
    this.role = this._StorageService.getUserDetails().role;

    this.isAdmin =this._utilsService.isAdminRole(this.role);

    this.isChannelPartner = this._utilsService.isCpRole(this.role);
    // calling filters api
    this.setClientList();
    this.setPartsList();
    this.setOtlList();
    this.setCPList();

    this._syncService.getSync().subscribe(res => {
    debugger;
      this.isLoading = res;

    })
   
    this.defaultColDef = {
      sortable: true,
      filter: true,
      resizable: true,
 
    };
    this.gridOptions = {
      rowHeight: 45,
      paginationPageSize: 10,
      cacheBlockSize : 10,
      rowModelType :'infinite',
      cacheOverflowSize:100,
      maxConcurrentDatasourceRequests: 2
    };

    this.gridOptions.onSortChanged = event => {
      this.gridApi.redrawRows();
    }
    this.columnDefs = [
      {
        field: "",
        headerName: 'S No.',
        width: 100,
        sortable: false,
        filter: false,
        valueGetter: "node.rowIndex + 1",
        suppressSizeToFit: true
      },
      {
        headerName: 'OTL No.',
        field: "OTLNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Number',
        field: "custNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Name',
        field: "custName",
        width: 300,
        suppressSizeToFit: true
      },
      {
        headerName: 'Customer Site Id',
        field: "siteId",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Number',
        field: "cpnumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Name',
        field: "cpName",
        width: 350,
        suppressSizeToFit: true
      },        
      {
        headerName: 'CP SITE CITY',
        field: "cp_site_city",
        width: 159,
        suppressSizeToFit: true
      },
      {
        headerName: 'CP Site ID',
        field: "siteId",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF No.',
        field: "OPFNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Created Date',
        field: 'created_on',
        valueFormatter : this.formatDate.bind(this),
        width: 250,
        suppressSizeToFit: true,
      },
      {
        headerName: 'Part No.',
        field: "partNumber",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.alphaNumbericSorting(param1,param2);
        },
        suppressSizeToFit: true,
      },
      {
        headerName: 'Description',
        field: "description",
        width: 250,
        suppressSizeToFit: true
      },

 
      {
        headerName: 'Unit Price ',
        field: "price",
        width: 140,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        cellRenderer :(params) =>{
          return params.value || params.value == 0?  "<div class = 'text-right'>" + this._utilsService.rupeeFormat(this.RoundOFTwoDigit(params.value)) + "</div>"  : ''
        },
        suppressSizeToFit: true,
      },
     
   
      {
        headerName: 'OPF Quantity',
        field: "quantity",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },

     
      {
        headerName: 'OPF Line Value',
        field: "parts_total_amount_with_out_tax",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        cellRenderer :(params) =>{
          return params.value || params.value == 0?  "<div class = 'text-right'>" + this._utilsService.rupeeFormat(this.RoundOFTwoDigit(params.value)) + "</div>"  : ''
        },
        suppressSizeToFit: true,
      },

      {
        headerName: 'Beckman Invoiced Qty',
        field: "quantityInvoiced",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },

      {
        headerName: 'Beckman Invoice Number',
        field: "invoiceNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'Total Beckman Invoiced Qty',
        field: "quantity",
        width: 150,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Invoice Status',
        field: "invoice_status",
        width: 200,
        suppressSizeToFit: true
      },
      {
        headerName: 'OPF Order Status',
        field: "status",
        width: 200,
        suppressSizeToFit: true
      },
      {
        headerName: 'ORACLE Order Number',
        field: "oracleOrderNumber",
        width: 200,
        comparator: (param1, param2) => {
          return this._utilsService.numberSorting(param1,param2);
        },
        suppressSizeToFit: true
      },
     
    ];
    this.loadReportsPermission()
  }
  setActionsPermission(name){
        return this.stockReportPermission && typeof this.stockReportPermission[ActionItems[name]] != 'undefined'  ?  true : false;

 }

 loadReportsPermission(){
  this._permissionMenuListService.getActionPermission({model : 'appreport'}, response =>{
    this.stockReportPermission= response['appreport'];    
  });
}
generateListNow() {
 this._syncService.setSync(true);

  this._outboundService.generateNow(res => {  
  this._syncService.setSync(false);    
  });    
}
formatDate(params){
  return  params.data? this._momentService.getDateTimeFormat(params.data.created_on):'';
}

  // start - set values for  filter fields
  setPartsList(){
    this._StockReportService.getListParts(this.role,(res) => {
      this.partList =res;
    });
  }

  setClientList(){
    this._bookingService.listHospital( res =>{
      this.clientNames =  this._utilsService.groupByMultipleKeys(res,['name','custNumber'])
    })
  }
  setOtlList(){
    this._bookingService.getListofOTLParts(res =>{
      this.otlList =  this._utilsService.groupByMultipleKeys(res,['name','OTLnumber'])
    })
  }

  setCPList(){
    this._bookingService.listChannelPartner(res=>{
      this.cpList = this._utilsService.groupByMultipleKeys(res,['name','cpnumber'])  
    })
  }
// end - set values for  filter fields


onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  this.gridApi.sizeColumnsToFit();
  this.getStockOverviewReportList()
}

getStockOverviewReportList(){

  let data = {
    created_on_start_date : this._momentService.getFilterFormat(this.stockReportForm.get('from_date').value),
    created_on_end_date : this._momentService.getFilterFormat(this.stockReportForm.get('to_date').value, "toDate"),
  }
return this.getCPList(data);
}
getCPList(data?: any){
 
  let payload = {};
  var datasource = {
    getRows: (params: IGetRowsParams) =>{
      if (data) {
        payload = data;
      }
      payload['page_size'] =this.pageSize
      payload['page'] = ((params.endRow % this.pageSize) == 0) ? (params.endRow / this.pageSize) : (params.endRow / this.pageSize)+1
      payload['sort_key'] =params.sortModel.length ? params.sortModel[0]['colId'] : ''
      payload['sort_type'] = params.sortModel.length ? params.sortModel[0]['sort'] : ''
     
      this._StockReportService.searchGetOpfInvoiceReport(data,(res)=>{
          let length = res['total'];
          this.gridData = res['results'];
          console.log(this.gridData,'-203-');
         
          console.log(res['results']);
          params.successCallback(res['results'], length)
        })
    }
  }
    this.gridApi.setDatasource(datasource);
}

  loadStockReportForm(){
    this.stockReportForm = this.fb.group({
      from_date:[this._momentService.deceedDate(new Date(),31)],
      to_date:[new Date()],
      status:[null],
      custNumber: ['', this._formValidator.requireMatch],
      cpNumber: ['', this._formValidator.requireMatch],
      OPFNumber: [''],
      OTLNumber: ['', this._formValidator.requireMatch],
      partNumber: ['', this._formValidator.requireMatch],
      invoiceNumber : ['']
    });
  }


  exportStockReport(){
    let paylaod =  this.getPayload(this.stockReportForm.value);
    paylaod['is_export'] = true;
    this._StockReportService.exportOpfReportFilter(paylaod);
  }
  getPayload(formValue){
    let data =  {};
    //Success Scenario
     data['created_on_start_date'] = formValue.from_date ? this._momentService.getFilterFormat(formValue.from_date, "toDate") : '';
     data['created_on_end_date'] = formValue.to_date ? this._momentService.getFilterFormat(formValue.to_date, "toDate") : '';
     data['OPFNumber'] =  formValue.OPFNumber ? formValue.OPFNumber : '';
     data['custNumber'] =  formValue.custNumber ? formValue.custNumber.custNumber : '';
     data['invoiceNumber']  =  formValue.invoiceNumber ? formValue.invoiceNumber : '';
     data['OTLNumber'] = formValue.OTLNumber ? formValue.OTLNumber.OTLnumber : '';
     data['partNumber'] =formValue.partNumber ? formValue.partNumber.partNumber : '';
     data['cpnumber'] = formValue.cpNumber ? formValue.cpNumber.cpnumber : '';
     data['invoice_status_value'] = formValue.status ? formValue.status : '';
    return data;
    }
 

  searchStockReport(){

    if (this.stockReportForm.valid){
      let invoiceFilterValues = this.getPayload(this.stockReportForm.value);
      return this.getCPList(invoiceFilterValues);
      }
    }
  cancelStockReport(){
    this.stockReportForm.reset();
    this.stockReportForm.get('from_date').setValue(this._momentService.deceedDate(new Date(),31));
    this.stockReportForm.get('to_date').setValue(new Date())
    this.getStockOverviewReportList();
  }
  RoundOFTwoDigit(num: any){
    var number = Math.round(num * Math.pow(10, 2)) / Math.pow(10, 2);
    return number;
  }

}











 import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable, Subject } from 'rxjs';

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

    private isSync = new BehaviorSubject<any>(false);


    setSync(message) {
       this.isSync.next(message);
    }

    getSync(): Observable<any>  {
        return this.isSync.asObservable();
    }
}
                                                                                                                                                                

No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...