Use Bootstrap forms for statement line transaction editor

This commit is contained in:
RunasSudo 2022-12-24 17:58:20 +11:00
parent 4b9025185d
commit 43a886b3b5
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
1 changed files with 42 additions and 19 deletions

View File

@ -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>