Regarding console error #9247

0

ismcagdas created 4 years ago

Support Team

Hi @OriAssurant

Could you share your related TS and HTML files ?

Thanks,

0

OriAssurant created 4 years ago

Here are the Print modal pop up ts and HTML files . Also attaching the TS and HTML PAge from where the Print label modal is called : -- Here is the Print Label modal TS file below

import { Component, OnInit, ViewChild, Injector, Input } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { AppComponentBase } from '@shared/common/app-component-base';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { AppConsts } from '@shared/AppConsts';

@Component({
  selector: 'printLabelModal',
  templateUrl: './printLabel-modal.component.html',
  styleUrls: ['./printLabel-modal.component.css']
})
export class PrintLabelModalComponent extends AppComponentBase implements OnInit {
  @Input('filename') filename: string;
  @ViewChild('createOrEditModal', { static: false }) modal: ModalDirective;

  safeUrl: SafeResourceUrl;
  uploadUrl: string;
  getUrl: string;
  openPdfInNewTab: boolean = false;
  pdfUrl: string;

  constructor(
    injector: Injector,
    private sanitizer: DomSanitizer,
    private _httpClient: HttpClient
  ) {
    super(injector);
    this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/api/Orders/UploadFileToBlobStorage';
    this.getUrl = AppConsts.remoteServiceBaseUrl + '/api/Orders/GetFileFromBlobStorage/';
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if (navigator.userAgent.match(/Android|webOS|iPhone|iPod|iPad|Blackberry/i) || isSafari) {
      this.openPdfInNewTab = true;
    }
  }

  ngOnInit() {
  }

  show(pdf: any) {
    let labelData = pdf.output('bloburl');
    this.labelURL(labelData);
    this.viewPdf();
  }

  labelURL(label: any) {
    setTimeout(() => {
      this.pdfUrl = label;
      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(label);
    }, 0);
  }

  showPdf(pdf: string) {
    this.labelURL(pdf);
    this.viewPdf();
  }

  close(): void {
    this.modal.hide();
  }

  viewPdf() {
    setTimeout(() => {
      if (this.pdfUrl !== null && this.pdfUrl !== undefined && this.openPdfInNewTab) {
        window.open().location.href = this.pdfUrl;
      }
      else {
        this.modal.show();
      }
    }, 0);
  }

  uploadPdf(pdf: any, fileName: string): void {
    let blob = pdf.output('blob');
    let formData = new FormData();

    formData.append('pdf', blob, fileName);
    this._httpClient
      .post<any>(this.uploadUrl, formData)
      .subscribe();
  }

  getPdf(containerName: string, fileName: string) {
    this._httpClient
      .get(this.getUrl + containerName + '/' + fileName, { responseType: 'blob' })
      .subscribe(res => {
        let file = new Blob([res], { type: res.type });
        let url = window.URL.createObjectURL(file);
        this.labelURL(url);
        this.viewPdf();
      });
  }
}

---- HTML FILE FOR PRINT MODAL POP UP

<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" [config]="{backdrop: 'static', keyboard: false}">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="embed-responsive embed-responsive-1by1">
        <iframe class="embed-responsive-item" type="application/pdf" [src]='this.safeUrl' id="labelFrame" framemargin="0"
          class="frame" width="100%">
        </iframe>
      </div>
      <div class="text-center">
        <button type="button" class="btn btn-primary blue m-2" (click)="close()">{{l("Close")}}</button>
      </div>
    </div>
  </div>
</div>

---- THE PRINT LABEL MODAL IS BEING CALLED FROM THIS PAGE :

<div [@routerTransition]>
    <div class="kt-subheader kt-grid__item">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                <span>{{l("Vouchers")}} - {{ storeDisplayName }} </span>
            </h3>

              <button (click)="openReceipt(record.offerNumber)" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
        </div>
    </div>
    
    <printLabelModal #printLabelModal filename="{{fileName}}"></printLabelModal>
    <div [busyIf]="voucherIsLoading" *ngIf="voucherIsLoading"></div>
</div>

--- HERE 's the TS FILE FOR THAT

import { Component, OnInit, Injector, ViewEncapsulation, ViewChild, Input, ElementRef, ChangeDetectorRef, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Table } from 'primeng/components/table/table';
import { Paginator } from 'primeng/components/paginator/paginator';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { OfferServiceProxy, GetAllVoucherViewDto } from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import { AppComponentBase } from '@shared/common/app-component-base';
import { OrganizationUnitsComboboxService } from '@app/main/header/organization-units-combobox/organization-units-combobox.service';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import * as moment from 'moment';
import { formatDate } from '@angular/common';
import { PrintLabelModalComponent } from '@app/main/shared/printLabel/printLabel-modal.component';
import { AppConsts } from '@shared/AppConsts';

@Component({
    templateUrl: './voucher.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})

export class VoucherComponent extends AppComponentBase implements OnInit {
    @ViewChild('dataTable', { static: true }) dataTable: Table;
    @ViewChild('paginator', { static: true }) paginator: Paginator;
    @ViewChild('printLabelModal', { static: true }) printLabelModal: PrintLabelModalComponent;

    storeDisplayName: string;
    isValid = true;
    voucherIsLoading = false;

    advancedFiltersAreShown = false;
    filterText = '';
    imeiFilter = '';
    voucherNumberFilter = '';
    rmaNumberFilter = '';
    commentFilter = '';
    isDeletedFilter = -1;
    maxCreationTimeFilter: moment.Moment;
    minCreationTimeFilter: moment.Moment;
    maxModificationTimeFilter: moment.Moment;
    minModificationTimeFilter: moment.Moment;
    organizationUnitDisplayNameFilter = '';
    orderStatusNameFilter = '';
    userNameFilter = '';
    orderTypeCodeFilter = '';
    trackingNumberFilter = '';
    shipmentTrackingNumberFilter = '';
    //start dynamic columns - will come from backend

    detailResults: any;
    returnorderId = '';
    orderNumber: string;
    fileName: string;
    shippingResults: any;
    labelImage: string;
    lithiumImage: string;
    labelType: string;
    trackingNumber: string;
    labelIsLoading: boolean;
    returnOrderRma: string;
    returnOrderDetail: any;
    organizationUnitId: number;
    userNameFeature = JSON.parse(abp.features.getValue('App.UserNameFeature'));

    constructor(
        injector: Injector,
        private _organizationUnitsComboboxService: OrganizationUnitsComboboxService,
        private _offerService: OfferServiceProxy,
    ) {
        super(injector);
    }

    nextFrame(): void {
        if (this._organizationUnitsComboboxService === undefined || this._organizationUnitsComboboxService.selectedOrganizationUnit === undefined) {
            if(AppConsts.showAbpNotifications) abp.notify.info(this.l('LoadVoucherData'));
            setTimeout(() => this.nextFrame(), 1000);
        } else {
            this.storeDisplayName = this._organizationUnitsComboboxService.selectedOrganizationUnit.displayName;
            this.organizationUnitId = this._organizationUnitsComboboxService.selectedOrganizationUnit.id;
            this.initialize();
        }
    }

    ngOnInit(): void {
        this.nextFrame();
        this._organizationUnitsComboboxService.events$.forEach(event => {
            this.storeDisplayName = event.displayName;
            this.organizationUnitId = event.id;
             });
    }

       // initial loading of data
    initialize() {
      }


    openReceipt(offerNumber: string): void {
        this.printLabelModal.getPdf('receipts', offerNumber + '.pdf');        
    }
}

0

ismcagdas created 4 years ago

Support Team

Hi,

Does the error disapper when you comment out content of this.viewPdf(); ?

3 Answer(s)