mdkcontroller 1.2.1 → 1.2.3

package/Cores/file/DKGrid.css

@@ -1,3 +1,14 @@
+.dk-table textarea {
+  resize: none;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.dk-table textarea::-webkit-scrollbar {
+  display: none;
+  /* Chrome & Safari */
+}
+
 .dk-table {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
@@ -7,6 +18,7 @@
 
 .dk-table td {
   border: 1px solid #ddd;
+  overflow: hidden;
 }
 
 .dk-table th {
@@ -55,7 +67,7 @@
 .dk-table .RowNavigator td {
   background: white;
   border-bottom: 1px solid #ff2828d6;
-  border-radius: 7px;
+  /* border-radius: 7px; */
 }
 
 .dk-table .edit {
@@ -67,6 +79,7 @@
 }
 
 .dk-table .RowNavigator td>input,
+.dk-table .RowNavigator td>textarea,
 .dk-table .RowNavigator td>select {
   height: 23px;
   font-size: 18px;
@@ -80,51 +93,28 @@
   background-color: #f1f1f1;
 }
 
-.dk-table .edit input[type="checkbox"] {
+/* .dk-table .edit input[type="checkbox"] {
   min-height: 22px;
   width: 30px;
   margin: auto;
   display: block;
-}
+} */
 
-.dk-table .edit input[type="checkbox"]:disabled {
+/* .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 {
+.dk-table .edit td * {
   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;
+  border: 0px;
   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;
+  font-family: sans-serif;
 }
 
 .active {

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 || '';
         }
@@ -66,25 +65,26 @@ class DKGrid {
         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);
+            f.width = width;
             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 "string": return `<td><textarea name='${f.fieldName}'></textarea></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 +96,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 +113,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 +130,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>
@@ -147,8 +143,9 @@ class DKGrid {
         const dkgrid = this;
         this.tableEditor.addEventListener('keydown', function (event) {
             const keyCode = event.keyCode || event.which;
-
-            dkgrid.#keyDownOnTable(keyCode);
+            if (!event.shiftKey) {
+                dkgrid.#keyDownOnTable(keyCode);
+            }
         });
 
         this.tableRaw.addEventListener('click', function (event) {
@@ -178,7 +175,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 +185,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 +193,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 +209,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 +237,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);
@@ -252,12 +247,24 @@ class DKGrid {
         tbEditor.querySelector('tbody').querySelectorAll('td').forEachExt(
             child => {
                 const input = child.firstChild;
+                input.style.height = (trTag.clientHeight) + 'px';
                 try {
-                    if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                    if (input.tagName == "INPUT" || input.tagName == "SELECT" || input.tagName == "TEXTAREA") {
+                        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,22 +276,23 @@ 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(
                 child => {
                     const input = child.firstChild;
-                    if (input.tagName == "INPUT" || input.tagName == "SELECT") {
+                    if (input.tagName == "INPUT" || input.tagName == "SELECT" || input.tagName == "TEXTAREA") {
                         objectEditing[input.name] = input.value;
                         if (input.type == 'checkbox') {
                             objectEditing[input.name] = input.checked;
@@ -333,7 +341,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 +363,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 +377,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 +413,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 +429,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 +454,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,23 +476,23 @@ 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);
+            newOb[primaryKey] = Date.now() + '_' + DKGrid.generateRandomString(12);
         }
         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 +513,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

@@ -5,11 +5,12 @@
     "express": "^4.18.2",
     "fluent-ffmpeg": "^2.1.2",
     "handlebars": "^4.7.8",
+    "js-yaml": "^4.1.0",
     "lowdb": "^7.0.1",
     "socket.io": "^4.7.2"
   },
   "name": "mdkcontroller",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "keywords": [],
   "author": "KHANHNBD <khanh272421@gmail.com>",
   "license": "ISC",
@@ -27,4 +28,4 @@
     "Cores/",
     "dk_modules/"
   ]
-}
+}

package/readme.md

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