Improved add-modal

hledger-web/Foundation.hs

@@ -340,15 +340,23 @@ addform _ vd@VD{..} = [hamlet|
 <form#addform method=POST .form>
  <div .form-group>
   <div .row>
-   <div .col-md-2 .col-xs-2 .col-sm-2>
+   <div .col-md-2 .col-xs-6 .col-sm-6>
-    <input #date        .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
+    <input #date .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
-   <div .col-md-10 .col-xs-10 .col-sm-10>
+   <div .col-md-10 .col-xs-6 .col-sm-6>
     <input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
- $forall n <- postingnums
+ <div .account-postings>
-   ^{postingfields vd n}
+  $forall n <- postingnums
+    ^{postingfields vd n}
+ <div .col-md-8 .col-xs-8 .col-sm-8>
+ <div .col-md-4 .col-xs-4 .col-sm-4>
+  <button type=submit .btn .btn-default .btn-lg name=submit>add
+ $if length filepaths > 1
+  <br>
+  <span class="input-lg">to:
+   ^{journalselect filepaths}
  <span style="padding-left:2em;">
   <span .small>
-    Tab in last field for
+    Enter a value in the last field for
     <a href="#" onclick="addformAddPosting(); return false;">more
     (or ctrl +, ctrl -)
 |]
