feat: Add pagination to data browser

src/dashboard/Data/Browser/Browser.react.js

@@ -41,9 +41,9 @@ import { Helmet } from 'react-helmet';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
 import { get } from 'lib/AJAX';
+import BrowserFooter from './BrowserFooter.react';
 
 // The initial and max amount of rows fetched by lazy loading
-const MAX_ROWS_FETCHED = 200;
 const BROWSER_LAST_LOCATION = 'brower_last_location';
 
 @subscribeTo('Schema', 'schema')
@@ -75,6 +75,8 @@ class Browser extends DashboardView {
       clp: {},
       filters: new List(),
       ordering: '-createdAt',
+      skip: 0,
+      limit: 100,
       selection: {},
       exporting: false,
       exportingCount: 0,
@@ -892,7 +894,7 @@ class Browser extends DashboardView {
   }
 
   async fetchParseData(source, filters) {
-    const { useMasterKey } = this.state;
+    const { useMasterKey, skip, limit  } = this.state;
     const query = await queryFromFilters(source, filters);
     const sortDir = this.state.ordering[0] === '-' ? '-' : '+';
     const field = this.state.ordering.substr(sortDir === '-' ? 1 : 0);
@@ -902,8 +904,9 @@ class Browser extends DashboardView {
     } else {
       query.ascending(field);
     }
+    query.skip(skip);
+    query.limit(limit);
 
-    query.limit(MAX_ROWS_FETCHED);
     this.excludeFields(query, source);
     let promise = query.find({ useMasterKey });
     let isUnique = false;
@@ -955,7 +958,7 @@ class Browser extends DashboardView {
     this.setState({
       data: data,
       filters,
-      lastMax: MAX_ROWS_FETCHED,
+      lastMax: this.state.limit,
       filteredCounts: filteredCounts,
     });
   }
@@ -969,7 +972,7 @@ class Browser extends DashboardView {
       selection: {},
       data,
       filters,
-      lastMax: MAX_ROWS_FETCHED,
+      lastMax: this.state.limit,
     });
   }
 
@@ -1022,7 +1025,7 @@ class Browser extends DashboardView {
       query.lessThan('createdAt', this.state.data[this.state.data.length - 1].get('createdAt'));
       query.addDescending('createdAt');
     }
-    query.limit(MAX_ROWS_FETCHED);
+    query.limit(this.state.limit);
     this.excludeFields(query, source);
 
     const { useMasterKey } = this.state;
@@ -1033,7 +1036,7 @@ class Browser extends DashboardView {
         }));
       }
     });
