Merge pull request #4106 from solgenomics/topic/wishlist
[sgn.git] / mason / stock / stockprops.mas
blob0d31e634b304472d72e26ab2287ed9c9d64811ea
1 <%doc>
2 =head1 NAME
4 stockprops.mas
6 =head1 DESCRIPTION
8 This component can print stock properties
11 =head1 ARGUMENTS
13 =over 1
15 =item props
16 hashref of stockprops . keys = prop name (cvterm.name) values = list of prop values
18 =back
20 =head1 AUTHOR
21 Naama Menda <nm249@cornell.edu>
24 =cut
26 </%doc>
28 <%args>
29   $stock_id
30   $form_div_id
31   $subset => [  'released_variety_name' ]
32   $props
33   $editable => []
34   $div_name => ''
35   $edit_privs => 0
36 </%args>
37 <& /util/import_javascript.mas,
38    classes => ["jquery", "jqueryui", "CXGN.Page.FormattingHelpers",  "CXGN.Stock" ],
41 <%perl>
42 use JSON::Any;
43 use CXGN::Page::FormattingHelpers qw | simple_selectbox_html simple_checkbox_html |;
45 my $subset_json = JSON::Any->objToJson($subset);
48 $div_name ||= join("_", @$subset);
49 $div_name =~ s/ +/\_/g;
51 $edit_privs ||= 0;
53 my $prop_select = simple_selectbox_html(
54      name => $div_name."_select",
55      id => $div_name."_select",
56      choices => $editable
60 </%perl>
62 <div id="<% $div_name %>_content">
63 </div>
66 <div class ="modal fade" id="<% $div_name %>_add_dialog" name="<% $div_name %>_add_dialog" tabindex="-1" role="dialog" aria-labelledby="add<% $div_name %>Dialog">
68   <div class="modal-dialog" role="document">
69     <div class="modal-content">
70       <div class="modal-header" style="text-align: center">
71         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
72         <h4 class="modal-title" id="add<% $div_name %>Dialog">Add Property</h4>
73       </div>
74       <div class="modal-body">
75         <div class="container-fluid">
76           
77           <form class="form-horizontal" role="form" method="post" id="add_<% $div_name %>_dialog_form" name="add_<% $div_name %>_dialog_form">
78             <div class="form-group">
79               <label class="col-sm-6 control-label"><% $prop_select %> </label><br />
80             </div>
81             <div class ="form-group">
82               <div class="col-sm-6" >
83                 <input name="<% $div_name %>_prop" id="<% $div_name %>_prop" class="form-control" type="text" />
84               </div>
85             </div>
87           </div>
88         </div>
89       
90       <div class="modal-footer">
91         <button id="close_add_<% $div_name %>_stockprop_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
92         <button type="button" class="btn btn-primary" name="<% $div_name %>_addProp_submit" id="<% $div_name %>_addProp_submit" title="submit">Submit</button>  
93       </div>
94       </form>
95     </div>
96   </div>
97 </div>
101 <script defer="defer" >
103 jQuery(document).ready(function() {
104    <% $div_name %>_getProps();
107    jQuery('#<% $form_div_id %>').click(function(){
108       jQuery('#<% $div_name %>_add_dialog').modal("show");
109    });
111    jQuery('#<% $div_name %>_addProp_submit').click( function () {
112     <% $div_name %>_addProp() },
113     );
114 });    
116 // note: the $div_name prefix is needed when several instances are created on a page
118 function <% $div_name %>_getProps() {
119   jQuery.ajax( {
120     type: 'GET',
121     url: '/stock/prop/get',
122     data: { stock_id: <% $stock_id %> },
123     success: function(response) { <% $div_name %>_renderProps(response);  },
124     error: function(response) { alert('an error occurred'); } 
125     });
130 function <% $div_name %>_renderProps(props) {
131    var subset = eval(<% $subset_json %>);
133    // eliminate types without values
134    var filteredSet = {};
135    for (var n=0; n<subset.length; n++) {
136      for (var i=0; i<props.length; i++) {
137        if (subset[n] ==  props[i]['type_name']) {
138          filteredSet[subset[n]]=1;
139            }
140        }
141    }
144    var html = '';
145    var prop_string;
146    var edit_privs = <% $edit_privs %>;
147    for (var n in filteredSet) {
148       var lines = new Array();
149       for(var i=0; i<props.length; i++) {
150         if (n ===  props[i]['type_name']) {
151           var lineStr = props[i]['value'];
152           if (jQuery.cookie("sgn_session_id") && edit_privs === 1) {
153             lineStr = lineStr + '[<a href="javascript:<% $div_name %>_deleteProp(\''+props[i]['value']+'\', '+props[i]['stockprop_id']+')">X</a>]';
154           }
155           lines.push(lineStr);
156         }
158       }
159       html = html + '<b>'+n+'</b>&nbsp;&nbsp;';
160       //html  = html + lineStr;
161       html = html + lines.join(", ");
162       html = html + '<br />\n';
163    }
164    jQuery('#<% $div_name %>_content').html(html);
170 function <% $div_name %>_addProp() {
171   var prop_type = jQuery('#<% $div_name %>_select').val();
172   var prop = jQuery('#<% $div_name %>_prop').val();
173   prop = prop.trim();
174   if (prop === '') { alert("Please fill in the field."); return; }
176   jQuery.ajax( {
177     type: 'POST',
178     url: '/stock/prop/add',
179     beforeSend: function(){
180         jQuery('#working_modal').modal('show');
181     },
182     data: { 'stock_id' : <% $stock_id %>, 'prop' : prop, 'prop_type': prop_type },
183     success: function(response) {
184         jQuery('#working_modal').modal('hide');
185         if ("error" in response) { alert ('ERROR '+response.error); }
186         if ("message" in response) {
187             alert('Successfully added property: ' + prop + '. ('+response.message+')');
188         }
189     },
190     error: function(response) {
191         jQuery('#working_modal').modal('hide');
192         alert('an error occurred while storing the prop ' + response.error);
193     },
194     complete: function() {
195         <% $div_name %>_getProps();
196         jQuery('#<% $div_name %>_add_dialog').modal("hide");
197     },                             
198   });
199   
200   }
203 function <% $div_name %>_deleteProp(stockprop_value, stockprop_id) {
204     var yes = confirm('Delete stockprop '+stockprop_value+'?');
205     if (yes) {
206         jQuery.ajax( {
207             method: 'GET',
208             url: '/stock/prop/delete',
209             data: { 'stockprop_id' : stockprop_id },
210             success: function(response) {
211             if ('message' in response) {
212                 alert(response.message);
213                 //location.reload();
214             }
215             if ('error'   in response) {  alert(response.error);   }
216            },
217            error: function(response) { alert('An error occurred. Please try again later.');
218            },
219          complete: function() {
220            <% $div_name %>_getProps();
221          }
222         });
223     }
226 </script>