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