view release on metacpan or  search on metacpan

lib/App/AutoCRUD/share/templates/src/table/update.tt  view on Meta::CPAN

  .actions       { float: right; text-align: right; background-color: LightCyan;
                   margin-left: 1em; margin-top: 1em; padding-left: 0.5em }
  .readonly      { background-color: lightgrey }
  .where         { display: inline-block; width: 4em; text-align: right}
  .focused_label { border-bottom: 1px dashed blue }
</style>

<script>
  var tn_tree;
  function setup() {  
    tn_tree = new GvaScript.TreeNavigator(
       'TN_tree', 
       {selectFirstNode: false, tabIndex: -1}
    );
    var form = new GvaScript.Form('update_form', {
      datatree: [% data.init_form %]
     });
    form.register('textarea, input', 'focus', on_focus_input);
    form.register('textarea, input', 'blur',  on_blur_input);
  }

  window.onload = setup;

  function on_focus_input(event) {
    var label = get_label(event);
    if (label)
      label.addClassName('focused_label');

    // deselect treeNavigator
    tn_tree.select(undefined);
  }
    
  function on_blur_input(event) {
    var label = get_label(event);
    if (label)
      label.removeClassName('focused_label');
  }

  function get_label(event) {
    var node = tn_tree.enclosingNode(event.element());
    return node ? tn_tree.label(node) : undefined;
  }

  // TODO : clicking on a column name should set focus to its "set" input

</script>
[% WRAPPER linked_script %][% base %]static/js/autocrud_utils.js[% END %]

[% END; # WRAPPER head %]

[%# ---------- start body ---------- %]

<div class="actions">
  <a href="descr">describe</a> | 
  <a href="search">search</a> this table
</div>


<h1>Update [% data.table %]</h1>

<form action="update" method="POST" id='update_form' accept-charset='utf-8'
   [% "onsubmit='return confirm_n_ary_operation(this,\"update\")'" 
         IF ! data.where_pk %]>

  <div id="TN_tree">

    [% FOREACH multi_cols_key IN data.multi_cols_keys %]
    <div class="TN_node">
      <span class="TN_label groupname">Multi-column keys</span>
      <div class="TN_content">
        <div class="TN_leaf">
          <span class="TN_label colname">[% multi_cols_key %]</span>
          <span class="after_label">
             set <input name="set.[% multi_cols_key %]" size=20
                    readonly class="readonly">
             <span class="where">[%  seen_where ? "and" : "where";
                                     SET seen_where = 1; %]</span>
             <input name="where.[% multi_cols_key %]" size=10
                    readonly class="readonly">
          </span>
        </div>
      </div>
    </div>
    [% END; # FOREACH multi_cols_key IN data.multi_cols_keys %]


    [% FOREACH group IN data.colgroups %]
    <div class="TN_node">
      <span class="TN_label groupname">[% group.name %]</span>
      <div class="TN_content">
        [% FOREACH col IN group.columns;
           SET col_name = col.COLUMN_NAME;
           NEXT IF data.ignore_col.$col_name; %]
        <div class="TN_leaf">

          <span class="TN_label colname" 
                title="[% col.descr %]">[% col_name %]</span>

          <span class="after_label">
            set <input name="set.[% col_name %]" size=20
                   [%~ IF data.noupd.$col_name;
                         " readonly class='readonly'";
                       ELSIF !seen_autofocus; 
                         " autofocus"; 
                         seen_autofocus = 1; 
                       END %]>


            [% IF data.where_pk.defined(col_name) %]
              <b>where</b> <input name="where.[% col_name %]" size=10 readonly
                                  class="readonly" tabindex=-1>
            [% ELSE %]

              [% IF data.where_pk;
                 # updating one single record, so we show current values.
                 # TODO : should improve GvaScript.Form so that we can
                 # replace this <input> by a mere <div>, and yet update
                 # the content automatically at init() %]
                (curr.<input name="curr.[% col_name %]" size=20 readonly
                             class="readonly" tabindex=-1>)
              [% ELSE;