blixify-ui-web 0.1.105 → 0.1.107

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

@@ -26,7 +26,10 @@ interface Props extends LinkProps {
     dbEndpoint: string;
     schemaEndpoint: string;
     localURLEndpoint: string;
-    imageEndpoint?: string;
+    imageEndpoint: string;
+    uploadEndpoint?: string;
+    bucketName?: string;
+    maxFileSize?: number;
     limit?: number;
     sort?: {
         sortId: string;
@@ -43,7 +46,6 @@ interface Props extends LinkProps {
         renderComp?: () => void;
     }[];
     breadcrumb?: boolean;
-    maxFileSize?: number;
     deleteBtn?: boolean;
     role: "admin" | "manager" | "editor" | "viewer";
     onComplete?: () => void;

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":";AAmCA,OAAO,EAAE,MAAM,EAAU,MAAM,oBAAoB,CAAC;AAKpD,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAUvD,OAAO,EAAmB,aAAa,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,KAAM,SAAQ,SAAS;IAC/B,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,YAAY,CAAC,EAAE,GAAG,CAAC;QACnB,IAAI,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,GAAG,CAAC;QACZ,UAAU,EAAE,GAAG,CAAC;QAChB,UAAU,CAAC,EAAE,GAAG,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,MAAM,EAAE,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;KACzB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAwDD,eAAO,MAAM,aAAa,aAKzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,aAK5B,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,eAqvGxC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data/dataTemplate/index.tsx"],"names":[],"mappings":";AAoCA,OAAO,EAAE,MAAM,EAAU,MAAM,oBAAoB,CAAC;AAKpD,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAUvD,OAAO,EAAmB,aAAa,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,UAAU,KAAM,SAAQ,SAAS;IAC/B,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,YAAY,CAAC,EAAE,GAAG,CAAC;QACnB,IAAI,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,GAAG,CAAC;QACZ,UAAU,EAAE,GAAG,CAAC;QAChB,UAAU,CAAC,EAAE,GAAG,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,MAAM,EAAE,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;KACzB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAwDD,eAAO,MAAM,aAAa,aAKzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,aAK5B,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,eA42GxC"}

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

@@ -114,6 +114,7 @@ var readQuery_1 = require("../readQuery");
 var readQueryHoc_1 = require("../readQueryHoc");
 var utils_2 = require("../utils");
 var writeQuery_1 = require("../writeQuery");
+var grid_1 = require("../../display/grid");
 var queryTableHeader = [
     {
         key: "name",
@@ -574,33 +575,33 @@ function DataTemplate(props) {
     };
     var handleGetListData = function (responseData) { return __awaiter(_this, void 0, void 0, function () {
         var dataList, handleListResponse;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
                     dataList = [];
-                    return [4 /*yield*/, (0, utils_2.handleListDataBasedOnModel)(responseData.data, props.server, dbModule, props.model, (_a = props.imageEndpoint) !== null && _a !== void 0 ? _a : "", props.localURLEndpoint, props.collectionId, props.dbEndpoint, (_b = props.organisationMembers) !== null && _b !== void 0 ? _b : [], handleNavigate)];
+                    return [4 /*yield*/, (0, utils_2.handleListDataBasedOnModel)(responseData.data, props.server, dbModule, props.model, props.imageEndpoint, props.localURLEndpoint, props.collectionId, props.dbEndpoint, (_a = props.organisationMembers) !== null && _a !== void 0 ? _a : [], handleNavigate, props.bucketName)];
                 case 1:
-                    handleListResponse = _c.sent();
+                    handleListResponse = _b.sent();
                     if (!(props.server === "mongoServer")) return [3 /*break*/, 4];
                     if (!responseData.data) return [3 /*break*/, 3];
                     return [4 /*yield*/, handleListResponse];
                 case 2:
-                    dataList = _c.sent();
+                    dataList = _b.sent();
                     setTableData(dataList);
                     setSize(responseData.count);
-                    _c.label = 3;
+                    _b.label = 3;
                 case 3: return [3 /*break*/, 7];
                 case 4:
                     if (!responseData.data) return [3 /*break*/, 6];
                     return [4 /*yield*/, handleListResponse];
                 case 5:
-                    dataList = _c.sent();
-                    _c.label = 6;
+                    dataList = _b.sent();
+                    _b.label = 6;
                 case 6:
                     setTableData(filterSearchParams ? dataList : dataList.concat(tableData));
                     setCursor(responseData.count);
-                    _c.label = 7;
+                    _b.label = 7;
                 case 7:
                     setTableLoading(false);
                     return [2 /*return*/];
@@ -703,32 +704,37 @@ function DataTemplate(props) {
     //=====================================================================================
     //SECTION: Handle Assets
     //=====================================================================================
-    var handleUploadAxios = function (eachImageEndpoint, assetParentId, assetCollectionName, assetFileName, file) { return __awaiter(_this, void 0, void 0, function () {
-        var responseData, err_3;
+    var handleUploadAxios = function (eachImageEndpoint, assetParentId, assetCollectionName, assetFileName, file, bucketName) { return __awaiter(_this, void 0, void 0, function () {
+        var data, responseData, err_3;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    _c.trys.push([0, 2, , 3]);
+                    data = {
+                        assetParentId: assetParentId,
+                        assetCollectionName: assetCollectionName,
+                        assetFileName: assetFileName,
+                    };
+                    if (bucketName)
+                        data["bucketName"] = bucketName;
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios.post((_b = eachImageEndpoint + "/upload") !== null && _b !== void 0 ? _b : "", {
                             file: file,
-                            data: {
-                                assetParentId: assetParentId,
-                                assetCollectionName: assetCollectionName,
-                                assetFileName: assetFileName,
-                            },
+                            data: data,
                         }, {
                             headers: {
                                 "Content-Type": "multipart/form-data",
                             },
                         }))];
-                case 1:
+                case 2:
                     responseData = _c.sent();
                     return [2 /*return*/, responseData];
-                case 2:
+                case 3:
                     err_3 = _c.sent();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
@@ -779,6 +785,14 @@ function DataTemplate(props) {
             }
         });
     }); };
+    var handleUploadEndpoint = function (eachImage) {
+        if (props.uploadEndpoint)
+            return props.uploadEndpoint;
+        else if (eachImage.uploadEndpoint)
+            return eachImage.uploadEndpoint;
+        else
+            return "/api/asset";
+    };
     /**
      *
      * INFO: Image Endpoint
@@ -825,7 +839,7 @@ function DataTemplate(props) {
                                                             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)];
+                                                        return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, fileName, eachField.fileName, (_b = props.bucketName) !== null && _b !== void 0 ? _b : "")];
                                                     case 1:
                                                         responseData = _c.sent();
                                                         if (responseData.data)
@@ -850,7 +864,7 @@ function DataTemplate(props) {
                                     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)];
+                                    return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, (_b = eachImage.imageFileName) !== null && _b !== void 0 ? _b : "", selectedField, (_c = props.bucketName) !== null && _c !== void 0 ? _c : "")];
                                 case 4:
                                     responseData = _d.sent();
                                     if (responseData.data) {
@@ -878,7 +892,7 @@ function DataTemplate(props) {
                                                     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)];
+                                                    return [4 /*yield*/, handleRemoveImageAxios(handleUploadEndpoint(eachImage), (_a = props.id) !== null && _a !== void 0 ? _a : "", (_b = eachImage.imageCollectionName) !== null && _b !== void 0 ? _b : "", imageFileName, (_c = props.bucketName) !== null && _c !== void 0 ? _c : "")];
                                                 case 1:
                                                     _d.sent();
                                                     return [2 /*return*/];
@@ -976,19 +990,22 @@ function DataTemplate(props) {
             }
         });
     }); };
-    var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName) { return __awaiter(_this, void 0, void 0, function () {
-        var err_6;
+    var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName, bucketName) { return __awaiter(_this, void 0, void 0, function () {
+        var data, err_6;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
                     _c.trys.push([0, 2, , 3]);
+                    data = {
+                        assetParentId: assetParentId,
+                        assetCollectionName: assetCollectionName,
+                        assetFileName: assetFileName,
+                    };
+                    if (bucketName)
+                        data["bucketName"] = bucketName;
                     return [4 /*yield*/, ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios.post((_b = imageEndpoint + "/delete") !== null && _b !== void 0 ? _b : "", {
-                            data: {
-                                assetParentId: assetParentId,
-                                assetCollectionName: assetCollectionName,
-                                assetFileName: assetFileName,
-                            },
+                            data: data,
                         }, {
                             headers: {
                                 "Content-Type": "multipart/form-data",
@@ -1004,24 +1021,28 @@ function DataTemplate(props) {
             }
         });
     }); };
-    var handleRemoveImage = function () { return __awaiter(_this, void 0, void 0, function () {
-        var err_7;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+    var handleRemoveImage = function (bucketName) { return __awaiter(_this, void 0, void 0, function () {
+        var data, uploadEndpoint, err_7;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    _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,
-                            },
+                    _c.trys.push([0, 2, , 3]);
+                    data = {
+                        assetCollectionName: props.collectionId,
+                        assetParentId: props.id,
+                    };
+                    uploadEndpoint = (_a = props.uploadEndpoint) !== null && _a !== void 0 ? _a : "/api/asset";
+                    if (bucketName)
+                        data["bucketName"] = bucketName;
+                    return [4 /*yield*/, ((_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios.post(uploadEndpoint + "/deleteDirectory", {
+                            data: data,
                         }))];
                 case 1:
-                    _b.sent();
+                    _c.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_7 = _b.sent();
+                    err_7 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -1089,29 +1110,30 @@ function DataTemplate(props) {
     }); };
     var handleRemoveSelectedData = function () { return __awaiter(_this, void 0, void 0, function () {
         var selectedId, res, err_9;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    _a.trys.push([0, 4, , 5]);
+                    _b.trys.push([0, 4, , 5]);
                     selectedId = props.id;
                     if (!selectedId) return [3 /*break*/, 3];
                     setLoading(true);
                     setDeleteModal(true);
-                    return [4 /*yield*/, handleRemoveImage()];
+                    return [4 /*yield*/, handleRemoveImage((_a = props.bucketName) !== null && _a !== void 0 ? _a : "")];
                 case 1:
-                    _a.sent();
+                    _b.sent();
                     return [4 /*yield*/, writeServerQuery.call("delete", { id: selectedId })];
                 case 2:
-                    res = _a.sent();
+                    res = _b.sent();
                     setModalVisible(false);
                     setLoading(false);
                     if (res) {
                         handleNavigate("".concat(props.localURLEndpoint, "?type=list&collection=").concat(props.collectionId, "&data=r"));
                     }
-                    _a.label = 3;
+                    _b.label = 3;
                 case 3: return [3 /*break*/, 5];
                 case 4:
-                    err_9 = _a.sent();
+                    err_9 = _b.sent();
                     setDeleteModal(false);
                     setLoading(false);
                     return [3 /*break*/, 5];
@@ -1182,7 +1204,7 @@ function DataTemplate(props) {
                     dummyRespData = JSON.parse(JSON.stringify(responseData.data), utils_2.jsonReviver);
                     dummyReferenceModelSchema = JSON.parse(JSON.stringify(referenceModelSchema));
                     if (!(props.type === "read")) return [3 /*break*/, 2];
-                    return [4 /*yield*/, (0, utils_2.handleRetrieveDeepModel)(dummyRespData, (_b = props.model) !== null && _b !== void 0 ? _b : [], dbModule, props.server, props.dbEndpoint, props.schemaEndpoint, (_c = props.imageEndpoint) !== null && _c !== void 0 ? _c : "", (_d = props.id) !== null && _d !== void 0 ? _d : "", dummyReferenceModelSchema, (_e = props.organisationMembers) !== null && _e !== void 0 ? _e : [], setReferenceSchema)];
+                    return [4 /*yield*/, (0, utils_2.handleRetrieveDeepModel)(dummyRespData, (_b = props.model) !== null && _b !== void 0 ? _b : [], dbModule, props.server, props.dbEndpoint, props.schemaEndpoint, props.imageEndpoint, (_c = props.id) !== null && _c !== void 0 ? _c : "", dummyReferenceModelSchema, (_d = props.organisationMembers) !== null && _d !== void 0 ? _d : [], setReferenceSchema, undefined, (_e = props.bucketName) !== null && _e !== void 0 ? _e : "")];
                 case 1:
                     _a = _f.sent();
                     return [3 /*break*/, 3];
@@ -1458,7 +1480,7 @@ function DataTemplate(props) {
                                     type: selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type,
                                     imageCollectionName: selectedModel.imageCollectionName,
                                     imageFileName: selectedModel.imageFileName,
-                                    imageEndpoint: selectedModel.imageEndpoint,
+                                    uploadEndpoint: selectedModel.uploadEndpoint,
                                 });
                             }
                             else {
@@ -2021,9 +2043,9 @@ function DataTemplate(props) {
                     if (hasImageToken) {
                         url = isObject
                             ? isObjectList
-                                ? (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName + "%2F" + props.id, selectedObjectStructureId + "%2F" + selectedObjectId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id])
-                                : (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]);
+                                ? (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName + "%2F" + props.id, selectedObjectStructureId + "%2F" + selectedObjectId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id], props.bucketName)
+                                : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName + "%2F" + props.id, selectedObjectStructureId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id], props.bucketName)
+                            : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName, props.id, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id], props.bucketName);
                     }
                     inputList.push(react_1.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, labelExtra: labelExtra, optional: eachAttribute.optional, 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;
@@ -2032,7 +2054,7 @@ function DataTemplate(props) {
                     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),
+                            fileName: (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName, props.id, eachImage.fileName, eachImage.token, props.bucketName),
                         };
                     });
                     inputList.push(react_1.default.createElement(uploadInput_1.UploadInput, { type: "multi", files: __assign(__assign({}, clonedSelectedData[eachAttribute.id]), { data: multipleDataUrl }), optional: eachAttribute.optional, ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, labelExtra: labelExtra, hidePreview: eachAttribute.type === "multipleImage" ? false : true, accept: eachAttribute.type === "multipleImage"
@@ -2157,7 +2179,7 @@ function DataTemplate(props) {
                                 case "image":
                                     var url = void 0;
                                     if (typeof eachValue === "string") {
-                                        url = (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, model.imageCollectionName + "%2F" + props.id, eachListObject.id + "%2F" + eachObject.id, model.imageFileName, eachValue);
+                                        url = (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, model.imageCollectionName + "%2F" + props.id, eachListObject.id + "%2F" + eachObject.id, model.imageFileName, eachValue, props.bucketName);
                                     }
                                     else if (eachValue instanceof File) {
                                         url = URL.createObjectURL(eachValue);
@@ -2493,6 +2515,40 @@ function DataTemplate(props) {
     //=====================================================================================
     //SECTION: Render Utils
     //=====================================================================================
+    var renderGridAndListData = function (imageTag, type) {
+        var gridData = [];
+        tableData.map(function (eachData) {
+            var clonedEachData = JSON.parse(JSON.stringify(eachData));
+            var allValues = Object.values(clonedEachData);
+            var title = allValues.length > 0 ? allValues[1] : "";
+            var desc = "";
+            Object.entries(eachData).map(function (value) {
+                var eachKey = value[0], eachValue = value[1];
+                if (eachKey === "_id" ||
+                    eachKey === "id" ||
+                    eachKey === "baseDraft" ||
+                    eachKey === "baseUpdatedAt" ||
+                    eachKey === "update" ||
+                    eachKey === imageTag ||
+                    eachValue === title) {
+                    return null;
+                }
+                desc += "".concat((0, utils_1.camelCaseToText)(eachKey), " : ").concat(eachValue, " \n");
+                return null;
+            });
+            var data = {
+                id: clonedEachData[serverId],
+                title: title,
+                description: desc,
+            };
+            data[type === "grid" ? "imageUrl" : "img"] = clonedEachData[imageTag]
+                ? clonedEachData[imageTag].props.src
+                : "";
+            gridData.push(data);
+            return null;
+        });
+        return gridData;
+    };
     var renderTabContent = function (tabs, dataType, viewType) {
         var _a, _b, _c, _d;
         var selectedTabData = tabs.find(function (eachTab) {
@@ -2522,9 +2578,21 @@ function DataTemplate(props) {
             }
         }
         else if (selectedTabData) {
-            if (selectedTabData.iframeSrc) {
+            if (selectedTabData.viewType === "iframe") {
                 return (react_1.default.createElement("iframe", { className: "w-full mt-5", style: { height: "70vh" }, src: (_c = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _c !== void 0 ? _c : "", title: (_d = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _d !== void 0 ? _d : "" }));
             }
+            else if (selectedTabData.viewType === "list") {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(list_1.List, { paginationType: props.server === "mongoServer" ? "page" : "cursor", list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, onClickRow: function (id) {
+                            handleNavigate("".concat(props.localURLEndpoint, "?data=").concat(id, "&type=read&collection=").concat(props.collectionId, "&view=general"));
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, className: "mt-5" })));
+            }
+            else if (selectedTabData.viewType === "grid") {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(grid_1.Grid, { paginationType: props.server === "mongoServer" ? "page" : "cursor", data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, onClickData: function (id) {
+                            handleNavigate("".concat(props.localURLEndpoint, "?data=").concat(id, "&type=read&collection=").concat(props.collectionId, "&view=general"));
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, className: "mt-5" })));
+            }
             else if (selectedTabData.renderComp) {
                 return react_1.default.createElement(react_1.default.Fragment, null, selectedTabData.renderComp());
             }