-    this.setState({ lastMax: this.state.lastMax + MAX_ROWS_FETCHED });
+    this.setState({ lastMax: this.state.lastMax + this.state.limit });
   }
 
   updateFilters(filters) {
@@ -1296,7 +1299,7 @@ class Browser extends DashboardView {
           this.state.counts[className] = 0;
           this.setState({
             data: [],
-            lastMax: MAX_ROWS_FETCHED,
+            lastMax: this.state.limit,
             selection: {},
           });
         }
@@ -1356,7 +1359,7 @@ class Browser extends DashboardView {
 
               // If after deletion, the remaining elements on the table is lesser than the maximum allowed elements
               // we fetch more data to fill the table
-              if (this.state.data.length < MAX_ROWS_FETCHED) {
+              if (this.state.data.length < this.state.limit) {
                 this.prefetchData(this.props, this.context);
               } else {
                 this.forceUpdate();
@@ -1997,80 +2000,95 @@ class Browser extends DashboardView {
           }
         }
         browser = (
-          <DataBrowser
-            app={this.context}
-            ref={this.dataBrowserRef}
-            isUnique={this.state.isUnique}
-            uniqueField={this.state.uniqueField}
-            count={count}
-            perms={this.state.clp[className]}
-            schema={this.props.schema}
-            filters={this.state.filters}
-            onFilterChange={this.updateFilters}
-            onFilterSave={(...args) => this.saveFilters(...args)}
-            onRemoveColumn={this.showRemoveColumn}
-            onDeleteRows={this.showDeleteRows}
-            onDropClass={this.showDropClass}
-            onExport={this.showExport}
-            onChangeCLP={this.handleCLPChange}
-            onRefresh={this.refresh}
-            onAttachRows={this.showAttachRowsDialog}
-            onAttachSelectedRows={this.showAttachSelectedRowsDialog}
-            onExecuteScriptRows={this.showExecuteScriptRowsDialog}
-            onCloneSelectedRows={this.showCloneSelectedRowsDialog}
-            onEditSelectedRow={this.showEditRowDialog}
-            onEditPermissions={this.onDialogToggle}
-            onExportSelectedRows={this.showExportSelectedRowsDialog}
-            onExportSchema={this.showExportSchemaDialog}
-            onSaveNewRow={this.saveNewRow}
-            onShowPointerKey={this.showPointerKeyDialog}
-            onAbortAddRow={this.abortAddRow}
-            onSaveEditCloneRow={this.saveEditCloneRow}
-            onAbortEditCloneRow={this.abortEditCloneRow}
-            onCancelPendingEditRows={this.cancelPendingEditRows}
-            currentUser={this.state.currentUser}
-            useMasterKey={this.state.useMasterKey}
-            login={this.login}
-            logout={this.logout}
-            toggleMasterKeyUsage={this.toggleMasterKeyUsage}
-            markRequiredFieldRow={this.state.markRequiredFieldRow}
-            requiredColumnFields={this.state.requiredColumnFields}
-            columns={columns}
-            className={className}
-            fetchNextPage={this.fetchNextPage}
-            maxFetched={this.state.lastMax}
-            selectRow={this.selectRow}
-            selection={this.state.selection}
-            data={this.state.data}
-            ordering={this.state.ordering}
-            newObject={this.state.newObject}
-            editCloneRows={this.state.editCloneRows}
-            relation={this.state.relation}
-            disableKeyControls={this.hasExtras()}
-            updateRow={this.updateRow}
-            updateOrdering={this.updateOrdering}
-            onPointerClick={this.handlePointerClick}
-            onPointerCmdClick={this.handlePointerCmdClick}
-            setRelation={this.setRelation}
-            onAddColumn={this.showAddColumn}
-            onAddRow={this.addRow}
-            onAddRowWithModal={this.addRowWithModal}
-            onAddClass={this.showCreateClass}
-            showNote={this.showNote}
-            onMouseDownRowCheckBox={this.onMouseDownRowCheckBox}
-            onMouseUpRowCheckBox={this.onMouseUpRowCheckBox}
-            onMouseOverRowCheckBox={this.onMouseOverRowCheckBox}
-            classes={this.classes}
-            classwiseCloudFunctions={this.state.classwiseCloudFunctions}
-            callCloudFunction={this.fetchAggregationPanelData}
-            isLoadingCloudFunction={this.state.isLoading}
-            setLoading={this.setLoading}
-            AggregationPanelData={this.state.AggregationPanelData}
-            setAggregationPanelData={this.setAggregationPanelData}
-            setErrorAggregatedData={this.setErrorAggregatedData}
-            errorAggregatedData={this.state.errorAggregatedData}
-            appName = {this.props.params.appId}
-          />
+          <>
+            <DataBrowser
+              app={this.context}
+              ref={this.dataBrowserRef}
+              isUnique={this.state.isUnique}
+              uniqueField={this.state.uniqueField}
+              count={count}
+              perms={this.state.clp[className]}
+              schema={this.props.schema}
+              filters={this.state.filters}
+              onFilterChange={this.updateFilters}
+              onFilterSave={(...args) => this.saveFilters(...args)}
+              onRemoveColumn={this.showRemoveColumn}
+              onDeleteRows={this.showDeleteRows}
+              onDropClass={this.showDropClass}
+              onExport={this.showExport}
+              onChangeCLP={this.handleCLPChange}
+              onRefresh={this.refresh}
+              onAttachRows={this.showAttachRowsDialog}
+              onAttachSelectedRows={this.showAttachSelectedRowsDialog}
+              onExecuteScriptRows={this.showExecuteScriptRowsDialog}
+              onCloneSelectedRows={this.showCloneSelectedRowsDialog}
+              onEditSelectedRow={this.showEditRowDialog}
+              onEditPermissions={this.onDialogToggle}
+              onExportSelectedRows={this.showExportSelectedRowsDialog}
+              onExportSchema={this.showExportSchemaDialog}
+              onSaveNewRow={this.saveNewRow}
+              onShowPointerKey={this.showPointerKeyDialog}
+              onAbortAddRow={this.abortAddRow}
+              onSaveEditCloneRow={this.saveEditCloneRow}
+              onAbortEditCloneRow={this.abortEditCloneRow}
+              onCancelPendingEditRows={this.cancelPendingEditRows}
+              currentUser={this.state.currentUser}
+              useMasterKey={this.state.useMasterKey}
+              login={this.login}
+              logout={this.logout}
+              toggleMasterKeyUsage={this.toggleMasterKeyUsage}
+              markRequiredFieldRow={this.state.markRequiredFieldRow}
+              requiredColumnFields={this.state.requiredColumnFields}
+              columns={columns}
+              className={className}
+              fetchNextPage={this.fetchNextPage}
+              maxFetched={this.state.lastMax}
+              selectRow={this.selectRow}
+              selection={this.state.selection}
+              data={this.state.data}
+              ordering={this.state.ordering}
+              newObject={this.state.newObject}
+              editCloneRows={this.state.editCloneRows}
+              relation={this.state.relation}
+              disableKeyControls={this.hasExtras()}
+              updateRow={this.updateRow}
+              updateOrdering={this.updateOrdering}
+              onPointerClick={this.handlePointerClick}
+              onPointerCmdClick={this.handlePointerCmdClick}
+              setRelation={this.setRelation}
+              onAddColumn={this.showAddColumn}
+              onAddRow={this.addRow}
+              onAddRowWithModal={this.addRowWithModal}
+              onAddClass={this.showCreateClass}
+              showNote={this.showNote}
+              onMouseDownRowCheckBox={this.onMouseDownRowCheckBox}
+              onMouseUpRowCheckBox={this.onMouseUpRowCheckBox}
+              onMouseOverRowCheckBox={this.onMouseOverRowCheckBox}
+              classes={this.classes}
+              classwiseCloudFunctions={this.state.classwiseCloudFunctions}
+              callCloudFunction={this.fetchAggregationPanelData}
+              isLoadingCloudFunction={this.state.isLoading}
+              setLoading={this.setLoading}
+              AggregationPanelData={this.state.AggregationPanelData}
+              setAggregationPanelData={this.setAggregationPanelData}
+              setErrorAggregatedData={this.setErrorAggregatedData}
+              errorAggregatedData={this.state.errorAggregatedData}
+              appName = {this.props.params.appId}
+            />
+            <BrowserFooter
+              skip={this.state.skip}
+              setSkip={(skip) => {
+                this.setState({ skip });
+                this.updateOrdering(this.state.ordering);
+              }}
+              count={this.state.counts[className]}
+              limit={this.state.limit}
+              setLimit={(limit) => {
+                this.setState({ limit })
+                this.updateOrdering(this.state.ordering);
+              }}
+            />
+          </>
         );
       }
     }

src/dashboard/Data/Browser/Browser.scss

@@ -12,7 +12,7 @@
   top: 96px;
   left: 300px;
   right: 0;
-  bottom: 0;
+  bottom: 40px;
   overflow: auto;
   padding-top: 30px;
 }

