mason/transformation/add_autogenerated_name_metadata_dialog.mas

   1 <%args>
   2
   3 $programs => undef
   4 $program_id => undef
   5 $program_name => undef
   6
   7 </%args>
   8
   9 <& /util/import_javascript.mas, classes => ['CXGN.TrialTreeFolders'] &>
  10
  11
  12 <div class="modal fade" id="add_autogenerated_name_metadata_dialog" name="add_autogenerated_name_metadata_dialog" tabindex="-1" role="dialog" aria-labelledby="addAutogeneratedNameMetadataDialog">
  13     <div class="modal-dialog modal-xl" role="document">
  14         <div class="modal-content">
  15             <div class="modal-header" style="text-align: center">
  16                 <button type="reset" class="close" id="add_autogenerated_name_metadata_dismiss_button_1" name="add_autogenerated_name_metadata_dismiss_button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  17                 <h4 class="modal-title" id="addAutogeneratedNameMetadataDialog">Add Autogenerated Name Metadata</h4>
  18             </div>
  19             <div class="modal-body">
  20                 <div class="container-fluid">
  21                     <div>
  22                         <center>
  23                             <&| /page/explanation.mas, title=>'' &>
  24                                 <p>
  25                                     <b>Autogenerated Names</b>
  26                                     <br>
  27                                 <a id="autogenerated_name_usage_info">Usage Information</a>
  28                             </p>
  29                         </&>
  30                         </center>
  31                     </div>
  32                     <form class="form-horizontal" id="add_new_autogenerated_name_metadata_form" name="add_new_autogenerated_name_metadata_form">
  33 % if ($programs) {
  34                         <div class="form-group">
  35                             <label class="col-sm-4 control-label">Breeding Program: </label>
  36                             <div class="col-sm-8">
  37                                 <select class="form-control" id="autogenerated_name_metadata_program" name="autogenerated_name_metadata_program">
  38                                     <option value="">Select Breeding Program</option>
  39 <%perl>
  40 foreach my $program (@$programs) {
  41 if (@$program[3]) {
  42 print "<option selected=\"selected\" value='".@$program[0]."'>".@$program[1]."</option>";
  43 } else {
  44 print "<option value='".@$program[0]."'>".@$program[1]."</option>";
  45 }
  46 }
  47 </%perl>
  48                                 </select>
  49                             </div>
  50                         </div>
  51 % } elsif ($program_name) {
  52                         <div class="form-group">
  53                             <label class="col-sm-4 control-label">Breeding Program: </label>
  54                             <div class="col-sm-8">
  55                                 <select class="form-control" id="autogenerated_name_metadata_program" name="autogenerated_name_metadata_program">
  56                                     <option value="<%$program_id%>"><%$program_name%></option>
  57                                 </select>
  58                             </div>
  59                         </div>
  60 % }
  61                         <div class="form-group">
  62                             <label class="col-sm-4 control-label">Format Name: </label>
  63                             <div class="col-sm-8">
  64                                 <input class="form-control" id="format_name" name="format_name" type="text" placeholder="For example: breedbase_transformants"/>
  65                             </div>
  66                         </div>
  67                         <div class="form-group">
  68                             <label class="col-sm-4 control-label">Description: </label>
  69                             <div class="col-sm-8">
  70                                 <input class="form-control" id="autogenerated_name_metadata_description" name="autogenerated_name_metadata_description" type="text" placeholder="Optional" />
  71                             </div>
  72                         </div>
  73                         <div class="form-group">
  74                             <label class="col-sm-4 control-label">Autogenerated Names for: </label>
  75                             <div class="col-sm-8">
  76                                 <select class="form-control" id="name_type">
  77                                     <option value="">Select a name type</option>
  78                                     <option value="transformant">transformant (accession)</option>
  79                                 </select>
  80                             </div>
  81                         </div>
  82                         <div class="form-group">
  83                             <label class="col-sm-4 control-label">How many attributes for basename: </label>
  84                             <div class="col-sm-8">
  85                                 <select class="form-control" id="number_of_attributes">
  86                                     <option value="">Select a number</option>
  87                                     <option value="1">1</option>
  88                                     <option value="2">2</option>
  89                                     <option value="3">3</option>
  90                                     <option value="4">4</option>
  91                                     <option value="5">5</option>
  92                                 </select>
  93                             </div>
  94                         </div>
  95                         <div id ="name_attributes_form_div">
  96                         </div>
  97                         <div class="form-group">
  98                             <label class="col-sm-4 control-label">Last Serial Number: </label>
  99                             <div class="col-sm-8">
 100                                 <input class="form-control" id="last_number" name="last_number" type="number" placeholder="For example: value 0. The next name would be BTI_1"/>
 101                             </div>
 102                         </div>
 103                     </form>
 104                 </div>
 105             </div>
 106             <div class="modal-footer">
 107                 <button id="add_autogenerated_name_metadata_dismiss_button_2" name="add_autogenerated_name_metadata_dismiss_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 108                 <button type="button" class="btn btn-primary" id="new_autogenerated_name_metadata_submit">Submit</button>
 109             </div>
 110         </div>
 111     </div>
 112 </div>
 113
 114 <div class="modal fade" id="add_autogenerated_name_metadata_message" name="add_autogenerated_name_metadata_message" tabindex="-1" role="dialog" aria-labelledby="addAutogeneratedNameMetadataMessage">
 115     <div class="modal-dialog" role="document">
 116         <div class="modal-content">
 117             <div class="modal-header">
 118                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 119                 <h4 class="modal-title" id="addAutogeneratedNameMetadataMessage">Autogenerated Name Metadata</h4>
 120             </div>
 121             <div class="modal-body">
 122                 <div class="container-fluid">
 123                     <p>
 124                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 125                         Autogenerated name format was stored successfully.
 126                     </p>
 127                 </div>
 128             </div>
 129             <div class="modal-footer">
 130                 <button type="button" class="btn btn-default" name="add_autogenerated_name_format_close_button" id="add_autogenerated_name_format_close_button" data-dismiss="modal">Close</button>
 131             </div>
 132         </div>
 133     </div>
 134 </div>
 135
 136 <div class="modal fade" id="autogenerated_name_usage_info_dialog" name="autogenerated_name_usage_info_dialog" tabindex="-1" role="dialog" aria-labelledby="autogeneratedNameUsageInfoDialog">
 137     <div class="modal-dialog modal-xl " role="document">
 138         <div class="modal-content">
 139             <div class="modal-header" style="text-align: center">
 140                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 141                 <h4 class="modal-title" id="autogeneratedNameUsageInfoDialog">How to Use Autogenerated Name Feature</h4>
 142             </div>
 143             <div class="well well-lg">
 144                 <div class="panel panel-default">
 145                     <div class="modal-body">
 146                         <div class="container-fluid">
 147                             <h4>
 148                                 Autogenerated Names:
 149                             </h4>
 150                             <li>You can use autogenerated name feature to automatically generate names based on your desired format following by a serial number. Before you can use this feature, you need to store information about your naming format and other related metadata. Currently, only transformation tool has this autogenerated name feature for generating transformant names. If you are interested in using this feature in other types of projects, please contact us.</li>
 151                             <li>Naming formats can be shared within the same breeding program. All stored formats are displayed in the Autogenerated Name Metadata section on the Breeding Program page.</li>
 152                             <br>
 153                             <h4>
 154                                 Autogenerated Name Metadata:
 155                             </h4>
 156                             <li><b>Breeding Program</b>: Each breeding program can store different types of naming formats. You can choose which naming format you would like to use for each project.</li>
 157                             <li><b>Format Name</b>: Format name must be globally unique. It is an identifier used for capturing all metadata related to each naming format.</li>
 158                             <li><b>Description</b>: Description of this naming format.</li>
 159                             <li><b>Name Type</b>: Name type is used to retrieve related information used as attributes in the naming format. For example, attributes for a transformant name can be breeding program, vector construct, plant material used in the transformation, transformation project, transformation ID, text field.</li>
 160                             <li><b>Number of Attributes</b>: Indicating how many attributes you would like to include in a name. You can also include texts.</li>
 161                             <li><b>Attributes for Basename</b>: You can specify attributes you would like to include in a basename, as well as the order of these attributes. If you would like to add text field in the basename, select "text", then specify the text field. Attributes are separated by an underscore. For example, selecting 3 attributes, if you would like to include breeding program, vector construct, and a text field. The generated name would be <b>"breedingProgram_vectorConstruct_text_serialNumber"</b>.</li>
 162                             <li><b>Last Serial Number</b>: If you previously used this naming format before using the database. This input field allows you to continue using your naming format by indicating the last serial number that you used. If this is a new format, please indicates "0". The first name will have "1" as the first serial number. After you use the naming format to add new names in the database, the last serial number is automatically updated and stored as new metadata of that naming format.</li>
 163                             <br>
 164                             <h4>
 165                                 Setting Up Naming Format for Each Project:
 166                             </h4>
 167                             <li>Once you store autogenerated name metadata for each format, you can set up specific naming format for each project</li>
 168                             <li>The link for setting up naming format is on each transformation project page</li>
 169                         </div>
 170                         <div class="modal-footer">
 171                             <button id="close_autogenerated_name_info_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 172                         </div>
 173                     </div>
 174                 </div>
 175             </div>
 176         </div>
 177     </div>
 178 </div>
 179
 180
 181 <script>
 182
 183 jQuery(document).ready(function(){
 184
 185     jQuery("[name='add_autogenerated_name_metadata_link']").click(function(e) {
 186         e.preventDefault();
 187         jQuery("#add_autogenerated_name_metadata_dialog").modal("show");
 188     });
 189
 190     jQuery('#autogenerated_name_usage_info').click(function(){
 191         jQuery('#autogenerated_name_usage_info_dialog').modal("show");
 192     });
 193
 194     jQuery("#number_of_attributes").change(function() {
 195         number_of_attributes = jQuery('#number_of_attributes').val();
 196         if (number_of_attributes){
 197             name_attributes_form();
 198         }
 199     })
 200
 201     function name_attributes_form () {
 202         let number_of_attributes = parseInt(jQuery('#number_of_attributes').val());
 203
 204         let html = '<table class="table table-bordered" id="name_attributes_table"><thead><tr><th>Attribute Order</th><th>Select Attribute</th></tr></thead><tbody>';
 205         for(let i=0; i<number_of_attributes; i++){
 206             let attribute_order = i+1;
 207             html = html + '<tr><td>' + attribute_order + '</td><td><div name="attribute_selects" id="attribute_select_' +i+ '"></div></td><td><span id="selected_attribute_'+ i +'_string" data-related="'+encodeURI(attribute_order)+'" ></span></td></tr>';
 208         };
 209         html = html + '</tbody></table>';
 210
 211         jQuery('#name_attributes_form_div').html(html);
 212
 213         let attribute_list = jQuery('#name_attributes_table')
 214             .find("div")
 215             .map(function() { return this.id; })
 216             .get();
 217         for(let i=0; i<attribute_list.length; i++){
 218             get_select_box('related_attributes', attribute_list[i], {'name' : 'selected_attribute', 'id' : 'selected_attribute_'+i,  });
 219         };
 220     };
 221
 222     jQuery(document).on('change', "select[name='selected_attribute']", function() {
 223         let div_id = '#' + this.id;
 224         let attribute = jQuery(div_id).val();
 225         if (attribute == 'text') {
 226             attribute_string(div_id, div_id + '_string');
 227         }
 228     });
 229
 230     function attribute_string(div_id, select_id){
 231         let attribute_text = jQuery(div_id).val();
 232         let html = '<td><input class="form-control"  name ="select_id" id="select_id" value="" placeholder="Please enter text string"/></td>';
 233         jQuery(select_id).html(html);
 234
 235     };
 236
 237     jQuery('#new_autogenerated_name_metadata_submit').click(function(e){
 238         e.preventDefault();
 239         let name_attributes = [];
 240
 241         jQuery('select[name="selected_attribute"]').each(function() {
 242             value = this.value;
 243             let text_string;
 244             if (value == 'text') {
 245                 text_string =  jQuery('#select_id').val();
 246                 name_attributes.push({'text':text_string});
 247             } else {
 248                 name_attributes.push(value);
 249             }
 250         });
 251
 252         let breeding_program = jQuery('#autogenerated_name_metadata_program').val();
 253         if (!breeding_program) {
 254             alert("Breeding program is required");
 255             return;
 256         }
 257
 258         let format_name = jQuery('#format_name').val();
 259         if (!format_name) {
 260             alert("Format name is required");
 261             return;
 262         }
 263
 264         let description = jQuery('#autogenerated_name_metadata_description').val();
 265
 266         let name_type = jQuery('#name_type').val();
 267         if (!name_type) {
 268             alert("Name type is required");
 269             return;
 270         }
 271
 272         let last_serial_number = jQuery('#last_number').val();
 273         if (!last_serial_number) {
 274             alert("Last serial number is required");
 275             return;
 276         }
 277
 278         jQuery.ajax({
 279             url: '/ajax/transformation/add_autogenerated_name_metadata',
 280             method: 'POST',
 281             data: {
 282                 'breeding_program': breeding_program,
 283                 'format_name': format_name,
 284                 'description': description,
 285                 'name_type': name_type,
 286                 'last_serial_number': last_serial_number,
 287                 'name_attributes': JSON.stringify(name_attributes),
 288             },
 289             dataType:'json',
 290             beforeSend: function() {
 291                 jQuery("#working_modal").modal("show");
 292             },
 293             success: function(response) {
 294                 jQuery("#working_modal").modal("hide");
 295                 if (response.error) {
 296                     alert(response.error);
 297                 } else {
 298                     jQuery("#add_autogenerated_name_metadata_message").modal("show");
 299                     jQuery('#add_autogenerated_name_metadata_dialog').modal("hide");
 300
 301                 }
 302             },
 303             error: function() {
 304                 jQuery("#working_modal").modal("hide");
 305                 alert('An error occurred storing autogenerated name metadata.');
 306                 jQuery('#add_autogenerated_name_metadata_dialog').modal("hide");
 307             },
 308         });
 309
 310     });
 311
 312     jQuery("[name='add_autogenerated_name_metadata_dismiss_button']").click(function() {
 313         jQuery('#add_autogenerated_name_metadata_dialog').modal('hide');
 314         jQuery('#autogenerated_name_metadata_program').val('');
 315         jQuery('#format_name').val('');
 316         jQuery('#autogenerated_name_metadata_description').val('');
 317         jQuery('#name_type').val('');
 318         jQuery('#last_number').val('');
 319         jQuery('#number_of_attributes').val('');
 320         location.reload()
 321     });
 322
 323     jQuery("#add_autogenerated_name_format_close_button").click(function(){
 324         location.reload();
 325     });
 326
 327 });
 328
 329 </script>