mason/search/stocks.mas

   1
   2 <%args>
   3
   4   $sp_person_autocomplete_uri => '/ajax/people/autocomplete'
   5   $trait_autocomplete_uri     => '/ajax/stock/trait_autocomplete'
   6   $onto_autocomplete_uri      => '/ajax/cvterm/autocomplete'
   7   $trait_db_name              => 'SP'
   8
   9   $organisms       => undef
  10   $stock_types     => undef
  11   $breeding_programs => undef
  12 </%args>
  13
  14 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables', 'CXGN.Effects' ] &>
  15
  16 <div class="container-fluid">
  17
  18 <& /page/page_title.mas, title=>'Search Accessions and Plots' &>
  19
  20
  21 <%perl>
  22
  23 use CXGN::Page::FormattingHelpers qw / conditional_like_input_html simple_selectbox_html/;
  24
  25
  26 my $any_name_select = conditional_like_input_html("any_name","contains", "", '30');
  27
  28 my $accession_cvterm_id;
  29
  30 for (my $i=0; $i<= scalar(@$stock_types); $i++) {
  31      if ( $stock_types->[$i][1] eq "accession" ) {
  32         $accession_cvterm_id = $stock_types->[$i][0];
  33         last();
  34      }
  35 }
  36
  37 my $stock_type_select = simple_selectbox_html(
  38   choices   => $stock_types,
  39   id        => "stock_type_select",
  40   selected  => $accession_cvterm_id,
  41 );
  42
  43 my $organism_select = simple_selectbox_html(
  44   choices  =>  $organisms   ,
  45   id       => "organism_select",
  46 );
  47
  48 my $breeding_programs_select = simple_selectbox_html(
  49     choices => $breeding_programs,
  50     id      => "organization" ,
  51 );
  52
  53
  54 </%perl>
  55
  56 <&| /page/info_section.mas, title => 'Search', collapsible=>1, collapsed=>0, subtitle=>'[<a href="/stock/0/new/">Submit New Stock</a>]' &>
  57
  58   <div id="stock_search_form" class="form-horizontal well">
  59     <div class="row">
  60       <div class="col-sm-6">
  61         <div class="form-group form-group-sm">
  62           <label class="col-sm-3 control-label">Stock Name or Description: </label>
  63           <div class="col-sm-9" >
  64             <% $any_name_select %>
  65           </div>
  66         </div>
  67       </div>
  68     </div>
  69     <div class="row">
  70       <div class="col-sm-6">
  71         <div class="form-group form-group-sm">
  72           <label class="col-sm-3 control-label">Stock Type: </label>
  73           <div class="col-sm-9" >
  74             <% $stock_type_select %>
  75           </div>
  76         </div>
  77       </div>
  78       <div class="col-sm-6">
  79         <div class="form-group form-group-sm">
  80           <label class="col-sm-3 control-label">Organism: </label>
  81           <div class="col-sm-9" >
  82             <% $organism_select %>
  83           </div>
  84         </div>
  85       </div>
  86     </div>
  87     <div class="row">
  88       <div class="col-sm-6">
  89         <div class="form-group form-group-sm">
  90           <label class="col-sm-3 control-label">Stock Owner: </label>
  91           <div class="col-sm-9" >
  92             <input type="text" class="form-control" id="person" />
  93           </div>
  94         </div>
  95       </div>
  96       <div class="col-sm-6">
  97         <div class="form-group form-group-sm">
  98           <label class="col-sm-3 control-label">Trait: </label>
  99           <div class="col-sm-9" >
 100             <input type="text" class="form-control" id="trait" />
 101           </div>
 102         </div>
 103       </div>
 104     </div>
 105     <div class="row">
 106       <div class="col-sm-6">
 107         <div class="form-group form-group-sm">
 108           <label class="col-sm-3 control-label">Project Name: </label>
 109           <div class="col-sm-9" >
 110             <input type="text" class="form-control" id="project" />
 111           </div>
 112         </div>
 113       </div>
 114       <div class="col-sm-6">
 115         <div class="form-group form-group-sm">
 116           <label class="col-sm-3 control-label">Project Location: </label>
 117           <div class="col-sm-9" >
 118             <input type="text" class="form-control" id="location" />
 119           </div>
 120         </div>
 121       </div>
 122     </div>
 123     <div class="row">
 124       <div class="col-sm-6">
 125         <div class="form-group form-group-sm">
 126           <label class="col-sm-3 control-label">Project Year: </label>
 127           <div class="col-sm-9" >
 128             <input type="text" class="form-control" id="year" />
 129           </div>
 130         </div>
 131       </div>
 132       <div class="col-sm-6">
 133         <div class="form-group form-group-sm">
 134           <label class="col-sm-3 control-label">Organization: </label>
 135           <div class="col-sm-9" >
 136             <% $breeding_programs_select %>
 137           </div>
 138         </div>
 139       </div>
 140     </div>
 141     <button style="float:right" class="btn btn-primary" id="submit_stock_search" />Search</button>
 142     <br/><br/>
 143   </div>
 144 </&>
 145
 146 <!--
 147 <div id="stock_search_form">
 148   <table>
 149   <tr><td colspan="4" align="right"><a href="/stock/0/new/">[Submit new stock]</a></td>
 150     </tr>
 151   <tr><td><label for="any_name_matchtype">Stock name or description</label></td><td colspan="2"><% $any_name_select %></td>
 152     </tr>
 153   <tr><td><label for="stock_type_select">Stock type</label></td><td><% $stock_type_select %></td>
 154     <td><label for="organism_select">Organism</label></td><td><% $organism_select %></td>
 155     </tr>
 156   <tr><td><label for="person">Stock owner</label></td><td><input id="person"></td>
 157     <td><label for="trait">Trait</label></td><td><input id="trait"></td>
 158   </tr>
 159   <tr><td><label for="project">Project name</label></td><td><input id="project"></td>
 160     <td><label for="location">Project location</label></td><td><input id="location"></td>
 161   </tr>
 162   <tr><td><label for="year">Project year</label></td><td><input id="year"></td>
 163     <td><label for="organization">Organization</label></td><td><% $breeding_programs_select %></td>
 164   </tr>
 165
 166   <tr><td colspan="4" align="right"><button id="submit_stock_search" />Search</button></td>
 167 </tr></table>
 168 <br />
 169
 170 </div>
 171 -->
 172
 173 <br />
 174
 175 <&| /page/info_section.mas, title => 'Search Results', collapsible=>1, collapsed=>0 &>
 176
 177 <link rel="stylesheet" type="text/css" href="/documents/inc/datatables/jquery.dataTables.css">
 178
 179
 180 <div style="text-align:right">
 181 Copy items on this page to list:
 182 <span id="item_list_menu">
 183 </span>
 184
 185 <div id="item_list">
 186 </div>
 187 </div>
 188
 189
 190 <table id="stock_search_results" class="display">
 191 <thead>
 192   <tr>
 193     <th>Stock Name</th>
 194     <th>Stock Type</th>
 195     <th>Organism</th>
 196 </tr>
 197 </thead>
 198
 199 </table>
 200
 201 </&>
 202
 203 </div>
 204
 205 <script>
 206
 207 jQuery(document).ready(function () {
 208
 209      jQuery("#person").autocomplete({
 210         source: '<% $sp_person_autocomplete_uri %>'
 211      });
 212      jQuery("#trait").autocomplete({
 213         source: '<% $trait_autocomplete_uri %>'
 214      });
 215      jQuery("#onto").autocomplete({
 216         source: '<% $onto_autocomplete_uri %>' + "?db_name=" + '<% $trait_db_name %>'
 217      });
 218      jQuery("#stock_name").autocomplete({
 219         source: '/ajax/stock/stock_autocomplete',
 220      });
 221      jQuery("#project").autocomplete({
 222         source: '/ajax/stock/project_autocomplete',
 223      });
 224      jQuery("#location").autocomplete({
 225         source: '/ajax/stock/geolocation_autocomplete',
 226      });
 227      jQuery("#year").autocomplete({
 228         source: '/ajax/stock/project_year_autocomplete',
 229      });
 230
 231    var table = jQuery('#stock_search_results').DataTable( {
 232
 233      'searching' : false,
 234      'ordering'  : false,
 235      'processing': true,
 236      'serverSide': true,
 237      'ajax': { 'url':  '/ajax/search/stocks',
 238                'data': function(d) {
 239                   d.any_name  = jQuery('#any_name').val();
 240                   d.any_name_matchtype = jQuery('#any_name_matchtype').val();
 241                   d.stock_type   = jQuery('#stock_type_select').val();
 242                   d.organism     = jQuery('#organism_select').val();
 243                   d.person       = jQuery('#person').val();
 244                   d.trait        = jQuery('#trait').val();
 245                   d.project      = jQuery('#project').val();
 246                   d.location     = jQuery('#location').val();
 247                   d.year         = jQuery('#year').val();
 248                   d.organization = jQuery('#organization').val();
 249              }
 250          }
 251      });
 252
 253
 254    jQuery('#submit_stock_search').click( function() {
 255         table.search("stock_search_results").draw();
 256    });
 257
 258    jQuery('#stock_search_form').keypress( function( e ) {
 259            var code = e.keyCode || e.which;
 260            if( code == 13 ) {
 261                 jQuery('#submit_stock_search').click();
 262            }
 263     } );
 264
 265 });
 266
 267 </script>
 268