Adding pagination for solution tables (assignment solutions and user-group solutions).

Author: krulis-martin

src/components/widgets/SortableTable/SortableTable.js

@@ -4,17 +4,26 @@ import { FormattedMessage } from 'react-intl';
 import { Table } from 'react-bootstrap';
 import { lruMemoize } from 'reselect';
 
+import PaginationButtons from '../PaginationButtons';
 import { UserUIDataContext } from '../../../helpers/contexts.js';
 import { CloseIcon, SortedIcon } from '../../icons';
 import withRouter, { withRouterProps } from '../../../helpers/withRouter.js';
 import { storageGetItem, storageSetItem } from '../../../helpers/localStorage.js';
 
 const localStorageKeyPrefix = 'SortableTable';
 
+const _sortData = lruMemoize((data, column, ascendant) =>
+  column === null || column.comparator === null
+    ? data
+    : ascendant
+      ? data.sort(column.comparator)
+      : data.sort(column.comparator).reverse()
+);
+
 class SortableTable extends Component {
   constructor(props) {
     super(props);
-    this.state = { sortColumn: props.defaultOrder || null, ascendant: true };
+    this.state = { sortColumn: props.defaultOrder || null, ascendant: true, page: 0 };
   }
 
   setSortColumnFromLocalStorage = () => {
@@ -34,6 +43,9 @@ class SortableTable extends Component {
   componentDidUpdate(prevProps) {
     if (prevProps.id !== this.props.id) {
       this.setSortColumnFromLocalStorage();
+      this.setState({ page: 0 });
+    } else if (prevProps.data.length !== this.props.data.length || prevProps.maxAmount !== this.props.maxAmount) {
+      this.setState({ page: 0 });
     }
   }
 
@@ -87,15 +99,16 @@ class SortableTable extends Component {
     this.setState({ sortColumn, ascendant });
   };
 
+  selectPage = page => {
+    this.setState({ page: page - 1 });
+  };
+
   // Helper function that actually sorts the data according to internal state
-  sortData = lruMemoize((data, colId, ascendant) => {
+  sortData = lruMemoize((data, colId, ascendant, offset, amount) => {
     const { columns } = this.props;
     const column = columns && columns.find(({ id }) => id === colId);
-    return column === null || column.comparator === null
-      ? data
-      : ascendant
-        ? data.sort(column.comparator)
-        : data.sort(column.comparator).reverse();
+    const allData = _sortData(data, column, ascendant);
+    return allData.slice(offset, offset + amount);
   });
 
   getHeaderSuffixRow = () => {
@@ -125,9 +138,12 @@ class SortableTable extends Component {
       openLinkGenerator = null,
       staticContext /* avoid capturing static context in the rest of ...props */,
       navigate /* avoid capturing injected function by ...props */,
+      maxAmount = null,
       ...props
     } = this.props;
-    const { sortColumn, ascendant } = this.state;
+    const { sortColumn, ascendant, page } = this.state;
+    const offset = maxAmount ? page * maxAmount : 0;
+    const amount = maxAmount || data.length;
 
     return (
       <UserUIDataContext.Consumer>
@@ -164,7 +180,7 @@ class SortableTable extends Component {
             )}
             <tbody>
               {data.length > 0 ? (
-                this.sortData(data, sortColumn, ascendant).map((row, idx) =>
+                this.sortData(data, sortColumn, ascendant, offset, amount).map((row, idx) =>
                   rowRenderer(row, idx, columns, openOnDoubleclick ? openLinkGenerator : null)
                 )
               ) : (
@@ -180,6 +196,31 @@ class SortableTable extends Component {
                 </tr>
               )}
             </tbody>
+            {maxAmount && maxAmount < data.length && (
+              <tfoot>
+                <tr>
+                  <td colSpan={columns.length} className="pt-3 px-4">
+                    <small className="float-end text-muted">
+                      <FormattedMessage
+                        id="app.sortableTable.showingEntries"
+                        defaultMessage="showing entries {from} – {to} of {total}"
+                        values={{ from: offset + 1, to: Math.min(offset + maxAmount, data.length), total: data.length }}
+                      />
+                    </small>
+                    <PaginationButtons
+                      prev
+                      next
+                      maxButtons={10}
+                      boundaryLinks
+                      items={Math.ceil(data.length / maxAmount)}
+                      activePage={this.state.page + 1}
+                      size="small"
+                      onSelect={this.selectPage}
+                    />
+                  </td>
+                </tr>
+              </tfoot>
+            )}
           </Table>
         )}
       </UserUIDataContext.Consumer>
@@ -197,6 +238,7 @@ SortableTable.propTypes = {
   openLinkGenerator: PropTypes.func,
   staticContext: PropTypes.any,
   navigate: withRouterProps.navigate,
+  maxAmount: PropTypes.number,
 };
 
 export default withRouter(SortableTable);

src/locales/cs.json

@@ -1949,6 +1949,7 @@
   "app.solutionsTable.submissionDate": "Datum odevzdání",
   "app.solutionsTable.submitNewSolution": "Odevzdat nové řešení",
   "app.solutionsTable.title": "Odevzdaná řešení",
+  "app.sortableTable.showingEntries": "zobrazuji položky {from} – {to} z {total}",
   "app.sourceCodeViewer.deleteCommentConfirm": "Opravdu si přejete odstranit tento komentář? Tuto operaci nelze vrátit.",
   "app.sourceCodeViewer.downloadButton": "Stáhnout soubor",
   "app.sourceCodeViewer.incompleteWarning": "Zdrojový soubor je příliš velký, a proto zde nemůže být zobrazen. Použijte tlačítko 'Stáhnout soubor', pokud si jej chcete prohlédnout celý.",

src/locales/en.json

@@ -1949,6 +1949,7 @@
   "app.solutionsTable.submissionDate": "Date of submission",
   "app.solutionsTable.submitNewSolution": "Submit New Solution",
   "app.solutionsTable.title": "Submitted Solutions",
+  "app.sortableTable.showingEntries": "showing entries {from} – {to} of {total}",
   "app.sourceCodeViewer.deleteCommentConfirm": "Do you really wish to remove this comment? This operation cannot be undone.",
   "app.sourceCodeViewer.downloadButton": "Download file",
   "app.sourceCodeViewer.incompleteWarning": "The selected source file is too large. Only a leading part of the file is displayed here. Use the download button to get the whole file.",
@@ -2186,4 +2187,4 @@
   "recodex-judge-shuffle-all": "Unordered-tokens-and-rows judge",
   "recodex-judge-shuffle-newline": "Unordered-tokens judge (ignoring ends of lines)",
   "recodex-judge-shuffle-rows": "Unordered-rows judge"
-}
+}

src/pages/AssignmentSolutions/AssignmentSolutions.js

@@ -693,6 +693,7 @@ class AssignmentSolutions extends Component {
                               links
                             )}
                             defaultOrder="date"
+                            maxAmount={100}
                             data={prepareTableData(
                               assignmentSolutions,
                               getStudents(group.id),

src/pages/GroupUserSolutions/GroupUserSolutions.js

@@ -563,6 +563,7 @@ class GroupUserSolutions extends Component {
                                 hover
                                 columns={prepareTableColumnDescriptors(assignments, groupId, locale, links)}
                                 defaultOrder="date"
+                                maxAmount={100}
                                 data={prepareTableData(
                                   assignments,
                                   getAssignmentSolutions,