Replacing switchToTab with routes
This commit is contained in:
1 parent
0cf4dbf13f
commit
7718d31a77
46 files changed
+358
-753
No files matched your search
@@ -1,5 +1,4 @@
|
||||
import './studylist.html';
|
||||
import './studylist.js';
|
||||
import './studylist.styl';
|
||||
|
||||
import './studylistStudy/studylistStudy.html';
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
<template name="studylist">
|
||||
<div id="studylistTabs" class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="studylistTab">
|
||||
<div class="studylistContainer">
|
||||
{{>studylistResult (clone this)}}
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="viewerTab">
|
||||
<div class="viewerContainer">
|
||||
</div>
|
||||
</div>
|
||||
<div class="study-list-wrapper">
|
||||
{{>studylistResult (clone this)}}
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* Template: StudyList
|
||||
*
|
||||
* This is the main component of the StudyList package
|
||||
*/
|
||||
|
||||
// Define the ViewerData global object
|
||||
// If there is currently any Session data for this object,
|
||||
// use this to repopulate the variable
|
||||
ViewerData = Session.get('ViewerData') || {};
|
||||
|
||||
// Define the StudyListStudies Collection
|
||||
// This is a client-side only Collection which
|
||||
// Stores the list of studies in the StudyList
|
||||
StudyListStudies = new Meteor.Collection(null);
|
||||
StudyListStudies._debugName = 'StudyListStudies';
|
||||
|
||||
Session.setDefault('activeContentId', 'studylistTab');
|
||||
|
||||
Template.studylist.onCreated(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
if (StudyList.subscriptions) {
|
||||
StudyList.subscriptions.forEach(subscriptionName => {
|
||||
instance.subscribe(subscriptionName);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Template.studylist.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
if (instance.data && instance.data.studyInstanceUid) {
|
||||
const studyInstanceUid = instance.data.studyInstanceUid;
|
||||
openNewTab(studyInstanceUid);
|
||||
} else {
|
||||
// If there is a tab set as active in the Session,
|
||||
// switch to that now.
|
||||
console.log('studylist onRendered');
|
||||
const contentId = Session.get('activeContentId');
|
||||
if (contentId !== 'studylistTab' && ViewerData && ViewerData[contentId]) {
|
||||
switchToTab(contentId);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,34 +1,13 @@
|
||||
@import "{ohif:design}/app"
|
||||
|
||||
body
|
||||
theme('background-color', '$primaryBackgroundColor')
|
||||
|
||||
#tblStudyList
|
||||
tr
|
||||
height: 20px
|
||||
|
||||
#studylistTab
|
||||
theme('background-color', '$primaryBackgroundColor')
|
||||
|
||||
.studylistContainer
|
||||
.study-list-wrapper
|
||||
theme('background-color', '$primaryBackgroundColor')
|
||||
color: white
|
||||
margin: 2px auto 0
|
||||
height: calc(100% - 91px)
|
||||
position: relative
|
||||
width: 100%
|
||||
|
||||
.tab-content
|
||||
width: 100%
|
||||
height: calc(100% - 91px)
|
||||
|
||||
.loadingTextDiv
|
||||
theme('color', '$textSecondaryColor')
|
||||
font-size: 30px
|
||||
|
||||
.tab-pane
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.viewerContainer
|
||||
height: 100%
|
||||
width: 100%
|
||||
+8
-14
@@ -1,14 +1,8 @@
|
||||
<template name="studylistResult">
|
||||
<div class="studyListToolbar clearfix">
|
||||
<div class="header pull-left">
|
||||
Study List
|
||||
</div>
|
||||
<div class="studyCount pull-right">
|
||||
{{numberOfStudies}}
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
{{>studylistToolbar}}
|
||||
</div>
|
||||
<div class="header pull-left">Study List</div>
|
||||
<div class="studyCount pull-right">{{numberOfStudies}}</div>
|
||||
<div class="pull-right">{{>studylistToolbar}}</div>
|
||||
</div>
|
||||
<div class="theadBackground">
|
||||
</div>
|
||||
@@ -74,18 +68,18 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="studyListData">
|
||||
{{#each study in studies}}
|
||||
{{>studylistStudy (clone study this)}}
|
||||
{{/each}}
|
||||
{{#each study in studies}}
|
||||
{{>studylistStudy (clone study this)}}
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
{{> studylistPagination }}
|
||||
{{>studylistPagination}}
|
||||
|
||||
{{#if session "showLoadingText"}}
|
||||
{{>loadingText}}
|
||||
{{ else }}
|
||||
{{else}}
|
||||
{{#unless numberOfStudies}}
|
||||
<div class="notFound">No matching results</div>
|
||||
{{/unless}}
|
||||
|
||||
+23
-21
@@ -1,11 +1,16 @@
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { Template } from 'meteor/templating';
|
||||
import { Session } from 'meteor/session';
|
||||
import { ReactiveVar } from 'meteor/reactive-var';
|
||||
import { ReactiveDict } from 'meteor/reactive-dict';
|
||||
import { moment } from 'meteor/momentjs:moment';
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
|
||||
Session.setDefault('showLoadingText', true);
|
||||
|
||||
Template.studylistResult.helpers({
|
||||
/**
|
||||
* Returns a sorted instance of the StudyListStudies Collection
|
||||
* by Patient name and Study Date in Ascending order.
|
||||
* Returns a ascending sorted instance of the Studies Collection by Patient name and Study Date
|
||||
*/
|
||||
studies() {
|
||||
const instance = Template.instance();
|
||||
@@ -26,7 +31,7 @@ Template.studylistResult.helpers({
|
||||
const offset = rowsPerPage * currentPage;
|
||||
const limit = offset + rowsPerPage;
|
||||
|
||||
studies = StudyListStudies.find({}, {
|
||||
studies = OHIF.studylist.collections.Studies.find({}, {
|
||||
sort: sortOption
|
||||
}).fetch();
|
||||
|
||||
@@ -42,7 +47,7 @@ Template.studylistResult.helpers({
|
||||
},
|
||||
|
||||
numberOfStudies() {
|
||||
return StudyListStudies.find().count();
|
||||
return OHIF.studylist.collections.Studies.find().count();
|
||||
},
|
||||
|
||||
sortingColumnsIcons() {
|
||||
@@ -65,9 +70,9 @@ Template.studylistResult.helpers({
|
||||
}
|
||||
});
|
||||
|
||||
var studyDateFrom;
|
||||
var studyDateTo;
|
||||
var filter;
|
||||
let studyDateFrom;
|
||||
let studyDateTo;
|
||||
let filter;
|
||||
|
||||
/**
|
||||
* Transforms an input string into a search filter for
|
||||
@@ -106,9 +111,6 @@ function replaceUndefinedColumnValue(text) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
|
||||
/**
|
||||
* Convert string to study date
|
||||
*/
|
||||
@@ -122,10 +124,10 @@ function convertStringToStudyDate(dateStr) {
|
||||
|
||||
/**
|
||||
* Runs a search for studies matching the studylist query parameters
|
||||
* Inserts the identified studies into the StudyListStudies Collection
|
||||
* Inserts the identified studies into the Studies Collection
|
||||
*/
|
||||
function search() {
|
||||
console.log('search()');
|
||||
OHIF.log.info('search()');
|
||||
|
||||
// Show loading message
|
||||
Session.set('showLoadingText', true);
|
||||
@@ -138,7 +140,7 @@ function search() {
|
||||
studyDescription: getFilter($('input#studyDescription').val()),
|
||||
studyDateFrom: studyDateFrom,
|
||||
studyDateTo: studyDateTo,
|
||||
modalitiesInStudy: $('input#modality').val() ? $('input#modality').val() : ""
|
||||
modalitiesInStudy: $('input#modality').val() ? $('input#modality').val() : ''
|
||||
};
|
||||
|
||||
// Make sure that modality has a reasonable value, since it is occasionally
|
||||
@@ -146,10 +148,10 @@ function search() {
|
||||
const modality = replaceUndefinedColumnValue($('input#modality').val());
|
||||
|
||||
// Clear all current studies
|
||||
StudyListStudies.remove({});
|
||||
OHIF.studylist.collections.Studies.remove({});
|
||||
|
||||
Meteor.call('StudyListSearch', filter, (error, studies) => {
|
||||
console.log('StudyListSearch');
|
||||
OHIF.log.info('StudyListSearch');
|
||||
if (error) {
|
||||
OHIF.log.warn(error);
|
||||
return;
|
||||
@@ -172,8 +174,8 @@ function search() {
|
||||
// Convert numberOfStudyRelatedInstance string into integer
|
||||
study.numberOfStudyRelatedInstances = !isNaN(study.numberOfStudyRelatedInstances) ? parseInt(study.numberOfStudyRelatedInstances) : undefined;
|
||||
|
||||
// Insert any matching studies into the StudyListStudies Collection
|
||||
StudyListStudies.insert(study);
|
||||
// Insert any matching studies into the Studies Collection
|
||||
OHIF.studylist.collections.Studies.insert(study);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -181,7 +183,7 @@ function search() {
|
||||
|
||||
const getRowsPerPage = () => sessionStorage.getItem('rowsPerPage');
|
||||
|
||||
// Wraps ReactiveVar equalsFunc function. Whenever ReactiveVar is
|
||||
// Wraps ReactiveVar equalsFunc function. Whenever ReactiveVar is
|
||||
// set to a new value, it will save it in the Session Storage.
|
||||
// The return is the default ReactiveVar equalsFunc if available
|
||||
// or values are === compared
|
||||
@@ -200,9 +202,10 @@ Template.studylistResult.onCreated(() => {
|
||||
// Rows per page
|
||||
// Check session storage or set 25 as default
|
||||
const cachedRowsPerPage = getRowsPerPage();
|
||||
if(!cachedRowsPerPage) {
|
||||
if (!cachedRowsPerPage) {
|
||||
setRowsPerPage(0, 25);
|
||||
}
|
||||
|
||||
const rowsPerPage = getRowsPerPage();
|
||||
instance.rowsPerPage = new ReactiveVar(parseInt(rowsPerPage, 10), setRowsPerPage);
|
||||
|
||||
@@ -214,8 +217,7 @@ Template.studylistResult.onCreated(() => {
|
||||
const sortOptionSession = Session.get('sortOption');
|
||||
if (sortOptionSession) {
|
||||
instance.sortingColumns.set(sortOptionSession);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
instance.sortingColumns.set({
|
||||
patientName: 1,
|
||||
studyDate: 1,
|
||||
|
||||
+15
-12
@@ -76,6 +76,9 @@ $bodyCellHeight = 40px
|
||||
text-align: center
|
||||
|
||||
table#tblStudyList
|
||||
tr
|
||||
height: 20px
|
||||
|
||||
thead
|
||||
white-space: nowrap
|
||||
|
||||
@@ -172,10 +175,10 @@ $bodyCellHeight = 40px
|
||||
|
||||
@media only screen and (max-width: 1362px)
|
||||
$tablePadding = 5%
|
||||
|
||||
|
||||
#studyListContainer
|
||||
padding: 0 $tablePadding
|
||||
|
||||
|
||||
table#tblStudyList
|
||||
thead,
|
||||
tbody
|
||||
@@ -190,10 +193,10 @@ $bodyCellHeight = 40px
|
||||
|
||||
@media only screen and (max-width: 1161px)
|
||||
$tablePadding = 3%
|
||||
|
||||
|
||||
#studyListContainer
|
||||
padding: 0 $tablePadding
|
||||
|
||||
|
||||
table#tblStudyList
|
||||
thead,
|
||||
tbody
|
||||
@@ -208,31 +211,31 @@ $bodyCellHeight = 40px
|
||||
|
||||
@media only screen and (max-width: 1069px)
|
||||
$tablePaddingMediumScreen = 5px
|
||||
|
||||
|
||||
.theadBackground
|
||||
height: 101px
|
||||
|
||||
.studyListToolbar
|
||||
padding: 0 $tablePaddingMediumScreen
|
||||
|
||||
|
||||
#studyListContainer
|
||||
padding: 0
|
||||
|
||||
table#tblStudyList
|
||||
thead > tr > th
|
||||
|
||||
|
||||
&:first-child
|
||||
padding-left: $tablePaddingMediumScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingMediumScreen
|
||||
|
||||
|
||||
input.worklist-search
|
||||
padding: 10px
|
||||
|
||||
|
||||
div.sortingCell
|
||||
padding: 10px 5px
|
||||
|
||||
|
||||
i
|
||||
width: auto
|
||||
|
||||
@@ -242,8 +245,8 @@ $bodyCellHeight = 40px
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingMediumScreen
|
||||
|
||||
|
||||
.worklistPagination
|
||||
.row
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
margin-right: 0
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
<template name="studylistStudy">
|
||||
<tr class="studylistStudy noselect">
|
||||
<tr class="studylistStudy noselect {{#if this.selected}}active{{/if}}">
|
||||
<td class="patientName">
|
||||
{{formatPN patientName}}
|
||||
</td>
|
||||
@@ -19,4 +19,4 @@
|
||||
{{studyDescription}}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
+60
-84
@@ -1,100 +1,82 @@
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { Template } from 'meteor/templating';
|
||||
import { Blaze } from 'meteor/blaze';
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
|
||||
// Maybe we should use regular StudyList collection?
|
||||
StudyListSelectedStudies = new Meteor.Collection(null);
|
||||
StudyListSelectedStudies._debugName = 'StudyListSelectedStudies';
|
||||
|
||||
function isStudySelected(study) {
|
||||
// Search StudyListSelectedStudies for given study and return true if found
|
||||
let count = StudyListSelectedStudies.find({
|
||||
studyInstanceUid: study.studyInstanceUid
|
||||
}).count();
|
||||
return count > 0;
|
||||
}
|
||||
|
||||
// Clear all selected studies
|
||||
function doClearStudySelections() {
|
||||
// Clear all selected studies
|
||||
StudyListSelectedStudies.remove({});
|
||||
$('tr.studylistStudy').removeClass('active');
|
||||
OHIF.studylist.collections.Studies.update({}, {
|
||||
$set: { selected: false }
|
||||
}, { multi: true });
|
||||
}
|
||||
|
||||
function doSelectRow(studyRow, data) {
|
||||
// Insert current study into selection list if it's not there already...
|
||||
if (!isStudySelected(data)) {
|
||||
StudyListSelectedStudies.insert(data);
|
||||
function doSelectRow($studyRow, data) {
|
||||
// Mark the current study as selected if it's not marked yet
|
||||
if (!data.selected) {
|
||||
const filter = { studyInstanceUid: data.studyInstanceUid };
|
||||
const modifiers = { $set: { selected: true } };
|
||||
OHIF.studylist.collections.Studies.update(filter, modifiers);
|
||||
}
|
||||
// Make sure the study row has "active" class
|
||||
studyRow.addClass('active');
|
||||
// Set this as the previously selected row, so the user can
|
||||
// use Shift to select from this point onwards
|
||||
StudyList.previouslySelected = studyRow;
|
||||
|
||||
// Set it as the previously selected row, so the user can use Shift to select from this point on
|
||||
OHIF.studylist.$lastSelectedRow = $studyRow;
|
||||
}
|
||||
|
||||
function doSelectSingleRow(studyRow, data) {
|
||||
function doSelectSingleRow($studyRow, data) {
|
||||
// Clear all selected studies
|
||||
doClearStudySelections();
|
||||
// ... And add selected row to selection list
|
||||
doSelectRow(studyRow, data);
|
||||
|
||||
// Add selected row to selection list
|
||||
doSelectRow($studyRow, data);
|
||||
}
|
||||
|
||||
function doUnselectRow(studyRow, data) {
|
||||
// Find the current studyInstanceUid in the stored list and remove it
|
||||
StudyListSelectedStudies.remove({
|
||||
studyInstanceUid: data.studyInstanceUid
|
||||
});
|
||||
studyRow.removeClass('active');
|
||||
function doUnselectRow($studyRow, data) {
|
||||
// Find the current studyInstanceUid in the stored list and mark as unselected
|
||||
const filter = { studyInstanceUid: data.studyInstanceUid };
|
||||
const modifiers = { $set: { selected: false } };
|
||||
OHIF.studylist.collections.Studies.update(filter, modifiers);
|
||||
}
|
||||
|
||||
function handleShiftClick($studyRow, data) {
|
||||
//OHIF.log.info('shiftKey');
|
||||
|
||||
let study, previous = StudyList.previouslySelected ? $(StudyList.previouslySelected) : null;
|
||||
if (previous && previous.length > 0) {
|
||||
study = Blaze.getData(previous.get(0));
|
||||
if (!isStudySelected(study)) {
|
||||
previous = void 0; // undefined
|
||||
StudyList.previouslySelected = previous;
|
||||
let study;
|
||||
let $previousRow = OHIF.studylist.$lastSelectedRow;
|
||||
if ($previousRow && $previousRow.length > 0) {
|
||||
study = Blaze.getData($previousRow.get(0));
|
||||
if (!study.selected) {
|
||||
$previousRow = $(); // undefined
|
||||
OHIF.studylist.$lastSelectedRow = $previousRow;
|
||||
}
|
||||
}
|
||||
|
||||
// Select all rows in between these two rows
|
||||
if (previous) {
|
||||
if ($previousRow.length) {
|
||||
let $rowsInBetween;
|
||||
if (previous.index() < $studyRow.index()) {
|
||||
if ($previousRow.index() < $studyRow.index()) {
|
||||
// The previously selected row is above (lower index) the
|
||||
// currently selected row.
|
||||
|
||||
// Fill in the rows upwards from the previously selected row
|
||||
$rowsInBetween = previous.nextAll('tr');
|
||||
} else if (previous.index() > $studyRow.index()) {
|
||||
$rowsInBetween = $previousRow.nextAll('tr');
|
||||
} else if ($previousRow.index() > $studyRow.index()) {
|
||||
// The previously selected row is below the currently
|
||||
// selected row.
|
||||
|
||||
// Fill in the rows upwards from the previously selected row
|
||||
$rowsInBetween = previous.prevAll('tr');
|
||||
$rowsInBetween = $previousRow.prevAll('tr');
|
||||
} else {
|
||||
// nothing to do since previous.index() === $studyRow.index()
|
||||
// nothing to do since $previousRow.index() === $studyRow.index()
|
||||
// the user is shift-clicking the same row...
|
||||
return;
|
||||
}
|
||||
|
||||
// Loop through the rows in between current and previous selected studies
|
||||
$rowsInBetween.forEach(row => {
|
||||
$rowsInBetween.each((index, row) => {
|
||||
const $row = $(row);
|
||||
|
||||
if ($row.hasClass('active')) {
|
||||
// If we find one that is already selected, do nothing
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the relevant studyInstanceUid
|
||||
let studyInstanceUid = $row.attr('studyInstanceUid');
|
||||
|
||||
// Retrieve the data context through Blaze
|
||||
let data = Blaze.getData(this);
|
||||
const data = Blaze.getData(row);
|
||||
|
||||
// If we find one that is already selected, do nothing
|
||||
if (data.selected) return;
|
||||
|
||||
// Set the current study as selected
|
||||
doSelectRow($row, data);
|
||||
@@ -108,37 +90,31 @@ function handleShiftClick($studyRow, data) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleCtrlClick(studyRow, data) {
|
||||
//OHIF.log.info('ctrlKey');
|
||||
if (isStudySelected(data)) {
|
||||
doUnselectRow(studyRow, data);
|
||||
} else {
|
||||
doSelectRow(studyRow, data);
|
||||
OHIF.log.info('StudyList PreviouslySelected set: ' + studyRow.index());
|
||||
}
|
||||
function handleCtrlClick($studyRow, data) {
|
||||
const handler = data.selected ? doUnselectRow : doSelectRow;
|
||||
handler($studyRow, data);
|
||||
}
|
||||
|
||||
Template.studylistStudy.onRendered(function() {
|
||||
let instance = this,
|
||||
data = instance.data,
|
||||
row = instance.$('tr.studylistStudy').first();
|
||||
Template.studylistStudy.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
const data = instance.data;
|
||||
const $row = instance.$('tr.studylistStudy').first();
|
||||
|
||||
// Enable HammerJS to allow touch support
|
||||
let mc = new Hammer.Manager(row.get(0)),
|
||||
doubleTapRecognizer = new Hammer.Tap({
|
||||
event: 'doubletap',
|
||||
taps: 2,
|
||||
interval: 500,
|
||||
threshold: 30,
|
||||
posThreshold: 30
|
||||
});
|
||||
const mc = new Hammer.Manager($row.get(0));
|
||||
const doubleTapRecognizer = new Hammer.Tap({
|
||||
event: 'doubletap',
|
||||
taps: 2,
|
||||
interval: 500,
|
||||
threshold: 30,
|
||||
posThreshold: 30
|
||||
});
|
||||
mc.add(doubleTapRecognizer);
|
||||
|
||||
// Check if current row has been previously selected
|
||||
if (isStudySelected(data)) {
|
||||
doSelectRow(row, data);
|
||||
if (data.selected) {
|
||||
doSelectRow($row, data);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Template.studylistStudy.events({
|
||||
@@ -164,7 +140,7 @@ Template.studylistStudy.events({
|
||||
return;
|
||||
}
|
||||
|
||||
const middleClickOnStudy = StudyList.callbacks.middleClickOnStudy;
|
||||
const middleClickOnStudy = OHIF.studylist.callbacks.middleClickOnStudy;
|
||||
if (middleClickOnStudy && typeof middleClickOnStudy === 'function') {
|
||||
middleClickOnStudy(instance.data);
|
||||
}
|
||||
@@ -175,7 +151,7 @@ Template.studylistStudy.events({
|
||||
return;
|
||||
}
|
||||
|
||||
const dblClickOnStudy = StudyList.callbacks.dblClickOnStudy;
|
||||
const dblClickOnStudy = OHIF.studylist.callbacks.dblClickOnStudy;
|
||||
|
||||
if (dblClickOnStudy && typeof dblClickOnStudy === 'function') {
|
||||
dblClickOnStudy(instance.data);
|
||||
@@ -185,7 +161,7 @@ Template.studylistStudy.events({
|
||||
'contextmenu tr.studylistStudy, press tr.studylistStudy'(event, instance) {
|
||||
const $studyRow = $(event.currentTarget);
|
||||
|
||||
if (!isStudySelected(instance.data)) {
|
||||
if (!instance.data.selected) {
|
||||
doSelectSingleRow($studyRow, instance.data);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user