Activities of "OriAssurant"

any updates on this ?

this still seems to be an big issue for our clients as its still not formatting the dates based on browser locale ? Can you please guide us?

=> In our Startup.js we do have ..

public IServiceProvider ConfigureServices(IServiceCollection services) { // Setting the time zone to UTC. Clock.Provider = ClockProviders.Utc;

}

=> Also in out AppPreBootstrap.ts file as highlighted below we are importing "moment-timezone" instead of moment. Also you can look at the configureMoment method below.

import { UtilsService } from '@abp/utils/utils.service'; import { CompilerOptions, NgModuleRef, Type } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppAuthService } from '@app/shared/common/auth/app-auth.service'; import { AppConsts } from '@shared/AppConsts'; import { SubdomainTenancyNameFinder } from '@shared/helpers/SubdomainTenancyNameFinder'; import * as moment from 'moment-timezone';

import * as _ from 'lodash'; import { UrlHelper } from './shared/helpers/UrlHelper'; import { XmlHttpRequestHelper } from '@shared/helpers/XmlHttpRequestHelper'; import { DynamicResourcesHelper } from '@shared/helpers/DynamicResourcesHelper'; import { environment } from './environments/environment'; import { LocaleMappingService } from '@shared/locale-mapping.service';

export class AppPreBootstrap {

static run(appRootUrl: string, callback: () => void, resolve: any, reject: any): void {
    AppPreBootstrap.getApplicationConfig(appRootUrl, () => {
        if (UrlHelper.isInstallUrl(location.href)) {
            AppPreBootstrap.loadAssetsForInstallPage(callback);
            return;
        }

        const queryStringObj = UrlHelper.getQueryParameters();

        if (queryStringObj.redirect && queryStringObj.redirect === 'TenantRegistration') {
            if (queryStringObj.forceNewRegistration) {
                new AppAuthService().logout();
            }

            location.href = AppConsts.appBaseUrl + '/account/select-edition';
        } else if (queryStringObj.impersonationToken) {
            AppPreBootstrap.impersonatedAuthenticate(queryStringObj.impersonationToken, queryStringObj.tenantId, () => { AppPreBootstrap.getUserConfiguration(callback); });
        } else if (queryStringObj.switchAccountToken) {
            AppPreBootstrap.linkedAccountAuthenticate(queryStringObj.switchAccountToken, queryStringObj.tenantId, () => { AppPreBootstrap.getUserConfiguration(callback); });
        } else {
            AppPreBootstrap.getUserConfiguration(callback);
        }
    });
}

static bootstrap<TM>(moduleType: Type<TM>, compilerOptions?: CompilerOptions | CompilerOptions[]): Promise<NgModuleRef<TM>> {
    return platformBrowserDynamic().bootstrapModule(moduleType, compilerOptions);
}

private static getApplicationConfig(appRootUrl: string, callback: () => void) {
    let type = 'GET';
    let url = appRootUrl + 'assets/' + environment.appConfig;
    let customHeaders = [
        {
            name: 'Abp.TenantId',
            value: abp.multiTenancy.getTenantIdCookie() + ''
        }];

    XmlHttpRequestHelper.ajax(type, url, customHeaders, null, (result) => {
        const subdomainTenancyNameFinder = new SubdomainTenancyNameFinder();
        const tenancyName = subdomainTenancyNameFinder.getCurrentTenancyNameOrNull(result.appBaseUrl);
        // CUSTOM ADDITION HERE
        let getTenantIdURL = result.remoteServiceBaseUrl + '/api/services/app/Account/IsTenantAvailable';
        let getTenantIdData = {tenancyName: tenancyName};

        XmlHttpRequestHelper.ajax('POST', getTenantIdURL, null, JSON.stringify(getTenantIdData), (tenantResult) => {
          
            abp.multiTenancy.setTenantIdCookie(tenantResult.result.tenantId);
            AppConsts.appBuildNumber = result.appBuildNumber;
            AppConsts.appBaseUrlFormat = result.appBaseUrl;
            AppConsts.remoteServiceBaseUrlFormat = result.remoteServiceBaseUrl;
            AppConsts.localeMappings = result.localeMappings;
            AppConsts.azureCdnUrl=result.azureCdnUrl;
            if (tenancyName == null) {
                AppConsts.appBaseUrl = result.appBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');
                //AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');
            } else {
                AppConsts.appBaseUrl = result.appBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl, tenancyName);
                //AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl, tenancyName);
            }
            AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl;

            callback();
        });
    });
}

private static getCurrentClockProvider(currentProviderName: string): abp.timing.IClockProvider {
    if (currentProviderName === 'unspecifiedClockProvider') {
        return abp.timing.unspecifiedClockProvider;
    }

    if (currentProviderName === 'utcClockProvider') {
        return abp.timing.utcClockProvider;
    }

    return abp.timing.localClockProvider;
}

