blixify-ui-web 0.4.208 → 0.4.210

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAQN,MAAM,OAAO,CAAC;AAuEf,OAAO,EACL,iBAAiB,EAKlB,MAAM,kBAAkB,CAAC;AAoB1B,eAAO,MAAM,YAAY,mFA+6PvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAQN,MAAM,OAAO,CAAC;AAuEf,OAAO,EACL,iBAAiB,EAKlB,MAAM,kBAAkB,CAAC;AAoB1B,eAAO,MAAM,YAAY,mFAsnQvB,CAAC"}

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

@@ -1359,12 +1359,36 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleSubmitObjectDataType = function () {
-        var _a, _b;
+        var _a, _b, _c;
         var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, false, showId);
         var filterObjectModel = structure.find(function (eachModel) {
             return eachModel.id === selectedObjectStructureId;
         });
         var clonedSelectedObjectData = (0, updateModule_1.handleClonedDataAttribute)(selectedObjectData, (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [], props.devSettings.server, true, true);
+        // Clean up canvas background images that were unselected or cleared
+        // If a canvas has backgroundImage with _cleared flag, clear it when modal closes
+        (_b = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) === null || _b === void 0 ? void 0 : _b.forEach(function (eachAttribute) {
+            if (eachAttribute.type === "canvas" &&
+                eachAttribute.enableImageUpload &&
+                clonedSelectedObjectData[eachAttribute.id] &&
+                !Array.isArray(clonedSelectedObjectData[eachAttribute.id]) &&
+                clonedSelectedObjectData[eachAttribute.id].backgroundImage) {
+                var bgImage = clonedSelectedObjectData[eachAttribute.id]
+                    .backgroundImage;
+                // If it has _cleared flag and no token, it means it was cleared/unselected
+                // Clear it when modal closes
+                if (bgImage._cleared && !bgImage.token) {
+                    clonedSelectedObjectData[eachAttribute.id] = __assign(__assign({}, clonedSelectedObjectData[eachAttribute.id]), { backgroundImage: null });
+                }
+                else if (bgImage._cleared && bgImage.token) {
+                    // Has token but also _cleared flag - remove the flag (shouldn't happen, but safe)
+                    clonedSelectedObjectData[eachAttribute.id] = __assign(__assign({}, clonedSelectedObjectData[eachAttribute.id]), { backgroundImage: {
+                            fileName: bgImage.fileName,
+                            token: bgImage.token,
+                        } });
+                }
+            }
+        });
         if (!clonedSelectedObjectData["id"]) {
             clonedSelectedObjectData["id"] = (0, uuid_1.v4)();
         }
@@ -1395,7 +1419,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else {
             //INFO: [UPDATE] Updating an object field
-            var clonedSelectedObjectData_1 = (0, updateModule_1.handleClonedDataAttribute)(selectedObjectData, (_b = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _b !== void 0 ? _b : [], props.devSettings.server, true);
+            var clonedSelectedObjectData_1 = (0, updateModule_1.handleClonedDataAttribute)(selectedObjectData, (_c = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _c !== void 0 ? _c : [], props.devSettings.server, true);
             clonedSelectedData[selectedObjectStructureId] = clonedSelectedObjectData_1;
             setSelectedData(clonedSelectedData);
         }
@@ -1550,18 +1574,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
      * Multi Image - imageColl/dataId/token${imageFileExtension} - Applies to the same to object & listObject
      */
     var handleParseImageField = function (dataId, selectedData, model, objectId, listObject) { return __awaiter(void 0, void 0, void 0, function () {
-        var uploadAsset_1, removeAsset_1, imageAttribute, multiImageAttribute, err_4;
+        var uploadAsset_1, removeAsset_1, imageAttribute, multiImageAttribute, canvasAttribute, err_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 3, , 4]);
+                    _a.trys.push([0, 4, , 5]);
                     uploadAsset_1 = function (eachImage, selectedField, listObjectId, multiple) { return __awaiter(void 0, void 0, void 0, function () {
-                        var uploadedData_1, imageValue, imageCollectionName, imageParentId, responseData, err_5;
-                        var _a, _b, _c;
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
+                        var uploadedData_1, imageValue, imageCollectionName, imageParentId, fileName, responseData, err_5;
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
                                 case 0:
-                                    _d.trys.push([0, 9, , 10]);
+                                    _c.trys.push([0, 9, , 10]);
                                     if (!(typeof selectedField === "string" &&
                                         eachImage.type !== "signature")) return [3 /*break*/, 1];
                                     return [2 /*return*/, selectedField];
@@ -1594,7 +1618,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                                                 : "";
                                                         fileName = eachImage.filePreserveName && originalFileName
                                                             ? (eachImage.filePrefix || "") + originalFileName
-                                                            : (0, uuid_1.v4)() + (eachImage.imageFileName || "");
+                                                            : eachImage.imageFileName
+                                                                ? (0, uuid_1.v4)() + eachImage.imageFileName
+                                                                : eachField.fileName instanceof File
+                                                                    ? (0, uuid_1.v4)() + "-" + eachField.fileName.name
+                                                                    : (0, uuid_1.v4)() + "-" + (originalFileName || "");
                                                         return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, fileName, eachField.fileName, (_c = devSettings.bucketName) !== null && _c !== void 0 ? _c : "")];
                                                     case 1:
                                                         responseData = _d.sent();
@@ -1608,7 +1636,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                             });
                                         }); }))];
                                 case 2:
-                                    _d.sent();
+                                    _c.sent();
                                     return [2 /*return*/, selectedField["data"].concat(uploadedData_1)];
                                 case 3: return [2 /*return*/, selectedField];
                                 case 4: return [3 /*break*/, 8];
@@ -1630,9 +1658,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         imageParentId += "/".concat(listObjectId);
                                     }
                                     if (!imageValue) return [3 /*break*/, 7];
-                                    return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, (_b = eachImage.imageFileName) !== null && _b !== void 0 ? _b : "", imageValue, (_c = devSettings.bucketName) !== null && _c !== void 0 ? _c : "")];
+                                    fileName = eachImage.imageFileName
+                                        ? eachImage.imageFileName
+                                        : imageValue instanceof File
+                                            ? (0, uuid_1.v4)() + imageValue.name
+                                            : "";
+                                    return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, fileName, imageValue, (_b = devSettings.bucketName) !== null && _b !== void 0 ? _b : "")];
                                 case 6:
-                                    responseData = _d.sent();
+                                    responseData = _c.sent();
                                     if (responseData.data) {
                                         return [2 /*return*/, responseData.data.data];
                                     }
@@ -1642,7 +1675,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 case 7: return [2 /*return*/, ""];
                                 case 8: return [3 /*break*/, 10];
                                 case 9:
-                                    err_5 = _d.sent();
+                                    err_5 = _c.sent();
                                     return [3 /*break*/, 10];
                                 case 10: return [2 /*return*/];
                             }
@@ -1809,16 +1842,118 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }); }))];
                 case 2:
                     _a.sent();
