zet-lib 6.1.0 → 6.1.1

package/lib/generatorApi.js

@@ -1,327 +1,366 @@
-const express = require('express');
-const router = express.Router();
+const fs = require("fs-extra");
+const path = require("path");
 const generatorApp = require("./generatorApp");
-const configGenerator = require('./config_generator');
-
-const csrf = require('./csrf');
+const configGenerator = require("./config_generator");
 const Model = require("./Model");
-const fs = require('fs-extra');
-//const {connection, Util} = require('zet-lib');
-const connection = require('./connection');
-const Util = require('./Util');
+const connection = require("./connection");
+const Util = require("./Util");
 
 const Api = {};
+const asArray = generatorApp.asArray || ((value) => (Array.isArray(value) ? value : []));
+const isPlainObject = generatorApp.isPlainObject || ((value) => !!value && typeof value === "object" && !Array.isArray(value));
+const hasOwn = (obj, key) => !!obj && Object.prototype.hasOwnProperty.call(obj, key);
+const containerObject = (...args) => generatorApp.containerObject(...args);
+const readFileSafe = (file, fallback = "") => (
+  generatorApp.readFileSafe ? generatorApp.readFileSafe(file, fallback) : (() => {
+    try { return fs.readFileSync(file, "utf-8"); } catch (err) { return fallback; }
+  })()
+);
+
+const VIEW_TEMPLATE_KEYS = [
+  "index_ejs", "indexcss_ejs", "indexjs_ejs", "form_ejs",
+  "create_ejs", "createjs_ejs", "update_ejs", "updatejs_ejs", "updatecss_ejs",
+  "import_ejs", "importjs_ejs", "view_ejs",
+];
+
+const FORBIDDEN_NAMES = [
+  "group", "copy", "command", "from", "select", "distinct", "where", "year", "month", "day",
+  "ignore", "previous", "next", "start", "end", "set", "setof", "show", "size", "row", "rows",
+  "return", "order",
+];
+
+const RELATION_TYPES = ["relation", "dropdown_multi", "table", "typeahead", "dragdrop"];
+const RELATION_NAME_TYPES = ["relation", "typeahead"];
+
+const stripViewTemplates = (datas) => {
+  if (!isPlainObject(datas)) return datas;
+  VIEW_TEMPLATE_KEYS.forEach((key) => {
+    delete datas[key];
+  });
+  return datas;
+};
 
-Api.test = async (req, res) => {
-    //console.log(req.body);
-    var body = req.body;
-    res.json(body)
+const emptyDatas = () => ({
+  table: "",
+  tabs: [],
+  labels: {},
+  details: {},
+  left: [],
+  right: [],
+  oneColumn: [],
+  sorting: [],
+  properties: {},
+  hardcode_grid: "",
+});
+
+const loadDefaultTemplates = () => ({
+  router: readFileSafe(path.join(generatorApp.DIRECTORY, "routerApp.ejs")),
+  index_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "index.ejs")),
+  indexcss_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "indexcss.ejs")),
+  indexjs_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "indexjs.ejs")),
+  form_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "_form.ejs")),
+  create_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "create.ejs")),
+  createjs_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "createjs.ejs")),
+  update_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "update.ejs")),
+  updatejs_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "updatejs.ejs")),
+  import_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "import.ejs")),
+  importjs_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "importjs.ejs")),
+  view_ejs: readFileSafe(path.join(generatorApp.DIRECTORY_GENERATOR_VIEWS, "view.ejs")),
+  hardcode_grid: Model.hardcodeGrid || "",
+});
+
+const fail = (err) => {
+  console.error(err);
+  return Util.flashError(err && err.toString ? err.toString() : String(err));
 };
 
-Api.index = async (req, res) => {
-    try {
-        let datas = {table: '', tabs: [], labels: {}, details: {}, hardcode_grid: ""};
-        let table = req.body.table || "", route = "";
-        const results = req.body.results || [];
-        const fields = req.body.fields || []
-        const zFields = Util.arrayToObject(results, "table");
-        /*let json = {
-            datas: datas,
-            table: table,
-            rows: {},
-            route: "",
-            selects: Model.keys,
-        }*/
-        let json;
-        if (table) {
-            datas = zFields[table] || {}
-            if (datas.hasOwnProperty("id")) {
-                datas.details = datas.details || {};
-                datas.labels = datas.labels || {};
-                datas.tabs = datas.tabs || [];
-                datas.left = datas.left || [];
-                datas.right = datas.right || [];
-                datas.properties = datas.properties || {};
-                datas.hardcode_grid = datas.hardcode_grid || Model.hardcodeGrid;
-                datas.zapprovals = datas.zapprovals || {};
-                route = datas.route;
-                //files
-                //get contents or get it from views zgenerator/views
-                datas.router = datas.router || fs.readFileSync(generatorApp.DIRECTORY + "/routerApp.ejs", 'utf-8');
-                delete datas.index_ejs;
-                delete datas.indexcss_ejs;
-                delete datas.indexjs_ejs;
-                delete datas.form_ejs;
-                delete datas.create_ejs;
-                delete datas.createjs_ejs;
-                delete datas.update_ejs;
-                delete datas.updatejs_ejs;
-                delete datas.import_ejs;
-                delete datas.importjs_ejs;
-                delete datas.index_ejs;
-                delete datas.createjs_ejs;
-                delete datas.updatejs_ejs;
-                delete datas.importjs_ejs;
-                delete datas.view_ejs;
-                delete datas.importjs_ejs;
+const parseJson = (value, fallback = {}) => {
+  if (isPlainObject(value)) return value;
+  if (typeof value !== "string" || !value.trim()) return fallback;
+  try {
+    const parsed = JSON.parse(value);
+    return isPlainObject(parsed) ? parsed : fallback;
+  } catch (err) {
+    return fallback;
+  }
+};
 
-            }
-        }
+const escapeAttr = (value) => String(value == null ? "" : value)
+  .replace(/&/g, "&")
+  .replace(/"/g, """)
+  .replace(/</g, "&lt;");
 
-        if (zFields) {
-            let rows = await connection.query(connection.showTables);
-            let arr = [];
-            rows.map(async (item) => {
-                let obj = {}
-                for (let key in item) {
-                    let name = item[key];
-                    obj.name = name;
-                    obj.label = Util.camelize(name);
-                    if (zFields.hasOwnProperty(name)) {
-                        if (zFields[name].name) {
-                            obj.label = zFields[name].name
-                        } else {
-                            let post = {
-                                name: Util.fieldToName(name),
-                                route: name
-                            }
-                            /*await connection.update({
-                                table: "zfields",
-                                data: post,
-                                where: {
-                                    table: name
-                                }
-                            });*/
-                            zFields[name].label = Util.fieldToName(name);
-                        }
-                    } else {
-                        let properties = await zFieldsProperty(name, fields);
-                        /*await connection.insert({
-                            table: "zfields",
-                            data: properties
-                        })*/
-                        zFields[name] = properties;
-                    }
-                }
-                arr.push(obj)
-            });
-        }
-        //add javascript object ZFIELDS
-        let obj = {}
-        for (let keys in zFields) {
-            for (let key in zFields[keys]) {
-                if (key == "labels") {
-                    zFields[keys].labels = zFields[keys].labels;
-                } else if (key == "details") {
-                    zFields[keys].details = zFields[keys].details;
-                } else if (key == "properties") {
-                    zFields[keys].properties = zFields[keys].properties;
-                } else if (key == "left") {
-                    zFields[keys].left = zFields[keys].left;
-                } else if (key == "right") {
-                    zFields[keys].right = zFields[keys].right;
-                }
-            }
-        }
-        /*
-        Filter modules
-         */
-        //delete zFields.zapprovals;
-        //delete zFields.zconfig;
-        //delete zFields.zerror;
-        //delete zFields.zfields;
-        //delete zFields.zgrid;
-        //delete zFields.zmenu;
-        //delete zFields.znotification;
-        //delete zFields.zrole;
-        //delete zFields.zuser;
-        //delete zFields.zuser_company;
-        //delete zFields.zcompany;
-        //delete zFields.zreport;
-        //delete zFields.zreport_filter;
+const bootstrapColumn = (count) => `col-md-${count > 0 ? 12 / count : 12}`;
 
-        delete datas.index_ejs;
-        delete datas.indexcss_ejs;
-        delete datas.indexjs_ejs;
-        delete datas.form_ejs;
-        delete datas.create_ejs;
-        delete datas.createjs_ejs;
-        delete datas.createjs_ejs;
-        delete datas.updatecss_ejs;
-        delete datas.update_ejs;
-        delete datas.updatejs_ejs;
-        delete datas.importjs_ejs;
-        delete datas.import_ejs;
-        delete datas.view_ejs;
+const columnLR = (items, dataName) =>
+  `<div class="col-md-6"><ol class="mydragable divboxlittle" data-name="${dataName}">${items}</ol></div>`;
 
-        /*
-        End filter
-         */
-        json = {
-            datas: datas,
-            table: table,
-            rows: zFields,
-            route: route,
-            selects: Model.keys,
-        }
-        res.json(json);
-    } catch (e) {
-        console.log(e.toString());
-        res.status(400).json({message: e.toString()})
-    }
-}
+const columnOne = (items) =>
+  `<div class="row sortable"><i class="fa fa-arrows icon-float"></i><div class="col-md-12"><ol class="mydragable divboxlittle" data-name="ONE_COLUMN">${items}</ol></div></div>`;
 
