blixify-ui-web 0.3.3 → 0.3.5

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

@@ -134,7 +134,7 @@ var indexedDb_1 = require("./indexedDb");
 var pagination_1 = require("./pagination");
 var settingsModal_1 = require("./settingsModal");
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
-    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;
+    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, _1, _2;
     var formRef = (0, react_1.createRef)();
     var objectFormRef = (0, react_1.createRef)();
     var listAddressFromRef = (0, react_1.createRef)();
@@ -149,111 +149,112 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var typingTimeout = (0, react_1.useRef)();
     // const oldCollectionId: any = useRef();
     var mapViewRef = (0, react_1.useRef)();
-    var _1 = (0, react_1.useState)(false), loading = _1[0], setLoading = _1[1];
-    var _2 = (0, react_1.useState)(), notification = _2[0], setNotification = _2[1];
+    var _3 = (0, react_1.useState)(false), loading = _3[0], setLoading = _3[1];
+    var _4 = (0, react_1.useState)(), notification = _4[0], setNotification = _4[1];
     //INFO : Used by List
-    var _3 = (0, react_1.useState)({}), filterSearch = _3[0], setFilterSearch = _3[1];
-    var _4 = (0, react_1.useState)({}), filterSearchParams = _4[0], setFilterSearchParams = _4[1];
-    var _5 = (0, react_1.useState)({}), filterSelection = _5[0], setFilterSelection = _5[1];
-    var _6 = (0, react_1.useState)({}), filterReference = _6[0], setFilterReference = _6[1];
-    var _7 = (0, react_1.useState)({}), filterReferenceSearch = _7[0], setFilterReferenceSearch = _7[1];
-    var _8 = (0, react_1.useState)({}), filterReferenceList = _8[0], setFilterReferenceList = _8[1];
-    var _9 = (0, react_1.useState)({
+    var _5 = (0, react_1.useState)({}), filterSearch = _5[0], setFilterSearch = _5[1];
+    var _6 = (0, react_1.useState)({}), filterSearchParams = _6[0], setFilterSearchParams = _6[1];
+    var _7 = (0, react_1.useState)({}), filterSelection = _7[0], setFilterSelection = _7[1];
+    var _8 = (0, react_1.useState)({}), filterReference = _8[0], setFilterReference = _8[1];
+    var _9 = (0, react_1.useState)({}), filterReferenceSearch = _9[0], setFilterReferenceSearch = _9[1];
+    var _10 = (0, react_1.useState)({}), filterReferenceList = _10[0], setFilterReferenceList = _10[1];
+    var _11 = (0, react_1.useState)({
         startDate: undefined,
         endDate: undefined,
-    }), filterReferenceDate = _9[0], setFilterReferenceDate = _9[1];
-    var _10 = (0, react_1.useState)(true), tableLoading = _10[0], setTableLoading = _10[1];
-    var _11 = (0, react_1.useState)(""), cursor = _11[0], setCursor = _11[1];
-    var _12 = (0, react_1.useState)(""), lastCursor = _12[0], setLastCursor = _12[1];
-    var _13 = (0, react_1.useState)([]), tableData = _13[0], setTableData = _13[1];
-    var _14 = (0, react_1.useState)([]), spaceTableData = _14[0], setSpaceTableData = _14[1];
-    var _15 = (0, react_1.useState)(0), size = _15[0], setSize = _15[1];
-    var _16 = (0, react_1.useState)(0), pageIndex = _16[0], setPageIndex = _16[1];
-    var _17 = (0, react_1.useState)([]), selectedIds = _17[0], setSelectedIds = _17[1];
-    var _18 = (0, react_1.useState)(false), selectAll = _18[0], setSelectAll = _18[1];
-    var _19 = (0, react_1.useState)(""), deletePasscode = _19[0], setDeletePasscode = _19[1];
-    var _20 = (0, react_1.useState)(""), deletePasscodeInput = _20[0], setDeletePasscodeInput = _20[1];
-    var _21 = (0, react_1.useState)(""), deleteFeedId = _21[0], setDeleteFeedId = _21[1];
+    }), filterReferenceDate = _11[0], setFilterReferenceDate = _11[1];
+    var _12 = (0, react_1.useState)(true), tableLoading = _12[0], setTableLoading = _12[1];
+    var _13 = (0, react_1.useState)(""), cursor = _13[0], setCursor = _13[1];
+    var _14 = (0, react_1.useState)(""), lastCursor = _14[0], setLastCursor = _14[1];
+    var _15 = (0, react_1.useState)([]), tableData = _15[0], setTableData = _15[1];
+    var _16 = (0, react_1.useState)([]), spaceTableData = _16[0], setSpaceTableData = _16[1];
+    var _17 = (0, react_1.useState)(0), size = _17[0], setSize = _17[1];
+    var _18 = (0, react_1.useState)(0), pageIndex = _18[0], setPageIndex = _18[1];
+    var _19 = (0, react_1.useState)([]), selectedIds = _19[0], setSelectedIds = _19[1];
+    var _20 = (0, react_1.useState)(false), selectAll = _20[0], setSelectAll = _20[1];
+    var _21 = (0, react_1.useState)(""), deletePasscode = _21[0], setDeletePasscode = _21[1];
+    var _22 = (0, react_1.useState)(""), deletePasscodeInput = _22[0], setDeletePasscodeInput = _22[1];
+    var _23 = (0, react_1.useState)(""), deleteFeedId = _23[0], setDeleteFeedId = _23[1];
     var previousType = (0, react_1.useRef)();
     var previousSelectedData = (0, react_1.useRef)();
     //INFO : Used by List Organise
