zet-lib 1.0.17 → 1.0.19

package/lib/Form.js

@@ -63,24 +63,24 @@ Form.field = (obj) => {
         }
     }
     let type = obj.type || "text",
-        id = Form.addProperty("id", [obj.id]),
-        name = obj.name ? ` name="${obj.name}" ` : "",
-        title = obj.title || "",
-        prepend = obj.prepend || "",
-        append = obj.append || "",
-        placeholder = Form.addProperty("placeholder", [obj.placeholder]),
-        tabindex = Form.addProperty("tabindex", [obj.tabindex]),
-        value = obj.value == undefined ? "" : obj.value,
-        classview = obj.class ? ` class="${obj.class}" ` : ` class=" " `,
-        disabled = obj.disabled ? ` disabled="disabled" ` : '',
-        data = obj.data,
-        required = obj.required == true ? ` required ` : '',
-        table = !obj.table ? "" : obj.table,
-        frameworkcss = !obj.frameworkcss ? "bootstrap5" : obj.frameworkcss,
-        form_css = !obj.form_css ? "bootstrap" : obj.form_css,
-        attributes = !obj.attributes ? {} : obj.attributes,
-        style = !obj.style ? "" : ` style=${obj.style} `,
-        information = !obj.information ? "" : `<div id="information-${obj.id}" class="form-text">${Util.replaceAll(obj.information.substring(1, (obj.information.length - 1)), "\r\n", "<br>")}</div>`
+      id = Form.addProperty("id", [obj.id]),
+      name = obj.name ? ` name="${obj.name}" ` : "",
+      title = obj.title || "",
+      prepend = obj.prepend || "",
+      append = obj.append || "",
+      placeholder = Form.addProperty("placeholder", [obj.placeholder]),
+      tabindex = Form.addProperty("tabindex", [obj.tabindex]),
+      value = obj.value == undefined ? "" : obj.value,
+      classview = obj.class ? ` class="${obj.class}" ` : ` class=" " `,
+      disabled = obj.disabled ? ` disabled="disabled" ` : '',
+      data = obj.data,
+      required = obj.required == true ? ` required ` : '',
+      table = !obj.table ? "" : obj.table,
+      frameworkcss = !obj.frameworkcss ? "bootstrap5" : obj.frameworkcss,
+      form_css = !obj.form_css ? "bootstrap" : obj.form_css,
+      attributes = !obj.attributes ? {} : obj.attributes,
+      style = !obj.style ? "" : ` style=${obj.style} `,
+      information = !obj.information ? "" : `<div id="information-${obj.id}" class="form-text">${Util.replaceAll(obj.information.substring(1, (obj.information.length - 1)), "\r\n", "<br>")}</div>`
     ;
     //replaceAll("\r\n","<br>")
     let attributeDate = "";
