zet-lib 1.5.29 → 2.0.0

package/lib/views/generatorjs.ejs

@@ -1,928 +1,931 @@
 <!-- set to localStorage -->
 <script>
-  var datas = {}
-  var is_approval = '<%- approvalDatas.is_approval %>'
-  var sorting = '<%- sorting%>'
+    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);
+    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)
+    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)
             }
-            _super($item, container)
-          },
-        })
+        )
+    }
 
-        //tab draggable
-        $('ul.sortable-list').sortable()
-        //end tab draggable
-        loadForm()
-      })
+    function toName(str, separator) {
+        if (str && str.length) {
+            separator = separator || '_'
+            str = str.trim()
+            return str.replace(/\s+/g, separator).toLowerCase()
+        }
     }
 
-    function nextDragged() {
-      setTimeout(() => {
+    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%>/tab-draggable',
-          {
-            tabs: $('.sortable-list')
-              .find('input[name="tabs[]"]')
-              .each((index, elm) => $(elm).val()),
-          },
-          () => location.href
+            '/<%- 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'))
+                }
+
+                $("#number_decimalPlaces").css("font-size","2rem");
+                $("#number_thousandSeparator").css("font-size","2rem");
+            }
         )
-      }, 1000)
+        $('#modal_setting').modal('show')
     }
 
-    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
+    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)
     }
 
-    $('#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)
+    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>`
+            }
         }
-      })
-      for (let key in myObj) {
-        options += `<option value="${key}">${key}</option>`
-      }
-      fieldsObjectInput = myObj
-      $('#container-select').html(options)
-      $('#modal_container_into').modal('show')
-    })
+        html += `</ul>`
+        return html
+    }
 
-    $('#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)
-    })
+    $(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()
+            })
+        }
 
-    $('#table').on('change', function () {
-      location.href = '/<%- routeName%>?table=' + $(this).val()
-      loadForm()
-    })
+        function nextDragged() {
+            setTimeout(() => {
+                ajaxPost(
+                    '/<%- routeName%>/tab-draggable',
+                    {
+                        tabs: $('.sortable-list')
+                            .find('input[name="tabs[]"]')
+                            .each((index, elm) => $(elm).val()),
+                    },
+                    () => location.href
+                )
+            }, 1000)
+        }
 
-    $('#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()
+        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
         }
-      )
-    })
 
-    $('#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++
-    })
+        $('#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()
+        })
 
-    $('#savetab').on('click', function () {
-      ajaxPost('/<%- routeName%>/tabs', $('#formgenerator').serializeArray(), function (data) {
-        if (data.status == 1) location.href = ''
-        else alert(data.title)
-      })
-    })
+        $('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')
+        })
 
-    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)
-          }
-        }
-      )
-    }
+        $('#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)
+        })
 
-    $('#save').on('click', function () {
-      saveFields()
-    })
-    $('#save_script').on('click', function () {
-      saveFields()
-    })
+        $('#table').on('change', function () {
+            location.href = '/<%- routeName%>?table=' + $(this).val()
+            loadForm()
+        })
 
-    $('.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 = ''
+        $('#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++
+        })
 
-    $('.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)
-          }
+        $('#savetab').on('click', function () {
+            ajaxPost('/<%- routeName%>/tabs', $('#formgenerator').serializeArray(), function (data) {
+                if (data.status == 1) location.href = ''
+                else alert(data.title)
+            })
         })
-      }
-    })
 
-    $('.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)
-          }
+        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()
         })
-      }
-    })
 
-    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.')
-      }
-    }
+        $('.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 = ''
+                        }
+                    }
+                )
+            }
+        })
 
-    $('#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%>'
-          }
-        })
-      }
-    })
+        $('.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)
+                    }
+                })
+            }
+        })
 
-    $('#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()
-        }
-      })
-    })
+        $('.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)
+                    }
+                })
+            }
+        })
 
-    $('#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 = ''
-          }
+        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.')
+            }
         }
-      )
-    })
 
-    $('body').on('click', '.modal_setting', function () {
-      click_setting($(this))
-    })
+        $('#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()
+                }
+            })
+        })
 
-    $('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">
+        $('#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)
-    })
+            $('.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', '.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('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('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', '#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', '.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('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', '#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() + ')')
-    })
+        $('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() + ')')
-    })
+        $(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', '#relation_name', function () {
+            $('#relation_concat').val('CONCAT(' + $(this).val() + ')')
+        })
 
-    $('body').on('change', '#dragdrop_name', function () {
-      $('#dragdrop_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', '#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
-      }
-    })
+        $('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}`
-          }
-        }
-      )
-    })
+        $('.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()
+        $('#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)
+            }
+        })
     })
-    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()
     })
-  })
-
-  $('.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)
+
+    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] = []
                 }
-                item.push($name)
-              }
-              arr.push(item)
-            }
-            obj[name].push(arr)
-          } else {
-            obj[name].push($(this).find('input[type=text]').attr('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
     }
-    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 = ''
-          }
-        )
-      }
+    $(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();
     })
 
-    $('.layout12').on('click', function (e) {
-      e.preventDefault()
-      if (sorting == '[1,2]') {
-      } else {
-        let table = $('#table').val()
+    function saveContainer() {
+        others = fixContainer()
         ajaxPost(
-          '/<%- routeName%>/sorting',
-          {
-            table: table,
-            sorting: '[1,2]',
-          },
-          function (dt) {
-            location.href = ''
-          }
+            '/<%- routeName%>/add_container',
+            {
+                table: $('#table').val(),
+                others: JSON.stringify(others),
+            },
+            function (dt) { }
         )
-      }
-    })
+    }
 
-    $("#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();
-          }
-        }
-      )
-    })
+    function loadJoins() {
+        ajaxPost(
+            '/<%- routeName%>/load-joins',
+            {
+                table: $('#table').val(),
+            },
+            function (dt) {
+                if (dt.status == 1) {
+                    $("#joinlist").html(dt.html);
+                }
+            }
+        )
+    }
 
-    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();
+    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>
+</script>