zet-lib 1.3.43 → 1.4.1

package/lib/views/zviewjs.ejs

@@ -0,0 +1,851 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/ace.js"></script>
+<script>
+    var others = {}
+    var query = '';
+    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_view_ejs = ace.edit('view_ejs')
+    editor_view_ejs.getSession().setMode('ace/mode/ejs')
+    //editor_view_ejs.setValue(datas.view_ejs);
+</script>
+
+<script>
+    var datas = {}
+    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_view_ejs.setValue(obj.view_ejs)
+                queries = obj.queries
+                $("#query").val(queries.sql)
+                const fields = queries.fields || []
+                setTimeout(function () {
+                    fields.map((item) => {
+                        $('input[name="joins_checks___'+item+'"]').prop("checked", true)
+                    })
+                },2000)
+            }
+        )
+    }
+
+    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
+    }
+
+    //on checked
+    function checked_join($this){
+        let nameel = $($this).attr("name");
+        let name = nameel.replace("joins_checks___","").split(".")
+        if($($this).is(":checked")){
+            toastr.success(`${name[1]} successfully add`)
+            let value = $("#joins___"+name[0]+"___"+name[1]).val()
+            var li = `<li id="li${name[0]}_wtf_${name[1]}">
+<div class="input-group">
+        <div class="input-group-prepend">
+            <span class="input-group-text modal_setting" data-type="Text" data-name="${name[0]}_wtf_${name[1]}" data-label="${value}"><i class="fa fa-cog text-info modal_setting" data-type="Text"  data-label="${value}"></i> </span>
+            <span class="input-group-text can-copy" data-name="${name[0]}_wtf_${name[1]}" title="click to copy"><i class="fa fa-copy"></i></span>
+            <span class="input-group-text">${name[0]}_wtf_${name[1]}</span>
+            <input type="text" class="form-control" data-name="${name[0]}_wtf_${name[1]}" name="${name[0]}_wtf_${name[1]}" value="${value}">
+            <input type="hidden" name="LEFT" value="${name[0]}_wtf_${name[1]}">
+        </div>
+</div><br></li>`
+            $(".mydragable").eq(0).append(li)
+            setQuery(nameel,1)
+        } else {
+            toastr.error(`${name[1]} successfully remove`)
+            $("#li"+name[0]+"_wtf_"+name[1]).remove();
+            setQuery(nameel,-1)
+        }
+    }
+
+    $(function () {
+        let counter = $('.divtabs').length || 1
+        function selectTable(table) {
+            if (!table) return false
+            ajaxPost('/<%- routeName%>/fields', { table , queries}, 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]
+                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%>?view=' + $(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() {
+            ajaxPost(
+                '/<%- routeName%>/save_and_generate',
+                {
+                    details: $('#formfields').serializeArray(),
+                    table: $('#route').val(),
+                    router: editor_router.getValue(),
+                    index_ejs: editor_index_ejs.getValue(),
+                    indexcss_ejs: editor_indexcss_ejs.getValue(),
+                    indexjs_ejs: editor_indexjs_ejs.getValue(),
+                    view_ejs: editor_view_ejs.getValue(),
+                    queries:queries,
+                },
+                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 = ''
+                        }
+                    }
+                )
+            }
+        })
+
+        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%>/addview', { name: $('#modal-table').val(), route: $('#modal-route').val() }, function (data) {
+                toastrForm(data)
+                if (data.status == 1) {
+                    location.href = '/<%- routeName%>?view=' + $('#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 ? ')) {
+                $("#li"+name).remove();
+                $("input[name='joins_checks___"+name.replace("_wtf_",".")+"']").prop("checked", false);
+                $(".close").click();
+            }
+        })
+
+        $('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() + ')')
+        })
+
+        $('.export-file').on('click', function (e) {
+            e.preventDefault()
+            let table = $('#route').val()
+            ajaxPost(
+                '/<%- routeName%>/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)
+            }
+        })
+    })
+
+    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 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 setQuery(name,type){
+        ajaxPost(
+            '/<%- routeName %>/set-query',
+            {
+                name:name,
+                type:type,
+                queries:queries
+            },
+            function (dt) {
+                query = dt.sql;
+                queries = dt;
+                $("#query").val(dt.sql)
+            }
+        )
+    }
+</script>