blixify-ui-web 0.1.137 → 0.1.139

package/lib/components/data/dataTemplate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAMN,MAAM,OAAO,CAAC;AAkBf,OAAO,EAAE,MAAM,EAAU,MAAM,oBAAoB,CAAC;AAKpD,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAWvD,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAItD,OAAO,EAAmB,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAGpE,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAC5B,OAAO,CAAC,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,OAAO,EAC1B,IAAI,CAAC,EAAE,MAAM,KACV,MAAM,EAAE,CAAC;IACd,2BAA2B,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;CAC9C;AAED,UAAU,IAAI;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAM,SAAQ,SAAS;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,YAAY,CAAC,EAAE,GAAG,CAAC;QACnB,IAAI,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,GAAG,CAAC;QACZ,UAAU,EAAE,GAAG,CAAC;QAChB,UAAU,CAAC,EAAE,GAAG,CAAC;KAClB,CAAC;IACF,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA6DD,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,qBA8pGxC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAMN,MAAM,OAAO,CAAC;AAkBf,OAAO,EAAE,MAAM,EAAU,MAAM,oBAAoB,CAAC;AAKpD,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAYvD,OAAO,EAAS,IAAI,EAAE,MAAM,cAAc,CAAC;AAI3C,OAAO,EAAmB,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAEpE,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAC5B,OAAO,CAAC,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,OAAO,EAC1B,IAAI,CAAC,EAAE,MAAM,KACV,MAAM,EAAE,CAAC;IACd,2BAA2B,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;CAC9C;AAED,UAAU,IAAI;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAM,SAAQ,SAAS;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,YAAY,CAAC,EAAE,GAAG,CAAC;QACnB,IAAI,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,GAAG,CAAC;QACZ,UAAU,EAAE,GAAG,CAAC;QAChB,UAAU,CAAC,EAAE,GAAG,CAAC;KAClB,CAAC;IACF,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAoCD,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,qBAg8FxC"}

package/lib/components/data/dataTemplate/index.js

@@ -110,7 +110,7 @@ var breadcrumb_1 = require("../../navigation/breadcrumb");
 var tabs_1 = require("../../navigation/tabs");
 var link_1 = require("../../structure/link");
 var display_1 = require("../display");
-var readQuery_1 = require("../readQuery");
+var queryForm_1 = require("../queryForm");
 var readQueryHoc_1 = require("../readQueryHoc");
 var utils_1 = require("../utils");
 var writeQuery_1 = require("../writeQuery");
@@ -137,24 +137,6 @@ var queryTableHeader = [
         title: "Delete",
     },
 ];
