Merge pull request #1973 from OHIF/feat/ohif-318
OHIF-318: When the default sort "descending by study date" is applied, the UI should reflects the applied sorting
This commit is contained in:
commit
4af0933406
@ -45,6 +45,12 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
const debouncedFilterValues = useDebounce(filterValues, 200);
|
const debouncedFilterValues = useDebounce(filterValues, 200);
|
||||||
const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
|
const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* The default sort value keep the filters synchronized with runtime conditional sorting
|
||||||
|
* Only applied if no other sorting is specified and there are less than 101 studies
|
||||||
|
*/
|
||||||
|
let defaultSortValues = {};
|
||||||
|
|
||||||
const sortedStudies = studies
|
const sortedStudies = studies
|
||||||
// TOOD: Move sort to DataSourceWrapper?
|
// TOOD: Move sort to DataSourceWrapper?
|
||||||
// TODO: MOTIVATION, this is triggered on every render, even if list/sort does not change
|
// TODO: MOTIVATION, this is triggered on every render, even if list/sort does not change
|
||||||
@ -54,7 +60,10 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
|
|
||||||
if (noSortApplied && studies.length < 101) {
|
if (noSortApplied && studies.length < 101) {
|
||||||
const ascendingSortModifier = -1;
|
const ascendingSortModifier = -1;
|
||||||
|
defaultSortValues = {
|
||||||
|
sortBy: 'studyDate',
|
||||||
|
sortDirection: 'ascending',
|
||||||
|
};
|
||||||
return _sortStringDates(s1, s2, ascendingSortModifier);
|
return _sortStringDates(s1, s2, ascendingSortModifier);
|
||||||
} else if (noSortApplied) {
|
} else if (noSortApplied) {
|
||||||
return 0;
|
return 0;
|
||||||
@ -216,8 +225,8 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
content: patientName ? (
|
content: patientName ? (
|
||||||
<TooltipClipboard>{patientName}</TooltipClipboard>
|
<TooltipClipboard>{patientName}</TooltipClipboard>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-gray-700">(Empty)</span>
|
<span className="text-gray-700">(Empty)</span>
|
||||||
),
|
),
|
||||||
gridCol: 4,
|
gridCol: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -281,13 +290,13 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
seriesTableDataSource={
|
seriesTableDataSource={
|
||||||
seriesInStudiesMap.has(studyInstanceUid)
|
seriesInStudiesMap.has(studyInstanceUid)
|
||||||
? seriesInStudiesMap.get(studyInstanceUid).map(s => {
|
? seriesInStudiesMap.get(studyInstanceUid).map(s => {
|
||||||
return {
|
return {
|
||||||
description: s.description || '(empty)',
|
description: s.description || '(empty)',
|
||||||
seriesNumber: s.seriesNumber || '',
|
seriesNumber: s.seriesNumber || '',
|
||||||
modality: s.modality || '',
|
modality: s.modality || '',
|
||||||
instances: s.numSeriesInstances || '',
|
instances: s.numSeriesInstances || '',
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
: []
|
: []
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -304,7 +313,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
<Link
|
<Link
|
||||||
key={i}
|
key={i}
|
||||||
to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
|
to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
|
||||||
// to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
|
// to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
rounded="full"
|
rounded="full"
|
||||||
@ -312,7 +321,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
disabled={false}
|
disabled={false}
|
||||||
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
|
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
|
||||||
className={classnames('font-bold', { 'ml-2': !isFirst })}
|
className={classnames('font-bold', { 'ml-2': !isFirst })}
|
||||||
onClick={() => {}}
|
onClick={() => { }}
|
||||||
>
|
>
|
||||||
{mode.displayName}
|
{mode.displayName}
|
||||||
</Button>
|
</Button>
|
||||||
@ -353,7 +362,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
<StudyListFilter
|
<StudyListFilter
|
||||||
numOfStudies={numOfStudies}
|
numOfStudies={numOfStudies}
|
||||||
filtersMeta={filtersMeta}
|
filtersMeta={filtersMeta}
|
||||||
filterValues={filterValues}
|
filterValues={{ ...filterValues, ...defaultSortValues }}
|
||||||
onChange={setFilterValues}
|
onChange={setFilterValues}
|
||||||
clearFilters={() => setFilterValues(defaultFilterValues)}
|
clearFilters={() => setFilterValues(defaultFilterValues)}
|
||||||
isFiltering={isFiltering(filterValues, defaultFilterValues)}
|
isFiltering={isFiltering(filterValues, defaultFilterValues)}
|
||||||
@ -376,10 +385,10 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
|
|||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center justify-center pt-48">
|
<div className="flex flex-col items-center justify-center pt-48">
|
||||||
<EmptyStudies isLoading={isLoadingData} />
|
<EmptyStudies isLoading={isLoadingData} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user