Use Bootstrap forms for statement line transaction editor
This commit is contained in:
parent
4b9025185d
commit
43a886b3b5
@ -60,7 +60,7 @@
|
|||||||
{# FIXME: Customise date, etc. #}
|
{# FIXME: Customise date, etc. #}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ statement_line.dt.strftime('%Y-%m-%d') }}</td>
|
<td>{{ statement_line.dt.strftime('%Y-%m-%d') }}</td>
|
||||||
<td colspan="2"><input type="text" name="description" value="{{ statement_line.description }}" class="w-100"></td>
|
<td colspan="2"><input type="text" name="description" value="{{ statement_line.description }}" class="form-control"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -68,24 +68,27 @@
|
|||||||
{# Source line #}
|
{# Source line #}
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><i>{{ 'Dr' if statement_line.quantity >= 0 else 'Cr' }}</i> {{ statement_line.source_account }} {#<a class="text-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a>#}</td>
|
<td>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-text">{{ 'Dr' if statement_line.quantity >= 0 else 'Cr' }}</div>
|
||||||
|
<input type="text" class="form-control" value="{{ statement_line.source_account }}" disabled>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
{% if statement_line.quantity >= 0 %}<td class="has-amount">{{ statement_line.amount().format() }}</td>{% else %}<td></td>{% endif %}
|
{% if statement_line.quantity >= 0 %}<td class="has-amount">{{ statement_line.amount().format() }}</td>{% else %}<td></td>{% endif %}
|
||||||
{% if statement_line.quantity < 0 %}<td class="has-amount">{{ (statement_line.amount()|abs).format() }}</td>{% else %}<td></td>{% endif %}
|
{% if statement_line.quantity < 0 %}<td class="has-amount">{{ (statement_line.amount()|abs).format() }}</td>{% else %}<td></td>{% endif %}
|
||||||
</tr>
|
</tr>
|
||||||
{# Charge lines #}
|
{# Charge lines #}
|
||||||
{% if transaction == None %}
|
{% if transaction == None or transaction.postings|length == 2 %}
|
||||||
<tr data-side="charge">
|
<tr data-side="charge">
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><i>{{ 'Cr' if statement_line.quantity >= 0 else 'Dr' }}</i> <input type="text" name="charge-account"> <a class="text-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a></td>
|
<td>
|
||||||
{% if statement_line.quantity < 0 %}<td class="has-amount">{{ (statement_line.amount()|abs).format() }}</td>{% else %}<td></td>{% endif %}
|
<div class="input-group">
|
||||||
{% if statement_line.quantity >= 0 %}<td class="has-amount">{{ statement_line.amount().format() }}</td>{% else %}<td></td>{% endif %}
|
<div class="input-group-text">{{ 'Cr' if statement_line.quantity >= 0 else 'Dr' }}</div>
|
||||||
</tr>
|
<input type="text" name="charge-account" class="form-control" value="{{ transaction.charge_account(statement_line.source_account) if transaction else '' }}">
|
||||||
{% elif transaction.postings|length == 2 %}
|
<a class="btn btn-outline-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a>
|
||||||
<tr data-side="charge">
|
</div>
|
||||||
<td></td>
|
</td>
|
||||||
<td></td>
|
|
||||||
<td><i>{{ 'Cr' if statement_line.quantity >= 0 else 'Dr' }}</i> <input type="text" name="charge-account" value="{{ transaction.charge_account(statement_line.source_account) }}"> <a class="text-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a></td>
|
|
||||||
{% if statement_line.quantity < 0 %}<td class="has-amount">{{ (statement_line.amount()|abs).format() }}</td>{% else %}<td></td>{% endif %}
|
{% if statement_line.quantity < 0 %}<td class="has-amount">{{ (statement_line.amount()|abs).format() }}</td>{% else %}<td></td>{% endif %}
|
||||||
{% if statement_line.quantity >= 0 %}<td class="has-amount">{{ statement_line.amount().format() }}</td>{% else %}<td></td>{% endif %}
|
{% if statement_line.quantity >= 0 %}<td class="has-amount">{{ statement_line.amount().format() }}</td>{% else %}<td></td>{% endif %}
|
||||||
</tr>
|
</tr>
|
||||||
@ -94,9 +97,29 @@
|
|||||||
<tr data-side="charge">
|
<tr data-side="charge">
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><i>{{ 'Cr' if statement_line.quantity >= 0 else 'Dr' }}</i> <input type="text" name="charge-account" value="{{ posting.account }}"> <a class="text-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a></td>
|
<td>
|
||||||
{% if statement_line.quantity < 0 %}<td class="has-amount">{{ posting.commodity }}<input type="number" name="charge-amount" step="0.01" value="{{ posting.amount().quantity_string() }}"></td>{% else %}<td></td>{% endif %}
|
<div class="input-group">
|
||||||
{% if statement_line.quantity >= 0 %}<td class="has-amount">{{ posting.commodity }}<input type="number" name="charge-amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}"></td>{% else %}<td></td>{% endif %}
|
<div class="input-group-text">{{ 'Cr' if statement_line.quantity >= 0 else 'Dr' }}</div>
|
||||||
|
<input type="text" name="charge-account" class="form-control" value="{{ posting.account }}">
|
||||||
|
<a class="btn btn-outline-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{% if statement_line.quantity < 0 %}
|
||||||
|
<td class="has-amount">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-text">{{ posting.commodity }}</div>
|
||||||
|
<input type="number" name="charge-amount" step="0.01" value="{{ posting.amount().quantity_string() }}" class="form-control">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{% else %}<td></td>{% endif %}
|
||||||
|
{% if statement_line.quantity >= 0 %}
|
||||||
|
<td class="has-amount">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-text">{{ posting.commodity }}</div>
|
||||||
|
<input type="number" name="charge-amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}" class="form-control">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{% else %}<td></td>{% endif %}
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -113,7 +136,7 @@
|
|||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script>
|
<script>
|
||||||
function addPosting(el) {
|
function addPosting(el) {
|
||||||
let trPosting = el.parentNode.parentNode;
|
let trPosting = el.parentNode.parentNode.parentNode;
|
||||||
let trLine = document.getElementById('statement-line');
|
let trLine = document.getElementById('statement-line');
|
||||||
let qtyf = parseFloat(trLine.dataset.quantity);
|
let qtyf = parseFloat(trLine.dataset.quantity);
|
||||||
|
|
||||||
@ -123,16 +146,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (trPosting.dataset['side'] === 'charge') {
|
if (trPosting.dataset['side'] === 'charge') {
|
||||||
let inputAmount = trLine.dataset.commodity + '<input type="number" name="charge-amount" step="0.01">';
|
let inputAmount = '<td class="has-amount"><div class="input-group"><div class="input-group-text">' + trLine.dataset.commodity + '</div><input type="number" name="charge-amount" step="0.01" class="form-control"></div></td>';
|
||||||
|
|
||||||
// Add new posting row
|
// Add new posting row
|
||||||
let trNew = document.createElement('tr');
|
let trNew = document.createElement('tr');
|
||||||
trNew.dataset['side'] = 'charge';
|
trNew.dataset['side'] = 'charge';
|
||||||
trNew.innerHTML = '<td></td><td></td><td><i>' + (qtyf >= 0 ? 'Cr' : 'Dr') + '</i> <input type="text" name="charge-account"> <a class="text-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a></td><td>' + (qtyf < 0 ? inputAmount : '') + '</td><td>' + (qtyf >= 0 ? inputAmount : '') + '</td>';
|
trNew.innerHTML = '<td></td><td></td><td><div class="input-group"><div class="input-group-text">' + (qtyf >= 0 ? 'Cr' : 'Dr') + '</div><input type="text" name="charge-account" class="form-control"><a class="btn btn-outline-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a></div></td>' + (qtyf < 0 ? inputAmount : '<td></td>') + (qtyf >= 0 ? inputAmount : '<td></td>');
|
||||||
trPosting.after(trNew);
|
trPosting.after(trNew);
|
||||||
|
|
||||||
// Put input box in existing row
|
// Put input box in existing row
|
||||||
trPosting.querySelector('.has-amount').innerHTML = inputAmount;
|
trPosting.querySelector('.has-amount').outerHTML = inputAmount;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user