mason/order/catalog_item_details.mas

   1 <%args>
   2 $item_id
   3 $item_name
   4 $species
   5 $variety
   6 $item_type
   7 $category
   8 $material_source
   9 $material_type
  10 $additional_info
  11 $breeding_program
  12 $program_id
  13 $availability => undef
  14 $contact_person_username
  15 $item_prop_id
  16 $check_vendor_role
  17 $image => undef
  18 $selected_image_id => undef
  19 $main_page
  20 </%args>
  21
  22 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables'] &>
  23 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css'] &>
  24
  25 <& /page/page_title.mas, title => "Catalog Item Details for: $item_name" &>
  26
  27 <&| /page/info_section.mas, title=>"Details",  collapsible => 1, collapsed=>0 &>
  28
  29     <div class="panel panel-default">
  30         <div class="panel-body">
  31             <div class="row">
  32                 <div class="col-sm-6">
  33                     <table class="table table-bordered table-hover">
  34                         <tr><td><b>Item Type</b></td><td><% $item_type %> </td></tr>
  35                         <tr><td><b>Species</b></td><td><% $species %> </td></tr>
  36                         <tr><td><b>Variety</b></td><td><% $variety %> </td></tr>
  37                         <tr><td><b>Material Type</b></td><td><% $material_type %> </td></tr>
  38                         <tr><td><b>Category</b></td><td><% $category %></td></tr>
  39                         <tr><td><b>Additional Info</b></td><td><% $additional_info %></td></tr>
  40                         <tr><td><b>Material Source</b><td><% $material_source %></td></tr>
  41                         <tr><td><b>Breeding Program</b></td><td><% $breeding_program %></td></tr>
  42                         <tr><td><b>Availability</b></td><td><% $availability %></td></tr>
  43                         <tr><td><b>Contact Person Username</b></td><td><% $contact_person_username %></td></tr>
  44                         <tr><td><b>Main Detail Page</b></td><td><% $main_page %></td></tr>
  45                     </table>
  46                 </div>
  47                 <div class="col-sm-6">
  48                     <br /><br />
  49 % if ($selected_image_id) {
  50                     <% $image %>
  51 % }
  52                     <br /><br />
  53                 </div>
  54             </div>
  55             <td><a href="/catalog/view"><p>Go to Catalog Page</p></a></td>
  56         </div>
  57     </div>
  58 </&>
  59
  60 % if ($check_vendor_role == 1) {
  61     <&| /page/info_section.mas, title => 'Edit or Remove Catalog Item', collapsible=>1, collapsed=>0 &>
  62         <div class = "well well-sm">
  63             <div class="panel panel-default">
  64                 <div class="panel-body">
  65                     <button id="edit_catalog_item_link" class="btn btn-primary btn-sm">Edit Catalog Item</button>
  66                     <!--
  67                     <button id="delete_catalog_item_button" class="btn btn-primary btn-sm">Delete Catalog Item</button>
  68                     -->
  69                 </div>
  70             </div>
  71         </div>
  72     </&>
  73     <&| /page/info_section.mas, title => 'Add or Remove Image', collapsible=>1, collapsed=>0 &>
  74         <div class = "well well-sm">
  75             <div class = "panel panel-default">
  76                 <div class = "panel-body">
  77                     <div style="overflow:scroll">
  78                         <table id = "catalog_item_images_table" class="table table-hover table-striped">
  79                         </table>
  80                     </div>
  81                 </div>
  82             </div>
  83         </div>
  84     </&>
  85 % }
  86
  87 <div class="modal fade" id="delete_item_success_dialog" name="order_saved_dialog" tabindex="-1" role="dialog" aria-labelledby="deleteItemSuccessDialog">
  88     <div class="modal-dialog" role="document">
  89         <div class="modal-content">
  90             <div class="modal-header">
  91                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  92                 <h4 class="modal-title" id="deleteItemSuccessDialog">Success</h4>
  93             </div>
  94             <div class="modal-body">
  95                 <div class="container-fluid">
  96                     <p>
  97                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
  98                         The catalog item was delete.
  99                     </p>
 100                 </div>
 101             </div>
 102             <div class="modal-footer">
 103                 <button id="dismiss_deleted_message_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 104             </div>
 105         </div>
 106     </div>
 107 </div>
 108
 109 <div class="modal fade" id="add_image_message_dialog" name="add_image_message_dialog" tabindex="-1" role="dialog" aria-labelledby="addImageMessageDialog">
 110     <div class="modal-dialog" role="document">
 111         <div class="modal-content">
 112             <div class="modal-header">
 113                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 114                 <h4 class="modal-title" id="addImageMessageDialog">Success</h4>
 115             </div>
 116             <div class="modal-body">
 117                 <div class="container-fluid">
 118                     <p>
 119                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 120                         The image was added successfully.
 121                     </p>
 122                 </div>
 123             </div>
 124             <div class="modal-footer">
 125                 <button id="dismiss_add_image_message_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close & Reload</button>
 126             </div>
 127         </div>
 128     </div>
 129 </div>
 130
 131 <div class="modal fade" id="remove_image_message_dialog" name="remove_image_message_dialog" tabindex="-1" role="dialog" aria-labelledby="removeImageMessageDialog">
 132     <div class="modal-dialog" role="document">
 133         <div class="modal-content">
 134             <div class="modal-header">
 135                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 136                 <h4 class="modal-title" id="removeImageMessageDialog">Success</h4>
 137             </div>
 138             <div class="modal-body">
 139                 <div class="container-fluid">
 140                     <p>
 141                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 142                         The image was removed from the catalog item.
 143                     </p>
 144                 </div>
 145             </div>
 146             <div class="modal-footer">
 147                 <button id="dismiss_remove_image_message_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close & Reload</button>
 148             </div>
 149         </div>
 150     </div>
 151 </div>
 152
 153 <& /order/edit_catalog_details_dialog.mas, item_name => $item_name, item_id => $item_id, species => $species, variety => $variety, item_type => $item_type, category => $category, material_type => $material_type, material_source => $material_source, breeding_program => $breeding_program, program_id => $program_id, additional_info => $additional_info, contact_person_username => $contact_person_username, item_prop_id => $item_prop_id, availability => $availability &>
 154
 155
 156 <script>
 157
 158 jQuery(document).ready( function() {
 159
 160     var selected_image_id = "<% $selected_image_id %>";
 161
 162     var item_images_table = jQuery('#catalog_item_images_table').DataTable( {
 163             'autoWidth': false,
 164             'order': false,
 165             'searching': false,
 166             'ajax': '/ajax/catalog/image_list/' + <% $item_id %>,
 167             'columns': [
 168                 { title: "Name", "data": "image_name" },
 169                 { title: "Image", "data": "small_image" },
 170                 { title: "Description", "data": "image_description"},
 171                 { title: "Add or Remove Image", "data": "null", "render": function ( data, type, row ) {
 172                     if (row.image_id == selected_image_id) {
 173                         return "<a onclick='removeImage()' >Remove</a>"
 174                     } else {
 175                         return "<a onclick='addImage(\""+row.image_id+"\")' >Add</a>"
 176                     }
 177                 }},
 178             ],
 179     });
 180
 181     jQuery('#delete_catalog_item_button').click( function() {
 182         var response = confirm('Really delete this catalog item? This action cannot be undone.');
 183         if (response) {
 184             jQuery.ajax({
 185                 url: '/ajax/catalog/delete',
 186                 dataType: "json",
 187                 type: 'POST',
 188                 data : {'item_prop_id' : <% $item_prop_id %>},
 189                 beforeSend: function(response){
 190                     jQuery('#working_modal').modal('show');
 191                 },
 192                 success: function(response) {
 193                     jQuery('#working_modal').modal('hide');
 194                     if (response.success == 1) {
 195                         jQuery('#delete_item_success_dialog').modal('show');
 196                     }
 197                     if (response.error_string) {
 198                         alert(response.error_string);
 199                     }
 200                 }
 201             });
 202         }
 203     });
 204
 205     jQuery("#dismiss_deleted_message_dialog").click(function(){
 206         location.reload();
 207     });
 208
 209 });
 210
 211
 212 function addImage(image_id){
 213
 214     var item_name = '<% $item_name %>';
 215     var item_prop_id = '<% $item_prop_id %>';
 216     var image_id = image_id;
 217
 218     jQuery.ajax({
 219         url: '/ajax/catalog/edit_image',
 220         dataType: "json",
 221         type: 'POST',
 222         data : {
 223             'item_name': item_name,
 224             'item_prop_id': item_prop_id,
 225             'image_id': image_id
 226         },
 227
 228         beforeSend: function(response){
 229             jQuery('#working_modal').modal('show');
 230         },
 231         success: function(response) {
 232             jQuery('#working_modal').modal('hide');
 233             if (response.success == 1) {
 234                 jQuery('#add_image_message_dialog').modal('show');
 235             }
 236             if (response.error_string) {
 237                 alert(response.error_string);
 238             }
 239         },
 240         error: function(response){
 241             jQuery('#working_modal').modal('hide');
 242             alert('An error occurred adding image');
 243         }
 244     });
 245
 246     jQuery("#dismiss_add_image_message_dialog").click(function(){
 247         location.reload();
 248     });
 249
 250 }
 251
 252
 253 function removeImage(){
 254
 255     var item_name = '<% $item_name %>';
 256     var item_prop_id = '<% $item_prop_id %>';
 257     var image_id = undefined;
 258
 259     jQuery.ajax({
 260         url: '/ajax/catalog/edit_image',
 261         dataType: "json",
 262         type: 'POST',
 263         data : {
 264             'item_name': item_name,
 265             'item_prop_id': item_prop_id,
 266             'image_id': image_id
 267         },
 268         beforeSend: function(response){
 269             jQuery('#working_modal').modal('show');
 270         },
 271         success: function(response) {
 272             jQuery('#working_modal').modal('hide');
 273             if (response.success == 1) {
 274                 jQuery('#remove_image_message_dialog').modal('show');
 275             }
 276             if (response.error_string) {
 277                 alert(response.error_string);
 278             }
 279         },
 280         error: function(response){
 281             jQuery('#working_modal').modal('hide');
 282             alert('An error occurred removing image');
 283         }
 284     });
 285
 286     jQuery("#dismiss_remove_image_message_dialog").click(function(){
 287         location.reload();
 288     });
 289
 290 }
 291
 292
 293 </script>