-    var _22 = (0, react_1.useState)(false), sortModal = _22[0], setSortModal = _22[1];
-    var _23 = (0, react_1.useState)(false), filterModal = _23[0], setFilterModal = _23[1];
-    var _24 = (0, react_1.useState)(false), addTabModal = _24[0], setAddTabModal = _24[1];
-    var _25 = (0, react_1.useState)((_a = props.defaultTab) !== null && _a !== void 0 ? _a : ""), selectedTab = _25[0], setSelectedTab = _25[1];
-    var _26 = (0, react_1.useState)("dayGridMonth"), calendarView = _26[0], setCalendarView = _26[1];
-    var _27 = (0, react_1.useState)(new Date()), calendarTabMonth = _27[0], setCalendarTabMonth = _27[1];
-    var _28 = (0, react_1.useState)(false), queryForm = _28[0], setQueryForm = _28[1];
-    var _29 = (0, react_1.useState)(false), batchUpdateModal = _29[0], setBatchUpdateModal = _29[1];
-    var _30 = (0, react_1.useState)({
+    var _24 = (0, react_1.useState)(false), sortModal = _24[0], setSortModal = _24[1];
+    var _25 = (0, react_1.useState)(false), filterModal = _25[0], setFilterModal = _25[1];
+    var _26 = (0, react_1.useState)(false), addTabModal = _26[0], setAddTabModal = _26[1];
+    var _27 = (0, react_1.useState)((_a = props.defaultTab) !== null && _a !== void 0 ? _a : ""), selectedTab = _27[0], setSelectedTab = _27[1];
+    var _28 = (0, react_1.useState)("dayGridMonth"), calendarView = _28[0], setCalendarView = _28[1];
+    var _29 = (0, react_1.useState)(new Date()), calendarTabMonth = _29[0], setCalendarTabMonth = _29[1];
+    var _30 = (0, react_1.useState)(false), queryForm = _30[0], setQueryForm = _30[1];
+    var _31 = (0, react_1.useState)(false), batchUpdateModal = _31[0], setBatchUpdateModal = _31[1];
+    var _32 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _30[0], setBatchUpdateData = _30[1];
+    }), batchUpdateData = _32[0], setBatchUpdateData = _32[1];
     // INFO: Used by Activity Log
-    var _31 = (0, react_1.useState)(false), activityModal = _31[0], setActivityModal = _31[1];
-    var _32 = (0, react_1.useState)(""), activityId = _32[0], setActivityId = _32[1];
+    var _33 = (0, react_1.useState)(false), activityModal = _33[0], setActivityModal = _33[1];
+    var _34 = (0, react_1.useState)(""), activityId = _34[0], setActivityId = _34[1];
     //INFO : Used by Export