@@ -361,37 +369,22 @@ addform _ vd@VD{..} = [hamlet|
   listToJsonValueObjArrayStr as  = preEscapedString $ escapeJSSpecialChars $ encode $ JSArray $ map (\a -> JSObject $ toJSObject [("value", showJSON a)]) as
   numpostings = 4
   postingnums = [1..numpostings]
+  filepaths = map fst $ jfiles j
   postingfields :: ViewData -> Int -> HtmlUrl AppRoute
   postingfields _ n = [hamlet|
-<div .form-group .row>
+<div .form-group .row .account-group ##{grpvar}>
  <div .col-md-8 .col-xs-8 .col-sm-8>
-  <input ##{acctvar} .account-input .typeahead .form-control .input-lg style="width:100%;" type=text name=#{acctvar} placeholder="#{acctph}">
+  <input ##{acctvar} .account-input .typeahead .form-control .input-lg type=text name=#{acctvar} placeholder="#{acctph}">
  <div .col-md-4 .col-xs-4 .col-sm-4>
-  ^{amtfieldorsubmitbtn}
+  <input ##{amtvar} .amount-input .form-control .input-lg type=text name=#{amtvar} placeholder="#{amtph}">
 |]
    where
     islast = n == numpostings
     acctvar = "account" ++ show n
     acctph = "Account " ++ show n
-    amtfieldorsubmitbtn
+    amtvar = "amount" ++ show n
-       | not islast = [hamlet|
+    amtph = "Amount " ++ show n
-          <td>
+    grpvar = "grp" ++ show n
-           <input ##{amtvar} .amount-input .form-control .input-lg type=text size=10 name=#{amtvar} placeholder="#{amtph}">
-         |]
-       | otherwise = [hamlet|
-          <td #addbtncell style="text-align:right;">
-           <button type=submit .btn .btn-default .btn-lg name=submit>add
-           $if length filepaths > 1
-            <br>
-            <span class="input-lg">to:
-            ^{journalselect filepaths}
-         |]
-       where
-        amtvar = "amount" ++ show n
-        amtph = "Amount " ++ show n
-        filepaths = map fst $ jfiles j
-
-           -- <button .btn style="font-size:18px;" type=submit title="Add this transaction">Add
 
 journalselect :: [FilePath] -> HtmlUrl AppRoute
 journalselect journalfilepaths = [hamlet|

hledger-web/static/hledger.js

@@ -30,7 +30,7 @@ $(document).ready(function() {
   $('body, #addform input, #addform select').bind('keydown', 'ctrl+shift+=', addformAddPosting);
   $('body, #addform input, #addform select').bind('keydown', 'ctrl+=',       addformAddPosting);
   $('body, #addform input, #addform select').bind('keydown', 'ctrl+-',       addformDeletePosting);
-  $('#addform tr.posting:last > td:first input').bind('keydown', 'tab', addformAddPostingWithTab);
+  $('.amount-input:last').keypress(addformAddPosting);
 
 
   // highlight the entry from the url hash
@@ -156,44 +156,21 @@ function focus($el) {
 
 // Insert another posting row in the add form.
 function addformAddPosting() {
+  $('.amount-input:last').off('keypress');
   // do nothing if it's not currently visible
   if (!$('#addform').is(':visible')) return;
   // save a copy of last row
-  var lastrow = $('#addform tr.posting:last').clone();
+  var lastrow = $('#addform .form-group:last').clone();
 
   // replace the submit button with an amount field, clear and renumber it, add the keybindings
-  $('#addform tr.posting:last > td:last')
+  var num = $('#addform .account-group').length;
-    .html( $('#addform tr.posting:first > td:last').html() );
-  var num = $('#addform tr.posting').length;
-  $('#addform tr.posting:last > td:last input:last') // input:last here and elsewhere is to avoid autocomplete's extra input
-    .val('')
-    .prop('id','amount'+num)
-    .prop('name','amount'+num)
-    .prop('placeholder','Amount '+num)
-    .bind('keydown', 'ctrl+shift+=', addformAddPosting)
-    .bind('keydown', 'ctrl+=', addformAddPosting)
-    .bind('keydown', 'ctrl+-', addformDeletePosting);
-
-  // set up the new last row's account field.
-  // First typehead, it's hard to enable on new DOM elements
-  var $acctinput = lastrow.find('.account-input:last');
-  // XXX nothing works
-  // $acctinput.typeahead('destroy'); //,'NoCached');
-  // lastrow.on("DOMNodeInserted", function () {
-  //   //$(this).find(".typeahead").typeahead();
-  //   console.log('DOMNodeInserted');
-  //  // infinite loop
-  //  console.log($(this).find('.typeahead'));
-  //   //enableTypeahead($(this).find('.typeahead'), accountsSuggester);
-  // });
-  // setTimeout(function (){
-  //   $('#addform tr.posting:last input.account-input').typeahead('destroy');
-  //   enableTypeahead($('#addform tr.posting:last input.account-input:last'), accountsSuggester);
-  // }, 1000);
 
   // insert the new last row
-  $('#addform > table > tbody').append(lastrow);
+  $('#addform .account-postings').append(lastrow);
+  // TODO: Enable typehead on dynamically created inputs
 
+  var $acctinput = $('.account-input:last');
+  var $amntinput = $('.amount-input:last');
   // clear and renumber the field, add keybindings
   $acctinput
     .val('')
@@ -204,43 +181,37 @@ function addformAddPosting() {
   $acctinput
     .bind('keydown', 'ctrl+shift+=', addformAddPosting)
     .bind('keydown', 'ctrl+=', addformAddPosting)
-    .bind('keydown', 'ctrl+-', addformDeletePosting)
+    .bind('keydown', 'ctrl+-', addformDeletePosting);
-    .bind('keydown', 'tab', addformAddPostingWithTab);
+
-}
+  $amntinput
+    .val('')
+    .prop('id','amount'+(num+1))
+    .prop('name','amount'+(num+1))
+    .prop('placeholder','Amount '+(num+1))
+    .keypress(addformAddPosting);
+
+  $acctinput
+    .bind('keydown', 'ctrl+shift+=', addformAddPosting)
+    .bind('keydown', 'ctrl+=', addformAddPosting)
+    .bind('keydown', 'ctrl+-', addformDeletePosting);
 
-// Insert another posting row by tabbing within the last field, also advancing the focus.
-function addformAddPostingWithTab(ev) {
-  // do nothing if called from a non-last row (don't know how to remove keybindings)
-  if ($(ev.target).is('#addform input.account-input:last')) {
-    addformAddPosting();
-    focus($('#addform input.amount-input:last')); // help FF
-    return false;
-  }
-  else
-    return true;
 }
 
 // Remove the add form's last posting row, if empty, keeping at least two.
 function addformDeletePosting() {
-  var num = $('#addform tr.posting').length;
+  var num = $('#addform .account-group').length;
-  if (num <= 2
+  if (num <= 2) return;
-      || $('#addform tr.posting:last > td:first input:last').val() != ''
-     ) return;
-  // copy submit button
-  var btn = $('#addform tr.posting:last > td:last').html();
   // remember if the last row's field or button had focus
   var focuslost =
-    $('#addform tr.posting:last > td:first input:last').is(':focus')
+    $('.account-input:last').is(':focus')
-    || $('#addform tr.posting:last button').is(':focus');
+    || $('.amount-input:last').is(':focus');
   // delete last row
-  $('#addform tr.posting:last').remove();
+  $('#addform .account-group:last').remove();
-  // remember if the last amount field had focus
+  if(focuslost){
-  focuslost = focuslost || 
+    focus($('account-input:last'));
-    $('#addform tr.posting:last > td:last input:last').is(':focus');
+  }
-  // replace new last row's amount field with the button
+  // Rebind keypress
-  $('#addform tr.posting:last > td:last').css('text-align','right').html(btn);
+  $('.amount-input:last').keypress(addformAddPosting);
-  // if deleted row had focus, focus the new last row
-  if (focuslost) $('#addform tr.posting:last > td:first input:last').focus();
 }
 
 //----------------------------------------------------------------------