httemplate/elements/customer-table.html

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