httemplate/elements/auto-table.html

   1 <%doc>
   2
   3 Example:
   4 <% include('/elements/auto-table.html',
   5
   6               ###
   7               # required
   8               ###
   9
  10               'header'        => [ '#',  'Item', 'Amount' ],
  11               'fields'        => [ 'id', 'name', 'amount' ],
  12
  13               ###
  14               # highly recommended
  15               ###
  16
  17               'size'          => [ 4, 12, 8 ],
  18               'maxl'          => [ 4, 12, 8 ],
  19               'align'         => [ 'right', 'left', 'right' ],
  20
  21               ###
  22               # optional
  23               ###
  24
  25               'data'          => [ [ 1,  'Widget',      25 ],
  26                                    [ 12, 'Super Widget, 7  ] ],
  27               #or
  28               'records'       => [ qsearch('item', { } ) ],
  29               # or any other array of FS::Record objects
  30
  31               'select'        => [ '',
  32                                    [ 1 => 'option 1',
  33                                      2 => 'option 2', ...
  34                                    ], # options for second field
  35                                    '' ],
  36
  37               'prefix'        => 'mytable_',
  38 ) %>
  39
  40 Values will be passed through as "mytable_id1", etc.
  41 </%doc>
  42
  43 <TABLE ID="<% $prefix %>AutoTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
  44   <TR>
  45 % foreach (@header) {
  46     <TH><% $_ %></TH>
  47 % }
  48   </TR>
  49 % my $row = 0;
  50 % for ( $row = 0; $row < scalar @data; $row++ ) {
  51   <TR>
  52 %   my $col = 0;
  53 %   for ( $col = 0; $col < scalar @fields; $col++ ) {
  54 %     my $id = $prefix . $fields[$col];
  55 %     # don't suffix rownum in the final, blank row
  56 %     $id .= $row if $row < (scalar @data) - 1;
  57     <TD>
  58 %     my @o = @{ $select[$col] };
  59 %     if( @o ) {
  60       <SELECT NAME="<% $id %>" ID="<% $id %>">
  61 %       while(@o) {
  62 %         my $val = shift @o;
  63         <OPTION VALUE=<% $val %><%
  64 $val eq $data[$row][$col] ? ' SELECTED' : ''%>><% shift @o %></OPTION>
  65 %       }
  66       </SELECT>
  67 %     }
  68 %     else {
  69       <INPUT TYPE      = "text"
  70              NAME      = "<% $id %>"
  71              ID        = "<% $id %>"
  72              SIZE      = <% $size[$col] %>
  73              MAXLENGTH = <% $maxl[$col] %>
  74              STYLE     = "text-align:<% $align[$col] %>"
  75              VALUE     = "<% $data[$row][$col] %>"
  76 %       if( $opt{'autoadd'} ) {
  77              onchange  = "possiblyAddRow(this);"
  78 %       }
  79       >
  80     </TD>
  81 %     }
  82 %   }
  83     <TD>
  84       <IMG SRC     = "<% "${p}images/cross.png" %>"
  85            ALT     = "X"
  86            onclick = "deleteRow(this);"
  87            >
  88     </TD>
  89   </TR>
  90 % }
  91 </TABLE>
  92 % if( !$opt{'autoadd'} ) {
  93 <INPUT TYPE="button" VALUE="Add" onclick="<% $prefix %>addRow();"><BR>
  94 % }
  95
  96 <SCRIPT TYPE="text/javascript">
  97   var <% $prefix %>rownum = <% $row %>;
  98   var <% $prefix %>table = document.getElementById('<% $prefix %>AutoTable');
  99   // last row is initially blank, clone it and remove it
 100   var <% $prefix %>_blank =
 101     <% $prefix %>table.rows[<% $prefix %>table.rows.length-1].cloneNode(true);
 102 % if( !$opt{'autoadd'} ) {
 103   <% $prefix %>table.deleteRow(<% $prefix %>table.rows.length-1);
 104 % }
 105
 106
 107
 108   function rownum_of(obj) {
 109     return (obj.parentNode.parentNode.sectionRowIndex);
 110   }
 111
 112   function <% $prefix %>possiblyAddRow(obj) {
 113     if ( <% $prefix %>rownum == rownum_of(obj) ) {
 114       <% $prefix %>addRow();
 115     }
 116   }
 117
 118   function <% $prefix %>addRow() {
 119     var row = <% $prefix %>table.insertRow(-1);
 120     var cells = <% $prefix %>_blank.cells;
 121     for (i=0; i<cells.length; i++) {
 122       var node = row.appendChild(cells[i].cloneNode(true));
 123       var input = node.children[0];
 124       input.id = input.id + row.sectionRowIndex;
 125       input.name = input.name + row.sectionRowIndex;
 126     }
 127     <% $prefix %>rownum++;
 128   }
 129
 130   function deleteRow(obj) {
 131     if(<% $prefix %>rownum == rownum_of(obj))  {
 132       <% $prefix %>addRow();
 133     }
 134     <% $prefix %>table.deleteRow(rownum_of(obj));
 135     <% $prefix %>rownum--;
 136     return(false);
 137   }
 138
 139 </SCRIPT>
 140
 141 <%init>
 142 my %opt = @_;
 143
 144 my @header = @{ $opt{'header'} };
 145 my @fields = @{ $opt{'fields'} };
 146 my @data = ();
 147 if($opt{'data'}) {
 148   @data = @{ $opt{'data'} };
 149 }
 150 elsif($opt{'records'}) {
 151   foreach my $rec (@{ $opt{'records'} }) {
 152     push @data, [ map { $rec->getfield($_) } @fields ];
 153   }
 154 }
 155 # else @data = ();
 156 push @data, [ map {''} @fields ]; # make a blank row
 157
 158 my $prefix = $opt{'prefix'};
 159 my @size = $opt{'size'} ? @{ $opt{'size'} } : (map {16} @fields);
 160 my @maxl = $opt{'maxl'} ? @{ $opt{'maxl'} } : @size;
 161 my @align = $opt{'align'} ? @{ $opt{'align'} } : (map {'right'} @fields);
 162 my @select = @{ $opt{'select'} || [] };
 163 foreach (0..scalar(@fields)-1) {
 164   $select[$_] ||= [];
 165 }
 166 </%init>