othmane/ohif-viewer
1
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( const [filterValues, setFilterValues] = useState(
Object.assign({}, defaultFilterValues, queryFilterValues) Object.assign({}, defaultFilterValues, queryFilterValues)
); );
const debouncedFilterValues = useDebounce(filterValues, 500); const debouncedFilterValues = useDebounce(filterValues, 200);
const { resultsPerPage, pageNumber } = filterValues; const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
// ~ Rows & Studies // ~ Rows & Studies
const [expandedRows, setExpandedRows] = useState([]); const [expandedRows, setExpandedRows] = useState([]);
const numOfStudies = studies.length; const numOfStudies = studies.length;
@ -58,8 +58,8 @@ function StudyListContainer({ history, data: studies }) {
document.body.classList.add('bg-black'); document.body.classList.add('bg-black');
return () => { return () => {
document.body.classList.remove('bg-black'); document.body.classList.remove('bg-black');
} };
}, []) }, []);
useEffect(() => { useEffect(() => {
if (!debouncedFilterValues) { if (!debouncedFilterValues) {
@ -162,7 +162,30 @@ function StudyListContainer({ history, data: studies }) {
return filterValues[name] !== defaultFilterValues[name]; 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 rowKey = key + 1;
const isExpanded = expandedRows.some(k => k === rowKey); const isExpanded = expandedRows.some(k => k === rowKey);
const { const {
@ -197,9 +220,11 @@ function StudyListContainer({ history, data: studies }) {
row: [ row: [
{ {
key: 'patientName', key: 'patientName',
content: patientName content: patientName ? (
? patientName patientName
: (<span className="text-gray-700">(Empty)</span>), ) : (
<span className="text-gray-700">(Empty)</span>
),
title: patientName, title: patientName,
gridCol: 4, gridCol: 4,
}, },
@ -216,7 +241,11 @@ function StudyListContainer({ history, data: studies }) {
<span className="mr-4"> <span className="mr-4">
{moment(studyDate).format('MMM-DD-YYYY')} {moment(studyDate).format('MMM-DD-YYYY')}
</span> </span>
{studyTime && (<span>{moment(studyTime, 'HHmmss.SSS').format('hh:mm A')}</span>)} {studyTime && (
<span>
{moment(studyTime, 'HHmmss.SSS').format('hh:mm A')}
</span>
)}
</div> </div>
), ),
title: 'time', title: 'time',
@ -267,7 +296,9 @@ function StudyListContainer({ history, data: studies }) {
rounded="full" rounded="full"
variant="contained" variant="contained"
className="mr-4 font-bold" 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> <Link to="/viewer/123">Basic Viewer</Link>
</Button> </Button>
@ -275,7 +306,9 @@ function StudyListContainer({ history, data: studies }) {
rounded="full" rounded="full"
variant="contained" variant="contained"
className="mr-4 font-bold" 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> <Link to="/viewer/123">Segmentation</Link>
</Button> </Button>
@ -288,7 +321,10 @@ function StudyListContainer({ history, data: studies }) {
Module 3 Module 3
</Button> </Button>
<div className="ml-5 text-lg text-common-bright inline-flex items-center"> <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 Feedback text lorem ipsum dolor sit amet
</div> </div>
</StudyListExpandedRow> </StudyListExpandedRow>