TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic sorting

Browse Source
This commit is contained in:
dannyrb 2020-05-12 13:13:14 -04:00 committed by James A. Petts
parent 1ec580be5d
commit 86eef997e4
1 changed files with 176 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
View File

@ -31,8 +31,8 @@ function StudyListContainer({ history, data: studies }) {
const [filterValues, setFilterValues] = useState(
Object.assign({}, defaultFilterValues, queryFilterValues)
);
const debouncedFilterValues = useDebounce(filterValues, 500);
const { resultsPerPage, pageNumber } = filterValues;
const debouncedFilterValues = useDebounce(filterValues, 200);
const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
// ~ Rows & Studies
const [expandedRows, setExpandedRows] = useState([]);
const numOfStudies = studies.length;
@ -58,8 +58,8 @@ function StudyListContainer({ history, data: studies }) {
document.body.classList.add('bg-black');
return () => {
document.body.classList.remove('bg-black');
}
}, [])
};
}, []);
useEffect(() => {
if (!debouncedFilterValues) {
@ -162,7 +162,30 @@ function StudyListContainer({ history, data: studies }) {
return filterValues[name] !== defaultFilterValues[name];
});
};
const tableDataSource = studies.map((study, key) => {
const tableDataSource = studies
.sort((s1, s2) => {
const noSortApplied = sortBy === '' || !sortBy;
const sortModifier = sortDirection === 'descending' ? 1 : -1;
if (noSortApplied) {
return 0;
}
const s1Prop = s1[sortBy];
const s2Prop = s2[sortBy];
if (typeof s1Prop === 'string' && typeof s2Prop === 'string') {
return s1Prop.localeCompare(s2Prop) * sortModifier;
} else if (typeof s1Prop === 'number' && typeof s2Prop === 'number') {
return (s1Prop > s2Prop) * sortModifier;
} else if (!s1Prop && s2Prop) {
return -1 * sortModifier;
} else if (!s2Prop && s1Prop) {
return 1 * sortModifier;
}
return 0;
})
.map((study, key) => {
const rowKey = key + 1;
const isExpanded = expandedRows.some(k => k === rowKey);
const {
@ -197,9 +220,11 @@ function StudyListContainer({ history, data: studies }) {
row: [
{
key: 'patientName',
content: patientName
? patientName
: (<span className="text-gray-700">(Empty)</span>),
content: patientName ? (
patientName
) : (
<span className="text-gray-700">(Empty)</span>
),
title: patientName,
gridCol: 4,
},
@ -216,7 +241,11 @@ function StudyListContainer({ history, data: studies }) {
<span className="mr-4">
{moment(studyDate).format('MMM-DD-YYYY')}
</span>
{studyTime && (<span>{moment(studyTime, 'HHmmss.SSS').format('hh:mm A')}</span>)}
{studyTime && (
<span>
{moment(studyTime, 'HHmmss.SSS').format('hh:mm A')}
</span>
)}
</div>
),
title: 'time',
@ -267,7 +296,9 @@ function StudyListContainer({ history, data: studies }) {
rounded="full"
variant="contained"
className="mr-4 font-bold"
endIcon={<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />}
endIcon={
<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />
}
>
<Link to="/viewer/123">Basic Viewer</Link>
</Button>
@ -275,7 +306,9 @@ function StudyListContainer({ history, data: studies }) {
rounded="full"
variant="contained"
className="mr-4 font-bold"
endIcon={<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />}
endIcon={
<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />
}
>
<Link to="/viewer/123">Segmentation</Link>
</Button>
@ -288,7 +321,10 @@ function StudyListContainer({ history, data: studies }) {
Module 3
</Button>
<div className="ml-5 text-lg text-common-bright inline-flex items-center">
<Icon name="notificationwarning-diamond" className="mr-2 w-5 h-5" />
<Icon
name="notificationwarning-diamond"
className="mr-2 w-5 h-5"
/>
Feedback text lorem ipsum dolor sit amet
</div>
</StudyListExpandedRow>