-Api.modal = async (body) => {
-    try {
-        let table = body.table || "";
-        let html = '';
-        let fields = [];
-        let datas = {table: '', tabs: [], labels: {}, details: {}, left: [], right: []};
-        let count = 1;
-        let tabView = '';
-        let tabBox = '';
-        let tabUl = '';
-        let tabContent = '';
-        let left = '', right = '', oneColumn = '';
-        let hasTab = false;
-        let properties = {};
-        let rowsFields;
-        let result = body.result;
-        const others = result.others || {};
-        let othersArr = Object.keys(others) || [];
-        const hasContainer = othersArr.length > 0;
+const dragable_with_icon = (name, label, tab, leftright, type = "") => {
+  const myname = tab === "" ? name : `${name}___arr${tab}`;
+  const typeName = type && Model.keys ? (Model.keys[type] || "") : "";
+  const safeName = escapeAttr(name);
+  const safeLabel = escapeAttr(label);
+  return `<li>
+<div class="input-group">
+        <div class="input-group-prepend">
+            <span class="input-group-text modal_setting" data-type="${escapeAttr(typeName)}" data-name="${safeName}" data-label="${safeLabel}" ><i class="fa fa-cog text-info modal_setting" data-type="${escapeAttr(typeName)}" data-name="${safeName}" data-label="${safeLabel}"></i> </span>
+            <span class="input-group-text can-copy"  data-name="${safeName}" title="click to copy"><i class="fa fa-copy"></i></span>
+            <span class="input-group-text" >${safeName}</span>
+            <input type="text" class="form-control" data-name="${safeName}" name="${escapeAttr(myname)}" value="${safeLabel}">
+            <input type="hidden" name="${escapeAttr(leftright || "LEFT")}" value="${safeName}">
+        </div>
+</div><br></li>`;
+};
 
-        let leftData = others.LEFT || [];
-        let rightData = others.RIGHT || [];
-        let oneColumnData = others.ONE_COLUMN || [];
-        let leftsNew = [], rightsNew = [], oneColumnsNew = [];
-        let ALL_FIELDS = {};
+const makeItemsOl = (o, columnName, tabName, datas) => {
+  const property = datas && datas.property;
+  if (typeof o === "string") {
+    return property && property[o] && property[o].type
+      ? dragable_with_icon(o, datas.labels && datas.labels[o], tabName, columnName, property[o].type)
+      : "";
+  }
+
+  const groups = asArray(o);
+  if (!groups.some((row) => asArray(row).length)) return "";
+  const colMd = bootstrapColumn(groups.length);
+  let html = `<li class="container-nav"> <i class="fa fa-arrows icon-floating"></i><div class="row  mt-1 mb-1">`;
+  groups.forEach((row) => {
+    html += `<div class="${colMd}" style="background-color: rgba(0,0,0,.03)"><ol class="divboxlittle container-box"><li><i data-column="${columnName}" class="fa fa-plus-circle fa-2x add-container text-success"></i> </li> `;
+    asArray(row).forEach((myitem) => {
+      let field = myitem;
+      if (tabName) field = String(field).replace(`___${tabName}`, "");
+      if (property && property[field] && property[field].type) {
+        html += dragable_with_icon(field, datas.labels && datas.labels[field], tabName, columnName, property[field].type);
+      }
+    });
+    html += `</ol> </div>`;
+  });
+  html += `</div></li>`;
+  return html;
+};
 
-        if (table) {
-            rowsFields = body.rowsFields;
-            if (result.id) {
-                datas = {
-                    details: result.details || {},
-                    labels: result.labels || {},
-                    tabs: result.tabs || [],
-                    left: result.left || [],
-                    right: result.right || [],
-                    oneColumn: result.one_column || [],
-                    sorting: result.sorting || [],
-                    property: result.properties || {}
-                };
-                let details = datas.details;
-                properties = datas.property;
-                let tabs = datas.tabs;
+const renderFieldList = (list, column, tabIndex, datas, useContainer) =>
+  asArray(list).map((item) => {
+    if (useContainer) return makeItemsOl(item, column, tabIndex, datas);
+    return datas.property && datas.property[item] && datas.property[item].type
+      ? dragable_with_icon(item, datas.labels && datas.labels[item], tabIndex, column, datas.property[item].type)
+      : "";
+  }).join("");
+
+const tabFieldsFromClassic = (list, arrName) => {
+  let found = [];
+  asArray(list).forEach((item) => {
+    if (isPlainObject(item) && item[arrName]) found = item[arrName];
+  });
+  return asArray(found);
+};
 
-                // Jika ada container, gunakan containerObject untuk memproses data
-                if (hasContainer) {
-                    ALL_FIELDS = containerObject(leftData, rightData, oneColumnData, tabs);
-                }
+const zFieldsProperty = (table, fields) => {
+  const label = {};
+  const details = [];
+  const lefts = [];
+  const rights = [];
+  const nots = Util.nots || [];
+  asArray(fields).forEach((item) => {
+    if (!item || !item.Field) return;
+    label[item.Field] = Util.fieldToName(item.Field);
+    if (Util.in_array(item.Field, nots)) return;
+    details.push(item.Field);
+    if ((details.length) % 2 === 0) rights.push(item.Field);
+    else lefts.push(item.Field);
+  });
+  return {
+    table,
+    name: Util.fieldToName(table),
+    route: table,
+    labels: JSON.stringify(label),
+    details: JSON.stringify({ notabs: details }),
+    left: JSON.stringify(lefts),
+    right: JSON.stringify(rights),
+  };
+};
 
-                if (tabs.length) {
-                    hasTab = true;
-                }
+const createTable = (postData) => {
+  const json = Util.jsonSuccess("Successfully create module");
+  if (!isPlainObject(postData)) return Util.flashError("Module Name Empty", "route");
+
+  const name = String(postData.name || "").trim();
+  const route = Util.toName(postData.route);
+  if (FORBIDDEN_NAMES.includes(name)) return Util.flashError("Module Name is Forbidden, try using other module name..", "route");
+  if (!name) return Util.flashError("Module Name Empty", "route");
+  if (Util.in_array(name, configGenerator.notGenerateTable)) return Util.flashError("Module Name Exist", "route");
+  if (!route) return Util.flashError("Route Empty", "route");
+
+  const table = Util.toName(name);
+  if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(table)) {
+    return Util.flashError("Invalid table name", "route");
+  }
+
+  const labels = {
+    id: "Id",
+    company_id: "Company",
+    lock: "Lock/Unlock",
+    approval_status: "Approval Status",
+    approval_history: "Approval History",
+    created_at: "Created At",
+    updated_at: "Updated At",
+    created_by: "Created By",
+    updated_by: "Updated By",
+  };
+
+  const post = Object.assign({
+    table,
+    name,
+    route,
+    labels: JSON.stringify(labels),
+    left: "[]",
+    right: "[]",
+    sorting: "[2,1]",
+    details: JSON.stringify({ notabs: [] }),
+    hardcode_grid: Model.hardcodeGrid,
+    company_id: 1,
+  }, Api.datas);
+
+  const sql = `
+        CREATE TABLE ${table} (
+        id BIGSERIAL PRIMARY KEY,
+        company_id BIGINT NOT NULL,
+        lock smallint default 0,
+        approval_status smallint DEFAULT 1,
+        approval_history jsonb[] DEFAULT NULL,
+        updated_by BIGINT DEFAULT NULL,
+        created_by BIGINT DEFAULT NULL,
+        created_at TIMESTAMP WITHOUT TIME ZONE  DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP WITHOUT TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+        CONSTRAINT fk_${table}_company_id FOREIGN KEY (company_id) REFERENCES zcompany (id)
+
+);`;
 
-                if (hasTab) {
-                    let tabLeft = [], tabRight = [], tabOneColum = [];
+  json.post = post;
+  json.sql = sql;
+  return json;
+};
 
-                    tabUl += '<ul class="nav nav-tabs" id="myTab" role="tablist">';
-                    tabContent += '<div class="tab-content" id="myTabContent">';
-                    tabs.forEach(function (item, i) {
-                        let navlink = i == 0 ? ' active' : '';
-                        let ariaselected = i == 0 ? "true" : "false";
-                        let showActive = i == 0 ? ' show active ' : '';
-                        let n = i + 1;
-                        let arrName = 'arr' + i;
-                        let dynamicsLeft = '', dynamicsRight = '', dynamicsOneColumn = '';
+Api.test = async (req, res) => {
+  res.json(req.body || {});
+};
 
-                        if (hasContainer) {
-                            // Logika untuk container
-                            tabLeft = ALL_FIELDS.tabLeft[arrName] || [];
-                            tabRight = ALL_FIELDS.tabRight[arrName] || [];
-                            tabOneColum = ALL_FIELDS.tabOneColumn[arrName] || [];
+Api.index = async (req, res) => {
+  try {
+    const body = req.body || {};
+    const table = body.table || "";
+    const results = asArray(body.results);
+    const fields = asArray(body.fields);
+    const zFields = Util.arrayToObject(results, "table") || {};
+    let datas = emptyDatas();
+    let route = "";
+
+    if (table && zFields[table]) {
+      datas = zFields[table];
+      if (hasOwn(datas, "id")) {
+        datas.details = datas.details || {};
+        datas.labels = datas.labels || {};
+        datas.tabs = datas.tabs || [];
+        datas.left = datas.left || [];
+        datas.right = datas.right || [];
+        datas.properties = datas.properties || {};
+        datas.hardcode_grid = datas.hardcode_grid || Model.hardcodeGrid;
+        datas.zapprovals = datas.zapprovals || {};
+        route = datas.route;
+        datas.router = datas.router || readFileSafe(path.join(generatorApp.DIRECTORY, "routerApp.ejs"));
+        stripViewTemplates(datas);
+      }
+    }
 
-                            if (tabLeft.length) {
-                                tabLeft.map((o) => {
-                                    dynamicsLeft += makeItemsOl(o, "LEFT", i, datas);
-                                });
-                            }
-                            if (tabRight.length) {
-                                tabRight.map((o) => {
-                                    dynamicsRight += makeItemsOl(o, "RIGHT", i, datas);
-                                });
-                            }
-                            if (tabOneColum.length) {
-                                tabOneColum.map((o) => {
-                                    dynamicsOneColumn += makeItemsOl(o, "ONE_COLUMN", i, datas);
-                                });
-                            }
-                        } else {
-                            // Logika untuk classic
-                            if (datas.left.length) {
-                                datas.left.forEach(function (o) {
-                                    if (typeof o == "object") {
-                                        for (var key in o) {
-                                            if (key == arrName) {
-                                                tabLeft = o[key];
-                                            }
-                                        }
-                                    }
-                                });
-                            }
-                            if (datas.right.length) {
-                                datas.right.forEach(function (o) {
-                                    if (typeof o == "object") {
-                                        for (var key in o) {
-                                            if (key == arrName) {
-                                                tabRight = o[key];
-                                            }
-                                        }
-                                    }
-                                });
-                            }
-                            if (datas.oneColumn.length) {
-                                datas.oneColumn.forEach(function (o) {
-                                    if (typeof o == "object") {
-                                        for (var key in o) {
-                                            if (key == arrName) {
-                                                tabOneColum = o[key];
-                                            }
-                                        }
-                                    }
-                                });
-                            }
+    const rows = asArray(await connection.query(connection.showTables));
+    for (const item of rows) {
+      const name = item && (item.tablename || item.TABLE_NAME || Object.values(item)[0]);
+      if (!name || typeof name !== "string") continue;
+      if (zFields[name]) {
+        if (!zFields[name].name) zFields[name].label = Util.fieldToName(name);
+      } else {
+        zFields[name] = zFieldsProperty(name, fields);
+      }
+    }
 
-                            if (tabLeft.length) {
-                                tabLeft.map((o) => {
-                                    if(datas.property[o] && datas.property[o].hasOwnProperty("type") ) {
-                                        dynamicsLeft += dragable_with_icon(o, datas.labels[o], i, "LEFT", datas.property[o].type);
-                                    }
-                                });
-                            }
-                            if (tabRight.length) {
-                                tabRight.map((o) => {
-                                    if(datas.property[o] && datas.property[o].hasOwnProperty("type") ) {
-                                        dynamicsRight += dragable_with_icon(o, datas.labels[o], i, "RIGHT", datas.property[o].type);
-                                    }
-                                });
-                            }
-                            if (tabOneColum.length) {
-                                tabOneColum.map((o) => {
-                                    if(datas.property[o] && datas.property[o].hasOwnProperty("type") ) {
-                                        dynamicsOneColumn += dragable_with_icon(o, datas.labels[o], i, "ONE_COLUMN", datas.property[o].type);
-                                    }
-                                });
-                            }
-                        }
+    stripViewTemplates(datas);
+    res.json({
+      datas,
+      table,
+      rows: zFields,
+      route,
+      selects: Model.keys,
+    });
+  } catch (e) {
+    console.error(e);
+    res.status(400).json({ message: e.toString() });
+  }
+};
 
-                        tabView += `<li class="item" draggable="true"><div class='divtabs'>${n}. <span class="tabname"> ${item}</span><input type='hidden' name='tabs[]' value='${item}' /> <button type='button' class='btn btn-sm btn-info edittab' data-toggle="modal" data-target="#modal_tab" data-name="${item}" data-id="${i}" > <i class='fas fa-edit'></i> </button> <button type='button'  onclick='deleteTab(this)' class='btn btn-sm btn-danger trashtab'><i class='fas fa-trash'></i> </button></div></li>`;
-                        tabUl += `<li class="nav-item">
-                                            <a class="nav-link ${navlink}" id="tabid${i}" data-toggle="tab" href="#tabgo${i}" role="tab" aria-controls="tabgo${i}" aria-selected="${ariaselected}">${item}</a>
+Api.modal = async (body = {}) => {
+  try {
+    const table = body.table || "";
+    const result = body.result || {};
+    const others = result.others || {};
+    const hasContainer = Object.keys(others).length > 0;
+    let datas = emptyDatas();
+    let properties = {};
+    let html = "";
+    let count = 1;
+    let tabView = "";
+    let tabUl = "";
+    let tabContent = "";
+    let left = "";
+    let right = "";
+    let oneColumn = "";
+    let ALL_FIELDS = {};
+
+    if (table && result.id) {
+      datas = {
+        details: result.details || {},
+        labels: result.labels || {},
+        tabs: asArray(result.tabs),
+        left: asArray(result.left),
+        right: asArray(result.right),
+        oneColumn: asArray(result.one_column),
+        sorting: asArray(result.sorting),
+        property: result.properties || {},
+      };
+      properties = datas.property;
+      if (hasContainer) {
+        ALL_FIELDS = containerObject(others.LEFT || [], others.RIGHT || [], others.ONE_COLUMN || [], datas.tabs);
+      }
+
+      if (datas.tabs.length) {
+        tabUl += '<ul class="nav nav-tabs" id="myTab" role="tablist">';
+        tabContent += '<div class="tab-content" id="myTabContent">';
+        datas.tabs.forEach((item, i) => {
+          const arrName = `arr${i}`;
+          const navlink = i === 0 ? " active" : "";
+          const ariaselected = i === 0 ? "true" : "false";
+          const showActive = i === 0 ? " show active " : "";
+          let dynamicsLeft = "";
+          let dynamicsRight = "";
+          let dynamicsOneColumn = "";
+
+          if (hasContainer) {
+            dynamicsLeft = renderFieldList(ALL_FIELDS.tabLeft[arrName], "LEFT", i, datas, true);
+            dynamicsRight = renderFieldList(ALL_FIELDS.tabRight[arrName], "RIGHT", i, datas, true);
+            dynamicsOneColumn = renderFieldList(ALL_FIELDS.tabOneColumn[arrName], "ONE_COLUMN", i, datas, true);
+          } else {
+            dynamicsLeft = renderFieldList(tabFieldsFromClassic(datas.left, arrName), "LEFT", i, datas, false);
+            dynamicsRight = renderFieldList(tabFieldsFromClassic(datas.right, arrName), "RIGHT", i, datas, false);
+            dynamicsOneColumn = renderFieldList(tabFieldsFromClassic(datas.oneColumn, arrName), "ONE_COLUMN", i, datas, false);
+          }
+
+          tabView += `<li class="item" draggable="true"><div class='divtabs'>${i + 1}. <span class="tabname"> ${item}</span><input type='hidden' name='tabs[]' value='${escapeAttr(item)}' /> <button type='button' class='btn btn-sm btn-info edittab' data-toggle="modal" data-target="#modal_tab" data-name="${escapeAttr(item)}" data-id="${i}" > <i class='fas fa-edit'></i> </button> <button type='button'  onclick='deleteTab(this)' class='btn btn-sm btn-danger trashtab'><i class='fas fa-trash'></i> </button></div></li>`;
+          tabUl += `<li class="nav-item">
+                                            <a class="nav-link ${navlink}" id="tabid${i}" data-toggle="tab" href="#tabgo${i}" role="tab" aria-controls="tabgo${i}" aria-selected="${ariaselected}">${escapeAttr(item)}</a>
                                         </li>`;
-
-                        tabContent += `<div class="tab-pane fade ${showActive}" id="tabgo${i}" role="tabpanel" aria-labelledby="tabtabgo${i}">
+          tabContent += `<div class="tab-pane fade ${showActive}" id="tabgo${i}" role="tabpanel" aria-labelledby="tabtabgo${i}">
                                              <div class="container">
                                                     <div class="row">
                                                         <div class="col-md-6"><ol class="mydragable divbox" data-name="LEFT"  id="arr${i}">${dynamicsLeft}</ol></div>
@@ -332,864 +371,274 @@ Api.modal = async (body) => {
                                                      </div>
                                              </div>
                                       </div>`;
-                    });
-                    tabUl += '</ul>';
-                    tabContent += '</div>';
-                    count = tabs.length + 1;
-                }
-            }
-        }
-
-        // Proses data untuk left, right, dan oneColumn di luar tabs
-        if (hasContainer) {
-            // Logika untuk container
-            let datasLeft = ALL_FIELDS.left || [];
-            let datasRight = ALL_FIELDS.right || [];
-            let datasOneColumn = ALL_FIELDS.oneColumn || [];
-
-            if (datasLeft.length) {
-                datasLeft.forEach(function (item) {
-                    if(!Util.in_array(item, leftsNew)) {
-                        left += makeItemsOl(item, "LEFT", "", datas);
-                    }
-                });
-            }
-            if (datasRight.length) {
-                datasRight.forEach(function (item) {
-                    if(!Util.in_array(item, rightsNew)) {
-                        right += makeItemsOl(item, "RIGHT", "", datas);
-                    }
-                });
-            }
-            if (datasOneColumn.length) {
-                datasOneColumn.forEach(function (item) {
-                    if(!Util.in_array(item, oneColumnsNew)) {
-                        oneColumn += makeItemsOl(item, "ONE_COLUMN", "", datas);
-                    }
-                });
-            }
-        } else {
-            // Logika untuk classic
-            if (datas.left.length) {
-                datas.left.forEach(function (item) {
-                    if (properties.hasOwnProperty(item)) {
-                        left += dragable_with_icon(item, datas.labels[item], "", "LEFT", datas.property[item].type);
-                    }
-                });
-            }
-            if (datas.right.length) {
-                datas.right.forEach(function (item) {
-                    if (properties.hasOwnProperty(item)) {
-                        right += dragable_with_icon(item, datas.labels[item], "", "RIGHT", datas.property[item].type);
-                    }
-                });
-            }
-            if (datas.oneColumn.length) {
-                datas.oneColumn.forEach(function (item) {
-                    if (properties.hasOwnProperty(item)) {
-                        oneColumn += dragable_with_icon(item, datas.labels[item], "", "ONE_COLUMN", datas.property[item].type);
-                    }
-                });
-            }
-        }
-
-        datas.sorting.forEach(function (item, index) {
-            if (item == 1) {
-                html += columnOne(oneColumn);
-            } else {
-                html += `<div class="row sortable"><i class="fa fa-arrows icon-floats"></i>${columnLR(left, "LEFT")}  ${columnLR(right, "RIGHT")}</div>`;
-            }
-        });
-
-        datas.others = others;
-        let json = {}
-        json.html = html;
-        json.datas = datas;
-        json.tabview = tabView;
-        json.count = count;
-        json.tabBox = tabUl + tabContent;
-
-        return json;
-    } catch (e) {
-        console.log(e)
-        return Util.flashError(e.toString());
-    }
-};
-
-function containerObject(left,right,oneColumn,tabs = []) {
-
-    /*
-    For generator helper
-     */
-
-    try {
-        let obj = {};
-        let hasTabs = tabs.length;
-        let leftObj={},rightObj={},oneColumnObj={};
-        let leftsNew = [], rightsNew = [], oneColumnsNew = [];
-
-        if(hasTabs) {
-            tabs.forEach(function (tab, i) {
-                let arrName = `arr${i}`;
-                if (!leftObj.hasOwnProperty(arrName)) {
-                    leftObj[arrName] = [];
-                }
-                if (!rightObj.hasOwnProperty(arrName)) {
-                    rightObj[arrName] = [];
-                }
-                if (!oneColumnObj.hasOwnProperty(arrName)) {
-                    oneColumnObj[arrName] = [];
-                }
-            });
-        }
-
-        left.forEach(function (item) {
-            if(typeof item == "string") {
-                if(item.includes("___")) {
-                    let arr = item.split("___");
-                    leftObj[arr[1]].push(arr[0]);
-                    leftsNew.push(item)
-                }
-            } else {
-                let keyname = "";
-                for(let i = 0; i < item.length; i++) {
-                    let zitems = item[i];
-                    if(zitems.length) {
-                        if(zitems[0].includes("___")) {
-                            keyname = zitems[0].split("___")[1];
-                        }
-                    }
-                }
-                //console.log(keyname)
-                if(keyname) {
-                    let myarr = [];
-                    item.forEach(function (myitem) {
-                        let me = []
-                        myitem.forEach(function (inem) {
-                            if(inem.includes("___")) {
-                                me.push(inem.split("___")[0]);
-                            } else {
-                                me.push(inem);
-                            }
-                        })
-                        myarr.push(me)
-                    });
-                    leftObj[keyname].push(myarr);
-                    leftsNew.push(item)
-                } else {
-                    if(item.includes("___")) {
-                        let arr = item.split("___");
-                        leftObj[arr[1]].push(arr[0]);
-                        leftsNew.push(item)
-                    }
-                }
-            }
-        })
-
-        //right
-        right.forEach(function (item) {
-            if(typeof item == "string") {
-                if(item.includes("___")) {
-                    let arr = item.split("___");
-                    rightObj[arr[1]].push(arr[0]);
-                    rightsNew.push(item)
-                }
-            } else {
-                let keyname = "";
-                for(let i = 0; i < item.length; i++) {
-                    let zitems = item[i];
-                    if(zitems.length) {
-                        if(zitems[0].includes("___")) {
-                            keyname = zitems[0].split("___")[1];
-                        }
-                    }
-                }
-                //console.log(keyname)
-                if(keyname) {
-                    let myarr = [];
-                    item.forEach(function (myitem) {
-                        let me = []
-                        myitem.forEach(function (inem) {
-                            if(inem.includes("___")) {
-                                me.push(inem.split("___")[0]);
-                            } else {
-                                me.push(inem);
-                            }
-                        });
-                        myarr.push(me)
-                    });
-                    rightObj[keyname].push(myarr);
-                    rightsNew.push(item)
-                } else {
-                    if(item.includes("___")) {
-                        let arr = item.split("___");
-                        rightObj[arr[1]].push(arr[0]);
-                        rightsNew.push(item)
-                    }
-                }
-            }
-        })
-
-        //oneColumn
-        oneColumn.forEach(function (item) {
-            if(typeof item == "string") {
-                if(item.includes("___")) {
-                    let arr = item.split("___");
-                    oneColumnObj[arr[1]].push(arr[0]);
-                    oneColumnsNew.push(item)
-                }
-            } else {
-                let keyname = "";
-                for(let i = 0; i < item.length; i++) {
-                    let zitems = item[i];
-                    if(zitems.length) {
-                        if(zitems[0].includes("___")) {
-                            keyname = zitems[0].split("___")[1];
-                        }
-                    }
-                }
-                //console.log(keyname)
-                if(keyname) {
-                    let myarr = [];
-                    item.forEach(function (myitem) {
-                        let me = []
-                        myitem.forEach(function (inem) {
-                            if(inem.includes("___")) {
-                                me.push(inem.split("___")[0]);
-                            } else {
-                                me.push(inem);
-                            }
-                        });
-                        myarr.push(me)
-                    });
-                    oneColumnObj[keyname].push(myarr);
-                    oneColumnsNew.push(item)
-                } else {
-                    if(item.includes("___")) {
-                        let arr = item.split("___");
-                        oneColumnObj[arr[1]].push(arr[0]);
-                        oneColumnsNew.push(item)
-                    }
-                }
-            }
         });
-
-        //caption left or right
-        let datasLeft = left.filter(x => !leftsNew.includes(x));
-        let datasRight = right.filter(x => !rightsNew.includes(x));
-        let datasOneColumn = oneColumn.filter(x => !oneColumnsNew.includes(x));
-
-        let myObject = {
-            left : datasLeft || [],
-            right : datasRight || [],
-            oneColumn : datasOneColumn || [],
-            tabLeft : leftObj || [],
-            tabRight : rightObj|| [],
-            tabOneColumn : oneColumnObj || [],
-        };
-
-        return myObject;
-
-    } catch (e) {
-        console.log(e)
-        return {};
+        tabUl += "</ul>";
+        tabContent += "</div>";
+        count = datas.tabs.length + 1;
+      }
     }
