mdkcontroller 1.2.0 → 1.2.1

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;
@@ -56,13 +57,16 @@ 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 => {
@@ -82,8 +86,9 @@ class DKGrid {
             }
         }).join("\r\n");
         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 +96,51 @@ 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:150px;'></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='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>
                     </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>
+                        <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>`;
+        </table>
+        </div>`;
     }
 
     #attachEvents() {
@@ -149,6 +169,28 @@ 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.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
@@ -197,7 +239,7 @@ 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) => {
@@ -236,7 +278,7 @@ class DKGrid {
             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 +309,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);
                 }
             }
         }
@@ -301,39 +340,90 @@ class DKGrid {
             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.loadDataByPage();
+    }
+    loadDataByPage() {
+        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];
+        }); 
+
+        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 = '';
-        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';
@@ -374,7 +464,7 @@ class DKGrid {
         }
         newTR.dataset.primaryValue = newOb[primaryKey];
         const cache = this.#cache;
-        cache.updated.push(newOb);
+        cache.updated[newOb[primaryKey]] = (newOb);
         this.#createRow(newTR, newOb);
     }
 
@@ -387,14 +477,14 @@ class DKGrid {
             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);
@@ -412,9 +502,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.1",
   "keywords": [],
   "author": "KHANHNBD <khanh272421@gmail.com>",
   "license": "ISC",