[freeside-commits] freeside/httemplate/elements auto-table.html, NONE, 1.1

[Mark Wells]

Update of /home/cvs/cvsroot/freeside/httemplate/elements
In directory wavetail.420.am:/tmp/cvs-serv1454/httemplate/elements

Added Files:
	auto-table.html 
Log Message:
voip_cdr call rating by day and time, RT#4763

--- NEW FILE: auto-table.html ---
<%doc>

Example:
<% include('/elements/auto-table.html',

              ###
              # required
              ###

              'header'        => [ '#',  'Item', 'Amount' ],
              'fields'        => [ 'id', 'name', 'amount' ],

              ###
              # highly recommended
              ###

              'size'          => [ 4, 12, 8 ],
              'maxl'          => [ 4, 12, 8 ],
              'align'         => [ 'right', 'left', 'right' ],

              ###
              # optional
              ###

              'data'          => [ [ 1,  'Widget',      25 ], 
                                   [ 12, 'Super Widget, 7  ] ],
              #or
              'records'       => [ qsearch('item', { } ) ],
              # or any other array of FS::Record objects

              'prefix'        => 'mytable_',
) %>

Values will be passed through as "mytable_id1", etc.
</%doc>

<TABLE ID="<% $prefix %>AutoTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
  <TR>
% foreach (@header) {
    <TH><% $_ %></TH>
% }
  </TR>
% my $row = 0;
% for ( $row = 0; $row < scalar @data; $row++ ) {
  <TR>
%   my $col = 0;
%   for ( $col = 0; $col < scalar @fields; $col++ ) {
%     my $id = $prefix . $fields[$col] . $row;
    <TD>
      <INPUT TYPE      = "text"
             NAME      = "<% $id %>"
             ID        = "<% $id %>"
             SIZE      = <% $size[$col] %>
             MAXLENGTH = <% $maxl[$col] %>
             STYLE     = "text-align:<% $align[$col] %>"
             VALUE     = "<% $data[$row][$col] %>"
             onchange  = "possiblyAddRow();"
      >
    </TD>
%   }
    <TD>
      <IMG SRC     = "<% "${p}images/cross.png" %>" 
           ALT     = "X" 
           onclick = "deleteThisRow(this);"
           >
    </TD>
  </TR>
% }
</TABLE>

<SCRIPT TYPE="text/javascript">
  var <% $prefix %>rownum = <% $row %>;
  var <% $prefix %>table = document.getElementById('<% $prefix %>AutoTable');

  function rownum_of(obj) {
    return (obj.parentNode.parentNode.sectionRowIndex);
  }

  function possiblyAddRow() {
    if ( <% $prefix %>rownum == rownum_of(this) ) {
      <% $prefix %>addRow();
    }
  }

  function <% $prefix %>addRow() {
    var row = <% $prefix %>table.insertRow(<% $prefix %>rownum + 1);
%   my $col = 0;
%   for( $col = 0; $col < scalar @fields; $col++ ) {
%     my $field = $prefix.$fields[$col];
    var <% $field %>_cell = document.createElement('TD');
      var <% $field %>_input = document.createElement('INPUT');
      <% $field %>_input.setAttribute('name', '<% $field %>'+<% $prefix %>rownum);
      <% $field %>_input.setAttribute('id',   '<% $field %>'+<% $prefix %>rownum);
      <% $field %>_input.setAttribute('type', 'text');
      <% $field %>_input.setAttribute('size', <% $size[$col] %>);
      <% $field %>_input.setAttribute('maxlength', <% $maxl[$col] %>);
      <% $field %>_input.style.textAlign = '<% $align[$col] %>';
      <% $field %>_input.onchange = possiblyAddRow;
      <% $field %>_cell.appendChild(<% $field %>_input);
    row.appendChild(<% $field %>_cell);
%   }
    var delcell = document.createElement('TD');
      var delinput = document.createElement('IMG');
      delinput.setAttribute('src', '<% "${p}images/cross.png" %>');
      delinput.setAttribute('alt', 'X');
      delinput.setAttribute('onclick', 'deleteThisRow(this);');
      delcell.appendChild(delinput);
    row.appendChild(delcell);

    <% $prefix %>rownum++;
  }

  function deleteThisRow(obj) {
    if(<% $prefix %>rownum == rownum_of(obj))  {
      <% $prefix %>addRow();
    }
    <% $prefix %>table.deleteRow(rownum_of(obj));
    <% $prefix %>rownum--;
    return(false);
  }

  <% $prefix %>addRow();
</SCRIPT>

<%init>
my %opt = @_;

my @header = @{ $opt{'header'} };
my @fields = @{ $opt{'fields'} };
my @data = ();
if($opt{'data'}) {
  @data = @{ $opt{'data'} };
}
elsif($opt{'records'}) {
  foreach my $rec (@{ $opt{'records'} }) {
    push @data, [ map { $rec->getfield($_) } @fields ];
  }
}
# else @data = ();

my $prefix = $opt{'prefix'};
my @size = $opt{'size'} ? @{ $opt{'size'} } : (map {16} @fields);
my @maxl = $opt{'maxl'} ? @{ $opt{'maxl'} } : @size;
my @align = $opt{'align'} ? @{ $opt{'align'} } : (map {'right'} @fields);

</%init>