mdkcontroller 1.1.4 → 1.2.1

package/Cores/file/DKGrid.css

@@ -0,0 +1,132 @@
+.dk-table {
+  font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.dk-table td {
+  border: 1px solid #ddd;
+}
+
+.dk-table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #04aa6d;
+  color: white;
+  font-weight: bold;
+  border: 1px solid;
+}
+
+.dk-table .gridToolCell ul {
+  display: flex;
+  list-style-type: none;
+  margin: 5px;
+  padding-left: 10px;
+}
+
+.dk-table .gridToolCell ul li {
+  padding: 3px 10px;
+  border: 1px solid;
+  margin-right: 3px;
+  border-radius: 6px;
+  cursor: pointer;
+  place-self: center;
+}
+
+.dk-table .gridToolCell ul li:hover {
+  background-color: #3e559ed6;
+  color: white;
+}
+
+.dk-table .gridHeaderCell td {
+  background: #aeb4c4;
+  padding: 5px;
+  font-size: 19px;
+  font-weight: bold;
+  height: 38px;
+}
+
+.dk-table .gridBodyCell {
+  vertical-align: text-top;
+}
+
+.dk-table .RowNavigator td {
+  background: white;
+  border-bottom: 1px solid #ff2828d6;
+  border-radius: 7px;
+}
+
+.dk-table .edit {
+  font-size: 18px;
+}
+
+.dk-table .edit tr {
+  height: 33px;
+}
+
+.dk-table .RowNavigator td>input,
+.dk-table .RowNavigator td>select {
+  height: 23px;
+  font-size: 18px;
+}
+
+.dk-table .edit tr:nth-child(even) {
+  background-color: #dadada;
+}
+
+.dk-table .edit tr:nth-child(odd) {
+  background-color: #f1f1f1;
+}
+
+.dk-table .edit input[type="checkbox"] {
+  min-height: 22px;
+  width: 30px;
+  margin: auto;
+  display: block;
+}
+
+.dk-table .edit input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+
+.dk-table .edit input:not([type="checkbox"]) :focus {
+  outline: 1px solid rgba(65, 185, 65, 0.705);
+}
+
+.dk-table .edit input:not(:disabled),
+.dk-table .edit select {
+  display: block;
+  color: #495057;
+  background-color: #fff;
+  background-image: none;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  width: -webkit-fill-available;
+  padding: 0;
+  outline: none;
+}
+
+.dk-actionsBar {
+  padding: 5px 10px;
+  width: max-content;
+}
+
+.dk-actionsBar button {
+  border: 2px solid #0e9966b6;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 1s;
+}
+
+.dk-actionsBar button:active,
+.dk-actionsBar button:hover {
+  border-color: #0fbd7db6;
+}
+
+.active {
+  background: #0075ffc4;
+}

package/Cores/file/DKGrid.js

