blixify-ui-web 0.1.78 → 0.1.80

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -58,6 +69,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -314,7 +334,7 @@ function DataTemplate(props) {
     //SECTION: Handle Reference
     //=====================================================================================
     var handleRetrieveObjectReferenceOptions = function (eachModel, referencesOptions, selectedData, prefix, listObject, searchText) { return __awaiter(_this, void 0, void 0, function () {
-        var optionList_1, referenceRQ_1, selectionRes, selectedDataValue, currentRes_1, queryValue, res, modelId, err_1;
+        var optionList_1, referenceRQ_1, selectionRes, selectedDataValue, currentRes_1, unknownRes, queryValue, res, modelId, err_1;
         var _this = this;
         var _a, _b;
         return __generator(this, function (_c) {
@@ -346,6 +366,7 @@ function DataTemplate(props) {
                     else
                         selectedDataValue = selectedData[eachModel.id];
                     currentRes_1 = [];
+                    unknownRes = [];
                     if (!(selectedData && selectedDataValue)) return [3 /*break*/, 5];
                     if (!(listObject && Array.isArray(selectedDataValue))) return [3 /*break*/, 3];
                     return [4 /*yield*/, Promise.all(selectedDataValue.map(function (eachData) { return __awaiter(_this, void 0, void 0, function () {
@@ -381,7 +402,12 @@ function DataTemplate(props) {
                         })];
                 case 4:
                     res = _c.sent();
-                    currentRes_1 = res === null || res === void 0 ? void 0 : res.data;
+                    if ((res === null || res === void 0 ? void 0 : res.data.length) > 0) {
+                        currentRes_1 = res === null || res === void 0 ? void 0 : res.data;
+                    }
+                    else {
+                        unknownRes.push.apply(unknownRes, queryValue);
+                    }
                     _c.label = 5;
                 case 5:
                     if (selectionRes === null || selectionRes === void 0 ? void 0 : selectionRes.data) {
@@ -412,6 +438,15 @@ function DataTemplate(props) {
                             return null;
                         });
                     }
+                    if (unknownRes) {
+                        unknownRes.map(function (eachData) {
+                            optionList_1.push({
+                                key: eachData,
+                                label: eachData,
+                            });
+                            return null;
+                        });
+                    }
                     modelId = prefix ? "".concat(prefix, ".").concat(eachModel.id) : eachModel.id;
                     referencesOptions[modelId] = optionList_1;
                     return [3 /*break*/, 7];
@@ -665,207 +700,232 @@ function DataTemplate(props) {
             }
         });
     }); };
-    var handleUploadObjectImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var clonedSelectedData, uploadObjectAttribute, objectAttribute, _loop_1, _i, _a, _b, eachKey, eachValue;
+    var handleUploadImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
+        var clonedSelectedData, objectAttribute, listObjectAttribute;
         var _this = this;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, handleUploadListObjectImage(id)];
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    clonedSelectedData = handleClonedDataAttribute(selectedData, props.model, true);
+                    //INFO: Parse & Upload Data "Image & File attributes"
+                    return [4 /*yield*/, handleParseImageField(id, clonedSelectedData, props.model)];
                 case 1:
-                    clonedSelectedData = _c.sent();
-                    uploadObjectAttribute = {};
+                    //INFO: Parse & Upload Data "Image & File attributes"
+                    _a.sent();
                     objectAttribute = props.model.filter(function (eachAttribute) {
                         return eachAttribute.type === "object";
                     });
-                    if (!(objectAttribute.length > 0)) return [3 /*break*/, 5];
-                    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" || eachAttribute.type === "file");
-                        });
-                        uploadObjectAttribute[eachObject.id] = filterImageObjectData;
-                        return null;
+                    return [4 /*yield*/, Promise.all(objectAttribute.map(function (eachObject) { return __awaiter(_this, void 0, void 0, function () {
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0: return [4 /*yield*/, handleParseImageField(id, clonedSelectedData, (_a = eachObject.objectData) !== null && _a !== void 0 ? _a : [], eachObject.id)];
+                                    case 1:
+                                        _b.sent();
+                                        return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
+                case 2:
+                    _a.sent();
+                    listObjectAttribute = props.model.filter(function (eachAttribute) {
+                        return eachAttribute.type === "listObject";
                     });
-                    _loop_1 = function (eachKey, eachValue) {
+                    return [4 /*yield*/, Promise.all(listObjectAttribute.map(function (eachObject) { return __awaiter(_this, void 0, void 0, function () {
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0: return [4 /*yield*/, handleParseImageField(id, clonedSelectedData, (_a = eachObject.objectData) !== null && _a !== void 0 ? _a : [], eachObject.id, true)];
+                                    case 1:
+                                        _b.sent();
+                                        return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
+                case 3:
+                    _a.sent();
+                    return [2 /*return*/, clonedSelectedData];
+            }
+        });
+    }); };
+    /**
+     *
+     * INFO: Image Endpoint
+     * Image - imageColl/dataId/file.png
+     * Object - imageColl/dataId/attributeId/file.png
+     * List Object - imageColl/dataId/attributeId/itemId/file.png
+     *
+     * Multi Image - imageColl/dataId/token${imageFileExtension} - Applies to the same to object & listObject
+     */
+    var handleParseImageField = function (dataId, selectedData, model, objectId, listObject) { return __awaiter(_this, void 0, void 0, function () {
+        var uploadAsset_1, removeAsset_1, imageAttribute, multiImageAttribute, err_4;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    uploadAsset_1 = function (eachImage, selectedField, listObjectId, multiple) { return __awaiter(_this, void 0, void 0, function () {
+                        var uploadedData_1, imageCollectionName, imageParentId, responseData, err_5;
+                        var _this = this;
+                        var _a, _b, _c;
                         return __generator(this, function (_d) {
                             switch (_d.label) {
                                 case 0:
-                                    if (!Array.isArray(eachValue)) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, Promise.all(eachValue.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
-                                            var responseData;
+                                    _d.trys.push([0, 6, , 7]);
+                                    if (!(typeof selectedField === "string")) return [3 /*break*/, 1];
+                                    return [2 /*return*/];
+                                case 1:
+                                    if (!(multiple &&
+                                        selectedField["upload"] &&
+                                        Array.isArray(selectedField["upload"]))) return [3 /*break*/, 3];
+                                    uploadedData_1 = [];
+                                    return [4 /*yield*/, Promise.all(selectedField["upload"].map(function (eachField) { return __awaiter(_this, void 0, void 0, function () {
+                                            var imageCollectionName, imageParentId, fileName, responseData;
                                             var _a, _b;
                                             return __generator(this, function (_c) {
                                                 switch (_c.label) {
                                                     case 0:
-                                                        if (!(typeof selectedData[eachKey][eachImage.id] === "string")) return [3 /*break*/, 1];
-                                                        return [2 /*return*/];
+                                                        imageCollectionName = (_a = eachImage.imageCollectionName) !== null && _a !== void 0 ? _a : "";
+                                                        if (objectId) {
+                                                            imageCollectionName += "/".concat(dataId);
+                                                        }
+                                                        imageParentId = objectId ? objectId : dataId;
+                                                        if (listObjectId) {
+                                                            imageParentId += "/".concat(listObjectId);
+                                                        }
+                                                        fileName = (0, uuid_1.v4)() + eachImage.imageFileName;
+                                                        return [4 /*yield*/, handleUploadAxios((_b = eachImage.imageEndpoint) !== null && _b !== void 0 ? _b : "", imageParentId, imageCollectionName, fileName, eachField.fileName)];
                                                     case 1:
-                                                        if (!(selectedData[eachKey][eachImage.id] instanceof File)) return [3 /*break*/, 3];
-                                                        return [4 /*yield*/, handleUploadAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", eachKey, eachImage.imageCollectionName + "/" + id, (_b = eachImage.imageFileName) !== null && _b !== void 0 ? _b : "", selectedData[eachKey][eachImage.id])];
-                                                    case 2:
                                                         responseData = _c.sent();
-                                                        if (responseData.data) {
-                                                            clonedSelectedData[eachKey][eachImage.id] =
-                                                                responseData.data.data;
-                                                        }
-                                                        _c.label = 3;
-                                                    case 3: return [2 /*return*/, null];
+                                                        if (responseData.data)
+                                                            uploadedData_1.push({
+                                                                token: responseData.data.data,
+                                                                fileName: fileName,
+                                                            });
+                                                        return [2 /*return*/, null];
                                                 }
                                             });
                                         }); }))];
-                                case 1:
+                                case 2:
                                     _d.sent();
-                                    _d.label = 2;
-                                case 2: return [2 /*return*/];
+                                    return [2 /*return*/, selectedField["data"].concat(uploadedData_1)];
+                                case 3:
+                                    if (!(selectedField instanceof File)) return [3 /*break*/, 5];
+                                    imageCollectionName = (_a = eachImage.imageCollectionName) !== null && _a !== void 0 ? _a : "";
+                                    if (objectId) {
+                                        imageCollectionName += "/".concat(dataId);
+                                    }
+                                    imageParentId = objectId ? objectId : dataId;
+                                    if (listObjectId) {
+                                        imageParentId += "/".concat(listObjectId);
+                                    }
+                                    return [4 /*yield*/, handleUploadAxios((_b = eachImage.imageEndpoint) !== null && _b !== void 0 ? _b : "", imageParentId, imageCollectionName, (_c = eachImage.imageFileName) !== null && _c !== void 0 ? _c : "", selectedField)];
+                                case 4:
+                                    responseData = _d.sent();
+                                    if (responseData.data)
+                                        selectedField = responseData.data.data;
+                                    _d.label = 5;
+                                case 5: return [3 /*break*/, 7];
+                                case 6:
+                                    err_5 = _d.sent();
+                                    return [3 /*break*/, 7];
+                                case 7: return [2 /*return*/];
                             }
                         });
-                    };
-                    _i = 0, _a = Object.entries(uploadObjectAttribute);
-                    _c.label = 2;
-                case 2:
-                    if (!(_i < _a.length)) return [3 /*break*/, 5];
-                    _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                    return [5 /*yield**/, _loop_1(eachKey, eachValue)];
-                case 3:
-                    _c.sent();
-                    _c.label = 4;
-                case 4:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 5: return [2 /*return*/, clonedSelectedData];
-            }
-        });
-    }); };
-    var handleUploadListObjectImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var clonedSelectedData, uploadObjectAttribute, objectAttribute, _loop_2, _i, _a, _b, eachKey, eachValue;
-        var _this = this;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    clonedSelectedData = handleClonedDataAttribute(selectedData, props.model, true);
-                    uploadObjectAttribute = {};
-                    objectAttribute = props.model.filter(function (eachAttribute) {
-                        return eachAttribute.type === "listObject";
-                    });
-                    if (!(objectAttribute.length > 0)) return [3 /*break*/, 4];
-                    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" || eachAttribute.type === "file");
-                        });
-                        uploadObjectAttribute[eachObject.id] = filterImageObjectData;
-                        return null;
-                    });
-                    _loop_2 = function (eachKey, eachValue) {
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
-                                case 0:
-                                    if (!(clonedSelectedData[eachKey] &&
-                                        Array.isArray(clonedSelectedData[eachKey]))) return [3 /*break*/, 2];
-                                    if (!Array.isArray(eachValue)) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, Promise.all(eachValue.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
-                                            var _this = this;
-                                            return __generator(this, function (_a) {
-                                                switch (_a.label) {
-                                                    case 0: 
-                                                    //INFO : Only upload if this is a File Blob
-                                                    return [4 /*yield*/, Promise.all(clonedSelectedData[eachKey].map(function (eachData, index) { return __awaiter(_this, void 0, void 0, function () {
-                                                            var objectId, responseData;
-                                                            var _a, _b, _c;
-                                                            return __generator(this, function (_d) {
-                                                                switch (_d.label) {
-                                                                    case 0:
-                                                                        if (!(typeof eachData[eachImage.id] === "string")) return [3 /*break*/, 1];
-                                                                        return [2 /*return*/];
-                                                                    case 1:
-                                                                        if (!(eachData[eachImage.id] instanceof File)) return [3 /*break*/, 3];
-                                                                        objectId = (_a = eachData["id"]) !== null && _a !== void 0 ? _a : (0, uuid_1.v4)();
-                                                                        return [4 /*yield*/, handleUploadAxios((_b = eachImage.imageEndpoint) !== null && _b !== void 0 ? _b : "", eachKey, eachImage.imageCollectionName +
-                                                                                "/" +
-                                                                                id +
-                                                                                "/" +
-                                                                                objectId, (_c = eachImage.imageFileName) !== null && _c !== void 0 ? _c : "", eachData[eachImage.id])];
-                                                                    case 2:
-                                                                        responseData = _d.sent();
-                                                                        if (responseData.data) {
-                                                                            eachData[eachImage.id] = responseData.data.data;
-                                                                            clonedSelectedData[eachKey][index] = eachData;
-                                                                        }
-                                                                        _d.label = 3;
-                                                                    case 3: return [2 /*return*/, null];
-                                                                }
-                                                            });
-                                                        }); }))];
-                                                    case 1:
-                                                        //INFO : Only upload if this is a File Blob
-                                                        _a.sent();
-                                                        return [2 /*return*/, null];
-                                                }
-                                            });
-                                        }); }))];
+                    }); };
+                    removeAsset_1 = function (eachImage, selectedField) { return __awaiter(_this, void 0, void 0, function () {
+                        var _this = this;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, Promise.all(selectedField["remove"].map(function (eachField) { return __awaiter(_this, void 0, void 0, function () {
+                                        var startIndex, endIndex, imageFileName;
+                                        var _a, _b, _c;
+                                        return __generator(this, function (_d) {
+                                            switch (_d.label) {
+                                                case 0:
+                                                    startIndex = eachField.fileName.lastIndexOf("%2F") + 3;
+                                                    endIndex = eachField.fileName.indexOf("?alt=media&token=");
+                                                    imageFileName = eachField.fileName.substring(startIndex, endIndex);
+                                                    return [4 /*yield*/, handleRemoveImageAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", (_b = props.id) !== null && _b !== void 0 ? _b : "", (_c = eachImage.imageCollectionName) !== null && _c !== void 0 ? _c : "", imageFileName)];
+                                                case 1:
+                                                    _d.sent();
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); }))];
                                 case 1:
-                                    _d.sent();
-                                    _d.label = 2;
-                                case 2: return [2 /*return*/];
+                                    _a.sent();
+                                    return [2 /*return*/];
                             }
                         });
-                    };
-                    _i = 0, _a = Object.entries(uploadObjectAttribute);
-                    _c.label = 1;
-                case 1:
-                    if (!(_i < _a.length)) return [3 /*break*/, 4];
-                    _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                    return [5 /*yield**/, _loop_2(eachKey, eachValue)];
-                case 2:
-                    _c.sent();
-                    _c.label = 3;
-                case 3:
-                    _i++;
-                    return [3 /*break*/, 1];
-                case 4: return [2 /*return*/, clonedSelectedData];
-            }
-        });
-    }); };
-    var handleUploadImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var clonedSelectedData, imageAttribute;
-        var _this = this;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, handleUploadObjectImage(id)];
-                case 1:
-                    clonedSelectedData = _a.sent();
-                    imageAttribute = props.model.filter(function (eachAttribute) {
+                    }); };
+                    imageAttribute = model.filter(function (eachAttribute) {
                         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;
-                            var _a, _b, _c;
-                            return __generator(this, function (_d) {
-                                switch (_d.label) {
+                            var selectedField;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
                                     case 0:
-                                        if (!(typeof selectedData[eachImage.id] === "string")) return [3 /*break*/, 1];
-                                        return [2 /*return*/];
+                                        if (!listObject) return [3 /*break*/, 3];
+                                        if (!objectId)
+                                            return [2 /*return*/];
+                                        if (!Array.isArray(selectedData[objectId])) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, Promise.all(selectedData[objectId].map(function (eachListItem, index) {
+                                                var _a;
+                                                var selectedField = selectedData[objectId][index][eachImage.id];
+                                                var selectedObjectId = (_a = eachListItem.id) !== null && _a !== void 0 ? _a : (0, uuid_1.v4)();
+                                                uploadAsset_1(eachImage, selectedField, selectedObjectId);
+                                                return null;
+                                            }))];
                                     case 1:
-                                        if (!(selectedData[eachImage.id] instanceof File)) return [3 /*break*/, 3];
-                                        return [4 /*yield*/, handleUploadAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", id, (_b = eachImage.imageCollectionName) !== null && _b !== void 0 ? _b : "", (_c = eachImage.imageFileName) !== null && _c !== void 0 ? _c : "", selectedData[eachImage.id])];
+                                        _a.sent();
+                                        _a.label = 2;
+                                    case 2: return [3 /*break*/, 4];
+                                    case 3:
+                                        selectedField = objectId
+                                            ? selectedData[objectId][eachImage.id]
+                                            : selectedData[eachImage.id];
+                                        uploadAsset_1(eachImage, selectedField);
+                                        _a.label = 4;
+                                    case 4: return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
+                case 1:
+                    _a.sent();
+                    multiImageAttribute = model.filter(function (eachAttribute) {
+                        return (eachAttribute.type === "multipleImage" ||
+                            eachAttribute.type === "multipleFile");
+                    });
+                    return [4 /*yield*/, Promise.all(multiImageAttribute.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
+                            var _a, _b;
+                            return __generator(this, function (_c) {
+                                switch (_c.label) {
+                                    case 0: return [4 /*yield*/, removeAsset_1(eachImage, selectedData[eachImage.id])];
+                                    case 1:
+                                        _c.sent();
+                                        _a = selectedData;
+                                        _b = eachImage.id;
+                                        return [4 /*yield*/, uploadAsset_1(eachImage, selectedData[eachImage.id], "", true)];
                                     case 2:
-                                        responseData = _d.sent();
-                                        if (responseData.data) {
-                                            clonedSelectedData[eachImage.id] = responseData.data.data;
-                                        }
-                                        _d.label = 3;
-                                    case 3: return [2 /*return*/, null];
+                                        _a[_b] = _c.sent();
+                                        return [2 /*return*/, null];
                                 }
                             });
                         }); }))];
                 case 2:
                     _a.sent();
-                    return [2 /*return*/, clonedSelectedData];
+                    return [2 /*return*/, selectedData];
+                case 3:
+                    err_4 = _a.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
     var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName) { return __awaiter(_this, void 0, void 0, function () {
-        var err_4;
+        var err_6;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -886,93 +946,32 @@ function DataTemplate(props) {
                     _c.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_4 = _c.sent();
+                    err_6 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
         });
     }); };
     var handleRemoveImage = function () { return __awaiter(_this, void 0, void 0, function () {
-        var imageAttribute;
-        var _this = this;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    imageAttribute = props.model.filter(function (eachAttribute) {
-                        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;
-                            return __generator(this, function (_e) {
-                                switch (_e.label) {
-                                    case 0: return [4 /*yield*/, handleRemoveImageAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", (_b = props.id) !== null && _b !== void 0 ? _b : "", (_c = eachImage.imageCollectionName) !== null && _c !== void 0 ? _c : "", (_d = eachImage.imageFileName) !== null && _d !== void 0 ? _d : "")];
-                                    case 1:
-                                        _e.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); }))];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleRemoveObjectImage = function () { return __awaiter(_this, void 0, void 0, function () {
-        var uploadObjectAttribute, objectAttribute, _loop_3, _i, _a, _b, eachKey, eachValue;
-        var _this = this;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var err_7;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    uploadObjectAttribute = {};
-                    objectAttribute = props.model.filter(function (eachAttribute) {
-                        return eachAttribute.type === "object";
-                    });
-                    if (!(objectAttribute.length > 0)) return [3 /*break*/, 4];
-                    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" || eachAttribute.type === "file");
-                        });
-                        uploadObjectAttribute[eachObject.id] = filterImageObjectData;
-                        return null;
-                    });
-                    _loop_3 = function (eachKey, eachValue) {
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
-                                case 0:
-                                    if (!Array.isArray(eachValue)) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, Promise.all(eachValue.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
-                                            var _a, _b, _c;
-                                            return __generator(this, function (_d) {
-                                                switch (_d.label) {
-                                                    case 0: return [4 /*yield*/, handleRemoveImageAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", eachKey !== null && eachKey !== void 0 ? eachKey : "", (_b = eachImage.imageCollectionName + "/" + props.id) !== null && _b !== void 0 ? _b : "", (_c = eachImage.imageFileName) !== null && _c !== void 0 ? _c : "")];
-                                                    case 1:
-                                                        _d.sent();
-                                                        return [2 /*return*/, null];
-                                                }
-                                            });
-                                        }); }))];
-                                case 1:
-                                    _d.sent();
-                                    _d.label = 2;
-                                case 2: return [2 /*return*/];
-                            }
-                        });
-                    };
-                    _i = 0, _a = Object.entries(uploadObjectAttribute);
-                    _c.label = 1;
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios.post((props === null || props === void 0 ? void 0 : props.imageEndpoint) + "/deleteDirectory", {
+                            data: {
+                                assetCollectionName: props.collectionId,
+                                assetParentId: props.id,
+                            },
+                        }))];
                 case 1:
-                    if (!(_i < _a.length)) return [3 /*break*/, 4];
-                    _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                    return [5 /*yield**/, _loop_3(eachKey, eachValue)];
+                    _b.sent();
+                    return [3 /*break*/, 3];
                 case 2:
-                    _c.sent();
-                    _c.label = 3;
-                case 3:
-                    _i++;
-                    return [3 /*break*/, 1];
-                case 4: return [2 /*return*/];
+                    err_7 = _b.sent();
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
             }
         });
     }); };
@@ -980,42 +979,39 @@ function DataTemplate(props) {
     //SECTION: Handle CRUD
     //=====================================================================================
     var handleRemoveSelectedData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var selectedId, res, err_5;
+        var selectedId, res, err_8;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 5, , 6]);
+                    _a.trys.push([0, 4, , 5]);
                     selectedId = props.id;
-                    if (!selectedId) return [3 /*break*/, 4];
+                    if (!selectedId) return [3 /*break*/, 3];
                     setLoading(true);
                     setDeleteModal(true);
                     return [4 /*yield*/, handleRemoveImage()];
                 case 1:
-                    _a.sent();
-                    return [4 /*yield*/, handleRemoveObjectImage()];
-                case 2:
                     _a.sent();
                     return [4 /*yield*/, writeServerQuery.call("delete", { id: selectedId })];
