Merge branch 'master' of https://github.com/ImagingDataCommons/IDC-WebApp into idc-test

Author: s-paquette

static/css/style.css

@@ -424,6 +424,7 @@ nav {
 
 .dataTables_filter input {
   margin-left: 10px;
+  border: 1px solid black;
 }
 
 .dataTables_controls {
@@ -4472,14 +4473,25 @@ d-topics-list iframe {
 }
 
 .filter-display-panel .panel-body, .shopping-cart-panel .panel-body {
-  padding-top: 0px
+  padding-top: 0px;
 }
 
 .filter-display-panel .panel-heading, .shopping-cart-panel .panel-heading,
 #projects_panel_container .panel-heading {
-  padding-bottom: 0px
+  padding-bottom: 0px;
 }
 
 .filter-display-panel .panel-heading, .shopping-cart-panel .panel-heading {
-  padding-top: 0px
+  padding-top: 0px;
+}
+
+.dataTables_filter button.clear {
+  display: inline-block;
+  margin-left: -25px;
+  background-color: transparent;
+  border: 0;
+}
+
+.dataTables_filter button.clear:hover {
+  color: #a4470c;
 }

static/img/circle-x.svg

@@ -749,8 +749,15 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
             );
         });
         $('#cases_tab').find('tbody').attr('id','cases_table');
-        $('#cases_panel').find('.dataTables_controls').find('.dataTables_length').after('<div class="dataTables_goto_page"><label>Page </label><input class="goto-page-number" type="number"><button onclick="changePage(\'cases_tab_wrapper\')">Go</button></div>');
-        $('#cases_panel').find('.dataTables_controls').find('.dataTables_paginate').after('<div class="dataTables_filter"><strong>Find by Case ID:</strong><input class="caseID_inp" type="text-box" value="'+caseID+'" maxlength="256"><button onclick="filterTable(\'cases_panel\',\'caseID\')">Go</button></div>');
+        $('#cases_panel').find('.dataTables_controls').find('.dataTables_length').after(
+            '<div class="dataTables_goto_page"><label>Page </label><input class="goto-page-number" '
+            + 'type="number"></div>'
+        );
+        $('#cases_panel').find('.dataTables_controls').find('.dataTables_paginate').after(
+            '<div class="dataTables_filter"><strong>Find by Case ID:</strong><input class="caseID_inp '
+            + 'table-search-box" data-search-type="case" type="text-box" value="'+caseID+'" maxlength="256"><button '
+            + 'class="clear"><i class="fa fa-solid fa-circle-xmark"></i></button></div>'
+        );
         return updatePromise;
     }
 
@@ -1107,7 +1114,7 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
 
         $('#studies_tab').children('tbody').attr('id','studies_table');
         $('#studies_tab_wrapper').find('.dataTables_controls').find('.dataTables_length').after('<div class="dataTables_goto_page"><label>Page </label><input class="goto-page-number" type="number"><button onclick="changePage(\'studies_tab_wrapper\')">Go</button></div>');
-        $('#studies_tab_wrapper').find('.dataTables_controls').find('.dataTables_paginate').after('<div class="dataTables_filter"><strong>Find by Study Instance UID:</strong><input class="studyID_inp" type="text-box" value="'+studyID+'" maxlength="256"><button onclick="filterTable(\'studies_tab_wrapper\',\'studyID\')">Go</button></div>');
+        $('#studies_tab_wrapper').find('.dataTables_controls').find('.dataTables_paginate').after('<div class="dataTables_filter"><strong>Find by Study Instance UID:</strong><input data-search-type="study" class="studyID_inp table-search-box" type="text-box" value="'+studyID+'" maxlength="256"><button class="clear"><i class="fa fa-solid fa-circle-xmark"></i></button></div>');
         return updatePromise;
     }
 
@@ -1454,8 +1461,15 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
             });
         });
         $('#series_tab').children('tbody').attr('id','series_table');
-        $('#series_tab_wrapper').find('.dataTables_controls').find('.dataTables_length').after('<div class="dataTables_goto_page"><label>Page </label><input class="goto-page-number" type="number"><button onclick="changePage(\'series_tab_wrapper\')">Go</button></div>');
-        $('#series_tab_wrapper').find('.dataTables_controls').find('.dataTables_paginate').after('<div class="dataTables_filter"><strong>Find by Series Instance UID:</strong><input class="seriesID_inp" type="text-box" value="'+seriesID+'" maxlength="256"><button onclick="filterTable(\'series_tab_wrapper\',\'seriesID\')">Go</button></div>');
+        $('#series_tab_wrapper').find('.dataTables_controls').find('.dataTables_length').after(
+            '<div class="dataTables_goto_page"><label>Page </label><input class="goto-page-number" type="number">'
+            +'<button onclick="changePage(\'series_tab_wrapper\')">Go</button></div>'
+        );
+        $('#series_tab_wrapper').find('.dataTables_controls').find('.dataTables_paginate').after(
+            '<div class="dataTables_filter"><strong>Find by Series Instance UID:</strong><input '
+            +'class="seriesID_inp table-search-box" type="text-box" data-search-type="series" value="'
+            +seriesID+'" maxlength="256"><button class="clear"><i class="fa fa-solid fa-circle-xmark"></i></button></div>'
+        );
         return updatePromise;
     }
 
@@ -1504,6 +1518,7 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
         update_search_thread = setTimeout(function(){
             SEARCH_PENDING = true;
             let varStr = input.val();
+            // Don't search again if no change was made (this squelches any non-change)
             if(Last_searches[type] !== varStr) {
                 Last_searches[type] = varStr;
                 update_methods[type](false,  varStr, true)
@@ -1522,19 +1537,17 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
         }, SUBSEQUENT_DELAY);
     }
 
-    $('#cases_panel_container').on('keyup', '.caseID_inp', function(event){
-        filterTable('cases_panel', 'caseID', $(this));
+    $('#rh_panel').on('change keyup', '.table-search-box', function(event){
+        let type = $(this).attr("data-search-type");
+        filterTable(`${type}_panel`, `${type}ID`, $(this));
     });
 
-    $('#series_panel_container').on('keyup', '.seriesID_inp', function(event){
-        filterTable('series_panel', 'seriesID', $(this));
+    $('#rh_panel').on('click', '.dataTables_filter button.clear', function(){
+        let search_box = $(this).siblings('.table-search-box');
+        search_box.val('');
+        search_box.trigger("change");
     });
 
-    $('#studies_panel_container').on('keyup', '.studyID_inp', function(event){
-        filterTable('study_panel', 'studyID', $(this));
-    });
-
-
     window.resetCartInTables = function(projArr){
          for (var i =0; i< projArr.length;i++){
             propagateCartTableStatChanges([projArr[i]], {}, false,true);
@@ -2261,8 +2274,6 @@ define(['cartutils','filterutils','tippy','jquery', 'base'], function(cartutils,
 
     }
 
-
-
     const pretty_print_id = function (id) {
         var newId = id.slice(0, 8) + '...' + id.slice(id.length - 8, id.length);
         return newId;