zet-lib 1.3.39 → 1.3.41

package/lib/views/generatorjs.ejs

@@ -1,928 +1,928 @@
-<!-- set to localStorage -->
-<script>
-  var datas = {}
-  var is_approval = '<%- approvalDatas.is_approval %>'
-  var sorting = '<%- sorting%>'
-</script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/ace.js"></script>
-<script>
-  var others = {}
-  var container_time = ''
-  //end container
-  var editor_router = ace.edit('router')
-  editor_router.getSession().setMode('ace/mode/javascript')
-
-  var editor_index_ejs = ace.edit('index_ejs')
-  editor_index_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_index_ejs.setValue(datas.index_ejs);
-
-  var editor_indexcss_ejs = ace.edit('indexcss_ejs')
-  editor_indexcss_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_indexcss_ejs.setValue(datas.indexcss_ejs);
-
-  var editor_indexjs_ejs = ace.edit('indexjs_ejs')
-  editor_indexjs_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_indexjs_ejs.setValue(datas.indexjs_ejs);
-
-  var editor_form_ejs = ace.edit('form_ejs')
-  editor_form_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_form_ejs.setValue(datas.form_ejs);
-
-  var editor_create_ejs = ace.edit('create_ejs')
-  editor_create_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_create_ejs.setValue(datas.create_ejs);
-
-  var editor_createjs_ejs = ace.edit('createjs_ejs')
-  editor_createjs_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_createjs_ejs.setValue(datas.createjs_ejs);
-
-  var editor_update_ejs = ace.edit('update_ejs')
-  editor_update_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_update_ejs.setValue(datas.update_ejs);
-
-  var editor_updatejs_ejs = ace.edit('updatejs_ejs')
-  editor_updatejs_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_updatejs_ejs.setValue(datas.updatejs_ejs);
-
-  var editor_import_ejs = ace.edit('import_ejs')
-  editor_import_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_import_ejs.setValue(datas.import_ejs);
-
-  var editor_importjs_ejs = ace.edit('importjs_ejs')
-  editor_importjs_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_importjs_ejs.setValue(datas.importjs_ejs);
-
-  var editor_view_ejs = ace.edit('view_ejs')
-  editor_view_ejs.getSession().setMode('ace/mode/ejs')
-  //editor_view_ejs.setValue(datas.view_ejs);
-</script>
-
-<script>
-  var loadForm = function () {
-    ajaxPost(
-      '/<%- routeName%>/load-form',
-      {
-        table: $('#table').val(),
-      },
-      function (html) {
-        var obj = html.data
-        editor_router.setValue(obj.router)
-        editor_index_ejs.setValue(obj.index_ejs)
-        editor_indexcss_ejs.setValue(obj.indexcss_ejs)
-        editor_indexjs_ejs.setValue(obj.indexjs_ejs)
-        editor_form_ejs.setValue(obj.form_ejs)
-        editor_create_ejs.setValue(obj.create_ejs)
-        editor_createjs_ejs.setValue(obj.createjs_ejs)
-        editor_update_ejs.setValue(obj.update_ejs)
-        editor_updatejs_ejs.setValue(obj.updatejs_ejs)
-        editor_import_ejs.setValue(obj.import_ejs)
-        editor_importjs_ejs.setValue(obj.importjs_ejs)
-        editor_view_ejs.setValue(obj.view_ejs)
-      }
-    )
-  }
-
-  function toName(str, separator) {
-    if (str && str.length) {
-      separator = separator || '_'
-      str = str.trim()
-      return str.replace(/\s+/g, separator).toLowerCase()
-    }
-  }
-
-  function click_setting(elem) {
-    var name = elem.data('name'),
-      label = elem.data('label'),
-      table = $('#table').val(),
-      caption = elem.data('type')
-    $('#modal_setting_label').html(`Setting ${label} <span class="badge bg-primary text-dark">${caption}</span>`)
-    $('#body_content').html('Loading...')
-    $('body').find('#delete_field').attr('data-name', name)
-    ajaxPost(
-      '/<%- routeName%>/setting_field',
-      {
-        name: name,
-        table: table,
-      },
-      function (html) {
-        $('#body_content').html(html)
-        let val = 'id'
-        if ($('#relation_table').length) {
-          dropdownRelations('relation_table', 'relation_name', 'relation_concat', $('#relation_table').data('value'), $('#relation_name').data('value'), $('#relation_concat').data('value'))
-        }
-        if ($('#dragdrop_table').length) {
-          dropdownRelations('dragdrop_table', 'dragdrop_name', 'dragdrop_concat', $('#dragdrop_table').data('value'), $('#dragdrop_name').data('value'), $('#dragdrop_concat').data('value'))
-        }
-        if ($('#typeahead_table').length) {
-          val = $('body').find('#typeahead_concat').attr('value')
-          dropdownRelations('typeahead_table', 'typeahead_name', 'typeahead_concat', $('#typeahead_table').data('value'), $('#typeahead_name').data('value'), val)
-        }
-        if ($('#table_table').length) {
-          dropdownRelations('table_table', 'relation_name', '', $('#table_table').data('value'))
-        }
-        if ($('#multi_line_editor_table').length) {
-          dropdownRelations('multi_line_editor_table', 'relation_name', '', $('#multi_line_editor_table').data('value'))
-          $('.editor').froalaEditor({ height: 400 })
-          var samp = $('<samp></samp>')
-          var text = `<p><h3>List Fields :</h3></p>`
-          text += getFieldsFromTable($('#multi_line_editor_table').val(), name)
-          $('#multi_line_editor_table').closest('div').append(samp)
-          samp.html(text)
-
-          $('#multi_line_editor_table').on('change', function () {
-            var text = `<p><h3>List Fields :</h3></p>`
-            text += getFieldsFromTable($(this).val(), name)
-            samp.html(text)
-          })
-        }
-        if ($('#dropdown_multi_table').length) {
-          dropdownRelations('dropdown_multi_table', 'dropdown_multi_name', '', $('#dropdown_multi_table').data('value'), $('#dropdown_multi_name').data('value'))
-        }
-      }
-    )
-    $('#modal_setting').modal('show')
-  }
-
-  function dropdownRelations(elemTable, elemField, elemConcat, value, fieldValue, concatValue) {
-    elemTable = elemTable || 'relationtable'
-    elemField = elemField || 'relationfield'
-    elemConcat = elemConcat || 'relationconcat'
-    value = value || ''
-    fieldValue = fieldValue || ''
-    concatValue = concatValue || 'id'
-
-    let html = ''
-    let elementTable = $('body').find('#' + elemTable)
-    if (!elementTable.length) {
-      return
-    }
-    let tableHtml = ''
-    for (let key in ZFIELDS) {
-      let selected = value == key ? ' selected ' : ''
-      tableHtml += `<option value="${key}" ${selected}>${ZFIELDS[key].name}</option>`
-    }
-    elementTable.html(tableHtml)
-    let currentRelation = elementTable.val()
-    let elementField = $('body').find('#' + elemField)
-    //var concatValue = "id";
-    for (let key in ZFIELDS[currentRelation].labels) {
-      let selected = fieldValue == key ? ' selected ' : ''
-      //concatValue = fieldValue == key ? key : "id";
-      html += `<option value="${key}" ${selected}>${ZFIELDS[currentRelation].labels[key]}</option>`
-    }
-    elementField.html(html)
-    $('#' + elemConcat).val(concatValue)
-    $('#' + elemConcat).attr('value', concatValue)
-  }
-
-  function getFieldsFromTable(table, name) {
-    let html = `<ul class="list-group">`
-    let nots = ['id', 'company_id', 'created_by', 'created_at', 'updated_by', 'updated_at']
-    for (let key in ZFIELDS[table].labels) {
-      if (nots.indexOf(key) <= -1) {
-        html += `<li class="list-group-item"><button onclick="copyToClipboard('[[[${key}_${name}]]]');" type="button" class="btn-copy-code btn btn-outline-grey btn-sm px-2 waves-effect" title="Copy Text" ><i class="fa fa-copy mr-1"></i> ${key} </button>  <input type="text"  name="${name}[fields][${key}_${name}]" value="${ZFIELDS[table].labels[key]}"></li>`
-      }
-    }
-    html += `</ul>`
-    return html
-  }
-
-  $(function () {
-    let counter = $('.divtabs').length || 1
-    function selectTable(table) {
-      if (!table) return false
-      ajaxPost('/<%- routeName%>/fields', { table: table }, function (json) {
-        $('#divfields').show()
-        $('.card-script').show()
-        $('#results').hide()
-        $('#contentfields').html(json.html)
-        $('#tabs').html(json.tabview)
-        $('#divtablist').html(json.tabBox)
-        counter = json.count
-        $('ol.mydragable').sortable({
-          group: 'mydragable',
-          nested: false,
-          //pullPlaceholder: false,
-          isValidTarget: function ($item, container) {
-            if ($item.hasClass('add-container')) {
-              return false
-            } else if ($item.hasClass('icon-trash')) {
-              return false
-            } else {
-              return true
-            }
-          },
-          onMousedown: function ($item, _super, event) {
-            if ($(event.target).is('i')) {
-              let elem = $(event.target)
-              //console.log(elem.attr("class"))
-              if (elem.hasClass('modal_setting')) {
-                click_setting(elem)
-              }
-              return false
-            }
-            return true
-          },
-          onDrop: function ($item, container, _super) {
-            //class container-nav
-            let time = new Date().getTime()
-            let $itemclass = $item.attr('class')
-            let getidname = $item.parents().attr('id') || ''
-            let iname = $item.find('input[type=text]').attr('data-name')
-            let containertype = $item.parents().data('name')
-            let newname = getidname ? iname + '___' + getidname : iname
-            let leftright = $item.find('input[type=hidden]').attr('name')
-            //container-box
-            if ($itemclass.indexOf('container-nav') > -1) {
-              let parentId = $item.parents().parents()
-              $item.find('input[type=text]').attr('name', newname)
-              $item.find('input[type=hidden]').attr('name', containertype)
-            } else {
-              $item.find('input[type=text]').attr('name', newname)
-              $item.find('input[type=hidden]').attr('name', containertype)
-            }
-            _super($item, container)
-          },
-        })
-
-        //tab draggable
-        $('ul.sortable-list').sortable()
-        //end tab draggable
-        loadForm()
-      })
-    }
-
-    function nextDragged() {
-      setTimeout(() => {
-        ajaxPost(
-          '/<%- routeName%>/tab-draggable',
-          {
-            tabs: $('.sortable-list')
-              .find('input[name="tabs[]"]')
-              .each((index, elm) => $(elm).val()),
-          },
-          () => location.href
-        )
-      }, 1000)
-    }
-
-    function buildOneRow(columncount) {
-      let html = ``
-      let time = new Date().getTime()
-      let col_md = `col-md-${12 / columncount}`
-      let container_time = `container_${time}`
-      html += `<li class="container-nav"><i class="fa fa-arrows icon-float"></i><div class="row  mt-1 mb-1">`
-      for (let i = 1; i <= columncount; i++) {
-        html += `<div class="${col_md}" style="background-color: rgba(0,0,0,.03)" ><ol class="divboxlittle container-box"><li><i data-container="${container_time}" data-id="${i}" data-split="${columncount}" data-column="ONE_COLUMN" class="fa fa-plus-circle fa-2x add-container text-success"></i></li></ol> </div>`
-      }
-      html += `</div></li>`
-      return html
-    }
-
-    $('#modal-container-save').on('click', function () {
-      let columncount = $('#column-count').val()
-      let html = buildOneRow(columncount)
-      let length = $('ol').length
-      $('ol')
-        .eq(length - 1)
-        .append(html)
-      $('.btn-modal-container-close').click()
-    })
-
-    $('body').on('click', '.add-container', function () {
-      parentContainer = $(this).closest('ol')
-      let options = ''
-      let ols = $('ol.mydragable > li')
-      let myObj = {}
-      ols.each(function () {
-        let span = $(this).find('div').find('div').find('span')
-        let name = span.data('name')
-        if (name) {
-          myObj[name] = $(this)
-        }
-      })
-      for (let key in myObj) {
-        options += `<option value="${key}">${key}</option>`
-      }
-      fieldsObjectInput = myObj
-      $('#container-select').html(options)
-      $('#modal_container_into').modal('show')
-    })
-
-    $('#moveintocontainer').on('click', function () {
-      let myval = $('#container-select').val()
-      if (myval) {
-        let myelement = fieldsObjectInput[myval]
-        //let myname = `${container_time}___${container_column}___${container_split}___${container_index}`;
-        myelement.find('input[type=hidden]').attr('name', 'ONE_COLUMN')
-        myelement.appendTo(parentContainer)
-      }
-      $('.btncontainer-close').click()
-      setTimeout(function () {
-        saveContainer()
-      }, 2000)
-    })
-
-    $('#table').on('change', function () {
-      location.href = '/<%- routeName%>?table=' + $(this).val()
-      loadForm()
-    })
-
-    $('#generate').on('click', function () {
-      ajaxPost(
-        '/<%- routeName%>',
-        {
-          table: $('#table').val(),
-          route: $('#route').val(),
-        },
-        function (data) {
-          if (data.status == 0) {
-            $('#results').hide()
-            toastr.error(data.message, data.title)
-          } else {
-            $('#results').show()
-            toastr.success(data.title, data.message)
-            $('#resultsbody').html(data.datas)
-          }
-          $('#divfields').hide()
-        }
-      )
-    })
-
-    $('#add').on('click', function () {
-      var tabname = $('#tabname')
-      var tabsvalue = $('#tabsvalue')
-      if (tabname.val() == '') {
-        alert('tab name is empty!')
-        return false
-      }
-      $('#tabs').append("<div class='divtabs'> " + counter + '. ' + tabname.val() + " <input type='hidden' name='tabs[]' value='" + tabname.val() + "' /> <button type='button'  onclick='$(this).parent().remove();' class='trashtab'><i class='fas fa-trash'></i> </button></div><br>")
-      tabname.val('')
-      $('#savetab').click()
-      counter++
-    })
-
-    $('#savetab').on('click', function () {
-      ajaxPost('/<%- routeName%>/tabs', $('#formgenerator').serializeArray(), function (data) {
-        if (data.status == 1) location.href = ''
-        else alert(data.title)
-      })
-    })
-
-    function saveFields() {
-      let approvers = $("input[name='zapprovals[approvers][]']")
-        .map(function () {
-          return $(this).val()
-        })
-        .get()
-      let knowings = $("input[name='zapprovals[knowings][]']")
-        .map(function () {
-          return $(this).val()
-        })
-        .get()
-      others = fixContainer()
-      ajaxPost(
-        '/<%- routeName%>/save_and_generate',
-        {
-          details: $('#formfields').serializeArray(),
-          table: $('#table').val(),
-          hardcode_grid: null,
-          router: editor_router.getValue(),
-          index_ejs: editor_index_ejs.getValue(),
-          indexcss_ejs: editor_indexcss_ejs.getValue(),
-          indexjs_ejs: editor_indexjs_ejs.getValue(),
-          form_ejs: editor_form_ejs.getValue(),
-          create_ejs: editor_create_ejs.getValue(),
-          createjs_ejs: editor_createjs_ejs.getValue(),
-          update_ejs: editor_update_ejs.getValue(),
-          updatejs_ejs: editor_updatejs_ejs.getValue(),
-          import_ejs: editor_import_ejs.getValue(),
-          importjs_ejs: editor_importjs_ejs.getValue(),
-          view_ejs: editor_view_ejs.getValue(),
-          is_approval: is_approval,
-          template: $('#template').val(),
-          approval_title: $('#approval_title').val(),
-          type: $('#type').val(),
-          approvers: approvers,
-          knowings: knowings,
-          others: JSON.stringify(others),
-          joins: $('#formjoin').serializeArray(),
-        },
-        function (data) {
-          if (data.status == 0) {
-            toastr.error(data.message, data.title)
-          } else {
-            toastr.success(data.title, data.message)
-          }
-        }
-      )
-    }
-
-    $('#save').on('click', function () {
-      saveFields()
-    })
-    $('#save_script').on('click', function () {
-      saveFields()
-    })
-
-    $('.btn-reset').on('click', function () {
-      if (window.confirm('Reset to factory settings ?')) {
-        ajaxPost(
-          '/<%- routeName%>/reset',
-          {
-            table: $('#table').val(),
-          },
-          function (data) {
-            if (data.status == 0) {
-              toastr.error(data.message, data.title)
-            } else {
-              toastr.success(data.title, data.message)
-              location.href = ''
-            }
-          }
-        )
-      }
-    })
-
-    $('.btn-minify').on('click', function () {
-      if (window.confirm('Minify all views in one line make your website faster ?')) {
-        ajaxPost('/<%- routeName%>/minify', {}, function (data) {
-          if (data.status == 0) {
-            toastr.error(data.message, data.title)
-          } else {
-            toastr.success(data.title, data.message)
-          }
-        })
-      }
-    })
-
-    $('.btn-generate-assets').on('click', function () {
-      if (window.confirm('Replace javascript assets with this one ?')) {
-        ajaxPost('/<%- routeName%>/generate-assets', {}, function (data) {
-          if (data.status == 0) {
-            toastr.error(data.message, data.title)
-          } else {
-            toastr.success(data.title, data.message)
-          }
-        })
-      }
-    })
-
-    selectTable($('#table').val())
-    function changeUrl(title, url) {
-      var origin = window.location.origin
-      if (typeof history.pushState != 'undefined') {
-        var obj = { Title: title, Url: origin + '/<%- routeName%>?table=' + url }
-        window.history.pushState(obj, obj.Title, obj.Url)
-      } else {
-        alert('Browser does not support HTML5.')
-      }
-    }
-
-    $('#modal-table').on('change', function () {
-      $('#modal-route').val(toName($(this).val()))
-    })
-    $('#modal-table').on('input', function () {
-      $('#modal-route').val(toName($(this).val()))
-    })
-    $('#delete_module').on('click', function () {
-      if (window.confirm('sure to delete ?')) {
-        ajaxDelete('/<%- routeName%>/delete-table', { table: $('#table').val() }, function (data) {
-          toastrForm(data)
-          if (data.status == 1) {
-            location.href = '/<%- routeName%>'
-          }
-        })
-      }
-    })
-
-    $('#modal-save').on('click', function () {
-      let reservedWord = ['order', 'left', 'right', 'by', 'zrole', 'role', 'zuser', 'zcompany_access']
-      let moduleName = $('#modal-table').val()
-      moduleName = moduleName.toLowerCase()
-      let arrModules = reservedWord.filter((item) => item == moduleName)
-      if (arrModules.length) {
-        toastrForm({
-          status: 0,
-          title: 'Error Module Name reserved',
-          message: 'Please change your module name',
-        })
-        return false
-      }
-      ajaxPost('/<%- routeName%>', { name: $('#modal-table').val(), route: $('#modal-route').val() }, function (data) {
-        toastrForm(data)
-        if (data.status == 1) {
-          location.href = '/<%- routeName%>?table=' + $('#modal-route').val()
-        }
-      })
-    })
-
-    $('#modal-add').on('click', function () {
-      let others = fixContainer()
-      ajaxPost(
-        '/<%- routeName%>/add_field',
-        {
-          table: $('#table').val(),
-          name: $('#modal_name').val(),
-          type: $('#modal_type').val(),
-          position: $('#modal_position').val(),
-          relationtable: $('#relationtable').val(),
-          relationfield: $('#relationfield').val(),
-          relationconcat: $('#relationconcat').val(),
-          relationfields: $('#relationfields').val(),
-          others: JSON.stringify(others),
-        },
-        function (data) {
-          $(this).show()
-          toastrForm(data)
-          if (data.status == 1) {
-            var type = $('#modal_type').val()
-            location.href = ''
-          }
-        }
-      )
-    })
-
-    $('body').on('click', '.modal_setting', function () {
-      click_setting($(this))
-    })
-
-    $('body').on('click', '.select-plus', function () {
-      let name = $(this).data('name')
-      let item = $(this).data('item')
-      let num = $('.group-select').length || 0
-      html = `<div class="input-group group-select"><div class="input-group-prepend">
-        <input type="number" class="form-control cvalue" placeholder="Value"  name="${name}[${item}][${num}][value]">
-        <input type="text" class="form-control clabel" placeholder="Label" name="${name}[${item}][${num}][label]">
-        <span class="input-group-text trash-select" data-name="${name}" data-item="${item}"><i class="fa fa-trash text-danger"></i> </span>
-        </div></div>`
-
-      $('.divselect').append(html)
-    })
-
-    $('body').on('click', '.trash-select', function () {
-      let name = $(this).data('name')
-      let item = $(this).data('item')
-      $(this).closest('.group-select').remove()
-      $('.group-select').each(function (index, value) {
-        $(this)
-          .closest('div')
-          .find('input.cvalue')
-          .attr('name', name + '[' + item + '][' + index + '][value]')
-        $(this)
-          .closest('div')
-          .find('input.clabel')
-          .attr('name', name + '[' + item + '][' + index + '][label]')
-      })
-    })
-
-    $('body').on('click', '#modal-setting-save', function () {
-      let datas = $('#modal-setting-form').serializeArray()
-      ajaxPost('/<%- routeName%>/save_setting?table=' + $('#table').val(), datas, function (data) {
-        toastrForm(data)
-        if (data.status == 1) {
-          $('#modal_setting').modal('hide')
-        }
-      })
-    })
-
-    $('body').on('change', '#modal_type', function () {
-      if ($(this).val() == 'relation') {
-        $('.divrelation').show()
-        $('.divrelationfield').show()
-        $('.divconcat').show()
-        $('.divfield').hide()
-        dropdownRelations()
-      } else if ($(this).val() == 'table') {
-        $('.divrelation').show()
-        $('.divrelationfield').hide()
-        $('.divconcat').hide()
-        $('.divfield').hide()
-        dropdownRelations()
-      } else if ($(this).val() == 'multi_line_editor') {
-        $('.divrelation').show()
-        $('.divrelationfield').hide()
-        $('.divconcat').hide()
-        $('.divfield').hide()
-        dropdownRelations()
-      } else if ($(this).val() == 'dropdown_multi') {
-        $('.divrelation').show()
-        $('.divrelationfield').show()
-        $('.divconcat').show()
-        $('.divfield').hide()
-        dropdownRelations()
-      } else if ($(this).val() == 'dropdown_chain') {
-        $('.divrelation').show()
-        $('.divrelationfield').show()
-        $('.divconcat').show()
-        $('.divfield').show()
-        dropdownRelations()
-      } else if ($(this).val() == 'typeahead') {
-        $('.divrelation').show()
-        $('.divrelationfield').show()
-        $('.divconcat').show()
-        $('.divfield').hide()
-        dropdownRelations()
-      } else if ($(this).val() == 'dragdrop') {
-        $('.divrelation').show()
-        $('.divrelationfield').show()
-        $('.divconcat').show()
-        $('.divfield').hide()
-        dropdownRelations()
-      } else {
-        $('.divrelation').hide()
-        $('.divconcat').hide()
-        $('.divfield').hide()
-      }
-    })
-
-    $('body').on('click', '#delete_field', function () {
-      let name = $(this).data('name')
-      if (window.confirm('sure delete ? ')) {
-        ajaxDelete('/<%- routeName%>/delete_field', { name: name, table: $('#table').val() }, function (data) {
-          toastrForm(data)
-          if (data.status == 1) {
-            location.href = ''
-          }
-        })
-      }
-    })
-
-    $('body').on('click', '.edittab', function () {
-      $('body').find('#edittab').val($(this).data('name'))
-      $('body').find('#modal-tab-save').attr('data-id', $(this).data('id'))
-    })
-
-    $('body').on('click', '#modal-tab-save', function () {
-      ajaxPost(
-        '/<%- routeName%>/tab_rename',
-        {
-          id: $(this).data('id'),
-          name: $('body').find('#edittab').val(),
-          table: $('#table').val(),
-        },
-        function (data) {
-          toastrForm(data)
-          if (data.status == 1) {
-            location.href = ''
-          }
-        }
-      )
-    })
-
-    $('body').on('change', '#relationtable', function () {
-      dropdownRelations('relationtable', 'relationfield', 'relationconcat', $(this).val(), '', 'CONCAT(' + $('body').find('#relationfield').val() + ')')
-    })
-
-    $('body').on('change', '#relation_table', function () {
-      dropdownRelations('relation_table', 'relation_name', 'relation_concat', $(this).val(), '', 'CONCAT(' + $('body').find('#relation_field').val() + ')')
-    })
-
-    $(document).on('change', '#dragdrop_table', function () {
-      dropdownRelations('dragdrop_table', 'dragdrop_name', 'dragdrop_concat', $(this).val(), '', 'CONCAT(' + $('body').find('#relation_field').val() + ')')
-    })
-
-    $('body').on('change', '#relation_name', function () {
-      $('#relation_concat').val('CONCAT(' + $(this).val() + ')')
-    })
-
-    $('body').on('change', '#dragdrop_name', function () {
-      $('#dragdrop_concat').val('CONCAT(' + $(this).val() + ')')
-    })
-
-    $('body').on('change', '#typeahead_table', function () {
-      dropdownRelations('typeahead_table', 'typeahead_name', 'typeahead_concat', $(this).val())
-    })
-    $('body').on('change', '#dropdown_multi_table', function () {
-      dropdownRelations('dropdown_multi_table', 'dropdown_multi_name', 'dropdown_multi_concat', $(this).val())
-    })
-    $('body').on('change', '#multi_line_editor_table', function () {
-      dropdownRelations('multi_line_editor_table', 'multi_line_editor_name', 'multi_line_editor_concat', $(this).val())
-    })
-    $('body').on('change', '#dropdown_chain_table', function () {
-      dropdownRelations('dropdown_chain_table', 'dropdown_chain_name', 'dropdown_chain_concat', $(this).val())
-    })
-
-    $('body').on('change', '#relationfield', function () {
-      $('#relationconcat').val('CONCAT(' + $(this).val() + ')')
-    })
-    $('body').on('change', '#relationname', function () {
-      $('#relation_concat').val('CONCAT(' + $(this).val() + ')')
-    })
-    $('body').on('change', '#typeahead_name', function () {
-      $('#typeahead_concat').val('CONCAT(' + $(this).val() + ')')
-    })
-    $('body').on('change', '#dropdown_multi_name', function () {
-      $('#dropdown_multi_concat').val('CONCAT(' + $(this).val() + ')')
-    })
-    $('body').on('change', '#dropdown_chain_name', function () {
-      $('#dropdown_chain_concat').val('CONCAT(' + $(this).val() + ')')
-    })
-    $('#is_approval').on('switchChange.bootstrapSwitch', function (event, state) {
-      if (state === true) {
-        $('.divzapprovals').show()
-        is_approval = 1
-      } else {
-        $('.divzapprovals').hide()
-        is_approval = 0
-      }
-    })
-
-    $('.export-file').on('click', function (e) {
-      e.preventDefault()
-      let table = $('#route').val()
-      ajaxPost(
-        '/zgenerator/export',
-        {
-          table: table,
-        },
-        function (data) {
-          toastrForm(data)
-          if (data.status == 1) {
-            location.href = `/zdownload/zgenerator/${table}`
-          }
-        }
-      )
-    })
-
-    $('#submit-import').on('click', function () {
-      $('#modal-form-file').submit()
-    })
-    submitForm('modal-form-file', '', '', function (data) {
-      toastrForm(data)
-      if (data.status == 1) {
-        setTimeout(function () {
-          location.href = `?table=${data.table}`
-        }, 1000)
-      }
-    })
-  })
-
-  $('.btn-test').on('click', function () {
-    fixContainer()
-  })
-
-  function fixContainer() {
-    let length = $('.container-nav').length
-    let obj = {}
-    let getId = ''
-    if (length) {
-      $ols = $('ol.mydragable')
-      $ols.each(function () {
-        getId = $ols.attr('id') ? $ols.attr('id') : ''
-        let name = $(this).data('name')
-        if (!Object.prototype.hasOwnProperty.call(obj, name)) {
-          obj[name] = []
-        }
-        let lis = $(this).children('li')
-        lis.each(function () {
-          let className = $(this).attr('class') ? $(this).attr('class') : ''
-          //console.log(`className  ${className}`)
-          if (className == 'container-nav') {
-            let parent_container = $(this).parent('ol.mydragable')
-            let parent_container_id = parent_container.attr('id') || ''
-            let parent_container_name = parent_container.data('name') || ''
-            let child_container = $(this)
-            child_container.attr('data-name', parent_container.data('name')).attr('id', parent_container.attr('id'))
-            let arr = []
-            let $containerboxs = $(this).find('.container-box')
-            let $containerboxsLength = $containerboxs.length
-            for (let i = 0; i < $containerboxsLength; i++) {
-              //console.log(`$containerboxsLength ${i}`)
-              let item = []
-              let $lis = $containerboxs.eq(i).find('li')
-              let $lisLength = $lis.length
-              for (let x = 1; x < $lisLength; x++) {
-                let $name = ''
-                if (parent_container_id) {
-                  let getname = $lis.eq(x).find('input[type=hidden]').val()
-                  $name = `${getname}___${parent_container_id}`
-                  //fixed in tab
-                  $lis.eq(x).find('input[type=text]').attr('name', $name)
-                  $lis.eq(x).find('input[type=hidden]').attr('name', name)
-                } else {
-                  $name = $lis.eq(x).find('input[type=text]').attr('data-name')
-                  $lis.eq(x).find('input[type=text]').attr('name', $name)
-                  $lis.eq(x).find('input[type=hidden]').attr('name', name)
-                }
-                item.push($name)
-              }
-              arr.push(item)
-            }
-            obj[name].push(arr)
-          } else {
-            obj[name].push($(this).find('input[type=text]').attr('name'))
-          }
-        })
-      })
-    }
-    others = obj
-    return obj
-  }
-</script>
-
-<script>
-  $(function () {
-    $('.layout21').on('click', function (e) {
-      e.preventDefault()
-      if (sorting == '[2,1]') {
-      } else {
-        let table = $('#table').val()
-        ajaxPost(
-          '/<%- routeName%>/sorting',
-          {
-            table: table,
-            sorting: '[2,1]',
-          },
-          function (dt) {
-            location.href = ''
-          }
-        )
-      }
-    })
-
-    $('.layout12').on('click', function (e) {
-      e.preventDefault()
-      if (sorting == '[1,2]') {
-      } else {
-        let table = $('#table').val()
-        ajaxPost(
-          '/<%- routeName%>/sorting',
-          {
-            table: table,
-            sorting: '[1,2]',
-          },
-          function (dt) {
-            location.href = ''
-          }
-        )
-      }
-    })
-
-    $("#modal-joins-save").on("click", function (e) {
-      let table_join = $('#select_module_joins').val();
-      let table = $('#table').val()
-      if (table == table_join) {
-        toastr.error("Your selected module is equal with current module");
-        return;
-      }
-      ajaxPost(
-        '/<%- routeName%>/joins',
-        {
-          table_join: table_join,
-          table: table,
-        },
-        function (dt) {
-          toastrForm(dt);
-          if (dt.status == 1) {
-            $("#joinlist").html(dt.html);
-            $("#closejoin").click();
-          }
-        }
-      )
-    })
-
-    loadJoins();
-  })
-
-  function saveContainer() {
-    others = fixContainer()
-    ajaxPost(
-      '/<%- routeName%>/add_container',
-      {
-        table: $('#table').val(),
-        others: JSON.stringify(others),
-      },
-      function (dt) { }
-    )
-  }
-
-  function loadJoins() {
-    ajaxPost(
-      '/<%- routeName%>/load-joins',
-      {
-        table: $('#table').val(),
-      },
-      function (dt) {
-        if (dt.status == 1) {
-          $("#joinlist").html(dt.html);
-        }
-      }
-    )
-  }
-
-  function removeJoins(table_join) {
-    if (window.confirm('Sure to delete ?')) {
-      ajaxPost(
-        '/<%- routeName%>/remove-joins',
-        {
-          table: $('#table').val(),
-          table_join: table_join
-        },
-        function (dt) {
-          location.reload();
-        }
-      )
-    }
-  }
+<!-- set to localStorage -->
+<script>
+  var datas = {}
+  var is_approval = '<%- approvalDatas.is_approval %>'
+  var sorting = '<%- sorting%>'
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/ace.js"></script>
+<script>
+  var others = {}
+  var container_time = ''
+  //end container
+  var editor_router = ace.edit('router')
+  editor_router.getSession().setMode('ace/mode/javascript')
+
+  var editor_index_ejs = ace.edit('index_ejs')
+  editor_index_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_index_ejs.setValue(datas.index_ejs);
+
+  var editor_indexcss_ejs = ace.edit('indexcss_ejs')
+  editor_indexcss_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_indexcss_ejs.setValue(datas.indexcss_ejs);
+
+  var editor_indexjs_ejs = ace.edit('indexjs_ejs')
+  editor_indexjs_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_indexjs_ejs.setValue(datas.indexjs_ejs);
+
+  var editor_form_ejs = ace.edit('form_ejs')
+  editor_form_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_form_ejs.setValue(datas.form_ejs);
+
+  var editor_create_ejs = ace.edit('create_ejs')
+  editor_create_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_create_ejs.setValue(datas.create_ejs);
+
+  var editor_createjs_ejs = ace.edit('createjs_ejs')
+  editor_createjs_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_createjs_ejs.setValue(datas.createjs_ejs);
+
+  var editor_update_ejs = ace.edit('update_ejs')
+  editor_update_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_update_ejs.setValue(datas.update_ejs);
+
+  var editor_updatejs_ejs = ace.edit('updatejs_ejs')
+  editor_updatejs_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_updatejs_ejs.setValue(datas.updatejs_ejs);
+
+  var editor_import_ejs = ace.edit('import_ejs')
+  editor_import_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_import_ejs.setValue(datas.import_ejs);
+
+  var editor_importjs_ejs = ace.edit('importjs_ejs')
+  editor_importjs_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_importjs_ejs.setValue(datas.importjs_ejs);
+
+  var editor_view_ejs = ace.edit('view_ejs')
+  editor_view_ejs.getSession().setMode('ace/mode/ejs')
+  //editor_view_ejs.setValue(datas.view_ejs);
+</script>
+
+<script>
+  var loadForm = function () {
+    ajaxPost(
+      '/<%- routeName%>/load-form',
+      {
+        table: $('#table').val(),
+      },
+      function (html) {
+        var obj = html.data
+        editor_router.setValue(obj.router)
+        editor_index_ejs.setValue(obj.index_ejs)
+        editor_indexcss_ejs.setValue(obj.indexcss_ejs)
+        editor_indexjs_ejs.setValue(obj.indexjs_ejs)
+        editor_form_ejs.setValue(obj.form_ejs)
+        editor_create_ejs.setValue(obj.create_ejs)
+        editor_createjs_ejs.setValue(obj.createjs_ejs)
+        editor_update_ejs.setValue(obj.update_ejs)
+        editor_updatejs_ejs.setValue(obj.updatejs_ejs)
+        editor_import_ejs.setValue(obj.import_ejs)
+        editor_importjs_ejs.setValue(obj.importjs_ejs)
+        editor_view_ejs.setValue(obj.view_ejs)
+      }
+    )
+  }
+
+  function toName(str, separator) {
+    if (str && str.length) {
+      separator = separator || '_'
+      str = str.trim()
+      return str.replace(/\s+/g, separator).toLowerCase()
+    }
+  }
+
+  function click_setting(elem) {
+    var name = elem.data('name'),
+      label = elem.data('label'),
+      table = $('#table').val(),
+      caption = elem.data('type')
+    $('#modal_setting_label').html(`Setting ${label} <span class="badge bg-primary text-dark">${caption}</span>`)
+    $('#body_content').html('Loading...')
+    $('body').find('#delete_field').attr('data-name', name)
+    ajaxPost(
+      '/<%- routeName%>/setting_field',
+      {
+        name: name,
+        table: table,
+      },
+      function (html) {
+        $('#body_content').html(html)
+        let val = 'id'
+        if ($('#relation_table').length) {
+          dropdownRelations('relation_table', 'relation_name', 'relation_concat', $('#relation_table').data('value'), $('#relation_name').data('value'), $('#relation_concat').data('value'))
+        }
+        if ($('#dragdrop_table').length) {
+          dropdownRelations('dragdrop_table', 'dragdrop_name', 'dragdrop_concat', $('#dragdrop_table').data('value'), $('#dragdrop_name').data('value'), $('#dragdrop_concat').data('value'))
+        }
+        if ($('#typeahead_table').length) {
+          val = $('body').find('#typeahead_concat').attr('value')
+          dropdownRelations('typeahead_table', 'typeahead_name', 'typeahead_concat', $('#typeahead_table').data('value'), $('#typeahead_name').data('value'), val)
+        }
+        if ($('#table_table').length) {
+          dropdownRelations('table_table', 'relation_name', '', $('#table_table').data('value'))
+        }
+        if ($('#multi_line_editor_table').length) {
+          dropdownRelations('multi_line_editor_table', 'relation_name', '', $('#multi_line_editor_table').data('value'))
+          $('.editor').froalaEditor({ height: 400 })
+          var samp = $('<samp></samp>')
+          var text = `<p><h3>List Fields :</h3></p>`
+          text += getFieldsFromTable($('#multi_line_editor_table').val(), name)
+          $('#multi_line_editor_table').closest('div').append(samp)
+          samp.html(text)
+
+          $('#multi_line_editor_table').on('change', function () {
+            var text = `<p><h3>List Fields :</h3></p>`
+            text += getFieldsFromTable($(this).val(), name)
+            samp.html(text)
+          })
+        }
+        if ($('#dropdown_multi_table').length) {
+          dropdownRelations('dropdown_multi_table', 'dropdown_multi_name', '', $('#dropdown_multi_table').data('value'), $('#dropdown_multi_name').data('value'))
+        }
+      }
+    )
+    $('#modal_setting').modal('show')
+  }
+
+  function dropdownRelations(elemTable, elemField, elemConcat, value, fieldValue, concatValue) {
+    elemTable = elemTable || 'relationtable'
+    elemField = elemField || 'relationfield'
+    elemConcat = elemConcat || 'relationconcat'
+    value = value || ''
+    fieldValue = fieldValue || ''
+    concatValue = concatValue || 'id'
+
+    let html = ''
+    let elementTable = $('body').find('#' + elemTable)
+    if (!elementTable.length) {
+      return
+    }
+    let tableHtml = ''
+    for (let key in ZFIELDS) {
+      let selected = value == key ? ' selected ' : ''
+      tableHtml += `<option value="${key}" ${selected}>${ZFIELDS[key].name}</option>`
+    }
+    elementTable.html(tableHtml)
+    let currentRelation = elementTable.val()
+    let elementField = $('body').find('#' + elemField)
+    //var concatValue = "id";
+    for (let key in ZFIELDS[currentRelation].labels) {
+      let selected = fieldValue == key ? ' selected ' : ''
+      //concatValue = fieldValue == key ? key : "id";
+      html += `<option value="${key}" ${selected}>${ZFIELDS[currentRelation].labels[key]}</option>`
+    }
+    elementField.html(html)
+    $('#' + elemConcat).val(concatValue)
+    $('#' + elemConcat).attr('value', concatValue)
+  }
+
+  function getFieldsFromTable(table, name) {
+    let html = `<ul class="list-group">`
+    let nots = ['id', 'company_id', 'created_by', 'created_at', 'updated_by', 'updated_at']
+    for (let key in ZFIELDS[table].labels) {
+      if (nots.indexOf(key) <= -1) {
+        html += `<li class="list-group-item"><button onclick="copyToClipboard('[[[${key}_${name}]]]');" type="button" class="btn-copy-code btn btn-outline-grey btn-sm px-2 waves-effect" title="Copy Text" ><i class="fa fa-copy mr-1"></i> ${key} </button>  <input type="text"  name="${name}[fields][${key}_${name}]" value="${ZFIELDS[table].labels[key]}"></li>`
+      }
+    }
+    html += `</ul>`
+    return html
+  }
+
+  $(function () {
+    let counter = $('.divtabs').length || 1
+    function selectTable(table) {
+      if (!table) return false
+      ajaxPost('/<%- routeName%>/fields', { table: table }, function (json) {
+        $('#divfields').show()
+        $('.card-script').show()
+        $('#results').hide()
+        $('#contentfields').html(json.html)
+        $('#tabs').html(json.tabview)
+        $('#divtablist').html(json.tabBox)
+        counter = json.count
+        $('ol.mydragable').sortable({
+          group: 'mydragable',
+          nested: false,
+          //pullPlaceholder: false,
+          isValidTarget: function ($item, container) {
+            if ($item.hasClass('add-container')) {
+              return false
+            } else if ($item.hasClass('icon-trash')) {
+              return false
+            } else {
+              return true
+            }
+          },
+          onMousedown: function ($item, _super, event) {
+            if ($(event.target).is('i')) {
+              let elem = $(event.target)
+              //console.log(elem.attr("class"))
+              if (elem.hasClass('modal_setting')) {
+                click_setting(elem)
+              }
+              return false
+            }
+            return true
+          },
+          onDrop: function ($item, container, _super) {
+            //class container-nav
+            let time = new Date().getTime()
+            let $itemclass = $item.attr('class')
+            let getidname = $item.parents().attr('id') || ''
+            let iname = $item.find('input[type=text]').attr('data-name')
+            let containertype = $item.parents().data('name')
+            let newname = getidname ? iname + '___' + getidname : iname
+            let leftright = $item.find('input[type=hidden]').attr('name')
+            //container-box
+            if ($itemclass.indexOf('container-nav') > -1) {
+              let parentId = $item.parents().parents()
+              $item.find('input[type=text]').attr('name', newname)
+              $item.find('input[type=hidden]').attr('name', containertype)
+            } else {
+              $item.find('input[type=text]').attr('name', newname)
+              $item.find('input[type=hidden]').attr('name', containertype)
+            }
+            _super($item, container)
+          },
+        })
+
+        //tab draggable
+        $('ul.sortable-list').sortable()
+        //end tab draggable
+        loadForm()
+      })
+    }
+
+    function nextDragged() {
+      setTimeout(() => {
+        ajaxPost(
+          '/<%- routeName%>/tab-draggable',
+          {
+            tabs: $('.sortable-list')
+              .find('input[name="tabs[]"]')
+              .each((index, elm) => $(elm).val()),
+          },
+          () => location.href
+        )
+      }, 1000)
+    }
+
+    function buildOneRow(columncount) {
+      let html = ``
+      let time = new Date().getTime()
+      let col_md = `col-md-${12 / columncount}`
+      let container_time = `container_${time}`
+      html += `<li class="container-nav"><i class="fa fa-arrows icon-float"></i><div class="row  mt-1 mb-1">`
+      for (let i = 1; i <= columncount; i++) {
+        html += `<div class="${col_md}" style="background-color: rgba(0,0,0,.03)" ><ol class="divboxlittle container-box"><li><i data-container="${container_time}" data-id="${i}" data-split="${columncount}" data-column="ONE_COLUMN" class="fa fa-plus-circle fa-2x add-container text-success"></i></li></ol> </div>`
+      }
+      html += `</div></li>`
+      return html
+    }
+
+    $('#modal-container-save').on('click', function () {
+      let columncount = $('#column-count').val()
+      let html = buildOneRow(columncount)
+      let length = $('ol').length
+      $('ol')
+        .eq(length - 1)
+        .append(html)
+      $('.btn-modal-container-close').click()
+    })
+
+    $('body').on('click', '.add-container', function () {
+      parentContainer = $(this).closest('ol')
+      let options = ''
+      let ols = $('ol.mydragable > li')
+      let myObj = {}
+      ols.each(function () {
+        let span = $(this).find('div').find('div').find('span')
+        let name = span.data('name')
+        if (name) {
+          myObj[name] = $(this)
+        }
+      })
+      for (let key in myObj) {
+        options += `<option value="${key}">${key}</option>`
+      }
+      fieldsObjectInput = myObj
+      $('#container-select').html(options)
+      $('#modal_container_into').modal('show')
+    })
+
+    $('#moveintocontainer').on('click', function () {
+      let myval = $('#container-select').val()
+      if (myval) {
+        let myelement = fieldsObjectInput[myval]
+        //let myname = `${container_time}___${container_column}___${container_split}___${container_index}`;
+        myelement.find('input[type=hidden]').attr('name', 'ONE_COLUMN')
+        myelement.appendTo(parentContainer)
+      }
+      $('.btncontainer-close').click()
+      setTimeout(function () {
+        saveContainer()
+      }, 2000)
+    })
+
+    $('#table').on('change', function () {
+      location.href = '/<%- routeName%>?table=' + $(this).val()
+      loadForm()
+    })
+
+    $('#generate').on('click', function () {
+      ajaxPost(
+        '/<%- routeName%>',
+        {
+          table: $('#table').val(),
+          route: $('#route').val(),
+        },
+        function (data) {
+          if (data.status == 0) {
+            $('#results').hide()
+            toastr.error(data.message, data.title)
+          } else {
+            $('#results').show()
+            toastr.success(data.title, data.message)
+            $('#resultsbody').html(data.datas)
+          }
+          $('#divfields').hide()
+        }
+      )
+    })
+
+    $('#add').on('click', function () {
+      var tabname = $('#tabname')
+      var tabsvalue = $('#tabsvalue')
+      if (tabname.val() == '') {
+        alert('tab name is empty!')
+        return false
+      }
+      $('#tabs').append("<div class='divtabs'> " + counter + '. ' + tabname.val() + " <input type='hidden' name='tabs[]' value='" + tabname.val() + "' /> <button type='button'  onclick='$(this).parent().remove();' class='trashtab'><i class='fas fa-trash'></i> </button></div><br>")
+      tabname.val('')
+      $('#savetab').click()
+      counter++
+    })
+
+    $('#savetab').on('click', function () {
+      ajaxPost('/<%- routeName%>/tabs', $('#formgenerator').serializeArray(), function (data) {
+        if (data.status == 1) location.href = ''
+        else alert(data.title)
+      })
+    })
+
+    function saveFields() {
+      let approvers = $("input[name='zapprovals[approvers][]']")
+        .map(function () {
+          return $(this).val()
+        })
+        .get()
+      let knowings = $("input[name='zapprovals[knowings][]']")
+        .map(function () {
+          return $(this).val()
+        })
+        .get()
+      others = fixContainer()
+      ajaxPost(
+        '/<%- routeName%>/save_and_generate',
+        {
+          details: $('#formfields').serializeArray(),
+          table: $('#table').val(),
+          hardcode_grid: null,
+          router: editor_router.getValue(),
+          index_ejs: editor_index_ejs.getValue(),
+          indexcss_ejs: editor_indexcss_ejs.getValue(),
+          indexjs_ejs: editor_indexjs_ejs.getValue(),
+          form_ejs: editor_form_ejs.getValue(),
+          create_ejs: editor_create_ejs.getValue(),
+          createjs_ejs: editor_createjs_ejs.getValue(),
+          update_ejs: editor_update_ejs.getValue(),
+          updatejs_ejs: editor_updatejs_ejs.getValue(),
+          import_ejs: editor_import_ejs.getValue(),
+          importjs_ejs: editor_importjs_ejs.getValue(),
+          view_ejs: editor_view_ejs.getValue(),
+          is_approval: is_approval,
+          template: $('#template').val(),
+          approval_title: $('#approval_title').val(),
+          type: $('#type').val(),
+          approvers: approvers,
+          knowings: knowings,
+          others: JSON.stringify(others),
+          joins: $('#formjoin').serializeArray(),
+        },
+        function (data) {
+          if (data.status == 0) {
+            toastr.error(data.message, data.title)
+          } else {
+            toastr.success(data.title, data.message)
+          }
+        }
+      )
+    }
+
+    $('#save').on('click', function () {
+      saveFields()
+    })
+    $('#save_script').on('click', function () {
+      saveFields()
+    })
+
+    $('.btn-reset').on('click', function () {
+      if (window.confirm('Reset to factory settings ?')) {
+        ajaxPost(
+          '/<%- routeName%>/reset',
+          {
+            table: $('#table').val(),
+          },
+          function (data) {
+            if (data.status == 0) {
+              toastr.error(data.message, data.title)
+            } else {
+              toastr.success(data.title, data.message)
+              location.href = ''
+            }
+          }
+        )
+      }
+    })
+
+    $('.btn-minify').on('click', function () {
+      if (window.confirm('Minify all views in one line make your website faster ?')) {
+        ajaxPost('/<%- routeName%>/minify', {}, function (data) {
+          if (data.status == 0) {
+            toastr.error(data.message, data.title)
+          } else {
+            toastr.success(data.title, data.message)
+          }
+        })
+      }
+    })
+
+    $('.btn-generate-assets').on('click', function () {
+      if (window.confirm('Replace javascript assets with this one ?')) {
+        ajaxPost('/<%- routeName%>/generate-assets', {}, function (data) {
+          if (data.status == 0) {
+            toastr.error(data.message, data.title)
+          } else {
+            toastr.success(data.title, data.message)
+          }
+        })
+      }
+    })
+
+    selectTable($('#table').val())
+    function changeUrl(title, url) {
+      var origin = window.location.origin
+      if (typeof history.pushState != 'undefined') {
+        var obj = { Title: title, Url: origin + '/<%- routeName%>?table=' + url }
+        window.history.pushState(obj, obj.Title, obj.Url)
+      } else {
+        alert('Browser does not support HTML5.')
+      }
+    }
+
+    $('#modal-table').on('change', function () {
+      $('#modal-route').val(toName($(this).val()))
+    })
+    $('#modal-table').on('input', function () {
+      $('#modal-route').val(toName($(this).val()))
+    })
+    $('#delete_module').on('click', function () {
+      if (window.confirm('sure to delete ?')) {
+        ajaxDelete('/<%- routeName%>/delete-table', { table: $('#table').val() }, function (data) {
+          toastrForm(data)
+          if (data.status == 1) {
+            location.href = '/<%- routeName%>'
+          }
+        })
+      }
+    })
+
+    $('#modal-save').on('click', function () {
+      let reservedWord = ['order', 'left', 'right', 'by', 'zrole', 'role', 'zuser', 'zcompany_access']
+      let moduleName = $('#modal-table').val()
+      moduleName = moduleName.toLowerCase()
+      let arrModules = reservedWord.filter((item) => item == moduleName)
+      if (arrModules.length) {
+        toastrForm({
+          status: 0,
+          title: 'Error Module Name reserved',
+          message: 'Please change your module name',
+        })
+        return false
+      }
+      ajaxPost('/<%- routeName%>', { name: $('#modal-table').val(), route: $('#modal-route').val() }, function (data) {
+        toastrForm(data)
+        if (data.status == 1) {
+          location.href = '/<%- routeName%>?table=' + $('#modal-route').val()
+        }
+      })
+    })
+
+    $('#modal-add').on('click', function () {
+      let others = fixContainer()
+      ajaxPost(
+        '/<%- routeName%>/add_field',
+        {
+          table: $('#table').val(),
+          name: $('#modal_name').val(),
+          type: $('#modal_type').val(),
+          position: $('#modal_position').val(),
+          relationtable: $('#relationtable').val(),
+          relationfield: $('#relationfield').val(),
+          relationconcat: $('#relationconcat').val(),
+          relationfields: $('#relationfields').val(),
+          others: JSON.stringify(others),
+        },
+        function (data) {
+          $(this).show()
+          toastrForm(data)
+          if (data.status == 1) {
+            var type = $('#modal_type').val()
+            location.href = ''
+          }
+        }
+      )
+    })
+
+    $('body').on('click', '.modal_setting', function () {
+      click_setting($(this))
+    })
+
+    $('body').on('click', '.select-plus', function () {
+      let name = $(this).data('name')
+      let item = $(this).data('item')
+      let num = $('.group-select').length || 0
+      html = `<div class="input-group group-select"><div class="input-group-prepend">
+        <input type="number" class="form-control cvalue" placeholder="Value"  name="${name}[${item}][${num}][value]">
+        <input type="text" class="form-control clabel" placeholder="Label" name="${name}[${item}][${num}][label]">
+        <span class="input-group-text trash-select" data-name="${name}" data-item="${item}"><i class="fa fa-trash text-danger"></i> </span>
+        </div></div>`
+
+      $('.divselect').append(html)
+    })
+
+    $('body').on('click', '.trash-select', function () {
+      let name = $(this).data('name')
+      let item = $(this).data('item')
+      $(this).closest('.group-select').remove()
+      $('.group-select').each(function (index, value) {
+        $(this)
+          .closest('div')
+          .find('input.cvalue')
+          .attr('name', name + '[' + item + '][' + index + '][value]')
+        $(this)
+          .closest('div')
+          .find('input.clabel')
+          .attr('name', name + '[' + item + '][' + index + '][label]')
+      })
+    })
+
+    $('body').on('click', '#modal-setting-save', function () {
+      let datas = $('#modal-setting-form').serializeArray()
+      ajaxPost('/<%- routeName%>/save_setting?table=' + $('#table').val(), datas, function (data) {
+        toastrForm(data)
+        if (data.status == 1) {
+          $('#modal_setting').modal('hide')
+        }
+      })
+    })
+
+    $('body').on('change', '#modal_type', function () {
+      if ($(this).val() == 'relation') {
+        $('.divrelation').show()
+        $('.divrelationfield').show()
+        $('.divconcat').show()
+        $('.divfield').hide()
+        dropdownRelations()
+      } else if ($(this).val() == 'table') {
+        $('.divrelation').show()
+        $('.divrelationfield').hide()
+        $('.divconcat').hide()
+        $('.divfield').hide()
+        dropdownRelations()
+      } else if ($(this).val() == 'multi_line_editor') {
+        $('.divrelation').show()
+        $('.divrelationfield').hide()
+        $('.divconcat').hide()
+        $('.divfield').hide()
+        dropdownRelations()
+      } else if ($(this).val() == 'dropdown_multi') {
+        $('.divrelation').show()
+        $('.divrelationfield').show()
+        $('.divconcat').show()
+        $('.divfield').hide()
+        dropdownRelations()
+      } else if ($(this).val() == 'dropdown_chain') {
+        $('.divrelation').show()
+        $('.divrelationfield').show()
+        $('.divconcat').show()
+        $('.divfield').show()
+        dropdownRelations()
+      } else if ($(this).val() == 'typeahead') {
+        $('.divrelation').show()
+        $('.divrelationfield').show()
+        $('.divconcat').show()
+        $('.divfield').hide()
+        dropdownRelations()
+      } else if ($(this).val() == 'dragdrop') {
+        $('.divrelation').show()
+        $('.divrelationfield').show()
+        $('.divconcat').show()
+        $('.divfield').hide()
+        dropdownRelations()
+      } else {
+        $('.divrelation').hide()
+        $('.divconcat').hide()
+        $('.divfield').hide()
+      }
+    })
+
+    $('body').on('click', '#delete_field', function () {
+      let name = $(this).data('name')
+      if (window.confirm('sure delete ? ')) {
+        ajaxDelete('/<%- routeName%>/delete_field', { name: name, table: $('#table').val() }, function (data) {
+          toastrForm(data)
+          if (data.status == 1) {
+            location.href = ''
+          }
+        })
+      }
+    })
+
+    $('body').on('click', '.edittab', function () {
+      $('body').find('#edittab').val($(this).data('name'))
+      $('body').find('#modal-tab-save').attr('data-id', $(this).data('id'))
+    })
+
+    $('body').on('click', '#modal-tab-save', function () {
+      ajaxPost(
+        '/<%- routeName%>/tab_rename',
+        {
+          id: $(this).data('id'),
+          name: $('body').find('#edittab').val(),
+          table: $('#table').val(),
+        },
+        function (data) {
+          toastrForm(data)
+          if (data.status == 1) {
+            location.href = ''
+          }
+        }
+      )
+    })
+
+    $('body').on('change', '#relationtable', function () {
+      dropdownRelations('relationtable', 'relationfield', 'relationconcat', $(this).val(), '', 'CONCAT(' + $('body').find('#relationfield').val() + ')')
+    })
+
+    $('body').on('change', '#relation_table', function () {
+      dropdownRelations('relation_table', 'relation_name', 'relation_concat', $(this).val(), '', 'CONCAT(' + $('body').find('#relation_field').val() + ')')
+    })
+
+    $(document).on('change', '#dragdrop_table', function () {
+      dropdownRelations('dragdrop_table', 'dragdrop_name', 'dragdrop_concat', $(this).val(), '', 'CONCAT(' + $('body').find('#relation_field').val() + ')')
+    })
+
+    $('body').on('change', '#relation_name', function () {
+      $('#relation_concat').val('CONCAT(' + $(this).val() + ')')
+    })
+
+    $('body').on('change', '#dragdrop_name', function () {
+      $('#dragdrop_concat').val('CONCAT(' + $(this).val() + ')')
+    })
+
+    $('body').on('change', '#typeahead_table', function () {
+      dropdownRelations('typeahead_table', 'typeahead_name', 'typeahead_concat', $(this).val())
+    })
+    $('body').on('change', '#dropdown_multi_table', function () {
+      dropdownRelations('dropdown_multi_table', 'dropdown_multi_name', 'dropdown_multi_concat', $(this).val())
+    })
+    $('body').on('change', '#multi_line_editor_table', function () {
+      dropdownRelations('multi_line_editor_table', 'multi_line_editor_name', 'multi_line_editor_concat', $(this).val())
+    })
+    $('body').on('change', '#dropdown_chain_table', function () {
+      dropdownRelations('dropdown_chain_table', 'dropdown_chain_name', 'dropdown_chain_concat', $(this).val())
+    })
+
+    $('body').on('change', '#relationfield', function () {
+      $('#relationconcat').val('CONCAT(' + $(this).val() + ')')
+    })
+    $('body').on('change', '#relationname', function () {
+      $('#relation_concat').val('CONCAT(' + $(this).val() + ')')
+    })
+    $('body').on('change', '#typeahead_name', function () {
+      $('#typeahead_concat').val('CONCAT(' + $(this).val() + ')')
+    })
+    $('body').on('change', '#dropdown_multi_name', function () {
+      $('#dropdown_multi_concat').val('CONCAT(' + $(this).val() + ')')
+    })
+    $('body').on('change', '#dropdown_chain_name', function () {
+      $('#dropdown_chain_concat').val('CONCAT(' + $(this).val() + ')')
+    })
+    $('#is_approval').on('switchChange.bootstrapSwitch', function (event, state) {
+      if (state === true) {
+        $('.divzapprovals').show()
+        is_approval = 1
+      } else {
+        $('.divzapprovals').hide()
+        is_approval = 0
+      }
+    })
+
+    $('.export-file').on('click', function (e) {
+      e.preventDefault()
+      let table = $('#route').val()
+      ajaxPost(
+        '/zgenerator/export',
+        {
+          table: table,
+        },
+        function (data) {
+          toastrForm(data)
+          if (data.status == 1) {
+            location.href = `/zdownload/zgenerator/${table}`
+          }
+        }
+      )
+    })
+
+    $('#submit-import').on('click', function () {
+      $('#modal-form-file').submit()
+    })
+    submitForm('modal-form-file', '', '', function (data) {
+      toastrForm(data)
+      if (data.status == 1) {
+        setTimeout(function () {
+          location.href = `?table=${data.table}`
+        }, 1000)
+      }
+    })
+  })
+
+  $('.btn-test').on('click', function () {
+    fixContainer()
+  })
+
+  function fixContainer() {
+    let length = $('.container-nav').length
+    let obj = {}
+    let getId = ''
+    if (length) {
+      $ols = $('ol.mydragable')
+      $ols.each(function () {
+        getId = $ols.attr('id') ? $ols.attr('id') : ''
+        let name = $(this).data('name')
+        if (!Object.prototype.hasOwnProperty.call(obj, name)) {
+          obj[name] = []
+        }
+        let lis = $(this).children('li')
+        lis.each(function () {
+          let className = $(this).attr('class') ? $(this).attr('class') : ''
+          //console.log(`className  ${className}`)
+          if (className == 'container-nav') {
+            let parent_container = $(this).parent('ol.mydragable')
+            let parent_container_id = parent_container.attr('id') || ''
+            let parent_container_name = parent_container.data('name') || ''
+            let child_container = $(this)
+            child_container.attr('data-name', parent_container.data('name')).attr('id', parent_container.attr('id'))
+            let arr = []
+            let $containerboxs = $(this).find('.container-box')
+            let $containerboxsLength = $containerboxs.length
+            for (let i = 0; i < $containerboxsLength; i++) {
+              //console.log(`$containerboxsLength ${i}`)
+              let item = []
+              let $lis = $containerboxs.eq(i).find('li')
+              let $lisLength = $lis.length
+              for (let x = 1; x < $lisLength; x++) {
+                let $name = ''
+                if (parent_container_id) {
+                  let getname = $lis.eq(x).find('input[type=hidden]').val()
+                  $name = `${getname}___${parent_container_id}`
+                  //fixed in tab
+                  $lis.eq(x).find('input[type=text]').attr('name', $name)
+                  $lis.eq(x).find('input[type=hidden]').attr('name', name)
+                } else {
+                  $name = $lis.eq(x).find('input[type=text]').attr('data-name')
+                  $lis.eq(x).find('input[type=text]').attr('name', $name)
+                  $lis.eq(x).find('input[type=hidden]').attr('name', name)
+                }
+                item.push($name)
+              }
+              arr.push(item)
+            }
+            obj[name].push(arr)
+          } else {
+            obj[name].push($(this).find('input[type=text]').attr('name'))
+          }
+        })
+      })
+    }
+    others = obj
+    return obj
+  }
+</script>
+
+<script>
+  $(function () {
+    $('.layout21').on('click', function (e) {
+      e.preventDefault()
+      if (sorting == '[2,1]') {
+      } else {
+        let table = $('#table').val()
+        ajaxPost(
+          '/<%- routeName%>/sorting',
+          {
+            table: table,
+            sorting: '[2,1]',
+          },
+          function (dt) {
+            location.href = ''
+          }
+        )
+      }
+    })
+
+    $('.layout12').on('click', function (e) {
+      e.preventDefault()
+      if (sorting == '[1,2]') {
+      } else {
+        let table = $('#table').val()
+        ajaxPost(
+          '/<%- routeName%>/sorting',
+          {
+            table: table,
+            sorting: '[1,2]',
+          },
+          function (dt) {
+            location.href = ''
+          }
+        )
+      }
+    })
+
+    $("#modal-joins-save").on("click", function (e) {
+      let table_join = $('#select_module_joins').val();
+      let table = $('#table').val()
+      if (table == table_join) {
+        toastr.error("Your selected module is equal with current module");
+        return;
+      }
+      ajaxPost(
+        '/<%- routeName%>/joins',
+        {
+          table_join: table_join,
+          table: table,
+        },
+        function (dt) {
+          toastrForm(dt);
+          if (dt.status == 1) {
+            $("#joinlist").html(dt.html);
+            $("#closejoin").click();
+          }
+        }
+      )
+    })
+
+    loadJoins();
+  })
+
+  function saveContainer() {
+    others = fixContainer()
+    ajaxPost(
+      '/<%- routeName%>/add_container',
+      {
+        table: $('#table').val(),
+        others: JSON.stringify(others),
+      },
+      function (dt) { }
+    )
+  }
+
+  function loadJoins() {
+    ajaxPost(
+      '/<%- routeName%>/load-joins',
+      {
+        table: $('#table').val(),
+      },
+      function (dt) {
+        if (dt.status == 1) {
+          $("#joinlist").html(dt.html);
+        }
+      }
+    )
+  }
+
+  function removeJoins(table_join) {
+    if (window.confirm('Sure to delete ?')) {
+      ajaxPost(
+        '/<%- routeName%>/remove-joins',
+        {
+          table: $('#table').val(),
+          table_join: table_join
+        },
+        function (dt) {
+          location.reload();
+        }
+      )
+    }
+  }
 </script>