@@ -0,0 +1,534 @@
+class DKGrid {
+    #cache;
+    #event;
+    constructor(boxId, config = {}) {
+        this.boxId = boxId;
+        this.id = boxId + "_autogrid";
+        this.idRaw = boxId + "_autogrid_dataraw";
+        this.idEditor = boxId + "_autogrid_editor";
+        this.config = { ...DKGrid.defaultConfig, ...config };
+        this.#cache = { updated: {}, deleted: {}, origin: {} };
+        this.rowOnFocus = null;
+        this.#event = {};
+        this.page = { current: 1, total: 1, size: 10 };
+        if (!config) {
+            console.log("Config default cho table " + boxid, DKGrid.configDefault);
+            return;
+        }
+
+        this.#init();
+        return this;
+    }
+    addEventListener(eventName, callback) {
+        this.#event[eventName] = this.#event[eventName] || [];
+        this.#event[eventName].push(callback);
+        //rowClick, openEditor, commitData, onCreateNewKey
+    }
+    fireEvent(eventName, callback, ...args) {
+        const callbacks = this.#event[eventName] || [];
+        for (let index = 0; index < callbacks.length; index++) {
+            const cb = callbacks[index];
+            const rs = cb(...args);
+            if (callback && callback(rs) == false) {
+                return;
+            }
+        }
+    }
+    static defaultConfig = {
+        postTo: '',
+        allowCommit: true,
+        allowEdit: true,
+        primaryKey: '',
+        column: [{ fieldName: '', title: '', dataType: '' }]
+    };
+
+    #init() {
+        const box = document.getElementById(this.boxId);
+        if (!box) {
+            console.error(`Không tìm thấy phần tử có ID: ${this.boxId}`);
+            return;
+        }
+
+        if (!this.config.primaryKey) {
+            this.config.primaryKey = this.config.column[0]?.fieldName || '';
+        }
+
+        const tableTemplate = this.#generateTableHTML();
+        box.innerHTML = tableTemplate;
+        this.tableRaw = document.getElementById(this.idRaw);
+        this.tableEditor = document.getElementById(this.idEditor);
+        this.statusBox = document.getElementById(this.id + "_status");
+        this.#attachEvents();
+    }
+
+    #generateTableHTML() {
+        const th_html = this.config.column.map(f => `<td class="GridHeader GridRow">${f.title}</td>`).join("");
+        let totalWidth = 0;
+        const colWidths = this.config.column.map(f => {
+            let width = f.width || (f.dataType === "string" ? 200 : f.dataType === "date" ? 140 : f.dataType === "number" ? 100 : 80);
+            totalWidth += width;
+            return `<col style="width: ${width}px;">`;
+        }).join("");
+        let trEditor_html = this.config.column.map(f => {
+            switch (f.dataType) {
+                case "string": return `<td><input type='text'name='${f.fieldName}'/></td>`;
+                case "bool": return `<td><input type="checkbox" name='${f.fieldName}'></td>`;
+                case "date": return `<td><input type="date" name='${f.fieldName}'></td>`;
+                case "number": return `<td><input type="number" name='${f.fieldName}'></td>`;
+                case "select":
+                    let items = "";
+                    for (let index = 0; index < f.items.length; index++) {
+                        const item = f.items[index];
+                        items += `<option value="${item.value}">${item.text}</option>`;
+                    }
+                    return `<td><select name='${f.fieldName}'>${items}</select></td>`;
+                default: return `<td><input type='text' name='${f.fieldName}'/></td>`;
+            }
+        }).join("\r\n");
+        return `
+        <div style='height: 100%;width: 100%; overflow: hidden;'>
+        <table id='${this.id}' class='dk-table' style='height: 100%;'>
+        <tr style='height: 1px;'>
+            <td class='gridToolCell'>
+                    <div>
+                        <ul id='${this.id}_gridToolCell' style='display: flex; list-style-type: none; margin: 5px;'>
+                            <li data-cmd='add'><i class="fa fa-plus" aria-hidden="true"></i></li>
+                            <li data-cmd='del'><i class="fa fa-times" aria-hidden="true"></i></li>
+                            <li data-cmd='cancel'><i class="fa fa-recycle" aria-hidden="true"></i></li>
+                            <li data-cmd='save'><i class="fa fa-cloud-upload" aria-hidden="true"></i></li>
+                            <li data-cmd='refresh'><input id='${this.id}_inputSearch' type='search' style='width:150px;'></li>
+                        </ul>
+                    </div>
+            </td>
+        </tr>
+        <tr style='height: 1px;'>
+            <td class='gridHeaderCell'>
+                <div id='${this.id}_headerTitle' style='overflow-x: hidden;'>
+                    <table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed; width: ${totalWidth}px; margin-right: 17px;">
+                        <colgroup>${colWidths}</colgroup>
+                        <thead><tr>${th_html}</tr></thead>
+                    </table> 
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class='gridBodyCell'>
+                <div id='${this.id}_bodyContent' style='position: relative; height: 100%; overflow: scroll;'>
+                    <table id='${this.idRaw}' class='edit' cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;width: ${totalWidth}px;">
+                        <colgroup>${colWidths}</colgroup>
+                        <tbody></tbody>
+                    </table> 
+                    <table id='${this.idEditor}' class='edit RowNavigator' cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;width: ${totalWidth}px;position: absolute;left: 0px;top: 40px; display: none;">
+                        <colgroup>${colWidths}</colgroup>
+                        <tbody><tr>${trEditor_html}</tr></tbody>
+                    </table> 
+                </div>
+            </td>
+        </tr>
+        <tr style='height: 1px;'>
+            <td class='gridToolCell'>
+                <div style='display: flex; align-items: center;'>
+                    <ul id='${this.id}_gridPagingCell' style='display: flex; list-style-type: none; margin: 5px; padding: 2px 32px;'>
+                        <li data-cmd='1'>1</li>
+                        <li data-cmd='2'>2</li>
+                        <li data-cmd='3'>3</li>
+                        <li data-cmd='4'>4</li>
+                        <li data-cmd='5'>5</li>
+                    </ul>
+                    <span id='${this.id}_status' style='font-size:18px;'>xx/50</span>
+                </div>
+            </td>
+        </tr>
+        </table>
+        </div>`;
+    }
+
+    #attachEvents() {
+        const dkgrid = this;
+        this.tableEditor.addEventListener('keydown', function (event) {
+            const keyCode = event.keyCode || event.which;
+
+            dkgrid.#keyDownOnTable(keyCode);
+        });
+
+        this.tableRaw.addEventListener('click', function (event) {
+            const clickedRow = event.target.closest('tr');
+            if (clickedRow) {
+                dkgrid.#rowClick(event);
+            }
+        });
+        document.getElementById(this.id + "_gridToolCell").addEventListener('click', (event) => {
+            const cmdElement = event.target.closest('li[data-cmd]');
+            if (!cmdElement) return;
+
+            const cmd = cmdElement.dataset.cmd;
+            switch (cmd) {
+                case "add": this.addNewRow(); break;
+                case "del": this.deleteRow(); break;
+                case "save": this.commitData(); break;
+                case "cancel": this.cancelChanges(); break;
+            }
+        });
+        this.pagingCell = document.getElementById(this.id + "_gridPagingCell");
+        this.pagingCell.addEventListener('click', (event) => {
+            const cmdElement = event.target.closest('li[data-cmd]');
+            if (!cmdElement) return;
+
+            const cmd = cmdElement.dataset.cmd;
+            const page = parseInt(cmd);
+            if (page) {
+                this.page.current = Math.min(page, this.page.total);
+                this.loadDataByPage();
+            }
+        });
+        document.getElementById(dkgrid.id + "_bodyContent").addEventListener("scroll", function () {
+            const header = document.getElementById(dkgrid.id + "_headerTitle");
+            header.scrollLeft = document.getElementById(dkgrid.id + "_bodyContent").scrollLeft;
+        });
+        document.getElementById(dkgrid.id + "_inputSearch").addEventListener("keydown", function (event) {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                dkgrid.loadDataByPage();
+            }
+        });
+    }
+    #keyDownOnTable(keyCode) {
+        // ESC
+        if (keyCode == 27) {
+            if (this.rowOnFocus) {
+                const lastRow = this.rowOnFocus;
+                this.#closeEditor(lastRow, true);
+            }
+        }
+        // ENTER
+        if (keyCode == 13) {
+            if (this.rowOnFocus) {
+                const lastRow = this.rowOnFocus;
+                this.#closeEditor(lastRow, false);
+            }
+        }
+    }
+    #rowClick(sender) {
+        const trTag = sender.target.closest('tr');
+        const tableConfig = this.config;
+        if (this.rowOnFocus) {
+            const lastRow = this.rowOnFocus;
+            if (lastRow.dataset.editting == "1") {
+                this.#closeEditor(lastRow, false);
+            }
+        }
+        this.rowOnFocus = trTag;
+        if (!tableConfig.allowEdit) return;
+
+        if (this.#openEditor(trTag) == false) {
+            return;
+        }
+
+        const cellIndex = sender.target.cellIndex;
+        const tbEditor = this.tableEditor;
+        var cell = tbEditor.querySelector('tbody').querySelectorAll('td')[cellIndex];
+        if (cell?.firstChild) {
+            cell.firstChild.focus();
+        }
+    }
+    #openEditor(trTag = new HTMLElement()) {
+        const table = trTag.closest('table');
+        const tableConfig = this.config;
+        const primaryKey = tableConfig.primaryKey;
+        const currentKeyValue = trTag.dataset.primaryValue;
+
+        const cache = this.#cache;
+
+        let objectCurrent = cache.updated[currentKeyValue] || cache.origin[currentKeyValue];
+        {
+            let throwX = false;
+            this.fireEvent('openEditor', (rs) => {
+                throwX = rs === false;
+                return !throwX;
+            }, objectCurrent, this);
+            if (throwX) return false;
+        }
+        const tbEditor = this.tableEditor;
+        tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
+            child => {
+                const input = child.firstChild;
+                try {
+                    if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                        input.value = objectCurrent[input.name] || "";
+                        if (input.type == 'checkbox') {
+                            input.checked = objectCurrent[input.name] || false;
+                        }
+                    }
+                } catch (exx) {
+                    console.log("Error in openEditor: ", exx);
+                }
+            }
+        );
+        tbEditor.style.top = trTag.offsetTop + "px";
+        tbEditor.style.display = "table";
+        trTag.dataset.editting = '1';
+        return true;
+    }
+    #closeEditor(trTag = new HTMLElement(), isClear = false, isdelete = false) {
+        const table = trTag.closest('table');
+        const tbEditor = this.tableEditor;
+        if (!isdelete) {
+            const tableConfig = this.config;
+            const primaryKey = tableConfig.primaryKey;
+            const currentKeyValue = trTag.dataset.primaryValue;
+            const cache = this.#cache;
+
+            let objectCurrent = cache.updated[currentKeyValue] || {...cache.origin[currentKeyValue]};
+            let objectEditing = {};
+            let hasChange = false;
+            tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
+                child => {
+                    const input = child.firstChild;
+                    if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                        objectEditing[input.name] = input.value;
+                        if (input.type == 'checkbox') {
+                            objectEditing[input.name] = input.checked;
+                        }
+                        if (input.type == 'number') {
+                            objectEditing[input.name] = Number.parseFloat(input.value) || "";
+                        }
+                    }
+                    if (objectCurrent[input.name] != objectEditing[input.name]) {
+                        hasChange = true;
+                    }
+                }
+            );
+            if (hasChange) {
+                let isBreak = false;
+                if (isClear) {
+                    if (confirm("Bạn có chắc chắn muốn hủy bỏ tất cả thay đổi không?")) {
+                        isBreak = true;
+                    }
+                }
+                if (!isBreak) {
+                    Object.keys(objectEditing).forEach(key => {
+                        objectCurrent[key] = objectEditing[key];
+                    });
+                    cache.updated[currentKeyValue] = objectCurrent;
+                    this.#createRow(trTag, objectCurrent);
+                }
+            }
+        }
+        tbEditor.style.top = "-50px";
+        tbEditor.style.display = "none";
+        trTag.dataset.editting = '0';
+    }
+    #createRow(trTag, data) {
+        const table = trTag.closest('table');
+        const tableConfig = this.config;
+        const item = data;
+        trTag.innerHTML = "";
+        tableConfig.column.forEach(f => {
+            const td = document.createElement('td');
+            switch (f.dataType) {
+                case "string": td.textContent = item[f.fieldName]; break;
+                case "bool":
+                    td.textContent = item[f.fieldName] ? "checked" : "";
+                    td.innerHTML = `<input type='checkbox' ${td.textContent}/>`; break;
+                case "date": td.textContent = item[f.fieldName] || ''; break;
+                case "number": td.textContent = item[f.fieldName] || ''; break;
+                case "select":
+                    td.textContent = f.items.find(i => i.value == item[f.fieldName])?.text;
+                    break;
+                default: td.textContent = item[f.fieldName]; break;
+            }
+            trTag.appendChild(td);
+        });
+    }
+    loadData(data) {
+        const cache = this.#cache;
+        if (data) {
+            cache.origin = {};
+            data.forEach(item => {
+                cache.origin[item[this.config.primaryKey]] = item;
+            });
+            cache.updated = {};
+            cache.deleted = {};
+            this.page.total = Math.ceil(data.length / this.page.size);
+        }
+        this.loadDataByPage();
+    }
+    loadDataByPage() {
+        const cache = this.#cache;
+
+        const dataCollection = {};
+        Object.keys(cache.origin).forEach(key => {
+            dataCollection[key] = cache.origin[key];
+        });
+        Object.keys(cache.updated).forEach(key => {
+            dataCollection[key] = cache.updated[key];
+        });
+        Object.keys(cache.deleted).forEach(key => {
+            delete dataCollection[key];
+        }); 
+
+        const dataCollection_array = [];
+        const textSearch = document.getElementById(this.id + "_inputSearch").value;
+        Object.values(dataCollection).forEach(item => {
+            if (!textSearch) {
+                dataCollection_array.push(item);
+            } else {
+                this.config.column.forEach(f => {
+                    let textValue = item[f.fieldName];
+                    if (f.dataType == "select") {
+                        textValue = f.items.find(i => i.value == item[f.fieldName])?.text ?? textValue;
+                    }
+                    if (textValue?.toString().toLowerCase().includes(textSearch.toLowerCase())) {
+                        dataCollection_array.push(item);
+                        return;
+                    }
+                });
+            }
+        });
+
+        const page = this.page;
+        page.total = Math.ceil(dataCollection_array.length / page.size);
+        page.current = Math.min(page.current, page.total);
+
+        const start = (page.current - 1) * page.size;
+        const end = start + page.size;
+
+        this.pagingCell.innerHTML = "";
+        {
+            const min = Math.max(2, page.current - 2);
+            const max = Math.min(page.total - 1, page.current + 2);
+            this.pagingCell.appendChild(hideCreatePageLi(1, "font-weight: bold; margin-right: 15px;"));
+            for (let index = min; index <= max; index++) {
+                this.pagingCell.appendChild(hideCreatePageLi(index));
+            }
+            this.pagingCell.appendChild(hideCreatePageLi(page.total, "font-weight: bold; margin-left: 15px;"));
+            function hideCreatePageLi(num, style = '') {
+                const li = document.createElement('li');
+                li.dataset.cmd = num;
+                li.textContent = num;
+                li.style = style;
+                if (num == page.current) {
+                    li.classList.add('active');
+                }
+                return li;
+            }
+        }
+        const dataPrint = dataCollection_array.slice(start, end);
+        this.statusBox.textContent = `${dataPrint.length}/${dataCollection_array.length}`;
+        this.printPage(dataPrint);
+    }
+    printPage(dataPrint = []) {
+        const table = this.tableRaw;
+        const tableConfig = this.config;
+        const tbody = table.querySelector('tbody');
+        tbody.innerHTML = '';
+        dataPrint.forEach(
+            item => {
+                const tr = document.createElement('tr');
+                tr.dataset.primaryValue = item[tableConfig.primaryKey];
+                tr.dataset.editting = '0';
+                tableConfig.column.forEach(f => {
+                    const td = document.createElement('td');
+                    switch (f.dataType) {
+                        case "string": td.textContent = item[f.fieldName]; break;
+                        case "bool":
+                            td.textContent = item[f.fieldName] ? "checked" : "";
+                            td.innerHTML = `<input type='checkbox' ${td.textContent}/>`; break;
+                        case "date": td.textContent = item[f.fieldName] || ''; break;
+                        case "number": td.textContent = item[f.fieldName] || ''; break;
+                        case "select":
+                            td.textContent = f.items.find(i => i.value == item[f.fieldName]).text;
+                            break;
+                        default: td.textContent = item[f.fieldName]; break;
+                    }
+                    tr.appendChild(td);
+                });
+                tbody.appendChild(tr);
+            }
+        );
+    }
+    addNewRow() {
+        const tbody = this.tableRaw.querySelector('tbody');
+        const newTR = document.createElement('tr');
+        tbody.appendChild(newTR);
+        const tableConfig = this.config;
+        const primaryKey = tableConfig.primaryKey;
+        let newOb = {};
+        {
+            this.fireEvent('onCreateNewKey', (rs) => {
+                newOb[primaryKey] = rs;
+            });
+        }
+        if (!newOb[primaryKey]) {
+            newOb[primaryKey] = DKGrid.generateRandomString(32);
+        }
+        newTR.dataset.primaryValue = newOb[primaryKey];
+        const cache = this.#cache;
+        cache.updated[newOb[primaryKey]] = (newOb);
+        this.#createRow(newTR, newOb);
+    }
+
+    deleteRow() {
+        if (this.rowOnFocus) {
+            if (confirm("Bạn có chắc chắn muốn xóa dữ liệu này?") != true) return;
+            this.#closeEditor(this.rowOnFocus, true, true);
+            const cache = this.#cache;
+            const tableConfig = this.config;
+            const primaryKey = tableConfig.primaryKey;
+            const lastRow = this.rowOnFocus;
+            const currentKeyValue = lastRow.dataset.primaryValue;
+            const objectOriginal = cache.origin[currentKeyValue];
+            if (objectOriginal) {
+                cache.deleted[currentKeyValue] = (objectOriginal);
+            }
+
+            let objectCache = cache.updated[currentKeyValue];
+            if (objectCache) {
+                delete cache.updated[currentKeyValue];
+            }
+
+            table.dataset.cache = JSON.stringify(cache);
+            lastRow.remove();
+            delete this.rowOnFocus;
+        }
+    }
+
+    commitData() {
+        this.fireEvent('commitData', null, ({ updated: this.#cache.updated, deleted: this.#cache.deleted }));
+    }
+
+    cancelChanges() {
+        if (confirm("Bạn có chắc chắn muốn hủy bỏ tất cả thay đổi không?") != true) {
+            return;
+        }
+        const cache = this.#cache;
+        const dataOrigin = [];
+        Object.keys(cache.origin).forEach(key => {
+            dataOrigin.push(cache.origin[key]);
+        });
+        this.loadData(dataOrigin);
+    }
+    static inputCheckboxReadOnly(event) {
+        event.preventDefault();
+    }
+    static generateRandomString(length = 8) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+        let result = '';
+        const charactersLength = characters.length;
+        for (let i = 0; i < length; i++) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        }
+        return result.toUpperCase();
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    const scriptElements = document.getElementsByTagName('script');
+    for (let x = 0; x < scriptElements.length; x++) {
+        const currentScript = scriptElements[x];
+        const scriptPath = currentScript.src;
+        if (scriptPath.endsWith('/dkgrid.js')) {
+            const currentScriptPath = scriptPath.substring(0, scriptPath.lastIndexOf('/dkgrid.js'))
+            DK.ImportCss(currentScriptPath + '/DKGrid.css');
+        }
+    }
+});