-    var _33 = (0, react_1.useState)(null), csvFile = _33[0], setCSVFile = _33[1];
-    var _34 = (0, react_1.useState)([]), csvFileData = _34[0], setCSVFileData = _34[1];
-    var _35 = (0, react_1.useState)(0), stepCSVIndex = _35[0], setStepCSVIndex = _35[1];
-    var _36 = (0, react_1.useState)({}), listCSVMapAttribute = _36[0], setListCSVMapAttribute = _36[1];
-    var _37 = (0, react_1.useState)({}), listCSVObjAttribute = _37[0], setListCSVObjAttribute = _37[1];
-    var _38 = (0, react_1.useState)([]), csvAPIAttribute = _38[0], setCSVAPIAttribute = _38[1];
-    var _39 = (0, react_1.useState)(((_b = props.devSettings.currentUser) === null || _b === void 0 ? void 0 : _b.userEmail) || ""), exportCSVEmail = _39[0], setExportCSVEmail = _39[1];
-    var _40 = (0, react_1.useState)([]), importTableData = _40[0], setImportTableData = _40[1];
-    var _41 = (0, react_1.useState)([]), queryList = _41[0], setQueryList = _41[1];
-    var _42 = (0, react_1.useState)(-1), queryIndex = _42[0], setQueryIndex = _42[1];
+    var _35 = (0, react_1.useState)(null), csvFile = _35[0], setCSVFile = _35[1];
+    var _36 = (0, react_1.useState)([]), csvFileData = _36[0], setCSVFileData = _36[1];
+    var _37 = (0, react_1.useState)(0), stepCSVIndex = _37[0], setStepCSVIndex = _37[1];
+    var _38 = (0, react_1.useState)({}), listCSVMapAttribute = _38[0], setListCSVMapAttribute = _38[1];
+    var _39 = (0, react_1.useState)({}), listCSVObjAttribute = _39[0], setListCSVObjAttribute = _39[1];
+    var _40 = (0, react_1.useState)([]), csvAPIAttribute = _40[0], setCSVAPIAttribute = _40[1];
+    var _41 = (0, react_1.useState)(((_b = props.devSettings.currentUser) === null || _b === void 0 ? void 0 : _b.userEmail) || ""), exportCSVEmail = _41[0], setExportCSVEmail = _41[1];
+    var _42 = (0, react_1.useState)([]), importTableData = _42[0], setImportTableData = _42[1];
+    var _43 = (0, react_1.useState)([]), queryList = _43[0], setQueryList = _43[1];
+    var _44 = (0, react_1.useState)(-1), queryIndex = _44[0], setQueryIndex = _44[1];
     //INFO : Used by Read
     //INFO : Used by Update
-    var _43 = (0, react_1.useState)(false), modalVisible = _43[0], setModalVisible = _43[1];
-    var _44 = (0, react_1.useState)(false), deleteModal = _44[0], setDeleteModal = _44[1];
-    var _45 = (0, react_1.useState)(false), excelModal = _45[0], setExcelModal = _45[1];
-    var _46 = (0, react_1.useState)(false), exportExcel = _46[0], setExportExcel = _46[1];
-    var _47 = (0, react_1.useState)(false), exportQR = _47[0], setExportQR = _47[1];
-    var _48 = (0, react_1.useState)(false), signatureSigning = _48[0], setSignatureSigning = _48[1];
-    var _49 = (0, react_1.useState)({}), selectedData = _49[0], setSelectedData = _49[1];
-    var _50 = (0, react_1.useState)(""), selectedObjectStructureId = _50[0], setSelectedObjectStructureId = _50[1];
-    var _51 = (0, react_1.useState)(""), selectedObjectId = _51[0], setSelectedObjectId = _51[1];
-    var _52 = (0, react_1.useState)(""), selectedListAddressId = _52[0], setSelectedListAddressId = _52[1];
-    var _53 = (0, react_1.useState)({
+    var _45 = (0, react_1.useState)(false), modalVisible = _45[0], setModalVisible = _45[1];
+    var _46 = (0, react_1.useState)(false), deleteModal = _46[0], setDeleteModal = _46[1];
+    var _47 = (0, react_1.useState)(false), excelModal = _47[0], setExcelModal = _47[1];
+    var _48 = (0, react_1.useState)(false), exportExcel = _48[0], setExportExcel = _48[1];
+    var _49 = (0, react_1.useState)(false), exportQR = _49[0], setExportQR = _49[1];
+    var _50 = (0, react_1.useState)(false), signatureSigning = _50[0], setSignatureSigning = _50[1];
+    var _51 = (0, react_1.useState)({}), selectedData = _51[0], setSelectedData = _51[1];
+    var _52 = (0, react_1.useState)(""), selectedObjectStructureId = _52[0], setSelectedObjectStructureId = _52[1];
+    var _53 = (0, react_1.useState)(""), selectedObjectId = _53[0], setSelectedObjectId = _53[1];
+    var _54 = (0, react_1.useState)(""), selectedListAddressId = _54[0], setSelectedListAddressId = _54[1];
+    var _55 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _53[0], setSelectedListAddress = _53[1];
-    var _54 = (0, react_1.useState)({}), selectedObjectData = _54[0], setSelectedObjectData = _54[1];
-    var _55 = (0, react_1.useState)(false), referenceLoading = _55[0], setReferenceLoading = _55[1];
-    var _56 = (0, react_1.useState)({}), referencesOptions = _56[0], setReferencesOptions = _56[1];
-    var _57 = (0, react_1.useState)({}), referencesDetails = _57[0], setReferencesDetails = _57[1];
-    var _58 = (0, react_1.useState)({}), referenceDeleteTableData = _58[0], setReferenceDeleteTableData = _58[1];
-    var _59 = (0, react_1.useState)(0), referenceDeleteIndex = _59[0], setReferenceDeleteIndex = _59[1];
-    var _60 = (0, react_1.useState)({}), referenceModelSchema = _60[0], setReferenceSchema = _60[1];
+    }), selectedListAddress = _55[0], setSelectedListAddress = _55[1];
+    var _56 = (0, react_1.useState)({}), selectedObjectData = _56[0], setSelectedObjectData = _56[1];
+    var _57 = (0, react_1.useState)(false), referenceLoading = _57[0], setReferenceLoading = _57[1];
+    var _58 = (0, react_1.useState)({}), referencesOptions = _58[0], setReferencesOptions = _58[1];
+    var _59 = (0, react_1.useState)({}), referencesDetails = _59[0], setReferencesDetails = _59[1];
+    var _60 = (0, react_1.useState)({}), referenceDeleteTableData = _60[0], setReferenceDeleteTableData = _60[1];
+    var _61 = (0, react_1.useState)(0), referenceDeleteIndex = _61[0], setReferenceDeleteIndex = _61[1];
+    var _62 = (0, react_1.useState)({}), referenceModelSchema = _62[0], setReferenceSchema = _62[1];
     // INFO ; Use to Trigger Update Prefill UI
