zet-lib 1.0.22 → 1.0.24

package/lib/views/generatorjs.ejs

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