Activities of "OriAssurant"

Here' the html file

**heres' the html file for the returnsmanagement/returns page **

<div> <div class="kt-subheader kt-grid__item"> <div class="kt-subheader__main"> <h3 class="kt-subheader__title"> <span>{{l("Returns")}} - {{ storeDisplayName }} </span> </h3> </div> </div>

<div class="kt-content">
    <div class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__body">

            <form class="kt-form" autocomplete="off">
                <div>
                    <div class="row align-items-center">
                        <div class="col-xl-12">
                            <div class="form-group m-form__group align-items-center">
                                <div class="input-group">
                                    <input [(ngModel)]="filterText" name="filterText" autoFocus
                                        class="form-control m-input" [placeholder]="l('ReturnsPageSearchText')"
                                        type="text">
                                    <span class="input-group-btn">
                                        <button (click)="getReturnsData()" class="btn btn-primary" type="submit"><i
                                                class="flaticon-search-1"></i></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </form>


            <div class="row align-items-center">
                <!--<Primeng-Datatable-Start>-->
                <div class="primeng-datatable-container col-12 table-bordered"
                    [busyIf]="primengTableHelper.isLoading">
                    <p-table #dataTable (onLazyLoad)="getReturnsData($event)" [value]="primengTableHelper.records"
                        rows="25" [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                        [responsive]="primengTableHelper.isResponsive"
                        [resizableColumns]="primengTableHelper.resizableColumns" expandableRows="true"
                        dataKey="orderHeaderId" rowExpandMode="single">

                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width: 35px">
                                </th>
                                <th *ngFor="let col of returnOrderCols" [pSortableColumn]="col.field"
                                    [hidden]="col.isVisible == '0'">
                                    {{col.header}}
                                    <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"></p-sortIcon>
                                </th>
                                <th style="width: 150px" pSortableColumn="trackingNumber">
                                    {{l('TrackingNumber')}}
                                    <p-sortIcon field="trackingNumber"></p-sortIcon>
                                </th>
                                
                                <th>
                                    {{l('Actions')}}
                                </th>
                            </tr>


                        </ng-template>
                        <ng-template pTemplate="body" let-expanded="expanded" let-record="$implicit">
                            <tr>
                                <td style="width: 35px">
                                    <a href="#" [pRowToggler]="record" (click)="getReturnOrderDetail(record)">
                                        <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                                    </a>
                                </td>
                                <td style="width:10px" hidden="true">
                                    <span class="ui-column-title"> {{orderHeaderId}} </span>
                                    {{record.orderHeaderId}}
                                </td>
                                <td style="width:10px" hidden="true">
                                    <span class="ui-column-title"> {{orderHeaderId}} </span>
                                    {{record.orderHeaderId}}
                                </td>
                                <td *ngFor="let col of returnOrderCols">
                                    {{col.field.includes('Time') || col.field.includes('Date') ?  (record[col.field] | momentFormat:'L LTS'):record[col.field]}}
                                </td>
                                <td style="width:135px">
                                        <span class="ui-column-title"> {{TrackingNumber}} </span>
                                         {{record.trackingNumber}}
                                                                   
                                  </td>cmd
                                <td>                                        
                                    <button class="btn btn-sm btn-icon btn-success" [attr.title]="l('ShippingLabel')">
                                        <i [class]="l('ShippingLabelIcon')" [attr.aria-label]="l('ShippingLabel')"></i>
                                    </button>
                                    <button  *ngIf="canPackageSlipPrint" class="btn btn-sm btn-icon btn-success ml-lg-4 ml-md-2" [attr.title]="l('PackageSlip')" (click)="reprintPackageSlip(record.orderNumber)">
                                        <i [class]="l('PackageSlipIcon')" [attr.aria-label]="l('PackageSlip')"></i>
                                    </button>
                                    <!-- <button class="btn btn-sm btn-icon btn-danger" [attr.title]="l('ReturnDetail')"
                                    (click)="getReturnOrderDetail(record)">
                                        <i class="fa fa-sticky-note" [attr.aria-label]="l('ReturnDetail')"></i>
                                    </button>-->
                                </td>

                                <td [hidden]="true">
                                    <div class="btn-group dropdown" dropdown container="body">
                                        <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
                                            <i class="fa fa-print"></i><span class="caret"></span> {{l("Actions")}}
                                        </button>

                                    </div>
                                </td>

                            </tr>
                        </ng-template>

                        <ng-template pTemplate="rowexpansion" let-expanded="expanded" let-record="$implicit">

                            <div style="margin-left:50px;">
                                <p-table rowExpandMode="single" [value]="detailResults">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 150px" pSortableColumn="manufacturer">
                                                {{l('Manufacturer')}}
                                                <p-sortIcon field="manufacturer"></p-sortIcon>
                                            </th>
                                            <th style="width: 250px" pSortableColumn="model">
                                                {{l('Model')}}
                                                <p-sortIcon field="model"></p-sortIcon>
                                            </th>
                                            <th style="width: 150px" pSortableColumn="serialNumber">
                                                {{l('SerialNumber')}}
                                                <p-sortIcon field="serialNumber"></p-sortIcon>
                                            </th>
                                            <th style="width: 150px" pSortableColumn="status">
                                                {{l('Status')}}
                                                <p-sortIcon field="status"></p-sortIcon>
                                            </th>
                                            <th style="width: 150px" pSortableColumn="returnType">
                                                {{l('ReturnType')}}
                                                <p-sortIcon field="returnType"></p-sortIcon>
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record>
                                        <tr>
                                            <td style="width:150px">
                                                <span class="ui-column-title"> {{l('Manufacturer')}}</span>
                                                {{record.manufacturer}}
                                            </td>

                                            <td style="width:250px">
                                                <span class="ui-column-title"> {{l('Model')}}</span>
                                                {{record.model}}
                                            </td>

                                            <td style="width:150px">
                                                <span class="ui-column-title"> {{l('SerialNumber')}}</span>
                                                {{record.serialNumber}}
                                            </td>
                                            <td style="width:150px">
                                                <span class="ui-column-title"> {{l('Status')}}</span>
                                                {{record.status}}
                                            </td>
                                            <td style="width:150px">
                                                <span class="ui-column-title"> {{l('ReturnType')}}</span>
                                                {{record.returnType}}
                                            </td>

                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>

                        </ng-template>



                    </p-table>
                    <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                        {{l('NoData')}}
                    </div>
                    <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                            (onPageChange)="getReturnsData($event)"
                            [totalRecords]="primengTableHelper.totalRecordsCount"
                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                        </p-paginator>
                        <span class="total-records-count">
                            {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                        </span>
                    </div>

                </div>
                <!--<Primeng-Datatable-End>-->

            </div>
        </div>
    </div>
</div>
 <printLabelModal #shippinglabel filename="{{fileName}}"></printLabelModal>
<div [busyIf]="scanIsLoading" *ngIf="!!scanIsLoading"></div>

</div>

**Here's the .ts file **

import { Component, OnInit, Injector, ViewEncapsulation, ViewChild, Input, ElementRef, ChangeDetectorRef, AfterViewInit } from '@angular/core'; import { ShipOutCartStatusUpdateInput, PagedResultDtoOfCosmosDBTransactionEntity, ReturnOrderServiceProxy, ReturnItems, OrderHeaderDto, GetOrderHeaderForViewDto, GetReturnsForViewDto } from '@shared/service-proxies/service-proxies'; import { CreateOrEditShipOutCartDto, CreateReturnOrderInput, CreateReturnOrderDto } from '@shared/service-proxies/service-proxies'; import { ActivatedRoute, Router } from '@angular/router'; import { appModuleAnimation } from '@shared/animations/routerTransition'; import { Table } from 'primeng/components/table/table'; import { Paginator } from 'primeng/components/paginator/paginator'; import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'; import { FileDownloadService } from '@shared/utils/file-download.service'; import { AppSessionService } from '@shared/common/session/app-session.service'; import * as jsPDF from 'jspdf'; import { ShipmentsServiceProxy, ShipmentCustomerLookupTableDto } from '@shared/service-proxies/service-proxies'; import Swal from 'sweetalert2'; import * as _ from 'lodash'; import * as moment from 'moment'; import { AppComponentBase } from '@shared/common/app-component-base'; import { OrganizationUnitsComboboxService } from '@app/main/header/organization-units-combobox/organization-units-combobox.service'; import { formatDate } from '@angular/common'; import { PrintLabelModalComponent } from '../../shared/printLabel/printLabel-modal.component'; import { DisplayMessageComponent } from '@app/main/shared/displayMessage/displayMessage.component'; import { isNullOrUndefined } from 'util';

@Component({ templateUrl: './returns.component.html', encapsulation: ViewEncapsulation.None, styleUrls: ['./returns.component.css'] }) export class ReturnsComponent extends AppComponentBase implements OnInit { @ViewChild('dataTable', { static: true }) dataTable: Table; @ViewChild('paginator', { static: true }) paginator: Paginator; @ViewChild('shippinglabel', { static: false }) printLabelModal: PrintLabelModalComponent; @ViewChild('displayMessage', { static: true }) displayMessage: DisplayMessageComponent; storeDisplayName: string; isValid = true; scanIsLoading = false; refreshGrid = false; advancedFiltersAreShown = false; filterText = ''; orderNumberFilter = ''; referenceNumberFilter = ''; 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 shipOutCols: any[]; returnOrderCols: any[]; detailResults: any; returnorderId = ''; orderNumber: string; fileName = ''; shippingResults: any; labelImage: string; lithiumImage: string; labelType: string; trackingNumber: string; carrierName: string; labelIsLoading: boolean; returnOrderRma: string; returnOrderDetail: any; organizationUnitId: number; canPackageSlipPrint = JSON.parse(abp.features.getValue('App.IncludePackageSlipInReturnOrder'));

constructor( injector: Injector, private _appSessionService: AppSessionService, private _fileDownloadService: FileDownloadService, private _shipmentsServiceProxy: ShipmentsServiceProxy, private _organizationUnitsComboboxService: OrganizationUnitsComboboxService, private _returnOrderService: ReturnOrderServiceProxy, private router: Router, private activatedRoute: ActivatedRoute ) { super(injector); }

nextFrame(): void { if (this._organizationUnitsComboboxService === undefined || this._organizationUnitsComboboxService.selectedOrganizationUnit === undefined) { abp.notify.info(this.l('LoadReturninformation')); setTimeout(() => this.nextFrame(), 1000); } else { this.storeDisplayName = this._organizationUnitsComboboxService.selectedOrganizationUnit.displayName; this.organizationUnitId = this._organizationUnitsComboboxService.selectedOrganizationUnit.id; this.initialize(); this._organizationUnitsComboboxService.events$.forEach(event => { this.storeDisplayName = event.displayName; this.organizationUnitId = event.id; this.getReturnsData(); }); } }

ngOnInit(): void { this.nextFrame(); }

initialize() { this._returnOrderService .getReturnOrdersGridColumnsByTenant() .subscribe((data: any) => { this.returnOrderCols = JSON.parse(JSON.stringify(data)); }); }

// initial loading of return orders data getReturnsData(event?: LazyLoadEvent) { if (this.primengTableHelper.shouldResetPaging(event)) { this.paginator.changePage(0); return; }

this.primengTableHelper.showLoadingIndicator();
this._returnOrderService.getAllReturnOrders(
  this.filterText,
  this.orderNumberFilter,
  this.referenceNumberFilter,
  this.orderStatusNameFilter,
  this.userNameFilter,
  this.trackingNumberFilter,
  this.shipmentTrackingNumberFilter,
  this.organizationUnitId,
  this.primengTableHelper.getSorting(this.dataTable),
  this.primengTableHelper.getSkipCount(this.paginator, event),
  this.primengTableHelper.getMaxResultCount(this.paginator, event)
).subscribe(result => {
  this.primengTableHelper.totalRecordsCount = result.totalCount;
  this.primengTableHelper.records = result.items;
  this.primengTableHelper.hideLoadingIndicator();
},
  err => { this.primengTableHelper.hideLoadingIndicator(); }
);

}

getReturnOrderDetail(getReturns: GetReturnsForViewDto): void { this.primengTableHelper.showLoadingIndicator(); this.detailResults = []; this._returnOrderService.getReturnOrderDetails(getReturns.orderHeaderId) .subscribe(result => { this.detailResults = result; this.primengTableHelper.hideLoadingIndicator(); }, err => { this.primengTableHelper.hideLoadingIndicator(); } ); }

showPopup(warningMsg: string) { const swalWithCustomLogic = Swal.mixin({ onOpen: () => { document.body.className = document.body.className.replace("swal2-toast-shown swal2-shown", ''); }, onClose: () => { document.body.className = document.body.className + " swal2-toast-shown swal2-shown"; } });

swalWithCustomLogic.fire({
  text: warningMsg,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'OK',
  allowOutsideClick: false
}).then((result) => {
  if (result.value) {
  }
});

}

}

any updates please ? we have this issue in our production

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

Hi Maliming,

I have tried upgrading Sweetalert2 to v8.14.0 and also the latest current version v9.15.1. But, still the problem exists.

thanks for you response. I do get the correct browser setting when i work on my local devleopment machine. and also the date format changes according to the browser settings on the ngprime grid locally .But the issue basically happens in our QA and Prod Environments. We do use utcprovider. Also is there any feature we need to enable in Qa and prod environment to make the date format work correctly based on browser settings ?

Thank you again maliming. Let me close this thread:)

Thank you Aaron! That's very detailed and helpful. Wondering why I forgot the IsDefault() at the first place. It's working now!

Thank you so much maliming!! You're the savior. Would it be abp version 4.11?

Best regards,

Thank you Aaron. But somehow it's still not replace the service and going into the replaced implementation.

EnableDbLocalization() is still calling the default one instead of the CustomLanguageManagementConfig.EnableDbLocalization(). Seems LanguageManagementConfig has been initialized together with Configuration.Modules before everything else.

== Basically I had to use:

Configuration.ReplaceService<ILanguageManagementConfig, CustomLanguageManagementConfig>();
(new CustomLanguageManagementConfig(Configuration.IocManager, Configuration)).EnableDbLocalization();

Is there any concern of calling customized EnableDbLocalization() in this way?