package/Cores/file/dk.js

@@ -92,7 +92,7 @@ const DK = {
 
                     const divImage = document.createElement('div');
                     divImage.style.cssText = `height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;`;
-                    divImage.innerHTML = `<img style='position: fixed;opacity: 0.1;width: 150px;' src='${(DK.varHide.currentScriptPath + '/' + imageName)}'/>`;
+                    divImage.innerHTML = `<img style='position: fixed;opacity: 0.1;' src='${(DK.varHide.currentScriptPath + '/' + imageName)}'/>`;
                     const overlay_inner = document.createElement('span');
                     overlay_inner.style.cssText = 'font-weight: bold;overflow-wrap: anywhere;max-width: 500px;z-index: 1;overflow: auto;';
                     overlay_inner.classList.add('dk-overlay_inner');
@@ -122,6 +122,33 @@ const DK = {
         const imgTag = dk_overlay.getElementsByTagName('img')[0];
         imgTag.style.height = dialog.parentNode.parentNode.clientHeight + 'px';
     },
+    DKDataCache: {},
+    buildFormEvent: () => {
+        document.querySelectorAll("input, select").forEach(field => {
+            const formP = field.closest('form');
+            if (formP && formP.id && field.parentElement.tagName != 'TD' && field.name) {
+                DK.DKDataCache[formP.id] = DK.DKDataCache[formP.id] ?? {};
+                field.addEventListener("blur", (event) => {
+                    const fieldName = field.name;
+                    if (DK.DKDataCache[formP.id][fieldName] != field.value) {
+                        const oldOB = { ...DK.DKDataCache[formP.id] };
+                        DK.DKDataCache[formP.id][fieldName] = field.value;
+
+                        const fnname = `${formP.id}_${field.name}_updated`;
+                        const formEvent = window[`${formP.id}_updated`];
+                        const fieldEvent = window[fnname];
+                        if (fieldEvent) {
+                            fieldEvent(field.value, oldOB[fieldName], { ...oldOB });
+                        }
+                        if (formEvent) {
+                            formEvent(DK.DKDataCache[formP.id], { ...oldOB });
+                        }
+                    }
+
+                });
+            }
+        });
+    },
     ImportCss: (src) => {
         var link = document.createElement("link");
         link.href = src;
@@ -131,12 +158,18 @@ const DK = {
 
         document.getElementsByTagName("head")[0].appendChild(link);
     },
-    ImportJS: (src) => {
+    ImportJS: (src, isModule = false) => {
         var scriptJS = document.createElement("script");
         scriptJS.src = src;
+        if (isModule) scriptJS.type = "module";
         document.getElementsByTagName("head")[0].appendChild(scriptJS);
     }
 }
+Object.prototype.forEachExt = function (work) {
+    for (let i = 0; i < this.length; i++) {
+        work(this[i], i, this);
+    }
+};
 document.addEventListener('DOMContentLoaded', () => {
     const scriptElements = document.getElementsByTagName('script');
     for (let x = 0; x < scriptElements.length; x++) {
@@ -145,10 +178,6 @@ document.addEventListener('DOMContentLoaded', () => {
         if (scriptPath.endsWith('/dk.js')) {
             DK.varHide.currentScriptPath = scriptPath.substring(0, scriptPath.lastIndexOf('/dk.js'))
             DK.ImportCss(DK.varHide.currentScriptPath + '/dk.css');
-            setTimeout(() => {
-                DK.ImportJS(DK.varHide.currentScriptPath + '/dk_table.js');
-                DK.ImportCss(DK.varHide.currentScriptPath + '/dk_table.css');
-            }, 100);
         }
     }
-});
+});

package/package.json

@@ -9,14 +9,15 @@
     "socket.io": "^4.7.2"
   },
   "name": "mdkcontroller",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "keywords": [],
   "author": "KHANHNBD <khanh272421@gmail.com>",
   "license": "ISC",
   "description": "Quick setup authentication and express",
   "type": "module",
   "exports": {
-    ".": "./index.js"
+    ".": "./index.js",
+    "./autosequence": "./dk_modules/autoSequence.js"
   },
   "types": "./index.js",
   "files": [
@@ -24,7 +25,6 @@
     "main.js",
     "index.js",
     "Cores/",
-    "dk_modules/",
-    "Pages/"
+    "dk_modules/"
   ]
-}
+}

