zet-lib 1.3.39 → 1.3.41

package/lib/zdataTable.js

@@ -1,330 +1,330 @@
-/**
- * Created by sintret dev on 1/6/2022.
- */
-const Util = require('./Util')
-const myCache = require('./cache')
-
-class dataTable {
-  constructor(datas) {
-    //console.log(datas)
-    this.visibles = datas.visiblesObj //array object
-    this.setColumns = ''
-    this.setTable = ''
-    this.srcScript = '/modules/datatable/datatables.min.js'
-    this.dataTableButtons = '/js/datatable-buttons.js'
-    this.customButtons = ''
-    this.MYMODEL = null
-    this.searchColumns = {}
-    this.relations
-    this.routeName
-    this.types = {}
-    this.roles = myCache.get('ROLES')[datas.zuser.role_id] || {}
-    this.level_approval = this.roles.approvals && this.roles.approvals[datas.routeName] ? this.roles.approvals[datas.routeName] : {}
-    this.hasLevels = Object.keys(this.level_approval).length == 0 ? false : true
-    this.visiblesKey = this.visibles.map((item) => item.key)
-    this.gridType = datas.gridType || 1
-    this.additionalCss = ''
-    if (this.gridType == 1) {
-      this.dataTableScript = '/modules/datatable/normal.js'
-    } else if (this.gridType == 2) {
-      this.dataTableScript = '/modules/datatable/fixed-header.js'
-    } else if (this.gridType == 3) {
-      this.dataTableScript = '/modules/datatable/footer-total.js'
-    } else if (this.gridType == 4) {
-      this.dataTableScript = '/modules/datatable/normal.js'
-      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
-    } else if (this.gridType == 5) {
-      this.dataTableScript = '/modules/datatable/fixed-header.js'
-      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
-    } else if (this.gridType == 6) {
-      this.dataTableScript = '/modules/datatable/footer-total.js'
-      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
-    } else if (this.gridType == 7) {
-      this.dataTableScript = '/modules/datatable/fixed-header-totalnowrap.js'
-      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
-    } else {
-      this.dataTableScript = '/modules/datatable/normal.js'
-    }
-    this.totalFields = []
-  }
-
-  // for filter html
-  set filterMODEL(obj) {
-    this.MYMODEL = obj.MYMODEL
-    this.relations = obj.relations
-    this.routeName = this.MYMODEL.routeName
-    this.types = obj.TYPES
-    this.totalFields = this.visiblesKey.filter((item) => this.MYMODEL.widgets[item] && this.MYMODEL.widgets[item].name == 'number')
-    delete obj.MYMODEL
-    delete obj.relations
-    delete obj.TYPES
-    this.searchColumns = obj
-  }
-  set buttons(html) {
-    return html
-  }
-
-  set buttons2(html) {
-    return html
-  }
-
-  get columns() {
-    if (this.setColumns) return this.setColumns
-    let html = ''
-    if (Array.isArray(this.visibles)) {
-      this.visibles.map((item) => {
-        html += `<th id="data_${item.key}_label">${item.name || ''}</th>`
-      })
-    } else {
-      for (const key in this.visibles) {
-        html += `<th id="data_${key}_label">${this.visibles[key]}</th>`
-      }
-    }
-
-    return html
-  }
-
-  get columnsFilter() {
-    let html = '<tr class="filters">'
-    if (Array.isArray(this.visibles)) {
-      this.visibles.map((item) => {
-        html += `<th id="data_${item.key}_label">${this.searchColumns[item.key]}</th>`
-      })
-    } else {
-      for (const key in this.visibles) {
-        html += `<th id="data_${key}">${this.searchColumns[key]}</th>`
-      }
-    }
-    html += '</tr>'
-    return html
-  }
-
-  /*
-   Create table html header
-   */
-  get table() {
-    if (this.setTable) return this.setTable
-    return `<table id="dataTable" class="display table table-hover table-responsive" style="width:100%">
-            <thead>${this.columns} ${this.columnsFilter}</thead>
-        </table>`
-  }
-
-  get buttons() {
-    let html = this.additionalCss
-    html = `<div class="dataTables_wrapper dt-bootstrap5 no-footer "><div class="dt-buttons btn-group flex-wrap">`
-    if (this.levels.create) {
-      html += `<button title="${LANGUAGE.create_info}" class="btn create gridadd image-button boxy-small dimens2x" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/plus.svg" class="icons-bg-black"> ${LANGUAGE.create}</button>`
-    }
-    if (this.levels.import) {
-      html += `<button title="${LANGUAGE.import_info}" class="btn buttons-copy buttons-html5 copy gridimport boxy-small dimens2x image-button" type="button"><img src="/assets/icons/database-import.svg" class="icons-bg-black"> ${LANGUAGE.import}</span></span></button>`
-    }
-    if (this.levels.lock) {
-      html += `<button title="Lock/Unlock" style="background-color: #332D2D; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-lock" type="button"><img src="/assets/icons/cloud-lock.svg" class="icons-bg-white"> Lock/Unlock</span></span></button>`
-    }
-    if (this.hasLevels) {
-      html += `<button title="Approval" style="background-color: #E4A11B; color:white" class="btn buttons-html5 boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-approval" type="button"><img src="/assets/icons/rubber-stamp.svg" class="icons-bg-white"> Approval</span></span></button>`
-    }
-    html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"> ${LANGUAGE.settings}</button>`
-    html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
-    if (this.levels.export) {
-      html += `<div class="btn-group" role="group">
-                            <button id="dropdownExport" type="button" class="btn dropdown-toggle boxy-small dimens2x image-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                <img src="/assets/icons/download.svg" class="icons-bg-black"> ${LANGUAGE.download}
-                            </button>
-                            <div class="dropdown-menu dimens3x" aria-labelledby="dropdownExport">`
-      html += `<a class="dropdown-header">Excel</a>`
-      html += `<a class="dropdown-item export-search-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel</a>`
-      html += `<a class="dropdown-item export-search-raw" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.import}) </a>`
-      html += `<a class="dropdown-item export-all-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.all}) </a>`
-      html += `<hr>`
-      html += `<a class="dropdown-header">PDF</a>`
-      html += `<a class="dropdown-item export-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF </a>`
-      html += `<a class="dropdown-item export-all-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF (${LANGUAGE.all}) </a>`
-      html += `</div>`
-    }
-    html += `</div></div>`
-    return html
-  }
-
-  get buttons2() {
-    let html = this.additionalCss
-    html += `<div class="dataTables_wrapper dt-bootstrap5 no-footer "><div class="dt-buttons btn-group flex-wrap">`
-    if (this.levels.create) {
-      html += `<button title="${LANGUAGE.create_info}" class="btn create gridadd image-button boxy-small dimens2x" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/plus.svg" class="icons-bg-black"></button>`
-    }
-    if (this.levels.import) {
-      html += `<button title="${LANGUAGE.import_info}" class="btn buttons-copy buttons-html5 copy gridimport boxy-small dimens2x image-button" type="button"><img src="/assets/icons/database-import.svg" class="icons-bg-black"> </span></span></button>`
-    }
-    if (this.levels.lock) {
-      html += `<button title="Lock/Unlock" style="background-color: #E4A11B; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-lock" type="button"><img src="/assets/icons/lock-check.svg" class="icons-bg-white"> </span></span></button>`
-    }
-    if (this.levels.delete_all) {
-      html += `<button title="Delete selected data" style="background-color: #DC4C64; color:white" class="btn btn-danger buttons-lock buttons-html5 copy griddeleteall boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-delete-all" type="button"><img src="/assets/icons/http-delete.svg" class="icons-bg-white"> </span></span></button>`
-    }
-    if (this.hasLevels) {
-      html += `<button title="Approval" style="background-color: #E4A11B; color:white" class="btn buttons-html5 boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-approval" type="button"><img src="/assets/icons/rubber-stamp.svg" class="icons-bg-white"> </span></span></button>`
-    }
-    html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"></button>`
-    html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
-    if (this.levels.export) {
-      html += `<div class="btn-group" role="group">
-                            <button id="dropdownExport" type="button" class="btn dropdown-toggle boxy-small dimens2x image-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                <img src="/assets/icons/download.svg" class="icons-bg-black">
-                            </button>
-                            <div class="dropdown-menu dimens3x" aria-labelledby="dropdownExport">`
-      html += `<a class="dropdown-header">Excel</a>`
-      html += `<a class="dropdown-item export-search-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel</a>`
-      html += `<a class="dropdown-item export-search-raw" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.import}) </a>`
-      html += `<a class="dropdown-item export-all-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.all}) </a>`
-      html += `<hr>`
-      html += `<a class="dropdown-header">PDF</a>`
-      html += `<a class="dropdown-item export-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF </a>`
-      html += `<a class="dropdown-item export-all-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF (${LANGUAGE.all}) </a>`
-      html += `</div>`
-    }
-    html += `</div></div>`
-    return html
-  }
-
-  get scripts() {
-    let script = `<script type="text/javascript" src="${this.srcScript}"></script>`
-    script += `<script>${Util.newLine}`
-    script += `var dataTableFields = ${JSON.stringify(this.visiblesKey, null, 2)};${Util.newLine}`
-    script += `var dataTableTypes = ${JSON.stringify(this.types, null, 2)};${Util.newLine}`
-    script += `var dataTableRoute = "${this.routeName}";${Util.newLine}`
-    script += `var dataTableHasTotalFields = ${JSON.stringify(this.totalFields)};${Util.newLine}`
-    script += `</script>${Util.newLine}`
-    script += `<script type="text/javascript" src="${this.dataTableScript}"></script>${Util.newLine}`
-    if (this.searchColumns.FILTERKEY) {
-      script += `<script>$(function () { setTimeout(function () {  ${this.searchColumns.FILTERKEY} },500) });</script>${Util.newLine}`
-    }
-    script += `<script type="text/javascript" src="${this.dataTableButtons}"></script>${Util.newLine}`
-
-    //additional script for typeahead in grid
-    let typeaheadScript = ''
-    for (let key in this.MYMODEL.widgets) {
-      if (this.MYMODEL.widgets[key].name == 'typeahead') {
-        typeaheadScript += `if($("#${key}").val()){
-        setTimeout(()=>{
-          ajaxPost('/ztypeaheadpost/${this.MYMODEL.table}/${key}', {
-            id: $("#${key}").val()
-          }, function(data) {
-            $("#${key}Typeahead").val(data);$("#${key}Typeahead").change();
-            $("#${key}").change();
-            $("#data_table_${key}").change();
-           
-            })
-          },1500)
-          };
-          `
-      }
-    }
-    if (typeaheadScript) {
-      script += `<script type="text/javascript">$(function () {${typeaheadScript}})</script>${Util.newLine}`
-    }
-    if (this.hasLevels) {
-      //modal-body-approval
-      let APPROVAL_LEVELS = myCache.get('APPROVAL_LEVELS')
-      let approvalButtonHtml = ``
-      for (let item in this.level_approval) {
-        let imageapproval = 'brand-bunpo'
-        if (item == 22) {
-          imageapproval = 'rubber-stamp-off'
-        } else if (item == 2) {
-          imageapproval = 'list-check'
-        } else if (item == 21) {
-          imageapproval = 'rubber-stamp'
-        }
-        let name = APPROVAL_LEVELS.hasOwnProperty(item) ? APPROVAL_LEVELS[item].name : ''
-        let color = APPROVAL_LEVELS.hasOwnProperty(item) ? APPROVAL_LEVELS[item].color : ''
-        approvalButtonHtml += ` <button title="${name}" data-value="${item}" style="background-color: ${color}; color:white" class="btn btn-approval-levels boxy-small dimens2x image-button mb-3" type="button"><img src="/assets/icons/${imageapproval}.svg" class="icons-bg-white"> ${name}</button> `
-      }
-      approvalButtonHtml += `<div class="row"><div class="col-md-10"><textarea class="form-control boxy purple-border" id="zapproval_message" placeholder="tulis alasan..." rows="2"></textarea></div><div class="col-md-1"></div></div>`
-
-      script += `<script type="text/javascript">$(function () {
-    $(".modal-body-approval").html('${approvalButtonHtml}');
-    $(".btn-approval-levels").on("click", function () {
-    ajaxPost('/zapproval-update/${this.MYMODEL.table}', {
-        text : $("#zapproval_message").val(),
-        value : $(this).attr('data-value'),
-        datas: $(".ck").serializeArray()
-    }, function (data) {
-        toastrForm(data);
-        if(data.status == 1) {
-            if(data.dataStatus.length > 0) {
-            data.dataStatus.map((item) => {
-                toastr.error(item);
-            });
-            setTimeout(function() {
-              if(data.status ==1) {
-                location.href='';
-            }
-            },4000);
-        } else {
-            if(data.status ==1) {
-                location.href='';
-            }
-        }
-        }
-    })
-})
-})</script>${Util.newLine}`
-    }
-
-    script += `<script type="text/javascript">
-$(function () {
-    $("#ck_all").on('click', function () {
-      if($(this).is(':checked')) {
-          $(".ck").prop('checked',true)
-      } else {
-          $(".ck").prop('checked',false)
-      }
-    })
-    
-$(".btn-save-lock").on("click", function () {
-    ajaxPost('/zlock-unlock/${this.MYMODEL.table}', {
-        type : 1,
-        datas: $(".ck").serializeArray()
-    }, function (data) {
-        toastrForm(data);
-        if(data.status ==1) {
-            location.href='';
-        }
-    })
-})
-
-$(".btn-save-unlock").on("click", function () {
-    ajaxPost('/zlock-unlock/${this.MYMODEL.table}', {
-        type : 0,
-        datas: $(".ck").serializeArray()
-    }, function (data) {
-        toastrForm(data);
-        if(data.status ==1) {
-            location.href='';
-        }
-    })
-})
-
-$(".btn-save-delete-selected").on("click", function () {
-    if(window.confirm("sure to delete selected data ?")) {
-        ajaxPost('/zdeleted-selected/${this.MYMODEL.table}', {
-            type : 1,
-            datas: $(".ck").serializeArray()
-        }, function (data) {
-            toastrForm(data);
-            if(data.status ==1) {
-                location.href='';
-            }
-        })
-    }
-})
-
-$("#zgrid_default_type").val(${this.gridType});
-
-})</script>${Util.newLine}`
-
-    return script
-  }
-}
-
-module.exports = dataTable
+/**
+ * Created by sintret dev on 1/6/2022.
+ */
+const Util = require('./Util')
+const myCache = require('./cache')
+
+class dataTable {
+  constructor(datas) {
+    //console.log(datas)
+    this.visibles = datas.visiblesObj //array object
+    this.setColumns = ''
+    this.setTable = ''
+    this.srcScript = '/modules/datatable/datatables.min.js'
+    this.dataTableButtons = '/js/datatable-buttons.js'
+    this.customButtons = ''
+    this.MYMODEL = null
+    this.searchColumns = {}
+    this.relations
+    this.routeName
+    this.types = {}
+    this.roles = myCache.get('ROLES')[datas.zuser.role_id] || {}
+    this.level_approval = this.roles.approvals && this.roles.approvals[datas.routeName] ? this.roles.approvals[datas.routeName] : {}
+    this.hasLevels = Object.keys(this.level_approval).length == 0 ? false : true
+    this.visiblesKey = this.visibles.map((item) => item.key)
+    this.gridType = datas.gridType || 1
+    this.additionalCss = ''
+    if (this.gridType == 1) {
+      this.dataTableScript = '/modules/datatable/normal.js'
+    } else if (this.gridType == 2) {
+      this.dataTableScript = '/modules/datatable/fixed-header.js'
+    } else if (this.gridType == 3) {
+      this.dataTableScript = '/modules/datatable/footer-total.js'
+    } else if (this.gridType == 4) {
+      this.dataTableScript = '/modules/datatable/normal.js'
+      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
+    } else if (this.gridType == 5) {
+      this.dataTableScript = '/modules/datatable/fixed-header.js'
+      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
+    } else if (this.gridType == 6) {
+      this.dataTableScript = '/modules/datatable/footer-total.js'
+      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
+    } else if (this.gridType == 7) {
+      this.dataTableScript = '/modules/datatable/fixed-header-totalnowrap.js'
+      this.additionalCss = `<style>thead > tr > th {white-space: nowrap;}</style>`
+    } else {
+      this.dataTableScript = '/modules/datatable/normal.js'
+    }
+    this.totalFields = []
+  }
+
+  // for filter html
+  set filterMODEL(obj) {
+    this.MYMODEL = obj.MYMODEL
+    this.relations = obj.relations
+    this.routeName = this.MYMODEL.routeName
+    this.types = obj.TYPES
+    this.totalFields = this.visiblesKey.filter((item) => this.MYMODEL.widgets[item] && this.MYMODEL.widgets[item].name == 'number')
+    delete obj.MYMODEL
+    delete obj.relations
+    delete obj.TYPES
+    this.searchColumns = obj
+  }
+  set buttons(html) {
+    return html
+  }
+
+  set buttons2(html) {
+    return html
+  }
+
+  get columns() {
+    if (this.setColumns) return this.setColumns
+    let html = ''
+    if (Array.isArray(this.visibles)) {
+      this.visibles.map((item) => {
+        html += `<th id="data_${item.key}_label">${item.name || ''}</th>`
+      })
+    } else {
+      for (const key in this.visibles) {
+        html += `<th id="data_${key}_label">${this.visibles[key]}</th>`
+      }
+    }
+
+    return html
+  }
+
+  get columnsFilter() {
+    let html = '<tr class="filters">'
+    if (Array.isArray(this.visibles)) {
+      this.visibles.map((item) => {
+        html += `<th id="data_${item.key}_label">${this.searchColumns[item.key]}</th>`
+      })
+    } else {
+      for (const key in this.visibles) {
+        html += `<th id="data_${key}">${this.searchColumns[key]}</th>`
+      }
+    }
+    html += '</tr>'
+    return html
+  }
+
+  /*
+   Create table html header
+   */
+  get table() {
+    if (this.setTable) return this.setTable
+    return `<table id="dataTable" class="display table table-hover table-responsive" style="width:100%">
+            <thead>${this.columns} ${this.columnsFilter}</thead>
+        </table>`
+  }
+
+  get buttons() {
+    let html = this.additionalCss
+    html = `<div class="dataTables_wrapper dt-bootstrap5 no-footer "><div class="dt-buttons btn-group flex-wrap">`
+    if (this.levels.create) {
+      html += `<button title="${LANGUAGE.create_info}" class="btn create gridadd image-button boxy-small dimens2x" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/plus.svg" class="icons-bg-black"> ${LANGUAGE.create}</button>`
+    }
+    if (this.levels.import) {
+      html += `<button title="${LANGUAGE.import_info}" class="btn buttons-copy buttons-html5 copy gridimport boxy-small dimens2x image-button" type="button"><img src="/assets/icons/database-import.svg" class="icons-bg-black"> ${LANGUAGE.import}</span></span></button>`
+    }
+    if (this.levels.lock) {
+      html += `<button title="Lock/Unlock" style="background-color: #332D2D; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-lock" type="button"><img src="/assets/icons/cloud-lock.svg" class="icons-bg-white"> Lock/Unlock</span></span></button>`
+    }
+    if (this.hasLevels) {
+      html += `<button title="Approval" style="background-color: #E4A11B; color:white" class="btn buttons-html5 boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-approval" type="button"><img src="/assets/icons/rubber-stamp.svg" class="icons-bg-white"> Approval</span></span></button>`
+    }
+    html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"> ${LANGUAGE.settings}</button>`
+    html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
+    if (this.levels.export) {
+      html += `<div class="btn-group" role="group">
+                            <button id="dropdownExport" type="button" class="btn dropdown-toggle boxy-small dimens2x image-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <img src="/assets/icons/download.svg" class="icons-bg-black"> ${LANGUAGE.download}
+                            </button>
+                            <div class="dropdown-menu dimens3x" aria-labelledby="dropdownExport">`
+      html += `<a class="dropdown-header">Excel</a>`
+      html += `<a class="dropdown-item export-search-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel</a>`
+      html += `<a class="dropdown-item export-search-raw" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.import}) </a>`
+      html += `<a class="dropdown-item export-all-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.all}) </a>`
+      html += `<hr>`
+      html += `<a class="dropdown-header">PDF</a>`
+      html += `<a class="dropdown-item export-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF </a>`
+      html += `<a class="dropdown-item export-all-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF (${LANGUAGE.all}) </a>`
+      html += `</div>`
+    }
+    html += `</div></div>`
+    return html
+  }
+
+  get buttons2() {
+    let html = this.additionalCss
+    html += `<div class="dataTables_wrapper dt-bootstrap5 no-footer "><div class="dt-buttons btn-group flex-wrap">`
+    if (this.levels.create) {
+      html += `<button title="${LANGUAGE.create_info}" class="btn create gridadd image-button boxy-small dimens2x" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/plus.svg" class="icons-bg-black"></button>`
+    }
+    if (this.levels.import) {
+      html += `<button title="${LANGUAGE.import_info}" class="btn buttons-copy buttons-html5 copy gridimport boxy-small dimens2x image-button" type="button"><img src="/assets/icons/database-import.svg" class="icons-bg-black"> </span></span></button>`
+    }
+    if (this.levels.lock) {
+      html += `<button title="Lock/Unlock" style="background-color: #E4A11B; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-lock" type="button"><img src="/assets/icons/lock-check.svg" class="icons-bg-white"> </span></span></button>`
+    }
+    if (this.levels.delete_all) {
+      html += `<button title="Delete selected data" style="background-color: #DC4C64; color:white" class="btn btn-danger buttons-lock buttons-html5 copy griddeleteall boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-delete-all" type="button"><img src="/assets/icons/http-delete.svg" class="icons-bg-white"> </span></span></button>`
+    }
+    if (this.hasLevels) {
+      html += `<button title="Approval" style="background-color: #E4A11B; color:white" class="btn buttons-html5 boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-approval" type="button"><img src="/assets/icons/rubber-stamp.svg" class="icons-bg-white"> </span></span></button>`
+    }
+    html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"></button>`
+    html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
+    if (this.levels.export) {
+      html += `<div class="btn-group" role="group">
+                            <button id="dropdownExport" type="button" class="btn dropdown-toggle boxy-small dimens2x image-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <img src="/assets/icons/download.svg" class="icons-bg-black">
+                            </button>
+                            <div class="dropdown-menu dimens3x" aria-labelledby="dropdownExport">`
+      html += `<a class="dropdown-header">Excel</a>`
+      html += `<a class="dropdown-item export-search-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel</a>`
+      html += `<a class="dropdown-item export-search-raw" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.import}) </a>`
+      html += `<a class="dropdown-item export-all-prety" href="#"><i class="text-success fa fa-file-excel-o"></i>Excel (${LANGUAGE.all}) </a>`
+      html += `<hr>`
+      html += `<a class="dropdown-header">PDF</a>`
+      html += `<a class="dropdown-item export-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF </a>`
+      html += `<a class="dropdown-item export-all-pdf" href="#"><i class="text-success fa fa-file-excel-o"></i>PDF (${LANGUAGE.all}) </a>`
+      html += `</div>`
+    }
+    html += `</div></div>`
+    return html
+  }
+
+  get scripts() {
+    let script = `<script type="text/javascript" src="${this.srcScript}"></script>`
+    script += `<script>${Util.newLine}`
+    script += `var dataTableFields = ${JSON.stringify(this.visiblesKey, null, 2)};${Util.newLine}`
+    script += `var dataTableTypes = ${JSON.stringify(this.types, null, 2)};${Util.newLine}`
+    script += `var dataTableRoute = "${this.routeName}";${Util.newLine}`
+    script += `var dataTableHasTotalFields = ${JSON.stringify(this.totalFields)};${Util.newLine}`
+    script += `</script>${Util.newLine}`
+    script += `<script type="text/javascript" src="${this.dataTableScript}"></script>${Util.newLine}`
+    if (this.searchColumns.FILTERKEY) {
+      script += `<script>$(function () { setTimeout(function () {  ${this.searchColumns.FILTERKEY} },500) });</script>${Util.newLine}`
+    }
+    script += `<script type="text/javascript" src="${this.dataTableButtons}"></script>${Util.newLine}`
+
+    //additional script for typeahead in grid
+    let typeaheadScript = ''
+    for (let key in this.MYMODEL.widgets) {
+      if (this.MYMODEL.widgets[key].name == 'typeahead') {
+        typeaheadScript += `if($("#${key}").val()){
+        setTimeout(()=>{
+          ajaxPost('/ztypeaheadpost/${this.MYMODEL.table}/${key}', {
+            id: $("#${key}").val()
+          }, function(data) {
+            $("#${key}Typeahead").val(data);$("#${key}Typeahead").change();
+            $("#${key}").change();
+            $("#data_table_${key}").change();
+           
+            })
+          },1500)
+          };
+          `
+      }
+    }
+    if (typeaheadScript) {
+      script += `<script type="text/javascript">$(function () {${typeaheadScript}})</script>${Util.newLine}`
+    }
+    if (this.hasLevels) {
+      //modal-body-approval
+      let APPROVAL_LEVELS = myCache.get('APPROVAL_LEVELS')
+      let approvalButtonHtml = ``
+      for (let item in this.level_approval) {
+        let imageapproval = 'brand-bunpo'
+        if (item == 22) {
+          imageapproval = 'rubber-stamp-off'
+        } else if (item == 2) {
+          imageapproval = 'list-check'
+        } else if (item == 21) {
+          imageapproval = 'rubber-stamp'
+        }
+        let name = APPROVAL_LEVELS.hasOwnProperty(item) ? APPROVAL_LEVELS[item].name : ''
+        let color = APPROVAL_LEVELS.hasOwnProperty(item) ? APPROVAL_LEVELS[item].color : ''
+        approvalButtonHtml += ` <button title="${name}" data-value="${item}" style="background-color: ${color}; color:white" class="btn btn-approval-levels boxy-small dimens2x image-button mb-3" type="button"><img src="/assets/icons/${imageapproval}.svg" class="icons-bg-white"> ${name}</button> `
+      }
+      approvalButtonHtml += `<div class="row"><div class="col-md-10"><textarea class="form-control boxy purple-border" id="zapproval_message" placeholder="tulis alasan..." rows="2"></textarea></div><div class="col-md-1"></div></div>`
+
+      script += `<script type="text/javascript">$(function () {
+    $(".modal-body-approval").html('${approvalButtonHtml}');
+    $(".btn-approval-levels").on("click", function () {
+    ajaxPost('/zapproval-update/${this.MYMODEL.table}', {
+        text : $("#zapproval_message").val(),
+        value : $(this).attr('data-value'),
+        datas: $(".ck").serializeArray()
+    }, function (data) {
+        toastrForm(data);
+        if(data.status == 1) {
+            if(data.dataStatus.length > 0) {
+            data.dataStatus.map((item) => {
+                toastr.error(item);
+            });
+            setTimeout(function() {
+              if(data.status ==1) {
+                location.href='';
+            }
+            },4000);
+        } else {
+            if(data.status ==1) {
+                location.href='';
+            }
+        }
+        }
+    })
+})
+})</script>${Util.newLine}`
+    }
+
+    script += `<script type="text/javascript">
+$(function () {
+    $("#ck_all").on('click', function () {
+      if($(this).is(':checked')) {
+          $(".ck").prop('checked',true)
+      } else {
+          $(".ck").prop('checked',false)
+      }
+    })
+    
+$(".btn-save-lock").on("click", function () {
+    ajaxPost('/zlock-unlock/${this.MYMODEL.table}', {
+        type : 1,
+        datas: $(".ck").serializeArray()
+    }, function (data) {
+        toastrForm(data);
+        if(data.status ==1) {
+            location.href='';
+        }
+    })
+})
+
+$(".btn-save-unlock").on("click", function () {
+    ajaxPost('/zlock-unlock/${this.MYMODEL.table}', {
+        type : 0,
+        datas: $(".ck").serializeArray()
+    }, function (data) {
+        toastrForm(data);
+        if(data.status ==1) {
+            location.href='';
+        }
+    })
+})
+
+$(".btn-save-delete-selected").on("click", function () {
+    if(window.confirm("sure to delete selected data ?")) {
+        ajaxPost('/zdeleted-selected/${this.MYMODEL.table}', {
+            type : 1,
+            datas: $(".ck").serializeArray()
+        }, function (data) {
+            toastrForm(data);
+            if(data.status ==1) {
+                location.href='';
+            }
+        })
+    }
+})
+
+$("#zgrid_default_type").val(${this.gridType});
+
+})</script>${Util.newLine}`
+
+    return script
+  }
+}
+
+module.exports = dataTable