mdkcontroller 1.2.1 → 1.2.2

package/Cores/file/DKGrid.js

@@ -22,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] || [];
@@ -48,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 || '';
         }
@@ -69,22 +68,22 @@ class DKGrid {
             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 `
         <div style='height: 100%;width: 100%; overflow: hidden;'>
         <table id='${this.id}' class='dk-table' style='height: 100%;'>
@@ -96,7 +95,7 @@ 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>
+                            <li data-cmd='refresh'><input id='${this.id}_inputSearch' type='search' style='width:250px;'></li>
                         </ul>
                     </div>
             </td>
@@ -113,14 +112,14 @@ class DKGrid {
         </tr>
         <tr>
             <td class='gridBodyCell'>
-                <div id='${this.id}_bodyContent' style='position: relative; height: 100%; overflow: scroll;'>
+                <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: ${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>
@@ -130,12 +129,8 @@ class DKGrid {
                 <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>
+                    <span id='${this.id}_status' style='font-size:18px;'>0/10</span>
                 </div>
             </td>
         </tr>
@@ -178,7 +173,7 @@ class DKGrid {
             const page = parseInt(cmd);
             if (page) {
                 this.page.current = Math.min(page, this.page.total);
-                this.loadDataByPage();
+                this.buildNav_List();
             }
         });
         document.getElementById(dkgrid.id + "_bodyContent").addEventListener("scroll", function () {
@@ -188,7 +183,7 @@ class DKGrid {
         document.getElementById(dkgrid.id + "_inputSearch").addEventListener("keydown", function (event) {
             if (event.key === "Enter") {
                 event.preventDefault();
-                dkgrid.loadDataByPage();
+                dkgrid.buildNav_List();
             }
         });
     }
@@ -196,15 +191,13 @@ class DKGrid {
         // 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);
             }
         }
     }
@@ -214,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;
@@ -242,7 +235,7 @@ class DKGrid {
         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);
@@ -254,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);
@@ -269,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[currentKeyValue] || {...cache.origin[currentKeyValue]};
+            let objectCurrent = cache.updated[currentKeyValue] || { ...cache.origin[currentKeyValue] };
             let objectEditing = {};
             let hasChange = false;
             tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
@@ -333,7 +338,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;
             }
@@ -351,9 +360,9 @@ class DKGrid {
             cache.deleted = {};
             this.page.total = Math.ceil(data.length / this.page.size);
         }
-        this.loadDataByPage();
+        this.buildNav_List();
     }
-    loadDataByPage() {
+    buildNav_List(holdPage = false) {
         const cache = this.#cache;
 
         const dataCollection = {};
@@ -365,8 +374,8 @@ class DKGrid {
         });
         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 => {
@@ -401,7 +410,9 @@ class DKGrid {
             for (let index = min; index <= max; index++) {
                 this.pagingCell.appendChild(hideCreatePageLi(index));
             }
-            this.pagingCell.appendChild(hideCreatePageLi(page.total, "font-weight: bold; margin-left: 15px;"));
+            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;
@@ -415,6 +426,9 @@ class DKGrid {
         }
         const dataPrint = dataCollection_array.slice(start, end);
         this.statusBox.textContent = `${dataPrint.length}/${dataCollection_array.length}`;
+        if (holdPage) {
+            return;
+        }
         this.printPage(dataPrint);
     }
     printPage(dataPrint = []) {
@@ -437,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;
                     }
@@ -455,9 +473,7 @@ 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);
@@ -465,13 +481,15 @@ class DKGrid {
         newTR.dataset.primaryValue = newOb[primaryKey];
         const cache = this.#cache;
         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;
@@ -492,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() {

package/package.json

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

package/readme.md

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