package/readme.md

@@ -0,0 +1 @@
+#some thing

package/Cores/file/dk_table.css

@@ -1,63 +0,0 @@
-.dk-table-x1 {
-  font-family: Arial, Helvetica, sans-serif;
-  border-collapse: collapse;
-  width: 100%;
-  min-width: 800px;
-}
-
-.dk-table-x1 th {
-  padding: 5px;
-  font-size: 15px;
-}
-.dk-table-x1 td {
-  font-size: 13px;
-  border: 1px solid #ddd;
-}
-.dk-table-x1 tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-.dk-table-x1 tr:hover {
-  background-color: #ddd;
-}
-
-.dk-table-x1 th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: left;
-  background-color: #04aa6d;
-  color: white;
-  font-weight: bold;
-  border: 1px solid;
-}
-
-.dk-table-x1 input[type="checkbox"] {
-  min-height: 22px;
-  width: 30px;
-  margin: auto;
-  display: block;
-}
-.dk-table-x1 input[type="checkbox"]:disabled {
-  cursor: not-allowed;
-}
-.dk-table-x1 input:not([type="checkbox"]) {
-  width: 100%;
-}
-.dk-table-x1 input:not(:disabled) {
-  display: block;
-  color: #495057;
-  background-color: #fff;
-  background-image: none;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-}
-.dk-actionsBar {
-  padding: 5px 10px;
-  width: max-content;
-}
-.dk-actionsBar button {
-  border-radius: 6px;
-  border: none;
-}

