mason/breeders_toolbox/crosses.mas

   1
   2 <%args>
   3 $user_id => undef
   4 @cross_populations => ()
   5 @programs => ()
   6 @locations => ()
   7 @roles => ()
   8 </%args>
   9
  10 <& /util/import_javascript.mas, classes => [ 'jquery.iframe-post-form','CXGN.BreedersToolbox.Crosses', 'jstree.dist.jstree', 'CXGN.TrialTreeFolders'] &>
  11
  12 <link rel="stylesheet" href="/static/documents/inc/jstree_theme/jstree-bstheme-min.css" />
  13
  14 <& /breeders_toolbox/cross_wishlist.mas &>
  15 <& /breeders_toolbox/add_cross_dialogs.mas, programs=>\@programs, locations=>\@locations &>
  16 <& /breeders_toolbox/upload_crosses_dialogs.mas, programs=>\@programs, locations=>\@locations &>
  17 <& /breeders_toolbox/folder/folder_set.mas, project_type=>'Cross' &>
  18 <& /breeders_toolbox/folder/folder_new.mas &>
  19 <& /breeders_toolbox/folder/folder_move.mas &>
  20 <& /breeders_toolbox/folder/folders_edit.mas, folder_tree_type => 'Cross', folder_tree_identifier => 'crosses_list', folder_tree_refresh_name => 'refresh_crosses_jstree_html' &>
  21
  22 <table class="table table-bordered">
  23     <thead>
  24         <tr>
  25             <th>Information</th>
  26             <th>Breeding Programs -- Folders -- Crosses&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-sm btn-default" id="refresh_crosses_jstree_html_trialtree_button" name="refresh_crosses_jstree_html">Refresh</button></th>
  27         </tr>
  28     </thead>
  29     <tbody>
  30         <tr>
  31             <td>
  32                 <h4>Search</h4>
  33                 <input type="text" class="form-control input-sm" id="cross_tree_search" placeholder="Search" />
  34                 <hr>
  35
  36                 <h5><i>Double click<br />cross (&nbsp;<span class="glyphicon glyphicon-grain text-success"></span>&nbsp;) or folder (&nbsp;<span class="glyphicon glyphicon-folder-open text-danger"></span>&nbsp;)<br/>to view detail page.</i></h5>
  37                 <h5><i>Breeding programs (&nbsp;<span class="glyphicon glyphicon-briefcase text-info"></span>&nbsp;)</i></h5>
  38                 <hr>
  39
  40                 <h4>Folders</h4>
  41                 <button class="btn btn-sm btn-default" id="new_folder_dialog_link">Create new folder</button><br/><br/>
  42                 <button class="btn btn-sm btn-default" id="open_folder_dialog_link">Move cross to folder</button><br/><br/>
  43                 <button class="btn btn-sm btn-default" id="move_folder_dialog_link">Move folder</button>
  44
  45                 <div id="folder_edit_options" style="display:none">
  46                     <hr>
  47                     <h5><i>Select multiple folders by holding 'Ctrl'.</i></h5>
  48                     <button class="btn btn-primary" id="edit_folders_button" title="First Select Folder(s) to Edit">Edit Folder(s)</button>
  49                     <br/>
  50                 </div>
  51
  52                 <!--<button id="delete" disabled="disabled" >Delete</button -->
  53                 <br />
  54             </td>
  55             <td>
  56                 <div id="crosses_list" >[loading...]</div>
  57             </td>
  58         </tr>
  59     </tbody>
  60 </table>
  61
  62 <script>
  63
  64 jQuery.noConflict();
  65
  66 jQuery(document).ready(function($) {
  67
  68     jQuery('#crosses_datatable').DataTable({
  69         destroy: true,
  70         scrollY:        '30vh',
  71             scrollCollapse: true,
  72             paging:         false,
  73     });
  74
  75     jQuery.ajax( {
  76       url: '/ajax/breeders/get_crosses_with_folders_cached',
  77       success: function(response) {
  78         var html = '<ul>'+response.html+'</ul>';
  79
  80         jQuery('#crosses_list').html(html);
  81         //console.log(html);
  82         jQuery('#crosses_list').jstree( {
  83             "core": { 'themes': { 'name': 'proton', 'responsive': true}},
  84             "valid_children" : [ "folder", "trial", "breeding_program" ],
  85             "types" : {
  86                 "breeding_program" : {
  87                     "icon": 'glyphicon glyphicon-briefcase text-info',
  88                 },
  89                 "folder" : {
  90                     "icon": 'glyphicon glyphicon-folder-open text-danger',
  91                 },
  92                 "cross" : {
  93                     "icon": 'glyphicon glyphicon-grain text-success',
  94                 }
  95             },
  96             "search" : {
  97                  "case_insensitive" : true,
  98              },
  99           "plugins" : ["html_data","types","search"],
 100
 101         });
 102
 103       },
 104       error: function(response) {
 105         alert("An error occurred while loading the trial data.");
 106       }
 107   });
 108
 109     jQuery("#cross_tree_search").keyup(function() {
 110         var v = jQuery("#cross_tree_search").val();
 111         jQuery("#crosses_list").jstree(true).search(v);
 112     });
 113
 114     jQuery('#crosses_list').on("changed.jstree", function (e, data) {
 115         //console.log(data);
 116         if ($('#trial_list').jstree('is_leaf', data.node) && data.node.data.jstree.type == 'folder') {
 117             jQuery("#folder_edit_options").show();
 118         }
 119         else {
 120             jQuery("#folder_edit_options").hide();
 121         }
 122     });
 123
 124     jQuery("#crosses_list").delegate("li", "dblclick", function(event){
 125         var node = $("#crosses_list").jstree("get_node", this);
 126         //console.log(node);
 127         if (node.id.substr(0,1) !== 'j') {
 128             if (node.type == 'folder') {
 129                 window.open('/folder/'+node.id);
 130                 event.stopPropagation();
 131             } else if (node.type == 'cross') {
 132                 window.open('/cross/'+node.id);
 133                 event.stopPropagation();
 134             }
 135         }
 136     });
 137
 138 });
 139
 140 </script>