mason/search/bulk.mas

   1
   2 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables', 'jquery.dataTables-buttons-min', 'jszip-min', 'buttons.bootstrap-min', 'buttons.html5-min' ],  &>
   3
   4 <div class="container-fluid">
   5
   6 <& /page/page_title.mas, title=>'Bulk Search' &>
   7
   8 <p>The Bulk Search will check a list of data items if they exist in the database for the specified data type.<p>
   9
  10 <br />
  11
  12 <!-- QUERY SECTION -->
  13 <div id="bulk_search_query">
  14
  15     <h3>Data Type</h3>
  16
  17     <select id="bulk_search_type" class="form-control" disabled>
  18         <option>Loading...</option>
  19     </select>
  20
  21     <br />
  22
  23     <h3>Data Items</h3>
  24
  25     <p>Enter the names of the data items (one per line)</p>
  26
  27     <textarea id="bulk_search_items" class="form-control" rows="25"></textarea>
  28
  29     <br />
  30
  31     <button id="bulk_search_start" class="btn btn-primary btn-block">Search</button>
  32
  33 </div>
  34
  35
  36 <!-- RESULTS SECTION -->
  37 <div id="bulk_search_results" style="display: none">
  38
  39     <h3>Existing Items</h3>
  40
  41     <table id="bulk_search_existing" class="table table-striped table-hover">
  42         <tr>
  43             <th>Name</th>
  44         </tr>
  45     </table>
  46
  47     <br />
  48
  49     <h3>Missing Items</h3>
  50
  51     <table id="bulk_search_missing" class="table table-striped table-hover">
  52         <tr>
  53             <th>Name</th>
  54         </tr>
  55     </table>
  56
  57     <br /><br />
  58
  59     <button id="bulk_search_back" class="btn btn-primary btn-block"><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Back to Search</button>
  60
  61 </div>
  62
  63 <br /><br />
  64
  65 </div>
  66
  67
  68 <script type="text/javascript">
  69 jQuery(document).ready(function() {
  70
  71     // Get the supported data types
  72     updateDataTypes();
  73
  74     // Click Listeners
  75     jQuery('#bulk_search_start').click(bulkSearch);
  76     jQuery('#bulk_search_back').click(toggleSections);
  77
  78     // Init DataTables
  79     jQuery('#bulk_search_existing').DataTable({
  80         dom: 'Bfrtip',
  81         autoWidth: false,
  82         data: [],
  83         columns: [{ title: "Name" }],
  84         buttons: [
  85             {
  86                 extend: 'excelHtml5',
  87                 title: 'existing_items'
  88             },
  89             {
  90                 extend: 'csvHtml5',
  91                 title: 'existing_items'
  92             }
  93         ]
  94     });
  95     jQuery('#bulk_search_missing').DataTable({
  96         dom: 'Bfrtip',
  97         autoWidth: false,
  98         data: [],
  99         columns: [{ title: "Name" }],
 100         buttons: [
 101             {
 102                 extend: 'excelHtml5',
 103                 title: 'missing_items'
 104             },
 105             {
 106                 extend: 'csvHtml5',
 107                 title: 'missing_items'
 108             }
 109         ]
 110     });
 111
 112 });
 113
 114
 115 /**
 116  * Get the supported data types
 117  * Update the select box with the data types
 118  */
 119 function updateDataTypes() {
 120     let urlParams = new URLSearchParams(window.location.search);
 121     let type_name = urlParams.get('type');
 122     let type_id = urlParams.get('type_id');
 123
 124     jQuery.ajax({
 125         url: '/list/alltypes',
 126         success: function(data) {
 127             if ( data && data.length > 0 ) {
 128                 let html = "";
 129                 data.sort((a,b) => a[1].toUpperCase().localeCompare(b[1].toUpperCase()));
 130                 for ( let i = 0; i < data.length; i++ ) {
 131                     let id = data[i][0];
 132                     let name = data[i][1];
 133                     let selected = parseInt(id) === parseInt(type_id) || name === type_name ? 'selected' : '';
 134                     html += "<option value='" + id + "' " + selected + ">" + name + "</option>";
 135                 }
 136                 jQuery('#bulk_search_type').html(html).attr('disabled', false);
 137             }
 138         },
 139         error: function() {
 140             alert("Could not get supported data types!");
 141         }
 142     })
 143 }
 144
 145
 146 /**
 147  * Perform the bulk search
 148  * call displayResults() when complete
 149  */
 150 function bulkSearch() {
 151     let type_id = jQuery('#bulk_search_type').val();
 152     let type_name = jQuery("#bulk_search_type option:selected").text();
 153     let names = jQuery('#bulk_search_items').val().split('\n');
 154     names = names.filter(function(str) {
 155         return /\S/.test(str);
 156     });
 157
 158     jQuery('#bulk_search_start').html('Searching...').attr('disabled', true);
 159
 160     jQuery.ajax({
 161         url: "/list/validate/temp",
 162         method: 'POST',
 163         data: {
 164             "type": type_name,
 165             "items": JSON.stringify(names),
 166         },
 167         success: function(data) {
 168             jQuery('#bulk_search_start').html('Search').attr('disabled', false);
 169             displayResults(data);
 170         },
 171         error: function() {
 172             alert("Could not run bulk search!");
 173             jQuery('#bulk_search_start').html('Search').attr('disabled', false);
 174         }
 175     });
 176 }
 177
 178
 179 /**
 180  * Display the results of the bulk search
 181  * @param {Object} data JSON response from server
 182  */
 183 function displayResults(data) {
 184     let dte = jQuery('#bulk_search_existing').DataTable();
 185     let dtm = jQuery('#bulk_search_missing').DataTable();
 186     dte.clear();
 187     dtm.clear();
 188
 189     if ( data ) {
 190         if ( data.error ) {
 191             alert(data.error);
 192         }
 193         else if ( data.existing && data.missing ) {
 194             let e = [];
 195             while(data.existing.length) e.push(data.existing.splice(0,1));
 196             let m = [];
 197             while(data.missing.length) m.push(data.missing.splice(0,1));
 198             dte.rows.add(e);
 199             dtm.rows.add(m);
 200         }
 201     }
 202     else {
 203         alert("Invalid response from the server!");
 204     }
 205
 206     dte.draw();
 207     dtm.draw();
 208
 209     toggleSections();
 210 }
 211
 212 /**
 213  * Toggle the display of the query and results sections
 214  */
 215 function toggleSections() {
 216     jQuery('#bulk_search_query').toggle();
 217     jQuery('#bulk_search_results').toggle();
 218 }
 219 </script>