zet-lib 1.4.17 → 1.4.19

package/lib/Form.js

@@ -613,6 +613,30 @@ Form.field = (obj) => {
                         </div></div>
                     </label></div>${information}${append}`;
       break;
+
+    case "dropboxview":
+      let countdropboxFiles =
+        obj.value && obj.value.length ? obj.value.length + " Files" : "";
+      let bodydropboxview =
+        countdropboxFiles == ""
+          ? ""
+          : `<div class="card-header">${countdropboxFiles} <div class="float-end">
+<span class="icon-small icons-light" title="Download"><img onclick="location.href= '/zdownloads-dropbox/${obj.routeName}/${obj.key}/${obj.dataId}'" class="icons-bg-black gridview icon-image" src="/assets/icons/download.svg"></span>  
+<span class="icon-small icons-light" title="Compress Images"><img onclick="if(window.confirm('Compress Images ?')) {ajaxPost('/zcompress-dropbox',{table:'${obj.routeName}',field:'${obj.key}',id:${obj.dataId}},(data) => toastrForm(data))}" class="icons-bg-black gridextract icon-image" src="/assets/icons/file-zip.svg"></span>
+</div></div>`;
+      displayForm = `<div id="div-progress"></div><div class="card">
+          ${bodydropboxview}
+        <div class="card-body">`;
+      if (obj.value && obj.value.length > 0) {
+        obj.value.map((item) => {
+          let extFile = Util.fileExtension(item);
+          let filename = item;
+          let filePath = `/${obj.routeName}/${obj.key}/${item}`;
+          displayForm += `<img src="/img/dropbox.png" class="boxy zoom mx-2 my-2 zdropbox-view" width="200px" data-ext="${extFile.ext}" data-path="${filePath}"  data-table="${obj.table}" data-field="${obj.key}" data-name="${item}"  alt="${item}">`;
+        });
+      }
+      displayForm += `</div></div>`;
+      break;
     default:
       value = value ? value.replace(/"/g, "&quot;") : obj.value;
       displayForm = `${prepend}${inputGroupLeft}<input ${disabled} autocomplete="nope" autofocus=""  ${readonly}  ${tabindex}  type="${type}" class="form-control ${obj.class}" ${id} ${name} ${placeholder}   ${required} value="${value}" data-t="${value}"  ${htmlOptions}>${inputGroupRight}${information}${append}`;

package/lib/moduleLib.js

@@ -1,115 +1,118 @@
-const Util = require('./Util')
-const newLine = Util.newLine
+const Util = require("./Util");
+const newLine = Util.newLine;
 
-const m = {}
+const m = {};
 
 //module for ide code editor
 m.ideCDN = function (req, res) {
-  let script = ''
-  let head = ``
-  let end = ``
-  end += `<script src="/modules/ace.js"></script>${Util.newLine}`
+  let script = "";
+  let head = ``;
+  let end = ``;
+  end += `<script src="/modules/ace.js"></script>${Util.newLine}`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.ide = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '#ide_editor'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || "#ide_editor";
   end += `<script>   var editor_${elem} = ace.edit("${elem}");
     editor_${elem}.getSession().setMode("ace/mode/ejs");
-     </script> ${Util.newLine}`
+     </script> ${Util.newLine}`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.tags = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.tags'
-  end += `<script type="module">import Tags from "/modules/tags.js";Tags.init("${elem}");</script>`
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".tags";
+  end += `<script type="module">import Tags from "/modules/tags.js";Tags.init("${elem}");</script>`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 //module for datepicker
 m.datepicker = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.datepicker'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".datepicker";
   /*  head += '<link href="/css/bootstrap-datepicker.css" rel="stylesheet">';
       end += '<script src="/js/bootstrap-datepicker.min.js"></script>';*/
-  head += '<link href="/modules/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet">'
-  end += '<script src="/modules/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>'
-  script = `$.fn.datepicker.defaults.format = "yyyy-mm-dd";$.fn.datepicker.defaults.todayHighlight = true;$("body").on("click", "${elem}", function(){$(this).datepicker();$(this).datepicker("show");});`
+  head +=
+    '<link href="/modules/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet">';
+  end +=
+    '<script src="/modules/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>';
+  script = `$.fn.datepicker.defaults.format = "yyyy-mm-dd";$.fn.datepicker.defaults.todayHighlight = true;$("body").on("click", "${elem}", function(){$(this).datepicker();$(this).datepicker("show");});`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //module for selectize
 //https://selectize.dev
 //https://github.com/selectize/selectize.js
 m.selectize = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.selectize'
-  head += '<link href="/modules/selectizejs/css/selectize.bootstrap5.css" rel="stylesheet">'
-  end += '<script src="/modules/selectizejs/js/selectize.min.js"></script>'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".selectize";
+  head +=
+    '<link href="/modules/selectizejs/css/selectize.bootstrap5.css" rel="stylesheet">';
+  end += '<script src="/modules/selectizejs/js/selectize.min.js"></script>';
 
   script += `$(() => {
     $('${elem}').selectize({
       sortField: 'text'
     });
-  });`
+  });`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //module for dropzone
 m.dropzone = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.dropzone'
-  head += '<link href="/modules/dropzone/dropzone.css" rel="stylesheet">'
-  end += '<script src="/modules/dropzone/dropzone.min.js"></script>'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".dropzone";
+  head += '<link href="/modules/dropzone/dropzone.css" rel="stylesheet">';
+  end += '<script src="/modules/dropzone/dropzone.min.js"></script>';
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //module for dragdrop
 m.dragdrop = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  head += '<link href="/modules/drag/drag.css" rel="stylesheet">'
-  end += '<script src="/modules/drag/jquery-sortable.js"></script>'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  head += '<link href="/modules/drag/drag.css" rel="stylesheet">';
+  end += '<script src="/modules/drag/jquery-sortable.js"></script>';
   script += `$(function () {
     $("ol.mydragable${elem}").sortable({
         group: 'mydragable${elem}',
@@ -131,20 +134,20 @@ m.dragdrop = function (req, res, elem) {
     });
 });
 
-`
+`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //module for google map
 m.location = function (req, res, key) {
-  let script = ``
-  let head = ``
-  let end = ``
-  end += `<script src="https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_KEY}&callback=initAutocompleteZmap&libraries=places&language=ID" defer></script>`
+  let script = ``;
+  let head = ``;
+  let end = ``;
+  end += `<script src="https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_KEY}&callback=initAutocompleteZmap&libraries=places&language=ID" defer></script>`;
   script += `let searchAddressMap;
     let autocompleteMap;
     function initAutocompleteZmap() {
@@ -229,221 +232,254 @@ m.location = function (req, res, key) {
                 }
             );
         }
-    }`
+    }`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //module for datepicker
 m.datetimepicker = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.datetimepicker'
-  head += '<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />'
-  end += '<script type="text/javascript" src="/js/moment-with-locales.min.js" ></script>'
-  end += '<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js" ></script>'
-  script += `$(function () { $("${elem}").datetimepicker({format:'YYYY-MM-DD hh:mm:ss'}); });`
-  script += `setTimeout(function () { $("body").click();},1000);`
-  script += `$("body").on("click", function(){$("${elem}").datetimepicker({format:'YYYY-MM-DD hh:mm:ss'});});`
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".datetimepicker";
+  head +=
+    '<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />';
+  end +=
+    '<script type="text/javascript" src="/js/moment-with-locales.min.js" ></script>';
+  end +=
+    '<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js" ></script>';
+  script += `$(function () { $("${elem}").datetimepicker({format:'YYYY-MM-DD hh:mm:ss'}); });`;
+  script += `setTimeout(function () { $("body").click();},1000);`;
+  script += `$("body").on("click", function(){$("${elem}").datetimepicker({format:'YYYY-MM-DD hh:mm:ss'});});`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //using ckeditor
 m.ckeditor = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.editor'
-  end += '<script src="/modules/ckeditor5-build-classic/ckeditor.js"></script>' + newLine
-  end += '<script>'
-  end += 'ClassicEditor.create( document.querySelector( "' + elem + '" ) ).catch( error => {console.error( error );} );' + newLine
-  end += '</script>'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".editor";
+  end +=
+    '<script src="/modules/ckeditor5-build-classic/ckeditor.js"></script>' +
+    newLine;
+  end += "<script>";
+  end +=
+    'ClassicEditor.create( document.querySelector( "' +
+    elem +
+    '" ) ).catch( error => {console.error( error );} );' +
+    newLine;
+  end += "</script>";
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //using tinymce
 m.tinymce = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.tinymce'
-  end += '<script src="https://cdn.tiny.cloud/1/b7054u42l8lw67ch5oh9qutnvbyu8exzryg4edy0gg2snhtr/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>' + newLine
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".tinymce";
+  end +=
+    '<script src="https://cdn.tiny.cloud/1/b7054u42l8lw67ch5oh9qutnvbyu8exzryg4edy0gg2snhtr/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>' +
+    newLine;
   script += ` tinymce.init({
       selector: '${elem}',
       plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
       toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
-    });`
+    });`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //using froala
 m.froala = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.editor'
-
-  head += '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />'
-  head += '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_style.min.css" rel="stylesheet" type="text/css" />'
-  end += '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/js/froala_editor.pkgd.min.js"></script>'
-  script += `$(function() {$("${elem}").froalaEditor({height: 200})});`
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".editor";
+
+  head +=
+    '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />';
+  head +=
+    '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_style.min.css" rel="stylesheet" type="text/css" />';
+  end +=
+    '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/js/froala_editor.pkgd.min.js"></script>';
+  script += `$(function() {$("${elem}").froalaEditor({height: 200})});`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.lexical = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.editor'
-  head += `<link rel="stylesheet" href="/assets/main.143ecbc6.css">`
-  end += `<script type="module" crossorigin src="/assets/main.3be493b7.js"></script>`
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".editor";
+  head += `<link rel="stylesheet" href="/assets/main.143ecbc6.css">`;
+  end += `<script type="module" crossorigin src="/assets/main.3be493b7.js"></script>`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 //Default editor is froala
-m.editor = (req, res, elem = '') => {
-  elem = elem || '.editor'
+m.editor = (req, res, elem = "") => {
+  elem = elem || ".editor";
   //Default editor is froala
   //return m.froala(req, res, elem);
   //return m.tinymce(req, res, elem);
   //return m.ckeditor(req, res, elem);
   //return m.lexical(req,res,elem);
 
-  let script = ''
-  let head = ``
-  let end = ``
+  let script = "";
+  let head = ``;
+  let end = ``;
 
-  head += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.4.2/css/all.min.css" integrity="sha512-NicFTMUg/LwBeG8C7VG+gC4YiiRtQACl98QdkmfsLy37RzXdkaUAuPyVMND0olPP4Jn8M/ctesGSB2pgUBDRIw==" crossorigin="anonymous" referrerpolicy="no-referrer" />'
-  head += '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />'
-  head += '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_style.min.css" rel="stylesheet" type="text/css" />'
-  end += '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/js/froala_editor.pkgd.min.js"></script>'
-  script += `$(function() {$("${elem}").froalaEditor({height: 200})});`
+  head +=
+    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.4.2/css/all.min.css" integrity="sha512-NicFTMUg/LwBeG8C7VG+gC4YiiRtQACl98QdkmfsLy37RzXdkaUAuPyVMND0olPP4Jn8M/ctesGSB2pgUBDRIw==" crossorigin="anonymous" referrerpolicy="no-referrer" />';
+  head +=
+    '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />';
+  head +=
+    '<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_style.min.css" rel="stylesheet" type="text/css" />';
+  end +=
+    '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/js/froala_editor.pkgd.min.js"></script>';
+  script += `$(function() {$("${elem}").froalaEditor({height: 200})});`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.switch = function (req, res, elem, array) {
-  elem = elem || '.switch'
-  let script = ''
-  let head = ``
-  let end = ``
-
-  head += '<link href="/modules/bootstrap-switch/bootstrap-switch.css" rel="stylesheet" type="text/css" />' + newLine
-  end += '<script type="text/javascript" src="/modules/bootstrap-switch/bootstrap-switch.js"></script>' + newLine
-
-  let labels = ''
+  elem = elem || ".switch";
+  let script = "";
+  let head = ``;
+  let end = ``;
+
+  head +=
+    '<link href="/modules/bootstrap-switch/bootstrap-switch.css" rel="stylesheet" type="text/css" />' +
+    newLine;
+  end +=
+    '<script type="text/javascript" src="/modules/bootstrap-switch/bootstrap-switch.js"></script>' +
+    newLine;
+
+  let labels = "";
   if (Array.isArray(array)) {
-    labels = '{offText:"' + array[0] + '", onText:"' + array[1] + '"}'
+    labels = '{offText:"' + array[0] + '", onText:"' + array[1] + '"}';
   }
-  script += '$("' + elem + '").bootstrapSwitch(' + labels + ');' + newLine
+  script += '$("' + elem + '").bootstrapSwitch(' + labels + ");" + newLine;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.switchOld = function (req, res, elem, array) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.switch'
-  head += '<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">' + newLine
-  end += '<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>' + newLine
-
-  let labels = ''
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".switch";
+  head +=
+    '<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">' +
+    newLine;
+  end +=
+    '<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>' +
+    newLine;
+
+  let labels = "";
   if (Array.isArray(array)) {
-    labels = '{off:"' + array[0] + '", on:"' + array[1] + '"}'
+    labels = '{off:"' + array[0] + '", on:"' + array[1] + '"}';
   }
-  script += `$(function(){$('${elem}').bootstrapToggle(${labels});});${Util.newLine}`
+  script += `$(function(){$('${elem}').bootstrapToggle(${labels});});${Util.newLine}`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.clockpicker = function (req, res, elem) {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.clockpicker'
-  head += '<link href="/modules/jquery-clockpicker.min.css" rel="stylesheet" type="text/css" />' + newLine
-  end += '<script type="text/javascript" src="/modules/bootstrap-clockpicker.min.js"></script>' + newLine
-  script += `$("body").on("click", "${elem}", function(){$(this).clockpicker({donetext: "Done"});});`
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".clockpicker";
+  head +=
+    '<link href="/modules/jquery-clockpicker.min.css" rel="stylesheet" type="text/css" />' +
+    newLine;
+  end +=
+    '<script type="text/javascript" src="/modules/bootstrap-clockpicker.min.js"></script>' +
+    newLine;
+  script += `$("body").on("click", "${elem}", function(){$(this).clockpicker({donetext: "Done"});});`;
   //end += '$("' + elem + '").clockpicker({donetext: "Done"});' + newLine;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.number = (req, res, elem) => {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.number'
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".number";
 
-  end += '<script type="text/javascript" src="/js/jquery-currency.js"></script>'
-  script += `$(function () { $(".number").formatCurrencyLive({symbol:"",roundToDecimalPlace :0,digitGroupSymbol :"."}); });`
-  script += `setTimeout(function () { $("body").click();},1000);`
-  script += `$("body").on("click", function(){$(".number").formatCurrencyLive({symbol:"",roundToDecimalPlace :0,digitGroupSymbol :"."});});`
+  end +=
+    '<script type="text/javascript" src="/js/jquery-currency.js"></script>';
+  script += `$(function () { $(".number").formatCurrencyLive({symbol:"",roundToDecimalPlace :0,digitGroupSymbol :"."}); });`;
+  script += `setTimeout(function () { $("body").click();},1000);`;
+  script += `$("body").on("click", function(){$(".number").formatCurrencyLive({symbol:"",roundToDecimalPlace :0,digitGroupSymbol :"."});});`;
 
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.typeahead = (req, res, table, elem) => {
-  let script = ''
-  let head = ``
-  let end = ``
-  elem = elem || '.typeahead'
-  end += '<script type="text/javascript" src="/modules/typeahead/typeahead.js"></script>' + newLine
-
-  let elemData = elem.replace('.', '').replace('#', '')
-  let element = elem.replace('Typeahead', '')
-  let key = element.replace('#', '').replace('.', '')
+  let script = "";
+  let head = ``;
+  let end = ``;
+  elem = elem || ".typeahead";
+  end +=
+    '<script type="text/javascript" src="/modules/typeahead/typeahead.js"></script>' +
+    newLine;
+
+  let elemData = elem.replace(".", "").replace("#", "");
+  let element = elem.replace("Typeahead", "");
+  let key = element.replace("#", "").replace(".", "");
   // var script using existing cache
   script += `$("body").on("click", "${element}Clear", function(){
             $("${elem}").val("");
             $("${element}").val("");
             $("${element}").change();
-    });${Util.newLine}`
+    });${Util.newLine}`;
   script += `$("${elem}").typeahead({highlight:true,minLength:2,source: function (query, asyncprocess) {
         jQuery.ajax({
             url : "/ztypeahead/${table}/${key}",
@@ -464,31 +500,33 @@ m.typeahead = (req, res, table, elem) => {
         $("${element}").change();
         return item;
     }
-    }); ${Util.newLine}`
+    }); ${Util.newLine}`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.typeaheadFile = (req, res, elem, data) => {
-  let script = ''
-  let head = ``
-  let end = ``
-  data = data || []
-  elem = elem || '.typeahead'
-  end += '<script type="text/javascript" src="/modules/typeahead/typeahead.js"></script>' + newLine
-
-  let elemData = elem.replace('.', '')
-  elemData = elemData.replace('#', '')
-  let element = elem.replace('Typeahead', '')
+  let script = "";
+  let head = ``;
+  let end = ``;
+  data = data || [];
+  elem = elem || ".typeahead";
+  end +=
+    '<script type="text/javascript" src="/modules/typeahead/typeahead.js"></script>' +
+    newLine;
+
+  let elemData = elem.replace(".", "");
+  elemData = elemData.replace("#", "");
+  let element = elem.replace("Typeahead", "");
   // var script using existing cache
   script += `$("body").on("click", "${element}Clear", function(){
             $("${elem}").val("");
             $("${element}").val("");
             $("${element}").change();
-    });${Util.newLine}`
+    });${Util.newLine}`;
   script += `$("${elem}").typeahead({highlight: true,minLength:2,source:${elemData}Data, items: 50, displayText: function (item) {
         return item.zname.toString();
     },
@@ -497,35 +535,83 @@ m.typeaheadFile = (req, res, elem, data) => {
         $("${element}").change();
         return item;
     }
-    }); ${Util.newLine}`
+    }); ${Util.newLine}`;
   return {
     head: head,
     end: end,
     script: script,
-  }
-}
+  };
+};
 
 m.custom = (req, res, script, css, src) => {
-  src = src || ''
-  css = css || ''
-  let head = res.locals.moduleHead
-  let end = res.locals.moduleEnd
+  src = src || "";
+  css = css || "";
+  let head = res.locals.moduleHead;
+  let end = res.locals.moduleEnd;
   if (script) {
-    end += '<script>' + newLine
-    end += script + newLine
-    end += '</script>' + newLine
+    end += "<script>" + newLine;
+    end += script + newLine;
+    end += "</script>" + newLine;
   }
   if (css) {
-    head += css
+    head += css;
   }
   if (src) {
-    end += `<script src="${src}"> ${newLine}`
-  }
-  res.locals.moduleHead = head
-  res.locals.moduleEnd = end
-}
+    end += `<script src="${src}"> ${newLine}`;
+  }
+  res.locals.moduleHead = head;
+  res.locals.moduleEnd = end;
+};
+
+//dropbox view
+m.dropboxview = (req, res) => {
+  let script = ``;
+  let head = ``;
+  let end = ``;
+  script +=
+    `$(()=>{
+   $(".zdropbox-view").each(function (index, item) {
+       let dropboxLength = $(".zdropbox-view").length || 0;
+       ajaxPost('/zdropbox-file/' + index, {
+           fileName: $(this).attr('data-name'),
+           table: $(this).attr('data-table'),
+           field: $(this).attr('data-field'),
+       }, function (result) {
+           $(item).attr("src", result.link)
+           $(item).attr('data-link', result.link);
+           if (+result.index == (+dropboxLength - 1)) {
+              setTimeout(() => modaldropbox(),1000); 
+           }
+       })
+   })
+   }) 
+
+function modaldropbox() {
+    $(".zdropbox-view").each(function () {
+        let ext = $(this).attr('data-ext');
+        if (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "bmp" || ext == "webp" || ext == "jiff" || ext == "svg" || ext == "avif") {
+            $(this).on("click", function () {
+                $(".zimage-modal").attr('src', $(this).attr('data-link')).attr('data-name', $(this).attr('data-name'));
+                $("#zmodal-image").modal("show");
+            })
+        } else {
+            let file = nonImagesTypeObject[ext] || 'file.png';
+            $(this).attr("src", "/img/" + file);
+            $(this).on("click", function () {
+                window.open($(this).attr('data-link'), '_blank');
+            })
+        }
+    })
+}` + newLine;
 
-m.script = (req, res, table) => {}
+  return {
+    head: head,
+    end: end,
+    script: script,
+  };
+};
+
+m.script = (req, res, table) => {};
 
 /*
  add scrip code in the body html
@@ -534,128 +620,146 @@ m.script = (req, res, table) => {}
 
  type : script / css
  */
-m.addScript = (req, res, contentScript, at = 'end', type = 'script') => {
+m.addScript = (req, res, contentScript, at = "end", type = "script") => {
   if (contentScript) {
-    let generateId = 'app_' + Util.generate(6)
-    let tagOpen = type == 'script' ? `<script  id="${generateId}">` : '<style type="text/css">'
-    let tagClose = type == 'script' ? '</script>' : '</style>'
-    let content = at == 'end' ? res.locals.moduleEnd : res.locals.moduleHead
-    content += tagOpen + newLine
-    content += contentScript + newLine
-    content += tagClose + newLine
-
-    if (at == 'end') {
-      res.locals.moduleEnd = content
-    } else res.locals.moduleHead = content
-  }
-}
+    let generateId = "app_" + Util.generate(6);
+    let tagOpen =
+      type == "script"
+        ? `<script  id="${generateId}">`
+        : '<style type="text/css">';
+    let tagClose = type == "script" ? "</script>" : "</style>";
+    let content = at == "end" ? res.locals.moduleEnd : res.locals.moduleHead;
+    content += tagOpen + newLine;
+    content += contentScript + newLine;
+    content += tagClose + newLine;
+
+    if (at == "end") {
+      res.locals.moduleEnd = content;
+    } else res.locals.moduleHead = content;
+  }
+};
 
 m.addModule = (req, res, content, isModuleHead = false) => {
-  let moduleContent = isModuleHead ? res.locals.moduleHead : res.locals.moduleEnd
-  moduleContent += content
+  let moduleContent = isModuleHead
+    ? res.locals.moduleHead
+    : res.locals.moduleEnd;
+  moduleContent += content;
   if (isModuleHead) {
-    res.locals.moduleHead = moduleContent
+    res.locals.moduleHead = moduleContent;
   } else {
-    res.locals.moduleEnd = moduleContent
+    res.locals.moduleEnd = moduleContent;
   }
-}
+};
 
 m.highchart = async (req, res, obj) => {
-  obj = obj || {}
-  let head = res.locals.moduleHead
-  let end = res.locals.moduleEnd
-  if (end.indexOf('highcharts') < 0) {
-    end += '<script src="https://code.highcharts.com/highcharts.js"></script>' + newLine
+  obj = obj || {};
+  let head = res.locals.moduleHead;
+  let end = res.locals.moduleEnd;
+  if (end.indexOf("highcharts") < 0) {
+    end +=
+      '<script src="https://code.highcharts.com/highcharts.js"></script>' +
+      newLine;
   }
 
   if (!Util.isEmptyObject(obj)) {
-    const highcharts = require('./highcharts')
-    end += '<script>' + newLine
-    end += await highcharts.build(obj)
-    end += '</script>' + newLine
+    const highcharts = require("./highcharts");
+    end += "<script>" + newLine;
+    end += await highcharts.build(obj);
+    end += "</script>" + newLine;
   }
 
-  res.locals.moduleHead = head
-  res.locals.moduleEnd = end
-}
+  res.locals.moduleHead = head;
+  res.locals.moduleEnd = end;
+};
 
 //build auto js and css based on function type
 m.build = (req, res, objData) => {
-  let head = res.locals.moduleHead
-  let end = res.locals.moduleEnd
+  let head = res.locals.moduleHead;
+  let end = res.locals.moduleEnd;
 
-  head += objData.head
-  end += objData.end
+  head += objData.head;
+  end += objData.end;
   if (objData.script) {
-    end += `<script>${objData.script}</script>`
+    end += `<script>${objData.script}</script>`;
   }
-  res.locals.moduleHead = head
-  res.locals.moduleEnd = end
-}
+  res.locals.moduleHead = head;
+  res.locals.moduleEnd = end;
+};
 
 m.tableForm = (req, res, name, table) => {
-  let head = res.locals.moduleHead
-  let end = res.locals.moduleEnd
-  res.locals.moduleHead = head
-  res.locals.moduleEnd = end
-}
+  let head = res.locals.moduleHead;
+  let end = res.locals.moduleEnd;
+  res.locals.moduleHead = head;
+  res.locals.moduleEnd = end;
+};
 
 m.selectYear = (req, res, elem, val, startYear, endYear) => {
-  let dt = new Date()
-  endYear = endYear || dt.getFullYear()
-  val = val || ''
-  var options = ''
+  let dt = new Date();
+  endYear = endYear || dt.getFullYear();
+  val = val || "";
+  var options = "";
   for (var i = endYear; i >= startYear; i--) {
-    var selected = i == val ? ' selected ' : ''
-    options += `<option value="${i}" ${selected}>${i}</option>`
+    var selected = i == val ? " selected " : "";
+    options += `<option value="${i}" ${selected}>${i}</option>`;
   }
-  let end = res.locals.moduleEnd
-  end += '<script>' + newLine
-  end += `$("${elem}").html('${options}')`
-  end += '</script>' + newLine
-  res.locals.moduleEnd = end
-}
+  let end = res.locals.moduleEnd;
+  end += "<script>" + newLine;
+  end += `$("${elem}").html('${options}')`;
+  end += "</script>" + newLine;
+  res.locals.moduleEnd = end;
+};
 
 //https://highlightjs.org/usage/
 m.highlight = (req, res, elem) => {
-  elem = elem || '.codes'
-  let head = res.locals.moduleHead
-  let end = res.locals.moduleEnd
-  if (head.indexOf('highlight') < 0) {
-    head += '<link rel="stylesheet" href="/modules/highlight/default.min.css"> ' + newLine
-    end += '<script src="/modules/highlight/highlight.min.js"></script>' + newLine
-  }
-  end += '<script>$(function(){ document.querySelectorAll("' + elem + '").forEach((block) => {hljs.highlightBlock(block);}); })</script>' + newLine
-  res.locals.moduleHead = head
-  res.locals.moduleEnd = end
-}
+  elem = elem || ".codes";
+  let head = res.locals.moduleHead;
+  let end = res.locals.moduleEnd;
+  if (head.indexOf("highlight") < 0) {
+    head +=
+      '<link rel="stylesheet" href="/modules/highlight/default.min.css"> ' +
+      newLine;
+    end +=
+      '<script src="/modules/highlight/highlight.min.js"></script>' + newLine;
+  }
+  end +=
+    '<script>$(function(){ document.querySelectorAll("' +
+    elem +
+    '").forEach((block) => {hljs.highlightBlock(block);}); })</script>' +
+    newLine;
+  res.locals.moduleHead = head;
+  res.locals.moduleEnd = end;
+};
 
 //https://developer.snapappointments.com/bootstrap-select/
 m.selectpicker = function (req, res, elem) {
-  elem = elem || '.selectpicker'
-  let head = res.locals.moduleHead
-  let end = res.locals.moduleEnd
-  if (head.indexOf('bootstrap-select') < 0) {
-    head += '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">' + newLine
-    end += '<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>' + newLine
-    end += `<script>$(function () {$('${elem}').selectpicker();});</script>${newLine}`
-  }
-  res.locals.moduleHead = head
-  res.locals.moduleEnd = end
-}
-
-m.slugHTML = (req, res, content, at = 'end') => {
+  elem = elem || ".selectpicker";
+  let head = res.locals.moduleHead;
+  let end = res.locals.moduleEnd;
+  if (head.indexOf("bootstrap-select") < 0) {
+    head +=
+      '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">' +
+      newLine;
+    end +=
+      '<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>' +
+      newLine;
+    end += `<script>$(function () {$('${elem}').selectpicker();});</script>${newLine}`;
+  }
+  res.locals.moduleHead = head;
+  res.locals.moduleEnd = end;
+};
+
+m.slugHTML = (req, res, content, at = "end") => {
   if (content) {
-    let head = res.locals.moduleHead
-    let end = res.locals.moduleEnd
-    if (at == 'end') {
-      end += content
-      res.locals.moduleEnd = end
+    let head = res.locals.moduleHead;
+    let end = res.locals.moduleEnd;
+    if (at == "end") {
+      end += content;
+      res.locals.moduleEnd = end;
     } else {
-      head += content
-      res.locals.moduleHead = head
+      head += content;
+      res.locals.moduleHead = head;
     }
   }
-}
+};
 
