feat: responsive study list (#1068)

* feat: 🎸 Load spinner when selecting gcloud store. Add key on td * feat: 🎸 Code review. Translate loading study status * feat: 🎸 Code review. Minor code refactoring * fix: add missing study and index declerations * Newer version of react-dates (calendar input component) * Add useMedia hook * Add useDebounce hook * Export hooks for consumption * Pull search filter into own component * StudyListWithData to StudyListRoute * Rename pagination component * Rename Toolbar * CustomeDateRangePicker to plain ol' css * Remove unused styles * Misc * Magic to make our "OR" filters work * Play w/ Mobile styles * Fix pagination pushing out max width for viewport * Tidy up small and medium templates * Remove unecessary nesting * Better mobile header and logo styles * Fix studyList font size * Remove unused code * hookup on click * Fix table search selectors * Cypress uses medium width * Remove irrelevant test * Fix primary sort * Fix sort for our smaller displays * fix study list sometimes longer than specified rowsPerPage * Simplify date picker styles * restore study date filters * Fix about table styling * fix take value for search * Fix header sizing for viewer and list route * Remove dead code * Restore isLoading * Update platform/ui/src/components/studyList/StudyList.styl Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com> * Attempt first usage of translations w/ hooks * Pull from react-i18n library * Fit presets on to a single line * add no results message * Show error message in studyList table * Update input selectors for e2e tests * Make sure messages span all columns * fix test selector for table results * Skip hover for result rows * fix imports * Date filtering w/ config * Default export * Pushed to PageComponent * Remove DropZone This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show
2019-10-28 14:47:57 -04:00
1 parent 70532a6cc6
commit 2cdef4b984
@@ -0,0 +1,106 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './PaginationArea.styl';
+import { withTranslation } from '../../utils/LanguageProvider';
+
+class TablePagination extends PureComponent {
+  static defaultProps = {
+    pageOptions: [5, 10, 25, 50, 100],
+    rowsPerPage: 25,
+    currentPage: 0,
+  };
+
+  static propTypes = {
+    /* Values to show in "rows per page" select dropdown */
+    pageOptions: PropTypes.array,
+    rowsPerPage: PropTypes.number.isRequired,
+    currentPage: PropTypes.number.isRequired,
+    nextPageFunc: PropTypes.func,
+    prevPageFunc: PropTypes.func,
+    onRowsPerPageChange: PropTypes.func,
+    recordCount: PropTypes.number.isRequired,
+  };
+
+  nextPage = () => {
+    this.props.nextPageFunc(this.props.currentPage);
+  };
+
+  prevPage = () => {
+    this.props.prevPageFunc(this.props.currentPage);
+  };
+
+  onRowsPerPageChange = event => {
+    this.props.onRowsPerPageChange(parseInt(event.target.value));
+  };
+
+  renderPaginationButtons() {
+    return (
+      <div className="col-xs-8 col-sm-9 col-md-9">
+        <div className="form-inline form-group page-buttons noselect">
+          <React.Fragment>
+            <ul className="pagination-control no-margins">
+              <li className="page-item prev">
+                <button
+                  onClick={this.prevPage}
+                  disabled={this.props.currentPage === 0}
+                  className="btn page-link"
+                >
+                  {this.props.t('Previous')}
+                </button>
+              </li>
+              <li className="page-item next">
+                <button
+                  onClick={this.nextPage}
+                  disabled={
+                    this.props.recordCount === 0 ||
+                    this.props.rowsPerPage > this.props.recordCount
+                  }
+                  className="btn page-link"
+                >
+                  {this.props.t('Next')}
+                </button>
+              </li>
+            </ul>
+          </React.Fragment>
+        </div>
+      </div>
+    );
+  }
+
+  renderRowsPerPageDropdown() {
+    return (
+      <div className="form-inline form-group rows-per-page">
+        <span>{this.props.t('Show')}</span>
+        <select
+          onChange={this.onRowsPerPageChange}
+          defaultValue={this.props.rowsPerPage}
+        >
+          {this.props.pageOptions.map(pageNumber => {
+            return (
+              <option key={pageNumber} value={pageNumber}>
+                {pageNumber}
+              </option>
+            );
+          })}
+        </select>
+        <span>{this.props.t('RowsPerPage')}</span>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="pagination-area">
+        <div className="rows-dropdown">{this.renderRowsPerPageDropdown()}</div>
+        <div className="pagination-buttons">
+          <div className="form-inline form-group page-number pull-right">
+            {this.renderPaginationButtons()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const connectedComponent = withTranslation('Common')(TablePagination);
+export { connectedComponent as TablePagination };