blixify-ui-web 0.1.71 → 0.1.73

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

@@ -72,6 +72,7 @@ var button_1 = require("../../action/button");
 var iconButton_1 = require("../../action/iconButton");
 var popUp_1 = require("../../advanced/popUp");
 var detailList_1 = require("../../display/detailList");
+var emptyState_1 = require("../../display/emptyState");
 var list_1 = require("../../display/list");
 var loading_1 = require("../../display/loading");
 var modal_1 = require("../../display/modal");
@@ -92,45 +93,97 @@ var readQuery_1 = require("../readQuery");
 var readQueryHoc_1 = require("../readQueryHoc");
 var utils_2 = require("../utils");
 var writeQuery_1 = require("../writeQuery");
+var queryTableHeader = [
+    {
+        key: "name",
+        title: "Query",
+    },
+    {
+        key: "value",
+        title: "Value",
+    },
+    {
+        key: "sort",
+        title: "Sort",
+    },
+    {
+        key: "view",
+        title: "View",
+    },
+    {
+        key: "del",
+        title: "Delete",
+    },
+];
+var queryType = [
+    {
+        key: "=",
+        label: "=",
+    },
+    {
+        key: ">",
+        label: ">",
+    },
+    {
+        key: "<",
+        label: "<",
+    },
+    {
+        key: "><",
+        label: "><",
+    },
+];
 function DataTemplate(props) {
     var _this = this;
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     var formRef = (0, react_1.createRef)();
     var objectFormRef = (0, react_1.createRef)();
     var typingTimeout = (0, react_1.useRef)();
     var modalFormInputRefs = props.model.map(function () { return (0, react_1.createRef)(); });
     var limit = props.limit ? props.limit : 10;
-    var _f = (0, react_1.useState)(false), loading = _f[0], setLoading = _f[1];
+    var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
     //INFO : Used by List
-    var _g = (0, react_1.useState)(""), filterSearch = _g[0], setFilterSearch = _g[1];
-    var _h = (0, react_1.useState)(""), filterSelection = _h[0], setFilterSelection = _h[1];
-    var _j = (0, react_1.useState)(""), filterReference = _j[0], setFilterReference = _j[1];
-    var _k = (0, react_1.useState)(""), filterReferenceSearch = _k[0], setFilterReferenceSearch = _k[1];
-    var _l = (0, react_1.useState)([]), filterReferenceList = _l[0], setFilterReferenceList = _l[1];
-    var _m = (0, react_1.useState)(true), tableLoading = _m[0], setTableLoading = _m[1];
-    var _o = (0, react_1.useState)(""), cursor = _o[0], setCursor = _o[1];
-    var _p = (0, react_1.useState)(""), lastCursor = _p[0], setLastCursor = _p[1];
-    var _q = (0, react_1.useState)([]), data = _q[0], setData = _q[1];
-    var _r = (0, react_1.useState)(0), size = _r[0], setSize = _r[1];
-    var _s = (0, react_1.useState)(0), pageIndex = _s[0], setPageIndex = _s[1];
-    var _t = (0, react_1.useState)(null), csvFile = _t[0], setCSVFile = _t[1];
-    var _u = (0, react_1.useState)([]), csvFileData = _u[0], setCSVFileData = _u[1];
-    var _v = (0, react_1.useState)(0), stepCSVIndex = _v[0], setStepCSVIndex = _v[1];
-    var _w = (0, react_1.useState)({}), listCSVMapAttribute = _w[0], setListCSVMapAttribute = _w[1];
-    var _x = (0, react_1.useState)({}), listCSVObjAttribute = _x[0], setListCSVObjAttribute = _x[1];
-    var _y = (0, react_1.useState)([]), csvAPIAttribute = _y[0], setCSVAPIAttribute = _y[1];
-    var _z = (0, react_1.useState)(), notification = _z[0], setNotification = _z[1];
+    var _j = (0, react_1.useState)(""), filterSearch = _j[0], setFilterSearch = _j[1];
+    var _k = (0, react_1.useState)(""), filterSearchParams = _k[0], setFilterSearchParams = _k[1];
+    var _l = (0, react_1.useState)(""), filterSelection = _l[0], setFilterSelection = _l[1];
+    var _m = (0, react_1.useState)(""), filterReference = _m[0], setFilterReference = _m[1];
+    var _o = (0, react_1.useState)(""), filterReferenceSearch = _o[0], setFilterReferenceSearch = _o[1];
+    var _p = (0, react_1.useState)([]), filterReferenceList = _p[0], setFilterReferenceList = _p[1];
+    var _q = (0, react_1.useState)(true), tableLoading = _q[0], setTableLoading = _q[1];
+    var _r = (0, react_1.useState)(""), cursor = _r[0], setCursor = _r[1];
+    var _s = (0, react_1.useState)(""), lastCursor = _s[0], setLastCursor = _s[1];
+    var _t = (0, react_1.useState)([]), data = _t[0], setData = _t[1];
+    var _u = (0, react_1.useState)(0), size = _u[0], setSize = _u[1];
+    var _v = (0, react_1.useState)(0), pageIndex = _v[0], setPageIndex = _v[1];
+    var _w = (0, react_1.useState)(null), csvFile = _w[0], setCSVFile = _w[1];
+    var _x = (0, react_1.useState)([]), csvFileData = _x[0], setCSVFileData = _x[1];
+    var _y = (0, react_1.useState)(0), stepCSVIndex = _y[0], setStepCSVIndex = _y[1];
+    var _z = (0, react_1.useState)({}), listCSVMapAttribute = _z[0], setListCSVMapAttribute = _z[1];
+    var _0 = (0, react_1.useState)({}), listCSVObjAttribute = _0[0], setListCSVObjAttribute = _0[1];
+    var _1 = (0, react_1.useState)([]), csvAPIAttribute = _1[0], setCSVAPIAttribute = _1[1];
+    var _2 = (0, react_1.useState)(""), exportLink = _2[0], setExportLink = _2[1];
+    var _3 = (0, react_1.useState)([]), exportReferenceList = _3[0], setExportReferenceList = _3[1];
+    var _4 = (0, react_1.useState)(""), exportReferenceSearch = _4[0], setExportReferenceSearch = _4[1];
+    var _5 = (0, react_1.useState)(), notification = _5[0], setNotification = _5[1];
     //INFO : Used by Read
     //INFO : Used by Update
-    var _0 = (0, react_1.useState)(false), modalVisible = _0[0], setModalVisible = _0[1];
-    var _1 = (0, react_1.useState)(false), excelModal = _1[0], setExcelModal = _1[1];
-    var _2 = (0, react_1.useState)({}), selectedData = _2[0], setSelectedData = _2[1];
-    var _3 = (0, react_1.useState)(""), selectedObjectStructureId = _3[0], setSelectedObjectStructureId = _3[1];
-    var _4 = (0, react_1.useState)(""), selectedObjectId = _4[0], setSelectedObjectId = _4[1];
-    var _5 = (0, react_1.useState)({}), selectedObjectData = _5[0], setSelectedObjectData = _5[1];
-    var _6 = (0, react_1.useState)({}), referenceModelSchema = _6[0], setReferenceSchema = _6[1];
-    var _7 = (0, react_1.useState)({}), referenceOptions = _7[0], setReferenceOptions = _7[1];
-    var _8 = (0, react_1.useState)({}), referenceSearchText = _8[0], setReferenceSearchText = _8[1];
+    var _6 = (0, react_1.useState)(false), modalVisible = _6[0], setModalVisible = _6[1];
+    var _7 = (0, react_1.useState)(false), excelModal = _7[0], setExcelModal = _7[1];
+    var _8 = (0, react_1.useState)(false), exportExcel = _8[0], setExportExcel = _8[1];
+    var _9 = (0, react_1.useState)({}), selectedData = _9[0], setSelectedData = _9[1];
+    var _10 = (0, react_1.useState)(""), selectedObjectStructureId = _10[0], setSelectedObjectStructureId = _10[1];
+    var _11 = (0, react_1.useState)(""), selectedObjectId = _11[0], setSelectedObjectId = _11[1];
+    var _12 = (0, react_1.useState)({}), selectedObjectData = _12[0], setSelectedObjectData = _12[1];
+    var _13 = (0, react_1.useState)({}), referenceModelSchema = _13[0], setReferenceSchema = _13[1];
+    var _14 = (0, react_1.useState)({}), referenceOptions = _14[0], setReferenceOptions = _14[1];
+    var _15 = (0, react_1.useState)({}), referenceSearchText = _15[0], setReferenceSearchText = _15[1];
+    var _16 = (0, react_1.useState)([]), queryList = _16[0], setQueryList = _16[1];
+    var _17 = (0, react_1.useState)(false), queryModal = _17[0], setQueryModal = _17[1];
+    var _18 = (0, react_1.useState)({
+        queryId: "",
+        type: "=",
+        value: "",
+    }), queryInput = _18[0], setQueryInput = _18[1];
     var dbModule = props.server === "firebase" ? (_a = props.lib) === null || _a === void 0 ? void 0 : _a.firebase : (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios;
     var writeServerQuery = new writeQuery_1.WriteQuery((_c = props.lib) === null || _c === void 0 ? void 0 : _c.axios, props.server, props.collectionId, props.dbEndpoint);
     var moreButtonPopUp = [
@@ -141,6 +194,13 @@ function DataTemplate(props) {
                 setModalVisible(true);
             },
         },
+        {
+            text: "Export Excel",
+            onClick: function () {
+                setExportExcel(true);
+                setModalVisible(true);
+            },
+        },
     ];
     (0, react_1.useEffect)(function () {
         switch (props.type) {
@@ -157,6 +217,86 @@ 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, props.server, (_a = eachModel.referenceSpaceId) !== null && _a !== void 0 ? _a : "", props.dbEndpoint);
+                                            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 = props.server === "mongoServer" ? data["_id"] : data["id"];
+                                                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,
+        props.dbEndpoint,
+        props.model,
+        props.server,
+    ]);
+    var queryIdOptions = [];
     //SECTION - List
     var handlePagination = function (value) {
         if (props.server === "mongoServer") {
@@ -207,7 +347,7 @@ function DataTemplate(props) {
                     dataList = _b.sent();
                     _b.label = 6;
                 case 6:
-                    setData(filterSearch ? dataList : dataList.concat(data));
+                    setData(filterSearchParams ? dataList : dataList.concat(data));
                     setCursor(responseData.count);
                     _b.label = 7;
                 case 7:
@@ -216,10 +356,45 @@ function DataTemplate(props) {
             }
         });
     }); };