-var queryType = [
-    {
-        key: "=",
-        label: "=",
-    },
-    {
-        key: ">",
-        label: ">",
-    },
-    {
-        key: "<",
-        label: "<",
-    },
-    {
-        key: "><",
-        label: "><",
-    },
-];
 function DataTemplate(props) {
     var _this = this;
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -192,37 +174,31 @@ function DataTemplate(props) {
     var _4 = (0, react_1.useState)(false), sortModal = _4[0], setSortModal = _4[1];
     var _5 = (0, react_1.useState)(false), filterModal = _5[0], setFilterModal = _5[1];
     var _6 = (0, react_1.useState)(false), addTabModal = _6[0], setAddTabModal = _6[1];
+    var _7 = (0, react_1.useState)(false), queryForm = _7[0], setQueryForm = _7[1];
     //INFO : Used by Export
-    var _7 = (0, react_1.useState)(null), csvFile = _7[0], setCSVFile = _7[1];
-    var _8 = (0, react_1.useState)([]), csvFileData = _8[0], setCSVFileData = _8[1];
-    var _9 = (0, react_1.useState)(0), stepCSVIndex = _9[0], setStepCSVIndex = _9[1];
-    var _10 = (0, react_1.useState)({}), listCSVMapAttribute = _10[0], setListCSVMapAttribute = _10[1];
-    var _11 = (0, react_1.useState)({}), listCSVObjAttribute = _11[0], setListCSVObjAttribute = _11[1];
-    var _12 = (0, react_1.useState)([]), csvAPIAttribute = _12[0], setCSVAPIAttribute = _12[1];
-    var _13 = (0, react_1.useState)(""), exportLink = _13[0], setExportLink = _13[1];
+    var _8 = (0, react_1.useState)(null), csvFile = _8[0], setCSVFile = _8[1];
+    var _9 = (0, react_1.useState)([]), csvFileData = _9[0], setCSVFileData = _9[1];
+    var _10 = (0, react_1.useState)(0), stepCSVIndex = _10[0], setStepCSVIndex = _10[1];
+    var _11 = (0, react_1.useState)({}), listCSVMapAttribute = _11[0], setListCSVMapAttribute = _11[1];
+    var _12 = (0, react_1.useState)({}), listCSVObjAttribute = _12[0], setListCSVObjAttribute = _12[1];
+    var _13 = (0, react_1.useState)([]), csvAPIAttribute = _13[0], setCSVAPIAttribute = _13[1];
     var _14 = (0, react_1.useState)([]), importTableData = _14[0], setImportTableData = _14[1];
-    var _15 = (0, react_1.useState)([]), exportReferenceList = _15[0], setExportReferenceList = _15[1];
-    var _16 = (0, react_1.useState)(""), exportReferenceSearch = _16[0], setExportReferenceSearch = _16[1];
-    var _17 = (0, react_1.useState)([]), queryList = _17[0], setQueryList = _17[1];
-    var _18 = (0, react_1.useState)(false), queryModal = _18[0], setQueryModal = _18[1];
-    var _19 = (0, react_1.useState)({
-        queryId: "",
-        type: "=",
-        value: "",
-    }), queryInput = _19[0], setQueryInput = _19[1];
+    var _15 = (0, react_1.useState)(""), exportLink = _15[0], setExportLink = _15[1];
+    var _16 = (0, react_1.useState)([]), queryList = _16[0], setQueryList = _16[1];
+    var _17 = (0, react_1.useState)(-1), queryIndex = _17[0], setQueryIndex = _17[1];
     //INFO : Used by Read
     //INFO : Used by Update
-    var _20 = (0, react_1.useState)(false), modalVisible = _20[0], setModalVisible = _20[1];
-    var _21 = (0, react_1.useState)(false), deleteModal = _21[0], setDeleteModal = _21[1];
-    var _22 = (0, react_1.useState)(false), excelModal = _22[0], setExcelModal = _22[1];
-    var _23 = (0, react_1.useState)(false), exportExcel = _23[0], setExportExcel = _23[1];
-    var _24 = (0, react_1.useState)({}), selectedData = _24[0], setSelectedData = _24[1];
-    var _25 = (0, react_1.useState)(""), selectedObjectStructureId = _25[0], setSelectedObjectStructureId = _25[1];
-    var _26 = (0, react_1.useState)(""), selectedObjectId = _26[0], setSelectedObjectId = _26[1];
-    var _27 = (0, react_1.useState)({}), selectedObjectData = _27[0], setSelectedObjectData = _27[1];
-    var _28 = (0, react_1.useState)(false), referenceLoading = _28[0], setReferenceLoading = _28[1];
-    var _29 = (0, react_1.useState)({}), referencesOptions = _29[0], setReferencesOptions = _29[1];
-    var _30 = (0, react_1.useState)({}), referenceModelSchema = _30[0], setReferenceSchema = _30[1];
+    var _18 = (0, react_1.useState)(false), modalVisible = _18[0], setModalVisible = _18[1];
+    var _19 = (0, react_1.useState)(false), deleteModal = _19[0], setDeleteModal = _19[1];
+    var _20 = (0, react_1.useState)(false), excelModal = _20[0], setExcelModal = _20[1];
+    var _21 = (0, react_1.useState)(false), exportExcel = _21[0], setExportExcel = _21[1];
+    var _22 = (0, react_1.useState)({}), selectedData = _22[0], setSelectedData = _22[1];
+    var _23 = (0, react_1.useState)(""), selectedObjectStructureId = _23[0], setSelectedObjectStructureId = _23[1];
+    var _24 = (0, react_1.useState)(""), selectedObjectId = _24[0], setSelectedObjectId = _24[1];
+    var _25 = (0, react_1.useState)({}), selectedObjectData = _25[0], setSelectedObjectData = _25[1];
+    var _26 = (0, react_1.useState)(false), referenceLoading = _26[0], setReferenceLoading = _26[1];
+    var _27 = (0, react_1.useState)({}), referencesOptions = _27[0], setReferencesOptions = _27[1];
+    var _28 = (0, react_1.useState)({}), referenceModelSchema = _28[0], setReferenceSchema = _28[1];
     var devSettings = props.devSettings;
     var serverId = devSettings.server === "mongoServer" ? "_id" : "id";
     var isEditor = ((_a = props.edit) === null || _a === void 0 ? void 0 : _a.allEditable) ? true : false;
@@ -267,93 +243,6 @@ function DataTemplate(props) {
                 break;
         }
     }, [props.type, props.id]);