package/Cores/file/dk_table.js

@@ -1,252 +0,0 @@
-const DKTable = {
-    rowOnFocus: {},
-    rowClick: (sender) => {
-        const trTag = sender.currentTarget;
-        const table = trTag.upParent('table');
-        if (trTag.dataset.editting == "true") return;
-        const cellIndex = sender.target.cellIndex;
-        if (DKTable.rowOnFocus[table.id]) {
-            const lastRow = DKTable.rowOnFocus[table.id];
-            DKTable.hideUpdateRecord(lastRow, table, false);
-        }
-        DKTable.rowOnFocus[table.id] = trTag;
-
-        const storeData = JSON.parse(table.dataset.store);
-        const fieldTypes = JSON.parse(table.dataset.fieldType);
-        const primaryKey = table.dataset.primaryKey;
-        const currentKeyValue = trTag.dataset.primaryValue;
-
-        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
-        let objectCurrent = cache.updated.find(f => f[primaryKey] == currentKeyValue);
-        if (!objectCurrent) {
-            objectCurrent = storeData.find(f => f[primaryKey] == currentKeyValue);
-        }
-        DKTable.hideLoadRecord(trTag, objectCurrent, fieldTypes, sender.target);
-        console.log('Your input is: ', sender.target);
-        var cell = trTag.cells[cellIndex];
-        if (cell?.children[0]) {
-            cell.children[0].focus();
-        }
-    },
-    hideUpdateRecord: (trTag = new HTMLElement(), table = new HTMLElement(), isClear = false) => {
-        if (trTag.dataset.editting == 'false') {
-            return;
-        }
-        const storeData = JSON.parse(table.dataset.store);
-        const fieldTypes = JSON.parse(table.dataset.fieldType);
-        const primaryKey = table.dataset.primaryKey;
-        const currentKeyValue = trTag.dataset.primaryValue;
-        const objectCurrent = storeData.find(f => f[primaryKey] == currentKeyValue) || {};
-        ///
-        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
-        let itemOnCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
-        if (!itemOnCache) {
-            if (isClear) {
-                itemOnCache = objectCurrent;
-                DKTable.rowOnFocus[table.id] = undefined;
-            } else {
-                cache.updated.push({ ...objectCurrent });
-                itemOnCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
-            }
-        }
-        if (!isClear) {
-            fieldTypes.forEach(field => {
-                const input = trTag.querySelector(`input[name="${field.fieldName}"]`).closest('input');
-                if (input) {
-                    switch (input.type) {
-                        case 'checkbox':
-                            itemOnCache[field.fieldName] = input.checked;
-                            break;
-                        default:
-                            itemOnCache[field.fieldName] = input.value;
-                            break;
-                    }
-                }
-            });
-        }
-        trTag.dataset.primaryValue = itemOnCache[primaryKey];
-        trTag.innerHTML = "";
-        fieldTypes.forEach(field => {
-            const td = document.createElement('td');
-            switch (field.dataType) {
-                case "boolean":
-                    td.innerHTML = `<input type="checkbox" ${(itemOnCache[field.fieldName] ? 'checked' : '')} onclick='DKTable.inputCheckboxReadOnly(event)'>`; break;
-                default:
-                    td.innerText = itemOnCache[field.fieldName]; break;
-            }
-            trTag.appendChild(td);
-        });
-
-        let areEqual = true;
-        let hasChild = false;
-        for (const key in itemOnCache) {
-            hasChild = true;
-            if (objectCurrent[key] !== itemOnCache[key]) {
-                areEqual = false;
-                break;
-            }
-        }
-        if (areEqual && hasChild) {
-            cache.updated = cache.updated.filter(obj => obj[primaryKey] !== itemOnCache[primaryKey]);
-        }
-        trTag.dataset.editting = "false";
-        table.dataset.cache = JSON.stringify(cache);
-    },
-    hideLoadRecord: (trTag = new HTMLElement(), data = {}, fieldTypes = []) => {
-        const inputWs = [];
-        for (let index = 0; index < trTag.children.length; index++) {
-            const element = trTag.children[index];
-            inputWs.push(element.clientWidth);
-        }
-        trTag.innerHTML = "";
-        let firsttd = null;
-        let ccinput = 0;
-        fieldTypes.forEach(field => {
-            const td = document.createElement('td');
-            td.style.minWidth = inputWs[ccinput++] + 'px';
-            switch (field.dataType) {
-                case "boolean":
-                    td.innerHTML = `<input name="${field.fieldName}" type="checkbox" ${data[field.fieldName] ? 'checked' : ''}>`;
-                    break;
-                case "number":
-                    td.innerHTML = `<input name="${field.fieldName}" type='number' value='${data[field.fieldName] || 0}'>`;
-                    break;
-                case "date":
-                    td.innerHTML = `<input name="${field.fieldName}" type='date' value='${data[field.fieldName] || ""}'>`;
-                    break;
-                default:
-                    td.innerHTML = `<input name="${field.fieldName}" type='text' value='${data[field.fieldName] || ""}'>`;
-                    break;
-            }
-            firsttd = firsttd || td;
-            trTag.appendChild(td);
-        });
-        // firsttd.children[0].focus();
-        trTag.dataset.editting = "true";
-    },
-    CommitDataTable: (table = new HTMLElement()) => {
-        const storeData = JSON.parse(table.dataset.store);
-        if (DKTable.rowOnFocus[table.id]) {
-            const lastRow = DKTable.rowOnFocus[table.id];
-            DKTable.hideUpdateRecord(lastRow, table, false);
-        }
-
-        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
-        const host = document.location.origin;
-        DK.showBusy(true, "Đang cập nhật thông tin phân quyền video");
-        fetch(host + table.dataset.postTo, {
-            method: "POST",
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(cache)
-        })
-            .then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error('API request failed');
-                }
-            })
-            .then(res => {
-                DK.showBusy(false, "Đang cập nhật thông tin phân quyền video");
-                if (res.success) {
-                    DK.showMessage("Đã cập nhật thành công", 1);
-                }
-                else {
-                    DK.showMessage(res.message, 4);
-                }
-            })
-            .catch(error => {
-                DK.showBusy(false, "Đang cập nhật thông tin phân quyền video");
-                DK.showMessage(error, 4);
-            });;
-    },
-    DeleteRowCurrent: (table = new HTMLElement()) => {
-        if (DKTable.rowOnFocus[table.id]) {
-            const storeData = JSON.parse(table.dataset.store);
-            const primaryKey = table.dataset.primaryKey;
-            const lastRow = DKTable.rowOnFocus[table.id];
-            const currentKeyValue = lastRow.dataset.primaryValue;
-            const objectOriginal = storeData.find(f => f[primaryKey] == currentKeyValue);
-            ///
-            const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
-            let objectCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
-            if (objectOriginal) {
-                cache.deleted.push(objectOriginal);
-            }
-            cache.updated = cache.updated.filter(obj => obj[primaryKey] !== objectCache[primaryKey]);
-            table.dataset.cache = JSON.stringify(cache);
-            lastRow.remove();
-            delete DKTable.rowOnFocus[table.id];
-        }
-    },
-    AddNewRow: (table = new HTMLElement()) => {
-        const fieldTypes = JSON.parse(table.dataset.fieldType);
-        const primaryKey = table.dataset.primaryKey;
-        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
-
-        const tbody = table.downChild('tbody');
-        const trTag = document.createElement('tr');
-        trTag.onclick = () => { DKTable.rowClick(trTag) };
-        const currentTicks = new Date().getTime();
-        if (!fieldTypes.find(f => f.fieldName == primaryKey)) {
-            trTag.dataset.primaryValue = "AutoGenerate_" + currentTicks.toString();
-            cache.updated.push(JSON.parse(`{"${primaryKey}":"${trTag.dataset.primaryValue}"}`));
-            table.dataset.cache = JSON.stringify(cache);
-        }
-        trTag.innerHTML = "";
-        fieldTypes.forEach(field => {
-            const td = document.createElement('td');
-            switch (field.dataType) {
-                case "boolean":
-                    td.innerHTML = `<input type="checkbox" disabled>`;
-                    break;
-                case "number":
-                    td.innerText = 0;
-                    break;
-                default:
-                    td.innerText = "";
-                    break;
-            }
-            trTag.appendChild(td);
-        });
-        trTag.dataset.editting = "false";
-        tbody.appendChild(trTag);
-    },
-    keyDownOnTable: (keyCode, sender) => {
-        // ESC
-        if (keyCode == 27) {
-            const table = sender;
-            if (DKTable.rowOnFocus[table.id]) {
-                const lastRow = DKTable.rowOnFocus[table.id];
-                DKTable.hideUpdateRecord(lastRow, table, true);
-            }
-        }
-    },
-    inputCheckboxReadOnly: (event) => {
-        event.preventDefault();
-    }
-}
-HTMLElement.prototype.upParent = function (name) {
-    if (this.parentNode.tagName.toLowerCase() == name.toLowerCase()) {
-        return this.parentNode;
-    }
-    if (this.parentNode) {
-        return this.parentNode.upParent(name);
-    }
-    return null;
-}
-HTMLElement.prototype.downChild = function (name) {
-    for (let index = 0; index < this.children.length; index++) {
-        const element = this.children[index];
-        if (element.tagName.toLowerCase() == name.toLowerCase()) {
-            return element;
-        }
-
-        const downTry = element.downChild(name);
-        if (downTry)
-            return downTry;
-    }
-    return null;
-}