-                    return [2 /*return*/, selectedData];
+                    canvasAttribute = model.filter(function (eachAttribute) {
+                        return (eachAttribute.type === "canvas" && eachAttribute.enableImageUpload);
+                    });
+                    return [4 /*yield*/, Promise.all(canvasAttribute.map(function (eachCanvas) { return __awaiter(void 0, void 0, void 0, function () {
+                            var canvasData, imageCollectionName, imageParentId, originalFileName, fileName, responseData, err_6;
+                            var _a, _b;
+                            return __generator(this, function (_c) {
+                                switch (_c.label) {
+                                    case 0:
+                                        if (!(listObject && objectId)) return [3 /*break*/, 3];
+                                        if (!Array.isArray(selectedData[objectId])) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, Promise.all(selectedData[objectId].map(function (eachListItem, index) { return __awaiter(void 0, void 0, void 0, function () {
+                                                var selectedObjectId, canvasData, imageCollectionName, imageParentId, originalFileName, fileName, responseData, err_7;
+                                                var _a, _b, _c;
+                                                return __generator(this, function (_d) {
+                                                    switch (_d.label) {
+                                                        case 0:
+                                                            selectedObjectId = (_a = eachListItem.id) !== null && _a !== void 0 ? _a : (0, uuid_1.v4)();
+                                                            canvasData = eachListItem[eachCanvas.id];
+                                                            if (!(canvasData &&
+                                                                !Array.isArray(canvasData) &&
+                                                                canvasData.backgroundImage &&
+                                                                canvasData.backgroundImage.file &&
+                                                                canvasData.backgroundImage.file instanceof File)) return [3 /*break*/, 4];
+                                                            imageCollectionName = (_b = eachCanvas.imageCollectionName) !== null && _b !== void 0 ? _b : "";
+                                                            if (objectId) {
+                                                                imageCollectionName += "/".concat(dataId);
+                                                            }
+                                                            imageParentId = "".concat(objectId, "/").concat(selectedObjectId, "/").concat(eachCanvas.id);
+                                                            originalFileName = canvasData.backgroundImage.fileName;
+                                                            fileName = eachCanvas.filePreserveName && originalFileName
+                                                                ? (eachCanvas.filePrefix || "") + originalFileName
+                                                                : (0, uuid_1.v4)() + (eachCanvas.imageFileName || ".png");
+                                                            _d.label = 1;
+                                                        case 1:
+                                                            _d.trys.push([1, 3, , 4]);
+                                                            return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachCanvas), imageParentId, imageCollectionName, fileName, canvasData.backgroundImage.file, (_c = devSettings.bucketName) !== null && _c !== void 0 ? _c : "")];
+                                                        case 2:
+                                                            responseData = _d.sent();
+                                                            if (responseData.data) {
+                                                                // Replace file with token
+                                                                selectedData[objectId][index][eachCanvas.id] = __assign(__assign({}, canvasData), { backgroundImage: {
+                                                                        fileName: fileName,
+                                                                        token: responseData.data.data,
+                                                                    } });
+                                                            }
+                                                            return [3 /*break*/, 4];
+                                                        case 3:
+                                                            err_7 = _d.sent();
+                                                            return [3 /*break*/, 4];
+                                                        case 4: return [2 /*return*/, null];
+                                                    }
+                                                });
+                                            }); }))];
+                                    case 1:
+                                        _c.sent();
+                                        _c.label = 2;
+                                    case 2: return [3 /*break*/, 7];
+                                    case 3:
+                                        canvasData = selectedData[eachCanvas.id];
+                                        if (!canvasData || Array.isArray(canvasData))
+                                            return [2 /*return*/, null];
+                                        if (!(canvasData.backgroundImage &&
+                                            canvasData.backgroundImage.file &&
+                                            canvasData.backgroundImage.file instanceof File)) return [3 /*break*/, 7];
+                                        imageCollectionName = (_a = eachCanvas.imageCollectionName) !== null && _a !== void 0 ? _a : "";
+                                        if (objectId) {
+                                            imageCollectionName += "/".concat(dataId);
+                                        }
+                                        imageParentId = objectId ? objectId : dataId;
+                                        if (listObject && objectId) {
+                                            imageParentId += "/".concat(eachCanvas.id);
+                                        }
+                                        originalFileName = canvasData.backgroundImage.fileName;
+                                        fileName = eachCanvas.filePreserveName && originalFileName
+                                            ? (eachCanvas.filePrefix || "") + originalFileName
+                                            : (0, uuid_1.v4)() + (eachCanvas.imageFileName || ".png");
+                                        _c.label = 4;
+                                    case 4:
+                                        _c.trys.push([4, 6, , 7]);
+                                        return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachCanvas), imageParentId + "/baseCanvas", imageCollectionName, fileName, canvasData.backgroundImage.file, (_b = devSettings.bucketName) !== null && _b !== void 0 ? _b : "")];
+                                    case 5:
+                                        responseData = _c.sent();
+                                        if (responseData.data) {
+                                            // Replace file with token
+                                            selectedData[eachCanvas.id] = __assign(__assign({}, canvasData), { backgroundImage: {
+                                                    fileName: fileName,
+                                                    token: responseData.data.data,
+                                                } });
+                                        }
+                                        return [3 /*break*/, 7];
+                                    case 6:
+                                        err_6 = _c.sent();
+                                        console.error("[Canvas Upload] Upload error:", err_6);
+                                        return [3 /*break*/, 7];
+                                    case 7: return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
                 case 3:
+                    _a.sent();
+                    return [2 /*return*/, selectedData];
+                case 4:
                     err_4 = _a.sent();
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                    console.error("[Canvas Upload] Error in handleParseImageField:", err_4);
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
     var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName, bucketName) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataForm, err_6;
+        var dataForm, err_8;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1840,14 +1975,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _b.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_6 = _b.sent();
+                    err_8 = _b.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
         });
     }); };
     var handleRemoveImage = function (bucketName) { return __awaiter(void 0, void 0, void 0, function () {
-        var data, uploadEndpoint, err_7;
+        var data, uploadEndpoint, err_9;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -1871,7 +2006,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _c.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_7 = _c.sent();
+                    err_9 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -1893,7 +2028,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setDeletePasscode(passcode);
     };
     var handleMultipleRemoveSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var passcodeMatch, offlineDataResp, offlineData, filteredData, ids, notReferenceId, query, responseData, responseData, data, uploadEndpoint, err_8;
+        var passcodeMatch, offlineDataResp, offlineData, filteredData, ids, notReferenceId, query, responseData, responseData, data, uploadEndpoint, err_10;
         var _a, _b, _c, _d, _e;
         return __generator(this, function (_f) {
             switch (_f.label) {
@@ -1993,7 +2128,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [2 /*return*/];
                 case 15: return [3 /*break*/, 17];
                 case 16:
-                    err_8 = _f.sent();
+                    err_10 = _f.sent();
                     return [3 /*break*/, 17];
                 case 17:
                     setDeletePasscodeInput("");
@@ -2003,7 +2138,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleRemoveSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var deletable, selectedId_1, deleteIds, res, offlineDataResp, offlineData, selectedIndex_2, err_9;
+        var deletable, selectedId_1, deleteIds, res, offlineDataResp, offlineData, selectedIndex_2, err_11;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return __generator(this, function (_k) {
             switch (_k.label) {
@@ -2072,7 +2207,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _k.label = 12;
                 case 12: return [3 /*break*/, 14];
                 case 13:
-                    err_9 = _k.sent();
+                    err_11 = _k.sent();
                     setDeleteModal(false);
                     setDeleteFeedId("");
                     return [3 /*break*/, 14];
@@ -2085,7 +2220,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleCheckDeleteReference = function (selectedData, multipleDelete) { return __awaiter(void 0, void 0, void 0, function () {
-        var existDataIds, existsData, handleFindReference_1, collectionIdList_1, columnIdList_1, collectionNameList_1, refStructureList_1, schemaQuery, schemaRes, spaceList, err_10;
+        var existDataIds, existsData, handleFindReference_1, collectionIdList_1, columnIdList_1, collectionNameList_1, refStructureList_1, schemaQuery, schemaRes, spaceList, err_12;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -2290,7 +2425,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _c.label = 9;
                 case 9: return [3 /*break*/, 11];
                 case 10:
-                    err_10 = _c.sent();
+                    err_12 = _c.sent();
                     return [3 /*break*/, 11];
                 case 11:
                     setReferenceDeleteTableData(existsData);
@@ -2303,7 +2438,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleCloneSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var responseData, newDataList_1, res, err_11;
+        var responseData, newDataList_1, res, err_13;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2340,7 +2475,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _a.label = 3;
                 case 3: return [3 /*break*/, 5];
                 case 4:
-                    err_11 = _a.sent();
+                    err_13 = _a.sent();
                     return [3 /*break*/, 5];
                 case 5:
                     setLoading(false);
@@ -2349,7 +2484,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleBatchDraftData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var res, err_12;
+        var res, err_14;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2373,7 +2508,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         handleRefresh(false, true);
                     return [3 /*break*/, 3];
                 case 2:
-                    err_12 = _a.sent();
+                    err_14 = _a.sent();
                     return [3 /*break*/, 3];
                 case 3:
                     setLoading(false);
@@ -2382,7 +2517,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleBatchUpdateData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var model_1, columnId_1, dataToSubmit_1, isFile, res, updateQuery, selectAllQuery, batchUpdateConfig, res, err_13;
+        var model_1, columnId_1, dataToSubmit_1, isFile, res, updateQuery, selectAllQuery, batchUpdateConfig, res, err_15;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2464,12 +2599,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _a.label = 6;
                 case 6: return [3 /*break*/, 8];
                 case 7:
-                    err_13 = _a.sent();
-                    if (err_13.response && err_13.response.status === 400) {
+                    err_15 = _a.sent();
+                    if (err_15.response && err_15.response.status === 400) {
                         setNotification({
                             type: false,
                             title: "Error",
-                            msg: err_13.response.data.err,
+                            msg: err_15.response.data.err,
                         });
                     }
                     return [3 /*break*/, 8];
@@ -2480,7 +2615,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleUploadOfflineData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataUploadedId, offlineDataResp, offlineData, offlineDataIds, updateDataRes, updateDataList, _loop_1, i, err_14, success, filteredData;
+        var dataUploadedId, offlineDataResp, offlineData, offlineDataIds, updateDataRes, updateDataList, _loop_1, i, err_16, success, filteredData;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -2545,7 +2680,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 4];
                 case 7: return [3 /*break*/, 9];
                 case 8:
-                    err_14 = _b.sent();
+                    err_16 = _b.sent();
                     return [3 /*break*/, 9];
                 case 9:
                     success = dataUploadedId.length === offlineData.length;
@@ -2571,7 +2706,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleSubmitData = function (type, rowId, columnId, data, offlineId, isOfflineUpdate, isDraft) { return __awaiter(void 0, void 0, void 0, function () {
-        var selectedId_2, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, tempData, err_15, offlineDataResp, tempData, selectedIndex_3, offlineData, err_16, dataToSubmit, operationType, selectedIndex_4, dataId, err_17;
+        var selectedId_2, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, tempData, err_17, offlineDataResp, tempData, selectedIndex_3, offlineData, err_18, dataToSubmit, operationType, selectedIndex_4, dataId, err_19;
         var _a, _b;
         var _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
@@ -2646,7 +2781,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     res = true;
                     return [3 /*break*/, 8];
                 case 7:
-                    err_15 = _j.sent();
+                    err_17 = _j.sent();
                     return [3 /*break*/, 8];
                 case 8: return [3 /*break*/, 11];
                 case 9: return [4 /*yield*/, writeServerQuery.call("create", {
@@ -2688,7 +2823,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     res = true;
                     return [3 /*break*/, 17];
                 case 16:
-                    err_16 = _j.sent();
+                    err_18 = _j.sent();
                     return [3 /*break*/, 17];
                 case 17: return [3 /*break*/, 20];
                 case 18:
@@ -2766,14 +2901,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     dataId = res ? id : "";
                     return [2 /*return*/, dataId];
                 case 31:
-                    err_17 = _j.sent();
-                    console.log("error", err_17);
-                    if (err_17.response && err_17.response.status === 400) {
-                        if (typeof ((_h = err_17.response.data) === null || _h === void 0 ? void 0 : _h.err) === "string")
+                    err_19 = _j.sent();
+                    console.log("error", err_19);
+                    if (err_19.response && err_19.response.status === 400) {
+                        if (typeof ((_h = err_19.response.data) === null || _h === void 0 ? void 0 : _h.err) === "string")
                             setNotification({
                                 type: false,
                                 title: "Error",
-                                msg: err_17.response.data.err,
+                                msg: err_19.response.data.err,
                             });
                         else
                             setNotification({
@@ -2826,7 +2961,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleSubmit = function (isDraft) { return __awaiter(void 0, void 0, void 0, function () {
-        var preComplete, res, err_18;
+        var preComplete, res, err_20;
         var _a;
         var _b, _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
@@ -2876,7 +3011,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setLoading(false);
                     return [3 /*break*/, 10];
                 case 9:
-                    err_18 = _j.sent();
+                    err_20 = _j.sent();
                     setModalVisible(false);
                     setLoading(false);
                     return [3 /*break*/, 10];
@@ -3110,7 +3245,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         handleUpdateChangeData(clonedData);
     };
     var handleOnChangeSelect = function (id, value) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, data, model, clonedData, refetchReference, currentSchema, allowedWatchedColumnTypes_1, watchedColumns, _i, watchedColumns_1, eachWatched, dependency, referenceRQ, valueRes, err_19;
+        var _a, data, model, clonedData, refetchReference, currentSchema, allowedWatchedColumnTypes_1, watchedColumns, _i, watchedColumns_1, eachWatched, dependency, referenceRQ, valueRes, err_21;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -3173,7 +3308,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 3];
                 case 6: return [3 /*break*/, 8];
                 case 7:
-                    err_19 = _b.sent();
+                    err_21 = _b.sent();
                     return [3 /*break*/, 8];
                 case 8:
                     clonedData[id] = value;
@@ -3251,7 +3386,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleStepCSV = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var csvList_1, _loop_2, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, excelFormData, updateFields, response, open_1, err_20;
+        var csvList_1, _loop_2, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, excelFormData, updateFields, response, open_1, err_22;
         var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return __generator(this, function (_p) {
             switch (_p.label) {
@@ -3399,12 +3534,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _p.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
-                    err_20 = _p.sent();
+                    err_22 = _p.sent();
                     setLoading(false);
                     setNotification({
                         type: false,
                         title: "Import Error",
-                        msg: err_20.message,
+                        msg: err_22.message,
                     });
                     return [3 /*break*/, 7];
                 case 7: return [2 /*return*/];
@@ -3412,7 +3547,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleExportCSVData = function (downloadLinkOnly, printOnly) { return __awaiter(void 0, void 0, void 0, function () {
-        var exportQueryList, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_21;
+        var exportQueryList, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_23;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         return __generator(this, function (_1) {
             switch (_1.label) {
@@ -3486,7 +3621,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setExportCSVEmail((_0 = (_z = props.devSettings.currentUser) === null || _z === void 0 ? void 0 : _z.userEmail) !== null && _0 !== void 0 ? _0 : "");
                     return [3 /*break*/, 6];
                 case 5:
-                    err_21 = _1.sent();
+                    err_23 = _1.sent();
                     setNotification({
                         type: true,
                         title: "Export Failed",
@@ -3542,7 +3677,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleExportReadPDF = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var elementToExport, canvas, pdf, pageWidth, pageHeight, margin, headerConfig_1, headerHeight, imageDataURL, imageWidth_1, imageHeight_1, hasImage, hasText, img_1, err_22, textHeight, usableWidth, imgHeight, usableHeight, heightLeft, page, currentY, imgX, imgY, imgW, imgH, finalX, textY, textX, sourceY, sourceHeight, pageCanvas, ctx, pageData, pdfBlob, err_23;
+        var elementToExport, canvas, pdf, pageWidth, pageHeight, margin, headerConfig_1, headerHeight, imageDataURL, imageWidth_1, imageHeight_1, hasImage, hasText, img_1, err_24, textHeight, usableWidth, imgHeight, usableHeight, heightLeft, page, currentY, imgX, imgY, imgW, imgH, finalX, textY, textX, sourceY, sourceHeight, pageCanvas, ctx, pageData, pdfBlob, err_25;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return __generator(this, function (_p) {
             switch (_p.label) {
@@ -3628,8 +3763,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     headerHeight = imageHeight_1 + 2;
                     return [3 /*break*/, 10];
                 case 9:
-                    err_22 = _p.sent();
-                    console.error("Failed to load PDF header image:", err_22);
+                    err_24 = _p.sent();
+                    console.error("Failed to load PDF header image:", err_24);
                     console.error("Image source:", headerConfig_1.image.src);
                     return [3 /*break*/, 10];
                 case 10:
@@ -3718,8 +3853,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                     return [3 /*break*/, 14];
                 case 12:
-                    err_23 = _p.sent();
-                    console.error("PDF export error:", err_23);
+                    err_25 = _p.sent();
+                    console.error("PDF export error:", err_25);
                     setNotification({
                         type: false,
                         title: "Error",
@@ -4265,10 +4400,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, false, remainId);
         isCanvas.map(function (eachCanvas) {
-            var _a;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             canvasElement.push(react_1.default.createElement("div", { key: eachCanvas.id, className: "w-full my-6" },
                 react_1.default.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-4" }, eachCanvas.name),
-                react_1.default.createElement(canvas_1.Canvas, { label: eachCanvas.name, texts: (_a = clonedSelectedData[eachCanvas.id]) !== null && _a !== void 0 ? _a : [], backgroundImageUrl: eachCanvas.canvasImage, disabled: true })));
+                react_1.default.createElement(canvas_1.Canvas, { label: eachCanvas.name, texts: eachCanvas.enableDraw || eachCanvas.enableImageUpload
+                        ? Array.isArray(clonedSelectedData[eachCanvas.id]) ||
+                            !clonedSelectedData[eachCanvas.id]
+                            ? (_a = clonedSelectedData[eachCanvas.id]) !== null && _a !== void 0 ? _a : []
+                            : (_b = clonedSelectedData[eachCanvas.id].texts) !== null && _b !== void 0 ? _b : []
+                        : Array.isArray(clonedSelectedData[eachCanvas.id])
+                            ? clonedSelectedData[eachCanvas.id]
+                            : (_d = (_c = clonedSelectedData[eachCanvas.id]) === null || _c === void 0 ? void 0 : _c.texts) !== null && _d !== void 0 ? _d : [], drawings: eachCanvas.enableDraw
+                        ? Array.isArray(clonedSelectedData[eachCanvas.id]) ||
+                            !clonedSelectedData[eachCanvas.id]
+                            ? []
+                            : (_e = clonedSelectedData[eachCanvas.id].drawings) !== null && _e !== void 0 ? _e : []
+                        : [], backgroundImageUrl: eachCanvas.enableImageUpload &&
+                        ((_g = (_f = clonedSelectedData[eachCanvas.id]) === null || _f === void 0 ? void 0 : _f.backgroundImage) === null || _g === void 0 ? void 0 : _g.token)
+                        ? // If backgroundImage has token, construct URL from token and fileName
+                            (0, blobModule_1.renderImageUrlFromPath)(devSettings.imageEndpoint, (_h = eachCanvas.imageCollectionName) !== null && _h !== void 0 ? _h : "", ((_j = props.id) !== null && _j !== void 0 ? _j : "") + "%2FbaseCanvas", clonedSelectedData[eachCanvas.id].backgroundImage.fileName, clonedSelectedData[eachCanvas.id].backgroundImage.token, devSettings.bucketName)
+                        : eachCanvas.canvasImage, readOnly: true })));
             return null;
         });
         return canvasElement;