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