js/brapi/Table.js

   1
   2 //  This is for displaying brapi non-paginated responses in a table format.
   3 //
   4 //  Pass a js object with the headers and data as key:values, such as:
   5 //    {
   6 //        "col1":"col1row1value",
   7 //        "height":"12",
   8 //        "age":"900"
   9 //    }
  10 //
  11 //  as well as the id for the div that you want the table to appear on the web page, e.g. "brapi_map_list_table"
  12 //  as well as optionally, a link js object, which will be used to construct links in the table. e.g. { "name": ["mapId", "/maps/protocols/"] }
  13
  14 function brapi_create_table(data, div_id, link) {
  15     console.log(data);
  16     console.log(div_id);
  17     console.log(link);
  18     var html = "<table class='table table-hover table-bordered'><thead><tr>";
  19     var header = [];
  20     for(var h in data) {
  21         if (data.hasOwnProperty(h)) {
  22             if (checkDefined(link) == 0) {
  23                 header.push(h);
  24             } else {
  25                 for(var link_header in link) {
  26                     if(h != link[link_header][0]) {
  27                         header.push(h);
  28                     }
  29                 }
  30             }
  31         }
  32     }
  33     //console.log(header);
  34     header.sort();
  35     for(var col=0; col<header.length; col++){
  36         html = html+"<th>"+capitalizeEachWord(header[col])+"</th>";
  37     }
  38     html = html+"</tr></thead><tbody>";
  39     html = html+"<tr>";
  40     for(var col=0; col<header.length; col++){
  41         if (checkDefined(link) == 0) {
  42             html = html+"<td>"+data[header[col]]+"</td>";
  43         } else {
  44             for(var link_header in link) {
  45                 if (header[col] == link_header) {
  46                     if (link[link_header][1] == 'stock') {
  47                         html = html+"<td><a href='/"+link[link_header][1]+"/"+data[link[link_header][0]]+"/view'>"+data[link_header]+"</a></td>";
  48                     } else {
  49                         html = html+"<td><a href='/"+link[link_header][1]+"/"+data[link[link_header][0]]+"'>"+data[link_header]+"</a></td>";
  50                     }
  51                 } else {
  52                     html = html+"<td>"+data[header[col]]+"</td>";
  53                 }
  54             }
  55         }
  56     }
  57     html = html+"</tr>";
  58     html = html+"</tbody></table>";
  59     jQuery("#"+div_id).html(html);
  60 }
  61
  62
  63 //  This is for displaying brapi paginated responses in a table format. The brapi response should be paginated over response.result.data and pagination info should be in response.metadata.pagination
  64 //
  65 //  Pass a js object with the headers and data as key:values, such as:
  66 //  [
  67 //    {"col1":"col1row1value", "height":"12", "age":"900"},
  68 //    {"col1":"col1row2value", "height":"1", "age":"9"},
  69 //    {"col1":"col1row3value", "height":"2", "age":"99"}
  70 //  ]
  71 //
  72 //  as well as a pagination js object, such as:
  73 //  {"currentPage": "2", "pageSize": "200", "totalCount": "999", "totalPages":"5"}
  74 //
  75 //  as well as the id for the div that you want the table to appear on the web page, e.g. "brapi_map_list_table"
  76 //  as well as a return url for processing changing currentPage and pageSize
  77 //  as well as optionally, a link js object, which will be used to construct links in the table. e.g. { "name": ["mapId", "/maps/protocols/"] }
  78 //  as well as the search query data so that the query can be run on next page, prev page, etc
  79 //  as well as a list of column names you want to display_columns
  80 //  as well as the column name that should be the value of the select BreedersToolbox
  81 //  as well as a list of column names that can be added as data-attributes to the select box
  82
  83 function brapi_create_paginated_table(data, pagination, div_id, return_url, link, search_query_data, display_columns, select_column, select_data) {
  84     console.log(data);
  85     console.log(pagination);
  86     //console.log(div_id);
  87     //console.log(return_url);
  88     //console.log(link);
  89     //console.log(display_columns);
  90     var current_page = pagination.currentPage;
  91     var next_page = Number(current_page) + 1;
  92     var previous_page = Number(current_page) - 1;
  93     var page_size = pagination.pageSize;
  94     var total_count = pagination.totalCount;
  95     var total_pages = pagination.totalPages;
  96     var url = jQuery("#table_return_url_input").val() ? jQuery("#table_return_url_input").val() : 'This Database';
  97     var html = "<input id='table_div_id_input' type='hidden' value='"+div_id+"'/>";
  98     var html = html+"<input id='table_return_url_input' type='hidden' value='"+return_url+"'/>";
  99     if (checkDefined(link) == 1) {
 100         var html = html+"<input id='table_links_input' type='hidden' value='"+JSON.stringify(link)+"'/>";
 101     } else {
 102         var html = html+"<input id='table_links_input' type='hidden' value='"+link+"'/>";
 103     }
 104     var html = html+"<input id='table_page_size_input' type='hidden' value='"+page_size+"'/>";
 105     var html = html+"<input id='table_next_page_input' type='hidden' value='"+next_page+"'/>";
 106     var html = html+"<input id='table_previous_page_input' type='hidden' value='"+previous_page+"'/>";
 107     var html = html+"<input id='table_checkbox_select_column' type='hidden' value='"+select_column+"'/>";
 108     var html = html+"<input id='table_search_query_params' type='hidden' value='"+JSON.stringify(search_query_data)+"'/>";
 109     var html = html+"<input id='table_display_columns_params' type='hidden' value='"+JSON.stringify(display_columns)+"'/>";
 110     var html = html+"<input id='table_display_select_data_param' type='hidden' value='"+JSON.stringify(select_data)+"'/>";
 111     if (data.length == 0) {
 112         html = html+"<center><h3>No data available!</h3></center>";
 113     } else {
 114         html = html+"<h3>Results From "+url+"</h3><table class='table table-hover table-bordered'><thead><tr><th>Select</th>";
 115         var header = [];
 116         for(var h in data[0]) {
 117             if (data[0].hasOwnProperty(h)) {
 118                 //console.log(h);
 119                 if (jQuery.inArray(h, display_columns) != -1){
 120                     if (checkDefined(link) == 0) {
 121                         header.push(h);
 122                     } else {
 123                         for(var link_header in link) {
 124                             if(h != link[link_header][0]) {
 125                                 header.push(h);
 126                             }
 127                         }
 128                     }
 129                 }
 130             }
 131         }
 132         header.sort();
 133         for(var col=0; col<header.length; col++){
 134             html = html+"<th>"+capitalizeEachWord(header[col])+"</th>";
 135         }
 136         html = html+"</tr></thead><tbody>";
 137         for(var row=0; row<data.length; row++) {
 138             html = html+"<tr><td><input type='checkbox' name='brapi_table_select_"+return_url+"' value='"+data[row][select_column]+"'";
 139             for (var s_data=0; s_data<select_data.length; s_data++){
 140                 html = html + " data-"+select_data[s_data]+"='"+data[row][select_data[s_data]]+"'";
 141             }
 142             html = html + "/></td>";
 143             for(var col=0; col<header.length; col++){
 144                 if (checkDefined(link) == 0) {
 145                     var v = data[row][header[col]];
 146                     if (typeof v === 'object'){
 147                         v = JSON.stringify(v);
 148                     }
 149                     html = html+"<td>"+v+"</td>";
 150                 } else {
 151                     for(var link_header in link) {
 152                         if (header[col] == link_header) {
 153                             if (link[link_header][1] == 'stock') {
 154                                 html = html+"<td><a href='"+link[link_header][1]+"/"+data[row][link[link_header][0]]+"/view'>"+data[row][link_header]+"</a></td>";
 155                             } else {
 156                                 html = html+"<td><a href='"+data[row][link[link_header][0]]+"'>"+data[row][link_header]+"</a></td>";
 157                             }
 158                         } else {
 159                             var v = data[row][header[col]];
 160                             if (typeof v === 'object'){
 161                                 v = JSON.stringify(v);
 162                             }
 163                             html = html+"<td>"+v+"</td>";
 164                         }
 165                     }
 166                 }
 167             }
 168             html = html+"</tr>";
 169         }
 170         html = html+"</tbody></table>";
 171
 172         html = html+"<div class='well well-sm'><div class='row'>";
 173         html = html+"<div class='col-sm-7'><div class='row'><div class='col-sm-2'><button class='btn btn-primary' id='brapi_table_select_submit_"+div_id+"' >Select</button></div><div class='col-sm-7 col-md-5'><div class='btn-group' role='group'>";
 174
 175         if (total_pages > 1) {
 176             if (current_page > 0) {
 177                 html = html+"<button id='table_previous_page_button' class='btn btn-sm btn-default glyphicon glyphicon-arrow-left'></button><button class='btn btn-sm btn-default' style='margin-top:1px'>Page "+current_page+" of "+total_pages+"</button><button id='table_next_page_button' class='btn btn-sm btn-default glyphicon glyphicon-arrow-right'></button>";
 178             } else {
 179                 html = html+"<button class='disabled btn btn-sm btn-default glyphicon glyphicon-arrow-left'></button><button class='btn btn-sm btn-default' style='margin-top:1px'>Page "+current_page+" of "+total_pages+"</button><button id='table_next_page_button' class='btn btn-sm btn-default glyphicon glyphicon-arrow-right'></button>";
 180             }
 181         } else {
 182             html = html+"<button class='disabled btn btn-sm btn-default glyphicon glyphicon-arrow-left'></button><button class='btn btn-sm btn-default' style='margin-top:1px'>Page "+current_page+" of "+total_pages+"</button><button id='table_next_page_button' class='disabled btn btn-sm btn-default glyphicon glyphicon-arrow-right'></button>";
 183         }
 184         html = html+"</div></div><div class='col-sm-3 col-md-5'><div class='input-group input-group-sm'><span class='input-group-addon' id='basic-addon1'>Page:</span><input type='text' id='table_change_current_page_input' class='form-control' placeholder='"+current_page+"' aria-describedby='basic-addon1'></div></div></div></div>";
 185         html = html+"<div class='col-sm-5'><div class='row'><div class='col-sm-7'><div class='input-group input-group-sm'><span class='input-group-addon' id='basic-addon2'>Page Size:</span><input type='text' id='table_change_page_size_input' class='form-control' placeholder='"+page_size+"' aria-describedby='basic-addon2'></div></div><div class='col-sm-5'><button class='btn btn-sm btn-default'>Total: "+total_count+"</button></div></div></div></div>";
 186         html = html+"</div>";
 187     }
 188     jQuery("#"+div_id).html(html);
 189 }
 190
 191 function capitalizeEachWord(string) {
 192     return string.charAt(0).toUpperCase() + string.slice(1);
 193 }
 194
 195 function checkDefined(o) {
 196     if (typeof o === 'undefined' || o === null || o === 'undefined') {
 197         return 0;
 198     } else {
 199         return 1;
 200     }
 201 }
 202
 203 function brapi_recreate_paginated_table(search_query_data, display_columns, select_column, select_data){
 204     var delay = (function(){
 205         var timer = 0;
 206         return function(callback, ms){
 207             clearTimeout (timer);
 208             timer = setTimeout(callback, ms);
 209         };
 210     })();
 211
 212     delay(function() {
 213         jQuery.ajax( {
 214             url: jQuery("#table_return_url_input").val(),
 215             dataType: 'json',
 216             data: search_query_data,
 217             method:'POST',
 218             beforeSend: function() {
 219                 jQuery("#working_modal").modal("show");
 220             },
 221             success: function(response) {
 222                 jQuery("#working_modal").modal("hide");
 223                 //console.log(response);
 224                 var div_id = jQuery("#table_div_id_input").val();
 225                 var return_url = jQuery("#table_return_url_input").val();
 226                 if (checkDefined(jQuery("#table_links_input").val()) == 1) {
 227                     var links = jQuery.parseJSON( jQuery("#table_links_input").val() );
 228                 } else {
 229                     var links = jQuery("#table_links_input").val();
 230                 }
 231                 jQuery("#"+jQuery("#table_div_id_input").val()).empty();
 232                 console.log(search_query_data);
 233                 brapi_create_paginated_table(response.result.data, response.metadata.pagination, div_id, return_url, links, search_query_data, display_columns, select_column, select_data);
 234             },
 235             error: function(response) {
 236                 jQuery("#working_modal").modal("hide");
 237                 alert('An error occurred constructing table after moving to the previous page.');
 238             }
 239         });
 240     }, 200);
 241 }
 242
 243 jQuery(document).ready(function () {
 244
 245     jQuery(document).on( 'click', "#table_next_page_button", function() {
 246         var search_query_data = JSON.parse(jQuery('#table_search_query_params').val());
 247         var display_columns = JSON.parse(jQuery('#table_display_columns_params').val());
 248         var select_data = JSON.parse(jQuery('#table_display_select_data_param').val());
 249         var select_column = jQuery('#table_checkbox_select_column').val();
 250         search_query_data['page'] = jQuery("#table_next_page_input").val();
 251         search_query_data['pageSize'] = jQuery("#table_page_size_input").val();
 252         brapi_recreate_paginated_table(search_query_data, display_columns, select_column, select_data);
 253     });
 254
 255     jQuery(document).on( 'click', "#table_previous_page_button", function() {
 256         var search_query_data = JSON.parse(jQuery('#table_search_query_params').val());
 257         var display_columns = JSON.parse(jQuery('#table_display_columns_params').val());
 258         var select_data = JSON.parse(jQuery('#table_display_select_data_param').val());
 259         var select_column = jQuery('#table_checkbox_select_column').val();
 260         search_query_data['page'] = jQuery("#table_previous_page_input").val();
 261         search_query_data['pageSize'] = jQuery("#table_page_size_input").val();
 262         brapi_recreate_paginated_table(search_query_data, display_columns, select_column, select_data);
 263     });
 264
 265     jQuery(document).on( 'keyup', "#table_change_page_size_input", function() {
 266         var search_query_data = JSON.parse(jQuery('#table_search_query_params').val());
 267         var display_columns = JSON.parse(jQuery('#table_display_columns_params').val());
 268         var select_data = JSON.parse(jQuery('#table_display_select_data_param').val());
 269         var select_column = jQuery('#table_checkbox_select_column').val();
 270         search_query_data['page'] = 0;
 271         search_query_data['pageSize'] = jQuery("#table_change_page_size_input").val();
 272         brapi_recreate_paginated_table(search_query_data, display_columns, select_column, select_data);
 273     });
 274
 275     jQuery(document).on( 'keyup', "#table_change_current_page_input", function() {
 276         var search_query_data = JSON.parse(jQuery('#table_search_query_params').val());
 277         var display_columns = JSON.parse(jQuery('#table_display_columns_params').val());
 278         var select_data = JSON.parse(jQuery('#table_display_select_data_param').val());
 279         var select_column = jQuery('#table_checkbox_select_column').val();
 280         search_query_data['page'] = jQuery("#table_change_current_page_input").val();
 281         brapi_recreate_paginated_table(search_query_data, display_columns, select_column, select_data);
 282     });
 283
 284 });