-    var _61 = (0, react_1.useState)(false), prefillTrigger = _61[0], setPrefillTrigger = _61[1];
+    var _63 = (0, react_1.useState)(false), prefillTrigger = _63[0], setPrefillTrigger = _63[1];
     //INFO : Offline
-    var _62 = (0, react_1.useState)(0), offlineDataLength = _62[0], setOfflineDataLength = _62[1];
-    var _63 = (0, react_1.useState)(false), offlineModal = _63[0], setOfflineModal = _63[1];
+    var _64 = (0, react_1.useState)(0), offlineDataLength = _64[0], setOfflineDataLength = _64[1];
+    var _65 = (0, react_1.useState)(false), offlineModal = _65[0], setOfflineModal = _65[1];
     var devSettings = props.devSettings;
     var serverId = (0, utils_1.parseServerId)(devSettings.server);
+    var viewType = (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.viewId) !== null && _d !== void 0 ? _d : "general";
     var isFirebaseClient = devSettings.server === "firebase";
     var isFirebase = isFirebaseClient || devSettings.server === "fbServer";
-    var dbModule = isFirebaseClient ? (_c = props.lib) === null || _c === void 0 ? void 0 : _c.firebase : (_d = props.lib) === null || _d === void 0 ? void 0 : _d.axios;
+    var dbModule = isFirebaseClient ? (_e = props.lib) === null || _e === void 0 ? void 0 : _e.firebase : (_f = props.lib) === null || _f === void 0 ? void 0 : _f.axios;
     var schemaPresent = props.devSettings.schemaEndpoint ? true : false;
     var limit = props.limit ? props.limit : 10;
-    var isEditor = ((_e = props.edit) === null || _e === void 0 ? void 0 : _e.allEditable) ? true : false;
-    var isOffline = (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareOffline;
-    var showId = (_g = props.space) === null || _g === void 0 ? void 0 : _g.showId;
-    var idField = (_h = props.space) === null || _h === void 0 ? void 0 : _h.idField;
-    var hasNavigation = ((_j = props.organise) === null || _j === void 0 ? void 0 : _j.handleNavigate) ? true : false;
-    var formColumn = ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdateOneColumn)
+    var isEditor = ((_g = props.edit) === null || _g === void 0 ? void 0 : _g.allEditable) ? true : false;
+    var isOffline = (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareOffline;
+    var showId = (_j = props.space) === null || _j === void 0 ? void 0 : _j.showId;
+    var idField = (_k = props.space) === null || _k === void 0 ? void 0 : _k.idField;
+    var hasNavigation = ((_l = props.organise) === null || _l === void 0 ? void 0 : _l.handleNavigate) ? true : false;
+    var formColumn = ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateOneColumn)
         ? "grid-cols-2"
         : "grid-cols-4";