+    var handleExportCSVData = function () { return __awaiter(_this, void 0, void 0, function () {
+        var res, err_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _d.trys.push([0, 2, , 3]);
+                    setLoading(true);
+                    return [4 /*yield*/, ((_b = (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios) === null || _b === void 0 ? void 0 : _b.post("".concat(props.schemaEndpoint, "/csv/export"), {
+                            data: { spaceId: props.collectionId, query: queryList },
+                        }, {
+                            headers: {
+                                "Content-Type": "multipart/form-data",
+                            },
+                        }))];
+                case 1:
+                    res = _d.sent();
+                    setExportLink((_c = res === null || res === void 0 ? void 0 : res.data.link) !== null && _c !== void 0 ? _c : "");
+                    setNotification({
+                        type: true,
+                        title: "Export Successfully",
+                        msg: "A download link had been generated.",
+                    });
+                    setLoading(false);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _d.sent();
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
     var handleGetItemError = function () {
         setTableLoading(false);
         setModalVisible(false);
         setLoading(false);
+        if (props.type === "update" || props.type === "read") {
+            handleNavigate();
+        }
     };
     //SECTION - CSV
     var handleOnChangeCSV = function (e) {
@@ -252,7 +427,7 @@ function DataTemplate(props) {
         }
     };
     var handleStepCSV = function () { return __awaiter(_this, void 0, void 0, function () {
-        var csvList_1, _loop_1, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, response, err_1;
+        var csvList_1, _loop_1, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, response, err_2;
         var _c, _d, _e, _f, _g;
         return __generator(this, function (_h) {
             switch (_h.label) {
@@ -374,17 +549,86 @@ function DataTemplate(props) {
                     _h.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
-                    err_1 = _h.sent();
+                    err_2 = _h.sent();
                     setNotification({
                         type: false,
                         title: "Import Error",
-                        msg: err_1.message,
+                        msg: err_2.message,
                     });
                     return [3 /*break*/, 7];
                 case 7: return [2 /*return*/];
             }
         });
     }); };
+    var handleQueryModal = function () {
+        setQueryModal(!queryModal);
+        setQueryInput({
+            queryId: "",
+            type: "=",
+            value: "",
+        });
+        setExportReferenceList([]);
+        setExportReferenceSearch("");
+    };
+    var handleCloneQueryList = function () {
+        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 handlePushQueryList = function () {
+        var tempQueryList = handleCloneQueryList();
+        if (!tempQueryList.some(function (eachQuery) { return eachQuery.queryId === queryInput.queryId; })) {
+            var tempValue = queryInput.value;
+            if (tempValue === "false" || tempValue === "true") {
+                tempValue = tempValue === "false" ? false : true;
+            }
+            else if (!isNaN(tempValue)) {
+                tempValue = Number(tempValue);
+            }
+            queryInput.value = tempValue;
+            tempQueryList.push(queryInput);
+            setQueryModal(!queryModal);
+            setQueryList(tempQueryList);
+            setQueryInput({
+                queryId: "",
+                type: "=",
+                value: "",
+            });
+        }
+        else {
+            // NOTIFICATION - CONISTS
+            setNotification({
+                type: false,
+                title: "Export Failed",
+                msg: "Please check again your query attribute.",
+            });
+        }
+    };
+    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 - Update
     var handleRetrieveSelectedData = function (responseData) { return __awaiter(_this, void 0, void 0, function () {
         var dummyRespData, dummyReferenceModelSchema, newRespData, _a;
@@ -452,6 +696,7 @@ function DataTemplate(props) {
                             defaultValue[eachAttribute.id];
                     break;
                 case "image":
+                case "file":
                     clonedSelectedData[eachAttribute.id] = defaultValue[eachAttribute.id];
                     break;
                 case "number":
@@ -532,7 +777,7 @@ function DataTemplate(props) {
         setReferenceSearchText(clonedSearchText);
     };
     var handleGetReferenceOptions = function (dataList, dataStructure, label, currentData) { return __awaiter(_this, void 0, void 0, function () {
-        var optionList_1, clonedReferrenceOptions, referenceRQ, res, err_2;
+        var optionList_1, clonedReferrenceOptions, referenceRQ, res, err_3;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -541,10 +786,11 @@ function DataTemplate(props) {
                     optionList_1 = [];
                     clonedReferrenceOptions = JSON.parse(JSON.stringify(referenceOptions));
                     dataList.data.map(function (eachData) {
+                        var _a;
                         var eachDataJSON = JSON.parse(JSON.stringify(eachData));
                         optionList_1.push({
                             key: eachData._id,
-                            label: eachDataJSON[label],
+                            label: (_a = eachDataJSON[label]) !== null && _a !== void 0 ? _a : eachData._id,
                         });
                         return null;
                     });
@@ -564,12 +810,13 @@ function DataTemplate(props) {
                     res = _b.sent();
                     if (res === null || res === void 0 ? void 0 : res.data) {
                         res.data.map(function (eachData) {
+                            var _a;
                             var id = props.server === "mongoServer" ? eachData._id : eachData.id;
                             var eachDataJSON = JSON.parse(JSON.stringify(eachData));
                             if (!optionList_1.some(function (eachData) { return eachData.key === id; })) {
                                 optionList_1.push({
                                     key: eachData._id,
-                                    label: eachDataJSON[label],
+                                    label: (_a = eachDataJSON[label]) !== null && _a !== void 0 ? _a : eachData._id,
                                 });
                             }
                             return null;
@@ -581,7 +828,7 @@ function DataTemplate(props) {
                     setReferenceOptions(clonedReferrenceOptions);
                     return [3 /*break*/, 4];
                 case 3:
-                    err_2 = _b.sent();
+                    err_3 = _b.sent();
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -589,7 +836,7 @@ function DataTemplate(props) {
     }); };
     //SECTION - Assets
     var handleUploadAxios = function (eachImageEndpoint, assetParentId, assetCollectionName, assetFileName, file) { return __awaiter(_this, void 0, void 0, function () {
-        var responseData, err_3;
+        var responseData, err_4;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -611,7 +858,7 @@ function DataTemplate(props) {
                     responseData = _c.sent();
                     return [2 /*return*/, responseData];
                 case 2:
-                    err_3 = _c.sent();
+                    err_4 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -633,7 +880,7 @@ function DataTemplate(props) {
                     objectAttribute.map(function (eachObject) {
                         var _a;
                         var filterImageObjectData = (_a = eachObject.objectData) === null || _a === void 0 ? void 0 : _a.filter(function (eachAttribute) {
-                            return eachAttribute.type === "image";
+                            return (eachAttribute.type === "image" || eachAttribute.type === "file");
                         });
                         uploadObjectAttribute[eachObject.id] = filterImageObjectData;
                         return null;
@@ -703,7 +950,7 @@ function DataTemplate(props) {
                     objectAttribute.map(function (eachObject) {
                         var _a;
                         var filterImageObjectData = (_a = eachObject.objectData) === null || _a === void 0 ? void 0 : _a.filter(function (eachAttribute) {
-                            return eachAttribute.type === "image";
+                            return (eachAttribute.type === "image" || eachAttribute.type === "file");
                         });
                         uploadObjectAttribute[eachObject.id] = filterImageObjectData;
                         return null;
@@ -787,7 +1034,7 @@ function DataTemplate(props) {
                 case 1:
                     clonedSelectedData = _a.sent();
                     imageAttribute = props.model.filter(function (eachAttribute) {
-                        return eachAttribute.type === "image";
+                        return eachAttribute.type === "image" || eachAttribute.type === "file";
                     });
                     return [4 /*yield*/, Promise.all(imageAttribute.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
                             var responseData;
@@ -817,7 +1064,7 @@ function DataTemplate(props) {
         });
     }); };
     var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName) { return __awaiter(_this, void 0, void 0, function () {
-        var err_4;
+        var err_5;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -838,7 +1085,7 @@ function DataTemplate(props) {
                     _c.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_4 = _c.sent();
+                    err_5 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -851,7 +1098,7 @@ function DataTemplate(props) {
             switch (_a.label) {
                 case 0:
                     imageAttribute = props.model.filter(function (eachAttribute) {
-                        return eachAttribute.type === "image";
+                        return eachAttribute.type === "image" || eachAttribute.type === "file";
                     });
                     return [4 /*yield*/, Promise.all(imageAttribute.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
                             var _a, _b, _c, _d;
@@ -884,7 +1131,7 @@ function DataTemplate(props) {
                     objectAttribute.map(function (eachObject) {
                         var _a;
                         var filterImageObjectData = (_a = eachObject.objectData) === null || _a === void 0 ? void 0 : _a.filter(function (eachAttribute) {
-                            return eachAttribute.type === "image";
+                            return (eachAttribute.type === "image" || eachAttribute.type === "file");
                         });
                         uploadObjectAttribute[eachObject.id] = filterImageObjectData;
                         return null;
@@ -1001,7 +1248,7 @@ function DataTemplate(props) {
     };
     //SECTION - CRUD
     var handleRemoveSelectedData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var selectedId, res, err_5;
+        var selectedId, res, err_6;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -1027,7 +1274,7 @@ function DataTemplate(props) {
                     _a.label = 4;
                 case 4: return [3 /*break*/, 6];
                 case 5:
-                    err_5 = _a.sent();
+                    err_6 = _a.sent();
                     setModalVisible(false);
                     setLoading(false);
                     return [3 /*break*/, 6];
@@ -1036,7 +1283,7 @@ function DataTemplate(props) {
         });
     }); };
     var handleSubmit = function () { return __awaiter(_this, void 0, void 0, function () {
-        var selectedId, id, createSelectedData, res, err_6;
+        var selectedId, id, createSelectedData, res, err_7;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1085,7 +1332,7 @@ function DataTemplate(props) {
                     }
                     return [3 /*break*/, 7];
                 case 6:
-                    err_6 = _b.sent();
+                    err_7 = _b.sent();
                     setModalVisible(false);
                     setLoading(false);
                     return [3 /*break*/, 7];
@@ -1095,18 +1342,23 @@ function DataTemplate(props) {
     }); };
     //SECTION - Utils
     var handlePopUpModal = function (modalVisible) {
+        setModalVisible(modalVisible);
         if (!modalVisible) {
-            setExcelModal(false);
-            setSelectedObjectStructureId("");
-            setSelectedObjectData({});
-            setStepCSVIndex(0);
-            setCSVFile(null);
-            setCSVFileData([]);
-            setListCSVMapAttribute({});
-            setListCSVObjAttribute({});
-            setCSVAPIAttribute([]);
+            setTimeout(function () {
+                setExcelModal(false);
+                setExportExcel(false);
+                setSelectedObjectStructureId("");
+                setSelectedObjectData({});
+                setStepCSVIndex(0);
+                setCSVFile(null);
+                setCSVFileData([]);
+                setListCSVMapAttribute({});
+                setListCSVObjAttribute({});
+                setCSVAPIAttribute([]);
+                setExportLink("");
+                setQueryList([]);
+            }, 500);
         }
-        setModalVisible(modalVisible);
     };
     var handleNavigate = function (link) {
         var _a, _b, _c;
@@ -1127,13 +1379,14 @@ function DataTemplate(props) {
         setTableLoading(true);
     };
     var handleNameSearch = function (e) {
+        setFilterSearch(e.target.value);
         handleClearDataByFilter();
         if (typingTimeout.current) {
             clearTimeout(typingTimeout.current);
             typingTimeout.current = null;
         }
         typingTimeout.current = setTimeout(function () {
-            setFilterSearch(e.target.value);
+            setFilterSearchParams(e.target.value);
         }, 500);
     };
     var renderTableHeader = function () {
@@ -1179,7 +1432,7 @@ function DataTemplate(props) {
         });
         filteredModel.map(function (eachAttribute, index) {
             //INFO - Default Model Contain Id While Object Type Don't have
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var clonedSelectedData = handleClonedDataAttribute(data, model);
             var clonedReferenceOptions = JSON.parse(JSON.stringify(referenceOptions));
             var clonedReferenceSearchText = JSON.parse(JSON.stringify(referenceSearchText));
@@ -1212,17 +1465,31 @@ function DataTemplate(props) {
                     break;
                 case "list":
                 case "multipleList":
-                    inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_c = clonedSelectedData[eachAttribute.id]) !== null && _c !== void 0 ? _c : (eachAttribute.type === "list" ? "" : []), label: label, options: (_e = (_d = eachAttribute.listSelection) === null || _d === void 0 ? void 0 : _d.map(function (eachAttribute) {
+                    var optionList_2 = eachAttribute.listSelection
+                        ? (_c = eachAttribute.listSelection) === null || _c === void 0 ? void 0 : _c.map(function (eachAttribute) {
                             return {
                                 key: eachAttribute,
                                 label: eachAttribute,
                             };
-                        })) !== null && _e !== void 0 ? _e : [], onChange: function (value) {
+                        })
+                        : [];
+                    if (clonedSelectedData[eachAttribute.id]) {
+                        var selectedList = clonedSelectedData[eachAttribute.id];
+                        var selectedKeys = Array.isArray(selectedList)
+                            ? selectedList
+                            : [selectedList];
+                        selectedKeys.forEach(function (key) {
+                            if (!optionList_2.some(function (item) { return item.key === key; })) {
+                                optionList_2.push({ key: key, label: key });
+                            }
+                        });
+                    }
+                    inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_d = clonedSelectedData[eachAttribute.id]) !== null && _d !== void 0 ? _d : (eachAttribute.type === "list" ? "" : []), label: label, options: optionList_2, onChange: function (value) {
                             handleOnChangeSelect(eachAttribute.id, value);
                         }, disabled: disabled }));
                     break;
                 case "boolean":
-                    var value = (_f = clonedSelectedData[eachAttribute.id]) === null || _f === void 0 ? void 0 : _f.toString();
+                    var value = (_e = clonedSelectedData[eachAttribute.id]) === null || _e === void 0 ? void 0 : _e.toString();
                     inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: value, label: label, options: [
                             {
                                 key: "true",
@@ -1237,6 +1504,7 @@ function DataTemplate(props) {
                         }, disabled: disabled }));
                     break;
                 case "image":
+                case "file":
                     var hasImageToken = typeof clonedSelectedData[eachAttribute.id] === "string";
                     var url = void 0;
                     if (hasImageToken) {
@@ -1250,19 +1518,19 @@ function DataTemplate(props) {
                                 : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName + "%2F" + props.id, selectedObjectStructureId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id])
                             : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName, props.id, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id]);
                     }
-                    inputList.push(react_1.default.createElement(uploadInput_1.UploadInput, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, file: (_g = url !== null && url !== void 0 ? url : clonedSelectedData[eachAttribute.id]) !== null && _g !== void 0 ? _g : "", accept: ".png,.jpg,.jpeg", onChange: handleOnChangeFile, disabled: disabled }));
+                    inputList.push(react_1.default.createElement(uploadInput_1.UploadInput, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, hidePreview: eachAttribute.type === "image" ? false : true, file: (_f = url !== null && url !== void 0 ? url : clonedSelectedData[eachAttribute.id]) !== null && _f !== void 0 ? _f : "", accept: eachAttribute.type === "image" ? ".png,.jpg,.jpe,.tiff" : ".pdf", fileDescription: eachAttribute.type === "image" ? undefined : "PDF up to 30MB", maxFileSize: props.maxFileSize, onChange: handleOnChangeFile, disabled: disabled }));
                     break;
                 case "number":
-                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "number", value: (_h = clonedSelectedData[eachAttribute.id]) !== null && _h !== void 0 ? _h : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
+                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "number", value: (_g = clonedSelectedData[eachAttribute.id]) !== null && _g !== void 0 ? _g : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
                     break;
                 case "reference":
                 case "listReference":
-                    var referenceLabel_1 = (_j = eachAttribute.referenceLabel) !== null && _j !== void 0 ? _j : "";
+                    var referenceLabel_1 = (_h = eachAttribute.referenceLabel) !== null && _h !== void 0 ? _h : "";
                     inputList.push(react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
                                 dbModule: dbModule,
                                 dbType: props.server,
-                                dbCollection: (_k = eachAttribute.referenceSpaceId) !== null && _k !== void 0 ? _k : "",
+                                dbCollection: (_j = eachAttribute.referenceSpaceId) !== null && _j !== void 0 ? _j : "",
                                 dbEndpoint: props.dbEndpoint,
                             }, cond: {
                                 type: "list",
@@ -1279,14 +1547,14 @@ function DataTemplate(props) {
                             }, onChangeData: function (data) {
                                 handleGetReferenceOptions(data, eachAttribute, referenceLabel_1, clonedSelectedData[eachAttribute.id]);
                             } }),
-                        react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_l = clonedSelectedData[eachAttribute.id]) !== null && _l !== void 0 ? _l : (eachAttribute.type === "reference" ? "" : []), label: label, options: (_m = clonedReferenceOptions[eachAttribute.id]) !== null && _m !== void 0 ? _m : [], onChange: function (value) {
+                        react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_k = clonedSelectedData[eachAttribute.id]) !== null && _k !== void 0 ? _k : (eachAttribute.type === "reference" ? "" : []), label: label, options: (_l = clonedReferenceOptions[eachAttribute.id]) !== null && _l !== void 0 ? _l : [], onChange: function (value) {
                                 handleOnChangeSelect(eachAttribute.id, value);
                             }, onSearch: function (value) {
                                 handleSearchReferenceOptions(eachAttribute.id, value);
                             }, disabled: disabled })));
                     break;
                 case "string":
-                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "text", value: (_o = clonedSelectedData[eachAttribute.id]) !== null && _o !== void 0 ? _o : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
+                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "text", value: (_m = clonedSelectedData[eachAttribute.id]) !== null && _m !== void 0 ? _m : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
                     break;
                 case "date":
                     inputList.push(react_1.default.createElement(datePicker_1.InputDatePicker, { title: label, id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], onChange: handleOnChangeDate, value: clonedSelectedData[eachAttribute.id], disabled: disabled }));
@@ -1517,6 +1785,124 @@ function DataTemplate(props) {
                 return null;
         }
     };
+    var renderQueryIdOptions = function () {
+        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] = (0, moment_1.default)(date).toISOString();
+                        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: "mt-6 grid grid-cols-1 gap-5" },
+                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;
+        queryList.map(function (data, index) {
+            if (queryList.length > 1) {
+                var upData_1 = index === queryList.length - 1;
+                sortComponent = (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
+                        handleSortQuery(index, upData_1 ? "up" : "down");
+                    } }, upData_1 ? (react_1.default.createElement(outline_1.ArrowUpIcon, { className: "h-5 w-5 block text-primary-600" })) : (react_1.default.createElement(outline_1.ArrowDownIcon, { className: "h-5 w-5 block text-primary-600" }))));
+            }
+            queryStructureView.push({
+                key: index,
+                name: data.queryId,
+                value: data.value,
+                sort: sortComponent,
+                view: (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
+                        handleViewQuery(index);
+                    } },
+                    react_1.default.createElement(outline_1.EyeIcon, { className: "h-5 w-5 block text-primary-600" }))),
+                del: (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
+                        var temp = JSON.parse(JSON.stringify(queryList));
+                        temp.splice(index, 1);
+                        setQueryList(temp);
+                    } },
+                    react_1.default.createElement(outline_1.TrashIcon, { className: "h-5 w-5 block text-primary-600" }))),
+            });
+            return "";
+        });
+        return queryStructureView;
+    };
     var renderNotification = function (location) {
         var _a;
         if (notification) {
@@ -1654,7 +2040,7 @@ function DataTemplate(props) {
                         react_1.default.createElement("div", { className: "flex flex-row items-center justify-content mt-2 sm:mr-5 md:mt-0" },
                             react_1.default.createElement(link_1.Link, { className: "mr-2", href: "".concat(props.localURLEndpoint, "?data=new&type=update&collection=").concat(props.collectionId), linkType: props.linkType, custom: props.custom },
                                 react_1.default.createElement(button_1.Button, { text: "Add", type: "normal" })),
-                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-gray-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }) }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }) }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (react_1.default.createElement(react_1.default.Fragment, null,
                                     react_1.default.createElement("span", { className: "w-40 text-gray-700 block py-3 text-sm text-center cursor-pointer hover:bg-gray-100", onClick: eachPopup.onClick }, eachPopup.text))); })), lib: {
                                     Menu: (_e = props === null || props === void 0 ? void 0 : props.lib) === null || _e === void 0 ? void 0 : _e.Menu,
                                     Transition: (_f = props === null || props === void 0 ? void 0 : props.lib) === null || _f === void 0 ? void 0 : _f.Transition,
@@ -1683,17 +2069,19 @@ function DataTemplate(props) {
                 });
             else if (eachSettings.type === "search") {
                 searchQueryExist = true;
-                if (filterSearch) {
+                if (filterSearchParams) {
                     query.push({
                         type: "search",
                         searchIds: [eachSettings.value],
-                        value: filterSearch,
+                        value: filterSearchParams,
                     });
                 }
             }
             return null;
         });
-        if (!searchQueryExist && props.server === "mongoServer" && filterSearch) {
+        if (!searchQueryExist &&
+            props.server === "mongoServer" &&
+            filterSearchParams) {
             var searchKeys = props.model.map(function (eachAttribute) {
                 if (eachAttribute.type === "address")
                     return eachAttribute.id + ".name";
@@ -1703,7 +2091,7 @@ function DataTemplate(props) {
             query.push({
                 type: "search",
                 searchIds: searchKeys,
-                value: filterSearch,
+                value: filterSearchParams,
             });
         }
         return query.length > 0 ? query : undefined;
@@ -1814,6 +2202,18 @@ function DataTemplate(props) {
                         } })),
                     react_1.default.createElement(button_1.Button, { text: "".concat(stepCSVIndex < 2 ? "Next" : "Submit"), type: "normal", onClick: handleStepCSV }))));
         }
