From 1a48b6040adf945115a4c13bdd486d6779f0e1b0 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.ziegler@ulg.ac.be>
Date: Sat, 9 Apr 2016 22:00:05 +0200
Subject: [PATCH] Cleaned up the worklist design a bit

---
 .../imageViewerViewport.js                    |   4 +
 .../worklist/client/components/worklist.styl  |  11 +-
 .../worklistResult/worklistResult.html        | 129 ++++++++++--------
 .../worklistResult/worklistResult.js          |  56 +++++---
 .../worklistResult/worklistResult.styl        |  92 +++++++++----
 5 files changed, 180 insertions(+), 112 deletions(-)

diff --git a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
index 392913bd3..95ea848d4 100644
--- a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
+++ b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
@@ -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] = {};
     }
 
diff --git a/Packages/worklist/client/components/worklist.styl b/Packages/worklist/client/components/worklist.styl
index 0253870fb..47005eaa4 100644
--- a/Packages/worklist/client/components/worklist.styl
+++ b/Packages/worklist/client/components/worklist.styl
@@ -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
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.html b/Packages/worklist/client/components/worklistResult/worklistResult.html
index 7c72d2394..fa25254d5 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.html
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.html
@@ -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}}
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.js b/Packages/worklist/client/components/worklistResult/worklistResult.js
index 873b83ac7..1d2994c1d 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.js
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.js
@@ -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);
     }
-
 });
 
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl
index a438012de..fe34ecead 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.styl
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl
@@ -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
\ No newline at end of file