diff --git a/platform/ui/src/components/DateRange/DateRange.jsx b/platform/ui/src/components/DateRange/DateRange.jsx index 86814b121..3b9f8cce7 100644 --- a/platform/ui/src/components/DateRange/DateRange.jsx +++ b/platform/ui/src/components/DateRange/DateRange.jsx @@ -122,14 +122,23 @@ const DateRange = props => { ); }; + // Moment + const parsedStartDate = startDate ? moment(startDate, 'YYYYMMDD') : null; + const parsedEndDate = endDate ? moment(endDate, 'YYYYMMDD') : null; + return ( { + onChange({ + startDate: newStartDate ? newStartDate.format('YYYYMMDD') : undefined, + endDate: newEndDate ? newEndDate.format('YYYYMMDD') : undefined, + }) + }} focusedInput={focusedInput} onFocusChange={updatedVal => setFocusedInput(updatedVal)} /** OPTIONAL */ @@ -156,11 +165,11 @@ DateRange.defaultProps = { }; DateRange.propTypes = { - /** Start date moment object */ - startDate: PropTypes.object, // moment date is an object - /** End date moment object */ - endDate: PropTypes.object, // moment date is an object - /** Callback that returns on object with selected dates */ + /** YYYYMMDD (19921022) */ + startDate: PropTypes.string, + /** YYYYMMDD (19921022) */ + endDate: PropTypes.object, + /** Callback that received { startDate: string(YYYYMMDD), endDate: string(YYYYMMDD)} */ onChange: PropTypes.func.isRequired, }; diff --git a/platform/ui/src/components/InputDateRange/InputDateRange.jsx b/platform/ui/src/components/InputDateRange/InputDateRange.jsx index 3424ab01f..1ab06074e 100644 --- a/platform/ui/src/components/InputDateRange/InputDateRange.jsx +++ b/platform/ui/src/components/InputDateRange/InputDateRange.jsx @@ -41,10 +41,10 @@ InputDateRange.propTypes = { .isRequired, onLabelClick: PropTypes.func.isRequired, value: PropTypes.shape({ - /** Start date moment object */ - startDate: PropTypes.object, // moment date is an object - /** End date moment object */ - endDate: PropTypes.object, // moment date is an object + /** YYYYMMDD (19921022) */ + startDate: PropTypes.string, + /** YYYYMMDD (19921022) */ + endDate: PropTypes.string, }), onChange: PropTypes.func.isRequired, }; diff --git a/platform/ui/src/components/InputGroup/InputGroup.jsx b/platform/ui/src/components/InputGroup/InputGroup.jsx index 8dba0ed98..f5a7185a2 100644 --- a/platform/ui/src/components/InputGroup/InputGroup.jsx +++ b/platform/ui/src/components/InputGroup/InputGroup.jsx @@ -58,6 +58,16 @@ const InputGroup = ({ }); }; + const handleDateRangeFieldChange = ({ startDate, endDate }) => { + onValuesChange({ + ...values, + [name]: { + startDate: startDate, + endDate: endDate, + }, + }); + }; + switch (inputType) { case 'Text': return ( @@ -93,7 +103,7 @@ const InputGroup = ({ sortDirection={_sortDirection} onLabelClick={onLabelClick} value={values[name]} - onChange={handleFieldChange} + onChange={handleDateRangeFieldChange} /> ); case 'None': diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx index c50fada07..f5b547f16 100644 --- a/platform/viewer/src/routes/DataSourceWrapper.jsx +++ b/platform/viewer/src/routes/DataSourceWrapper.jsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import { MODULE_TYPES } from '@ohif/core'; // import { appConfig, extensionManager } from '../App.js'; -import { useQuery } from './../hooks'; /** * Uses route properties to determine the data source that should be passed @@ -15,9 +14,8 @@ import { useQuery } from './../hooks'; * @param {function} props.children - Layout Template React Component */ function DataSourceWrapper(props) { - const { children: LayoutTemplate, ...rest } = props; - const query = useQuery(); - const queryFilterValues = _getQueryFilterValues(query); + const { children: LayoutTemplate, history, ...rest } = props; + const queryFilterValues = _getQueryFilterValues(history.location.search); // TODO: Fetch by type, name, etc? const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE]; @@ -53,10 +51,10 @@ function DataSourceWrapper(props) { // 204: no content async function getData() { - const searchResult = await dataSource.query.studies.search({ - patientName: queryFilterValues.patientName, - }); - setData(searchResult); + const searchResults = await dataSource.query.studies.search( + queryFilterValues + ); + setData(searchResults); } try { @@ -66,14 +64,13 @@ function DataSourceWrapper(props) { } console.log('DataSourceWrapper: useEffect'); - }, [rest.history.location.search]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [history.location.search]); // queryFilterValues - console.log(rest); - return ( - {data && } + {data && } ); } @@ -91,12 +88,17 @@ export default DataSourceWrapper; * @param {*} query */ function _getQueryFilterValues(query) { + query = new URLSearchParams(query); + const queryFilterValues = { patientName: query.get('patientName'), // mrn: query.get('mrn'), patientId? - studyDate: _tryParseDates(query.get('studyDate'), undefined), + studyDate: { + startDate: query.get('startDate'), + endDate: query.get('endDate'), + }, studyDescription: query.get('description'), - modalitiesInStudy: _tryParseJson(query.get('modality'), undefined), + //modalitiesInStudy: _tryParseJson(query.get('modality'), undefined), accessionNumber: query.get('accession'), sortBy: query.get('soryBy'), sortDirection: query.get('sortDirection'), @@ -104,6 +106,10 @@ function _getQueryFilterValues(query) { resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined), }; + // patientName: good + // studyDescription: good + // accessionNumber: good + // Delete null/undefined keys Object.keys(queryFilterValues).forEach( key => queryFilterValues[key] == null && delete queryFilterValues[key] @@ -122,24 +128,4 @@ function _getQueryFilterValues(query) { } return retValue; } - - function _tryParseJson(str, defaultValue) { - return str ? JSON.parse(str) : defaultValue; - } - - function _tryParseDates(str, defaultValue) { - const studyDateObject = _tryParseJson(str, defaultValue); - - if (studyDateObject) { - studyDateObject.startDate = studyDateObject.startDate - ? moment(new Date(studyDateObject.startDate)) - : undefined; - - studyDateObject.endDate = studyDateObject.endDate - ? moment(new Date(studyDateObject.endDate)) - : undefined; - } - - return studyDateObject; - } } diff --git a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx index 496bba2ec..08e1c729c 100644 --- a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx +++ b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx @@ -53,16 +53,21 @@ function StudyListContainer({ history, data: studies }) { const defaultValue = defaultFilterValues[key]; const currValue = debouncedFilterValues[key]; - if ( - typeof currValue === 'object' && - currValue !== null && - JSON.stringify(currValue) !== JSON.stringify(defaultValue) - ) { - queryString[key] = JSON.stringify(currValue); + // TODO: nesting/recursion? + // TODO: modalities array + if (key === 'studyDate') { + console.log(currValue) + if (defaultValue.startDate !== currValue.startDate) { + queryString.startDate = currValue.startDate; + } + if (defaultValue.endDate !== currValue.endDate) { + queryString.endDate = currValue.endDate; + } } else if (currValue !== defaultValue) { queryString[key] = currValue; } }); + history.push({ pathname: '/', search: `?${qs.stringify(queryString, { @@ -372,8 +377,8 @@ const defaultFilterValues = { patientName: '', mrn: '', studyDate: { - startDate: null, - endDate: null, + startDate: undefined, + endDate: undefined, }, description: '', modality: [], @@ -388,9 +393,12 @@ function _getQueryFilterValues(query) { const queryFilterValues = { patientName: query.get('patientName'), mrn: query.get('mrn'), - studyDate: _tryParseDates(query.get('studyDate'), undefined), + studyDate: { + startDate: query.get('startDate'), + endDate: query.get('endDate'), + }, description: query.get('description'), - modality: _tryParseJson(query.get('modality'), undefined), + // modality: _tryParseJson(query.get('modality'), undefined), accession: query.get('accession'), sortBy: query.get('soryBy'), sortDirection: query.get('sortDirection'), @@ -416,26 +424,6 @@ function _getQueryFilterValues(query) { } return retValue; } - - function _tryParseJson(str, defaultValue) { - return str ? JSON.parse(str) : defaultValue; - } - - function _tryParseDates(str, defaultValue) { - const studyDateObject = _tryParseJson(str, defaultValue); - - if (studyDateObject) { - studyDateObject.startDate = studyDateObject.startDate - ? moment(new Date(studyDateObject.startDate)) - : undefined; - - studyDateObject.endDate = studyDateObject.endDate - ? moment(new Date(studyDateObject.endDate)) - : undefined; - } - - return studyDateObject; - } } export default StudyListContainer;