+        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(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: "text-gray-600 text-sm pt-2 mb-4" }, "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 justify-end items-center" },
+                    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(table_1.Table, { className: "mt-5", header: queryTableHeader, data: renderQueryData(), loading: false }),
+                react_1.default.createElement("div", { className: "flex mt-5 justify-end " },
+                    react_1.default.createElement(button_1.Button, { className: "mt-4", text: "Submit", size: "small", type: "normal", onClick: handleExportCSVData }))))));
+        }
         else {
             var filterObjectModel = props.model.find(function (eachModel) {
                 return eachModel.id === selectedObjectStructureId;
@@ -1856,13 +2256,22 @@ function DataTemplate(props) {
             }
         }
     };
+    var renderModalTitle = function () {
+        if (excelModal)
+            return "Import CSV";
+        else if (exportExcel)
+            return "Export CSV";
+        else
+            return "";
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        react_1.default.createElement(modal_1.Modal, { open: modalVisible, lib: { Dialog: (_d = props.lib) === null || _d === void 0 ? void 0 : _d.Dialog, Transition: (_e = props.lib) === null || _e === void 0 ? void 0 : _e.Transition }, renderContent: renderModalContent, onClose: loading
+        react_1.default.createElement(modal_1.Modal, { open: modalVisible, title: renderModalTitle(), lib: { Dialog: (_d = props.lib) === null || _d === void 0 ? void 0 : _d.Dialog, Transition: (_e = props.lib) === null || _e === void 0 ? void 0 : _e.Transition }, renderContent: renderModalContent, onClose: loading
                 ? function () { }
                 : function () {
                     handlePopUpModal(false);
                 }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
+        react_1.default.createElement(modal_1.Modal, { title: "Create a new Query", open: queryModal, lib: { Dialog: (_f = props.lib) === null || _f === void 0 ? void 0 : _f.Dialog, Transition: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.Transition }, renderContent: renderQueryModalContent, onClose: handleQueryModal, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
         renderContent()));
 }
 exports.DataTemplate = DataTemplate;