tnx-shared 5.1.417 → 5.1.418

package/fesm2015/tnx-shared.js

@@ -13,7 +13,7 @@ import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-transla
 import { MessageService, ConfirmationService, PrimeNGConfig } from 'tn-custom-primeng/api';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { HubConnectionBuilder } from '@aspnet/signalr';
-import { saveAs } from 'file-saver';
+import FileSaver, { saveAs } from 'file-saver';
 import printJS$3 from 'print-js';
 import { FileUpload, FileUploadModule } from 'tn-custom-primeng/fileupload';
 import { DomSanitizer, BrowserModule, Title } from '@angular/platform-browser';
@@ -17328,7 +17328,6 @@ class ExportService {
         this._http = _http;
         this._injector = _injector;
         this._commonService = _commonService;
-        this._moduleConfigService = _moduleConfigService;
         this._moduleConfig = _moduleConfigService.getConfig();
         this.environment = this._moduleConfig.environment;
         this.serviceUri = `${this._moduleConfig.environment.apiDomain.templateEndpoint}/Export`;
@@ -17345,7 +17344,13 @@ class ExportService {
         const data = new Blob([buffer], {
             type: EXCEL_TYPE$1
         });
-        saveAs(data, fileName + '_' + new Date().getTime() + EXCEL_EXTENSION$1);
+        FileSaver.saveAs(data, fileName + '_' + new Date().getTime() + EXCEL_EXTENSION$1);
+    }
+    saveSpreadSheet(buffer, fileName) {
+        const data = new Blob([buffer], {
+            type: EXCEL_TYPE$1
+        });
+        FileSaver.saveAs(data, new Date().getTime() + '_' + fileName);
     }
 }
 ExportService.ɵprov = ɵɵdefineInjectable({ factory: function ExportService_Factory() { return new ExportService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(CommonService), ɵɵinject(ModuleConfigService)); }, token: ExportService, providedIn: "root" });
@@ -23434,11 +23439,13 @@ class FileObjectService extends BaseService {
         super(http, injector, `${_moduleConfigService.getConfig().environment.apiDomain.fileEndpoint}/${_moduleConfigService.getConfig().environment.apiVersion}/FileObject`);
         this._moduleConfigService = _moduleConfigService;
         this.thumborEndpoint = '';
+        this.fileWithThumborEndpoint = '';
         this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.fileEndpoint;
+        this.fileWithThumborEndpoint = _moduleConfigService.getConfig().environment.apiDomain.fileWithThumborEndpoint;
         this.thumborEndpoint = _moduleConfigService.getConfig().environment.apiDomain.thumbor;
     }
     getFileUrlWithThumbor(fileId, width = 0, height = 0) {
-        const url = `${this.thumborEndpoint}/unsafe/${width}x${height}/smart/${this.endPoint}/v5/FileObject/public/${fileId}/download`;
+        const url = `${this.thumborEndpoint}/unsafe/${width}x${height}/smart/${this.fileWithThumborEndpoint}/v5/FileObject/public/${fileId}/download`;
         return url;
     }
     getUrlImage(fileId) {
@@ -23605,6 +23612,12 @@ class FileObjectService extends BaseService {
         }
         return result;
     }
