VinFontApp/SysApp/wwwroot/js/libs/js-AbsTable.js

export default class AbsTable extends window.AObject {
    constructor(e) {
        super();
        this.data = [];
        this.idCheckBox = 1;
        this.pElement = e;
        this.Headers = [];
        this.lSysRows = [];
        this.InitStructure();
        this.InitCss();
        this.SetIdCheckBox();
    }
    SetIdCheckBox() {
        if (window.nAbsTable == null) {
            window.nAbsTable = 1;
        } else {
            window.nAbsTable += 1;
        }
    }
    SetScrollBarY(height) {
        this.absContainerRows.style.height = height + "px";
    }
    AddHeader(name, width, minWidth, id = "", rowTemp = null) {
        var d = document.createElement("th");
        d.innerHTML = name;
        d.style.width = width;
        if (id != "") {
            d.setAttribute("header-id", id);
        }
        this.Headers.push({ "id": id, "nameCol": name, "element": d, "rowTemp": rowTemp });
        this.absHeaders.appendChild(d);
        if (width == "") {
            this.UpdateWidth(minWidth);
        } else {
            this.UpdateWidth(width);
        }
        
    }
    UpdateWidth(width) {
        this.absTableH.style.minWidth = (parseInt(width) + parseInt(this.absTableH.style.minWidth == "" ? 0 : this.absTableH.style.minWidth)) + "px";
        this.absTable.style.minWidth = this.absTableH.style.minWidth;
        this.absContainerRows.style.minWidth = this.absTableH.style.minWidth;
    }
    AddRow(temp) {
        if (this.lSysRows.length > 0) {
            this.absRows.insertBefore(temp, this.lSysRows[0]);
        } else {
            this.absRows.appendChild(temp);
        }
        temp.querySelectorAll("td").forEach((o, i) => {
            o.style.width = this.Headers[i].element.style.width;
        });
    }
    AddSysRow(temp, id) {
        this.absRows.insertBefore(temp, this.absRows.nextSibling);
        this.lSysRows.push({ "id": id, "element": temp });
    }
    InitCss() {
        this.pElement.classList.add("abs-pContainer");
        this.absContainer.setAttribute("data-style", "default");
        this.absContainer.classList.add("abs-container");
        this.absScrollbar.classList.add("abs-scrollbar");
        this.absTable.classList.add("abs-table", "virtual");
        this.absTableH.classList.add("abs-table");
    }
    IsCheckBox(f) {
        this.isCheckBox = f;
        if (f) {
            var t = this.InitCheckBox("checkItemAll" + window.nAbsTable); 
            this.UpdateWidth(65);
            this.absHeaders.insertBefore(t, this.absHeaders.children[0]);
            this.Headers.unshift({
                "id": "", "nameCol": "", "element": t, "rowTemp": (function (id, data) {
                    this.idCheckBox += 1;
                    return this.InitCheckBox(("checkEle" + window.nAbsTable) + (this.idCheckBox - 1), false).children[0];
                }).bind(this)
            });
            var cBox = this.absHeaders.querySelector("#checkItemAll" + window.nAbsTable); 
            var evF = function (evt) {
                 this.CheckAll_EvtHandler.call(this, evt);
            }.bind(this);
            cBox.addEventListener("change", evF, false);
            this.stackEvent.push({ "event": "change", "callback": evF, "element": cBox, "parent": null });
            var lTD = this.absRows.querySelectorAll("tr");
            lTD.forEach(u => {
                u.insertBefore(this.InitCheckBox(("checkEle" + window.nAbsTable) + idCheckBox, false), u.children[0]);
                this.idCheckBox += 1;
            });
        } else {
            var t = this.absHeaders.querySelector("#checkItemAll" + window.nAbsTable); 
            if (t != null) {
                this.UpdateWidth(-65);
                this.removeEvent(t);
                var tm = this.Headers.shift();
                tm.element.remove();
                var lTD = this.absRows.querySelectorAll("tr");
                lTD.forEach(u => {
                    u.children[0].remove();
                });
                this.idCheckBox = 1;
            }
        }
    }
    InitCheckBox(name, isHeader = true) {
        var td = document.createElement((isHeader) ? "th" : "td");
        var con = document.createElement("div");
        con.classList.add("custom-checkbox", "mr-0", "mt-auto", "mb-auto");
        var cb = document.createElement("input");
        cb.setAttribute("id", name);
        cb.setAttribute("type", "checkbox");
        var lb = document.createElement("label");
        lb.classList.add("a-checkbox-label");
        lb.setAttribute("for", name);
        if (isHeader) {
            td.style.width = "65px";
        } else {
            cb.setAttribute("rowCheck", "");
        }
        con.appendChild(cb);
        con.appendChild(lb);
        td.appendChild(con);
        return td
    }
    InitStructure() {
        this.absContainer = document.createElement("div");
        this.absScrollbar = document.createElement("div");
        this.absContainer.appendChild(this.absScrollbar);
        this.pElement.appendChild(this.absContainer);
        var options = {
            damping: 0.25,
            thumbMinSize: 5,
            renderByPixel: true,
            alwaysShowTracks: true,
            continuousScrolling: true,
            plugins: {
                overscroll: {
                    effect: 'bounce',
                    damping: 0.15,
                    maxOverscroll: 80
                }
            }
        }; 
        Scrollbar.init(this.absScrollbar, options);
        this.absScrollbarCon = this.absScrollbar.querySelector(".scroll-content");
        this.absTableH = document.createElement("table");
        this.absTable = document.createElement("table");
        var d1 = document.createElement("thead");
        var d2 = document.createElement("tr");
        this.absTableH.appendChild(d1);
        this.absHeaders = d2;
        d1.appendChild(d2);

        d1 = document.createElement("tbody");
        this.absTable.appendChild(d1);
        this.absRows = d1;
        this.absScrollbarCon.appendChild(this.absTableH);



        var c = document.createElement("div");
        c.classList.add("atable-scroll");
        c.setAttribute("data-scrollbar", "");
        c.appendChild(this.absTable);
        this.absContainerRows = c;
        this.absScrollbarCon.appendChild(c);
        Scrollbar.init(this.absContainerRows, options);

    }
    CheckAll_EvtHandler(e) {
        var listC = this.absRows.querySelectorAll("input[type=checkbox][rowCheck]");
        listC.forEach(el => {
            if (e.currentTarget.checked) {
                el.checked = true;
            } else {
                el.checked = false;
            }
       
        });
    }
    LoadData(data) {
        this.absRows.innerHTML = "";
        this.data = JSON.parse(data);
        
        this.data.forEach((e, i) => {
            var r = document.createElement("tr");
            r.setAttribute("data-id", i);
            this.Headers.forEach((o) => {
                var td = document.createElement("td");
                if (o.rowTemp != null) {
                    td.appendChild(o.rowTemp(i, e));
                } else {
                    td.innerHTML = e[o.id];
                }
                r.appendChild(td);
            });
            this.AddRow(r);
        });
    }
}