package/Pages/DemoHomeV1/asset/global-grid.css

@@ -1,19 +0,0 @@
-.grid_Line {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 20px;
-    align-items: center;
-}
-
-.grid_Line > * {
-    overflow-wrap: anywhere;
-    padding: 3px;
-}
-
-.grid_Line .f1 {
-    width: 100%;
-}
-
-.grid_Line .f2 {
-    width: 50%;
-}

package/Pages/DemoHomeV1/asset/global-nav.css

@@ -1,63 +0,0 @@
-.dk-usernameNav {
-    top: 0;
-    position: sticky;
-    border-bottom: 1px solid;
-    display: flow-root;
-    background-color: #ffffff2e;
-    backdrop-filter: blur(5px);
-    min-height: 25px;
-    padding: 5px 0 0 0;
-}
-
-.dk-usernameNav .uleft {
-    display: flex;
-    float: left;
-}
-.dk-usernameNav .uleft a{
-    margin-right: 10px;
-}
-.dk-usernameNav .uright {
-    float: right;
-    display: flex;
-    flex-direction: row-reverse;
-}
-.dk-usernameNav .uright a{
-    margin-left: 10px;
-}
-.dk-usernameNav a:hover {
-    cursor: pointer;
-}
-.dk-usernameNav .menu > menu{
-    position: absolute;
-    display: block;
-    height: 0;
-    opacity: 0;
-    max-width: 300px;
-    background-color: black;
-    transition: all ease-out 0.2s;
-    overflow: hidden;
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    border: 1px solid #97e68e;
-    padding: 3px 10px;
-    margin: 0;
-}
-.dk-usernameNav .menu:hover {
-    menu{
-        height: auto;
-        opacity: 1;
-    }
-}
-ul {
-    margin:  0;
-}
-/*MOBILE*/
-
-@media only screen and (max-width: 767px) {
-
-}
-
-/*DESKTOP*/
-@media only screen and (min-width: 768px) {
-
-}

