zet-lib 1.5.30 → 2.0.0

package/lib/views/zgenerator/manual_virtual.ejs

@@ -0,0 +1,143 @@
+<h3>Zvirtual</h3>
+<hr>
+<p class="mb-4">Ada kalanya kita tidak perlu <code>hard code / coding</code> di suatu page. Atau kita ingin membuat satu atau
+beberapa fields di table CRUD, dimana field tersebut tidak perlu dimasukkan ke dalam table</p>
+<p class="mb-4">Sebagai contoh ditable <code>employee</code> adalah field <code>age</code>, dimana field <code>age</code> dihitung berdasarkan tanggal lahir <code>birthDate</code> dan field <code>age</code>
+    tidak perlu dimasukkan ke dalam table <code>employee</code>, tetapi field <code>age</code> ditampilkan di semua CRUD tapi perhitungan berdasarkan otomatis dari javascript</p>
+
+<hr>
+<h2>Appendix</h2>
+<hr>
+
+<ul class="list-group">
+    <li class="list-group-item"><strong>Table</strong>
+        <p class="mb-4">* Wajib, Dimasukkan ke dalam table generator yang dipilih</p>
+    </li>
+    <li class="list-group-item"><strong>Is Script Only</strong>
+        <p class="mb-4">OFF kan kalau tidak ada field yg akan dimasukkan ke dalam table sebagai virtual field</p>
+    </li>
+    <li class="list-group-item"><strong>Field Name</strong>
+        <p class="mb-4">Penambahan virtual field yg tidak ada di table.</p>
+    </li>
+    <li class="list-group-item"><strong>Field Parent</strong>
+        <p class="mb-4">* Wajib diisi sebagai sort. //TODO<br>
+            * Tergantung dari type jika type date maka diformat sebagai tanggal</p>
+    </li>
+    <li class="list-group-item"><strong>Field Alias</strong>
+        <p class="mb-4">Lupa //TODO</p>
+    </li>
+    <li class="list-group-item"><strong>Type</strong>
+        <p class="mb-4">Text : sebagai text<br>
+            Date : convert ke date format</p>
+
+    </li>
+    <li class="list-group-item"><strong>Formula SQL</strong>
+        <p class="mb-4">SQL query yang akan ditambahkan, di grid list, excel export. tidak support join hanya subquery dll</p>
+    </li>
+    <li class="list-group-item"><strong>Javascript</strong>
+        <p class="mb-4">Penambahan javascript di form</p>
+    </li>
+    <li class="list-group-item"><strong>Formula Grid Query</strong>
+        <p class="mb-4">Penambahan query di Grid List<br>Diawali dengan <code>query</code> <br><code>query.NAMA_FIELD_ANDA  = NILAI_QUERY_ANDA</code>
+        <br>
+            Contoh : <br><code>query.companyId = req.session.user.companyIds</code>
+        </p>
+
+    </li>
+    <li class="list-group-item"><strong>Formula Grid Option</strong>
+        <p class="mb-4">Penambahan option di Grid List<br>Diawali dengan  <code>option </code>
+            <br><code>option.NAMA_FIELD_ANDA  = OPERATAOR_SQL</code><br>Diawali dengan <code>option</code> <br><code>option.NAMA_FIELD_ANDA  = NILAI_QUERY_ANDA</code>
+            <br>
+            Contoh : <br><code>option.companyId = "IN"</code>
+        </p>
+    </li>
+
+
+    </ul>
+
+<hr>
+<h2>Contoh 1</h2>
+<img src="/img/age.png" class="img-fluid" alt="Responsive image">
+<hr>
+<ul class="list-group">
+    <li class="list-group-item">Table : <strong>employee</strong>, karena di generate di table employee</li>
+    <li class="list-group-item">Is Script Only : <strong>OFF</strong>, karena ada field age</li>
+    <li class="list-group-item">Field Name : <strong>age</strong></li>
+    <li class="list-group-item">Field Parent : <strong>birthDate</strong> *wajib diisi. Untuk sort di grid list</li>
+    <li class="list-group-item">Field Alias : <strong></strong></li>
+    <li class="list-group-item">Type : <strong>Text</strong></li>
+    <li class="list-group-item">Formula SQL : <code>YEAR(CURDATE()) - YEAR(birthDate)</code>
+    <br>
+       <p class="red-text">Formula SQL adalah formula untuk menghitung di grid, excel dan view</p>
+    </li>
+    <li class="list-group-item">Javascript (Form) : <br><code>$("#birthDate").change(function () {<br>
+            var dob = new Date ($("#birthDate").val());<br>
+            var year = dob.getFullYear();<br>
+            var month = dob.getMonth();<br>
+            var day = dob.getDay();<br>
+            var today = new Date();<br>
+            var age1 = today.getFullYear() - year;<br>
+            if (today.getMonth() < month || (today.getMonth() == month && today.getDate() < day)) {<br>
+            age1--;<br>
+            }<br>
+            $("#age").val(age1);<br>
+            });</code></li>
+</ul>
+
+<hr>
+<h2>Contoh 2</h2>
+
+<p class="mb-4">Manipulasi Form untuk field tertentu tanpa ada tambahan field lagi seperti contoh 1</p>
+<p class="mb-4">Contoh saya akan membuat table nomor invoice dimana nomor invoice tsb berdasarkan tanggal invoice hanya sewaktu create saja, update tidak perlu <code> INV-2019/10/16-1</code> </p>
+<p class="mb-4">Nomor invoice adalah  <code>code</code> field, dan tanggal adalah <code>date</code> dengan urutan berdasarkan sudah keberapa invoice tsb</p>
+
+<img src="/img/invoice.png" class="img-fluid" alt="Responsive image">
+<hr>
+<ul class="list-group">
+    <li class="list-group-item">Table : <strong>invoice</strong>, karena di generate di table invoice</li>
+    <li class="list-group-item">Is Script Only : <strong>ON</strong> karena tidak ada field virtual </li>
+    <li class="list-group-item">Javascript (Form) : <br><code>$("#date").on("change", function () {<br>
+            var date1 = new Date($("#date").val());<br>
+            var code1 = date1.getFullYear();<br>
+            var code2 = date1.getMonth()+1;<br>
+            var code3 = date1.getDate();<br>
+            var url = window.location.href;<br>
+            var code4 = url.split("/").pop();<br>
+            if (code4 == "create") {<br>
+            $.ajax({<br>
+            url: '/ajax',<br>
+            type: "post",<br>
+            data: {select:" COALESCE(MAX(id), 0) + 1  as id ", table:"invoice", model:"text", field:"id"},<br>
+            success: function (data) {<br>
+            var codeInvoice= "INV-" + code1 + "/" + code2 + "/" + code3 + "-" + data;<br>
+            $("#code").val(codeInvoice)<br>
+            }<br>
+            })<br>
+            } else {<br>
+            var codeInvoice = "INV-" + code1 + "/" + code2 + "/" + code3 + "-" + code4;<br>
+            $("#code").val(codeInvoice);<br>
+            }<br>
+            });<br>
+            $("#code").attr("readonly",true);</code></li>
+</ul>
+
+
+<hr>
+<h2>Contoh 3</h2>
+<h4>Contoh Join table</h4>
+<p class="mb-4">Menampilkan field division di table user, dimana table  <code>user</code> relasi ke table  <code>user_company</code> dan table  <code>user_company</code> relasi ke table  <code>division</code></p>
+<img src="/img/join.png" class="img-fluid" alt="Responsive image">
+<hr>
+<ul class="list-group">
+    <li class="list-group-item">Table : <strong>user</strong>, karena di generate di table user</li>
+    <li class="list-group-item">Is Script Only : <strong>OFF</strong> karena ada field virtual </li>
+    <li class="list-group-item">Javascript (Form) : </li>
+    <li class="list-group-item">Field Name : <strong>division</strong> Nama field jadi division</li>
+    <li class="list-group-item">Field Parent : <strong>username</strong> *wajib diisi.</li>
+    <li class="list-group-item">Field Alias : <strong>divisionId</strong> *wajib nama table harus tidak ada di table yg sudah ada</li>
+    <li class="list-group-item">Type : <strong>Text</strong></li>
+    <li class="list-group-item">Formula SQL : <code>SELECT division.name FROM division <br>
+            LEFT JOIN `user_company` ON (division.id = user_company.divisionId) <br>
+            LEFT JOIN `user` ON (user_company.userId = user.id) <br>
+            WHERE  user.id = user_company.userId</code></li>
+</ul>

