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

Cleaned up the worklist design a bit

Browse Source
This commit is contained in:
Erik Ziegler 2016-04-09 22:00:05 +02:00
parent 48a626173c
commit 1a48b6040a
5 changed files with 180 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
View File

@ -30,6 +30,10 @@ function loadSeriesIntoViewport(data, templateData) {
// This data will be saved so that the tab can be reloaded to the same state after tabs
// are switched
if (contentId) {
if (!ViewerData[contentId]) {
return;
}
ViewerData[contentId].loadedSeriesData[viewportIndex] = {};
}

11
Packages/worklist/client/components/worklist.styl
View File

@ -1,5 +1,5 @@
body
background-color: #202020
background-color: black
.noselect
-webkit-touch-callout: none
@ -14,14 +14,13 @@ body
height: 20px
#worklistTab
background-color: #202020
background-color: black
.worklistContainer
background-color: #202020
background-color: black
margin: 0 auto
color: white
width: 90%
padding-top: 10px
padding: 20px 30px
#tabs
width: 100%
@ -38,7 +37,7 @@ body
background-color: #202020
border-color: #424242
float: left
line-height:30px
line-height: 30px
&:hover
color: black

129
Packages/worklist/client/components/worklistResult/worklistResult.html
View File

@ -1,69 +1,86 @@
<template name="worklistResult">
{{>worklistToolbar}}
<table id="tblStudyList" class="worklistResult table table-striped noselect">
<table id="tblStudyList" class="worklistResult table noselect">
<thead>
<tr>
<th>
<a id="_patientName" class="sortingCell" href="#">
<span>Patient Name</span>
<i class="{{sortingColumnsIcons.patientName}}"></i>
</a>
<input type="text" class="form-control worklist-search" id="patientName">
</th>
<th>
<a id="_patientId" class="sortingCell" href="#">
<span>Patient ID</span>
<i class="{{sortingColumnsIcons.patientId}}"></i>
</a>
<input type="text" class="form-control worklist-search" id="patientId">
</th>
{{#unless isTouchDevice}}
<tr>
<th>
<a id="_accessionNumber" class="sortingCell" href="#">
<input type="text"
class="form-control worklist-search"
id="patientName"
placeholder="Search Patient Name">
<div id="_patientName" class="sortingCell">
<span>Patient Name</span>
<i class="{{sortingColumnsIcons.patientName}}">&nbsp;</i>
</div>
</th>
<th>
<input type="text"
class="form-control worklist-search"
id="patientId"
placeholder="Search Patient ID">
<div id="_patientId" class="sortingCell">
<span>Patient ID</span>
<i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
</div>
</th>
{{#unless isTouchDevice}}
<th>
<input type="text"
class="form-control worklist-search"
id="accessionNumber"
placeholder="Search Accession #">
<div id="_accessionNumber" class="sortingCell">
<span>Accession #</span>
<i class="{{sortingColumnsIcons.accessionNumber}}"></i>
</a>
<input type="text" class="form-control worklist-search" id="accessionNumber">
<i class="{{sortingColumnsIcons.accessionNumber}}">&nbsp;</i>
</div>
</th>
{{/unless}}
{{/unless}}
<th>
<a id="_studyDate" class="sortingCell" href="#">
<span>Study Date</span>
<i class="{{sortingColumnsIcons.studyDate}}"></i>
</a>
<input type="text" class="form-control worklist-search" name="daterange" id="studyDate">
</th>
{{#unless isTouchDevice}}
<th>
<a id="_modalities" class="sortingCell" href="#">
<span>Modality</span>
<i class="{{sortingColumnsIcons.modalities}}"></i>
</a>
<input type="text" class="form-control worklist-search" id="modality">
<input type="text"
class="form-control worklist-search"
name="daterange"
id="studyDate"
placeholder="Search Study Date">
<div id="_studyDate" class="sortingCell">
<span>Study Date</span>
<i class="{{sortingColumnsIcons.studyDate}}">&nbsp;</i>
</div>
</th>
{{/unless}}
<th>
<a id="_studyDescription" class="sortingCell" href="#">
<span>Study Description</span>
<i class="{{sortingColumnsIcons.studyDescription}}"></i>
</a>
<input type="text" class="form-control worklist-search" id="studyDescription">
</th>
{{#unless isTouchDevice}}
<th>
<a id="_numberOfStudyRelatedInstances" class="sortingCell" href="#">
<span># Images</span>
<i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}"></i>
</a>
<input type="text" class="form-control worklist-search" id="numImages">
</th>
{{/unless}}
</tr>
{{#unless isTouchDevice}}
<th>
<input type="text"
class="form-control worklist-search"
id="modality"
placeholder="Search Modality">
<div id="_modalities" class="sortingCell">
<span>Modality</span>
<i class="{{sortingColumnsIcons.modalities}}">&nbsp;</i>
</div>
</th>
{{/unless}}
<th>
<input type="text"
class="form-control worklist-search"
id="studyDescription"
placeholder="Search Study Description">
<div id="_studyDescription" class="sortingCell">
<span>Study Description</span>
<i class="{{sortingColumnsIcons.studyDescription}}">&nbsp;</i>
</div>
</th>
{{#unless isTouchDevice}}
<th>
<div id="_numberOfStudyRelatedInstances" class="sortingCell">
<span># Images</span>
<i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
</div>
</th>
{{/unless}}
</tr>
</thead>
<tbody id="studyListData">
{{#each studies}}

56
Packages/worklist/client/components/worklistResult/worklistResult.js
View File

@ -1,4 +1,7 @@
Session.setDefault("searchResults", {showLoadingText: true, showNotFoundMessage: false});
Session.setDefault('searchResults', {
showLoadingText: true,
showNotFoundMessage: false
});
Template.worklistResult.helpers({
/**
@ -22,17 +25,26 @@ Template.worklistResult.helpers({
},
showLoadingText: function() {
return Session.get("searchResults").showLoadingText;
return Session.get('searchResults').showLoadingText;
},
showNotFoundMessage: function() {
return Session.get("searchResults").showNotFoundMessage;
return Session.get('searchResults').showNotFoundMessage;
},
sortingColumnsIcons: function() {
var sortingColumnsIcons = {};
Object.keys(Template.instance().sortingColumns.keys).forEach(function(key) {
sortingColumnsIcons[key] = Template.instance().sortingColumns.get(key) === 1 ? "fa fa-sort-up": (Template.instance().sortingColumns.get(key) === -1 ? "fa fa-sort-down":"");
var value = Template.instance().sortingColumns.get(key);
if (value === 1) {
sortingColumnsIcons[key] = 'fa fa-fw fa-sort-up';
} else if (value === -1) {
sortingColumnsIcons[key] = 'fa fa-fw fa-sort-down';
} else {
// fa-fw is blank
sortingColumnsIcons[key] = 'fa fa-fw';
}
});
return sortingColumnsIcons;
}
@ -102,10 +114,10 @@ function convertStringToStudyDate(dateStr) {
*/
function search() {
// Show loading message
var searchResults = Session.get("searchResults");
var searchResults = Session.get('searchResults');
searchResults.showLoadingText = true;
searchResults.showNotFoundMessage = false;
Session.set("searchResults", searchResults);
Session.set('searchResults', searchResults);
// Create the filters to be used for the Worklist Search
filter = {
@ -130,7 +142,7 @@ function search() {
// Hide loading text
searchResults.showLoadingText = false;
Session.set("searchResults", searchResults);
Session.set('searchResults', searchResults);
if (!studies) {
return;
@ -140,8 +152,8 @@ function search() {
studies.forEach(function(study) {
// Search the rest of the parameters that aren't done via the server call
if (isIndexOf(study.modalities, modality) &&
(new Date(studyDateFrom).setHours(0, 0, 0, 0) <= convertStringToStudyDate(study.studyDate) || !studyDateFrom || studyDateFrom === "") &&
(convertStringToStudyDate(study.studyDate) <= new Date(studyDateTo).setHours(0, 0, 0, 0) || !studyDateTo || studyDateTo === "")) {
(new Date(studyDateFrom).setHours(0, 0, 0, 0) <= convertStringToStudyDate(study.studyDate) || !studyDateFrom || studyDateFrom === '') &&
(convertStringToStudyDate(study.studyDate) <= new Date(studyDateTo).setHours(0, 0, 0, 0) || !studyDateTo || studyDateTo === '')) {
// Convert numberOfStudyRelatedInstance string into integer
study.numberOfStudyRelatedInstances = parseInt(study.numberOfStudyRelatedInstances);
@ -154,7 +166,7 @@ function search() {
if (WorklistStudies.find().count() === 0) {
// Show notFound text
searchResults.showNotFoundMessage = true;
Session.set("searchResults", searchResults);
Session.set('searchResults', searchResults);
}
});
@ -170,6 +182,11 @@ Template.worklistResult.onCreated(function() {
} else {
this.sortingColumns.set('patientName', 1);
this.sortingColumns.set('studyDate', 1);
this.sortingColumns.set('patientId', 0);
this.sortingColumns.set('accessionNumber', 0);
this.sortingColumns.set('studyDescription', 0);
this.sortingColumns.set('modality', 0);
this.sortingColumns.set('numberOfStudyRelatedInstances', 0);
}
var self = this;
@ -182,9 +199,9 @@ Template.worklistResult.onCreated(function() {
Template.worklistResult.onRendered(function() {
// Initialize daterangepicker
$("#studyDate").daterangepicker({
$('#studyDate').daterangepicker({
ranges: {
'Today': [moment(), moment()],
Today: [moment(), moment()],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()]
}
@ -208,27 +225,25 @@ Template.worklistResult.events({
'onsearch input': function() {
search();
},
'change #studyDate': function(e, template) {
var dateRange = $(e.currentTarget).val();
// Remove all space chars
dateRange = dateRange.replace(/ /g,'');
dateRange = dateRange.replace(/ /g, '');
// Split dateRange into subdates
var dates = dateRange.split("-");
var dates = dateRange.split('-');
studyDateFrom = dates[0];
studyDateTo = dates[1];
if (dateRange !== "") {
if (dateRange !== '') {
search();
}
},
'click a.sortingCell': function(e, template) {
'click div.sortingCell': function(e, template) {
var elementId = e.currentTarget.id;
// Remove _ from id
var columnName = elementId.replace("_", '');
var columnName = elementId.replace('_', '');
var sortOption= {};
var sortOption = {};
resetSortingColumns(template, columnName);
var columnObject = template.sortingColumns.get(columnName);
if (columnObject) {
@ -242,6 +257,5 @@ Template.worklistResult.events({
template.sortOption.set(sortOption);
Session.set('sortOption', sortOption);
}
});

92
Packages/worklist/client/components/worklistResult/worklistResult.styl
View File

@ -8,64 +8,98 @@ table#tblStudyList
white-space: nowrap
tr
th:first-child
div.sortingCell
border-right: 0.5px dashed #555555
border-left: none
th
a.sortingCell
padding: 0
div.sortingCell
display: inline-block
cursor: pointer
width: 100%
min-width: 95px
margin: 0 auto
color: white
text-decoration: none
padding-bottom: 5px
padding: 10px
font-weight: 500
background: #171717
border-left: 0.5px dashed #555555
span
font-size: 15px
float: left
i
float: right
margin-left: 5px
margin: 0 5px
#studyDate
padding: 0
&:hover, &.active
background: #252525
&:hover
color: #888888
input.worklist-search
height: 34px
margin: 0 5px 20px 5px
cursor: pointer
padding: 10px
border: none
background-color: #707070
color: #434343
font-size: 10pt
font-weight: normal
width: calc(100% - 10px)
box-sizing: border-box
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
// TODO: Use padding instead of hidden inputs to keep titles
// at the same height in the header.
#numImages.worklist-search
visibility: hidden
&:active, &:hover
color: black
background-color: #d3d3d9
input.worklist-search
height: 25px
background-color: #888888
width: 100%
&::-webkit-input-placeholder /* WebKit, Blink, Edge */
color: #434343
&:-moz-placeholder /* Mozilla Firefox 4 to 18 */
color: #434343
opacity: 1
&::-moz-placeholder /* Mozilla Firefox 19+ */
color: #434343
opacity: 1
&:-ms-input-placeholder /* Internet Explorer 10-11 */
color: #434343
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
color: transparent;
}
::-webkit-datetime-edit-day-field:not([aria-valuenow])
color: transparent
tbody
tr
height: 20px
padding: 4px
border: 1px solid #282828
height: 22px
padding: 5px
background-color: black
td
color: #ffffff
border-top: 0.5px dashed #555555
white-space: nowrap
-webkit-transition: all 0.1s ease
transition: all 0.1s ease
&:hover, &:active, &.active
background-color: #009BD2
color: white
td
// This selector is necessary to override bootstrap's 'table' class
border-top: 0.5px dashed #dddddd
border-bottom: 0.5px dashed #dddddd
color: white
background-color: #009BD2
&:nth-of-type(odd)
background-color: #202020
td
white-space: nowrap