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

Completed inline filtering - moved loading indicator into tbody to avoid reloading the header (with filter contents)

Browse Source
This commit is contained in:
Rob Lewis 2015-11-18 16:04:34 -05:00
parent 73a95b6e22
commit aec9ec8f8b
6 changed files with 8 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/worklist/components/worklist.styl
View File

@ -13,8 +13,6 @@ input.worklist-search
height: 25px height: 25px
background-color: #888888 background-color: #888888
// style="background-color: #444444; border-color:#444444;cursor:default;">
#tblStudyList #tblStudyList
tr tr
height: 45px height: 45px

11
Packages/worklist/components/worklistResult/worklistResult.html
View File

@ -1,5 +1,4 @@
<template name="worklistResult"> <template name="worklistResult">
{{ #if studies.count }}
<table id="tblStudyList" class="table table-striped noselect"> <table id="tblStudyList" class="table table-striped noselect">
<thead> <thead>
<tr> <tr>
@ -40,7 +39,7 @@
Modality Modality
</div> </div>
<div class="modality-input"> <div class="modality-input">
<input type="search" class="form-control worklist-search" id="modality"> <input type="search" class="form-control worklist-search" id="modality" style="visibility: hidden; ">
</div> </div>
</th> </th>
<th> <th>
@ -48,7 +47,7 @@
StudyDescription StudyDescription
</div> </div>
<div class="study-description-input"> <div class="study-description-input">
<input type="search" class="form-control worklist-search" id="studyDescription"> <input type="search" class="form-control worklist-search" id="studyDescription" style="visibility: hidden; ">
</div> </div>
</th> </th>
<th> <th>
@ -56,7 +55,7 @@
# Images # Images
</div> </div>
<div class="worklist-input"> <div class="worklist-input">
<input type="search" class="form-control worklist-search" id="numberOfImages"> <input type="search" class="form-control worklist-search" id="numberOfImages" style="visibility: hidden; ">
</div> </div>
</th> </th>
</tr> </tr>
@ -67,7 +66,7 @@
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
{{ else }} {{ #unless studies.count }}
{{ >loadingText }} {{ >loadingText }}
{{ /if }} {{ /unless }}
</template> </template>

5
Packages/worklist/components/worklistResult/worklistResult.js
View File

@ -19,6 +19,7 @@ var studyDateFrom;
var studyDateTo; var studyDateTo;
var checkFrom = false; var checkFrom = false;
var checkTo = false; var checkTo = false;
var filter;
/** /**
* Transforms an input string into a search filter for * Transforms an input string into a search filter for
@ -72,7 +73,7 @@ function convertStringToStudyDate (dateStr) {
*/ */
function search() { function search() {
// Create the filters to be used for the Worklist Search // Create the filters to be used for the Worklist Search
var filter = { filter = {
patientName: getFilter($('#patientName').val()), patientName: getFilter($('#patientName').val()),
patientId: getFilter($('#patientId').val()), patientId: getFilter($('#patientId').val()),
accessionNumber: getFilter($('#patientAccessionNumber').val()) accessionNumber: getFilter($('#patientAccessionNumber').val())
@ -103,7 +104,6 @@ function search() {
} }
}); });
}); });
} }
Template.worklistResult.events({ Template.worklistResult.events({
@ -112,5 +112,6 @@ Template.worklistResult.events({
}, },
'onsearch': function(event) { 'onsearch': function(event) {
search(); search();
} }
}); });

94
Packages/worklist/components/worklistSearch/worklistSearch.html
View File

@ -1,94 +0,0 @@
<template name="worklistSearch">
<!--Search Panel-->
<div id="worklistSearchPanel" class="panel panel-default">
<div class="panel-heading" id="search-panel-head">
<h4 class="panel-title">
<a data-toggle="collapse" href="#searchPanel">Search</a>
</h4>
</div>
<div id="searchPanel" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding: 10px;">
<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="patientId">Patient ID</label>
<input type="text" class="form-control" id="patientId" placeholder="Patient ID">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="patientName">Name</label>
<input type="text" class="form-control" id="patientName" placeholder="Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="patientAccessionNumber">Accession #</label>
<input type="text" class="form-control" id="patientAccessionNumber" placeholder="Accession #">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="studyDescription">Study Description</label>
<input type="text" class="form-control" id="studyDescription" placeholder="Study Description">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-10">
<!--Add calendar ui-->
<div class="form-group">
<label for="">Study Date(from)</label>
<p><input type="checkbox" id="checkFrom"><input id="studyDateFrom" type="date" class="form-control" style="padding-left: 30px;"></p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="">Study Date(to)</label>
<p><input type="checkbox" id="checkTo"><input id="studyDateTo" type="date" class="form-control" style="padding-left:30px;"></p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="referringPhysician">Referring Physician</label>
<input type="text" class="form-control" id="referringPhysician" placeholder="Referring Physician">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="modality">Modality</label>
<input type="text" class="form-control" id="modality" placeholder="Modality">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="row" style="margin-top: 25px;margin-bottom: 25px;">
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnSearch">Search</button>
</div>
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnToday">Today</button>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnClear">Clear</button>
</div>
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnLastSevenDays">Last 7 Days</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Search panel ends-->
</template>

