httemplate/elements/customer-table.html

   1 %  # options example...
   2 %  #
   3 %  # #listrefs...
   4 %  # 'header'      => [ '#', 'Item' ],
   5 %  # 'fields'      => [
   6 %  #                    'column',
   7 %  #                    sub { my ($row,$param) = @_; $param->{"column$row"}; },
   8 %  #                  ],
   9 %  # 'sizes'       => [],                         # sizes ignored for immutable
  10 %  # 'types'       => ['immutable', ''],          # immutable or ''/text
  11 %  # 'param'       => { column0 => 1 },           # preset column of row 0 to 1
  12 %  #
  13
  14 <SCRIPT TYPE="text/javascript">
  15
  16   function clearhint_custnum() {
  17
  18     if ( this.value == 'Not found' || this.value == 'Multiple' ) {
  19       this.value = '';
  20       this.style.color = '#000000';
  21     }
  22
  23   }
  24
  25   function clearhint_customer() {
  26
  27     this.style.color = '#000000';
  28
  29     if ( this.value == '(last name or company)' || this.value == 'Not found' )
  30       this.value = '';
  31
  32   }
  33
  34   function <% $opt{prefix} %>search_custnum() {
  35
  36     this.style.color = '#000000'
  37
  38     var custnum_obj = this;
  39     var searchrow = this.getAttribute('rownum');
  40     var custnum = this.value;
  41
  42     if ( custnum == 'searching...' || custnum == 'Not found' || custnum == '' )
  43       return;
  44
  45     if ( this.getAttribute('magic') == 'nosearch' ) {
  46       this.setAttribute('magic', '');
  47       return;
  48     }
  49
  50     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
  51       <% $opt{prefix} %>addRow();
  52     }
  53     var customer = document.getElementById('customer'+searchrow);
  54     customer.value = 'searching...';
  55     customer.disabled = true;
  56     customer.style.color = '#000000';
  57     customer.style.backgroundColor = '#dddddd';
  58
  59     var customer_select = document.getElementById('cust_select'+searchrow);
  60
  61     customer.style.display = '';
  62     customer_select.style.display = 'none';
  63
  64     function search_custnum_update(name) {
  65
  66       var name = eval('(' + name + ')' );
  67
  68       customer.disabled = false;
  69       customer.style.backgroundColor = '#ffffff';
  70
  71       if ( name.length > 0 ) {
  72         customer.value = name;
  73         customer.setAttribute('magic', 'nosearch');
  74       } else {
  75         customer.value = 'Not found';
  76         customer.style.color = '#ff0000';
  77         custnum_obj.style.color = '#ff0000';
  78
  79       }
  80
  81     }
  82
  83     custnum_search( custnum, search_custnum_update );
  84
  85   }
  86
  87   function <% $opt{prefix} %>search_customer() {
  88
  89     var customer_obj = this;
  90     var searchrow = this.getAttribute('rownum');
  91     var customer = this.value;
  92
  93     if ( customer == 'searching...' || customer == 'Not found' || customer == '' )
  94       return;
  95
  96     if ( this.getAttribute('magic') == 'nosearch' ) {
  97       this.setAttribute('magic', '');
  98       return;
  99     }
 100
 101     if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
 102       <% $opt{prefix} %>addRow();
 103     }
 104
 105     var custnum_obj = document.getElementById('custnum'+searchrow);
 106     custnum_obj.value = 'searching...';
 107     custnum_obj.disabled = true;
 108     custnum_obj.style.color = '#000000';
 109     custnum_obj.style.backgroundColor = '#dddddd';
 110
 111     var customer_select = document.getElementById('cust_select'+searchrow);
 112
 113     function search_customer_update(customers) {
 114
 115       var customerArray = eval('(' + customers + ')');
 116
 117       custnum_obj.disabled = false;
 118       custnum_obj.style.backgroundColor = '#ffffff';
 119
 120       if ( customerArray.length == 0 ) {
 121
 122         custnum_obj.value = 'Not found';
 123         custnum_obj.style.color = '#ff0000';
 124         customer_obj.style.color = '#ff0000';
 125
 126         customer_obj.style.display = '';
 127         customer_select.style.display = 'none';
 128
 129
 130       } else if ( customerArray.length == 1 ) {
 131
 132         custnum_obj.value = customerArray[0][0];
 133         customer_obj.value = customerArray[0][1];
 134
 135         customer_obj.style.display = '';
 136         customer_select.style.display = 'none';
 137
 138
 139       } else {
 140
 141         custnum_obj.value = 'Multiple'; // or something
 142         custnum_obj.style.color = '#ff0000';
 143
 144         //blank the current list
 145         for ( var i = customer_select.length; i >= 0; i-- )
 146           customer_select.options[i] = null;
 147
 148         opt(customer_select, '', 'Multiple customers match "' + customer + '" - select one', '#ff0000');
 149
 150         //add the multiple customers
 151         for ( var s = 0; s < customerArray.length; s++ )
 152           opt(customer_select, customerArray[s][0], customerArray[s][1], '#000000');
 153
 154         opt(customer_select, 'cancel', '(Edit search string)', '#000000');
 155
 156         customer_obj.style.display = 'none';
 157
 158         customer_select.style.display = '';
 159
 160       }
 161
 162     }
 163
 164     smart_search( customer, search_customer_update );
 165
 166   }
 167
 168   function select_customer() {
 169
 170     var custnum = this.options[this.selectedIndex].value;
 171     var customer = this.options[this.selectedIndex].text;
 172
 173     var searchrow = this.getAttribute('rownum');
 174     var custnum_obj = document.getElementById('custnum'+searchrow);
 175     var customer_obj = document.getElementById('customer'+searchrow);
 176
 177     if ( custnum == '' ) {
 178
 179     } else if ( custnum == 'cancel' ) {
 180
 181       custnum_obj.value = '';
 182       custnum_obj.style.color = '#000000';
 183
 184       this.style.display = 'none';
 185       customer_obj.style.display = '';
 186       customer_obj.focus();
 187
 188     } else {
 189
 190       custnum_obj.value = custnum;
 191       custnum_obj.style.color = '#000000';
 192
 193       customer_obj.value = customer;
 194       customer_obj.style.color = '#000000';
 195
 196       this.style.display = 'none';
 197       customer_obj.style.display = '';
 198
 199     }
 200
 201   }
 202
 203   function opt(what,value,text,color) {
 204     var optionName = new Option(text, value, false, false);
 205     optionName.style.color = color;
 206     var length = what.length;
 207     what.options[length] = optionName;
 208   }
 209
 210 </SCRIPT>
 211
 212 <TABLE ID="<% $opt{prefix} %>OneTrueTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
 213
 214 <TR>
 215   <TH>Cust #</TH>
 216   <TH>Customer</TH>
 217 % foreach my $header ( @{$opt{header}} ) {
 218     <TH><% $header %></TH>
 219 % }
 220 </TR>
 221 % my $row = 0;
 222 % for ( $row = 0; exists($param->{"custnum$row"}); $row++ ) {
 223
 224     <TR>
 225
 226       <TD>
 227         <INPUT TYPE="text" NAME="custnum<% $row %>" ID="custnum<% $row %>" SIZE=8 MAXLENGTH=12 VALUE="<% $param->{"custnum$row"} %>" rownum="<% $row %>">
 228           <SCRIPT TYPE="text/javascript">
 229             var custnum_input<% $row %> = document.getElementById("custnum<% $row %>");
 230             custnum_input<% $row %>.onfocus = clearhint_custnum;
 231             custnum_input<% $row %>.onchange = <% $opt{prefix} %>search_custnum;
 232           </SCRIPT>
 233       </TD>
 234
 235       <TD>
 236         <INPUT TYPE="text" NAME="customer<% $row %>" ID="customer<% $row %>" SIZE=64 VALUE="<% $param->{"customer$row"} %>" rownum="<% $row %>">
 237           <SCRIPT TYPE="text/javascript">
 238             var customer_input<% $row %> = document.getElementById("customer<% $row %>");
 239             customer_input<% $row %>.onfocus = clearhint_customer;
 240             customer_input<% $row %>.onclick = clearhint_customer;
 241             customer_input<% $row %>.onchange = <% $opt{prefix} %>search_customer;
 242           </SCRIPT>
 243         <SELECT NAME="cust_select<% $row %>" ID="cust_select<% $row %>" rownum="<% $row %>" STYLE="color:#ff0000; display:none">
 244         </SELECT>
 245           <SCRIPT TYPE="text/javascript">
 246             var customer_select<% $row %> = document.getElementById("cust_select<% $row %>");
 247             customer_select<% $row %>.onchange = select_customer;
 248           </SCRIPT>
 249       </TD>
 250
 251 %   my $col = 0;
 252 %   foreach my $field ( @{$opt{fields}} ) {
 253 %     my $value;
 254 %     if ( ref($field) eq 'CODE' ) {
 255 %       $value = &{$field}($row,$param);
 256 %     } else {
 257 %       $value = $param->{"$field$row"};
 258 %     }
 259 %     my $name = (ref($field) eq 'CODE') ? "column${col}_$row" : "$field$row";
 260 %     my $size = $sizes->[$col] || 10;
 261       <TD>
 262 %     if (! $types->[$col] || $types->[$col] eq 'text') {
 263         <INPUT TYPE="text" NAME="<% $name %>" SIZE="<% $size %>" VALUE="<% $value %>" >
 264 %     } elsif ($types->[$col] eq 'immutable') {
 265         <% $value %>
 266         <INPUT TYPE="hidden" NAME="<% $name %>" VALUE="<% $value %>" >
 267 %     } else {
 268         Cannot represent unknown type: <% $types->[$col] %>
 269 %     }
 270       </TD>
 271 %     $col++;
 272 %   }
 273
 274     </TR>
 275 % }
 276
 277
 278 </TABLE>
 279
 280 <% include('/elements/xmlhttp.html',
 281               'url'  => $p. 'misc/xmlhttp-cust_main-search.cgi',
 282               'subs' => [qw( custnum_search smart_search )],
 283            )
 284 %>
 285
 286 <SCRIPT TYPE="text/javascript">
 287
 288   var <% $opt{prefix} %>rownum = <% $row %>;
 289
 290   function <% $opt{prefix} %>addRow() {
 291
 292     var table = document.getElementById('<% $opt{prefix} %>OneTrueTable');
 293     var tablebody = table.getElementsByTagName('tbody').item(0);
 294
 295     var row = document.createElement('TR');
 296
 297     var custnum_cell = document.createElement('TD');
 298
 299       var custnum_input = document.createElement('INPUT');
 300       custnum_input.setAttribute('name', 'custnum'+<% $opt{prefix} %>rownum);
 301       custnum_input.setAttribute('id',   'custnum'+<% $opt{prefix} %>rownum);
 302       custnum_input.setAttribute('size', 8);
 303       custnum_input.setAttribute('maxlength', 12);
 304       custnum_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 305       custnum_input.onfocus = clearhint_custnum;
 306       custnum_input.onchange = <% $opt{prefix} %>search_custnum;
 307       custnum_cell.appendChild(custnum_input);
 308
 309     row.appendChild(custnum_cell);
 310
 311     var customer_cell = document.createElement('TD');
 312
 313       var customer_input = document.createElement('INPUT');
 314       customer_input.setAttribute('name', 'customer'+<% $opt{prefix} %>rownum);
 315       customer_input.setAttribute('id',   'customer'+<% $opt{prefix} %>rownum);
 316       customer_input.setAttribute('size', 64);
 317       customer_input.setAttribute('value', '(last name or company)' );
 318       customer_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
 319       customer_input.onfocus = clearhint_customer;
 320       customer_input.onclick = clearhint_customer;
 321       customer_input.onchange = <% $opt{prefix} %>search_customer;
 322       customer_cell.appendChild(customer_input);
 323
 324       var customer_select = document.createElement('SELECT');
 325       customer_select.setAttribute('name', 'cust_select'+<% $opt{prefix} %>rownum);
 326       customer_select.setAttribute('id',   'cust_select'+<% $opt{prefix} %>rownum);
 327       customer_select.setAttribute('rownum', <% $opt{prefix} %>rownum);
 328       customer_select.style.color = '#ff0000';
 329       customer_select.style.display = 'none';
 330       customer_select.onchange = select_customer;
 331       customer_cell.appendChild(customer_select);
 332
 333     row.appendChild(customer_cell);
 334
 335 %   my $col = 0;
 336 %   foreach my $field ( @{$opt{fields}} ) {
 337     var my_cell = document.createElement('TD');
 338
 339 %     if ($types->[$col] eq 'immutable') {
 340 %       my $value;
 341 %       if ( ref($field) eq 'CODE' ) {
 342 %         $value = &{$field}($row,$param);
 343 %       } else {
 344 %         $value = $param->{"$field$row"};
 345 %       }
 346         var my_text = document.createTextNode('<% $value %>');
 347         my_cell.appendChild(my_text);
 348 %     }
 349
 350       var my_input = document.createElement('INPUT');
 351       my_input.setAttribute('name', '<% $field %>'+<% $opt{prefix} %>rownum);
 352       my_input.setAttribute('size', <% $sizes->[$col] || 10 %>);
 353 %     if ($types->[$col] eq 'immutable') {
 354         my_input.setAttribute('type', 'hidden');
 355 %     }
 356       my_cell.appendChild(my_input);
 357
 358     row.appendChild(my_cell);
 359
 360 %     $col++;
 361 %   }
 362
 363     tablebody.appendChild(row);
 364
 365     <% $opt{prefix} %>rownum++;
 366
 367   }
 368
 369 % unless ($cgi->param('error')) {
 370   <% $opt{prefix} %>addRow();
 371 % }
 372 </SCRIPT>
 373
 374 <%init>
 375
 376 my(%opt) = @_;
 377
 378 $opt{prefix} = '' unless defined $opt{prefix};
 379 $opt{prefix} .= '_' if $opt{prefix};
 380
 381 my $types = $opt{'types'} ? [ @{$opt{'types'}} ] : [];
 382 my $sizes = $opt{'sizes'} ? [ @{$opt{'sizes'}} ] : [];
 383
 384 my $param = $opt{param};
 385 $param = $cgi->Vars if $cgi->param('error');
 386
 387 </%init>