mason/tools/document_browser.mas

   1
   2 <%args>
   3 $files
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => [ 'jquery', 'jqueryui', 'jquery.iframe-post-form' ] &>
   7
   8 <& /page/page_title.mas, title=>'Document Browser' &>
   9
  10 <button class="btn btn-default" id="upload_document_browser_file_link">Upload TSV Document</button>
  11 <hr>
  12
  13 <table class="table table-bordered" alt="">
  14 <thead>
  15   <tr><th>Select</th><th>Filename</th><th>Date Uploaded</th><th>Uploaded By</th><th>File Type</th><th>Options</th></tr>
  16 </thead>
  17 <tbody>
  18 % foreach my $f (@$files) {
  19   <tr>
  20     <td><input type="checkbox" name="document_browser_file_select" value="<% $f->[0] %>" /></td>
  21     <td><% $f->[4] %></td>
  22     <td><% $f->[1] %></td>
  23     <td><a href="/solpeople/profile/<% $f->[2] %>"><% $f->[3] %></a></td>
  24     <td><% $f->[6] %></td>
  25     <td><a href="/breeders/phenotyping/download/<% $f->[0] %>">Download</a></td>
  26   </tr>
  27 % }
  28 </tbody>
  29 </table>
  30
  31 <div class="input-group">
  32   <input type="text" class="form-control" id="document_browser_search_input" placeholder="Type Search...">
  33    <div class="input-group-btn">
  34     <button class="btn btn-info" id="document_browser_search_submit"><i class="glyphicon glyphicon-search"></i>Search</button>
  35    </div>
  36  </div>
  37
  38 <br/>
  39 <div id="document_browser_search_results"></div>
  40
  41 <div id="document_browser_search_results_selected" style="display:none"></div>
  42
  43 <br/>
  44 <div id="document_browser_search_results_to_list"></div>
  45
  46
  47
  48 <div class="modal fade" id="upload_document_browser_file_dialog" name="upload_document_browser_file_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadDocumentDialog">
  49   <div class="modal-dialog" role="document">
  50     <div class="modal-content">
  51       <div class="modal-header">
  52         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  53         <h4 class="modal-title" id="uploadDocumentDialog">Upload New Document</h4>
  54       </div>
  55       <div class="modal-body">
  56         <div class="container-fluid">
  57
  58             <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_document_browser_file_form" name="upload_document_browser_file_form">
  59                 <div class="form-group">
  60                     <label class="col-sm-3 control-label">Select TSV Document: </label>
  61                     <div class="col-sm-9" >
  62                         <input type="file" id="upload_document_browser_file_input" name="upload_document_browser_file_input" encoding="multipart/form-data" />
  63                     </div>
  64                 </div>
  65
  66             </form><br/>
  67
  68         </div>
  69       </div>
  70       <div class="modal-footer">
  71         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  72             <button type="button" class="btn btn-primary" name="upload_document_browser_file_submit" id="upload_document_browser_file_submit" title="Save new document">Save</button>
  73       </div>
  74     </div>
  75   </div>
  76 </div>
  77
  78 <div class="modal fade" id="upload_document_browser_file_status_dialog" name="upload_document_browser_file_status_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadDocumentStatusDialog">
  79   <div class="modal-dialog" role="document">
  80     <div class="modal-content">
  81       <div class="modal-header">
  82         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  83         <h4 class="modal-title" id="uploadDocumentStatusDialog">Status</h4>
  84       </div>
  85       <div class="modal-body">
  86         <div class="container-fluid">
  87
  88             <div id="upload_document_browser_file_status"></div><br/>
  89
  90         </div>
  91       </div>
  92       <div class="modal-footer">
  93         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  94       </div>
  95     </div>
  96   </div>
  97 </div>
  98
  99
 100 <script>
 101 jQuery(document).ready(function() {
 102
 103     jQuery('#document_browser_search_submit').click( function() {
 104         var file_ids = [];
 105         jQuery.each(jQuery("input[name='document_browser_file_select']:checked"), function(){
 106             file_ids.push(jQuery(this).val());
 107         });
 108         var search = jQuery('#document_browser_search_input').val();
 109         //console.log(file_ids);
 110
 111         jQuery.ajax({
 112             url:'/ajax/tools/documents/search',
 113             type: 'POST',
 114             data: {
 115                 'search':search,
 116                 'file_ids': JSON.stringify(file_ids)
 117             },
 118             success: function(response){
 119                 //console.log(response);
 120                 var html = "<div class='well'><table class='table table-hover table-bordered'><thead><tr><th>Select All<br/><input type='checkbox' id='document_browser_select_all_results' /></th><th>Search Result</th></tr></thead><tbody>";
 121                 for (var i=0; i<response.found_lines.length; i++){
 122                     html = html + "<tr><td><input type='checkbox' name='document_browser_search_result_select' value='"+response.list_elements[i]+"' /></td><td>"+response.found_lines[i]+"</td></tr>";
 123                 }
 124                 html = html + "</tbody></table></div>";
 125                 jQuery('#document_browser_search_results').html(html);
 126             },
 127             error: function(response){
 128                 alert("An error occurred "+response);
 129             }
 130         });
 131
 132     });
 133
 134     jQuery(document).on('change', 'input[name="document_browser_search_result_select"]', function() {
 135         updateListAdditions();
 136     });
 137
 138     addToListMenu('document_browser_search_results_to_list', 'document_browser_search_results_selected', {
 139         listType: 'traits'
 140     });
 141
 142     jQuery('#upload_document_browser_file_link').click( function() {
 143         jQuery('#upload_document_browser_file_dialog').modal("show");
 144     });
 145
 146     jQuery('#upload_document_browser_file_submit').click( function() {
 147         initializeUpload();
 148     });
 149     jQuery("#upload_document_browser_file_form").iframePostForm({
 150         json: true,
 151         post: function () { },
 152         timeout: 7200000,
 153         complete: function (response) {
 154             //console.log(response);
 155             hideWorkingModal();
 156             if (response.error){
 157                 jQuery('#upload_document_browser_file_status').html(response.error);
 158             } else {
 159                 jQuery('#upload_document_browser_file_status').html(response.success);
 160             }
 161             jQuery("#upload_document_browser_file_status_dialog").modal('show');
 162         }
 163     });
 164
 165     jQuery(document).on('change', '#document_browser_select_all_results', function(){
 166         jQuery('input[name="document_browser_search_result_select"]').each(function(){
 167             this.checked = true;
 168         });
 169         updateListAdditions();
 170     });
 171
 172     jQuery('#upload_document_browser_file_status_dialog').on('hidden.bs.modal', function () {
 173         location.reload();
 174     });
 175
 176 });
 177
 178 function showWorkingModal(message) {
 179     jQuery('#working_msg').html(message);
 180     jQuery('#working_modal').modal("show");
 181 }
 182
 183 function hideWorkingModal() {
 184     jQuery('#working_modal').modal("hide");
 185 }
 186
 187 function initializeUpload() {
 188     var uploadFile = jQuery("#upload_document_browser_file_input").val();
 189     if (uploadFile === '') {
 190         alert("Please select a file");
 191     } else {
 192         showWorkingModal("Storing File");
 193         jQuery("#upload_document_browser_file_form").attr("action", '/ajax/tools/documents/upload');
 194         jQuery("#upload_document_browser_file_form").submit();
 195     }
 196 }
 197
 198 function updateListAdditions() {
 199     var html = '';
 200     jQuery.each(jQuery("input[name='document_browser_search_result_select']:checked"), function(){
 201         html = html + jQuery(this).val() + "\n";
 202     });
 203     //console.log(html);
 204     jQuery('#document_browser_search_results_selected').html(html);
 205 }
 206
 207 </script>