diff --git a/platform/ui/src/assets/icons/sorting-active-down.svg b/platform/ui/src/assets/icons/sorting-active-down.svg index cbe93cd50..78ed53102 100644 --- a/platform/ui/src/assets/icons/sorting-active-down.svg +++ b/platform/ui/src/assets/icons/sorting-active-down.svg @@ -1,3 +1,6 @@ - + + + + diff --git a/platform/ui/src/assets/icons/sorting-active-up.svg b/platform/ui/src/assets/icons/sorting-active-up.svg index d1a422bb0..f322f393b 100644 --- a/platform/ui/src/assets/icons/sorting-active-up.svg +++ b/platform/ui/src/assets/icons/sorting-active-up.svg @@ -1,5 +1,6 @@ - + + diff --git a/platform/ui/src/views/StudyList/StudyList.js b/platform/ui/src/views/StudyList/StudyList.js index c92f24805..652fb52ec 100644 --- a/platform/ui/src/views/StudyList/StudyList.js +++ b/platform/ui/src/views/StudyList/StudyList.js @@ -7,6 +7,58 @@ import StudyListFilter from './components/StudyListFilter'; import StudyListTable from './components/StudyListTable'; import StudyListPagination from './components/StudyListPagination'; +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: 'text', + isSortable: true, + gridCol: 3, + }, + { + name: 'description', + displayName: 'Description', + inputType: 'text', + isSortable: true, + gridCol: 5, + }, + { + name: 'modality', + displayName: 'Modality', + inputType: 'text', + isSortable: true, + gridCol: 3, + }, + { + name: 'accession', + displayName: 'Accession', + inputType: 'text', + isSortable: true, + gridCol: 4, + }, + { + name: 'instances', + displayName: 'Instances', + inputType: 'none', + isSortable: false, + gridCol: 3, + }, +]; + const StudyList = ({ studies, perPage }) => { const studiesData = studies.slice(0, perPage); const numOfStudies = studies.length; @@ -18,8 +70,12 @@ const StudyList = ({ studies, perPage }) => { })} >
- - + + {!isEmptyStudies && } ); diff --git a/platform/ui/src/views/StudyList/components/StudyListFilter.js b/platform/ui/src/views/StudyList/components/StudyListFilter.js index 6e5021333..9137def76 100644 --- a/platform/ui/src/views/StudyList/components/StudyListFilter.js +++ b/platform/ui/src/views/StudyList/components/StudyListFilter.js @@ -11,45 +11,6 @@ const sortIconMap = { }; const defaultProps = { - numOfStudies: 0, - filterMeta: [ - { - name: 'patientName', - displayName: 'Patient Name', - inputType: 'text', - isSortable: true, - }, - { - name: 'mrn', - displayName: 'MRN', - inputType: 'text', - isSortable: true, - }, - { - name: 'studyDate', - displayName: 'Study date', - inputType: 'text', - isSortable: true, - }, - { - name: 'description', - displayName: 'Description', - inputType: 'text', - isSortable: true, - }, - { - name: 'modality', - displayName: 'Modality', - inputType: 'text', - isSortable: true, - }, - { - name: 'accession', - displayName: 'Accession', - inputType: 'text', - isSortable: true, - }, - ], filtersValues: { patientName: '', mrn: '', @@ -70,6 +31,7 @@ const FilterLabel = ({ isBeingSorted = false, sortDirection = 0, onLabelClick, + inputType, className, children, }) => { @@ -87,11 +49,14 @@ const FilterLabel = ({ return ( ); }; const StudyListFilter = ({ - filtersMeta = defaultProps.filterMeta, + filtersMeta = [], filtersValues = defaultProps.filtersValues, - numOfStudies = 0, + numOfStudies = 90, }) => { const [currentFiltersValues, setcurrentFiltersValues] = useState( filtersValues @@ -116,11 +81,19 @@ const StudyListFilter = ({ const { sortBy, sortDirection } = currentFiltersValues; const handleFilterLabelClick = name => { + let _sortDirection = 1; + if (sortBy === name) { + _sortDirection = sortDirection + 1; + if (_sortDirection > 1) { + _sortDirection = -1; + } + } + if (numOfStudies <= 100) { setcurrentFiltersValues(prevState => ({ ...prevState, - sortBy: name, - sortDirection: sortDirection === 1 || sortBy === name ? -1 : 1, + sortBy: _sortDirection !== 0 ? name : '', + sortDirection: _sortDirection, })); } }; @@ -151,9 +124,9 @@ const StudyListFilter = ({ }; return ( -
-
-
+
+
+
Study List @@ -173,7 +146,7 @@ const StudyListFilter = ({
-
+
{isFiltering() && (
-
- {filtersMeta.map(({ name, displayName, inputType, isSortable }) => { - return ( - 0 - } - isBeingSorted={sortBy === name} - sortDirection={sortDirection} - onLabelClick={() => handleFilterLabelClick(name)} - inputType={inputType} - > - handleFilterValueChange(event, name)} - /> - - ); - })} - +
+ {filtersMeta.map( + ({ name, displayName, inputType, isSortable, gridCol }) => { + return ( +
+ 0 + } + isBeingSorted={sortBy === name} + sortDirection={sortDirection} + onLabelClick={() => handleFilterLabelClick(name)} + inputType={inputType} + > + {inputType !== 'none' && ( + handleFilterValueChange(event, name)} + /> + )} + +
+ ); + } + )}
@@ -233,6 +214,7 @@ StudyListFilter.propTypes = { dsplayName: PropTypes.string, inputType: PropTypes.oneOf(['text', 'select', 'date-range', 'none']), isSortable: PropTypes.bool, + gridCol: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), }), filtersValues: PropTypes.object, numOfStudies: PropTypes.number, diff --git a/platform/ui/src/views/StudyList/components/StudyListTable.js b/platform/ui/src/views/StudyList/components/StudyListTable.js index 096b7f205..2f6b8c36b 100644 --- a/platform/ui/src/views/StudyList/components/StudyListTable.js +++ b/platform/ui/src/views/StudyList/components/StudyListTable.js @@ -1,9 +1,15 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; + import { format } from 'date-fns'; import { Button, Icon, Typography } from '@ohif/ui'; +const getGridColClass = (filtersMeta, name) => { + const filter = filtersMeta.find(filter => filter.name === name); + return (filter && filter.gridCol && `w-${filter.gridCol}/24`) || ''; +}; + const TableRow = props => { const { AccessionNumber, @@ -14,6 +20,7 @@ const TableRow = props => { PatientName, StudyDate, series, + filtersMeta, } = props; const [isOpened, setIsOpened] = useState(false); @@ -53,22 +60,63 @@ const TableRow = props => { )} onClick={toggleRow} > - - + +
+ + {PatientName} +
- {PatientName} - {PatientId} - + + {PatientId} + + {format(StudyDate, 'MMM-DD-YYYY')} - + {StudyDescription} - {Modalities} - + + {Modalities} + + {AccessionNumber} - + { {isOpened && ( - +