mason/order/catalog.mas

   1 <%args>
   2
   3 $check_vendor_role
   4 $ordering_service_name => undef
   5 $additional_order_info => undef
   6 $ordering_type => undef
   7 $order_properties => undef
   8 $order_properties_dialog => undef
   9
  10 </%args>
  11
  12 <& /util/import_javascript.mas, classes => [ 'jquery.iframe-post-form', 'jquery', 'jquery.dataTables', 'CXGN.List'] &>
  13 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css'] &>
  14
  15 <& /page/page_title.mas, title => "Catalog" &>
  16
  17 % if ($check_vendor_role == 1) {
  18     <&| /page/info_section.mas, title => 'Manage Catalog', collapsible=>1, collapsed=>0 &>
  19         <div class = "well well-sm">
  20             <div class = "panel panel-default">
  21                 <div class = "panel-body">
  22                     <button id ="manage_catalog_usage_info_button" class="btn btn-default" >Usage Help <span class="glyphicon glyphicon-question-sign"></span></button>
  23                     <button id="add_catalog_item_button" class="btn btn-primary">Add Single Item</button>
  24                     <button id="add_catalog_using_list_button" class="btn btn-primary">Add Multiple Items Using List</button>
  25                     <button id="upload_catalog_items_button" class="btn btn-primary">Upload Multiple Items</button>
  26                 </div>
  27             </div>
  28         </div>
  29     </&>
  30 % }
  31
  32 <&| /page/info_section.mas, title => 'Catalog Items', collapsible=>1, collapsed=>0 &>
  33     <div class = "well well-sm">
  34         <div class = "panel panel-default">
  35             <div class = "panel-body">
  36                 <div style="overflow:scroll">
  37                     <table id = "catalog_items_table" class="table table-hover table-striped">
  38                     </table>
  39                 </div>
  40             </div>
  41         </div>
  42 % if ($ordering_type ne 'single_step') {
  43         <div class="panel panel-default">
  44             <div class="panel-body">
  45                 <button id="your_cart_button" type="button" class="btn btn-primary btn-sm">
  46                     <span class="glyphicon glyphicon-shopping-cart"></span> Your Cart
  47                 </button>
  48             </div>
  49         </div>
  50 %}
  51         <td>
  52             <a href="/order/stocks/view"><p>Go to Manage Order Page</p></a>
  53         </td>
  54     </div>
  55 </&>
  56
  57 <div class="modal fade" id="cart_item_dialog" name="cart_item_dialog" tabindex="-1" role="dialog" aria-labelledby="cartItemDialog">
  58     <div class="modal-dialog modal-lg" role="document">
  59         <div class="modal-content">
  60             <div class="modal-header" style="text-align:center">
  61                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  62                 <h4 class="modal-title" id="cartItemDialog">Your Cart</h4>
  63             </div>
  64             <div class="modal-body">
  65                 <div class="container-fluid">
  66                     <div id="cart_items_div">
  67                     </div>
  68                 </div>
  69             </div>
  70             <div class="modal-footer">
  71                 <button id="close_cart_item_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  72                 <button id="submit_order" type="button" class="btn btn-primary" >Submit Order</button>
  73             </div>
  74         </div>
  75     </div>
  76 </div>
  77
  78 <div class="modal fade" id="cart_message_dialog" name="cart_message_dialog" tabindex="-1" role="dialog" aria-labelledby="cartMessageDialog">
  79     <div class="modal-dialog" role="document">
  80         <div class="modal-content">
  81             <div class="modal-header" style="text-align:center">
  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="cartMessageDialog">Your Cart</h4>
  84             </div>
  85             <div class="modal-body" style="text-align:center">
  86                 <div class="container-fluid">
  87                     <p>
  88                         You do not have any item in your cart
  89                     </p>
  90                 </div>
  91             </div>
  92             <div class="modal-footer">
  93                 <button id="dismiss_cart_message_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  94             </div>
  95         </div>
  96     </div>
  97 </div>
  98
  99 <div class="modal fade" id="order_response_dialog" name="order_response_dialog" tabindex="-1" role="dialog" aria-labelledby="orderResponseDialog">
 100     <div class="modal-dialog" role="document">
 101         <div class="modal-content">
 102             <div class="modal-header">
 103                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 104                 <h4 class="modal-title" id="orderResponseDialog">Your Order</h4>
 105             </div>
 106             <div class="modal-body">
 107                 <div class="container-fluid">
 108                     <div id="ordering_response_div"></div>
 109                 </div>
 110             </div>
 111             <div class="modal-footer">
 112                 <button id="dismiss_order_response_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 113             </div>
 114         </div>
 115     </div>
 116 </div>
 117
 118 <div class="modal fade" id="add_item_detail_dialog" name="add_item_detail_dialog" tabindex="-1" role="dialog" aria-labelledby="addItemDetailDialog">
 119     <div class="modal-dialog modal-lg" role="document">
 120         <div class="modal-content">
 121             <div class="modal-header">
 122                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 123                 <h4 class="modal-title" id="addItemDetailDialog">Add Item Details</h4>
 124             </div>
 125             <div class="modal-body">
 126                 <div class="container-fluid">
 127                     <div id="add_item_detail_div">
 128                     </div>
 129                 </div>
 130             </div>
 131 % if ($ordering_type eq 'single_step') {
 132             <div class="modal-footer">
 133                 <button id="close_submit_item_detail_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 134                 <button id="single_step_submission_button" type="button" class="btn btn-primary" >Submit</button>
 135             </div>
 136 %} else {
 137             <div class="modal-footer">
 138                 <button id="close_add_item_detail_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 139                 <button id="add_item_button" type="button" class="btn btn-primary" >Add Item</button>
 140             </div>
 141 %}
 142         </div>
 143     </div>
 144 </div>
 145
 146 <& /order/upload_catalog_items_dialog.mas, ordering_type => $ordering_type&>
 147 <& /order/add_catalog_item_dialog.mas, ordering_type => $ordering_type &>
 148 <& /order/add_catalog_using_list_dialog.mas, ordering_type => $ordering_type &>
 149 <& /order/manage_catalog_usage_info.mas &>
 150
 151
 152 <script>
 153
 154 jQuery(document).ready( function() {
 155
 156     var ordering_service_name = "<% $ordering_service_name %>";
 157     var additional_order_info = "<% $additional_order_info %>";
 158     var ordering_type = "<% $ordering_type %>";
 159     var order_properties = "<% $order_properties %>";
 160     var property_keys = order_properties.split(",");
 161     var order_properties_dialog = "<% $order_properties_dialog %>";
 162     var property_dialog_keys = order_properties_dialog.split(",");
 163
 164     if (ordering_type == 'single_step') {
 165         jQuery('#catalog_items_table').DataTable( {
 166             'autoWidth': false,
 167             'order': false,
 168             'search':'applied',
 169             'ajax': '/ajax/catalog/items',
 170             columns: [
 171                 { title: "Name", "data": null, "render": function ( data, type, row ) { return "<a href='/catalog/item_details/"+row.item_id+"'>"+row.item_name+"</a>"; } },
 172                 { title: "Type", "data": "item_type" },
 173                 { title: "Material Type", "data": "material_type" },
 174                 { title: "Species", "data": "species" },
 175                 { title: "Variety", "data": "variety" },
 176                 { title: "Category", "data": "category" },
 177                 { title: "Additional Info", "data": "additional_info" },
 178                 { title: "Material Source", "data": "material_source" },
 179                 { title: "Program", "data": "breeding_program" },
 180                 { title: "Availability", "data": "availability"},
 181                 { title: " ", "data": "null", "render": function ( data, type, row ) {
 182                     if (row.availability == 'available') {
 183                         return "<a onclick='addToCart(\""+row.item_name+"\", \""+additional_order_info+"\", \""+ordering_service_name+"\", \""+ordering_type+"\", \""+order_properties_dialog+"\")'>Request</a>";
 184                     } else {
 185                         return ' '
 186                     }
 187                 }},
 188             ],
 189         });
 190     } else {
 191             jQuery('#catalog_items_table').DataTable( {
 192             'autoWidth': false,
 193             'order': false,
 194             'search':'applied',
 195             'ajax': '/ajax/catalog/items',
 196             columns: [
 197                 { title: "Name", "data": null, "render": function ( data, type, row ) { return "<a href='/catalog/item_details/"+row.item_id+"'>"+row.item_name+"</a>"; } },
 198                 { title: "Type", "data": "item_type" },
 199                 { title: "Material Type", "data": "material_type" },
 200                 { title: "Species", "data": "species" },
 201                 { title: "Variety", "data": "variety" },
 202                 { title: "Category", "data": "category" },
 203                 { title: "Additional Info", "data": "additional_info" },
 204                 { title: "Material Source", "data": "material_source" },
 205                 { title: "Program", "data": "breeding_program" },
 206                 { title: "Availability", "data": "availability"},
 207                 { title: "Add to Cart", "data": "null", "render": function ( data, type, row ) {
 208                     if (row.availability == 'available') {
 209                         return "<a onclick='addToCart(\""+row.item_name+"\", \""+additional_order_info+"\", \""+ordering_service_name+"\", \""+ordering_type+"\", \""+order_properties_dialog+"\" )'><span class='glyphicon glyphicon-shopping-cart'></span></a>";
 210                     } else {
 211                         return ' '
 212                     }
 213                 }},
 214             ],
 215         });
 216     }
 217
 218     var lo = new CXGN.List();
 219     var list_id;
 220     var myCart = lo.availableLists('catalog_items')
 221     if (myCart.length > 0) {
 222         list_id = myCart[0][0];
 223     }
 224
 225     jQuery('#your_cart_button').click(function(){
 226         if (!list_id) {
 227             jQuery('#cart_message_dialog').modal('show');
 228         } else {
 229             jQuery('#cart_item_dialog').modal('show');
 230             showListItems('cart_items', list_id);
 231         }
 232     });
 233
 234     jQuery('#add_item_button').click(function(){
 235         var order_details = {};
 236         var item_name = jQuery('#item_name').val();
 237         order_details['Item Name'] = item_name;
 238         for(var i=0; i<property_keys.length; i++){
 239             var each_value = jQuery('#'+ i +'').val();
 240             order_details[property_keys[i]] = each_value;
 241         }
 242
 243         var item_string = JSON.stringify(order_details);
 244
 245         var lo = new CXGN.List();
 246
 247         var myCart = lo.availableLists('catalog_items')
 248         if (myCart.length > 0) {
 249             var list_id = myCart[0][0];
 250             var itemAdded = lo.addToList(list_id, item_string);
 251         } else if (myCart.length == 0) {
 252             var list_id = lo.newList('your_cart');
 253             var itemAdded = lo.addToList(list_id, item_string);
 254             lo.setListType(list_id, 'catalog_items');
 255         } else {
 256             alert ('Error retrieving your cart')
 257         }
 258         if (itemAdded) {
 259             jQuery('#add_item_detail_dialog').modal('hide');
 260             alert("Saved " + item_name + " in your cart");
 261             location.reload();
 262         }
 263
 264     });
 265
 266
 267     jQuery('#submit_order').click( function() {
 268
 269         jQuery.ajax({
 270             url: '/ajax/order/submit',
 271             dataType: "json",
 272             type: 'POST',
 273             data : {
 274                 'list_id' : list_id,
 275             },
 276             beforeSend: function(response){
 277                 jQuery('#working_modal').modal('show');
 278             },
 279             success: function(response) {
 280                 jQuery('#working_modal').modal('hide');
 281                 if (response.success) {
 282                     jQuery.ajax( {
 283                         url: '/list/delete',
 284                         async: false,
 285                         data: { 'list_id': list_id }
 286                     });
 287
 288                     jQuery('#ordering_response_div').html(response.success);
 289
 290                     jQuery('#order_response_dialog').modal('show');
 291                     jQuery('#cart_item_dialog').modal('hide');
 292                 }
 293                 if (response.error_string) {
 294                     alert(response.error_string);
 295                 }
 296             },
 297             error: function(response){
 298                 jQuery('#working_modal').modal('hide');
 299                 alert('An error occurred saving your order');
 300             }
 301
 302         });
 303     });
 304
 305     jQuery("#dismiss_order_response_dialog").click(function(){
 306         location.reload();
 307     });
 308
 309     jQuery('#single_step_submission_button').click(function(){
 310         var order_details = {};
 311         var item_name = jQuery('#item_name').val();
 312         for(var i=0; i<property_keys.length; i++){
 313             var each_value = jQuery('#'+ i +'').val();
 314             order_details[property_keys[i]] = each_value;
 315         }
 316
 317         jQuery.ajax({
 318             url: '/ajax/order/single_step_submission',
 319             dataType: "json",
 320             type: 'POST',
 321             data : {
 322                 'item_name' : item_name,
 323                 'order_details': JSON.stringify(order_details),
 324             },
 325             beforeSend: function(response){
 326                 jQuery('#working_modal').modal('show');
 327             },
 328             success: function(response) {
 329                 jQuery('#working_modal').modal('hide');
 330                 if (response.success) {
 331                     jQuery('#ordering_response_div').html(response.success);
 332
 333                     jQuery('#order_response_dialog').modal('show');
 334                     jQuery('#add_item_detail_dialog').modal('hide');
 335                 }
 336                 if (response.error_string) {
 337                     alert(response.error_string);
 338                 }
 339             },
 340             error: function(response){
 341                 jQuery('#working_modal').modal('hide');
 342                 alert('An error occurred saving your request');
 343             }
 344         });
 345     });
 346
 347
 348 });
 349
 350 function addToCart(item_name, additional_order_info, ordering_service_name, ordering_type, order_properties_dialog ){
 351     var additional_info = additional_order_info.split(",");
 352     var properties = order_properties_dialog.split(",");
 353     var html = '';
 354
 355     html = html + '<form class="form-horizontal"><div class="form-group"><label class="col-sm-3 control-label">Item Name: </label><div class="col-sm-9" ><input class="form-control" id="item_name" name="item_name" value="'+item_name+'" disabled></div><br><br>';
 356     for(var i=0; i<properties.length; i++){
 357         var each_property_info = properties[i].split(":");
 358         if (each_property_info.length == 1 && (properties[i].includes("Date"))) {
 359             html = html + '<label class="col-sm-3 control-label">'+ properties[i] +'</label><div class="col-sm-9" ><input class="form-control" id= '+ i +' name= '+ i +' placeholder="YYYY-MM-DD"></div><br><br>';
 360         } else if (each_property_info.length == 1) {
 361             html = html + '<label class="col-sm-3 control-label">'+ properties[i] +'</label><div class="col-sm-9" ><input class="form-control" id= '+ i +' name= '+ i +' placeholder=""></div><br><br>';
 362         } else {
 363             html = html + '<label class="col-sm-3 control-label">'+ each_property_info[0] +'</label><div class="col-sm-9" ><select class="form-control" id= '+ i +' name= '+ i +'> ';
 364             for (var j=1; j<each_property_info.length; j++) {
 365                 html = html + "<option value='"+each_property_info[j]+"'>" + each_property_info[j] + "</option>";
 366             }
 367             html = html + "</select></div><br><br>";
 368         }
 369     }
 370     html = html + '</div></div></form>';
 371
 372     jQuery('#add_item_detail_div').html(html);
 373     jQuery('#add_item_detail_dialog').modal('show');
 374
 375 }
 376
 377
 378 </script>