feat: responsive study list (OHIF#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 <[email protected]> * 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
stackp · Oct 28, 2019 · 2cdef4b · 2cdef4b
1 parent 70532a6
commit 2cdef4b
Show file tree

Hide file tree

Showing 35 changed files with 1,799 additions and 1,332 deletions.
diff --git a/platform/ui/package.json b/platform/ui/package.json
@@ -48,7 +48,7 @@
     "moment": "2.24.0",
     "prop-types": "15.6.2",
     "react-bootstrap-modal": "4.2.0",
-    "react-dates": "18.4.1",
+    "react-dates": "21.2.1",
     "react-dnd": "9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
     "react-dnd-touch-backend": "^9.3.4",

diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
@@ -16,7 +16,12 @@ import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
-import { StudyList } from './studyList';
+import {
+  PageToolbar,
+  StudyList,
+  TableSearchFilter,
+  TablePagination,
+} from './studyList';
 import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
 
@@ -32,12 +37,15 @@ export {
   OverlayTrigger,
   QuickSwitch,
   RoundedButtonGroup,
+  PageToolbar,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
+  TableSearchFilter,
+  TablePagination,
   ThumbnailEntry,
   ToolbarSection,
   Tooltip,

diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.css b/platform/ui/src/components/studyList/CustomDateRangePicker.css
@@ -0,0 +1,83 @@
+/* NOTE: the order of these styles DO matter */
+
+/* Will edit everything selected including everything between a range of dates */
+.CalendarDay__selected_span {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* Will edit selected date or the endpoints of a range of dates */
+.CalendarDay__selected {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* Will edit when hovered over. _span style also has this property */
+.CalendarDay__selected:hover {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* Will edit when the second date (end date) in a range of dates
+is not yet selected. Edits the dates between your mouse and said date */
+.CalendarDay__hovered_span:hover,
+.CalendarDay__hovered_span {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* EXTERIOR INPUT STYLE */
+/* Container - placement */
+.DateRangePicker {
+  height: 40px;
+  margin: 0 5px 20px 5px;
+  cursor: pointer;
+  border: none;
+  width: 100%;
+}
+/* Container - visual */
+.DateRangePickerInput {
+  width: calc(100% - 10px); /* Just use padding? */
+  background-color: var(--input-background-color);
+  border-color: var(--input-background-color);
+  color: var(--input-placeholder-color);
+  height: 40px;
+}
+
+.DateRangePickerInput.DateRangePickerInput__withBorder {
+  border-radius: 4px;
+  background-color: var(--input-background-color);
+}
+
+/* Input Container */
+.DateInput {
+  width: 97px;
+  height: 38px;
+  border-radius: 4px;
+  background-color: var(--input-background-color);
+}
+
+/* Actual Input Element */
+.DateInput > .DateInput_input {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--input-placeholder-color);
+  height: 38px;
+  font-size: 10pt;
+  padding: 0;
+}
+
+/* PRESETS */
+.PresetDateRangePicker_panel {
+  display: flex;
+  justify-content: space-between;
+}
+
+.PresetDateRangePicker_button {
+  margin: 0;
+  padding: 4px 8px;
+}
diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.js b/platform/ui/src/components/studyList/CustomDateRangePicker.js
@@ -2,13 +2,12 @@
 //  https://github.com/airbnb/react-dates#initialize
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
+import './CustomDateRangePicker.css';
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DateRangePicker } from 'react-dates';
 
-import './CustomDateRangePicker.styl';
-
 export default class CustomDateRangePicker extends React.Component {
   static propTypes = {
     presets: PropTypes.arrayOf(
@@ -85,15 +84,13 @@ export default class CustomDateRangePicker extends React.Component {
     } = this.props;
 
     return (
-      <div>
-        <DateRangePicker
-          {...dateRangePickerProps}
-          startDate={this.state.startDate}
-          endDate={this.state.endDate}
-          renderCalendarInfo={this.renderDatePresets}
-          onDatesChange={this.onDatesChange}
-        />
-      </div>
+      <DateRangePicker
+        {...dateRangePickerProps}
+        startDate={this.state.startDate}
+        endDate={this.state.endDate}
+        renderCalendarInfo={this.renderDatePresets}
+        onDatesChange={this.onDatesChange}
+      />
     );
   }
 }
diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.styl b/platform/ui/src/components/studyList/CustomDateRangePicker.styl
diff --git a/.../components/studyList/StudyListToolbar.js → ...i/src/components/studyList/PageToolbar.js b/.../components/studyList/StudyListToolbar.js → ...i/src/components/studyList/PageToolbar.js
@@ -1,11 +1,9 @@
-import './StudyListToolbar.styl';
-
 import React, { PureComponent } from 'react';
 
 import { Icon } from './../../elements/Icon';
 import PropTypes from 'prop-types';
 
-class StudylistToolbar extends PureComponent {
+class PageToolbar extends PureComponent {
   static propTypes = {
     onImport: PropTypes.func,
   };
@@ -37,4 +35,4 @@ class StudylistToolbar extends PureComponent {
   }
 }
 
-export { StudylistToolbar };
+export { PageToolbar };
diff --git a/platform/ui/src/components/studyList/PaginationArea.styl b/platform/ui/src/components/studyList/PaginationArea.styl
@@ -1,64 +1,63 @@
 .pagination-area
-    color: var(--text-secondary-color);
-    font-size: 13px
-    font-weight: normal !important
+  display: flex;
+  color: var(--text-secondary-color);
+  font-size: 13px
+  font-weight: normal !important
 
-    label
-        font-weight: normal
+  label
+    font-weight: normal
 
-    select
-        margin: 5px
-        background-color: var(--primary-background-color)
-        color: white
+  select
+    margin: 5px
+    background-color: var(--primary-background-color)
+    color: white
 
-  .row
-    display: flex;
 
-    .rows-dropdown
-      width: 25%;
-      padding-right: 15px;
-      padding-left: 15px;
+  .rows-dropdown
+    width: 25%;
+    padding-right: 15px;
+    padding-left: 15px;
 
-    .pagination-buttons
-      width: 75%;
-      padding-right: 15px;
-      padding-left: 15px;
+  .pagination-buttons
+    width: 75%;
+    padding-right: 15px;
+    padding-left: 15px;
 
-    .form-group
-      margin-bottom: 15px;
+  .form-group
+    margin-bottom: 15px;
 
-  .rows-per-page label.wrapperLabel
-    display: inline-table !important
-    margin: 0 4px
+.rows-per-page label.wrapperLabel
+  display: inline-table !important
+  margin: 0 4px
 
-    select
-      margin: 0px 4px 0px 4px
-      width: 42px
+  select
+    margin: 0px 4px 0px 4px
+    width: 42px
 
-  .page-buttons
+.page-buttons
+  margin: 0
+  text-align: right
+  font-weight: normal
+  ul.pagination-control
     margin: 0
-    text-align: right
-    font-weight: normal
-    ul.pagination-control
-      margin: 0
 
-      li
-        display: table-cell
-        padding: 5px 2px
+    li
+      display: table-cell
+      padding: 5px 2px
 
-        button
-          padding: 4px 8px
-          background-color: var(--primary-background-color)
-          border-color: var(--ui-gray)
-          color: var(--ui-gray-darkest)
-          color: white
-          text-decoration: none
+      button
+        padding: 4px 8px
+        background-color: var(--primary-background-color)
+        border-color: var(--ui-gray)
+        color: var(--ui-gray-darkest)
+        color: white
+        text-decoration: none
 
-          &:hover:enabled
-            color: var(--active-color)
+        &:hover:enabled
+          color: var(--active-color)
 
-        .active
-          button
-            background-color: var(--ui-gray)
-            border-color: #ddd
-            color: white
+      .active
+        button
+          background-color: var(--ui-gray)
+          border-color: #ddd
+          color: white