-    (0, react_1.useEffect)(function () {
-        var handleGetExportReferenceList = function () { return __awaiter(_this, void 0, void 0, function () {
-            var referenceOptionsList;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        referenceOptionsList = [];
-                        return [4 /*yield*/, Promise.all(props.model.map(function (eachModel) { return __awaiter(_this, void 0, void 0, function () {
-                                var referenceRQ, query, referenceData, clonedQueryInput;
-                                var _a, _b;
-                                return __generator(this, function (_c) {
-                                    switch (_c.label) {
-                                        case 0:
-                                            if (!(queryInput.queryId === eachModel.id)) return [3 /*break*/, 3];
-                                            if (!(eachModel.type === "reference" ||
-                                                eachModel.type === "listReference")) return [3 /*break*/, 2];
-                                            referenceRQ = new readQuery_1.ReadQuery({
-                                                dbModule: dbModule,
-                                                dbType: devSettings.server,
-                                                dbCollection: (_a = eachModel.referenceSpaceId) !== null && _a !== void 0 ? _a : "",
-                                                dbEndpoint: devSettings.dbEndpoint,
-                                                dbAPIToken: devSettings.dbAPIToken,
-                                            });
-                                            query = [];
-                                            if (exportReferenceSearch) {
-                                                query.push({
-                                                    type: "search",
-                                                    value: exportReferenceSearch,
-                                                    searchIds: [(_b = eachModel.referenceLabel) !== null && _b !== void 0 ? _b : "_id"],
-                                                });
-                                            }
-                                            return [4 /*yield*/, referenceRQ.call({
-                                                    type: "list",
-                                                    limit: 10,
-                                                    query: query,
-                                                })];
-                                        case 1:
-                                            referenceData = _c.sent();
-                                            referenceData.data.map(function (eachData) {
-                                                var _a, _b;
-                                                var data = JSON.parse(JSON.stringify(eachData));
-                                                var id = data[serverId];
-                                                referenceOptionsList.push({
-                                                    key: id,
-                                                    label: (_b = data[(_a = eachModel.referenceLabel) !== null && _a !== void 0 ? _a : ""]) !== null && _b !== void 0 ? _b : id,
-                                                });
-                                                return "";
-                                            });
-                                            return [3 /*break*/, 3];
-                                        case 2:
-                                            if (eachModel.type === "date" && !queryInput.value) {
-                                                clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                                                clonedQueryInput["value"] = (0, moment_1.default)().toISOString();
-                                                setQueryInput(clonedQueryInput);
-                                            }
-                                            _c.label = 3;
-                                        case 3: return [2 /*return*/];
-                                    }
-                                });
-                            }); }))];
-                    case 1:
-                        _a.sent();
-                        setExportReferenceList(referenceOptionsList);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        if (queryInput.type === "><" && !Array.isArray(queryInput.value)) {
-            var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-            var dates = [];
-            dates.push((0, moment_1.default)().toISOString());
-            dates.push((0, moment_1.default)().toISOString());
-            clonedQueryInput["value"] = dates;
-            setQueryInput(clonedQueryInput);
-        }
-        handleGetExportReferenceList();
-    }, [
-        queryInput,
-        exportReferenceSearch,
-        dbModule,
-        devSettings.dbEndpoint,
-        devSettings.dbAPIToken,
-        props.model,
-        devSettings.server,
-        serverId,
-    ]);
     //=====================================================================================
     //SECTION: Handle List
     //=====================================================================================
@@ -1427,11 +1316,7 @@ function DataTemplate(props) {
                             setImportTableData(response.data.content);
                             setStepCSVIndex(3);
                         }
-                        else {
-                            setTimeout(function () {
-                                handleRefresh();
-                            }, 1500);
-                        }
+                        handleRefresh();
                     }
                     _h.label = 5;
                 case 5: return [3 /*break*/, 7];
@@ -1480,34 +1365,23 @@ function DataTemplate(props) {
             }
         });
     }); };