+    uploadWithByteArray(file) {
+        const formData = new FormData();
+        formData.append('files', file);
+        const url = `${this.serviceUri}/UploadWithByteArray`;
+        return this._http.post(url, formData, { responseType: 'text' }).toPromise();
+    }
 }
 FileObjectService.ɵprov = ɵɵdefineInjectable({ factory: function FileObjectService_Factory() { return new FileObjectService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(ModuleConfigService)); }, token: FileObjectService, providedIn: "root" });
 FileObjectService.decorators = [
@@ -49399,11 +49412,12 @@ TnTemplateComponent.propDecorators = {
 };
 
 class TnTinymceComponent extends ComponentBase {
-    constructor(injector, _deviceDetectorService, _notifierService, _fileService) {
+    constructor(injector, _deviceDetectorService, _notifierService, _fileService, _fileObjectService) {
         super(injector);
         this._deviceDetectorService = _deviceDetectorService;
         this._notifierService = _notifierService;
         this._fileService = _fileService;
+        this._fileObjectService = _fileObjectService;
         this.mode = 'basic';
         this.disabled = false;
         this.required = false;
@@ -49536,19 +49550,35 @@ class TnTinymceComponent extends ComponentBase {
             }).on('focus', e => {
                 editorHolder.classList.add('tinymce-focus');
             }).on('paste', (e) => {
+                const begin = new Date();
                 const types = e.originalEvent.clipboardData.types;
-                if (((types instanceof DOMStringList) && types.contains('text/html')) || (types.indexOf && types.indexOf('text/html') !== -1)) {
+                if (((types instanceof DOMStringList) && types.contains('text/html')) || (types.indexOf && (types.indexOf('text/html') !== -1) || types.indexOf('Files') !== -1)) {
+                    this._notifierService.showSuccess('Đang tiến hành xử lý nội dung, vui lòng chờ trong giây lát!');
                     e.originalEvent.stopPropagation();
                     e.originalEvent.preventDefault();
-                    this.handlePaste(e.originalEvent).then((content) => {
-                        if (content) {
-                            // content = content.replace(/<!\[if[\s\S]*?>/gm, '').replace(/<!\[endif[\s\S]*?>/gm, '');
-                            content = this.normalizeHTML(content, '<![if !supportLists]>', '<![endif]>');
-                            content = this.normalizeHTML(content, '<![if !msEquation]>', '<![endif]>');
-                            editor.execCommand('mceInsertContent', false, content);
+                    const types = e.originalEvent.clipboardData.types;
+                    const files = e.originalEvent.clipboardData.files;
+                    let pastedData = '';
+                    let pastedRtfData = '';
+                    if ((e.originalEvent.clipboardData.types instanceof DOMStringList && e.originalEvent.clipboardData.types.contains('text/html')) || (e.originalEvent.clipboardData.types.indexOf && e.originalEvent.clipboardData.types.indexOf('text/html') !== -1)) {
+                        pastedData = e.originalEvent.clipboardData.getData('text/html');
+                        if (((e.originalEvent.clipboardData.types instanceof DOMStringList) && e.originalEvent.clipboardData.types.contains('text/rtf')) || (e.originalEvent.clipboardData.types.indexOf && e.originalEvent.clipboardData.types.indexOf('text/rtf') !== -1)) {
+                            pastedRtfData = e.originalEvent.clipboardData.getData('text/rtf');
                         }
-                    });
-                    return false;
+                    }
+                    setTimeout(() => {
+                        this.handlePaste(types, pastedData, pastedRtfData, files).then((content) => {
+                            const end = new Date();
+                            console.log('Time to run handlePaste is ' + (end.getTime() - begin.getTime()) + 'ms');
+                            if (content) {
+                                // content = content.replace(/<!\[if[\s\S]*?>/gm, '').replace(/<!\[endif[\s\S]*?>/gm, '');
+                                content = this.normalizeHTML(content, '<![if !supportLists]>', '<![endif]>');
+                                content = this.normalizeHTML(content, '<![if !msEquation]>', '<![endif]>');
+                                editor.execCommand('mceInsertContent', false, content);
+                            }
+                        });
+                        return false;
+                    }, 500);
                 }
             }).on('keydown', (e) => {
                 if (e.ctrlKey || e.metaKey) {
@@ -49670,9 +49700,9 @@ class TnTinymceComponent extends ComponentBase {
             this.editor.focus();
         }
     }
-    handlePaste(e) {
+    handlePaste(types, pastedData, pastedRtfData, files) {
         return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => {
+            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                 const images = [];
                 let oldLegacyValue = false;
                 const settings = {
@@ -49695,19 +49725,19 @@ class TnTinymceComponent extends ComponentBase {
                         }
                     }
                 };
-                const types = e.clipboardData.types;
-                if (((types instanceof DOMStringList) && types.contains('text/html')) || (types.indexOf && types.indexOf('text/html') !== -1)) {
-                    let pastedData = e.clipboardData.getData('text/html');
+                if (types.indexOf('text/html') !== -1) {
                     if (pastedData.indexOf('<v:imagedata ') == -1) {
                         resolve(pastedData);
                     }
                     else {
-                        if (((types instanceof DOMStringList) && types.contains('text/rtf')) || (types.indexOf && types.indexOf('text/rtf') !== -1)) {
-                            const pastedRtfData = e.clipboardData.getData('text/rtf');
+                        if (types.indexOf('text/rtf') !== -1) {
                             const doc = new RTFJS.Document(this._commonService.stringToArrayBuffer(pastedRtfData), settings);
-                            doc.render().then((htmlElements) => {
+                            doc.render().then((htmlElements) => __awaiter(this, void 0, void 0, function* () {
                                 let index = pastedData.indexOf('<v:imagedata ');
                                 let i = 0;
+                                const imageUploaded = [];
+                                let docm = new DOMParser().parseFromString(pastedData, 'text/html');
+                                let img = docm.getElementsByTagName('img');
                                 while (index > -1) {
                                     const p1 = pastedData.substring(0, index);
                                     const index2 = pastedData.indexOf('/>', index);
@@ -49715,27 +49745,67 @@ class TnTinymceComponent extends ComponentBase {
                                         break;
                                     else {
                                         const p2 = pastedData.substring(index2 + 2);
-                                        let imageStr = '';
                                         if (images.length > i) {
-                                            imageStr = images[i];
+                                            const indexImg = images[i].indexOf('<img src=');
+                                            if (indexImg !== -1) {
+                                                images[i] = images[i].substring(indexImg + 10, images[i].length - 2);
+                                            }
+                                            const imageType = images[i].substring(5, images[i].indexOf(';'));
+                                            const base64 = images[i].substring(images[i].indexOf('base64,') + 7);
+                                            const imageBlob = this.dataURItoBlob(base64, imageType);
+                                            const srcArr = img[i].src.split('/');
+                                            const fileName = srcArr[srcArr.length - 1];
+                                            const file = new File([imageBlob], fileName, { type: imageType });
+                                            const uploadImage = yield this._fileObjectService.uploadWithByteArray(file);
+                                            if (typeof uploadImage == 'string') {
+                                                imageUploaded.push(this._fileObjectService.getUrlImage(uploadImage));
+                                            }
+                                            else {
+                                                this._notifierService.showWarning('Upload file thất bại');
+                                            }
                                         }
-                                        pastedData = p1 + imageStr + p2;
+                                        pastedData = p1 + '<img src=' + imageUploaded[i] + '/>' + p2;
                                         index = pastedData.indexOf('<v:imagedata ');
                                         i++;
                                     }
                                 }
-                                resolve(pastedData);
-                            }).catch(err => {
+                                docm = new DOMParser().parseFromString(pastedData, 'text/html');
+                                img = docm.getElementsByTagName('img');
+                                for (let i = 0; i < images.length; i++) {
+                                    if (imageUploaded[i]) {
+                                        img[i].src = imageUploaded[i];
+                                        img[i].alt = imageUploaded[i];
+                                    }
+                                }
+                                let result = '';
+                                result = new XMLSerializer().serializeToString(docm);
+                                resolve(result);
+                            })).catch(err => {
                                 console.error(err);
                                 resolve(null);
                             });
                         }
                     }
                 }
+                else if (types.indexOf('Files') !== -1) {
+                    let result = '';
+                    if (files.length > 0) {
+                        for (const item of files) {
+                            const uploadImage = yield this._fileObjectService.uploadWithByteArray(item);
+                            if (typeof uploadImage == 'string') {
+                                result += '<img src=' + this._fileObjectService.getUrlImage(uploadImage) + '/>';
+                            }
+                            else {
+                                this._notifierService.showWarning('Upload file thất bại');
+                            }
+                        }
+                    }
+                    resolve(result);
+                }
                 else {
                     resolve(null);
                 }
-            });
+            }));
         });
     }
     openFileManager() {
@@ -49762,11 +49832,21 @@ class TnTinymceComponent extends ComponentBase {
         this.showTemplate = false;
         this.editor.insertContent(evt);
     }
+    dataURItoBlob(dataURI, fileType) {
+        const byteString = window.atob(dataURI);
+        const arrayBuffer = new ArrayBuffer(byteString.length);
+        const int8Array = new Uint8Array(arrayBuffer);
+        for (let i = 0; i < byteString.length; i++) {
+            int8Array[i] = byteString.charCodeAt(i);
+        }
+        const blob = new Blob([int8Array], { type: fileType });
+        return blob;
+    }
 }
 TnTinymceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'tn-tinymce',
-                template: "<input *ngIf=\"!_deviceDetectorService.isDesktop()\" class=\"input-tab-trap\" (focus)=\"focusTrap($event)\" />\r\n<textarea class=\"tinymce-control\" id={{id}} [ngStyle]=\"{height: height+'px'}\">\r\n</textarea>\r\n<tn-dialog #dialog *ngIf=\"equationFormModel.show\" [closeOnEscape]=\"false\"\r\n    [header]=\"'C\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc (d\u00F9ng laTex)' | translate\" [popupSize]=\"popupSize\">\r\n    <tn-custom-scrollbar #scrollbar>\r\n        <equation-editor [data]=\"dataEquation\">\r\n        </equation-editor>\r\n    </tn-custom-scrollbar>\r\n    <ng-template #footer>\r\n        <button icon=\"fas fa-check\" [disabled]=\"model.submitting\" pButton type=\"button\" (click)=\"handleOk($event)\"\r\n            [label]=\"'Ok' | translate\"></button>\r\n        <button icon=\"fas fa-undo\" [disabled]=\"model.submitting\" pButton class=\"ui-button-secondary\" type=\"button\"\r\n            (click)=\"equationFormModel.show = false\" [label]=\"'FORM.CANCEL' | translate\"></button>\r\n    </ng-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddNews\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddNews = false\">\r\n    <add-news #listBase [languageCode]=\"languageCode\" (showChange)=\"showChanged($event)\"></add-news>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showTemplate\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"showTemplate = false\">\r\n    <tn-template (onChanged)=\"addTemplate($event)\"></tn-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddFile\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddFile = false\">\r\n    <file-picker-dialog #formBase [parentModel]=\" model\" [parentContext]=\"context\" (closeForm)=\"isAddFile = false\"\r\n        (onCancel)=\"handleRFCancel($event)\" (onChanged)=\"showChanged($event)\">\r\n    </file-picker-dialog>\r\n</tn-dialog>\r\n",
+                template: "<input *ngIf=\"!_deviceDetectorService.isDesktop()\" class=\"input-tab-trap\" (focus)=\"focusTrap($event)\" />\r\n<textarea class=\"tinymce-control\" id={{id}} [ngStyle]=\"{height: height+'px'}\"></textarea>\r\n<tn-dialog #dialog *ngIf=\"equationFormModel.show\" [closeOnEscape]=\"false\"\r\n    [header]=\"'C\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc (d\u00F9ng laTex)' | translate\" [popupSize]=\"popupSize\">\r\n    <tn-custom-scrollbar #scrollbar>\r\n        <equation-editor [data]=\"dataEquation\">\r\n        </equation-editor>\r\n    </tn-custom-scrollbar>\r\n    <ng-template #footer>\r\n        <button icon=\"fas fa-check\" [disabled]=\"model.submitting\" pButton type=\"button\" (click)=\"handleOk($event)\"\r\n            [label]=\"'Ok' | translate\"></button>\r\n        <button icon=\"fas fa-undo\" [disabled]=\"model.submitting\" pButton class=\"ui-button-secondary\" type=\"button\"\r\n            (click)=\"equationFormModel.show = false\" [label]=\"'FORM.CANCEL' | translate\"></button>\r\n    </ng-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddNews\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddNews = false\">\r\n    <add-news #listBase [languageCode]=\"languageCode\" (showChange)=\"showChanged($event)\"></add-news>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showTemplate\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\"\r\n    [popupSize]=\"popupSize\" (onHide)=\"showTemplate = false\">\r\n    <tn-template (onChanged)=\"addTemplate($event)\"></tn-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddFile\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddFile = false\">\r\n    <file-picker-dialog #formBase [parentModel]=\" model\" [parentContext]=\"context\" (closeForm)=\"isAddFile = false\"\r\n        (onCancel)=\"handleRFCancel($event)\" (onChanged)=\"showChanged($event)\">\r\n    </file-picker-dialog>\r\n</tn-dialog>",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -49782,7 +49862,8 @@ TnTinymceComponent.ctorParameters = () => [
     { type: Injector },
     { type: DeviceDetectorService },
     { type: NotifierService },
-    { type: FileExplorerService }
+    { type: FileExplorerService },
+    { type: FileObjectService }
 ];
 TnTinymceComponent.propDecorators = {
     equationForm: [{ type: ViewChild, args: [EquationEditorComponent,] }],