mdkcontroller 1.2.0 → 1.2.2

package/Cores/file/DKGrid.css

@@ -2,7 +2,7 @@
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
   width: 100%;
-  min-width: 800px;
+  table-layout: fixed;
 }
 
 .dk-table td {
@@ -32,6 +32,7 @@
   margin-right: 3px;
   border-radius: 6px;
   cursor: pointer;
+  place-self: center;
 }
 
 .dk-table .gridToolCell ul li:hover {
@@ -44,6 +45,11 @@
   padding: 5px;
   font-size: 19px;
   font-weight: bold;
+  height: 38px;
+}
+
+.dk-table .gridBodyCell {
+  vertical-align: text-top;
 }
 
 .dk-table .RowNavigator td {
@@ -119,4 +125,8 @@
 .dk-actionsBar button:active,
 .dk-actionsBar button:hover {
   border-color: #0fbd7db6;
+}
+
+.active {
+  background: #0075ffc4;
 }

package/Cores/file/DKGrid.js

@@ -7,9 +7,10 @@ class DKGrid {
         this.idRaw = boxId + "_autogrid_dataraw";
         this.idEditor = boxId + "_autogrid_editor";
         this.config = { ...DKGrid.defaultConfig, ...config };
-        this.#cache = { updated: [], deleted: [], origin: [] };
+        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;
@@ -21,7 +22,7 @@ class DKGrid {
     addEventListener(eventName, callback) {
         this.#event[eventName] = this.#event[eventName] || [];
         this.#event[eventName].push(callback);
-        //rowClick, openEditor, commitData, onCreateNewKey
+        //rowClick, openEditor, commitData, onAddNewRow, onOpenEditor, onSelectorSelecting
     }
     fireEvent(eventName, callback, ...args) {
         const callbacks = this.#event[eventName] || [];
@@ -47,7 +48,6 @@ class DKGrid {
             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 || '';
         }
@@ -56,34 +56,38 @@ class DKGrid {
         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 => {
+        this.editorDefault = '<tr>' + 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>`;
-                    }
+                    let itemSelector = f.items;
+                    this.fireEvent('onSelectorSelecting', (rs) => {
+                        itemSelector = rs || itemSelector;
+                    }, f.fieldName, null);
+                    let items = itemSelector.map(i => `<option value="${i.value}">${i.text}</option>`).join("");
                     return `<td><select name='${f.fieldName}'>${items}</select></td>`;
                 default: return `<td><input type='text' name='${f.fieldName}'/></td>`;
             }
-        }).join("\r\n");
+        }).join("\r\n") + '</tr>';
         return `
-        <table id='${this.id}' class='dk-table'>
-        <tr>
+        <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;'>
@@ -91,36 +95,47 @@ class DKGrid {
                             <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:250px;'></li>
                         </ul>
                     </div>
             </td>
         </tr>
-        <tr>
+        <tr style='height: 1px;'>
             <td class='gridHeaderCell'>
-                <table data-primary-key='${this.config.primaryKey}' cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed; height: 100%; width: 0px; position: relative; left: 0px;">
-                    <colgroup>${colWidths}</colgroup>
-                    <thead><tr>${th_html}</tr></thead>
-                </table> 
+                <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 style='position: relative;overflow: auto hidden;vertical-align: top;'>
-                    <table id='${this.idRaw}' class='edit' cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
+                <div id='${this.id}_bodyContent' style='min-height: 100px; 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: 0px;position: absolute;left: 0px;top: 40px; display: none;">
+                    <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>
+                        <tbody>${this.editorDefault}</tbody>
                     </table> 
                 </div>
             </td>
         </tr>
-        <tr>
-            <td class='gridStatusCell'></td>
+        <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>
+                    </ul>
+                    <span id='${this.id}_status' style='font-size:18px;'>0/10</span>
+                </div>
+            </td>
         </tr>
-        </table>`;
+        </table>
+        </div>`;
     }
 
     #attachEvents() {
@@ -149,20 +164,40 @@ class DKGrid {
                 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.buildNav_List();
+            }
+        });
+        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.buildNav_List();
+            }
+        });
     }
     #keyDownOnTable(keyCode) {
         // ESC
         if (keyCode == 27) {
             if (this.rowOnFocus) {
-                const lastRow = this.rowOnFocus;
-                this.#closeEditor(lastRow, true);
+                this.#closeEditor(true);
             }
         }
         // ENTER
         if (keyCode == 13) {
             if (this.rowOnFocus) {
-                const lastRow = this.rowOnFocus;
-                this.#closeEditor(lastRow, false);
+                this.#closeEditor(false);
             }
         }
     }