package/lib/views/zgenerator/mini.ejs

@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>SINTRET GENERATOR</title>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+    <!-- Bootstrap core CSS -->
+    <link href="/mdb/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+
+    <!-- Material Design Bootstrap -->
+    <link href="/mdb/css/mdb.min.css" rel="stylesheet">
+    <!-- Your custom styles (optional) -->
+    <link href="/mdb/css/style.css" rel="stylesheet">
+    <style type="text/css">
+        #modalpopup {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            background: rgba(255, 255, 255, .8) url('/img/cms.gif') 50% 50% no-repeat;
+            opacity: 0.80;
+            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+            filter: alpha(opacity=80)
+        }
+
+        .divbox {
+            border: 1px solid green;
+            min-height: 300px;
+            margin: 30px 1px 30px 1px;
+            padding-top: 10px;
+            padding-bottom: 5px;
+        }
+        .tab-content {
+            width:100%;
+        }
+        .tab-pane {
+            width:100%;
+        }
+
+        .divboxlittle {
+            border: 1px solid green;
+            min-height: 50px;
+            width: 100%;
+            padding-top: 10px;
+            padding-bottom: 5px;
+        }
+
+        ol.mydragable li {
+            cursor: grabbing;
+        }
+
+        body.dragging, body.dragging * {
+            cursor: move !important;
+        }
+
+        .dragged {
+            position: absolute;
+            opacity: 0.5;
+            z-index: 2000;
+        }
+
+        ol.mydragable li.placeholder {
+            position: relative;
+        }
+
+        ol.mydragable li.placeholder:before {
+            position: absolute;
+        }
+    </style>
+</head>
+
+<body class="grey lighten-3">
+
+<!--Main Navigation-->
+<header>
+    <!-- Navbar -->
+
+    <!-- Navbar -->
+
+</header>
+<!--Main Navigation-->
+
+<!--Main layout-->
+<main>
+    <div class="container-fluid">
+        <!--Section: Post-->
+        <section class="mt-4">
+            <!--Grid row-->
+            <div class="row">
+                <!--Grid column-->
+                <div class="col-md-12 mb-2">
+                    <!--Card-->
+
+                    <!--Generator-->
+                    <div class="card mb-3 wow fadeIn">
+                        <div class="card-header bg-success text-white font-weight-bold">Generator</div>
+                        <div class="card-body">
+
+                            <!-- Default form reply -->
+                            <form id="formgenerator" method="post" action="/generator">
+
+                                <input type="hidden" name="table" id="table" value="<%- table%>">
+                                <input type="hidden" name="route" id="route" value="<%- table%>">
+                                <input type="hidden" name="bootstrap" id="bootstrap" value="bootstrap3">
+                                <input type="hidden" name="layout" id="layout" value="bootstrap3">
+
+                                <div class="form-group">
+                                    <label for="route">Tabs</label>
+                                    <div class="input-group mb-3">
+                                        <input type="text" class="form-control" id="tabname"
+                                               placeholder="Enter tab name" aria-label="Enter tab name"
+                                               aria-describedby="button-addon2">
+                                        <div class="input-group-append">
+                                            <button class="btn btn-md btn-secondary m-0 px-3" type="button" id="add"><i
+                                                        class="fas fa-plus"></i></button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="tabs"></div>
+                                <div class="text-center mt-4">
+                                    <button class="btn btn-info" id="savetab" type="button">Save Tab</button>
+                                    <button class="btn btn-success" id="generate" type="button">Generate</button>
+                                </div>
+                            </form>
+                            <!-- Default form reply -->
+                        </div>
+                    </div>
+                    <!--/Generator-->
+
+                    <div class="card mb-4 wow fadeIn" id="results" style="display: none">
+                        <!--Card content-->
+                        <div class="card-body">
+                            <div id="resultsbody"></div>
+                            <div id="resutlstable"></div>
+                        </div>
+                    </div>
+                    <!--/.Card-->
+
+                    <!--Generator-->
+                    <div class="card mb-3 wow fadeIn" id="divfields" style="display: none">
+                        <div class="card-header secondary-color-dark text-white font-weight-bold">Fields</div>
+                        <div class="card-body">
+
+                            <!-- Default form reply -->
+                            <form id="formfields" method="post" action="/generator/fields">
+
+                                <div id="divtablist" class="row"></div>
+                                <div id="contentfields" class="row"></div>
+
+                                <div class="text-center mt-4">
+                                    <button class="btn secondary-color-dark text-white" id="save" type="button">Save
+                                    </button>
+                                </div>
+                            </form>
+                            <!-- Default form reply -->
+                        </div>
+                    </div>
+                    <!--/Generator-->
+
+                    <!--Card-->
+
+                    <!--/.Card-->
+                </div>
+                <!--Grid column-->
+
+                <!--Grid column-->
+
+                <!--Grid column-->
+            </div>
+            <!--Grid row-->
+        </section>
+        <!--Section: Post-->
+
+    </div>
+</main>
+<!--Main layout-->
+
+<!--Footer-->
+<footer class="page-footer text-center font-small mdb-color darken-2 mt-4 wow fadeIn">
+
+
+
+    <hr class="my-4">
+
+    <!--Copyright-->
+    <div class="footer-copyright py-3">
+        © 2019 Copyright:
+        <a href="https://sintret.com" target="_blank"> sintret.com </a>
+    </div>
+    <!--/.Copyright-->
+
+</footer>
+<div id="modalpopup"><!-- Place at bottom of page --></div>
+
+<!--/.Footer-->
+
+<!-- SCRIPTS -->
+<!-- JQuery -->
+<script type="text/javascript" src="/mdb/js/jquery-3.4.1.min.js"></script>
+<!-- Bootstrap tooltips -->
+<script type="text/javascript" src="/mdb/js/popper.min.js"></script>
+<!-- Bootstrap core JavaScript -->
+<script type="text/javascript" src="/mdb/js/bootstrap.min.js"></script>
+<!-- MDB core JavaScript -->
+<script type="text/javascript" src="/mdb/js/mdb.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+<script src="/js/jquery-sortable.js"></script>
+
+<script>
+    $(function () {
+        var counter = $(".divtabs").length || 1;
+
+        function selectTable(table) {
+            if (!table) return false;
+            $("#route").val(table);
+            $.ajax({
+                url: '/generator/fields',
+                type: 'POST',
+                data: {table: table},
+                success: function (json) {
+                    $("#divfields").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) {
+                            /*       if ($item.is(".disabled"))
+                             return false;
+                             else*/
+                            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);
+                        }
+                    });
+                }
+            })
+        }
+
+        $("#table").on("change", function () {
+            //selectTable($(this).val());
+            location.href = '/generator/mini?table=' + $(this).val();
+        });
+        $("#generate").on("click", function () {
+            $.ajax({
+                url: '/generator',
+                type: 'POST',
+                data: {
+                    table: $("#table").val(),
+                    route: $("#route").val(),
+                    layout: $("#layout").val(),
+                    bootstrap: $("#bootstrap").val()
+                },
+                success: function (data) {
+                    if (data.status == 0) {
+                        $("#results").hide();
+                        toastr.error(data.message, data.title);
+                    } else {
+                        toastr.success(data.title, data.message);
+                    }
+                }
+            })
+        });
+
+        $("#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 () {
+            $.ajax({
+                url: '/generator/tabs',
+                method: "POST",
+                data: $("#formgenerator").serializeArray(),
+                success: function (data) {
+                    if (data.status == 1)
+                        location.href = "";
+                    else alert(data.title);
+                }
+            });
+        });
+
+        $("#save").on("click", function () {
+            $.ajax({
+                url: '/generator/savetabs',
+                method: "POST",
+                data: {details: $("#formfields").serializeArray(), table: $("#table").val()},
+                success: 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 + '/generator?table=' + url};
+                window.history.pushState(obj, obj.Title, obj.Url);
+            } else {
+                alert("Browser does not support HTML5.");
+            }
+        }
+
+        $("#bootstrap").on("change", function () {
+            $("#layout").val($(this).val());
+        })
+    });
+</script>
+</body>
+</html>