slaesvuo/hledger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved add-modal

Browse Source
This commit is contained in:
Dominik Süß 2016-10-17 17:04:33 +02:00 committed by Simon Michael
parent 817fc8d9ec
commit b29efba09d
2 changed files with 52 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
hledger-web/Foundation.hs
View File

@ -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>
<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-2 .col-xs-6 .col-sm-6>
<input #date .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
<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
^{postingfields vd n}
<div .account-postings>
$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
| not islast = [hamlet|
<td>
<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
amtvar = "amount" ++ show n
amtph = "Amount " ++ show n
grpvar = "grp" ++ show n
journalselect :: [FilePath] -> HtmlUrl AppRoute
journalselect journalfilepaths = [hamlet|

91
hledger-web/static/hledger.js
View File

@ -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')
.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);
var num = $('#addform .account-group').length;
// 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', 'tab', addformAddPostingWithTab);
}
.bind('keydown', 'ctrl+-', addformDeletePosting);
$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;
if (num <= 2
|| $('#addform tr.posting:last > td:first input:last').val() != ''
) return;
// copy submit button
var btn = $('#addform tr.posting:last > td:last').html();
var num = $('#addform .account-group').length;
if (num <= 2) return;
// remember if the last row's field or button had focus
var focuslost =
$('#addform tr.posting:last > td:first input:last').is(':focus')
|| $('#addform tr.posting:last button').is(':focus');
$('.account-input:last').is(':focus')
|| $('.amount-input:last').is(':focus');
// delete last row
$('#addform tr.posting:last').remove();
// remember if the last amount field had focus
focuslost = focuslost ||
$('#addform tr.posting:last > td:last input:last').is(':focus');
// replace new last row's amount field with the button
$('#addform tr.posting:last > td:last').css('text-align','right').html(btn);
// if deleted row had focus, focus the new last row
if (focuslost) $('#addform tr.posting:last > td:first input:last').focus();
$('#addform .account-group:last').remove();
if(focuslost){
focus($('account-input:last'));
}
// Rebind keypress
$('.amount-input:last').keypress(addformAddPosting);
}
//----------------------------------------------------------------------