package/Pages/DemoHomeV1/asset/global.css

@@ -1,25 +0,0 @@
-@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
-@import "global-nav.css";
-@import "global-grid.css";
-
-.bodyBox {
-    border: 0px solid;
-    border-radius: 10px;
-    margin: 30px;
-    padding: 0 10px;
-    background-color: rgba(0, 0, 0, 0.9);
-    min-height: 500px;
-    color: white;
-    font-size: 18px;
-}
-
-.boxBorder {
-    border: 1px solid white;
-    border-radius: 8px;
-    padding: 5px;
-    margin: 5px;
-}
-
-h1, h2, h3, h4, h5 {
-    margin: 0;
-}

package/Pages/DemoHomeV1/home/index.html

@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>DashBoard SoThuChi</title>
-    <link rel="stylesheet" href="../asset/global.css">
-    <script type="text/javascript">
-        const _userInfo = {displayName: 'Duy Khanh '};
-    </script>
-</head>
-<body>
-<div class="bodyBox">
-    <div class="dk-usernameNav">
-        <div class="uleft">
-            <a>Hi Khanhnbd</a>
-            <a class="menu">Menu
-                <menu >
-                    <li>Xin Chào 1
-                        <ul>
-                            <li>Submenu 2-2-1</li>
-                            <li>Submenu 2-2-2</li>
-                        </ul>
-                    </li>
-                </menu>
-            </a>
-        </div>
-        <div class="uright">
-            <a>Logout</a>
-        </div>
-
-    </div>
-
-    <div>
-        <div class="boxBorder" style="display: flex; flex-wrap: wrap;">
-            <div class="boxBorder" style="width: 200px; height: 100px;"></div>
-            <div class="boxBorder" style="width: 200px; height: 100px;"></div>
-            <div class="boxBorder" style="width: 200px; height: 100px;"></div>
-            <div class="boxBorder" style="width: 200px; height: 100px;"></div>
-            <div class="boxBorder" style="width: 200px; height: 100px;"></div>
-            <div class="boxBorder" style="width: 200px; height: 100px;"></div>
-        </div>
-        <div class="boxBorder">
-            <h4>Chi tiet giao dich</h4>
-            <div class="">
-                <div class="boxBorder">
-                    <div class="grid_Line">
-                        <span>Ngay 01.02.2023</span>
-                        <span>800.000</span>
-                    </div>
-                    <div class="grid_Line" style="margin-left: 30px;">
-                        <span class="f2">Logo</span>
-                        <span class="f2">ADF</span>
-                        <span class="f1">abcsdgasdtre</span>
-                        <span class="f2">999,999</span>
-                    </div>
-                    <div class="grid_Line" style="margin-left: 30px;">
-                        <span class="f2">Logo</span>
-                        <span class="f2">ADF</span>
-                        <span class="f1">abcsdgasdtreabcsdgasdtreabcsdgasdtreabcsdgasdtreabcsdgasdtreabcsdgasdtreabcsdgasdtre</span>
-                        <span class="f2">999,999</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
-</html>