-    var handleQueryModal = function () {
-        setQueryModal(!queryModal);
-        setQueryInput({
-            queryId: "",
-            type: "=",
-            value: "",
-        });
-        setExportReferenceList([]);
-        setExportReferenceSearch("");
+    var handleViewQuery = function (index) {
+        setQueryIndex(index);
+        setQueryForm(!queryForm);
     };
-    var handleCloneQueryList = function () {
+    var handleSortQuery = function (index, sortType) {
         var _a;
-        var clonedQueryInput = (_a = JSON.parse(JSON.stringify(queryList))) !== null && _a !== void 0 ? _a : [];
-        clonedQueryInput.map(function (eachQuery) {
-            var tempValue = eachQuery.value;
-            if (tempValue === "false" || tempValue === "true") {
-                tempValue = tempValue === "false" ? false : true;
-            }
-            else if (!isNaN(tempValue)) {
-                tempValue = Number(tempValue);
-            }
-            eachQuery.value = tempValue;
-            return null;
-        });
-        return clonedQueryInput;
+        var sortList = JSON.parse(JSON.stringify(queryList));
+        var ascIndex = sortType === "up" ? index - 1 : index + 1;
+        _a = [
+            sortList[ascIndex],
+            sortList[index],
+        ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
+        setQueryList(sortList);
     };
-    var handlePushQueryList = function () {
-        var tempQueryList = handleCloneQueryList();
+    var handlePushQueryList = function (queryInput, queryIndex) {
+        var tempQueryList = [];
+        tempQueryList = queryList;
         if (!tempQueryList.some(function (eachQuery) { return eachQuery.queryId === queryInput.queryId; })) {
             var tempValue = queryInput.value;
             if (tempValue === "false" || tempValue === "true") {
@@ -1518,37 +1392,24 @@ function DataTemplate(props) {
             }
             queryInput.value = tempValue;
             tempQueryList.push(queryInput);
-            setQueryModal(!queryModal);
             setQueryList(tempQueryList);
-            setQueryInput({
-                queryId: "",
-                type: "=",
-                value: "",
+            setQueryForm(false);
+        }
+        else if (queryIndex >= 0) {
+            var newQueryList = tempQueryList.map(function (eachQuery) {
+                return eachQuery.queryId === queryInput.queryId ? queryInput : eachQuery;
             });
+            setQueryList(newQueryList);
+            handleViewQuery(-1);
         }
         else {
-            // NOTIFICATION - CONISTS
             setNotification({
                 type: false,
-                title: "Export Failed",
-                msg: "Please check again your query attribute.",
+                title: "Failed to add",
+                msg: "Query with column ID already exists",
             });
         }
     };
-    var handleViewQuery = function (index) {
-        handleQueryModal();
-        setQueryInput(queryList[index]);
-    };
-    var handleSortQuery = function (index, sortType) {
-        var _a;
-        var sortList = JSON.parse(JSON.stringify(queryList));
-        var ascIndex = sortType === "up" ? index - 1 : index + 1;
-        _a = [
-            sortList[ascIndex],
-            sortList[index],
-        ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
-        setQueryList(sortList);
-    };
     //=====================================================================================
     //SECTION: Handle Utils
     //=====================================================================================
@@ -1566,34 +1427,23 @@ function DataTemplate(props) {
         }
         setModalVisible(modalVisible);
         if (!modalVisible) {
-            setTimeout(function () {
-                setExcelModal(false);
-                setExportExcel(false);
-                setSelectedObjectId("");
-                setSelectedObjectStructureId("");
-                setSelectedObjectData({});
-                setStepCSVIndex(0);
-                setCSVFile(null);
-                setSortModal(false);
-                setFilterModal(false);
-                setAddTabModal(false);
-                setCSVFileData([]);
-                setListCSVMapAttribute({});
-                setListCSVObjAttribute({});
-                setCSVAPIAttribute([]);
-                setExportLink("");
-                setQueryList([]);
-                setImportTableData([]);
-            }, 500);
-        }
-    };
-    var handleClosePopUpModal = function () {
-        if (stepCSVIndex === 3) {
-            setTimeout(function () {
-                handleRefresh();
-            }, 1000);
+            setExcelModal(false);
+            setExportExcel(false);
+            setExportLink("");
+            setSelectedObjectId("");
+            setSelectedObjectStructureId("");
+            setSelectedObjectData({});
+            setStepCSVIndex(0);
+            setCSVFile(null);
+            setSortModal(false);
+            setFilterModal(false);
+            setAddTabModal(false);
+            setCSVFileData([]);
+            setListCSVMapAttribute({});
+            setListCSVObjAttribute({});
+            setCSVAPIAttribute([]);
+            setImportTableData([]);
         }
-        handlePopUpModal(false);
     };
     var handleNavigate = function (link) {
         var _a, _b, _c;
@@ -1682,97 +1532,6 @@ function DataTemplate(props) {
                 return null;
         }
     };
-    var renderQueryIdOptions = function () {
-        var queryIdOptions = [];
-        props.model.map(function (data) {
-            if (data.id !== "_id" && data.id !== "id") {
-                queryIdOptions.push({
-                    key: data.id,
-                    label: data.name,
-                });
-            }
-            return "";
-        });
-        return queryIdOptions;
-    };
-    var renderQueryModalContent = function () {
-        var _a, _b;
-        var queryValueInput = [];
-        var formInputRef = Object.values(queryInput).map(function () { return (0, react_1.createRef)(); });
-        var modelType = (_b = (_a = props.model.find(function (eachModel) { return eachModel.id === queryInput.queryId; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "string";
-        switch (modelType) {
-            case "listReference":
-            case "reference":
-                queryValueInput.push(react_1.default.createElement(select_1.Select, { id: "value", ref: formInputRef[2], value: queryInput.value, label: "Value", options: exportReferenceList !== null && exportReferenceList !== void 0 ? exportReferenceList : [], onSearch: function (value) {
-                        setExportReferenceSearch(value);
-                    }, onChange: function (value) {
-                        var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                        clonedQueryInput["value"] = value;
-                        setQueryInput(clonedQueryInput);
-                    } }));
-                break;
-            case "date":
-                queryValueInput.push(react_1.default.createElement(datePicker_1.InputDatePicker, { id: "value", ref: formInputRef[2], value: queryInput.value
-                        ? (0, moment_1.default)(queryInput.value).toDate()
-                        : (0, moment_1.default)().toDate(), onChange: function (id, date) {
-                        var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                        clonedQueryInput[id] = date
-                            ? (0, moment_1.default)(date).toISOString()
-                            : undefined;
-                        setQueryInput(clonedQueryInput);
-                    } }));
-                break;
-            default:
-                queryValueInput.push(react_1.default.createElement(textInput_1.TextInput, { id: "value", ref: formInputRef[2], value: queryInput.value, label: "Value", type: "text", placeholder: "eg. Type", onChange: function (e) {
-                        var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                        clonedQueryInput[e.target.id] = e.target.value;
-                        setQueryInput(clonedQueryInput);
-                    } }));
-                break;
-        }
-        if (queryInput.type === "><") {
-            queryValueInput.pop();
-            queryValueInput.push(react_1.default.createElement(datePicker_1.InputDatePicker, { id: "value", ref: formInputRef[2], range: true, startDate: (0, moment_1.default)(queryInput.value[0]).toDate(), endDate: (0, moment_1.default)(queryInput.value[1]).toDate(), onChange: function (id, date, type) {
-                    var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                    if (type === "start")
-                        clonedQueryInput[id][0] = (0, moment_1.default)(date).toISOString();
-                    else
-                        clonedQueryInput[id][1] = (0, moment_1.default)(date).toISOString();
-                    setQueryInput(clonedQueryInput);
-                } }));
-        }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(form_1.Form, { ref: formRef, refList: formInputRef, handleComplete: handlePushQueryList, className: "grid grid-cols-1 gap-5 mt-6" },
-                react_1.default.createElement(select_1.Select, { id: "queryId", ref: formInputRef[0], value: queryInput.queryId, label: "Column ID", options: renderQueryIdOptions(), onChange: function (value) { return __awaiter(_this, void 0, void 0, function () {
-                        var clonedQueryInput;
-                        return __generator(this, function (_a) {
-                            clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                            clonedQueryInput["queryId"] = value;
-                            clonedQueryInput["value"] = "";
-                            setQueryInput(clonedQueryInput);
-                            return [2 /*return*/];
-                        });
-                    }); } }),
-                react_1.default.createElement(select_1.Select, { id: "type", ref: formInputRef[1], value: queryInput.type, label: "Condition", options: queryType, onChange: function (value) {
-                        var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
-                        clonedQueryInput["type"] = value;
-                        clonedQueryInput["value"] = "";
-                        setQueryInput(clonedQueryInput);
-                    } }),
-                queryValueInput),
-            react_1.default.createElement("div", { className: "flex flex-row justify-end pt-4" },
-                react_1.default.createElement(button_1.Button, { className: "mt-4", text: "Add", size: "small", type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
-                        var _a;
-                        return __generator(this, function (_b) {
-                            switch (_b.label) {
-                                case 0: return [4 /*yield*/, ((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.handleSubmit())];
-                                case 1:
-                                    _b.sent();
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); } }))));
-    };
     var renderQueryData = function () {
         var queryStructureView = [];
         var sortComponent = undefined;
@@ -2008,11 +1767,12 @@ function DataTemplate(props) {
                 return null;
             });
         }
-        tabs.push({
-            id: "blixify_new_tab",
-            name: "+ New Tab",
-            href: "",
-        });
+        if (isEditor)
+            tabs.push({
+                id: "blixify_new_tab",
+                name: "+ New Tab",
+                href: "",
+            });
         var pages = [
             {
                 name: "Detail",
@@ -2045,9 +1805,10 @@ function DataTemplate(props) {
                                 react_1.default.createElement("div", { className: "flex flex-col" },
                                     react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                                     react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
-                                ((_g = props.edit) === null || _g === void 0 ? void 0 : _g.deleteBtn) && isEditor && (react_1.default.createElement(button_1.Button, { text: "Delete", className: "mt-5 ml-0 sm:mt-0 sm:ml-5", type: "danger", onClick: function () {
-                                        setDeleteModal(true);
-                                    } })))),
+                                ((_g = props.edit) === null || _g === void 0 ? void 0 : _g.deleteBtn) && isEditor && (react_1.default.createElement("div", { className: "flex flex-col sm:flex-row" },
+                                    react_1.default.createElement(button_1.Button, { text: "Delete", className: "mt-3 ml-0 sm:mt-0 sm:ml-3", type: "danger", onClick: function () {
+                                            setDeleteModal(true);
+                                        } }))))),
                         react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) {
                                 if (id === "blixify_new_tab")
                                     handlePopUpModal(true, id);
@@ -2490,7 +2251,7 @@ function DataTemplate(props) {
         return null;
     };
     var renderModalContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (loading) {
             return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
@@ -2514,7 +2275,9 @@ function DataTemplate(props) {
                             },
                         ], className: "mt-5", horizontal: true, stepIndex: stepCSVIndex, onChange: function () { }, disabled: true }))),
                 react_1.default.createElement("div", { className: "mt-5" }, renderStepCSV()),
-                react_1.default.createElement("div", { className: "flex justify-end mt-5" }, importTableData.length > 0 ? (react_1.default.createElement(button_1.Button, { text: "Close", type: "normal", onClick: handleClosePopUpModal })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "flex justify-end mt-5" }, importTableData.length > 0 ? (react_1.default.createElement(button_1.Button, { text: "Close", type: "normal", onClick: function () {
+                        handlePopUpModal(false);
+                    } })) : (react_1.default.createElement(react_1.default.Fragment, null,
                     stepCSVIndex > 0 && (react_1.default.createElement(button_1.Button, { className: "flex justify-end mr-10", text: "Back", type: "normal", onClick: function () {
                             setStepCSVIndex(stepCSVIndex - 1);
                         } })),
@@ -2522,28 +2285,45 @@ function DataTemplate(props) {
         }
         else if (exportExcel) {
             return (react_1.default.createElement(react_1.default.Fragment, null, exportLink ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(emptyState_1.EmptyState, { icon: react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-20 h-20 text-primary-600" }), text: "Data have been successfully exported on ".concat(exportLink), callToAction: react_1.default.createElement("div", null,
+                react_1.default.createElement(emptyState_1.EmptyState, { icon: react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-20 h-20 text-primary-600" }), text: "Data have been successfully exported, click on the download link below", callToAction: react_1.default.createElement("div", null,
                         react_1.default.createElement(link_1.Link, { href: exportLink },
-                            react_1.default.createElement(button_1.Button, { text: "Download", type: "normal", size: "small" }))) }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("p", { className: "pt-2 mb-4 text-sm text-gray-600" }, "Export your data to .csv format to be viewable on Excel. Filter your data exported based on conditions by creating queries at the table below"),
-                react_1.default.createElement("div", { className: "flex items-center justify-end" },
-                    react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: handleQueryModal })),
+                            react_1.default.createElement(button_1.Button, { text: "Download", type: "normal", size: "small" }))) }))) : (react_1.default.createElement(react_1.default.Fragment, null, queryForm ? (react_1.default.createElement(queryForm_1.QueryForm, { dbModule: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios, model: props.model, updateQuery: queryIndex >= 0 ? queryList[queryIndex] : undefined, devSettings: {
+                    schemaEndpoint: props.devSettings.schemaEndpoint,
+                    server: props.devSettings.server,
+                    dbEndpoint: props.devSettings.dbEndpoint,
+                    dbAPIToken: props.devSettings.dbAPIToken,
+                    imageEndpoint: props.devSettings.imageEndpoint,
+                    uploadEndpoint: props.devSettings.uploadEndpoint,
+                    bucketName: props.devSettings.bucketName,
+                }, handleCloseForm: function () {
+                    handleViewQuery(-1);
+                }, handleQueryOnComplete: function (queryData) {
+                    handlePushQueryList(queryData, queryIndex);
+                }, renderReferenceLabelOptions: ((_b = props.organise) === null || _b === void 0 ? void 0 : _b.renderReferenceLabelOptions)
+                    ? (_c = props.organise) === null || _c === void 0 ? void 0 : _c.renderReferenceLabelOptions
+                    : function () {
+                        return [];
+                    } })) : (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: "" },
+                    react_1.default.createElement("p", { className: "pt-2 mb-4 text-sm text-gray-600" }, "Export your data to .csv format to be viewable on Excel. Filter your data exported based on conditions by creating queries at the table below"),
+                    react_1.default.createElement("div", { className: "flex items-center justify-end" },
+                        react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () { return setQueryForm(!queryForm); } }))),
                 react_1.default.createElement(table_1.Table, { className: "mt-5", header: queryTableHeader, data: renderQueryData(), loading: false }),
                 react_1.default.createElement("div", { className: "flex justify-end mt-5 " },
-                    react_1.default.createElement(button_1.Button, { className: "mt-4", text: "Submit", size: "small", type: "normal", onClick: handleExportCSVData }))))));
+                    react_1.default.createElement(button_1.Button, { className: "mt-4", text: "Submit", size: "small", type: "normal", onClick: handleExportCSVData }))))))));
         }
         else if (sortModal) {
-            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort, onChangeSort: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.onChangeSort, renderReferenceLabelOptions: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: (_d = props.organise) === null || _d === void 0 ? void 0 : _d.sort, onChangeSort: (_e = props.organise) === null || _e === void 0 ? void 0 : _e.onChangeSort, renderReferenceLabelOptions: (_f = props.organise) === null || _f === void 0 ? void 0 : _f.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
         else if (filterModal) {
-            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: (_d = props.organise) === null || _d === void 0 ? void 0 : _d.additionalQuery, onChangeFilter: (_e = props.organise) === null || _e === void 0 ? void 0 : _e.onChangeFilter, renderReferenceLabelOptions: (_f = props.organise) === null || _f === void 0 ? void 0 : _f.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_g = props.organise) === null || _g === void 0 ? void 0 : _g.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: (_g = props.organise) === null || _g === void 0 ? void 0 : _g.additionalQuery, onChangeFilter: (_h = props.organise) === null || _h === void 0 ? void 0 : _h.onChangeFilter, renderReferenceLabelOptions: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
         else if (addTabModal) {
-            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_h = props.organise) === null || _h === void 0 ? void 0 : _h.extendedTabs, onChangeTabs: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.onChangeTabs, renderReferenceLabelOptions: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_l = props.organise) === null || _l === void 0 ? void 0 : _l.extendedTabs, onChangeTabs: (_m = props.organise) === null || _m === void 0 ? void 0 : _m.onChangeTabs, renderReferenceLabelOptions: (_o = props.organise) === null || _o === void 0 ? void 0 : _o.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
@@ -2556,7 +2336,7 @@ function DataTemplate(props) {
                     return (0, react_1.createRef)();
                 });
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(form_1.Form, { className: "grid grid-cols-4 gap-6 pb-20 mt-6", ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType }, renderDataTemplateFormContent(selectedObjectData, (_l = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _l !== void 0 ? _l : [], objectFormInputRefs, true, filterObjectModel.type === "listObject")),
+                    react_1.default.createElement(form_1.Form, { className: "grid grid-cols-4 gap-6 pb-20 mt-6", ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType }, renderDataTemplateFormContent(selectedObjectData, (_p = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _p !== void 0 ? _p : [], objectFormInputRefs, true, filterObjectModel.type === "listObject")),
                     react_1.default.createElement("div", { className: "flex justify-end pt-8" },
                         filterObjectModel.type === "listObject" &&
                             selectedObjectId &&
@@ -2612,8 +2392,6 @@ function DataTemplate(props) {
     var renderModalTitle = function () {
         if (excelModal)
             return "Import CSV";
-        else if (queryModal)
-            return "Create a new Query";
         else if (exportExcel)
             return "Export CSV";
         else if (sortModal)
@@ -2627,11 +2405,12 @@ function DataTemplate(props) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible || queryModal, title: renderModalTitle(), lib: { Dialog: (_e = props.lib) === null || _e === void 0 ? void 0 : _e.Dialog, Transition: (_f = props.lib) === null || _f === void 0 ? void 0 : _f.Transition }, renderContent: queryModal ? renderQueryModalContent : renderModalContent, onClose: loading
-                ? function () { }
-                : queryModal
-                    ? handleQueryModal
-                    : handleClosePopUpModal, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
+        react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), lib: { Dialog: (_e = props.lib) === null || _e === void 0 ? void 0 : _e.Dialog, Transition: (_f = props.lib) === null || _f === void 0 ? void 0 : _f.Transition }, renderContent: renderModalContent, onClose: function () {
+                if (queryForm)
+                    handleViewQuery(-1);
+                else
+                    handlePopUpModal(false);
+            }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
         react_1.default.createElement(modal_1.Modal, { open: deleteModal, lib: { Dialog: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.Dialog, Transition: (_h = props.lib) === null || _h === void 0 ? void 0 : _h.Transition }, renderContent: renderDeleteModalContent, onClose: function () {
                 setDeletePasscodeInput("");
                 setDeleteModal(!deleteModal);