-module.exports = m
+module.exports = m;

package/lib/zAppRouter.js

@@ -2113,12 +2113,12 @@ router.post("/zdropbox-file/:index", handleTokenRefresh, async (req, res) => {
 router.post("/zdropbox-remove/", handleTokenRefresh, async (req, res) => {
   try {
     let body = req.body;
-    console.log(body);
+    //console.log(body);
     const userId = res.locals.userId;
     const fileName = body.file;
     let cname = body.cname.replace("ZUSER___ID", userId);
     let cacheName = cname;
-    console.log(cacheName);
+    //console.log(cacheName);
     let splits = cname.split("__");
     let table = splits[2];
     let field = splits[3];
@@ -2127,19 +2127,27 @@ router.post("/zdropbox-remove/", handleTokenRefresh, async (req, res) => {
     await ensureFolder(dir);
     const filePath = `${dir}/${fileName}`;
     let arr = [];
+    if (type != "create") {
+      cacheName = cacheName + "__remove";
+    }
     if (myCache.has(cacheName)) {
       arr = myCache.get(cacheName);
     }
-    try {
-      /* await dbx.filesDeleteV2({
-        path: filePath,
-      });*/
-      arr = Util.arrayDelete(arr, body.file);
+    //console.log(cacheName)
+    if (type == "create") {
+      try {
+        await dbx.filesDeleteV2({
+          path: filePath,
+        });
+        arr = Util.arrayDelete(arr, body.file);
+        myCache.set(cacheName, arr);
+      } catch (e) {
+        console.log(e);
+      }
+    } else {
+      arr.push(body.file);
       myCache.set(cacheName, arr);
-    } catch (e) {
-      console.log(e);
     }
-
     res.json({ success: true });
   } catch (error) {
     console.error("Error deleting file:", error);

package/lib/zRoute.js

@@ -3344,6 +3344,7 @@ zRoute.viewFormsSync = async (req, res, MYMODEL, data = {}) => {
   let forms = zRoute.viewForm(req, res, MYMODEL, relations, data);
   let hasEditors = false;
   let hasLocation = false;
+  let hasDropbox = false;
   let mapKey = "";
   for (let key in MYMODEL.widgets) {
     if (MYMODEL.widgets[key].name == "editor") {
@@ -3353,6 +3354,9 @@ zRoute.viewFormsSync = async (req, res, MYMODEL, data = {}) => {
       hasLocation = true;
       mapKey = key;
     }
+    if (MYMODEL.widgets[key].name == "dropbox") {
+      hasDropbox = true;
+    }
   }
   if (hasEditors) {
     moduleLib.build(req, res, moduleLib.editor(req, res));
@@ -3360,6 +3364,9 @@ zRoute.viewFormsSync = async (req, res, MYMODEL, data = {}) => {
   if (hasLocation) {
     moduleLib.build(req, res, moduleLib.location(req, res, mapKey));
   }
+  if (hasDropbox) {
+    moduleLib.build(req, res, moduleLib.dropboxview(req, res));
+  }
   //add tabs role
   if (MYMODEL.hasOwnProperty("hasTabs") && MYMODEL.hasTabs) {
     let script = "";
@@ -3635,6 +3642,14 @@ zRoute.viewForm = (
           obj[key].key = key;
           obj[key].dataId = data.id || "";
           break;
+
+        case "dropbox":
+          obj[key].type = "dropboxview";
+          obj[key].value = data[key] || [];
+          obj[key].table = MYMODEL.table;
+          obj[key].key = key;
+          obj[key].dataId = data.id || "";
+          break;
       }
     }
     //forms.build[key] = cForm.build(obj[key]);
@@ -4335,8 +4350,8 @@ zRoute.generateJS = (req, res, MYMODEL, relations, zForms = "", data = {}) => {
                         imageElement.setAttribute('data-link', result.link);
                         $(imageElement).attr('id', result.id.content_hash);
                         $(imageElement).find("img").attr("src", result.link);
-                        if(+result.index == (dropbox_${item}_data.length - 1) ) {
-                            modaldropbox();
+                        if(+result.index == (dropbox_${item}_data.length - 1)) {
+                            setTimeout(() => modaldropbox(),1000); 
                         }
                     })
                 })
@@ -4816,6 +4831,7 @@ zRoute.updateSQL = async (req, res, table, data, whereData) => {
     let hasImages = false;
     let tables = [];
     let tableFields = {};
+    let movDropboxArr = [];
     for (let key in MYMODEL.widgets) {
       if (MYMODEL.widgets[key].name == "table") {
         tableFields[key] = [];
@@ -4858,10 +4874,6 @@ zRoute.updateSQL = async (req, res, table, data, whereData) => {
           data[key] = Util.array_to_jsonb(newArr);
         }
       } else if (MYMODEL.widgets[key].name === "dropbox") {
-        //console.log('has dropbox')
-        let path_src = `/temps/${MYMODEL.table}/${key}/${userId}`;
-        let path_dest = `/${MYMODEL.table}/${key}`;
-
         // Initialize Dropbox client
         let dbx = new Dropbox({
           accessToken: process.env.DROPBOX_ACCESS_TOKEN,
@@ -4870,16 +4882,18 @@ zRoute.updateSQL = async (req, res, table, data, whereData) => {
           clientSecret: process.env.DROPBOX_CLIENT_SECRET,
           fetch: fetch,
         });
-
+        //console.log('has dropbox')
+        let dir1 = `/${MYMODEL.table}/${key}`;
+        let dir2 = `/temps/${MYMODEL.table}/${key}/${userId}`;
         try {
           await dbx.filesCreateFolderV2({
-            path: path_dest,
+            path: dir1,
             autorename: false,
           });
         } catch (error) {
           if (error.status !== 409) {
             // 409 means folder already exists
-            throw error;
+            //throw error;
           }
         }
         let name = `dropbox__${userId}__${MYMODEL.table}__${key}__${whereData.id}`;
@@ -4887,49 +4901,75 @@ zRoute.updateSQL = async (req, res, table, data, whereData) => {
           let arr = myCache.get(name) || [];
           let newArr = [];
           let time = new Date().getTime();
-          arr.map((item) => {
-            //todo
-            //jika item tidak ada di dropbox
+          for (const item of arr) {
             try {
-            } catch (e) {}
-            if (!Util.fileExist(path_dest + item)) {
-              let newItem = time + item;
-              newArr.push(newItem);
-              if (Util.fileExist(path_src + item)) {
-                fs.rename(path_src + item, path_dest + newItem);
+              //check in dir1
+              let filepath1 = `${dir1}/${item}`;
+              // Get the file metadata to ensure we have the correct path
+              const metadata = await dbx.filesGetMetadata({
+                path: filepath1,
+              });
+              const finalPath = metadata.result.path_display;
+              if (finalPath) {
+                newArr.push(item);
+              }
+            } catch (e) {
+              //check in dir2 temp folder
+              try {
+                let filepath2 = `${dir2}/${item}`;
+                const metadata = await dbx.filesGetMetadata({
+                  path: filepath2,
+                });
+                const finalPath = metadata.result.path_display;
+                if (finalPath) {
+                  let newItem = Util.cleanString(time + item);
+                  newArr.push(newItem);
+                  movDropboxArr.push({
+                    from_path: `${dir2}/${item}`,
+                    to_path: `${dir1}/${newItem}`,
+                  });
+                }
+              } catch (e) {
+                console.log(e);
               }
-            } else {
-              newArr.push(item);
             }
-          });
+          }
           data[key] = Util.array_to_jsonb(newArr);
         }
-        /////
-        /*let name = `dropbox__${res.locals.userId}__${table}__${key}__create`;
-        if (myCache.has(name)) {
-          let arr = myCache.get(name);
-          let newArr = [];
-          if (arr.length > 0) {
-            let time = new Date().getTime();
-            arr.map(async (item) => {
-              //check
+        myCache.del(name);
+
+        let removeName = name + "__remove";
+        if (myCache.has(removeName)) {
+          let removesArr = myCache.get(removeName) || [];
+          for (const item of removesArr) {
+            //hapus item di folder dir1 atau dir2
+            try {
+              await dbx.filesDeleteV2({
+                path: `${dir1}/${item}`,
+              });
+            } catch (e) {
+              console.log(e);
               try {
-                let newItem = Util.cleanString(time + item);
-                movDropboxArr.push({
-                  from_path: `${path_src}/${item}`,
-                  to_path: `${path_dest}/${newItem}`,
+                await dbx.filesDeleteV2({
+                  path: `${dir2}/${item}`,
                 });
-                newArr.push(newItem);
               } catch (e) {
                 console.log(e);
               }
-            });
-            data[key] = Util.array_to_jsonb(newArr);
+            }
           }
-        }*/
-        myCache.del(name);
+        }
+        myCache.del(removeName);
       }
     }
+
+    //dropbox
+    if (movDropboxArr.length > 0) {
+      setTimeout(function () {
+        zRoute.moveDropbox(movDropboxArr);
+      }, 3000);
+    }
+
     let result = await connection.result({
       table: MYMODEL.table,
       where: whereData,

package/package.json

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