-    var isActivityLog = (((_m = (_l = props.edit) === null || _l === void 0 ? void 0 : _l.activityLog) === null || _m === void 0 ? void 0 : _m.enableComments) &&
-        ((_o = props.edit) === null || _o === void 0 ? void 0 : _o.activityLog.commentCollectionId)) ||
-        (((_q = (_p = props.edit) === null || _p === void 0 ? void 0 : _p.activityLog) === null || _q === void 0 ? void 0 : _q.enableLogs) &&
-            ((_r = props.edit) === null || _r === void 0 ? void 0 : _r.activityLog.logsCollectionId));
+    var isActivityLog = (((_p = (_o = props.edit) === null || _o === void 0 ? void 0 : _o.activityLog) === null || _p === void 0 ? void 0 : _p.enableComments) &&
+        ((_q = props.edit) === null || _q === void 0 ? void 0 : _q.activityLog.commentCollectionId)) ||
+        (((_s = (_r = props.edit) === null || _r === void 0 ? void 0 : _r.activityLog) === null || _s === void 0 ? void 0 : _s.enableLogs) &&
+            ((_t = props.edit) === null || _t === void 0 ? void 0 : _t.activityLog.logsCollectionId));
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_s = props.lib) === null || _s === void 0 ? void 0 : _s.axios,
+        dbModule: (_u = props.lib) === null || _u === void 0 ? void 0 : _u.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -261,7 +262,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_t = props.lib) === null || _t === void 0 ? void 0 : _t.axios,
+        dbModule: (_v = props.lib) === null || _v === void 0 ? void 0 : _v.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -269,7 +270,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_u = props.edit) === null || _u === void 0 ? void 0 : _u.allEditable) && !isFirebase
+        ((_w = props.edit) === null || _w === void 0 ? void 0 : _w.allEditable) && !isFirebase
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -293,7 +294,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             },
         },
     ].filter(Boolean);
-    if ((_v = props.organise) === null || _v === void 0 ? void 0 : _v.moreSettings)
+    if ((_x = props.organise) === null || _x === void 0 ? void 0 : _x.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         handleRefresh: handleRefresh,
@@ -382,8 +383,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.id,
         props.localURLEndpoint,
-        (_w = props.organise) === null || _w === void 0 ? void 0 : _w.extendedTabs,
-        (_x = props.organise) === null || _x === void 0 ? void 0 : _x.viewId,
+        (_y = props.organise) === null || _y === void 0 ? void 0 : _y.extendedTabs,
+        (_z = props.organise) === null || _z === void 0 ? void 0 : _z.viewId,
         props.type,
         selectedTab,
     ]);