-                case 3:
+                case 2:
                     res = _a.sent();
                     setModalVisible(false);
                     setLoading(false);
                     if (res) {
                         handleNavigate("".concat(props.localURLEndpoint, "?type=list&collection=").concat(props.collectionId, "&data=r"));
                     }
-                    _a.label = 4;
-                case 4: return [3 /*break*/, 6];
-                case 5:
-                    err_5 = _a.sent();
+                    _a.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    err_8 = _a.sent();
                     setDeleteModal(false);
                     setLoading(false);
-                    return [3 /*break*/, 6];
-                case 6: return [2 /*return*/];
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
     var handleSubmit = function () { return __awaiter(_this, void 0, void 0, function () {
-        var selectedId, id, createSelectedData, res, err_6;
+        var selectedId, id, createSelectedData, res, err_9;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1059,7 +1055,7 @@ function DataTemplate(props) {
                     }
                     return [3 /*break*/, 7];
                 case 6:
-                    err_6 = _b.sent();
+                    err_9 = _b.sent();
                     setModalVisible(false);
                     setLoading(false);
                     return [3 /*break*/, 7];
@@ -1137,6 +1133,26 @@ function DataTemplate(props) {
                 case "file":
                     clonedSelectedData[eachAttribute.id] = defaultValue[eachAttribute.id];
                     break;
+                case "multipleImage":
+                case "multipleFile":
+                    if (Array.isArray(clonedSelectedData[eachAttribute.id])) {
+                        clonedSelectedData[eachAttribute.id] = {
+                            data: defaultValue[eachAttribute.id],
+                            upload: [],
+                            remove: [],
+                        };
+                    }
+                    else if (clonedSelectedData[eachAttribute.id] instanceof Object) {
+                        clonedSelectedData[eachAttribute.id] =
+                            defaultValue[eachAttribute.id];
+                    }
+                    else
+                        clonedSelectedData[eachAttribute.id] = {
+                            data: [],
+                            upload: [],
+                            remove: [],
+                        };
+                    break;
                 case "number":
                     if (defaultValue[eachAttribute.id]) {
                         clonedSelectedData[eachAttribute.id] = Number(defaultValue[eachAttribute.id]);
@@ -1184,6 +1200,35 @@ function DataTemplate(props) {
             e.target.files.length > 0 ? e.target.files[0] : undefined;
         handleUpdateChangeData(clonedData);
     };
+    var handleOnChangeFiles = function (id, value, action) {
+        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
+        var clonedData = handleClonedDataAttribute(data, model);
+        var previousData = clonedData[id] && clonedData[id]["data"] ? clonedData[id]["data"] : [];
+        var previousUploadData = clonedData[id] && clonedData[id]["upload"]
+            ? clonedData[id]["upload"]
+            : [];
+        var previousRemoveData = clonedData[id] && clonedData[id]["remove"]
+            ? clonedData[id]["remove"]
+            : [];
+        if (action === "upload") {
+            clonedData[id] = __assign(__assign({}, clonedData[id]), { upload: __spreadArray(__spreadArray([], value, true), previousUploadData, true) });
+        }
+        else {
+            if (previousData.some(function (file) {
+                return file.token === value.token;
+            })) {
+                clonedData[id] = __assign(__assign({}, clonedData[id]), { data: previousData.filter(function (file) {
+                        return file.token !== value.token;
+                    }), remove: __spreadArray(__spreadArray([], previousRemoveData, true), [value], false) });
+            }
+            else {
+                clonedData[id] = __assign(__assign({}, clonedData[id]), { upload: previousUploadData.filter(function (file) {
+                        return file.token !== value.token;
+                    }) });
+            }
+        }
+        handleUpdateChangeData(clonedData);
+    };
     var handleOnChangeAddress = function (id, address) {
         var _a = handleOnChangeData(), data = _a.data, model = _a.model;
         var clonedData = handleClonedDataAttribute(data, model);
@@ -1220,17 +1265,37 @@ function DataTemplate(props) {
                 header: true,
                 dynamicTyping: true,
                 complete: function (results) {
-                    if (results.data && results.data.length < 100)
+                    var fileSize = file.size / 1024 / 1024;
+                    if (results.data && fileSize < 25) {
                         setCSVFileData(results.data);
+                        var prefilledCSVMapAttribute_1 = {};
+                        Object.entries(results.data[0]).map(function (eachRow, index) {
+                            var eachKey = eachRow[0];
+                            if (!eachKey)
+                                return null;
+                            props.model.map(function (eachModel) {
+                                if (eachKey.toLowerCase().includes(eachModel.id) &&
+                                    eachModel.id !== "_id" &&
+                                    eachModel.id !== "id" &&
+                                    eachModel.type !== "object" &&
+                                    eachModel.type !== "listObject") {
+                                    prefilledCSVMapAttribute_1[index] = eachModel.id;
+                                }
+                                return null;
+                            });
+                            return null;
+                        });
+                        setListCSVMapAttribute(prefilledCSVMapAttribute_1);
+                        setStepCSVIndex(1);
+                    }
                     else
                         setNotification({
                             type: false,
                             title: "Import Error",
-                            msg: "Data is more than 100 rows",
+                            msg: "Data file size is more than 25 MB",
                         });
                 },
             });
-            setStepCSVIndex(1);
         }
         else {
             setNotification({
@@ -1241,7 +1306,7 @@ function DataTemplate(props) {
         }
     };
     var handleStepCSV = function () { return __awaiter(_this, void 0, void 0, function () {
-        var csvList_1, _loop_4, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, response, err_7;
+        var csvList_1, _loop_1, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, response, err_10;
         var _c, _d, _e, _f, _g;
         return __generator(this, function (_h) {
             switch (_h.label) {
@@ -1256,7 +1321,7 @@ function DataTemplate(props) {
                 case 1:
                     if (!(stepCSVIndex === 1)) return [3 /*break*/, 3];
                     csvList_1 = [];
-                    _loop_4 = function (eachKey, eachValue) {
+                    _loop_1 = function (eachKey, eachValue) {
                         if (eachKey && eachValue && typeof eachValue === "string") {
                             var selectedModel = props.model.find(function (eachModel) {
                                 return eachModel.id === eachValue;
@@ -1274,11 +1339,14 @@ function DataTemplate(props) {
                                     objectValueType: (_e = selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) !== null && _e !== void 0 ? _e : "string",
                                 });
                             }
-                            else if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "image") {
+                            else if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "image" ||
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "file" ||
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "multipleFile" ||
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "multipleImage") {
                                 csvList_1.push({
                                     id: eachValue !== null && eachValue !== void 0 ? eachValue : "",
                                     ori: Number(eachKey),
-                                    type: "image",
+                                    type: selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type,
                                     imageCollectionName: selectedModel.imageCollectionName,
                                     imageFileName: selectedModel.imageFileName,
                                     imageEndpoint: selectedModel.imageEndpoint,
@@ -1295,7 +1363,7 @@ function DataTemplate(props) {
                     };
                     for (_i = 0, _a = Object.entries(listCSVMapAttribute); _i < _a.length; _i++) {
                         _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                        _loop_4(eachKey, eachValue);
+                        _loop_1(eachKey, eachValue);
                     }
                     valid_1 = true;
                     errorValue_1 = "";
@@ -1363,11 +1431,11 @@ function DataTemplate(props) {
                     _h.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
-                    err_7 = _h.sent();
+                    err_10 = _h.sent();
                     setNotification({
                         type: false,
                         title: "Import Error",
-                        msg: err_7.message,
+                        msg: err_10.message,
                     });
                     return [3 /*break*/, 7];
                 case 7: return [2 /*return*/];
@@ -1375,7 +1443,7 @@ function DataTemplate(props) {
         });
     }); };
     var handleExportCSVData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var res, err_8;
+        var res, err_11;
         var _a, _b, _c;
         return __generator(this, function (_d) {
             switch (_d.label) {
@@ -1400,7 +1468,7 @@ function DataTemplate(props) {
                     setLoading(false);
                     return [3 /*break*/, 3];
                 case 2:
-                    err_8 = _d.sent();
+                    err_11 = _d.sent();
                     setLoading(false);
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
@@ -1528,9 +1596,10 @@ function DataTemplate(props) {
         return dataList;
     };
     var renderStepCSV = function () {
+        var _a;
         switch (stepCSVIndex) {
             case 0:
-                return (react_2.default.createElement(uploadInput_1.UploadInput, { label: "Please insert a csv file", fileDescription: "CSV file thats doesn't exceeds 30MB and row not more than 100 data", accept: ".csv", hidePreview: true, onChange: handleOnChangeCSV }));
+                return (react_2.default.createElement(uploadInput_1.UploadInput, { lib: { axios: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios }, label: "Please insert a csv file", fileDescription: "CSV file thats doesn't exceeds 30MB and row not more than 100 data", accept: ".csv", hidePreview: true, onChange: handleOnChangeCSV }));
             case 1:
                 var filterOptions_1 = [];
                 props.model.map(function (eachData) {
@@ -1545,6 +1614,8 @@ function DataTemplate(props) {
                 });
                 return (react_2.default.createElement(react_2.default.Fragment, null, csvFileData.length > 0 && (react_2.default.createElement("div", { className: "pb-32" }, Object.entries(csvFileData[0]).map(function (eachRow, index) {
                     var eachKey = eachRow[0];
+                    if (!eachKey)
+                        return null;
                     var clonedListValue = JSON.parse(JSON.stringify(listCSVMapAttribute));
                     var selectedObjectModel = props.model.find(function (eachModel) {
                         return ((eachModel.id === clonedListValue[index] &&
@@ -1741,7 +1812,7 @@ function DataTemplate(props) {
         });
         filteredModel.forEach(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;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var clonedSelectedData = handleClonedDataAttribute(data, model);
             var label = eachAttribute.name + (!eachAttribute.optional ? " (*)" : "");
             var disabled = props.type === "read"
@@ -1825,17 +1896,36 @@ 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_2.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 }));
+                    inputList.push(react_2.default.createElement(uploadInput_1.UploadInput, { lib: { axios: (_f = props.lib) === null || _f === void 0 ? void 0 : _f.axios }, ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, hidePreview: eachAttribute.type === "image" ? false : true, file: (_g = url !== null && url !== void 0 ? url : clonedSelectedData[eachAttribute.id]) !== null && _g !== void 0 ? _g : "", 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 "multipleFile":
+                case "multipleImage":
+                    var multipleDataUrl = clonedSelectedData[eachAttribute.id]["data"].map(function (eachImage) {
+                        return {
+                            token: eachImage.token,
+                            fileName: (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName, props.id, eachImage.fileName, eachImage.token),
+                        };
+                    });
+                    inputList.push(react_2.default.createElement(uploadInput_1.UploadInput, { type: "multi", files: __assign(__assign({}, clonedSelectedData[eachAttribute.id]), { data: multipleDataUrl }), ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, hidePreview: eachAttribute.type === "multipleImage" ? false : true, accept: eachAttribute.type === "multipleImage"
+                            ? ".png,.jpg,.jpe,.tiff"
+                            : ".pdf", fileDescription: eachAttribute.type === "multipleImage"
+                            ? undefined
+                            : "PDF up to 30MB", maxFileSize: props.maxFileSize, onChange: function (_a) {
+                            var value = _a.value, action = _a.action;
+                            handleOnChangeFiles(eachAttribute.id, value, action);
+                        }, lib: {
+                            axios: (_h = props.lib) === null || _h === void 0 ? void 0 : _h.axios,
+                        }, disabled: disabled }));
                     break;
                 case "number":
-                    inputList.push(react_2.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 }));
+                    inputList.push(react_2.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "number", value: (_j = clonedSelectedData[eachAttribute.id]) !== null && _j !== void 0 ? _j : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
                     break;
                 case "reference":
                 case "listReference":
                     inputList.push(react_2.default.createElement(react_2.default.Fragment, null,
-                        react_2.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_h = clonedSelectedData[eachAttribute.id]) !== null && _h !== void 0 ? _h : (eachAttribute.type === "reference" ? "" : []), label: label, options: isObject
+                        react_2.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: isObject
                                 ? referencesOptions[selectedObjectStructureId + "." + eachAttribute.id]
-                                : (_j = referencesOptions[eachAttribute.id]) !== null && _j !== void 0 ? _j : [], onChange: function (value) {
+                                : (_l = referencesOptions[eachAttribute.id]) !== null && _l !== void 0 ? _l : [], onChange: function (value) {
                                 handleOnChangeSelect(eachAttribute.id, value);
                             }, additional: referenceLoading ? exports.loadingSelect : exports.additionalSelect, onSearch: function (value) { return __awaiter(_this, void 0, void 0, function () {
                                 var clonedReferencesOptions, filterObjectModel;
@@ -1858,7 +1948,7 @@ function DataTemplate(props) {
                             }); }, disabled: disabled })));
                     break;
                 case "string":
-                    inputList.push(react_2.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "text", value: (_k = clonedSelectedData[eachAttribute.id]) !== null && _k !== void 0 ? _k : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
+                    inputList.push(react_2.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_2.default.createElement(datePicker_1.InputDatePicker, { title: label, id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], onChange: handleOnChangeDate, value: clonedSelectedData[eachAttribute.id], disabled: disabled }));
@@ -1872,7 +1962,7 @@ function DataTemplate(props) {
     var renderDetailListData = function () {
         var _a;
         var detailList = [];
-        var _loop_5 = function (eachKey, eachValue) {
+        var _loop_2 = function (eachKey, eachValue) {
             if (eachKey !== "id" &&
                 eachKey !== "_id" &&
                 eachKey !== "baseUpdatedAt") {
@@ -1887,7 +1977,7 @@ function DataTemplate(props) {
         };
         for (var _i = 0, _b = Object.entries(selectedData); _i < _b.length; _i++) {
             var _c = _b[_i], eachKey = _c[0], eachValue = _c[1];
-            _loop_5(eachKey, eachValue);
+            _loop_2(eachKey, eachValue);
         }
         return detailList;
     };
@@ -1905,7 +1995,7 @@ function DataTemplate(props) {
                             title: "",
                         };
                         var isTitle = true;
-                        var _loop_6 = function (eachKey, eachValue) {
+                        var _loop_3 = function (eachKey, eachValue) {
                             if (eachListObject.objectData) {
                                 var model = eachListObject.objectData.find(function (eachAttribute) {
                                     return eachAttribute.id === eachKey;
@@ -1955,7 +2045,7 @@ function DataTemplate(props) {
                         };
                         for (var _i = 0, _a = Object.entries(eachObject); _i < _a.length; _i++) {
                             var _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                            _loop_6(eachKey, eachValue);
+                            _loop_3(eachKey, eachValue);
                         }
                         if (list_2[eachListObject.id]) {
                             list_2[eachListObject.id].push(eachNewList);