httemplate/elements/customer-table.html

   1 <%doc>
   2
   3 Example:
   4
   5   include( '/elements/customer-table.html',
   6
   7              ###
   8              # required
   9              ###
  10
  11              #listrefs...
  12              'header'        => [ '#', 'Item' ],
  13              'fields'        => [
  14                                   'column',
  15                                   sub { my ($row,$param) = @_;
  16                                         $param->{"column$row"};
  17                                       },
  18                                 ],
  19
  20              ###
  21              # optional
  22              ###
  23
  24              'name_singular' => 'customer', #label
  25
  26              #listrefs
  27              'types'         => ['immutable', ''], # immutable or ''/text
  28              'align'         => [ 'c', 'l', 'r', '' ],
  29              'size'          => [],                # sizes ignored for immutable
  30              'color'         => [],
  31              'footer'        => ['string', '_TOTAL'], # strings or the special
  32                                                       #value _TOTAL
  33              'footer_align'  => [ 'c', 'l', 'r', '' ],
  34
  35              'param'         => { column0 => 1 },  # preset column of row 0 to 1
  36
  37          )
  38
  39 </%doc>
  40
  41 <SCRIPT TYPE="text/javascript">
  42
  43   function clearhint_custnum() {
  44
  45     if ( this.value == 'Not found' || this.value == 'Multiple' ) {
  46       this.value = '';
  47       this.style.color = '#000000';
  48     }
  49
  50   }
  51
  52   function clearhint_customer() {
  53
  54     this.style.color = '#000000';
  55
  56     if ( this.value == '(last name or company)' || this.value == 'Not found' )
  57       this.value = '';
  58
  59   }
  60
  61   function <% $opt{prefix} %>search_custnum() {
  62
  63     this.style.color = '#000000'
  64
  65     var custnum_obj = this;
  66     var searchrow = this.getAttribute('rownum');
  67     var custnum = this.value;
  68
  69     if ( custnum == 'searching...' || custnum == 'Not found' || custnum == '' )
  70       return;
  71
  72     if ( this.getAttribute('magic') == 'nosearch' ) {
  73       this.setAttribute('magic', '');
  74       return;
  75     }
  76
  77     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
  78       <% $opt{prefix} %>addRow();
  79     }
  80     var customer = document.getElementById('customer'+searchrow);
  81     customer.value = 'searching...';
  82     customer.disabled = true;
  83     customer.style.color = '#000000';
  84     customer.style.backgroundColor = '#dddddd';
  85
  86     var customer_select = document.getElementById('cust_select'+searchrow);
  87
  88     customer.style.display = '';
  89     customer_select.style.display = 'none';
  90
  91     function search_custnum_update(name) {
  92
  93       var name = eval('(' + name + ')' );
  94
  95       customer.disabled = false;
  96       customer.style.backgroundColor = '#ffffff';
  97
  98       if ( name.length > 0 ) {
  99         customer.value = name;
 100         customer.setAttribute('magic', 'nosearch');
 101       } else {
 102         customer.value = 'Not found';
 103         customer.style.color = '#ff0000';
 104         custnum_obj.style.color = '#ff0000';
 105
 106       }
 107
 108     }
 109
 110     custnum_search( custnum, search_custnum_update );
 111
 112   }
 113
 114   function <% $opt{prefix} %>search_customer() {
 115
 116     var customer_obj = this;
 117     var searchrow = this.getAttribute('rownum');
 118     var customer = this.value;
 119
 120     if ( customer == 'searching...' || customer == 'Not found' || customer == '' )
 121       return;
 122
 123     if ( this.getAttribute('magic') == 'nosearch' ) {
 124       this.setAttribute('magic', '');
 125       return;
 126     }
 127
 128     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
 129       <% $opt{prefix} %>addRow();
 130     }
 131
 132     var custnum_obj = document.getElementById('custnum'+searchrow);
 133     custnum_obj.value = 'searching...';
 134     custnum_obj.disabled = true;
 135     custnum_obj.style.color = '#000000';
 136     custnum_obj.style.backgroundColor = '#dddddd';
 137
 138     var customer_select = document.getElementById('cust_select'+searchrow);
 139
 140     function search_customer_update(customers) {
 141
 142       var customerArray = eval('(' + customers + ')');
 143
 144       custnum_obj.disabled = false;
 145       custnum_obj.style.backgroundColor = '#ffffff';
 146
 147       if ( customerArray.length == 0 ) {
 148
 149         custnum_obj.value = 'Not found';
 150         custnum_obj.style.color = '#ff0000';
 151         customer_obj.style.color = '#ff0000';
 152
 153         customer_obj.style.display = '';
 154         customer_select.style.display = 'none';
 155
 156
 157       } else if ( customerArray.length == 1 ) {
 158
 159         custnum_obj.value = customerArray[0][0];
 160         customer_obj.value = customerArray[0][1];
 161
 162         customer_obj.style.display = '';
 163         customer_select.style.display = 'none';
 164
 165
 166       } else {
 167
 168         custnum_obj.value = 'Multiple'; // or something
 169         custnum_obj.style.color = '#ff0000';
 170
 171         //blank the current list
 172         for ( var i = customer_select.length; i >= 0; i-- )
 173           customer_select.options[i] = null;
 174
 175         opt(customer_select, '', 'Multiple customers match "' + customer + '" - select one', '#ff0000');
 176
 177         //add the multiple customers
 178         for ( var s = 0; s < customerArray.length; s++ )
 179           opt(customer_select, customerArray[s][0], customerArray[s][1], '#000000');
 180
 181         opt(customer_select, 'cancel', '(Edit search string)', '#000000');
 182
 183         customer_obj.style.display = 'none';
 184
 185         customer_select.style.display = '';
 186
 187       }
 188
 189     }
 190
 191     smart_search( customer, search_customer_update );
 192
 193   }
 194
 195   function select_customer() {
 196
 197     var custnum = this.options[this.selectedIndex].value;
 198     var customer = this.options[this.selectedIndex].text;
 199
 200     var searchrow = this.getAttribute('rownum');
 201     var custnum_obj = document.getElementById('custnum'+searchrow);
 202     var customer_obj = document.getElementById('customer'+searchrow);
 203
 204     if ( custnum == '' ) {
 205
 206     } else if ( custnum == 'cancel' ) {
 207
 208       custnum_obj.value = '';
 209       custnum_obj.style.color = '#000000';
 210
 211       this.style.display = 'none';
 212       customer_obj.style.display = '';
 213       customer_obj.focus();
 214
 215     } else {
 216
 217       custnum_obj.value = custnum;
 218       custnum_obj.style.color = '#000000';
 219
 220       customer_obj.value = customer;
 221       customer_obj.style.color = '#000000';
 222
 223       this.style.display = 'none';
 224       customer_obj.style.display = '';
 225
 226     }
 227
 228   }
 229
 230   function opt(what,value,text,color) {
 231     var optionName = new Option(text, value, false, false);
 232     optionName.style.color = color;
 233     var length = what.length;
 234     what.options[length] = optionName;
 235   }
 236
 237 </SCRIPT>
 238
 239 <TABLE ID="<% $opt{prefix} %>OneTrueTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
 240
 241 <TR>
 242   <TH>Cust #</TH>
 243   <TH>Customer</TH>
 244 % foreach my $header ( @{$opt{header}} ) {
 245     <TH><% $header %></TH>
 246 % }
 247 </TR>
 248 % my $row = 0;
 249 % for ( $row = 0; exists($param->{"custnum$row"}); $row++ ) {
 250
 251     <TR>
 252
 253       <TD>
 254         <INPUT TYPE      = "text"
 255                NAME      = "custnum<% $row %>"
 256                ID        = "custnum<% $row %>"
 257                SIZE      = 8
 258                MAXLENGTH = 12
 259                STYLE     = "text-align:right;"
 260                VALUE     = "<% $param->{"custnum$row"} %>"
 261                rownum    = "<% $row %>"
 262         >
 263         <SCRIPT TYPE="text/javascript">
 264           var custnum_input<% $row %> = document.getElementById("custnum<% $row %>");
 265           custnum_input<% $row %>.onfocus = clearhint_custnum;
 266           custnum_input<% $row %>.onchange = <% $opt{prefix} %>search_custnum;
 267         </SCRIPT>
 268       </TD>
 269
 270       <TD>
 271         <INPUT TYPE="text" NAME="customer<% $row %>" ID="customer<% $row %>" SIZE=64 VALUE="<% $param->{"customer$row"} %>" rownum="<% $row %>">
 272           <SCRIPT TYPE="text/javascript">
 273             var customer_input<% $row %> = document.getElementById("customer<% $row %>");
 274             customer_input<% $row %>.onfocus = clearhint_customer;
 275             customer_input<% $row %>.onclick = clearhint_customer;
 276             customer_input<% $row %>.onchange = <% $opt{prefix} %>search_customer;
 277           </SCRIPT>
 278         <SELECT NAME="cust_select<% $row %>" ID="cust_select<% $row %>" rownum="<% $row %>" STYLE="color:#ff0000; display:none">
 279         </SELECT>
 280           <SCRIPT TYPE="text/javascript">
 281             var customer_select<% $row %> = document.getElementById("cust_select<% $row %>");
 282             customer_select<% $row %>.onchange = select_customer;
 283           </SCRIPT>
 284       </TD>
 285
 286 %   my $col = 0;
 287 %   foreach my $field ( @{$opt{fields}} ) {
 288 %     my $value;
 289 %     if ( ref($field) eq 'CODE' ) {
 290 %       $value = &{$field}($row,$param);
 291 %     } else {
 292 %       $value = $param->{"$field$row"};
 293 %     }
 294 %     my $name  = (ref($field) eq 'CODE') ? "column${col}_$row" : "$field$row";
 295 %     my $align = $align{ $opt{align}->[$col] || 'l' };
 296 %     my $size  = $sizes->[$col]  || 10;
 297 %     my $color = $opt{color}->[$col];
 298 %     my $font = $color ? qq(<FONT COLOR="$color">) : '';
 299 %     my $onchange = '';
 300 %     if ( $opt{footer}->[$col] eq '_TOTAL' ) {
 301 %       $total[$col] += $value;
 302 %       $onchange = $opt{prefix}. "calc_total$col();";
 303 %       $onchange = qq(onchange="$onchange" onkeyup="$onchange");
 304 %     }
 305       <TD ALIGN="<% $align %>">
 306 %     if (! $types->[$col] || $types->[$col] eq 'text') {
 307         <INPUT TYPE  = "text"
 308                NAME  = "<% $name %>"
 309                ID    = "<% $name %>"
 310                SIZE  = "<% $size %>"
 311                STYLE = "text-align: <% $align %>;"
 312                VALUE = "<% $value %>"
 313                <% $onchange %>
 314         >
 315 %     } elsif ($types->[$col] eq 'immutable') {
 316         <% $font %><% $value %><% $font ? '</FONT>' : '' %>
 317         <INPUT TYPE="hidden" NAME="<% $name %>" VALUE="<% $value %>" >
 318 %     } else {
 319         Cannot represent unknown type: <% $types->[$col] %>
 320 %     }
 321       </TD>
 322 %     $col++;
 323 %   }
 324
 325     </TR>
 326 % }
 327
 328 <TR>
 329   <TH COLSPAN=2 ID="<% $opt{'prefix'} %>_TOTAL_TOTAL">
 330     Total <% $row ? $row-1 : 0 %>
 331     <% PL($opt{name_singular} || 'customer', ( $row ? $row-1 : 0 ) ) %>
 332   </TH>
 333 % my $col = 0;
 334 % foreach my $footer ( @{$opt{footer}} ) {
 335 %   my $align = $align{ $opt{'footer_align'}->[$col] || 'c' };
 336 %   if ($footer eq '_TOTAL' ) {
 337 %     my $id = $opt{'fields'}->[$col];
 338 %     $id = ref($id) ? "column${col}_TOTAL" : "${id}_TOTAL";
 339       <TH ALIGN="<% $align %>" ID="<% $id %>">&nbsp;<% sprintf('%.2f', $total[$col] ) %></TH>
 340 %   } else {
 341       <TH ALIGN="<% $align %>"><% $footer %></TH>
 342 %   }
 343 %   $col++;
 344 % }
 345 </TR>
 346
 347 </TABLE>
 348
 349 <SCRIPT TYPE="text/javascript">
 350 % my $col = 0;
 351 % foreach my $footer ( @{$opt{footer}} ) {
 352 %   if ($footer eq '_TOTAL' ) {
 353 %     my $name = $opt{fields}->[$col];
 354 %     $name = ref($name) ? "column$col" : $name;
 355       var <% $opt{prefix}.$name %>_CACHE = new Array ();
 356       var <% $opt{prefix} %>th_el = document.getElementById("<%$name%>_TOTAL");
 357       function <% $opt{prefix} %>calc_total<% $col %>() {
 358         var row = 0;
 359         var total = 0;
 360         for ( var row = 0;
 361
 362               ( <% $opt{prefix}.$name%>_CACHE[row] =
 363                                         <% $opt{prefix}.$name%>_CACHE[row]
 364                                      || document.getElementById("<%$name%>"+row)
 365               ) != null;
 366
 367               row++
 368             )
 369         {
 370           var value = <%$name%>_CACHE[row].value;
 371           value = parseFloat(value);
 372           if ( ! isNaN(value) ) {
 373             total = total + value;
 374           }
 375         }
 376         <% $opt{prefix} %>th_el.innerHTML = '&nbsp;' + total.toFixed(2);
 377
 378       }
 379 %   }
 380 %   $col++;
 381 % }
 382 </SCRIPT>
 383
 384 <% include('/elements/xmlhttp.html',
 385               'url'  => $p. 'misc/xmlhttp-cust_main-search.cgi',
 386               'subs' => [qw( custnum_search smart_search )],
 387            )
 388 %>
 389
 390 <SCRIPT TYPE="text/javascript">
 391
 392   var <% $opt{prefix} %>total_el =
 393     document.getElementById("<% $opt{'prefix'} %>_TOTAL_TOTAL");
 394
 395   var <% $opt{prefix} %>rownum = <% $row %>;
 396
 397   function <% $opt{prefix} %>addRow() {
 398
 399     var table = document.getElementById('<% $opt{prefix} %>OneTrueTable');
 400     var tablebody = table.getElementsByTagName('tbody').item(0);
 401
 402     var row = table.insertRow(rownum+1);
 403
 404     var custnum_cell = document.createElement('TD');
 405
 406       var custnum_input = document.createElement('INPUT');
 407       custnum_input.setAttribute('name', 'custnum'+<% $opt{prefix} %>rownum);
 408       custnum_input.setAttribute('id',   'custnum'+<% $opt{prefix} %>rownum);
 409       custnum_input.style.textAlign = 'right';
 410       custnum_input.setAttribute('size', 8);
 411       custnum_input.setAttribute('maxlength', 12);
 412       custnum_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 413       custnum_input.onfocus = clearhint_custnum;
 414       custnum_input.onchange = <% $opt{prefix} %>search_custnum;
 415       custnum_cell.appendChild(custnum_input);
 416
 417     row.appendChild(custnum_cell);
 418
 419     var customer_cell = document.createElement('TD');
 420
 421       var customer_input = document.createElement('INPUT');
 422       customer_input.setAttribute('name', 'customer'+<% $opt{prefix} %>rownum);
 423       customer_input.setAttribute('id',   'customer'+<% $opt{prefix} %>rownum);
 424       customer_input.setAttribute('size', 64);
 425       customer_input.setAttribute('value', '(last name or company)' );
 426       customer_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 427       customer_input.onfocus = clearhint_customer;
 428       customer_input.onclick = clearhint_customer;
 429       customer_input.onchange = <% $opt{prefix} %>search_customer;
 430       customer_cell.appendChild(customer_input);
 431
 432       var customer_select = document.createElement('SELECT');
 433       customer_select.setAttribute('name', 'cust_select'+<% $opt{prefix} %>rownum);
 434       customer_select.setAttribute('id',   'cust_select'+<% $opt{prefix} %>rownum);
 435       customer_select.setAttribute('rownum', <% $opt{prefix} %>rownum);
 436       customer_select.style.color = '#ff0000';
 437       customer_select.style.display = 'none';
 438       customer_select.onchange = select_customer;
 439       customer_cell.appendChild(customer_select);
 440
 441     row.appendChild(customer_cell);
 442
 443 %   my $col = 0;
 444 %   foreach my $field ( @{$opt{fields}} ) {
 445
 446       var my_cell = document.createElement('TD');
 447       my_cell.setAttribute('align', '<% $align{ $opt{align}->[$col] || 'l' } %>');
 448
 449 %     if ($types->[$col] eq 'immutable') {
 450 %       my $value;
 451 %       if ( ref($field) eq 'CODE' ) {
 452 %         $value = &{$field}($row,$param);
 453 %       } else {
 454 %         $value = $param->{"$field$row"};
 455 %       }
 456         var my_text = document.createTextNode('<% $value %>');
 457         my_cell.appendChild(my_text);
 458 %     }
 459
 460       var my_input = document.createElement('INPUT');
 461       my_input.setAttribute('name', '<% $field %>'+<% $opt{prefix} %>rownum);
 462       my_input.setAttribute('id',   '<% $field %>'+<% $opt{prefix} %>rownum);
 463       my_input.style.textAlign = '<% $align{ $opt{align}->[$col] || 'l' } %>';
 464       my_input.setAttribute('size', <% $sizes->[$col] || 10 %>);
 465 %     if ($types->[$col] eq 'immutable') {
 466         my_input.setAttribute('type', 'hidden');
 467 %     }
 468 %     if ( $opt{footer}->[$col] eq '_TOTAL' ) {
 469         my_input.onchange   = <% $opt{prefix} %>calc_total<%$col%>;
 470         my_input.onkeyup    = <% $opt{prefix} %>calc_total<%$col%>;
 471 %     }
 472       my_cell.appendChild(my_input);
 473
 474     row.appendChild(my_cell);
 475
 476 %     $col++;
 477 %   }
 478
 479     //update the total # of rows display
 480     if ( <% $opt{prefix} %>rownum == 1 ) {
 481       <% $opt{prefix} %>total_el.innerHTML =
 482         'Total '
 483           + <% $opt{prefix} %>rownum
 484           + ' <% $opt{name_singular} || 'customer' %>';
 485     } else {
 486       <% $opt{prefix} %>total_el.innerHTML =
 487         'Total '
 488           + <% $opt{prefix} %>rownum
 489           + ' <% PL($opt{name_singular} || 'customer') %>';
 490     }
 491
 492     <% $opt{prefix} %>rownum++;
 493
 494   }
 495
 496 % unless ($cgi->param('error')) {
 497   <% $opt{prefix} %>addRow();
 498 % }
 499 </SCRIPT>
 500
 501 <%init>
 502
 503 my(%opt) = @_;
 504
 505 $opt{prefix} = '' unless defined $opt{prefix};
 506 $opt{prefix} .= '_' if $opt{prefix};
 507
 508 my $types = $opt{'types'} ? [ @{$opt{'types'}} ] : [];
 509 my $sizes = $opt{'size'} ? [ @{$opt{'size'}} ] : [];
 510
 511 my $param = $opt{param};
 512 $param = $cgi->Vars if $cgi->param('error');
 513
 514 $opt{$_} ||= [] foreach qw(align color footer footer_align);
 515
 516 my @total = map 0, @{$opt{footer}};
 517
 518 my %align = (
 519   'l' => 'left',
 520   'r' => 'right',
 521   'c' => 'center',
 522 );
 523
 524 </%init>