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