@@ -559,7 +560,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handlePagination = function (value) {
-        if (!isFirebase) {
+        var isGridScroll = renderCheckGridScroll();
+        if (!isFirebase && !isGridScroll) {
             setTableLoading(true);
             handleSetListData([], []);
         }
@@ -569,7 +571,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         else {
             if (value === "next") {
                 //INFO : Retrieve latest cursor data from Firebase only
-                if (isFirebase &&
+                if ((isFirebase || isGridScroll) &&
                     cursor &&
                     (pageIndex + 1) * limit + 1 > tableData.length) {
                     setLastCursor(cursor);
@@ -604,7 +606,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleGetListData = function (responseData, type, rowId) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataList, prettierDataList, dummyPrettierDataList_1, selectedIndex_1, newTableData, newPrettierTableData, isExists;
+        var dataList, prettierDataList, dummyPrettierDataList_1, selectedIndex_1, isGridScroll, newTableData, newPrettierTableData, isExists, cursor_1, lastDataId;
         var _a, _b, _c, _d, _e;
         return __generator(this, function (_f) {
             switch (_f.label) {
@@ -661,7 +663,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         catch (err) { }
                     }
                     else {
-                        if (!isFirebase) {
+                        isGridScroll = renderCheckGridScroll();
+                        if (!isGridScroll && !isFirebase) {
                             handleSetListData(dataList, prettierDataList);
                             setSize(responseData.count);
                         }
@@ -681,7 +684,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                             handleSetListData(newTableData, newPrettierTableData);
                             setSize(newTableData.length);
-                            setCursor(responseData.count);
+                            cursor_1 = responseData.count;
+                            if (isGridScroll) {
+                                if (dataList.length === 0)
+                                    cursor_1 = "";
+                                else {
+                                    lastDataId = dataList[dataList.length - 1].id;
+                                    cursor_1 = lastDataId;
+                                }
+                            }
+                            setCursor(cursor_1);
                         }
                     }
                     setTableLoading(false);
@@ -2948,13 +2960,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else {
             var selectedModel = props.model.find(function (eachModel) { var _a, _b; return eachModel.id === ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort) === null || _b === void 0 ? void 0 : _b.sortId); });
-            var cursor_1 = lastCursor;
+            var cursor_2 = lastCursor;
             switch (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) {
                 case "date":
-                    cursor_1 = (0, moment_1.default)(cursor_1._seconds * 1000).toDate();
+                    cursor_2 = (0, moment_1.default)(cursor_2._seconds * 1000).toDate();
                     break;
             }
-            return lastCursor ? cursor_1 : undefined;
+            return lastCursor ? cursor_2 : undefined;
         }
     };
     var renderObjectTags = function (id) {
@@ -3272,55 +3284,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             return react_1.default.createElement(react_1.default.Fragment, null);
     };
     var renderContent = function () {
-        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;
-        var viewType = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.viewId) !== null && _b !== void 0 ? _b : "general";
-        var isBottom = ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareUpdateActionBottom) ? true : false;
-        var tabs = [
-            {
-                id: "general",
-                name: props.type === "list" ? "Table View" : "Card View",
-                href: "".concat(props.localURLEndpoint, "?data=").concat(props.id, "&type=").concat(props.type, "&collection=").concat(props.collectionId, "&view=general"),
-            },
-        ];
-        if (((_d = props.organise) === null || _d === void 0 ? void 0 : _d.extendedTabs) &&
-            ((_e = props.organise.extendedTabs) === null || _e === void 0 ? void 0 : _e.length) > 0) {
-            (_f = props.organise) === null || _f === void 0 ? void 0 : _f.extendedTabs.map(function (eachTab) {
-                var _a, _b, _c;
-                var hrefPoint = "".concat(props.localURLEndpoint, "?type=").concat(props.type, "&collection=").concat(props.collectionId);
-                if (props.id)
-                    hrefPoint += "&data=".concat(props.id);
-                var id = (0, utils_1.lowercaseTextToId)(eachTab.name);
-                var tabData = {
-                    id: id,
-                    name: eachTab.name,
-                    href: hrefPoint + "&view=".concat(id),
-                    type: eachTab.type,
-                    viewType: eachTab.viewType,
-                    viewImage: eachTab.viewImage,
-                    calendarSettings: (_a = eachTab.calendarSettings) !== null && _a !== void 0 ? _a : undefined,
-                    feedsSettings: (_b = eachTab.feedsSettings) !== null && _b !== void 0 ? _b : undefined,
-                    mapSettings: (_c = eachTab.mapSettings) !== null && _c !== void 0 ? _c : undefined,
-                };
-                if (eachTab.viewType === "iframe")
-                    tabData["iframeSrc"] = eachTab.src;
-                else
-                    tabData["viewImage"] = eachTab.viewImage;
-                if (eachTab.type === props.type) {
-                    tabs.push(__assign(__assign({}, tabData), { del: (react_1.default.createElement(outline_1.XMarkIcon, { className: "'h-4 w-4 ml-2 text-red-600 hover:text-red-400", onClick: function (e) {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                handleDeleteTab(tabData.id);
-                            } })) }));
-                }
-                return null;
-            });
-        }
-        if (isEditor)
-            tabs.push({
-                id: "blixify_new_tab",
-                name: "+ New Tab",
-                href: "",
-            });
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
+        var tabs = renderTabs();
         var pages = [
             {
                 name: "Detail",
@@ -3331,7 +3297,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         switch (props.type) {
             case "read":
                 pages.push({
-                    name: (_g = props.id) !== null && _g !== void 0 ? _g : "",
+                    name: (_b = props.id) !== null && _b !== void 0 ? _b : "",
                     href: "#",
                     current: true,
                 });
@@ -3346,7 +3312,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }, cond: {
                             type: "get",
                             id: props.id,
-                        }, offline: (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
+                        }, offline: (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
                     !loading && (react_1.default.createElement(react_1.default.Fragment, null,
                         renderBreadcrumb(pages),
                         react_1.default.createElement("div", null,
@@ -3355,12 +3321,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                                     react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
                                 !isBottom && renderActionButtons(props.type))),
-                        schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.darkMode })),
-                        ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareReadComponentPos) === "top" &&
+                        schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkMode })),
+                        ((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareReadComponentPos) === "top" &&
                             renderBareReadComp(),
-                        !((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareReadComponentHide) &&
+                        !((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareReadComponentHide) &&
                             renderTabContent(tabs, props.type, viewType),
-                        ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareReadComponentPos) !== "top" &&
+                        ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareReadComponentPos) !== "top" &&
                             renderBareReadComp(),
                         isBottom && renderActionButtons(props.type, true)))));
             case "update":