@@ -172,7 +207,7 @@ class DKGrid {
         if (this.rowOnFocus) {
             const lastRow = this.rowOnFocus;
             if (lastRow.dataset.editting == "1") {
-                this.#closeEditor(lastRow, false);
+                this.#closeEditor(false);
             }
         }
         this.rowOnFocus = trTag;
@@ -197,10 +232,10 @@ class DKGrid {
 
         const cache = this.#cache;
 
-        let objectCurrent = cache.updated.find(f => f[primaryKey]?.toString() == currentKeyValue) || cache.origin.find(f => f[primaryKey]?.toString() == currentKeyValue);
+        let objectCurrent = cache.updated[currentKeyValue] || cache.origin[currentKeyValue];
         {
             let throwX = false;
-            this.fireEvent('openEditor', (rs) => {
+            this.fireEvent('onOpenEditor', (rs) => {
                 throwX = rs === false;
                 return !throwX;
             }, objectCurrent, this);
@@ -212,10 +247,21 @@ class DKGrid {
                 const input = child.firstChild;
                 try {
                     if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                        if (input.tagName == "SELECT") {
+                            let itemSelector = tableConfig.column.find(f => f.fieldName == input.name).items;
+                            this.fireEvent('onSelectorSelecting', (rs) => {
+                                itemSelector = rs || itemSelector;
+                            }, input.name, objectCurrent);
+                            let items = itemSelector.map(i => `<option value="${i.value}">${i.text}</option>`).join("");
+                            input.innerHTML = items;
+                        }
+
                         input.value = objectCurrent[input.name] || "";
                         if (input.type == 'checkbox') {
                             input.checked = objectCurrent[input.name] || false;
                         }
+
+                        this.fireEvent('onSetInput', null, input, objectCurrent);
                     }
                 } catch (exx) {
                     console.log("Error in openEditor: ", exx);
@@ -227,16 +273,17 @@ class DKGrid {
         trTag.dataset.editting = '1';
         return true;
     }
-    #closeEditor(trTag = new HTMLElement(), isClear = false, isdelete = false) {
-        const table = trTag.closest('table');
+    #closeEditor(isClear = false, isdelete = false) {
+        const trTag = this.rowOnFocus;
+        if (trTag == null) {
+            return;
+        }
         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.find(f => f[primaryKey]?.toString() == currentKeyValue) || cache.origin.find(f => f[primaryKey]?.toString() == currentKeyValue);
+            let objectCurrent = cache.updated[currentKeyValue] || { ...cache.origin[currentKeyValue] };
             let objectEditing = {};
             let hasChange = false;
             tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
@@ -267,11 +314,8 @@ class DKGrid {
                     Object.keys(objectEditing).forEach(key => {
                         objectCurrent[key] = objectEditing[key];
                     });
-                    cache.updated = cache.updated.filter(obj => obj[primaryKey] !== objectCurrent[primaryKey]);
-                    cache.updated.push(objectCurrent);
-                    {
-                        this.#createRow(trTag, objectCurrent);
-                    }
+                    cache.updated[currentKeyValue] = objectCurrent;
+                    this.#createRow(trTag, objectCurrent);
                 }
             }
         }
@@ -294,46 +338,106 @@ class DKGrid {
                 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;
+                    let itemSelector = f.items;
+                    this.fireEvent('onSelectorSelecting', (rs) => {
+                        itemSelector = rs || itemSelector;
+                    }, f.fieldName, null);
+                    td.textContent = itemSelector.find(i => i.value == item[f.fieldName])?.text;
                     break;
                 default: td.textContent = item[f.fieldName]; break;
             }
             trTag.appendChild(td);
         });
     }
-    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;
-        cache.updated = [];
-        cache.deleted = [];
-        this.loadData();
-    }
-    loadData(data = undefined) {
-        let table = this.tableRaw;
-        const tableConfig = this.config;
+    loadData(data) {
         const cache = this.#cache;
         if (data) {
-            cache.origin = data;
-            cache.updated = [];
-            cache.deleted = [];
+            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);
         }
-        const dataPrint = {};
-        cache.origin.forEach(item => {
-            dataPrint[item[tableConfig.primaryKey]] = item;
+        this.buildNav_List();
+    }
+    buildNav_List(holdPage = false) {
+        const cache = this.#cache;
+
+        const dataCollection = {};
+        Object.keys(cache.origin).forEach(key => {
+            dataCollection[key] = cache.origin[key];
         });
-        cache.updated.forEach(item => {
-            dataPrint[item[tableConfig.primaryKey]] = item;
+        Object.keys(cache.updated).forEach(key => {
+            dataCollection[key] = cache.updated[key];
         });
-        cache.deleted.forEach(item => {
-            delete dataPrint[item[tableConfig.primaryKey]];
+        Object.keys(cache.deleted).forEach(key => {
+            delete dataCollection[key];
         });
+        this.#closeEditor(false, false);
+        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));
+            }
+            if (page.total > 1) {
+                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}`;
+        if (holdPage) {
+            return;
+        }
+        this.printPage(dataPrint);
+    }
+    printPage(dataPrint = []) {
+        const table = this.tableRaw;
+        const tableConfig = this.config;
         const tbody = table.querySelector('tbody');
         tbody.innerHTML = '';
-        Object.keys(dataPrint).forEach(
-            key => {
-                const item = dataPrint[key];
+        dataPrint.forEach(
+            item => {
                 const tr = document.createElement('tr');
                 tr.dataset.primaryValue = item[tableConfig.primaryKey];
                 tr.dataset.editting = '0';
@@ -347,7 +451,11 @@ class DKGrid {
                         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;
+                            let itemSelector = f.items;
+                            this.fireEvent('onSelectorSelecting', (rs) => {
+                                itemSelector = rs || itemSelector;
+                            }, f.fieldName, null);
+                            td.textContent = itemSelector.find(i => i.value == item[f.fieldName])?.text || '';
                             break;
                         default: td.textContent = item[f.fieldName]; break;
                     }
@@ -365,36 +473,36 @@ class DKGrid {
         const primaryKey = tableConfig.primaryKey;
         let newOb = {};
         {
-            this.fireEvent('onCreateNewKey', (rs) => {
-                newOb[primaryKey] = rs;
-            });
+            this.fireEvent('onAddNewRow', null, newOb);
         }
         if (!newOb[primaryKey]) {
             newOb[primaryKey] = DKGrid.generateRandomString(32);
         }
         newTR.dataset.primaryValue = newOb[primaryKey];
         const cache = this.#cache;
-        cache.updated.push(newOb);
+        cache.updated[newOb[primaryKey]] = (newOb);
+        this.buildNav_List(true);
         this.#createRow(newTR, newOb);
+        newTR.querySelector('td').click();
     }
 
     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);
+            this.#closeEditor(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.find(f => f[primaryKey] == currentKeyValue);
+            const objectOriginal = cache.origin[currentKeyValue];
             if (objectOriginal) {
-                cache.deleted.push(objectOriginal);
+                cache.deleted[currentKeyValue] = (objectOriginal);
             }
 
-            let objectCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
+            let objectCache = cache.updated[currentKeyValue];
             if (objectCache) {
-                cache.updated = cache.updated.filter(obj => obj[primaryKey] !== objectCache[primaryKey]);
+                delete cache.updated[currentKeyValue];
             }
 
             table.dataset.cache = JSON.stringify(cache);
@@ -402,9 +510,36 @@ class DKGrid {
             delete this.rowOnFocus;
         }
     }
+    getData() {
+        const datas = [];
+        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 = [];
+        Object.values(dataCollection).forEach(item => {
+            dataCollection_array.push(item);
+        });
+        return dataCollection_array;
+    }
     commitData() {
-        this.fireEvent('commitData', null, ({ updated: this.#cache.updated, deleted: this.#cache.deleted }));
+        const cache = this.#cache;
+        const data = { updated: [], deleted: [] };
+        Object.keys(cache.updated).forEach(key => {
+            data.updated.push(cache.updated[key]);
+        });
+        Object.keys(cache.deleted).forEach(key => {
+            data.deleted.push(cache.deleted[key]);
+        });
+        this.fireEvent('commitData', null, data);
     }
 
     cancelChanges() {
@@ -412,9 +547,11 @@ class DKGrid {
             return;
         }
         const cache = this.#cache;
-        cache.updated = [];
-        cache.deleted = [];
-        this.loadData();
+        const dataOrigin = [];
+        Object.keys(cache.origin).forEach(key => {
+            dataOrigin.push(cache.origin[key]);
+        });
+        this.loadData(dataOrigin);
     }
     static inputCheckboxReadOnly(event) {
         event.preventDefault();

package/Cores/file/dk.js

@@ -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;

package/package.json

@@ -9,7 +9,7 @@
     "socket.io": "^4.7.2"
   },
   "name": "mdkcontroller",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "keywords": [],
   "author": "KHANHNBD <khanh272421@gmail.com>",
   "license": "ISC",

package/readme.md

@@ -1 +1 @@
-#some thing
+# Project Summary