@@ -420,7 +420,7 @@ Form.field = (obj) => {
             displayForm = `${prepend}<input autocomplete="off" autofocus=""  ${tabindex}  ${style}  type="text" ${classview} readonly ${id}  ${placeholder}   ${required} value="${value}"  ${htmlOptions}>${information}${append}`;
             break;
 
-        //additionals for form view in view
+      //additionals for form view in view
         case "plaintext" :
             displayForm = `<span class="">${obj.value || ""}</span>`;
             break;
@@ -501,6 +501,70 @@ Form.breadcrumb = (type, arr) => {
     return html;
 };
 
+Form.breadcrumbs = (arr) => {
+    let html = `<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb"><ol class="breadcrumb float-end">`;
+    arr.map((item) => {
+        if (item.active == true) {
+            html += `<li class="breadcrumb-item active" aria-current="page">${item.text}</li>`;
+        } else {
+            html += `<li class="breadcrumb-item"><a href="${item.href}">${item.text}</a></li>`;
+        }
+    });
+    html += `</ol></nav>`;
+    return html;
+};
+
+Form.breadcrumbIndex = () => {
+    return Form.breadcrumbs([
+        {text: LANGUAGE['home'], href: "/dashboard"},
+        {text: LANGUAGE['grid_list'],active: true}]);
+}
+
+Form.breadcrumbCreate = (routeName) => {
+    return Form.breadcrumbs( [
+        {text: LANGUAGE['home'], href: "/dashboard"},
+        {text: LANGUAGE['grid_list'],href: "/" + routeName},
+        {text: LANGUAGE['create'], active: true}
+    ]);
+}
+
+Form.breadcrumbUpdate = (routeName,id) => {
+    return Form.breadcrumbs( [
+        {text: LANGUAGE['home'], href: "/dashboard"},
+        {text: LANGUAGE['grid_list'],href: "/" + routeName},
+        {text: LANGUAGE['create'], href: "/" + routeName + "/create"},
+        {text: LANGUAGE['view'],href: "/" + routeName + "/view/" + id},
+        {text: LANGUAGE['update'], active: true}
+    ]);
+}
+
+Form.breadcrumbView = (routeName) => {
+    return Form.breadcrumbs( [
+        {text: LANGUAGE['home'], href: "/dashboard"},
+        {text: LANGUAGE['grid_list'],href: "/" + routeName},
+        {text: LANGUAGE['view'], active: true}
+    ]);
+}
+
+Form.breadcrumbImport = (routeName) => {
+    return Form.breadcrumbs( [
+        {text: LANGUAGE['home'], href: "/dashboard"},
+        {text: LANGUAGE['grid_list'],href: "/" + routeName},
+        {text: LANGUAGE['create'], href: "/" + routeName + "/create"},
+        {text: LANGUAGE['form_import'], active: true}
+    ]);
+}
+
+Form.breadcrumbApproval = (routeName, id) => {
+    return Form.breadcrumbs( [
+            {text: LANGUAGE['home'], href: "/dashboard"},
+            {text: LANGUAGE['grid_list'],href: "/" + routeName},
+            {text: LANGUAGE['update'], href: '/' + routeName + '/update/' + id},
+            {text: LANGUAGE['create'],href: '/' + routeName + '/create'},
+            {text: "Approval", active: true}
+        ]);
+}
+
 Form.grid = (type, obj) => {
     return gridBootstrap5(obj);
 };
@@ -714,4 +778,96 @@ Form.build = (obj) => {
     return html;
 };
 
+Form.modal = (obj, LANGUAGE={}) => {
+    let attributeData = obj.attributeData, visibles = obj.visibles || [], invisibles = obj.invisibles || [], visiblesHtml = '', invisiblesHtml = '', labelsHtml = '';
+    visibles.map((item) => {
+        visiblesHtml += `<li data-name="${item}" draggable="true" class="image-li" role="option" aria-grabbed="false"><img src="/assets/icons/eye.svg" class="icons-bg-black">  ${attributeData.labels[item]}</li>`;
+    });
+    invisibles.map((item) => {
+        invisiblesHtml += `<li data-name="${item}" draggable="true" class="image-li" role="option" aria-grabbed="false"><img src="/assets/icons/eye-off.svg" class="icons-bg-black">  ${attributeData.labels[item]}</li>`;
+    });
+    let no = 1;
+    for(let key in attributeData.labels) {
+        labelsHtml += `<tr><td>${no}</td><td>${key}</td><td>${attributeData.labels[key]}</td><td><input maxlength="25" type="text" class="form-control" required name="${obj.routeName}[${key}]" value="${attributeData.labels[key]}"></td></tr>`;
+        no++;
+    }
+    const modalFields = Form.modalBuild({
+        id: "grid-modal",
+        size : "modal-xl",
+        header: `<h5 id="dynagrid-1-grid-modal-label" class="modal-title">
+                    <i class="fa fa-cog"></i> ${LANGUAGE.grid_settings || "Settings Grid"}
+                </h5>`,
+        body : `<div class="container">
+                    <form id="form-grid" class="form-vertical kv-form-bs4" action="/${obj.routeName}/grid" method="post">
+                        <input type="hidden" name="_csrf" value="">
+                        <div class="dynagrid-column-label">
+                            ${LANGUAGE.grid_configure  || "Configure Order and Display of Grid Columns"}
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-5">
+                                <ul id="gridleft" class="sortable-visible sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
+                                    <li data-name="" class="alert alert-info dynagrid-sortable-header disabled">
+                                        ${LANGUAGE.grid_visible  || "Visible Columns"}
+                                    </li>
+                                    ${visiblesHtml}
+                                </ul>
+                            </div>
+                            <div class="col-sm-2 text-center">
+                                <div class="dynagrid-sortable-separator"><i class="fas fa-arrows-alt-h"></i></div>
+                            </div>
+                            <div class="col-sm-5">
+                                <ul id="gridright"
+                                    class="sortable-hidden sortable list kv-connected cursor-move gridsortable" aria-dropeffect="move">
+                                    <li data-name="" class="alert alert-info dynagrid-sortable-header disabled">${LANGUAGE.grid_invisible  || "Hidden / Fixed Columns"}
+                                    </li>
+                                   ${invisiblesHtml}
+                                </ul>
+                            </div>
+                        </div>
+                        <input type="hidden" id="serialize_left" name="serialize_left" value=''/>
+                        <input type="hidden" id="serialize_right" name="serialize_right" value=''/>
+                    </form>
+                </div> <!-- .dynagrid-config-form -->`,
+        footer : `<button type="reset" class="btn btn-default refresh gridreload image-button" title="Abort any changes and reset settings">
+                    <img src="/assets/icons/refresh.svg" class="icons-bg-black"> ${LANGUAGE.reset  || "Reset"}
+                </button>
+                <button type="button" class="btn btn-primary grid-submit boxy image-button" title="Save grid settings">
+                    <img src="/assets/icons/send.svg" class="icons-bg-white"> ${LANGUAGE.apply  || "Apply"}
+                </button>`
+    });
+    try {
+        return modalFields;
+    } catch (err) {
+        console.log(err);
+    }
+};
+
+
+Form.modalBuild = (obj) => {
+    let html = '<!-- Modal -->';
+    try {
+        const size = obj.size ? `${obj.size}` : "";
+        const id = obj.id ?  `id="${obj.id}"` : "";
+        const headerOptions =  Util.attributeOptions(obj.headerOptions || {},{class:"modal-header"});
+        const header = obj.header ? `<div  ${headerOptions} >${obj.header}<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>`:"";
+        const body = obj.body ? obj.body : "";
+        const bodyOptions =  Util.attributeOptions(obj.bodyOptions || {},{class:"modal-body"});
+        const footerOptions =  Util.attributeOptions(obj.footerOptions || {},{class:"modal-footer"});
+        const footer = obj.footer ? `<div ${footerOptions} >${obj.footer}</div>` : "";
+        html += `${Util.newLine}<div class="modal fade " ${id}  role="dialog" tabindex="-1">
+              <div class="modal-dialog ${size}">
+                <div class="modal-content">
+                  ${header}
+                  <div ${bodyOptions}>${body}</div>
+                  ${footer}
+                </div>
+              </div>
+            </div>`;
+
+    } catch (error) {
+        console.log(error)
+    }
+    return html;
+};
+
 module.exports = Form;

package/lib/UI.js

@@ -1,14 +1,6 @@
-/**
- * Created by sintret dev on 8/27/2021.
- * Helper function in the frontend
- */
-//var MenuCollections = require("./MenuCollections");
-
 function UI(req, res) {
     this.Form = require("./Form");
     this.Modal = require("./Modal");
-    //this.Util = require("./Util");
-    //this.Menu = MenuCollections(req, res);
 }
 
 module.exports = UI;

package/lib/index.js

@@ -6,11 +6,11 @@ module.exports = {
     myCache: require('./cache'),
     connection: require('./connection'),
     zdataTable: require('./zdataTable'),
-    debug: require('./debug'),
-    Form: require('./Form'),
+    zDebug: require('./debug'),
+    zForm: require('./Form'),
     io: require('./io'),
-    Mail: require('./Mail'),
-    Modal: require('./Modal'),
+    zMail: require('./Mail'),
+    zModal: require('./Modal'),
     moduleLib: require('./moduleLib'),
     tableForm: require('./tableForm'),
     zapp: require('./zapp'),
@@ -27,4 +27,3 @@ module.exports = {
     zCache : require('./zCache'),
     UI : require('./UI')
 };
-

package/lib/zdataTable.js

@@ -33,11 +33,20 @@ class dataTable {
             return this.setColumns;
         let html = '';
         for (var key in this.visibles) {
-            html += `<th id="data_${key}">${this.visibles[key]}</th>`;
+            html += `<th id="data_${key}_label">${this.visibles[key]}</th>`;
         }
         return html;
     }
 
+    get columnsFilter() {
+        let html = '<tr class="filters">';
+        for (var key in this.visibles) {
+            html += `<th id="data_${key}">${this.searchColumns[key]}</th>`;
+        }
+        html += '</tr>';
+        return html;
+    }
+
     /*
      Create table html header
      */
@@ -45,7 +54,7 @@ class dataTable {
         if (this.setTable)
             return this.setTable;
         return `<table id="dataTable" class="display table table-hover table-responsive" style="width:100%">
-            <thead>${this.columns}</thead>
+            <thead>${this.columns} ${this.columnsFilter}</thead>
         </table>`;
     }
 
@@ -113,13 +122,11 @@ class dataTable {
     get scripts() {
         let script = '<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.3/date-1.1.1/fc-4.0.1/fh-3.2.1/r-2.2.9/rg-1.1.4/sc-2.0.5/sl-1.3.4/datatables.min.js"></script>';
         script += `<script>${Util.newLine}`;
-        script += `var dataTableFilters = ${JSON.stringify(this.searchColumns)};${Util.newLine}`;
         script += `var dataTableFields = ${JSON.stringify(Object.keys(this.visibles,null,2))};${Util.newLine}`;
         script += `var dataTableTypes = ${JSON.stringify(this.types,null,2)};${Util.newLine}`;
         script += `var dataTableRoute = "${this.routeName}";${Util.newLine}`;
         script += `</script>${Util.newLine}`;
-        script += `<script type="text/javascript" src="/js/datatableaddon.min.js"></script>${Util.newLine}`;
-
+        script += `<script type="text/javascript" src="/js/datatable.js"></script>${Util.newLine}`;
         if (this.searchColumns.FILTERKEY) {
             script += `<script>$(function () {  setTimeout(function () {  ${this.searchColumns.FILTERKEY} },500) });</script>${Util.newLine}`;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zet-lib",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "zet is a library that part of zet generator.",
   "engines": {
     "node": ">=18"