@@ -3370,7 +3336,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     current: true,
                 });
                 var filterModel_1 = [];
-                var disabledOnEnter_1 = (_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.disabledOnEnter) !== null && _p !== void 0 ? _p : false;
+                var disabledOnEnter_1 = (_j = (_h = props.organise) === null || _h === void 0 ? void 0 : _h.disabledOnEnter) !== null && _j !== void 0 ? _j : false;
                 props.model.map(function (eachModel) {
                     var _a;
                     var present = false;
@@ -3403,7 +3369,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }, cond: {
                             type: "get",
                             id: props.id,
-                        }, offline: (_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
+                        }, offline: (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
                     renderBreadcrumb(pages),
                     react_1.default.createElement("div", { className: "flex flex-col py-2 sm:items-center sm:flex-row" },
                         react_1.default.createElement("div", { className: "flex flex-col w-full" },
@@ -3412,8 +3378,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         !isBottom && renderActionButtons(props.type)),
                     react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " gap-6 mt-6"), ref: formRef, refList: modalFormInputRefs, handleComplete: handleSubmit, disabledOnEnter: disabledOnEnter_1 },
                         renderDataTemplateFormContent(selectedData, filterModel_1, modalFormInputRefs, false, false),
-                        ((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareUpdateComponent) &&
-                            ((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareUpdateComponent(selectedData))),
+                        ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareUpdateComponent) &&
+                            ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateComponent(selectedData))),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(props.type)),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
                     isBottom && renderActionButtons(props.type, true)));
@@ -3444,8 +3410,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         dbEndpoint: devSettings.dbEndpoint,
                         dbAPIToken: devSettings.dbAPIToken,
                         dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: (_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareOffline, onChangeData: handleGetListData, onError: handleGetItemError }));
-                if ((_u = props.renderSettings) === null || _u === void 0 ? void 0 : _u.renderListUI) {
+                    }, cond: handleReadQueryHocCond(), offline: (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareOffline, onChangeData: handleGetListData, onError: handleGetItemError }));
+                if ((_p = props.renderSettings) === null || _p === void 0 ? void 0 : _p.renderListUI) {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
                         rqHOCComp,
                         props.renderSettings.renderListUI(actionComponent, filterComponent, dataComponent)));
@@ -3457,7 +3423,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                             react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
                         react_1.default.createElement("div", { className: "grow" }),
-                        !((_v = props.organise) === null || _v === void 0 ? void 0 : _v.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center mt-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, filterComponent)),
+                        !((_q = props.organise) === null || _q === void 0 ? void 0 : _q.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center mt-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, filterComponent)),
                         react_1.default.createElement("div", { className: "mb-0.5 flex flex-row items-center my-6 justify-content space-x-2 md:my-0" },
                             schemaPresent && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(solid_1.ArrowsUpDownIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white", onClick: function () {
@@ -3479,16 +3445,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         });
                                     }, bgColor: "bg-white" }))),
                             !isBottom && renderActionButtons(props.type),
-                            (schemaPresent || ((_w = props.organise) === null || _w === void 0 ? void 0 : _w.showExport)) && (react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
+                            (schemaPresent || ((_r = props.organise) === null || _r === void 0 ? void 0 : _r.showExport)) && (react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
                                 //TODO: Bug - Crash on Next Js
                                 // <Menu.Item>
                                 react_1.default.createElement("span", { className: "block w-40 py-3 text-sm text-center text-gray-700 cursor-pointer hover:bg-gray-100", onClick: eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.onClick }, eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.text)
                                 // </Menu.Item>
                                 ); })), lib: {
-                                    Transition: (_x = props === null || props === void 0 ? void 0 : props.lib) === null || _x === void 0 ? void 0 : _x.Transition,
+                                    Transition: (_s = props === null || props === void 0 ? void 0 : props.lib) === null || _s === void 0 ? void 0 : _s.Transition,
                                 } })))),