package/dk_modules/autohtml.js

@@ -1,99 +0,0 @@
-import pkg from 'handlebars';
-const { compile } = pkg;
-import { generateRandomToken } from './dkvar.js';
-const configDefault = { postTo: '', allowCommit: true, allowEdit: true, primaryKey: '', column: [{ fieldName: '', title: '', dataType: '' }] };
-configDefault.column.pop();
-export function buildGridEdit(data, config = configDefault) {
-    let fields = getFieldTypes(data, config?.column);
-    const dataEncode = JSON.stringify(data);
-    let th_html = '';
-    let td_html = '';
-    if (fields.length == 0) {
-        fields.push({ dataType: 'string', fieldName: config.primaryKey });
-        config.column.map(p => { fields.push({ dataType: 'string', fieldName: p.fieldName }); });
-        fields = fields.filter(f => f.fieldName);
-    }
-    if (fields.length == 0) {
-        return "<h1> DATA AND CONFIGS IS EMPTY</h1>";
-    }
-    const tableFieldTypes = JSON.stringify(fields);
-    if (!config.column || config.column.length == 0) {
-        config.column = fields.map(f => { return { fieldName: f.fieldName, title: f.fieldName }; });
-    }
-    if (!config.primaryKey) {
-        config.primaryKey = fields[0].fieldName;
-    }
-    th_html = config.column.map(f => {
-        const minW = f.dataType == "string" ? 300 : 150;
-        return `<th style='min-width: ${minW}px;'>${f.title}</th>`;
-    }).join("");
-    td_html = config.column.map(f => {
-        const fieldType = fields.find(p => p.fieldName == f.fieldName)?.dataType.toLowerCase();
-        switch (fieldType) {
-            case "string": return `<td>{{${f.fieldName}}}</td>`;
-            case "boolean":
-                return `<td>{{#if this.${f.fieldName}}}
-                                <input type="checkbox" checked onclick='DKTable.inputCheckboxReadOnly(event)'>
-                            {{else}}
-                                <input type="checkbox" onclick='DKTable.inputCheckboxReadOnly(event)'>
-                            {{/if}}</td>`;
-        }
-        return `<td>{{${f.fieldName}}}</td>`;
-    }).join("");
-    const newTableId = generateRandomToken(20);
-    const tableTemplate = `
-      <table id='${newTableId}' class='dk-table-x1' 
-        data-store='${dataEncode}' data-field-type='${tableFieldTypes}' 
-        data-post-to='${config.postTo}'
-        data-primary-key='${config.primaryKey}'>
-        <thead>
-          <tr>${th_html}</tr>
-        </thead>
-        <tbody>
-          {{#each rows}}
-            <tr ${(config.allowEdit ? "onClick='DKTable.rowClick(event)'" : "")} data-primary-value='{{${config.primaryKey}}}'>${td_html}</tr>
-          {{/each}}
-        </tbody>
-      </table>
-      <div class='dk-actionsBar'>
-            ${(config.allowCommit ? `<button class="btn-success" onClick="DKTable.CommitDataTable(document.getElementById('${newTableId}'))">Save</button>` : "")}
-            ${(config.allowCommit ? `<button class="btn-outline-danger" onClick="DKTable.DeleteRowCurrent(document.getElementById('${newTableId}'))">Remove</button>` : "")}
-            ${(config.allowCommit ? `<button class="btn-primary" onClick="DKTable.AddNewRow(document.getElementById('${newTableId}'))">Add</button>` : "")}
-      </div>
-      <script>
-      function onInit${newTableId}(){
-        document.getElementById('${newTableId}').addEventListener('keydown', function(event) {
-            const keyCode = event.keyCode || event.which;
-            DKTable.keyDownOnTable(keyCode,this);
-          });
-      }
-      onInit${newTableId}();
-      </script>
-    `;
-
-    // Biên dịch và in HTML
-    const template = compile(tableTemplate);
-    const html = template({ rows: data });
-    return html;
-}
-function getFieldTypes(array, columns = []) {
-    if (columns?.length > 0) {
-        return columns;
-    }
-
-    if (!Array.isArray(array)) {
-        console.error('Đối số phải là một mảng.');
-        return [];
-    }
-    const fields = Object.keys(array[0]);
-    const fieldTypes = {};
-    array.forEach(item => {
-        fields.forEach(field => {
-            if (!fieldTypes[field]) {
-                fieldTypes[field] = typeof item[field];
-            }
-        });
-    });
-
-    return fields.map(p => { return { fieldName: p, dataType: fieldTypes[p] } });
-}