feat: OHIF-120 - Study List Route Template (#1693)

* fix pagination size

* clean up, start a very basic route configuration

* quick navigation between routes

* configure webpack to read .env variables

* export studylist filter

* split studylist filter into a component

* minor fix in studylist pagination

* update studylistfilter imports

* create studylist container with study list content

* moving file

* study list filter doc page

* catch change in ui-v2

* fix: 1px gap that shows text underneath

* Shift to routes folder

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/views/StudyList/StudyList.js

@@ -13,11 +13,11 @@ import {
   Button,
   StudyListPagination,
   StudyListTable,
+  StudyListFilter,
 } from '@ohif/ui';
 
 // fix imports after refactor
 import Header from './components/Header';
-import StudyListFilter from './components/StudyListFilter';
 
 const filtersMeta = [
   {
@@ -96,7 +96,7 @@ const defaultFilterValues = {
 };
 
 const isFiltering = (filterValues, defaultFilterValues) => {
-  return Object.keys(defaultFilterValues).some((name) => {
+  return Object.keys(defaultFilterValues).some(name => {
     return filterValues[name] !== defaultFilterValues[name];
   });
 };
@@ -109,7 +109,7 @@ const StudyList = () => {
 
   const tableDataSource = studies.map((study, key) => {
     const rowKey = key + 1;
-    const isExpanded = expandedRows.some((k) => k === rowKey);
+    const isExpanded = expandedRows.some(k => k === rowKey);
     const {
       AccessionNumber,
       Modalities,
@@ -128,7 +128,7 @@ const StudyList = () => {
       Instances: 'Instances',
     };
 
-    const seriesTableDataSource = series.map((seriesItem) => {
+    const seriesTableDataSource = series.map(seriesItem => {
       const { SeriesNumber, Modality, instances } = seriesItem;
       return {
         description: 'Patient Protocol',
@@ -238,8 +238,8 @@ const StudyList = () => {
         </StudyListExpandedRow>
       ),
       onClickRow: () =>
-        setExpandedRows((s) =>
-          isExpanded ? s.filter((n) => rowKey !== n) : [...s, rowKey]
+        setExpandedRows(s =>
+          isExpanded ? s.filter(n => rowKey !== n) : [...s, rowKey]
         ),
       isExpanded,
     };
@@ -248,13 +248,13 @@ const StudyList = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [perPage, setPerPage] = useState(25);
   const totalPages = Math.floor(numOfStudies / perPage);
-  const onChangePage = (page) => {
+  const onChangePage = page => {
     if (page > totalPages) {
       return;
     }
     setCurrentPage(page);
   };
-  const onChangePerPage = (perPage) => {
+  const onChangePerPage = perPage => {
     setPerPage(perPage);
     setCurrentPage(1);
   };

platform/ui/src/views/StudyList/StudyList.mdx

@@ -18,12 +18,10 @@ import {
   EmptyStudies,
   StudyListTable,
   StudyListPagination,
+  StudyListFilter
 } from '@ohif/ui';
 
-<!-- TEMPORARY IMPORTING -- SHOULD USE InputGroup after PR #1580 gets merged  -->
 
-import StudyListFilter from './components/StudyListFilter';
-import { getMockedStudies } from '../../utils/';
 import classnames from 'classnames';
 import moment from 'moment';
 
@@ -259,7 +257,7 @@ components.
       };
     });
     const handleStudyList = (number) => {
-      const studies = getMockedStudies(number);
+      const studies = utils.getMockedStudies(number);
       setStudies(studies);
       setCurrentPage(1);
     };

platform/ui/src/views/StudyList/components/StudyListFilter.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Button, Icon, Typography, InputGroup } from '@ohif/ui';
-
-const StudyListFilter = ({
-  filtersMeta,
-  filterValues,
-  setFilterValues,
-  clearFilters,
-  isFiltering,
-  numOfStudies,
-}) => {
-  const { sortBy, sortDirection } = filterValues;
-  const filterSorting = { sortBy, sortDirection };
-  const setFilterSorting = sortingValues => {
-    setFilterValues({
-      ...filterValues,
-      ...sortingValues,
-    });
-  };
-  const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
-
-  return (
-    <React.Fragment>
-      <div>
-        <div className="bg-primary-dark">
-          <div className="container m-auto relative flex flex-col pt-5">
-            <div className="flex flex-row justify-between mb-5 px-12">
-              <div className="flex flex-row">
-                <Typography variant="h4" className="text-primary-light mr-6">
-                  Study List
-                </Typography>
-                <div className="flex flex-row items-end">
-                  <Button
-                    variant="text"
-                    size="small"
-                    color="inherit"
-                    className="text-primary-active"
-                    startIcon={<Icon name="info-link" className="w-2" />}
-                  >
-                    <span className="flex flex-col flex-1">
-                      <span>Learn more</span>
-                      <span className="opacity-50 pt-1 border-b border-primary-active"></span>
-                    </span>
-                  </Button>
-                </div>
-              </div>
-              <div className="flex flex-row">
-                {isFiltering && (
-                  <Button
-                    rounded="full"
-                    variant="outlined"
-                    color="primary"
-                    className="text-primary-active border-primary-active mx-8"
-                    startIcon={<Icon name="cancel" />}
-                    onClick={clearFilters}
-                  >
-                    Clear filters
-                  </Button>
-                )}
-                <Typography variant="h4" className="mr-2">
-                  {numOfStudies > 100 ? '>100' : numOfStudies}
-                </Typography>
-                <Typography
-                  variant="h6"
-                  className="text-common-light self-end pb-1"
-                >
-                  Studies
-                </Typography>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="sticky z-10 border-b-4 border-black" style={{ top: 58 }}>
-        <div className="bg-custom-navyDark pt-3 pb-3 ">
-          <InputGroup
-            inputMeta={filtersMeta}
-            values={filterValues}
-            onValuesChange={setFilterValues}
-            sorting={filterSorting}
-            onSortingChange={setFilterSorting}
-            isSortingEnable={isSortingEnable}
-          />
-        </div>
-        {numOfStudies > 100 && (
-          <div className="container m-auto">
-            <div className="bg-primary-main text-center text-base py-1 rounded-b">
-              <p className="text-white">
-                Filter list to 100 studies or less to enable sorting
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </React.Fragment>
-  );
-};
-
-StudyListFilter.propTypes = {
-  filtersMeta: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      displayName: PropTypes.string.isRequired,
-      inputType: PropTypes.oneOf(['Text', 'MultiSelect', 'DateRange', 'None'])
-        .isRequired,
-      isSortable: PropTypes.bool.isRequired,
-      gridCol: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
-        .isRequired,
-      option: PropTypes.arrayOf(
-        PropTypes.shape({
-          value: PropTypes.string,
-          label: PropTypes.string,
-        })
-      ),
-    })
-  ).isRequired,
-  filterValues: PropTypes.object.isRequired,
-  numOfStudies: PropTypes.number.isRequired,
-  setFilterValues: PropTypes.func.isRequired,
-  clearFilters: PropTypes.func.isRequired,
-  isFiltering: PropTypes.bool.isRequired,
-};
-
-export default StudyListFilter;