-                    ((_y = props.organise) === null || _y === void 0 ? void 0 : _y.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center my-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row" }, filterComponent)),
-                    schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.darkMode })),
+                    ((_t = props.organise) === null || _t === void 0 ? void 0 : _t.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center my-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row" }, filterComponent)),
+                    schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
                     isBottom && renderActionButtons(props.type, true)));
             default:
@@ -3660,6 +3626,72 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         return gridData;
     };
+    var renderCheckGridScroll = function () {
+        var tabs = renderTabs();
+        var selectedTabData = tabs.find(function (eachTab) {
+            if (eachTab.id === viewType) {
+                return eachTab;
+            }
+            else {
+                return null;
+            }
+        });
+        if (selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.infinityScroll)
+            return true;
+        else
+            return false;
+    };
+    var renderTabs = function () {
+        var _a, _b, _c;
+        var tabs = [
+            {
+                id: "general",
+                name: props.type === "list" ? "Table View" : "Card View",
+                href: "".concat(props.localURLEndpoint, "?data=").concat(props.id, "&type=").concat(props.type, "&collection=").concat(props.collectionId, "&view=general"),
+            },
+        ];
+        if (((_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs) &&
+            ((_b = props.organise.extendedTabs) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            (_c = props.organise) === null || _c === void 0 ? void 0 : _c.extendedTabs.map(function (eachTab) {
+                var _a, _b, _c, _d;
+                var hrefPoint = "".concat(props.localURLEndpoint, "?type=").concat(props.type, "&collection=").concat(props.collectionId);
+                if (props.id)
+                    hrefPoint += "&data=".concat(props.id);
+                var id = (0, utils_1.lowercaseTextToId)(eachTab.name);
+                var tabData = {
+                    id: id,
+                    name: eachTab.name,
+                    href: hrefPoint + "&view=".concat(id),
+                    type: eachTab.type,
+                    viewType: eachTab.viewType,
+                    viewImage: eachTab.viewImage,
+                    infinityScroll: (_a = eachTab.infinityScroll) !== null && _a !== void 0 ? _a : undefined,
+                    calendarSettings: (_b = eachTab.calendarSettings) !== null && _b !== void 0 ? _b : undefined,
+                    feedsSettings: (_c = eachTab.feedsSettings) !== null && _c !== void 0 ? _c : undefined,
+                    mapSettings: (_d = eachTab.mapSettings) !== null && _d !== void 0 ? _d : undefined,
+                };
+                if (eachTab.viewType === "iframe")
+                    tabData["iframeSrc"] = eachTab.src;
+                else
+                    tabData["viewImage"] = eachTab.viewImage;
+                if (eachTab.type === props.type) {
+                    tabs.push(__assign(__assign({}, tabData), { del: (react_1.default.createElement(outline_1.XMarkIcon, { className: "'h-4 w-4 ml-2 text-red-600 hover:text-red-400", onClick: function (e) {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                handleDeleteTab(tabData.id);
+                            } })) }));
+                }
+                return null;
+            });
+        }
+        if (isEditor)
+            tabs.push({
+                id: "blixify_new_tab",
+                name: "+ New Tab",
+                href: "",
+            });
+        return tabs;
+    };
     var renderTabContent = function (tabs, dataType, viewType) {
         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;
         var selectedTabData = tabs.find(function (eachTab) {
@@ -3757,8 +3789,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }, 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", hidePagination: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.hidePagination })));
             }
             else if (selectedTabData.viewType === "grid") {
+                var isGridScroll = renderCheckGridScroll();
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(grid_1.Grid, { paginationType: isFirebase ? "cursor" : "page", data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, onClickData: function (id) {
+                    react_1.default.createElement(grid_1.Grid, { paginationType: isGridScroll || isFirebase ? "cursor" : "page", data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, infinityScroll: isGridScroll, horizontalScroll: isGridScroll, pageIndex: pageIndex, onClickData: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                         }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, gridColClassName: (_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareListGridColClassName, className: "mt-5", hidePagination: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.hidePagination })));
@@ -4410,7 +4443,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_z = (_y = props.renderSettings) === null || _y === void 0 ? void 0 : _y.renderLoadingUI) === null || _z === void 0 ? void 0 : _z.call(_y)) && loading ? ((_0 = props.renderSettings) === null || _0 === void 0 ? void 0 : _0.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_1 = (_0 = props.renderSettings) === null || _0 === void 0 ? void 0 : _0.renderLoadingUI) === null || _1 === void 0 ? void 0 : _1.call(_0)) && loading ? ((_2 = props.renderSettings) === null || _2 === void 0 ? void 0 : _2.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;