zet-lib 1.5.30 → 2.0.0

package/lib/views/zgenerator/indexjs.ejs

@@ -0,0 +1,705 @@
+<!-- set to localStorage -->
+<script>
+    localStorage.setItem('datas', <%- JSON.stringify(JSON.stringify(datas,null,2)) %>);
+    var datas = JSON.parse(localStorage.getItem("datas"));
+</script>
+<!-- Modal -->
+<div class="modal fade" id="add_table" tabindex="-1" aria-labelledby="add_table" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Add Table</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> </button>
+            </div>
+            <div class="modal-body">
+                <form id="modal-form" method="post" action="/generator">
+                    <div class="form-group">
+                        <label for="table">Module Name</label>
+                        <input type="text" class="form-control" id="modal-table" name="table"/>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="route">Route</label>
+                        <input type="text" class="form-control" id="modal-route" name="route"/>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
+                <button type="button" id="modal-save" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="modal fade" id="modal_add_field" tabindex="-1" aria-labelledby="add_table" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" >Add Field</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> </button>
+            </div>
+            <div class="modal-body">
+
+                <form id="modal-form" method="post" action="/<%- routeName%>">
+                    <div class="form-group">
+                        <label for="table">Name</label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <select id="modal_position" class="form-control">
+                                    <option value="LEFT">Left</option>
+                                    <option value="RIGHT">Right</option>
+                                    <option value="ONE_COLUMN">One Column</option>
+                                </select>
+                            </div>
+                            <input type="text" class="form-control" id="modal_name" placeholder="Field Name" name="name"/>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="route">Type</label>
+                        <select class="form-control" id="modal_type">
+                            <% for(var key in selects){%>
+                            <option value="<%- key%>"><%- selects[key]%></option>
+                            <%}%>
+                        </select>
+                    </div>
+
+                    <div class="row divrelation" style="display:none">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="route">Module Name</label>
+                                <select class="form-control" id="relationtable"></select>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6 divrelationfield">
+                            <div class="form-group ">
+                                <label for="route">Label</label>
+                                <select class="form-control" id="relationfield"></select>
+                            </div>
+                        </div>
+
+                        <div class="col-md-12 divconcat">
+                            <div class="form-group ">
+                                <label for="route">Concat</label>
+                                <input type="text" class="form-control" id="relationconcat" placeholder='CONCAT(fullname, " (email) : ", email)' >
+                            </div>
+                        </div>
+
+                    </div>
+                </form>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
+                <button type="button" id="modal-add" class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="modal fade" id="modal_setting" tabindex="-1" aria-labelledby="modal_setting" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modal_setting_label">Setting</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> </button>
+            </div>
+            <div class="modal-body">
+                <form id="modal-setting-form" method="post" action="/<%- routeName%>/save_setting">
+                    <div id="body_content"></div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-danger text-white" id="delete_field"  type="button"><i class="fa fa-trash"></i> Delete</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
+                <button type="button" id="modal-setting-save" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<div class="modal fade" id="modal_tab" tabindex="-1" aria-labelledby="modal_setting" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modal_setting_label">Tab</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> </button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <input type="text" id="edittab" class="form-control">
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
+                <button type="button" id="modal-tab-save" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
+<script>
+    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_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);
+            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) {
+                dropdownRelations("typeahead_table", "typeahead_name", "typeahead_concat",$("#typeahead_table").data("value"),$("#typeahead_name").data("value"), $("#relation_concat").data("value"));
+            }
+            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 = '';
+        var elementTable = $("body").find("#"+elemTable);
+        if(!elementTable.length){
+            return;
+        }
+
+        let tableHtml = '';
+        for(var key in ZFIELDS) {
+            var selected = value == key ? " selected " : "";
+            tableHtml += `<option value="${key}" ${selected}>${ZFIELDS[key].name}</option>`;
+        }
+        elementTable.html(tableHtml);
+        var currentRelation = elementTable.val();
+        var elementField = $("body").find("#"+elemField);
+        //var concatValue = "id";
+        for(var key in ZFIELDS[currentRelation].labels) {
+            var 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);
+    }
+
+
+    function getFieldsFromTable(table, name) {
+        var html =`<ul class="list-group">`;
+        var nots = ["id","company_id","created_by","created_at","updated_by","updated_at"];
+        for(var 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 () {
+        var 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',
+                    isValidTarget: function ($item, container) {
+                        return true;
+                    },
+                   /* onDrag: function ($item, position, _super, event) {
+                        console.log(event.target.nodeName);
+                        console.log(event.target);
+                        if($(event.target).is("i")) {
+                            var elem = $(event.target);
+                            console.log(elem.attr("class"))
+                            if(elem.hasClass("modal_setting")) {
+                             alert("ada");
+                            }
+
+                            _super($item, container);
+                            return false;
+                        }
+                    },*/
+                    onMousedown: function ($item, _super, event) {
+/*                        console.log(event.target.nodeName);
+                        console.log(event.target);*/
+                        if($(event.target).is("i")) {
+                            var 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) {
+                        var getidname = $item.parents().attr('id') || "";
+                        var iname = $item.find('input[type=text]').attr('data-name');
+                        var containertype = $item.parents().data('name');
+                        var newname = getidname ? iname + "___" + getidname : iname;
+                        var leftright = $item.find('input[type=hidden]').attr('name');
+                        $item.find('input[type=text]').attr('name', newname);
+                        $item.find('input[type=hidden]').attr('name', containertype);
+
+                        _super($item, container);
+                    }
+                });
+                loadForm();
+            });
+        }
+
+        $("#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() {
+            ajaxPost("/<%- routeName%>/save_fields",{
+                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(),
+
+            }, 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 ?")) {
+                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 () {
+            var reservedWord = ['order','left','right','by'];
+            var moduleName = $("#modal-table").val();
+            moduleName = moduleName.toLowerCase();
+            var 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 () {
+            //$(this).hide();
+            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(),
+
+            }, 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 () {
+            var name = $(this).data("name");
+            var item = $(this).data("item");
+            var 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 () {
+            var name = $(this).data("name");
+            var 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 () {
+            var 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 () {
+            var 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()+")");
+        });
+    });
+</script>