@fui-org/fui-cli 0.2.0 → 0.3.0

package/skills/fui-skill/scripts/defaultfunction-3.0.js

@@ -0,0 +1,781 @@
+$isMobile = navigator.userAgent.match(/mobile|touch|android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i) != null;
+$isPhone = navigator.userAgent.match(/mobile|touch|android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (phone)|xda|xiino|playbook|silk/i) != null;
+$isApple = navigator.userAgent.match(/ip(ad|hone|od)/i) != null;
+//===========================================================================
+var Loader = function () { }
+Loader.prototype = {
+    require: function (scripts, callback) {
+        this.loadCount = 0;
+        this.totalRequired = scripts.length;
+        this.callback = callback;
+
+        for (var i = 0; i < scripts.length; i++) {
+            this.writeScript(scripts[i]);
+        }
+    },
+    loaded: function (evt) {
+        this.loadCount++;
+
+        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
+    },
+    writeScript: function (src) {
+        var self = this;
+        var s = document.createElement('script');
+        s.type = "text/javascript";
+        s.async = false;
+        s.src = src;
+        s.addEventListener('load', function (e) { self.loaded(e); }, false);
+        var head = document.getElementsByTagName('head')[0];
+        head.appendChild(s);
+    }
+};
+//===========================================================================================
+function loadScripts(scriptsArray, callbackFunc) {
+    var scriptsArray = scriptsArray || new Array();
+    var callbackFunc = callbackFunc || function () { };
+
+    if (scriptsArray.length == 0) {
+        callbackFunc();
+        return;
+    }
+
+    var loadScript = new Loader();
+    loadScript.require(scriptsArray, callbackFunc);
+}
+//===================================================================================
+//===================================================================================
+//===========================================================================================
+function extractHostname(url) {
+    var hostname;
+    //find & remove protocol (http, ftp, etc.) and get hostname
+
+    if (url.indexOf("//") > -1) {
+        hostname = url.split('/')[2];
+    } else {
+        hostname = url.split('/')[0];
+    }
+
+    //find & remove port number
+    hostname = hostname.split(':')[0];
+    //find & remove "?"
+    hostname = hostname.split('?')[0];
+
+    return hostname;
+}
+//===========================================================================================
+const getDomainWithoutSubdomain = url => {
+    const urlParts = new URL(url).hostname.split('.')
+
+    return urlParts
+        .slice(0)
+        .slice(-(urlParts.length === 4 ? 3 : 2))
+        .join('.')
+}
+//===================================================================================
+function pushRouter(router) {
+    var curPath = window.location.pathname;
+    if (curPath != router || curPath == '/') {
+        window.history.pushState({ id: router }, document.title, router);
+    }
+}
+//===================================================================================
+function CALL(obj, includeData) {
+    runAction(obj, includeData);
+}
+//===================================================================================
+function windowSendMessage(window, cmd, data) {
+    //console.log("windowSendMessage", cmd, data);
+    if (_.isObject(window)) {
+        window.postMessage({ cmd: cmd, value: JSON.parse(JSON.stringify(data)) }, '*');
+    } else
+        if (window == "#PARENT") {
+            parent.postMessage({ cmd: cmd, value: JSON.parse(JSON.stringify(data)) }, '*');
+        } else {
+            var win = document.getElementById(window.slice(1, window.length));
+            if (win) win.contentWindow.postMessage({ cmd: cmd, value: JSON.parse(JSON.stringify(data)) }, '*');
+            else console.log("send DATA: Window ID not found")
+        }
+}
+//===========================================================================================
+function appCommand(cmdData) {
+    if (window.ReactNativeWebView) window.ReactNativeWebView.postMessage(cmdData);
+    else if (window.webkit) window.webkit.messageHandlers["scriptHandler"].postMessage(cmdData);
+    else if (window.scriptHandler) window.scriptHandler.postMessage(cmdData);
+}
+//===========================================================================================
+function fillData(obj) {
+    if (!obj.key && !obj.src) { // FILL ALL DATA
+        var mapD = {};
+        _.forEach(obj.map, function (value, key) {
+            mapD[key] = bindData(value);
+        });
+
+        _.forEach(obj.des, function (desObj) {
+            _.forEach(mapD, function (value, key) {
+                desObj[key] = value;
+            });
+        });
+        return
+    }
+
+    var GroupKeySRC = _.groupBy(obj.src, obj.key);
+    _.forEach(obj.map, function (value, key) {
+        _.forEach(obj.des, function (desObj) {
+            var val = GroupKeySRC[desObj[obj.key]];
+            if (_.isString(value)) {
+                if (_.isArray(val)) val = val[0][value];
+                else val = null;
+            }
+            else if (_.isPlainObject(value)) {
+                if (_.isArray(val)) val = val[0];
+                else val = null;
+            }
+            desObj[key] = val;
+        });
+    });
+}
+//===========================================================================================
+function groupBy(arrayObj, groupField, sumArr) { // vi du: groupBy(dsSinhVien, 'Khoa', ['SL Nghỉ Học','SL Tốt Nghiệp'])
+    var gArr = _.groupBy(arrayObj, groupField);
+    var returnArr = [];
+    var sumObj = {};
+    if (!_.isArray(sumArr)) sumArr = [sumArr];
+    //---------------------------------
+    _.forEach(gArr, function (fieldValue, fieldKey) {
+        var n = 0;
+        _.forEach(sumArr, function (v) {
+            sumObj[v] = 0;
+        });
+        _.forEach(fieldValue, function (value) {
+            n++;
+            _.forEach(sumArr, function (v) {
+                sumObj[v] = sumObj[v] + value[v];
+            });
+        });
+        var o = {};
+        o[groupField] = fieldKey;
+        o["count"] = n;
+        o = $.extend(o, sumObj);
+        returnArr.push(o);
+    });
+    return returnArr;
+}
+//===========================================================================================
+function chartDataBuild(obj) {
+    if (obj.dataChart) {
+        var chartData = [];
+        var dataInput = obj.dataChart.data;
+
+        if (_.isUndefined(dataInput)) dataInput = obj.dataChart;
+
+        if (_.isArray(dataInput[0])) {
+            var chartName = JSON.parse(obj.dataChart.chartName);
+            _.forEach(dataInput, function (d, k) {
+                chartData.push({
+                    name: chartName[k],
+                    data: _.map(dataInput[k], function (n) {
+                        return [n.label, n.value];
+                    })
+                });
+            });
+        } else {
+            chartData.push({
+                name: (obj.dataChart.chartName ? obj.dataChart.chartName : null),
+                data: _.map(dataInput, function (n) {
+                    return [n.label, n.value];
+                })
+            });
+        }
+        //---------------------
+        if (obj.allInOne) return [{ name: "", data: chartData }];
+        else return chartData;
+    }
+}
+//===========================================================================================
+function chartQABuild(obj) {
+    if (obj.dataChart) {
+        var chartData = [];
+
+        _.forEach(obj.dataChart[0], function (v, i) { // Duyet tung cau hoi
+            if (v.QType == 'TextArea') {
+
+            } else {
+                chartData.push({
+                    name: v.QText,
+                    data: _.map(_.filter(obj.dataChart[1], ['QID', v.QID]), function (n) {
+                        return [n.label, n.val];
+                    })
+                });
+            }
+        });
+        return chartData;
+    }
+}
+//===========================================================================================
+function confirm(obj) {
+    $.confirm({
+        icon: (obj.icon ? obj.icon : 'mdi mdi-help-circle-outline'),
+        title: obj.title,
+        content: (obj.message ? obj.message : ''),
+        type: (obj.type ? obj.type : 'blue'),
+        columnClass: 'v-col-xs-12 v-col-sm-8 v-col-md-6 v-col-lg-4',
+        animateFromElement: false,
+        buttons: {
+            ok: {
+                text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
+                btnClass: 'btn-blue',
+                keys: ['enter'],
+                action: obj.action
+            },
+            cancel: (obj.cancel ? obj.cancel : function () { })
+        }
+    });
+}
+//===========================================================================================
+function showMessage(obj) {
+    $.dialog({
+        icon: (obj.icon ? obj.icon : 'mdi mdi-information-variant-circle-outline'),
+        title: (obj.title ? obj.title : ''),
+        backgroundDismiss: true,
+        content: (obj.message ? obj.message : ''),
+        type: (obj.type ? obj.type : 'blue'),
+        columnClass: 'v-col-xs-12 v-col-sm-8 v-col-md-6 v-col-lg-4',
+        animateFromElement: false,
+        closeIcon: true,
+        buttons: {
+            ok: {
+                text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Close&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
+                btnClass: 'btn-' + (obj.type ? obj.type : 'blue')
+            }
+        },
+        onClose: function () {
+            if (obj.onclose) {
+                runAction(obj.onclose, { item: obj.item });
+            }
+        },
+    });
+}
+//===========================================================================================
+function rightTest(rightObject) {
+    var returnVal = true
+    _.forEach(rightObject, function (rV, rK) {
+        if (!returnVal) return;
+        var A1 = [];
+        var A2 = [];
+
+        if (_.isArray(rV)) A1 = rV;
+        else A1 = [rV];
+
+        if (_.isArray(vueData.user[rK])) A2 = vueData.user[rK];
+        else A2 = [vueData.user[rK]];
+
+        if (_.intersection(A1, A2).length <= 0) returnVal = false;
+    });
+    return returnVal;
+}
+//===========================================================================================
+function openWindow(obj) {
+    if (window === top) {
+        setTimeout(function () {
+            if(obj.id != undefined && app.config.globalProperties.v_OpenWindowList.find(item => item.id === obj.id) != undefined){
+                console.log("Cửa sổ bị trùng tên: ", obj.id)
+                return;
+            }
+
+            if (_.isString(obj)) obj = { url: obj };
+            obj.uuid = "Window" + generateID();
+            app.config.globalProperties.v_OpenWindowList.push(obj);
+        }, 10);
+    }
+    else {
+        windowSendMessage('#PARENT', 'openWindow', obj);
+    }
+}
+//=========================================================================================
+function redirect(obj, query) {
+    let Q = '';
+    if (obj && obj.url) Q = obj.url;
+    else Q = obj;
+
+    if ((query || (obj && obj.query)) && vueData.p_params != " ") {
+        if (Q.indexOf("?") < 0) Q = Q + vueData.p_params;
+        else Q = Q + vueData.p_params.replace("?", "");
+    }
+
+    location.assign(Q);
+}
+//===========================================================================================
+function reload() {
+    location.assign(window.location.href);
+}
+//===========================================================================================
+function findInArray(obj) {
+    if (_.isString(obj.value)) obj.value = JSON.parse(obj.value);
+    return _.find(obj.array, obj.value);
+}
+//===========================================================================================
+function fixURL(url) {
+    if (url.indexOf('http') == 0) return url;
+    else return vueData.v_Set.apiDomain + url
+}
+//===========================================================================================
+function stringAttrToJson(str, removeVueEvent) {
+    var jObj = {}
+
+    if (typeof str == 'undefined') str = "";
+
+    if (_.isPlainObject(str)) return str;
+
+    $(`<div ${str} >`).each(function () {
+        $.each(this.attributes, function (i, a) {
+            if (removeVueEvent && (typeof a.name == "string" && (a.name.substring(0, 1) == ":" || a.name.substring(0, 1) == "@" || a.name.substring(0, 2) == "v-"))) return;           
+            jObj[a.name] = a.value;
+        })
+    })
+    return jObj
+}
+//===========================================================================================
+function json_data_parse(obj, level) {
+    //--- convert to json data array --------
+    if (level > 3) return;
+
+    level++;
+    if (_.isArray(obj) && obj.length > 0) {
+        //console.log("json_data_parse", level)
+        if (_.isArray(obj[0])) {
+            _.forEach(obj, function (value) {
+                json_data_parse(value, level);
+            });
+        } else if (_.isPlainObject(obj[0])) {
+            var R = obj[0];
+            var nameOfJson = [];
+            _.forEach(R, function (value, key) {
+                if (key.substring(0, 10) == 'json_data:') nameOfJson.push(key);
+            });
+            _.forEach(obj, function (row) {
+                _.forEach(nameOfJson, function (key) {
+                    row[key.replace('json_data:', '')] = JSON.parse(row[key]);
+                    delete row[key];
+                });
+            });
+        }
+    } else if (_.isPlainObject(obj)) {
+        _.forEach(obj, function (value, key) {
+            if (key.substring(0, 10) == 'json_data:') {
+                obj[key.replace('json_data:', '')] = JSON.parse(value);
+                delete obj[key];
+            } else {
+                if (_.isObject(value)) json_data_parse(value, level);
+            }
+        });
+    }
+}
+//===========================================================================================
+function ajaxCALL(URL, DATA, callBack, errorCallBack, header) {
+    let loadingID = generateID();
+    app.config.globalProperties.v_LoadingOverlay.push(loadingID);
+    app.config.globalProperties.v_Loading = true;
+
+    $.ajax({
+        type: "POST",
+        headers: (header ? header : {
+            authorization: $awt
+        }),
+        url: fixURL(URL),
+        contentType: "application/json; charset=utf-8",
+        dataType: "json",
+        crossDomain: true,
+        data: JSON.stringify(DATA),
+        success: function (d) {
+            json_data_parse(d, 0);
+            if (callBack) callBack(d);
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log("API:", URL, "IN:", DATA);
+            console.log("Error XHR:", xhr);
+
+            if (errorCallBack) {
+                errorCallBack(xhr);
+                return
+            }
+
+            showMessage({
+                icon: 'mdi mdi-alert-circle-outline',
+                title: '',
+                message: (xhr.responseJSON ? xhr.responseJSON.Message : (xhr.responseText ? xhr.responseText : "")),
+                type: 'red',
+            });            
+        },
+        complete: function (data) {
+            app.config.globalProperties.v_LoadingOverlay = _.without(app.config.globalProperties.v_LoadingOverlay, loadingID);
+            if (app.config.globalProperties.v_LoadingOverlay.length == 0) app.config.globalProperties.v_Loading = false;
+        }
+    });
+}
+//===========================================================================================
+function capacityText(numb) {
+    if (numb < 1048576) return Math.round(numb / 1024 * 100 / 100) + ' Kb';
+    else return Math.round(numb / 1048576 * 100) / 100 + ' Mb';
+}
+//===========================================================================================
+function generateID() {
+    var d = new Date();
+    var k = d.getTime();
+    var str = k.toString(16).slice(1)
+    var UUID = 'idxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0;
+        v = c == 'x' ? r : (r & 3 | 8);
+        return v.toString(16);
+    });
+    var newString = UUID.replace(/[z]/, str)
+    return newString;
+}
+//===========================================================================================
+function printPDF(obj) {
+    pdfMake.fonts = {
+        Roboto: {
+            normal: 'Roboto-Regular.ttf',
+            bold: 'Roboto-Medium.ttf',
+            italics: 'Roboto-Italic.ttf',
+            bolditalics: 'Roboto-MediumItalic.ttf'
+        },
+        TimesNewRoman: {
+            normal: 'times.ttf',
+            bold: 'timesbd.ttf',
+            italics: 'timesi.ttf',
+            bolditalics: 'timesbi.ttf'
+        }
+    }
+
+    if (obj.download) {
+        pdfMake.createPdf(obj.data).download('fp_pdf_' + generateID() + '.pdf');
+    } else if (obj.viewer) {
+        pdfMake.createPdf(obj.data).getDataUrl(function (outDoc) {
+            $(obj.viewer).attr("src", outDoc);
+        });
+    } else {
+        pdfMake.createPdf(obj.data).getBase64(function (outDoc) {
+            printJS({ printable: outDoc, type: 'pdf', base64: true });
+        });
+    }
+    //-------------------------------------------------------
+    if (_.isFunction(obj.callBack)) obj.callBack();
+}
+//===========================================================================================
+function jsonToExcel(Obj) {
+    if (typeof ExcelJS == 'undefined') {
+        var loadScript = new Loader();
+        loadScript.require(["/include/excel/exceljs.min.js"], function () {
+            writeExcelFile(Obj);
+        });
+    } else writeExcelFile(Obj);
+    function writeExcelFile(inputObj) {
+        var props = {
+            data: null, // Json to download (for single sheet - backward compatibility)
+            filename: "dataFP.xlsx", // filename to export
+            worksheet: "SheetFP", // sheet name for single sheet
+            sheets: null, // New property for multiple sheets
+            onProgress: null, // optional: function({percent, processedRows, totalRows, phase, sheetName}) - phase: 'building'|'finalizing'|'done'|'error'
+            showProgress: true // tự hiện thanh % cố định giữa màn hình khi xuất; truyền false để tắt UI này
+        }
+        Object.assign(props, inputObj);
+        // Gom về một danh sách sheet chung cho cả 2 chế độ cũ (single) và mới (multi) để dùng chung logic tiến trình/chunk
+        var sheetList;
+        if (props.sheets && Array.isArray(props.sheets)) {
+            if (!props.sheets.length) { showMessage({ title: "Sheets data is empty" }); return; }
+            sheetList = props.sheets.filter(function (s) { return s.data && s.data.length; });
+            if (!sheetList.length) { showMessage({ title: "Sheets data is empty" }); return; }
+        } else {
+            if (!props.data || !props.data.length) { showMessage({ title: "Data Null" }); return; }
+            sheetList = [{ name: props.worksheet, data: props.data }];
+        }
+
+        var totalRows = sheetList.reduce(function (sum, s) { return sum + s.data.length; }, 0);
+        var processedRows = 0;
+        // Chunk động: mỗi đợt ghi ~2% tổng số dòng, nên số lần nhường luồng UI luôn ~50 lần dù
+        // data ít hay nhiều (không còn đánh đổi mượt-vs-nhanh như chunk cố định) — data nhỏ thì
+        // chặn dưới 50 dòng/đợt để khỏi nhường luồng vô ích cho vài chục dòng.
+        var CHUNK_SIZE = Math.max(50, Math.ceil(totalRows * 0.02));
+        var progressUI = props.showProgress ? createProgressUI() : null;
+
+        function report(phase, sheetName) {
+            // Giai đoạn ghi dòng ("building") chiếm tối đa 95%; ExcelJS không có hook tiến trình cho bước
+            // nén file (writeBuffer) nên "finalizing" chỉ báo mốc cố định 98%, không nội suy %.
+            var percent = totalRows ? Math.min(95, Math.floor(processedRows / totalRows * 95)) : 0;
+            if (phase === 'finalizing') percent = 98;
+            if (phase === 'done') percent = 100;
+            if (typeof props.onProgress === 'function') {
+                try { props.onProgress({ percent: percent, processedRows: processedRows, totalRows: totalRows, phase: phase, sheetName: sheetName }); }
+                catch (e) { console.error('jsonToExcel onProgress error', e); }
+            }
+            if (progressUI) {
+                progressUI.update({ percent: percent, phase: phase });
+                if (phase === 'done' || phase === 'error') progressUI.destroy();
+            }
+        }
+
+        var workbook = new ExcelJS.Workbook();
+
+        function buildSheet(sheetIndex) {
+            if (sheetIndex >= sheetList.length) { finalize(); return; }
+            var sheetCfg = sheetList[sheetIndex];
+            var worksheet = workbook.addWorksheet(sheetCfg.name || 'Sheet');
+            // Create header (chỉ cần đọc key của dòng đầu, tương đương logic cũ nhưng không lặp check index===0 mỗi vòng)
+            worksheet.columns = Object.keys(sheetCfg.data[0]).map(function (k) { return { header: k, key: k }; });
+
+            var rows = sheetCfg.data;
+            var i = 0;
+            function nextChunk() {
+                try {
+                    var end = Math.min(i + CHUNK_SIZE, rows.length);
+                    for (var r = i; r < end; r++) { worksheet.addRow(rows[r]); }
+                    processedRows += (end - i);
+                    i = end;
+                    report('building', sheetCfg.name);
+                } catch (err) {
+                    console.error('jsonToExcel build error', err);
+                    report('error', sheetCfg.name);
+                    showMessage({ title: 'Xuất Excel thất bại' });
+                    return;
+                }
+                if (i < rows.length) {
+                    // Nhường luồng UI giữa các đợt (thay vì ghi hết trong 1 vòng lặp đồng bộ) để tránh
+                    // trang bị "Not Responding" khi data lớn, đồng thời cho phép % cập nhật lên màn hình.
+                    (window.requestAnimationFrame || function (cb) { setTimeout(cb, 0); })(nextChunk);
+                } else {
+                    buildSheet(sheetIndex + 1);
+                }
+            }
+            nextChunk();
+        }
+
+        function finalize() {
+            report('finalizing');
+            workbook.xlsx.writeBuffer().then(function (data) {
+                var blobType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+                var blob = new Blob([data], { type: blobType });
+                var a = document.createElement('a');
+                document.body.appendChild(a);
+                a.style = 'display: none';
+                var url = window.URL.createObjectURL(blob);
+                a.href = url;
+                a.download = props.filename;
+                a.click();
+                window.URL.revokeObjectURL(url);
+                a.remove();
+                report('done');
+            }).catch(function (err) {
+                console.error('jsonToExcel writeBuffer error', err);
+                report('error');
+                showMessage({ title: 'Xuất Excel thất bại' });
+            });
+        }
+
+        buildSheet(0);
+    }
+
+    // Thanh % mặc định, tự tạo/tự dọn bằng DOM thuần (CSS thủ công, không dùng v-dialog/framework nào)
+    // — fix cố định giữa màn hình, không phụ thuộc Vue nên dùng chung được cho cả V2 và V3.
+    function createProgressUI() {
+        var STYLE_ID = 'fui-json-to-excel-progress-style';
+        // Luôn ghi đè nội dung CSS mới nhất vào thẻ <style>, kể cả khi tag đã tồn tại từ lần
+        // export trước trong cùng phiên trang (SPA không reload) — nếu chỉ tạo-1-lần-rồi-bỏ-qua
+        // như trước, CSS cũ bị kẹt lại vĩnh viễn trong DOM, sửa file JS trên server sau đó
+        // không có tác dụng cho tới khi người dùng F5 lại cả trang.
+        var style = document.getElementById(STYLE_ID);
+        if (!style) {
+            style = document.createElement('style');
+            style.id = STYLE_ID;
+            document.head.appendChild(style);
+        }
+        style.innerHTML = '.fui-xlsx-progress{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;' +
+            'box-sizing:border-box;z-index:99999;background:#fff;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.35);' +
+            'padding: 30px 30px 40px 30px;font:14px/1.4 inherit;transition:opacity .3s}' +
+            '.fui-xlsx-progress .fui-xlsx-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#333}' +
+            '.fui-xlsx-progress .fui-xlsx-label span:first-child{font-size:15px;font-weight:600}' +
+            '.fui-xlsx-progress .fui-xlsx-percent{font-size:22px;font-weight:700;color:#1976d2}' +
+            '.fui-xlsx-progress .fui-xlsx-track{height:8px;border-radius:4px;background:#e0e0e0;overflow:hidden}' +
+            '.fui-xlsx-progress .fui-xlsx-bar{height:100%;width:0;background:#1976d2;transition:width .2s ease-out}';
+        var el = document.createElement('div');
+        el.className = 'fui-xlsx-progress';
+        el.innerHTML = '<div class="fui-xlsx-label"><span>Đang xuất Excel...</span><span class="fui-xlsx-percent">0%</span></div>' +
+            '<div class="fui-xlsx-track"><div class="fui-xlsx-bar"></div></div>';
+        document.body.appendChild(el);
+        var percentEl = el.querySelector('.fui-xlsx-percent');
+        var barEl = el.querySelector('.fui-xlsx-bar');
+        var labelEl = el.querySelector('.fui-xlsx-label span');
+        var destroyed = false;
+        return {
+            update: function (info) {
+                if (destroyed) return;
+                percentEl.textContent = info.percent + '%';
+                barEl.style.width = info.percent + '%';
+                if (info.phase === 'finalizing') labelEl.textContent = 'Đang tạo file...';
+                if (info.phase === 'done') labelEl.textContent = 'Hoàn tất';
+                if (info.phase === 'error') labelEl.textContent = 'Xuất thất bại';
+            },
+            destroy: function () {
+                if (destroyed) return;
+                destroyed = true;
+                el.style.opacity = '0';
+                setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 500);
+            }
+        };
+    }
+}
+//===========================================================================================
+function copyToClipboard(textToCopy) {
+    if (navigator.clipboard && window.isSecureContext) {
+        console.log("Navigator copy: ", textToCopy);
+        return navigator.clipboard.writeText(textToCopy);
+    } else {
+        let textArea = document.createElement("div");
+        textArea.innerText = textToCopy;
+        textArea.style.position = "fixed";
+        textArea.style.left = "0px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+
+        var range = document.createRange();
+        range.selectNode(textArea);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+        return new Promise((res, rej) => {
+            document.execCommand('copy') ? res() : rej();
+            console.log("Command copy: ", textToCopy);
+            textArea.remove();
+        });
+    }
+};
+//===========================================================================================
+function fileNameClear(fname) {
+    if (fname) return fname.replace(/[\!\@\#\$\^\&\%\*\(\)\+\=\-\[\]\\\/\{\}\|\:\<\>\?\,\.\`\"\'\~\;]/gi, '');
+    return fname;
+}
+//===========================================================================================
+function hashCode(s) {
+    var h = 0,
+        l = s.length,
+        i = 0;
+    if (l > 0)
+        while (i < l)
+            h = (h << 5) - h + s.charCodeAt(i++) | 0;
+    return h;
+};
+//===========================================================================================
+function getCookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+function setCookie(name, value, days, domain) {
+    var expires = "";
+    var domainString = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    if (domain) {
+        domainString = "; domain=" + domain
+    }
+    document.cookie = name + "=" + (value || "") + expires + domainString + ";path=/";
+}
+//===================================================================================
+function logout(cookiesName, domain, url) {
+    if (!cookiesName) cookiesName = 'awt';
+    if (typeof domain == "undefined" && vueData.v_Set.authDomain) domain = vueData.v_Set.authDomain;
+
+    setCookie(cookiesName, '', 0, domain);
+
+    if (!url) location.assign(location.href);
+    else location.assign(url);
+}
+
+//===========================================================================================
+//                                      WEBSOCKET
+//===========================================================================================
+function webSocketJoinGroup(groupObj, timeout, callBackFunc) {
+    groupObj = _.cloneDeep(groupObj)
+    _.forEach(groupObj, function (v, k) {
+        if (!vueData.webSocket.hasOwnProperty(k)) {
+            vueData.webSocket[k] = v;
+        }
+    });
+
+    setTimeout(function () {
+        try {
+            $.connection.hub.start().done(function () {
+                _.forEach(groupObj, function (v, k) {
+                    $.connection.chatHub.server.joinGroup(k);
+                });
+                if (_.isFunction(callBackFunc)) callBackFunc();
+            }).fail(function (e) {
+            });
+        }
+        catch (err) {
+
+        }
+    }, (timeout ? timeout : 0));
+}
+
+function webSocketConnection(wsURL, WS, wsState) {
+    $.connection.hub.url = wsURL;
+
+    //=====================================================================
+    $.connection.hub.stateChanged(function (change) {
+        wsState.code = change.newState;
+        if (change.newState === $.signalR.connectionState.reconnecting) {
+            console.log("Websocket Reconnecting")
+            wsState.text = "Reconnecting";
+        }
+        else if (change.newState === $.signalR.connectionState.connected) {
+            console.log("Websocket Connected")
+            wsState.text = "Connected";
+        }
+        else if (change.newState === $.signalR.connectionState.disconnected) {
+            console.log("Websocket Disconnected")
+            wsState.text = "Disconnected";
+
+            webSocketJoinGroup(WS, 5000);
+        }
+    });
+
+    $.connection.chatHub.client.onError = function (Mess) {
+        console.log('Server error: ', Mess);
+    };
+
+    $.connection.chatHub.client.onJoinGroup = function (mess) {
+        console.log("Group", mess)
+    };
+
+    $.connection.chatHub.client.messageReceived = function (group, message) {
+        console.log("Message Received: ", group, message)
+        if (_.isArray(WS[group])) WS[group].push(message);
+        else WS[group] = message;
+    };
+
+    $.connection.chatHub.client.messageSendLog = function (group, message) {
+        console.log("Message Sent: ", group, message)
+    };
+}
+
+function webSocket_Send(obj) {
+    if (_.isPlainObject(obj.data)) $.connection.chatHub.server.messageSendObject(obj.group, obj.data);
+    else if (_.isArray(obj.data)) $.connection.chatHub.server.messageSendArray(obj.group, obj.data);
+    else $.connection.chatHub.server.messageSend(obj.group, obj.data);
+}
+//===========================================================================================
+//===========================================================================================
+//===========================================================================================
+//===========================================================================================