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 // This data will be saved so that the tab can be reloaded to the same state after tabs
// are switched // are switched
if (contentId) { if (contentId) {
if (!ViewerData[contentId]) {
return;
}
ViewerData[contentId].loadedSeriesData[viewportIndex] = {}; ViewerData[contentId].loadedSeriesData[viewportIndex] = {};
} }

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

@ -1,5 +1,5 @@
body body
background-color: #202020 background-color: black
.noselect .noselect
-webkit-touch-callout: none -webkit-touch-callout: none
@ -14,14 +14,13 @@ body
height: 20px height: 20px
#worklistTab #worklistTab
background-color: #202020 background-color: black
.worklistContainer .worklistContainer
background-color: #202020 background-color: black
margin: 0 auto margin: 0 auto
color: white color: white
width: 90% padding: 20px 30px
padding-top: 10px
#tabs #tabs
width: 100% width: 100%

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

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

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

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

@ -8,64 +8,98 @@ table#tblStudyList
white-space: nowrap white-space: nowrap
tr tr
th:first-child
div.sortingCell
border-right: 0.5px dashed #555555
border-left: none
th th
a.sortingCell padding: 0
div.sortingCell
display: inline-block display: inline-block
cursor: pointer
width: 100% width: 100%
min-width: 95px
margin: 0 auto margin: 0 auto
color: white color: white
text-decoration: none padding: 10px
padding-bottom: 5px font-weight: 500
background: #171717
border-left: 0.5px dashed #555555
span span
font-size: 15px font-size: 15px
float: left float: left
i i
float: right margin: 0 5px
margin-left: 5px
#studyDate &:hover, &.active
padding: 0 background: #252525
&:hover
color: #888888
// TODO: Use padding instead of hidden inputs to keep titles
// at the same height in the header.
#numImages.worklist-search
visibility: hidden
input.worklist-search input.worklist-search
height: 25px height: 34px
background-color: #888888 margin: 0 5px 20px 5px
width: 100% 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;
&:active, &:hover
color: black
background-color: #d3d3d9
&::-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-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]), ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) { ::-webkit-datetime-edit-day-field:not([aria-valuenow])
color: transparent; color: transparent
}
tbody tbody
tr tr
height: 20px height: 22px
padding: 4px padding: 5px
border: 1px solid #282828
background-color: black 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 &:hover, &:active, &.active
background-color: #009BD2 background-color: #009BD2
color: white color: white
td td
// This selector is necessary to override bootstrap's 'table' class // This selector is necessary to override bootstrap's 'table' class
border-top: 0.5px dashed #dddddd
border-bottom: 0.5px dashed #dddddd
color: white color: white
background-color: #009BD2 background-color: #009BD2
&:nth-of-type(odd)
background-color: #202020
td
white-space: nowrap