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/index.js

@@ -35,6 +35,7 @@ export {
   StudyBrowser,
   StudyItem,
   StudyListExpandedRow,
+  StudyListFilter,
   StudyListPagination,
   StudyListTable,
   Svg,

platform/ui/src/components/StudyListFilter/StudyListFilter.jsx

@@ -73,8 +73,11 @@ const StudyListFilter = ({
           </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 ">
+      <div
+        className="sticky z-10 border-b-4 border-black"
+        style={{ top: '57px' }}
+      >
+        <div className="bg-primary-dark pt-3 pb-3 ">
           <InputGroup
             inputMeta={filtersMeta}
             values={filterValues}

platform/ui/src/components/StudyListFilter/StudyListFilter.mdx

@@ -0,0 +1,118 @@
+---
+name: Study List Filter
+menu: Data Display
+route: components/studyListFilter
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { StudyListFilter } from '@ohif/ui';
+
+# Study List Filter
+
+## Import
+
+```javascript
+import { StudyListFilter } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const defaultFilterValues = {
+      patientName: '',
+      mrn: '',
+      studyDate: {
+        startDate: null,
+        endDate: null,
+      },
+      description: '',
+      modality: undefined,
+      accession: '',
+      sortBy: '',
+      sortDirection: 'none',
+      page: 0,
+      resultsPerPage: 25,
+    };
+    const [filterValues, setFilterValues] = useState(defaultFilterValues);
+    const filtersMeta = [
+      {
+        name: 'patientName',
+        displayName: 'Patient Name',
+        inputType: 'Text',
+        isSortable: true,
+        gridCol: 4,
+      },
+      {
+        name: 'mrn',
+        displayName: 'MRN',
+        inputType: 'Text',
+        isSortable: true,
+        gridCol: 2,
+      },
+      {
+        name: 'studyDate',
+        displayName: 'Study date',
+        inputType: 'DateRange',
+        isSortable: true,
+        gridCol: 5,
+      },
+      {
+        name: 'description',
+        displayName: 'Description',
+        inputType: 'Text',
+        isSortable: true,
+        gridCol: 4,
+      },
+      {
+        name: 'modality',
+        displayName: 'Modality',
+        inputType: 'MultiSelect',
+        inputProps: {
+          options: [
+            { value: 'SEG', label: 'SEG' },
+            { value: 'CT', label: 'CT' },
+            { value: 'MR', label: 'MR' },
+            { value: 'SR', label: 'SR' },
+          ],
+        },
+        isSortable: true,
+        gridCol: 3,
+      },
+      {
+        name: 'accession',
+        displayName: 'Accession',
+        inputType: 'Text',
+        isSortable: true,
+        gridCol: 4,
+      },
+      {
+        name: 'instances',
+        displayName: 'Instances',
+        inputType: 'None',
+        isSortable: true,
+        gridCol: 2,
+      },
+    ];
+    const isFiltering = (filterValues, defaultFilterValues) => {
+      return Object.keys(defaultFilterValues).some(name => {
+        return filterValues[name] !== defaultFilterValues[name];
+      });
+    };
+    return (
+      <StudyListFilter
+        numOfStudies={100}
+        filtersMeta={filtersMeta}
+        filterValues={filterValues}
+        setFilterValues={setFilterValues}
+        clearFilters={() => setFilterValues(defaultFilterValues)}
+        isFiltering={isFiltering(filterValues, defaultFilterValues)}
+      />
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={StudyListFilter} />

platform/ui/src/components/StudyListFilter/index.js

@@ -0,0 +1 @@
+export { default } from './StudyListFilter';

platform/ui/src/components/StudyListPagination/StudyListPagination.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Icon, IconButton, Typography } from '@ohif/ui';
+import { Button, ButtonGroup, Icon, Typography } from '@ohif/ui';
 
 const StudyListPagination = ({
   onChangePage,
@@ -21,8 +21,7 @@ const StudyListPagination = ({
             <div className="relative mr-3">
               <select
                 defaultValue={perPage}
-                className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
-                style={{ height: 28 }}
+                className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none h-8"
                 onChange={e => onChangePerPage(e.target.value)}
                 onBlur={() => {}}
               >
@@ -48,22 +47,22 @@ const StudyListPagination = ({
                 Page {currentPage}
               </Typography>
               <ButtonGroup color="primary">
-                <IconButton
-                  size="inherit"
+                <Button
+                  size="initial"
                   className="border-common-active px-4 py-2 text-base"
                   color="white"
                   onClick={() => navigateToPage(1)}
                 >
-                  <>{`<<`}</>
-                </IconButton>
+                  {`<<`}
+                </Button>
                 <Button
-                  size="inherit"
+                  size="initial"
                   className="border-common-active py-2 px-2 text-base"
                   color="white"
                   onClick={() => navigateToPage(currentPage - 1)}
                 >{`< Previous`}</Button>
                 <Button
-                  size="inherit"
+                  size="initial"
                   className="border-common-active py-2 px-4 text-base"
                   color="white"
                   onClick={() => navigateToPage(currentPage + 1)}

platform/ui/src/components/index.js

@@ -24,6 +24,7 @@ import StudyListPagination from './StudyListPagination';
 import StudyListTable from './StudyListTable';
 import Svg from './Svg';
 import StudyItem from './StudyItem';
+import StudyListFilter from './StudyListFilter';
 import Table from './Table';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
@@ -66,6 +67,7 @@ export {
   StudyBrowser,
   StudyItem,
   StudyListExpandedRow,
+  StudyListFilter,
   StudyListPagination,
   StudyListTable,
   Svg,

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);
     };