mirror of
https://github.com/simonmichael/hledger.git
synced 2024-11-08 07:09:28 +03:00
Improved add-modal
This commit is contained in:
Dominik Süß
Simon Michael
parent
817fc8d9ec
commit
b29efba09d
@ -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|
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------
|
||||
|
||||
Loading…
Reference in New Issue
Block a user