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              'custnum_update_callback' => 'name_of_js_callback' #passed a rownum
  26
  27              #listrefs
  28              'types'         => ['immutable', ''], # immutable or ''/text
  29              'align'         => [ 'c', 'l', 'r', '' ],
  30              'size'          => [],                # sizes ignored for immutable
  31              'color'         => [],
  32              'footer'        => ['string', '_TOTAL'], # strings or the special
  33                                                       #value _TOTAL
  34              'footer_align'  => [ 'c', 'l', 'r', '' ],
  35
  36              'param'         => { column0 => 1 },  # preset column of row 0 to 1
  37
  38          )
  39
  40 </%doc>
  41
  42 <SCRIPT TYPE="text/javascript">
  43
  44   function clearhint_invnum() {
  45
  46     if ( this.value == 'Not found' || this.value == 'Multiple' ) {
  47       this.value = '';
  48       this.style.color = '#000000';
  49     }
  50
  51   }
  52
  53   function clearhint_custnum() {
  54
  55     if ( this.value == 'Not found' || this.value == 'Multiple' ) {
  56       this.value = '';
  57       this.style.color = '#000000';
  58     }
  59
  60   }
  61
  62   function clearhint_customer() {
  63
  64     this.style.color = '#000000';
  65
  66     if ( this.value == '(last name or company)' || this.value == 'Not found' )
  67       this.value = '';
  68
  69   }
  70
  71   function update_customer(searchrow, customerArray) {
  72
  73       var custnum_obj = document.getElementById('custnum'+searchrow);
  74       var customer = document.getElementById('customer'+searchrow);
  75       var customer_select = document.getElementById('cust_select'+searchrow);
  76
  77       custnum_obj.disabled = false;
  78       custnum_obj.style.backgroundColor = '#ffffff';
  79       customer.disabled = false;
  80       customer.style.backgroundColor = '#ffffff';
  81
  82       if ( customerArray.length == 0 ) {
  83
  84           custnum_obj.value = 'Not found';
  85           customer.value = 'Not found';
  86           custnum_obj.style.color = '#ff0000';
  87           customer.style.color = '#ff0000';
  88
  89           customer.style.display = '';
  90           customer_select.style.display = 'none';
  91           return false;
  92
  93       } else if ( customerArray.length == 5 ) {
  94
  95           custnum_obj.value = customerArray[0];
  96           custnum_obj.style.color = '#000000';
  97           customer.value = customerArray[1];
  98
  99           update_balance_text(searchrow, customerArray[2]);
 100           update_status_text( searchrow, customerArray[3]);
 101           update_status_color(searchrow, '#'+customerArray[4]);
 102
 103           customer.style.display = '';
 104           customer_select.style.display = 'none';
 105           return true;
 106       }
 107   }
 108
 109   function <% $opt{prefix} %>search_invnum() {
 110
 111     this.style.color = '#000000'
 112
 113     var invnum_obj = this;
 114     var searchrow = this.getAttribute('rownum');
 115     var invnum = this.value;
 116
 117     if ( invnum == 'searching...' || invnum == 'Not found' || invnum == '' )
 118       return;
 119
 120     if ( this.getAttribute('magic') == 'nosearch' ) {
 121       this.setAttribute('magic', '');
 122       return;
 123     }
 124
 125     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
 126       <% $opt{prefix} %>addRow();
 127     }
 128     var customer = document.getElementById('customer'+searchrow);
 129     customer.value = 'searching...';
 130     customer.disabled = true;
 131     customer.style.color = '#000000';
 132     customer.style.backgroundColor = '#dddddd';
 133
 134     var customer_select = document.getElementById('cust_select'+searchrow);
 135
 136     customer.style.display = '';
 137     customer_select.style.display = 'none';
 138
 139     var custnum_obj = document.getElementById('custnum'+searchrow);
 140     update_balance_text(searchrow, '');
 141     update_status_text(searchrow, '');
 142     update_status_color(searchrow, '#000000');
 143
 144     function search_invnum_update(customers) {
 145
 146       var customerArray = eval('(' + customers + ')');
 147       update_customer(searchrow, customerArray);
 148
 149 % if ( $opt{invnum_update_callback} ) {
 150         <% $opt{invnum_update_callback} %>(searchrow, '<% $opt{prefix} %>')
 151 % }
 152
 153     }
 154
 155     invnum_search( invnum, search_invnum_update );
 156
 157   }
 158
 159   function <% $opt{prefix} %>search_custnum() {
 160
 161     this.style.color = '#000000'
 162
 163     var custnum_obj = this;
 164     var searchrow = this.getAttribute('rownum');
 165     var custnum = this.value;
 166
 167     if ( custnum == 'searching...' || custnum == 'Not found' || custnum == '' )
 168       return;
 169
 170     if ( this.getAttribute('magic') == 'nosearch' ) {
 171       this.setAttribute('magic', '');
 172       return;
 173     }
 174
 175     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
 176       <% $opt{prefix} %>addRow();
 177     }
 178     var customer = document.getElementById('customer'+searchrow);
 179     customer.value = 'searching...';
 180     customer.disabled = true;
 181     customer.style.color = '#000000';
 182     customer.style.backgroundColor = '#dddddd';
 183
 184     var customer_select = document.getElementById('cust_select'+searchrow);
 185
 186     customer.style.display = '';
 187     customer_select.style.display = 'none';
 188
 189     var invnum = document.getElementById('invnum'+searchrow);
 190     invnum.value = '';
 191
 192     update_balance_text(searchrow, '');
 193     update_status_text( searchrow, '');
 194     update_status_color(searchrow, '#000000');
 195
 196     function search_custnum_update(customers) {
 197
 198       var customerArray = eval('(' + customers + ')') || [];
 199       update_customer(searchrow, customerArray);
 200
 201 % if ( $opt{custnum_update_callback} ) {
 202         <% $opt{custnum_update_callback} %>(searchrow, '<% $opt{prefix} %>')
 203 % }
 204     }
 205
 206     custnum_search(custnum, search_custnum_update );
 207
 208   }
 209
 210   function <% $opt{prefix} %>search_customer() {
 211
 212     var customer_obj = this;
 213     var searchrow = this.getAttribute('rownum');
 214     var customer = this.value;
 215
 216     if ( customer == 'searching...' || customer == 'Not found' || customer == '' )
 217       return;
 218
 219     if ( this.getAttribute('magic') == 'nosearch' ) {
 220       this.setAttribute('magic', '');
 221       return;
 222     }
 223
 224     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
 225       <% $opt{prefix} %>addRow();
 226     }
 227
 228     var invnum = document.getElementById('invnum'+searchrow);
 229     invnum.value = '';
 230
 231     var custnum_obj = document.getElementById('custnum'+searchrow);
 232     custnum_obj.value = 'searching...';
 233     custnum_obj.disabled = true;
 234     custnum_obj.style.color = '#000000';
 235     custnum_obj.style.backgroundColor = '#dddddd';
 236
 237     var customer_select = document.getElementById('cust_select'+searchrow);
 238
 239     function search_customer_update(customers) {
 240
 241       var customerArrayArray = eval('(' + customers + ')') || [ [] ];
 242
 243       custnum_obj.disabled = false;
 244       custnum_obj.style.backgroundColor = '#ffffff';
 245
 246       if ( customerArrayArray.length == 1 ) {
 247
 248         update_customer(customerArrayArray[1]);
 249 % if ( $opt{custnum_update_callback} ) {
 250         <% $opt{custnum_update_callback} %>(searchrow, '<% $opt{prefix} %>')
 251 % }
 252
 253       } else {
 254
 255         custnum_obj.value = 'Multiple'; // or something
 256         custnum_obj.style.color = '#ff0000';
 257
 258         //blank the current list
 259         customer_select.options.length = 0;
 260
 261         opt(customer_select, '', 'Multiple customers match "' + customer + '" - select one', '#ff0000');
 262         //add the multiple customers
 263         for ( var s = 0; s < customerArrayArray.length; s++ ) {
 264           opt(customer_select,
 265               JSON.stringify(customerArrayArray[s]),
 266               customerArrayArray[s][1],
 267               '#000000');
 268         }
 269
 270         opt(customer_select, 'cancel', '(Edit search string)', '#000000');
 271
 272         customer_obj.style.display = 'none';
 273
 274         customer_select.style.display = '';
 275
 276       }
 277
 278     }
 279
 280     smart_search( customer, search_customer_update );
 281
 282   }
 283
 284   function select_customer() {
 285
 286     var custnum_balance_status = this.options[this.selectedIndex].value;
 287     var customer = this.options[this.selectedIndex].text;
 288
 289     var searchrow = this.getAttribute('rownum');
 290     var custnum_obj = document.getElementById('custnum'+searchrow);
 291     var customer_obj = document.getElementById('customer'+searchrow);
 292     var balance_obj = document.getElementById('balance'+searchrow);
 293     var status_obj = document.getElementById('status'+searchrow);
 294
 295     if ( custnum_balance_status == '' ) {
 296
 297     } else if ( custnum_balance_status == 'cancel' ) {
 298
 299       custnum_obj.value = '';
 300       custnum_obj.style.color = '#000000';
 301
 302       this.style.display = 'none';
 303       customer_obj.style.display = '';
 304       customer_obj.focus();
 305
 306     } else {
 307
 308       update_customer(searchrow, JSON.parse(custnum_balance_status));
 309
 310 % if ( $opt{custnum_update_callback} ) {
 311       <% $opt{custnum_update_callback} %>(searchrow, '<% $opt{prefix} %>')
 312 % }
 313
 314     }
 315
 316   }
 317
 318   function opt(what,value,text,color) {
 319     var optionName = new Option(text, value, false, false);
 320     optionName.style.color = color;
 321     var length = what.length;
 322     what.options[length] = optionName;
 323   }
 324
 325   function update_status_text(rownum, newval) {
 326     document.getElementById('status'+rownum).value = newval;
 327     document.getElementById('status'+rownum+'_text').innerHTML = newval;
 328   }
 329
 330   function update_status_color(rownum, newval) {
 331     document.getElementById('statuscolor'+rownum).value = newval;
 332     document.getElementById('status'+rownum+'_text').style.color = newval;
 333   }
 334
 335   function update_balance_text(rownum, newval) {
 336     document.getElementById('balance'+rownum).value = newval;
 337     document.getElementById('balance'+rownum+'_text').innerHTML = newval;
 338   }
 339
 340
 341
 342 </SCRIPT>
 343
 344 <TABLE ID="<% $opt{prefix} %>OneTrueTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
 345
 346 <TR>
 347   <TH>Inv #</TH>
 348   <TH>Cust #</TH>
 349   <TH>Status</TH>
 350   <TH>Customer</TH>
 351   <TH>Balance</TH>
 352 % foreach my $header ( @{$opt{header}} ) {
 353     <TH><% $header %></TH>
 354 % }
 355 </TR>
 356 % my $row = 0;
 357 % for ( $row = 0; exists($param->{"custnum$row"}); $row++ ) {
 358
 359     <TR id="row<%$row%>" rownum="<%$row%>">
 360       <TD>
 361         <INPUT TYPE      = "text"
 362                NAME      = "invnum<% $row %>"
 363                ID        = "invnum<% $row %>"
 364                SIZE      = 8
 365                MAXLENGTH = 12
 366                STYLE     = "text-align:right;"
 367                VALUE     = "<% $param->{"invnum$row"} %>"
 368                rownum    = "<% $row %>"
 369         >
 370         <SCRIPT TYPE="text/javascript">
 371           var invnum_input<% $row %> = document.getElementById("invnum<% $row %>");
 372           invnum_input<% $row %>.onfocus = clearhint_invnum;
 373           invnum_input<% $row %>.onchange = <% $opt{prefix} %>search_invnum;
 374         </SCRIPT>
 375       </TD>
 376
 377       <TD>
 378         <INPUT TYPE      = "text"
 379                NAME      = "custnum<% $row %>"
 380                ID        = "custnum<% $row %>"
 381                SIZE      = 8
 382                MAXLENGTH = 12
 383                STYLE     = "text-align:right;"
 384                VALUE     = "<% $param->{"custnum$row"} %>"
 385                rownum    = "<% $row %>"
 386         >
 387         <SCRIPT TYPE="text/javascript">
 388           var custnum_input<% $row %> = document.getElementById("custnum<% $row %>");
 389           custnum_input<% $row %>.onfocus = clearhint_custnum;
 390           custnum_input<% $row %>.onchange = <% $opt{prefix} %>search_custnum;
 391         </SCRIPT>
 392       </TD>
 393
 394       <TD STYLE="text-align: center">
 395         <SPAN
 396                ID        = "status<% $row %>_text"
 397                rownum    = "<% $row %>"
 398                STYLE     = "font-weight: bold;
 399                             color: <%$param->{"statuscolor$row"} || '#000000'%>"
 400
 401         ><% $param->{"status$row"} %></SPAN>
 402         <INPUT TYPE      = "hidden"
 403                NAME      = "status<% $row %>"
 404                ID        = "status<% $row %>"
 405                VALUE     = "<% $param->{"status$row"} %>"
 406                rownum    = "<% $row %>"
 407         >
 408         <INPUT TYPE      = "hidden"
 409                NAME      = "statuscolor<% $row %>"
 410                ID        = "statuscolor<% $row %>"
 411                VALUE     = "<% $param->{"statuscolor$row"} %>"
 412                rownum    = "<% $row %>"
 413         >
 414       </TD>
 415
 416       <TD>
 417         <INPUT TYPE="text" NAME="customer<% $row %>" ID="customer<% $row %>" SIZE=64 VALUE="<% $param->{"customer$row"} %>" rownum="<% $row %>">
 418           <SCRIPT TYPE="text/javascript">
 419             var customer_input<% $row %> = document.getElementById("customer<% $row %>");
 420             customer_input<% $row %>.onfocus = clearhint_customer;
 421             customer_input<% $row %>.onclick = clearhint_customer;
 422             customer_input<% $row %>.onchange = <% $opt{prefix} %>search_customer;
 423           </SCRIPT>
 424         <SELECT NAME="cust_select<% $row %>" ID="cust_select<% $row %>" rownum="<% $row %>" STYLE="color:#ff0000; display:none">
 425         </SELECT>
 426           <SCRIPT TYPE="text/javascript">
 427             var customer_select<% $row %> = document.getElementById("cust_select<% $row %>");
 428             customer_select<% $row %>.onchange = select_customer;
 429           </SCRIPT>
 430       </TD>
 431
 432       <TD STYLE="text-align:right">
 433         <% $money_char %>
 434         <SPAN
 435                ID        = "balance<% $row %>_text"
 436                rownum    = "<% $row %>"
 437         ><% $param->{"balance$row"} %></SPAN>
 438         &nbsp;
 439         <INPUT TYPE      = "hidden"
 440                NAME      = "balance<% $row %>"
 441                ID        = "balance<% $row %>"
 442                VALUE     = "<% $param->{"balance$row"} %>"
 443                rownum    = "<% $row %>"
 444         >
 445       </TD>
 446
 447 %   my $col = 0;
 448 %   foreach my $field ( @{$opt{fields}} ) {
 449 %     my $value;
 450 %     if ( ref($field) eq 'CODE' ) {
 451 %       $value = &{$field}($row,$param);
 452 %     } else {
 453 %       $value = $param->{"$field$row"};
 454 %     }
 455 %     my $name  = (ref($field) eq 'CODE') ? "column${col}_$row" : "$field$row";
 456 %     my $align = $align{ $opt{align}->[$col] || 'l' };
 457 %     my $size  = $sizes->[$col]  || 10;
 458 %     my $color = $opt{color}->[$col];
 459 %     my $font = $color ? qq(<FONT COLOR="$color">) : '';
 460 %     my $onchange = '';
 461 %     if ( $opt{onchange}->[$col] ) {
 462 %       $onchange = 'onchange="'.$opt{onchange}->[$col].'"';
 463 %     }
 464 %     elsif ( $opt{footer}->[$col] eq '_TOTAL' ) {
 465 %       $total[$col] += $value;
 466 %       $onchange = $opt{prefix}. "calc_total$col();";
 467 %       $onchange = qq(onchange="$onchange" onkeyup="$onchange");
 468 %     }
 469       <TD ALIGN="<% $align %>">
 470 %     my $type = $types->[$col] || 'text';
 471 %     if ($type eq 'text' or $type eq 'checkbox') {
 472         <INPUT TYPE  = "<% $type %>"
 473                NAME  = "<% $name %>"
 474                ID    = "<% $name %>"
 475                SIZE  = "<% $size %>"
 476                STYLE = "text-align: <% $align %>;"
 477                VALUE = "<% $value %>"
 478                rownum    = "<% $row %>"
 479                <% $onchange %>
 480         >
 481 %     } elsif ($types->[$col] eq 'immutable') {
 482         <% $font %><% $value %><% $font ? '</FONT>' : '' %>
 483         <INPUT TYPE="hidden" ID="<% $name %>" NAME="<% $name %>" VALUE="<% $value %>" >
 484 %     } else {
 485         Cannot represent unknown type: <% $types->[$col] %>
 486 %     }
 487       </TD>
 488 %     $col++;
 489 %   }
 490     </TR>
 491 % }
 492
 493 <TR id="row_total">
 494   <TH COLSPAN=5 ID="<% $opt{'prefix'} %>_TOTAL_TOTAL">
 495     Total <% $row ? $row-1 : 0 %>
 496     <% PL($opt{name_singular} || 'customer', ( $row ? $row-1 : 0 ) ) %>
 497   </TH>
 498 % my $col = 0;
 499 % foreach my $footer ( @{$opt{footer}} ) {
 500 %   my $align = $align{ $opt{'footer_align'}->[$col] || 'c' };
 501 %   if ($footer eq '_TOTAL' ) {
 502 %     my $id = $opt{'fields'}->[$col];
 503 %     $id = ref($id) ? "column${col}_TOTAL" : "${id}_TOTAL";
 504       <TH ALIGN="<% $align %>" ID="<% $id %>">&nbsp;<% sprintf('%.2f', $total[$col] ) %></TH>
 505 %   } else {
 506       <TH ALIGN="<% $align %>"><% $footer %></TH>
 507 %   }
 508 %   $col++;
 509 % }
 510 </TR>
 511
 512 </TABLE>
 513
 514 <SCRIPT TYPE="text/javascript">
 515 % my $col = 0;
 516 % foreach my $footer ( @{$opt{footer}} ) {
 517 %   if ($footer eq '_TOTAL' ) {
 518 %     my $name = $opt{fields}->[$col];
 519 %     $name = ref($name) ? "column$col" : $name;
 520       var <% $opt{prefix}.$name %>_CACHE = new Array ();
 521       var <% $opt{prefix} %>th_el = document.getElementById("<%$name%>_TOTAL");
 522       function <% $opt{prefix} %>calc_total<% $col %>() {
 523         var row = 0;
 524         var total = 0;
 525         for ( var row = 0;
 526
 527               ( <% $opt{prefix}.$name%>_CACHE[row] =
 528                                         <% $opt{prefix}.$name%>_CACHE[row]
 529                                      || document.getElementById("<%$name%>"+row)
 530               ) != null;
 531
 532               row++
 533             )
 534         {
 535           var value = <%$name%>_CACHE[row].value;
 536           value = parseFloat(value);
 537           if ( ! isNaN(value) ) {
 538             total = total + value;
 539           }
 540         }
 541         <% $opt{prefix} %>th_el.innerHTML = '&nbsp;' + total.toFixed(2);
 542
 543       }
 544 %   }
 545 %   $col++;
 546 % }
 547 </SCRIPT>
 548
 549 <% include('/elements/xmlhttp.html',
 550               'url'  => $p. 'misc/xmlhttp-cust_main-search.cgi',
 551               'subs' => [qw( custnum_search smart_search invnum_search )],
 552            )
 553 %>
 554
 555 <SCRIPT TYPE="text/javascript">
 556
 557   var <% $opt{prefix} %>total_el =
 558     document.getElementById("<% $opt{'prefix'} %>_TOTAL_TOTAL");
 559
 560   var <% $opt{prefix} %>rownum = <% $row %>;
 561
 562   function <% $opt{prefix} %>addRow() {
 563
 564     var table = document.getElementById('<% $opt{prefix} %>OneTrueTable');
 565     var tablebody = table.getElementsByTagName('tbody').item(0);
 566
 567     var row = table.insertRow(table.rows.length - 1);
 568     row.setAttribute('id', 'row'+rownum);
 569
 570     var invnum_cell = document.createElement('TD');
 571
 572       var invnum_input = document.createElement('INPUT');
 573       invnum_input.setAttribute('name', 'invnum'+<% $opt{prefix} %>rownum);
 574       invnum_input.setAttribute('id',   'invnum'+<% $opt{prefix} %>rownum);
 575       invnum_input.style.textAlign = 'right';
 576       invnum_input.setAttribute('size', 8);
 577       invnum_input.setAttribute('maxlength', 12);
 578       invnum_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 579       invnum_input.onfocus = clearhint_invnum;
 580       invnum_input.onchange = <% $opt{prefix} %>search_invnum;
 581       invnum_cell.appendChild(invnum_input);
 582
 583     row.appendChild(invnum_cell);
 584
 585     var custnum_cell = document.createElement('TD');
 586
 587       var custnum_input = document.createElement('INPUT');
 588       custnum_input.setAttribute('name', 'custnum'+<% $opt{prefix} %>rownum);
 589       custnum_input.setAttribute('id',   'custnum'+<% $opt{prefix} %>rownum);
 590       custnum_input.style.textAlign = 'right';
 591       custnum_input.setAttribute('size', 8);
 592       custnum_input.setAttribute('maxlength', 12);
 593       custnum_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 594       custnum_input.onfocus = clearhint_custnum;
 595       custnum_input.onchange = <% $opt{prefix} %>search_custnum;
 596       custnum_cell.appendChild(custnum_input);
 597
 598     row.appendChild(custnum_cell);
 599
 600     var status_cell = document.createElement('TD');
 601       status_cell.style.textAlign = 'center';
 602
 603       var status_span = document.createElement('SPAN');
 604       status_span.setAttribute('id', 'status'+<% $opt{prefix} %>rownum+'_text');
 605       status_span.style.fontWeight = 'bold';
 606       status_span.setAttribute('rownum', <% $opt{prefix} %>rownum);
 607       status_cell.appendChild(status_span);
 608
 609       var status_input = document.createElement('INPUT');
 610       status_input.setAttribute('type', 'hidden');
 611       status_input.setAttribute('name', 'status'+<% $opt{prefix} %>rownum);
 612       status_input.setAttribute('id',   'status'+<% $opt{prefix} %>rownum);
 613       status_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 614       status_cell.appendChild(status_input);
 615
 616       var statuscolor_input = document.createElement('INPUT');
 617       statuscolor_input.setAttribute('type', 'hidden');
 618       statuscolor_input.setAttribute('name', 'statuscolor'+<% $opt{prefix} %>rownum);
 619       statuscolor_input.setAttribute('id',   'statuscolor'+<% $opt{prefix} %>rownum);
 620       statuscolor_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 621       status_cell.appendChild(statuscolor_input);
 622
 623     row.appendChild(status_cell);
 624
 625     var customer_cell = document.createElement('TD');
 626
 627       var customer_input = document.createElement('INPUT');
 628       customer_input.setAttribute('name', 'customer'+<% $opt{prefix} %>rownum);
 629       customer_input.setAttribute('id',   'customer'+<% $opt{prefix} %>rownum);
 630       customer_input.setAttribute('size', 64);
 631       customer_input.setAttribute('value', '(last name or company)' );
 632       customer_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 633       customer_input.onfocus = clearhint_customer;
 634       customer_input.onclick = clearhint_customer;
 635       customer_input.onchange = <% $opt{prefix} %>search_customer;
 636       customer_cell.appendChild(customer_input);
 637
 638       var customer_select = document.createElement('SELECT');
 639       customer_select.setAttribute('name', 'cust_select'+<% $opt{prefix} %>rownum);
 640       customer_select.setAttribute('id',   'cust_select'+<% $opt{prefix} %>rownum);
 641       customer_select.setAttribute('rownum', <% $opt{prefix} %>rownum);
 642       customer_select.style.color = '#ff0000';
 643       customer_select.style.display = 'none';
 644       customer_select.onchange = select_customer;
 645       customer_cell.appendChild(customer_select);
 646
 647     row.appendChild(customer_cell);
 648
 649     var balance_cell = document.createElement('TD');
 650
 651       balance_cell.style.textAlign = 'right';
 652       balance_cell.appendChild(document.createTextNode('<%$money_char%>'));
 653
 654       var balance_span = document.createElement('SPAN');
 655       balance_span.setAttribute('id', 'balance'+<% $opt{prefix} %>rownum+'_text');
 656       balance_span.setAttribute('rownum', <% $opt{prefix} %>rownum);
 657       balance_cell.appendChild(balance_span);
 658
 659       balance_cell.appendChild(
 660         document.createTextNode(String.fromCharCode(160)) //&nbsp;
 661       );
 662
 663       var balance_input = document.createElement('INPUT');
 664       balance_input.setAttribute('type', 'hidden');
 665       balance_input.setAttribute('name', 'balance'+<% $opt{prefix} %>rownum);
 666       balance_input.setAttribute('id',   'balance'+<% $opt{prefix} %>rownum);
 667       balance_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 668       balance_cell.appendChild(balance_input);
 669
 670     row.appendChild(balance_cell);
 671
 672 %   my $col = 0;
 673 %   foreach my $field ( @{$opt{fields}} ) {
 674
 675       var my_cell = document.createElement('TD');
 676       my_cell.setAttribute('align', '<% $align{ $opt{align}->[$col] || 'l' } %>');
 677
 678 %     if ($types->[$col] eq 'immutable') {
 679 %       my $value;
 680 %       if ( ref($field) eq 'CODE' ) {
 681 %         $value = &{$field}($row,$param);
 682 %       } else {
 683 %         $value = $param->{"$field$row"};
 684 %       }
 685         var my_text = document.createTextNode(<% $value |js_string %>);
 686         my_cell.appendChild(my_text);
 687 %     }
 688
 689 %     my $name  = (ref($field) eq 'CODE') ? "column${col}_" : $field;
 690       var my_input = document.createElement('INPUT');
 691       my_input.setAttribute('name', '<% $name %>'+<% $opt{prefix} %>rownum);
 692       my_input.setAttribute('id',   '<% $name %>'+<% $opt{prefix} %>rownum);
 693       my_input.style.textAlign = '<% $align{ $opt{align}->[$col] || 'l' } %>';
 694       my_input.setAttribute('size', <% $sizes->[$col] || 10 %>);
 695       my_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 696 %     if ( $types->[$col] eq 'immutable' ) {
 697         my_input.setAttribute('type', 'hidden');
 698 %     }
 699 %     elsif ( $types->[$col] eq 'checkbox' ) {
 700         my_input.setAttribute('type', 'checkbox');
 701 %     }
 702 %     if ( $opt{onchange}->[$col] ) {
 703         my_input.onchange   = <% $opt{onchange}->[$col] %>;
 704 %     }
 705 %     elsif ( $opt{footer}->[$col] eq '_TOTAL' ) {
 706         my_input.onchange   = <% $opt{prefix} %>calc_total<%$col%>;
 707         my_input.onkeyup    = <% $opt{prefix} %>calc_total<%$col%>;
 708 %     }
 709       my_cell.appendChild(my_input);
 710
 711     row.appendChild(my_cell);
 712
 713 %     $col++;
 714 %   }
 715
 716     //update the total # of rows display
 717     if ( <% $opt{prefix} %>rownum == 1 ) {
 718       <% $opt{prefix} %>total_el.innerHTML =
 719         'Total '
 720           + <% $opt{prefix} %>rownum
 721           + ' <% $opt{name_singular} || 'customer' %>';
 722     } else {
 723       <% $opt{prefix} %>total_el.innerHTML =
 724         'Total '
 725           + <% $opt{prefix} %>rownum
 726           + ' <% PL($opt{name_singular} || 'customer') %>';
 727     }
 728
 729 % if ( $opt{add_row_callback} ) {
 730     <% $opt{add_row_callback} %>(<% $opt{prefix} %>rownum,
 731                                  '<% $opt{prefix} %>');
 732 % }
 733
 734     <% $opt{prefix} %>rownum++;
 735
 736   }
 737
 738 % unless ($cgi->param('error')) {
 739   <% $opt{prefix} %>addRow();
 740 % }
 741 </SCRIPT>
 742
 743 <%init>
 744
 745 my(%opt) = @_;
 746 my $conf = new FS::Conf;
 747
 748 $opt{prefix} = '' unless defined $opt{prefix};
 749 $opt{prefix} .= '_' if $opt{prefix};
 750
 751 my $types = $opt{'type'} ? [ @{$opt{'type'}} ] : [];
 752 my $sizes = $opt{'size'} ? [ @{$opt{'size'}} ] : [];
 753
 754 my $param = $opt{param};
 755 $param = $cgi->Vars if $cgi->param('error');
 756
 757 $opt{$_} ||= [] foreach qw(align color footer footer_align);
 758
 759 my @total = map 0, @{$opt{footer}};
 760
 761 my %align = (
 762   'l' => 'left',
 763   'r' => 'right',
 764   'c' => 'center',
 765 );
 766
 767 my $money_char = $conf->config('money_char') || '$';
 768 </%init>