src/dashboard/Data/Browser/BrowserFooter.react.js

@@ -0,0 +1,96 @@
+import Button from 'components/Button/Button.react';
+import React from 'react';
+import styles from './BrowserFooter.scss';
+
+class BrowserFooter extends React.Component {
+  state = {
+    pageInput: (Math.floor(this.props.skip / this.props.limit) + 1).toString(),
+  };
+
+  handleLimitChange = (event) => {
+    const newLimit = parseInt(event.target.value, 10);
+    this.props.setLimit(newLimit);
+    this.props.setSkip(0);
+    this.setState({ pageInput: '1' });
+  };
+
+  handlePageChange = (newSkip) => {
+    if (newSkip >= 0 && newSkip < this.props.count) {
+      this.props.setSkip(newSkip);
+      this.setState({ pageInput: (Math.floor(newSkip / this.props.limit) + 1).toString() });
+    }
+  };
+
+  handleInputChange = (e) => {
+    const value = e.target.value;
+
+    // Allow user to type freely but validate only on blur/Enter
+    if (value === '' || /^\d*$/.test(value)) {
+      this.setState({ pageInput: value });
+    }
+  };
+
+  validateAndApplyPage = () => {
+    const { limit, count } = this.props;
+    let newPage = parseInt(this.state.pageInput, 10);
+
+    if (isNaN(newPage) || newPage < 1) {
+      newPage = 1;
+    } else if (newPage > Math.ceil(count / limit)) {
+      newPage = Math.ceil(count / limit);
+    }
+
+    this.setState({ pageInput: newPage.toString() });
+    this.handlePageChange((newPage - 1) * limit);
+  };
+
+  handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      this.validateAndApplyPage();
+    }
+  };
+
+  render() {
+    const { skip, count, limit } = this.props;
+    const totalPages = Math.ceil(count / limit);
+
+    return (
+      <div className={styles.footer}>
+        <span>
+          <strong>{count?.toLocaleString() || 0}</strong> objects
+        </span>
+        <select value={limit} onChange={this.handleLimitChange}>
+          {[10, 20, 50, 100, 200, 500, 1000].map((size) => (
+            <option key={size} value={size}>
+              {size}
+            </option>
+          ))}
+        </select>
+        <span>per page</span>
+        <input
+          type="text"
+          style={{ marginLeft: 'auto', width: '50px' }}
+          value={this.state.pageInput}
+          onChange={this.handleInputChange}
+          onBlur={this.validateAndApplyPage}
+          onKeyDown={this.handleKeyDown}
+        />
+        <span>/ {totalPages.toLocaleString()}</span>
+        <Button
+          value="Previous"
+          width="100px"
+          onClick={() => this.handlePageChange(skip - limit)}
+          disabled={skip === 0}
+        />
+        <Button
+          value="Next"
+          width="100px"
+          onClick={() => this.handlePageChange(skip + limit)}
+          disabled={skip + limit >= count}
+        />
+      </div>
+    );
+  }
+}
+
+export default BrowserFooter;

src/dashboard/Data/Browser/BrowserFooter.scss

@@ -0,0 +1,16 @@
+@import 'stylesheets/globals.scss';
+
+.footer {
+  position: absolute;
+  width: calc(100% - 300px);
+  bottom: 0;
+  gap: 10px;
+  padding: 0px 15px;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: 12px;
+  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}