private static impersonatedAuthenticate(impersonationToken: string, tenantId: number, callback: () => void): void {
    abp.multiTenancy.setTenantIdCookie(tenantId);
    const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');

    let requestHeaders = {
        '.AspNetCore.Culture': ('c=' + cookieLangValue + '|uic=' + cookieLangValue),
        'Abp.TenantId': abp.multiTenancy.getTenantIdCookie()
    };

    XmlHttpRequestHelper.ajax(
        'POST',
        AppConsts.remoteServiceBaseUrl + '/api/TokenAuth/ImpersonatedAuthenticate?impersonationToken=' + impersonationToken,
        requestHeaders,
        null,
        (response) => {
            let result = response.result;
            abp.auth.setToken(result.accessToken);
            AppPreBootstrap.setEncryptedTokenCookie(result.encryptedAccessToken);
            location.search = '';
            callback();
        }
    );
}

private static linkedAccountAuthenticate(switchAccountToken: string, tenantId: number, callback: () => void): void {
    abp.multiTenancy.setTenantIdCookie(tenantId);
    const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');

    let requestHeaders = {
        '.AspNetCore.Culture': ('c=' + cookieLangValue + '|uic=' + cookieLangValue),
        'Abp.TenantId': abp.multiTenancy.getTenantIdCookie()
    };

    XmlHttpRequestHelper.ajax(
        'POST',
        AppConsts.remoteServiceBaseUrl + '/api/TokenAuth/LinkedAccountAuthenticate?switchAccountToken=' + switchAccountToken,
        requestHeaders,
        null,
        (response) => {
            let result = response.result;
            abp.auth.setToken(result.accessToken);
            AppPreBootstrap.setEncryptedTokenCookie(result.encryptedAccessToken);
            location.search = '';
            callback();
        }
    );
}

private static getUserConfiguration(callback: () => void): any {
    const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');
    const token = abp.auth.getToken();

    let requestHeaders = {
        '.AspNetCore.Culture': ('c=' + cookieLangValue + '|uic=' + cookieLangValue),
        'Abp.TenantId': abp.multiTenancy.getTenantIdCookie(),
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,PUT,POST'
    };

    if (token) {
        requestHeaders['Authorization'] = 'Bearer ' + token;
    }

    return XmlHttpRequestHelper.ajax('GET', AppConsts.remoteServiceBaseUrl + '/api/services/app/UiCustomizationSettings/GetAll', requestHeaders, null, (response) => {
        let result = JSON.parse(response).result;
        _.merge(abp, result);

        abp.clock.provider = this.getCurrentClockProvider(result.clock.provider);
        AppPreBootstrap.configureMoment();    // call to configure moment.


        abp.event.trigger('abp.dynamicScriptsInitialized');

        AppConsts.noDirectAccessWorkflowPages = JSON.parse(abp.setting.get('App.UiManagement.Workflow.NoDirectAccessPages'));
        AppConsts.recaptchaSiteKey = abp.setting.get('Recaptcha.SiteKey');
        AppConsts.subscriptionExpireNootifyDayCount = parseInt(abp.setting.get('App.TenantManagement.SubscriptionExpireNotifyDayCount'));

        DynamicResourcesHelper.loadResources(callback);
    });
}

private static setEncryptedTokenCookie(encryptedToken: string) {
    new UtilsService().setCookieValue(AppConsts.authorization.encrptedAuthTokenName,
        encryptedToken,
        new Date(new Date().getTime() + 365 * 86400000), //1 year
        abp.appPath
    );
}

private static loadAssetsForInstallPage(callback) {
    abp.setting.values['App.UiManagement.Theme'] = 'default';
    abp.setting.values['default.App.UiManagement.ThemeColor'] = 'default';

    DynamicResourcesHelper.loadResources(callback);
}

private static configureMoment() {

   var locale =  window.navigator.language;
    moment.locale(locale);
    (window as any).moment.locale(locale);
    
        console.log('b-lang',window.navigator.language);
                
    if (abp.clock.provider.supportsMultipleTimezone) {
        console.log('supports time zone');
        moment.tz.setDefault(abp.timing.timeZoneInfo.iana.timeZoneId);
        (window as any).moment.tz.setDefault(abp.timing.timeZoneInfo.iana.timeZoneId);
    } else {
        console.log('does not support time zone');
        moment.fn.toJSON = function () {
         //   return this.locale('en').format();
            return this.format();
        };
        moment.fn.toISOString = function () {
            //return this.locale('en').format();
            return this.format();
        };
    }
}

}

If you seed the languages into the tenant database AbpLanguages table (make sure you populate the TenantId column as well) and then clear the AbpZeroLanguages cache you'll get what you're looking for.

thanks for your answer. But the module you are saying will inherit the same theme for all the components in the account folder. I need a different theme specifially for this page. -- so is it fine if i create a new folder in the src folder and since i will need the language-switch component .. Can i move it to the src root folder or somwhere in a shared folder so it can be used by my other page ?

If you populate the AbpLanguages table in the Tenant database and make sure you populate the TenantId column, then you'll be able to disable specific languages just for that tenant (the Edit and Delete options will appear in the drop down you provided a screenshot of).

You may need to clear the AbpZeroLanguages cache after doing this, I cannot recall.

We have 12 tenants in our instance and use this approach successfully.

Quick question regarding the closure of this issue- Did this change find its way back into one of the 8.x versions ASP.NET Zero? Thanks

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