-}
-
 
-const makeItemsOl = (o,columnName,tabName, datas) => {
-    let html = '';
-    if(typeof o == "string") {
-        if (datas.property[o] && datas.property[o].hasOwnProperty("type")) {
-            html += dragable_with_icon(o, datas.labels[o], tabName, columnName, datas.property[o].type);
-        }
+    if (hasContainer) {
+      left = renderFieldList(ALL_FIELDS.left, "LEFT", "", datas, true);
+      right = renderFieldList(ALL_FIELDS.right, "RIGHT", "", datas, true);
+      oneColumn = renderFieldList(ALL_FIELDS.oneColumn, "ONE_COLUMN", "", datas, true);
     } else {
-        let hasValues = o.some( function (a) { return a.length });
-        if(hasValues) {
-            let columncount = o.length;
-            let col_md = bootstrapColumn(columncount);
-            let myhtml = `<li class="container-nav"> <i class="fa fa-arrows icon-floating"></i><div class="row  mt-1 mb-1">`;
-            for(let i =1; i <= columncount; i++) {
-                let n_i = i -1;
-                myhtml += `<div class="${col_md}" style="background-color: rgba(0,0,0,.03)"><ol class="divboxlittle container-box"><li><i data-column="${columnName}" class="fa fa-plus-circle fa-2x add-container text-success"></i> </li> `;
-                if(o[n_i].length) {
-                    o[n_i].forEach(function (myitem) {
-                        if(tabName) {
-                            myitem = myitem.replace('___'+tabName,'')
-                        }
-                        if (datas.property[myitem] && datas.property[myitem].hasOwnProperty("type")) {
-                            myhtml += dragable_with_icon(myitem, datas.labels[myitem], tabName, columnName, datas.property[myitem].type);
-                        }
-                    })
-                }
-                myhtml += `</ol> </div>`;
-            }
-            myhtml += `</div></li>`;
-            html += myhtml;
-        }
-    }
-    return html;
-}
-
-const bootstrapColumn = (count) => {
-    return `col-md-${(12 / count)}`
-}
-
-Api.create = (body) => {
-    return createTable(body);
-}
-
-Api.properties = (body) => {
-    try {
-        //const body = req.body;
-        //console.log(req.body);
-        //console.log("ok")
-        //return;
-        const details = body.details || [];
-        const rows = body.rows;
-        var json = Util.jsonSuccess("Success to update");
-        if (details.length == 0) {
-            json = Util.flashError("Please add some data");
-            return json;
-        }
-        const hardcode_grid = body.hardcode_grid || "";
-
-        let left = [], right = [], lefts = [], rights = [], oneColumn = [], oneColumns = [], tabLeft = {},tabRight = {};
-        const obj = {}
-        obj.notabs = []
-        let labels = {};
-        let hasTab = false;
-        let tabs = {};
-
-        //check if table is exist or not
-        const checks = body.checks;
-        json.create_table = {};
-        if (!checks) {
-            const create = createTable(rows[0], true);
-            json.create_table.sql = create.datas.sql;
-            json.create_table.post = create.datas.post;
+      asArray(datas.left).forEach((item) => {
+        if (hasOwn(properties, item)) {
+          left += dragable_with_icon(item, datas.labels[item], "", "LEFT", datas.property[item].type);
         }
-        labels = rows[0].labels || {};
-        tabs = !rows[0].tabs ? [] : rows[0].tabs;
-        if (tabs.length) {
-            hasTab = true;
-            tabs.forEach(function (item, i) {
-                obj['arr' + i] = [];
-                tabLeft['arr' + i] = [];
-                tabRight['arr' + i] = [];
-            });
+      });
+      asArray(datas.right).forEach((item) => {
+        if (hasOwn(properties, item)) {
+          right += dragable_with_icon(item, datas.labels[item], "", "RIGHT", datas.property[item].type);
         }
-        details.forEach(function (item, index) {
-            let name = item.name, value = item.value;
-            if (name.includes("___")) {
-                const explode = name.split("___");
-                obj[explode[1]].push(explode[0])
-                labels[explode[0]] = value;
-            } else {
-                if (name == 'LEFT') {
-                    left.push(value);
-                } else if (name == 'RIGHT') {
-                    right.push(value);
-                } else if (name == 'ONE_COLUMN') {
-                    oneColumn.push(value);
-                } else {
-                    obj['notabs'].push(name);
-                    labels[name] = value;
-                }
-            }
-        });
-
-        const sorting = details[1].name == "ONE_COLUMN" ? [1, 2] : [2, 1];
-        for (let key in obj) {
-            if (key == "notabs") {
-                lefts = obj[key].filter((item) => left.includes(item));
-                rights = obj[key].filter((item) => right.includes(item));
-                oneColumns = obj[key].filter((item) => oneColumn.includes(item));
-            } else {
-                let myobj = {}
-                myobj[key] = obj[key].filter((item) => left.includes(item));
-                lefts.push(myobj);
-
-                myobj = {}
-                myobj[key] = obj[key].filter((item) => right.includes(item));
-                rights.push(myobj);
-
-                myobj = {}
-                myobj[key] = obj[key].filter((item) => oneColumn.includes(item));
-                oneColumns.push(myobj);
-            }
+      });
+      asArray(datas.oneColumn).forEach((item) => {
+        if (hasOwn(properties, item)) {
+          oneColumn += dragable_with_icon(item, datas.labels[item], "", "ONE_COLUMN", datas.property[item].type);
         }
+      });
+    }
 
-        const post = {}
-        post.labels = JSON.stringify(labels);
-        post.details = JSON.stringify(obj);
-        post.left = JSON.stringify(lefts);
-        post.right = JSON.stringify(rights);
-        post.one_column = JSON.stringify(oneColumns);
-        post.sorting = JSON.stringify(sorting);
-        post.hardcode_grid = hardcode_grid;
-        //files
-
-        //get contents or get it from views zgenerator/views
-        post.router = body.router || fs.readFileSync(generatorApp.DIRECTORY + "/routerApp.ejs", 'utf-8');
-        post.index_ejs = body.index_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/index.ejs", 'utf-8');
-        post.indexcss_ejs = body.indexcss_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/indexcss.ejs", 'utf-8');
-        post.indexjs_ejs = body.indexjs_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/indexjs.ejs", 'utf-8');
-        post.form_ejs = body.form_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/_form.ejs", 'utf-8');
-        post.create_ejs = body.create_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/create.ejs", 'utf-8');
-        post.createjs_ejs = body.createjs_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/createjs.ejs", 'utf-8');
-        post.update_ejs = body.update_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/update.ejs", 'utf-8');
-        post.updatejs_ejs = body.updatejs_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/updatejs.ejs", 'utf-8');
-        post.import_ejs = body.import_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/import.ejs", 'utf-8');
-        post.importjs_ejs = body.importjs_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/importjs.ejs", 'utf-8');
-        post.view_ejs = body.view_ejs || fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/view.ejs", 'utf-8');
+    asArray(datas.sorting).forEach((item) => {
+      html += Number(item) === 1
+        ? columnOne(oneColumn)
+        : `<div class="row sortable"><i class="fa fa-arrows icon-floats"></i>${columnLR(left, "LEFT")}  ${columnLR(right, "RIGHT")}</div>`;
+    });
 
-        if (post.indexjs_ejs.indexOf(`</script>`) > -1) {
-            post.indexjs_ejs = Util.replaceAll(post.indexjs_ejs, `</script>`, `</script>`);
-        }
-        if (post.createjs_ejs.indexOf(`</script>`) > -1) {
-            post.createjs_ejs = Util.replaceAll(post.createjs_ejs, `</script>`, `</script>`);
-        }
-        if (post.updatejs_ejs.indexOf(`</script>`) > -1) {
-            post.updatejs_ejs = Util.replaceAll(post.updatejs_ejs, `</script>`, `</script>`);
-        }
-        if (post.importjs_ejs.indexOf(`</script>`) > -1) {
-            post.importjs_ejs = Util.replaceAll(post.importjs_ejs, `</script>`, `</script>`);
-        }
-        if (post.view_ejs.indexOf(`</script>`) > -1) {
-            post.view_ejs = Util.replaceAll(post.view_ejs, `</script>`, `</script>`);
-        }
-        json.updateFields = {
-            post: post,
-            id: rows[0].id
-        }
-        return json;
-    } catch (e) {
-        console.log(e)
-        //res.status(400).json({message: e.toString()})
-        return Util.flashError(e.toString());
-    }
+    datas.others = others;
+    return {
+      html,
+      datas,
+      tabview: tabView,
+      count,
+      tabBox: tabUl + tabContent,
+    };
+  } catch (e) {
+    return fail(e);
+  }
 };
 
-Api.generate = async (body) => {
-    try {
-        console.log('generate');
-        const json = Util.jsonSuccess("Success");
-        const result = body.result;
-        const columns = body.columns;
-        const constraintList = body.constraintList;
-        const files = {};
-        const model = await generatorApp.CREATE_MODEL_API(columns, constraintList, result);
-        const MYMODEL = model.modelObj;
-        files.model = model;
-        files.route = generatorApp.CREATE_ROUTER_API(MYMODEL, result);
-        files.views = generatorApp.CREATE_VIEWS_API(MYMODEL, result);
-        json.files = files;
-        return json;
-    } catch (e) {
-        console.log(e)
-        return Util.flashError(e.toString());
+Api.create = (body) => createTable(body);
+Api.createTable = (data) => createTable(data);
+
+Api.properties = (body = {}) => {
+  try {
+    const details = asArray(body.details);
+    const rows = asArray(body.rows);
+    if (!details.length) return Util.flashError("Please add some data");
+    if (!rows[0]) return Util.flashError("Please add some data");
+
+    const json = Util.jsonSuccess("Success to update");
+    json.create_table = {};
+    if (!body.checks) {
+      const create = createTable(rows[0]);
+      json.create_table.sql = create.sql;
+      json.create_table.post = create.post;
     }
-};
-
-Api.create_field = (body) => {
-    let json = Util.jsonSuccess("Successfully create field");
-    console.log(body);
-    //return false;
-    try {
-        let table = body.table || "", position = body.position || "LEFT", label = body.name || "",
-            type = body.type || "", name = Util.toName(label) || "";
-        table = table.trim(), label = label.trim(), type = type.trim(), name = name.trim();
-
-        let others = body.others ? JSON.parse(body.others) : {};
-        let zFields = body.zFields || [];
-        let details = zFields[0].details;
-        let labels = zFields[0].labels || {};
-        let notabs = details.notabs;
-        let left = zFields[0].left || [];
-        let right = zFields[0].right || [];
-        let oneColumn = zFields[0].one_column || [];
-
-        let all = [...left, ...right, ...oneColumn];
-        all.push('lock');
-        let properties = zFields[0].properties || {};
 
-        //add name with suffix _id if relate to other table
-        const arr = ['relation', 'typeahead'];
-        if (Util.in_array(type, arr)) {
-            name = name + "_id";
-        }
-        if (label.length < 2) {
-            return Util.flashError("Field Name is not complete");
-        }
-        if (Util.in_array(name, all)) {
-            return Util.flashError("Name exist", "");
-        }
-        //set position if table go to one column
-        if (type == "table") {
-            oneColumn.push(name);
-        } else {
-            if (position == "LEFT") {
-                left.push(name);
-            } else if (position == "RIGHT") {
-                right.push(name)
-            } else {
-                oneColumn.push(name);
-            }
-        }
+    const labels = rows[0].labels || {};
+    const tabs = asArray(rows[0].tabs);
+    const obj = { notabs: [] };
+    const tabLeft = {};
+    const tabRight = {};
+    const left = [];
+    const right = [];
+    const oneColumn = [];
+
+    tabs.forEach((_, i) => {
+      obj[`arr${i}`] = [];
+      tabLeft[`arr${i}`] = [];
+      tabRight[`arr${i}`] = [];
+    });
 
-        /*   console.log(JSON.stringify(left))
-           console.log(JSON.stringify(right))
-           console.log(JSON.stringify(oneColumn))
-           console.log(position);*/
+    details.forEach((item) => {
+      if (!item || item.name == null) return;
+      const name = item.name;
+      const value = item.value;
+      if (String(name).includes("___")) {
+        const explode = String(name).split("___");
+        if (!obj[explode[1]]) obj[explode[1]] = [];
+        obj[explode[1]].push(explode[0]);
+        labels[explode[0]] = value;
+        return;
+      }
+      if (name === "LEFT") left.push(value);
+      else if (name === "RIGHT") right.push(value);
+      else if (name === "ONE_COLUMN") oneColumn.push(value);
+      else {
+        obj.notabs.push(name);
+        labels[name] = value;
+      }
+    });
 
-        let othersLength = Object.keys(others).length;
-        if(othersLength) {
-            if (position == "LEFT") {
-                others.LEFT.push(name);
-            } else if (position == "RIGHT") {
-                others.RIGHT.push(name);
-            } else {
-                others.ONE_COLUMN.push(name);
-            }
-        }
-        //return false;
+    const sorting = details[1] && details[1].name === "ONE_COLUMN" ? [1, 2] : [2, 1];
+    let lefts = [];
+    let rights = [];
+    let oneColumns = [];
+    Object.keys(obj).forEach((key) => {
+      const filteredLeft = obj[key].filter((item) => left.includes(item));
+      const filteredRight = obj[key].filter((item) => right.includes(item));
+      const filteredOne = obj[key].filter((item) => oneColumn.includes(item));
+      if (key === "notabs") {
+        lefts = filteredLeft;
+        rights = filteredRight;
+        oneColumns = filteredOne;
+      } else {
+        lefts.push({ [key]: filteredLeft });
+        rights.push({ [key]: filteredRight });
+        oneColumns.push({ [key]: filteredOne });
+      }
+    });
 
-        notabs.push(name);
-        let defaultValues = Model[type].defaultValues;
-        if (defaultValues.hasOwnProperty("tabindex")) {
-            defaultValues.tabindex = Object.keys(properties).length + 1;
-        }
-        if (defaultValues.hasOwnProperty("required")) {
-            defaultValues.hidden = false;
-        }
-        properties[name] = {
-            label: label,
-            type: type,
-            values: defaultValues
-        }
-        labels[name] = label;
+    const defaults = loadDefaultTemplates();
+    const post = {
+      labels: JSON.stringify(labels),
+      details: JSON.stringify(obj),
+      left: JSON.stringify(lefts),
+      right: JSON.stringify(rights),
+      one_column: JSON.stringify(oneColumns),
+      sorting: JSON.stringify(sorting),
+      hardcode_grid: body.hardcode_grid || "",
+      router: body.router || defaults.router,
+      index_ejs: body.index_ejs || defaults.index_ejs,
+      indexcss_ejs: body.indexcss_ejs || defaults.indexcss_ejs,
+      indexjs_ejs: body.indexjs_ejs || defaults.indexjs_ejs,
+      form_ejs: body.form_ejs || defaults.form_ejs,
+      create_ejs: body.create_ejs || defaults.create_ejs,
+      createjs_ejs: body.createjs_ejs || defaults.createjs_ejs,
+      update_ejs: body.update_ejs || defaults.update_ejs,
+      updatejs_ejs: body.updatejs_ejs || defaults.updatejs_ejs,
+      import_ejs: body.import_ejs || defaults.import_ejs,
+      importjs_ejs: body.importjs_ejs || defaults.importjs_ejs,
+      view_ejs: body.view_ejs || defaults.view_ejs,
+    };
 
-        //for relation we need to override values
-        const relations = ["relation", "dropdown_multi", "table", "typeahead","dragdrop"];
-        if (Util.in_array(type, relations)) {
-            var propertyValue = properties[name].values || {}
-            var relationtable = body.relationtable || "";
-            var relationfield = body.relationfield || "";
-            var relationfields = body.relationfields || "";
-            var relationconcat = body.relationconcat || "";
-            if (!relationtable.length) {
-                return Util.flashError("Table Name empty!");
-            }
-            if (type != "table") {
-                if (!relationfield.length) {
-                    return Util.flashError("Label relation empty!");
-                }
-            }
-            propertyValue["table"] = relationtable;
-            if (type != "table") {
-                propertyValue["name"] = relationfield;
-                if (relationconcat == "CONCAT()") {
-                    propertyValue["concat"] = `CONCAT(${relationfield})`;
-                } else {
-                    propertyValue["concat"] = relationconcat;
-                }
-            }
-            //additional dropdown chain for first time
-            //TODO simple code
-            if (relationfields) {
-                propertyValue["field"] = relationfields;
-            }
-            properties[name].values = propertyValue;
-        }
-        json.post = {
-            left: JSON.stringify(left),
-            right: JSON.stringify(right),
-            one_column: JSON.stringify(oneColumn),
-            properties: JSON.stringify(properties),
-            details: JSON.stringify({notabs: notabs}),
-            labels: JSON.stringify(labels),
-            others : JSON.stringify(others)
-        };
-        //await connection.update({table: 'zfields', where: {table: table}, data: post})
-    } catch (err) {
-        console.log(err.toString())
-        json = Util.flashError(err.toString())
-    }
+    json.updateFields = { post, id: rows[0].id };
     return json;
-}
-
-
-Api.modal_settings = (body) => {
-    try {
-        const json = Util.jsonSuccess("Success")
-        const name = body.name;
-        //console.log(body);
-        let html = "";
-        let result = body.result;
-        let properties = result.properties ? result.properties : {};
-        let property = !properties[name] ? {} : properties[name];
-        let type = property.type;
-        //html += `<input type="hidden"  value="${req.csrfToken()}" >`;
-        html += Model.buildWidget(name, type, property.values || {});
-        json.html = html;
-        return json;
-    } catch (e) {
-        console.log(e)
-        return Util.flashError(e.toString());
-    }
-}
-
-
-Api.reset = (req,res)=> {
-    res.json(Api.datas)
-}
-
-Api.datas = {
-    router : fs.readFileSync(generatorApp.DIRECTORY + "/routerApp.ejs", 'utf-8'),
-    index_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/index.ejs", 'utf-8'),
-    indexcss_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/indexcss.ejs", 'utf-8'),
-    indexjs_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/indexjs.ejs", 'utf-8'),
-    form_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/_form.ejs", 'utf-8'),
-    create_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/create.ejs", 'utf-8'),
-    createjs_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/createjs.ejs", 'utf-8'),
-    update_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/update.ejs", 'utf-8'),
-    updatejs_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/updatejs.ejs", 'utf-8'),
-    import_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/import.ejs", 'utf-8'),
-    importjs_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/importjs.ejs", 'utf-8'),
-    view_ejs : fs.readFileSync(generatorApp.DIRECTORY_GENERATOR_VIEWS + "/view.ejs", 'utf-8'),
-    hardcode_grid : Model.hardcodeGrid
-}
-
-const replaceScript = (string) => {
-    if (!string) {
-        return "";
-    }
-    let html = string;
-    if (string.indexOf("script") > -1) {
-        html = Util.replaceAll(string, `</script>`, `</script>`)
-    }
-    return html;
-}
-
-Api.createTable =(data) => {
-    return createTable(data);
+  } catch (e) {
+    return fail(e);
+  }
 };
 
-const createTable = (postData, isIgnore) => {
-    isIgnore = isIgnore || false;
-    let json = Util.jsonSuccess("Successfully create module");
-    let labels = {
-        id: "Id",
-        company_id: "Company",
-        lock:"Lock/Unlock",
-        approval_status:"Approval Status",
-        approval_history:"Approval History",
-        created_at: "Created At",
-        updated_at: "Updated At",
-        created_by: "Created By",
-        updated_by: "Updated By"
+Api.generate = async (body = {}) => {
+  try {
+    const result = body.result || {};
+    const model = await generatorApp.CREATE_MODEL_API(body.columns, body.constraintList, result);
+    return {
+      ...Util.jsonSuccess("Success"),
+      files: {
+        model,
+        route: generatorApp.CREATE_ROUTER_API(model.modelObj, result),
+        views: generatorApp.CREATE_VIEWS_API(model.modelObj, result),
+      },
     };
+  } catch (e) {
+    return fail(e);
+  }
+};
 
-    let route = Util.toName(postData.route);
-    let name = postData.name;
-    name = name.trim();
-    let forbidden = ['group','copy','command','from','select','distinct','where','year','month','day','ignore','previous','next',
-        'start','end','set','setof','show','size','row','rows','return','order'];
-    if(forbidden.includes(name)) {
-        json = Util.flashError("Module Name is Forbidden, try using other module name..", "route");
-        return json;
-    }
-    if (!name.length) {
-        json = Util.flashError("Module Name Empty", "route");
-        return json;
-    }
-    if (Util.in_array(name, configGenerator.notGenerateTable)) {
-        json = Util.flashError("Module Name Exist", "route");
-        return json;
-    }
-    if (!route.length) {
-        json = Util.flashError("Route Empty", "route");
-        return json;
-    }
-    try {
-        const datas = Api.datas;
-        let post = {
-            table: Util.toName(name),
-            name: name,
-            route: route,
-            labels: JSON.stringify(labels),
-            left: "[]",
-            right: "[]",
-            sorting: "[2,1]",
-            details: JSON.stringify({
-                notabs: []
-            }),
-            hardcode_grid: Model.hardcodeGrid,
-            company_id : 1,
-        }
-        for(let key in datas) {
-            post[key] = datas[key];
-        }
-        //console.log(datas.router);
-
-        let sql = ` 
-        CREATE TABLE ${post.table} (
-        id BIGSERIAL PRIMARY KEY,
-        company_id BIGINT NOT NULL,
-        lock smallint default 0,
-        approval_status smallint DEFAULT 1,
-        approval_history jsonb[] DEFAULT NULL,
-        updated_by BIGINT DEFAULT NULL,
-        created_by BIGINT DEFAULT NULL,
-        created_at TIMESTAMP WITHOUT TIME ZONE  DEFAULT CURRENT_TIMESTAMP,
-        updated_at TIMESTAMP WITHOUT TIME ZONE DEFAULT CURRENT_TIMESTAMP,
-        CONSTRAINT fk_${post.table}_company_id FOREIGN KEY (company_id) REFERENCES zcompany (id)
-
-);`;
-        console.log(sql)
-        //await connection.query(sql);
-        json.post = post;
-        json.sql = sql;
-    } catch (e) {
-        json = Util.flashError(e.toString(), "")
-    }
-    //console.log(JSON.stringify(json))
-    return json
-}
-
-const columnLR = (items, dataName) => {
-    return `<div class="col-md-6"><ol class="mydragable divboxlittle" data-name="${dataName}">${items}</ol></div>`;
-}
-
-const columnOne = (items) => {
-    return `<div class="row sortable"><i class="fa fa-arrows icon-float"></i><div class="col-md-12"><ol class="mydragable divboxlittle" data-name="ONE_COLUMN">${items}</ol></div></div>`;
-}
-
-/*
-const fieldsTable = (rowsFields) => {
-    let rows = generateFields(rowsFields);
-    let arr = [];
-    if (rows.length > 0) {
-        for (let i = 0; i < rows.length; i++) {
-            if (!Util.in_array(rows[i].Field, config.generator.notRenderField))
-                arr.push({name: rows[i].Field, label: Util.fieldToName(rows[i].Field)});
-        }
-    }
-    return arr;
-}*/
-
-const generateFields = async (rowsFields) => {
-    let rows = []
-    //let sql = connection.describeTable(table);
-    //let rowsFields = await connection.query(sql);
-    for (let k = 0; k < rowsFields.length; k++) {
-        let obj = rowsFields[k];
-        let Type = obj.Type;
-        if (Type.indexOf("character varying") > -1) {
-            obj.Type = Util.replaceAll(Type, "character varying", "varchar");
-        } else if (Type.indexOf("integer()") > -1) {
-            obj.Type = "int(11)";
-        } else if (Type.indexOf("smallint()") > -1) {
-            obj.Type = "int(4)";
-        } else if (Type.indexOf("()")) {
-            obj.Type = Util.replaceAll(Type, "()", "");
-        }
-
-        rows.push(obj)
-    }
-    return rows;
-}
-
-//drop down chains
-/*
-const chainings = (results, rows, arr) => {
-    //var results = await connection.query(connection.showFields(table));
-    var obj = {};
-    var tableObj = {}
-    var ret = {}
-    for (var i = 0; i < results.length; i++) {
-        var result = results[i];
-        if (Util.in_array(result.COLUMN_NAME, arr)) {
-            obj[result.COLUMN_NAME] = {
-                table: result.REFERENCED_TABLE_NAME
-            }
-            tableObj[result.REFERENCED_TABLE_NAME] = result.COLUMN_NAME;
-        }
-    }
-
-    for (var key in obj) {
-        //var rows = await connection.query(connection.showFields(obj[key].table));
-        rows.forEach(function (row) {
-            for (var q in obj) {
-                console.log(row.REFERENCED_TABLE_NAME + ' == ' + obj[q].table)
-                if (row.REFERENCED_TABLE_NAME == obj[q].table) {
-                    if (!obj[q].chains) {
-                        obj[q].chains = {};
-                    }
-                    obj[q].chains[key] = {
-                        column: row.COLUMN_NAME,
-                        table: row.TABLE_NAME
-                    }
-                }
-            }
-        });
+Api.create_field = (body = {}) => {
+  let json = Util.jsonSuccess("Successfully create field");
+  try {
+    const position = body.position || "LEFT";
+    const label = String(body.name || "").trim();
+    const type = String(body.type || "").trim();
+    let name = String(Util.toName(label) || "").trim();
+    const others = parseJson(body.others, {});
+    const zFields = asArray(body.zFields);
+    const current = zFields[0];
+    if (!current) return Util.flashError("Field data is empty");
+    if (label.length < 2) return Util.flashError("Field Name is not complete");
+    if (!type || !Model[type] || !Model[type].defaultValues) return Util.flashError("Invalid field type");
+
+    if (Util.in_array(type, RELATION_NAME_TYPES)) name = `${name}_id`;
+
+    const details = current.details || { notabs: [] };
+    const labels = current.labels || {};
+    const notabs = asArray(details.notabs);
+    const left = asArray(current.left);
+    const right = asArray(current.right);
+    const oneColumn = asArray(current.one_column);
+    const properties = isPlainObject(current.properties) ? current.properties : {};
+    const all = [...left, ...right, ...oneColumn, "lock"];
+    if (Util.in_array(name, all)) return Util.flashError("Name exist", "");
+
+    if (type === "table" || (position !== "LEFT" && position !== "RIGHT")) oneColumn.push(name);
+    else if (position === "LEFT") left.push(name);
+    else right.push(name);
+
+    const hasOthers = Object.keys(others).length > 0;
+    others.LEFT = asArray(others.LEFT);
+    others.RIGHT = asArray(others.RIGHT);
+    others.ONE_COLUMN = asArray(others.ONE_COLUMN);
+    if (hasOthers) {
+      if (position === "LEFT") others.LEFT.push(name);
+      else if (position === "RIGHT") others.RIGHT.push(name);
+      else others.ONE_COLUMN.push(name);
     }
-    return obj;
-}
-*/
 
-const zFieldsProperty = async (table, fields) => {
-    let data = {}
-    data.table = table;
-    data.name = Util.fieldToName(table);
-    data.route = table;
-    let label = {}
-    let details = [], lefts = [], rights = [];
-    let nots = Util.nots;
-    //let fields = await connection.query(connection.showFullFields(table));
-    fields.forEach(function (item) {
-        label[item.Field] = Util.fieldToName(item.Field);
-    });
-    data.labels = JSON.stringify(label);
-    let num = 1;
-    fields.forEach(function (item) {
-        if (!Util.in_array(item.Field, nots)) {
-            details.push(item.Field);
-            if (num % 2 == 0) {
-                rights.push(item.Field)
-            } else {
-                lefts.push(item.Field)
-            }
-            num++;
-        }
-    });
-    let notabs = {
-        notabs: details
+    notabs.push(name);
+    const defaultValues = { ...(Model[type].defaultValues || {}) };
+    if (hasOwn(defaultValues, "tabindex")) defaultValues.tabindex = Object.keys(properties).length + 1;
+    if (hasOwn(defaultValues, "required")) defaultValues.hidden = false;
+    properties[name] = { label, type, values: defaultValues };
+    labels[name] = label;
+
+    if (Util.in_array(type, RELATION_TYPES)) {
+      const propertyValue = properties[name].values || {};
+      const relationtable = body.relationtable || "";
+      const relationfield = body.relationfield || "";
+      if (!relationtable.length) return Util.flashError("Table Name empty!");
+      if (type !== "table" && !relationfield.length) return Util.flashError("Label relation empty!");
+      propertyValue.table = relationtable;
+      if (type !== "table") {
+        propertyValue.name = relationfield;
+        propertyValue.concat = body.relationconcat === "CONCAT()" ? `CONCAT(${relationfield})` : body.relationconcat;
+      }
+      if (body.relationfields) propertyValue.field = body.relationfields;
+      properties[name].values = propertyValue;
     }
 
-    data.details = JSON.stringify(notabs);
-    data.left = JSON.stringify(lefts);
-    data.right = JSON.stringify(rights);
-    return data;
+    json.post = {
+      left: JSON.stringify(left),
+      right: JSON.stringify(right),
+      one_column: JSON.stringify(oneColumn),
+      properties: JSON.stringify(properties),
+      details: JSON.stringify({ notabs }),
+      labels: JSON.stringify(labels),
+      others: JSON.stringify(others),
+    };
+    return json;
+  } catch (err) {
+    return fail(err);
+  }
 };
 
+Api.modal_settings = (body = {}) => {
+  try {
+    const result = body.result || {};
+    const properties = result.properties || {};
+    const property = properties[body.name] || {};
+    return {
+      ...Util.jsonSuccess("Success"),
+      html: Model.buildWidget(body.name, property.type, property.values || {}),
+    };
+  } catch (e) {
+    return fail(e);
+  }
+};
 
-const dragable_with_icon = (name, label, tab, leftright, type = "") => {
-    let myname = tab === "" ? name : name + "___arr" + tab;
-    leftright = leftright || "LEFT";
-    var typeName = type ? Model.keys[type] : "";
-    return `<li>
-<div class="input-group">
-        <div class="input-group-prepend">
-            <span class="input-group-text modal_setting" data-type="${typeName}" data-name="${name}" data-label="${label}" ><i class="fa fa-cog text-info modal_setting" data-type="${typeName}" data-name="${name}" data-label="${label}"></i> </span>
-            <span class="input-group-text can-copy"  data-name="${name}" title="click to copy"><i class="fa fa-copy"></i></span>
-            <span class="input-group-text" >${name}</span>
-            <input type="text" class="form-control" data-name="${name}" name="${myname}" value="${label}">
-            <input type="hidden" name="${leftright}" value="${name}">
-        </div>
-</div><br></li>`;
+Api.reset = (req, res) => {
+  res.json(Api.datas);
 };
 
+Object.defineProperty(Api, "datas", {
+  enumerable: true,
+  get() {
+    if (!Api._datas) Api._datas = loadDefaultTemplates();
+    return Api._datas;
+  },
+});
 
 module.exports = Api;