136
Packages/worklist/components/worklistSearch/worklistSearch.js
View File

@ -1,136 +0,0 @@
// Retrieve all studies
search();
var studyDateFrom;
var studyDateTo;
var checkFrom = false;
var checkTo = false;
/**
* Transforms an input string into a search filter for
* the Worklist Search call
*
* @param filter The input string to be searched for
* @returns {*}
*/
function getFilter(filter) {
if(filter && filter.length && filter.substr(filter.length - 1) !== '*') {
filter += '*';
}
return filter;
}
/**
* Search for a value in a string
*/
function isIndexOf(mainVal, searchVal) {
if (mainVal === undefined || mainVal === '' || mainVal.indexOf(searchVal) > -1){
return true;
}
return false;
}
/**
* Replace object if undefined
*/
function replaceUndefinedColumnValue (text) {
if (text == undefined || text === "undefined") {
return "";
} else {
return text;
}
}
/**
* Convert string to study date
*/
function convertStringToStudyDate (dateStr) {
var y = dateStr.substring(0,4);
var m = dateStr.substring(4,6);
var d = dateStr.substring(6,8);
var newDateStr = y+"/"+m+"/"+d;
return new Date(newDateStr);
}
/**
* Runs a search for studies matching the worklist query parameters
* Inserts the identified studies into the Studies Collection
*/
function search() {
// Create the filters to be used for the Worklist Search
var filter = {
patientName: getFilter($('#patientName').val()),
patientId: getFilter($('#patientId').val()),
accessionNumber: getFilter($('#patientAccessionNumber').val())
};
// Make sure that modality has a reasonable value, since it is occasionally
// returned as 'undefined'
var modality = replaceUndefinedColumnValue($('#modality').val());
// Clear all current studies
WorklistStudies.remove({});
Meteor.call('WorklistSearch', filter, function(error, studies) {
if (!studies) {
return;
}
// Loop through all identified studies
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) || !checkFrom) &&
(convertStringToStudyDate(study.studyDate) <= new Date(studyDateTo).setHours(0,0,0,0) || !checkTo)) {
// Insert any matching studies into the Studies Collection
WorklistStudies.insert(study);
}
});
});
}
Template.worklistSearch.events({
/**
* Searches for studies given the current state of the form controls
*/
'click button#btnSearch' :function(event) {
studyDateFrom = $('#studyDateFrom').val();
studyDateTo = $('#studyDateTo').val();
checkFrom = $('#checkFrom').is(':checked');
checkTo = $('#checkTo').is(':checked');
search();
},
/**
* Searches for studies with a study date equal to Today
*/
'click button#btnToday' :function(event) {
studyDateTo = new Date();
studyDateFrom = studyDateTo;
checkFrom = true;
checkTo = true;
search();
},
/**
* Searches for studies in the Last 7 Days
*/
'click button#btnLastSevenDays' :function() {
studyDateTo = new Date();
studyDateFrom = new Date();
studyDateFrom.setDate(studyDateFrom.getDate()-7);
checkFrom = true;
checkTo = true;
search();
},
/**
* Clears all input data in the study search panel
*/
'click button#btnClear' :function(event) {
$("#searchPanel .form-control").val("");
$('#checkFrom').prop('checked', false);
$('#checkTo').prop('checked', false);
}
});

25
Packages/worklist/components/worklistSearch/worklistSearch.styl
View File

@ -1,25 +0,0 @@
/***********************************************/
/* Search Panel */
/***********************************************/
#worklistSearchPanel
margin: 20px 0
color: #888888
background-color: #202020
#search-panel-head
background-color: #337ab7
color: white
font-weight: 500
font-size: 20px
line-height: 20px
box-shadow: 2px 2px 2px #888888
#btnSearch, #btnToday, #btnClear, #btnLastSevenDays
width: 100%
#checkFrom, #checkTo
width: 20px
height: 20px
position: absolute
left: 20px
bottom: 22px