RunasSudo/DrCr
1
Fork 0
Code Issues 1 Pull Requests Releases Activity

Convert transaction editing form to Tailwind CSS

Browse Source
This commit is contained in:
RunasSudo 2024-04-04 18:48:22 +11:00
parent ac00748342
commit dbc1287321
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
1 changed files with 132 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
drcr/templates/journal/journal_edit_transaction.html
View File

@ -1,5 +1,5 @@
{# DrCr: Web-based double-entry bookkeeping framework {# DrCr: Web-based double-entry bookkeeping framework
Copyright (C) 2022–2023 Lee Yingtong Li (RunasSudo) Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by it under the terms of the GNU Affero General Public License as published by
@ -15,26 +15,32 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
#} #}
{% extends 'base.html' %} {% extends 'base_tailwind.html' %}
{% block title %}{{ 'Edit' if transaction and transaction.id else 'New' }} transaction{% endblock %} {% block title %}{{ 'Edit' if transaction and transaction.id else 'New' }} transaction{% endblock %}
{% block content %} {% block content %}
<h1 class="h2 my-4">{{ 'Edit' if transaction and transaction.id else 'New' }} transaction</h1> <h1 class="text-3xl text-gray-900 mb-4">
{{ 'Edit' if transaction and transaction.id else 'New' }} transaction
</h1>
<form method="POST"> <form method="POST">
<table class="table"> <table class="min-w-full">
<thead> <thead>
<tr> <tr class="border-b border-gray-300">
<th>Date</th> <th class="pt-0.5 pb-1 pr-1 text-gray-900 font-semibold text-start">Date</th>
<th colspan="2">Description</th> <th class="pt-0.5 pb-1 px-1 text-gray-900 font-semibold text-start" colspan="2">Description</th>
<th>Dr</th> <th class="pt-0.5 pb-1 px-1 text-gray-900 font-semibold text-start">Dr</th>
<th>Cr</th> <th class="pt-0.5 pb-1 pl-1 text-gray-900 font-semibold text-start">Cr</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><input type="date" name="dt" class="form-control" value="{{ transaction.dt.strftime('%Y-%m-%d') if transaction else '' }}"></td> <td class="pt-2 pb-1 pr-1">
<td colspan="2"><input type="text" name="description" value="{{ transaction.description if transaction else '' }}" class="form-control"></td> <input type="date" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="dt" value="{{ transaction.dt.strftime('%Y-%m-%d') if transaction else '' }}">
</td>
<td class="pt-2 pb-1 px-1" colspan="2">
<input type="text" class="block w-full border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="description" value="{{ transaction.description if transaction else '' }}">
</td>
<td></td> <td></td>
<td></td> <td></td>
</tr> </tr>
@ -42,31 +48,43 @@
{% for posting in transaction.postings %} {% for posting in transaction.postings %}
<tr> <tr>
<td></td> <td></td>
<td></td> {#<td></td>#}
<td> <td class="py-1 px-1" colspan="2">
<div class="input-group"> <div class="relative flex">
<select class="form-select" name="sign" style="flex-grow:0;min-width:5em" onchange="changeDrCr(this)"> <div class="relative flex flex-grow items-stretch shadow-sm">
<option value="dr"{% if posting.quantity >= 0 %} selected{% endif %}>Dr</option> <div class="absolute inset-y-0 left-0 flex items-center">
<option value="cr"{% if posting.quantity < 0 %} selected{% endif %}>Cr</option> <select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600" name="sign" onchange="changeDrCr(this)">
</select> <option value="dr"{% if posting.quantity >= 0 %} selected{% endif %}>Dr</option>
<input type="text" name="account" class="form-control" value="{{ posting.account }}"> <option value="cr"{% if posting.quantity < 0 %} selected{% endif %}>Cr</option>
<a class="btn btn-outline-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a> </select>
</div>
<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account" value="{{ posting.account }}">
</div>
<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</a>
</div> </div>
</td> </td>
{% if posting.quantity >= 0 %} {% if posting.quantity >= 0 %}
<td class="amount-dr has-amount"> <td class="amount-dr has-amount py-1 px-1">
<div class="input-group"> <div class="relative shadow-sm">
<div class="input-group-text">$</div> <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<input type="text" name="amount" value="{{ posting.amount().quantity_string() }}" class="form-control" oninput="changeAmount(this)"> <span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ posting.amount().quantity_string() }}" oninput="changeAmount(this)">
</div> </div>
</td> </td>
<td class="amount-cr"></td> <td class="amount-cr py-1 pl-1"></td>
{% else %} {% else %}
<td class="amount-dr"></td> <td class="amount-dr py-1 px-1"></td>
<td class="amount-cr has-amount"> <td class="amount-cr has-amount py-1 pl-1">
<div class="input-group"> <div class="relative shadow-sm">
<div class="input-group-text">$</div> <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<input type="text" name="amount" value="{{ (posting.amount()|abs).quantity_string() }}" class="form-control" oninput="changeAmount(this)"> <span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" value="{{ (posting.amount()|abs).quantity_string() }}" oninput="changeAmount(this)">
</div> </div>
</td> </td>
{% endif %} {% endif %}
@ -75,43 +93,63 @@
{% else %} {% else %}
<tr> <tr>
<td></td> <td></td>
<td></td> {#<td></td>#}
<td> <td class="py-1 px-1" colspan="2">
<div class="input-group"> <div class="relative flex">
<select class="form-select" name="sign" style="flex-grow:0;min-width:5em" onchange="changeDrCr(this)"> <div class="relative flex flex-grow items-stretch shadow-sm">
<option value="dr" selected>Dr</option> <div class="absolute inset-y-0 left-0 flex items-center">
<option value="cr">Cr</option> <select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600" name="sign" onchange="changeDrCr(this)">
</select> <option value="dr" selected>Dr</option>
<input type="text" name="account" class="form-control"> <option value="cr">Cr</option>
<a class="btn btn-outline-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a> </select>
</div>
<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">
</div>
<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</a>
</div> </div>
</td> </td>
<td class="amount-dr has-amount"> <td class="amount-dr has-amount py-1 px-1">
<div class="input-group"> <div class="relative shadow-sm">
<div class="input-group-text">$</div> <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<input type="text" name="amount" class="form-control" oninput="changeAmount(this)"> <span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">
</div> </div>
</td> </td>
<td class="amount-cr"></td> <td class="amount-cr py-1 pl-1"></td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td></td> {#<td></td>#}
<td> <td class="py-1 px-1" colspan="2">
<div class="input-group"> <div class="relative flex">
<select class="form-select" name="sign" style="flex-grow:0;min-width:5em" onchange="changeDrCr(this)"> <div class="relative flex flex-grow items-stretch shadow-sm">
<option value="dr">Dr</option> <div class="absolute inset-y-0 left-0 flex items-center">
<option value="cr" selected>Cr</option> <select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600" name="sign" onchange="changeDrCr(this)">
</select> <option value="dr">Dr</option>
<input type="text" name="account" class="form-control"> <option value="cr" selected>Cr</option>
<a class="btn btn-outline-primary" href="#" onclick="addPosting(this);return false;"><i class="bi bi-plus-circle-fill"></i></a> </select>
</div>
<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">
</div>
<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</a>
</div> </div>
</td> </td>
<td class="amount-dr"></td> <td class="amount-dr py-1 px-1"></td>
<td class="amount-cr has-amount"> <td class="amount-cr has-amount py-1 pl-1">
<div class="input-group"> <div class="relative shadow-sm">
<div class="input-group-text">$</div> <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<input type="text" name="amount" class="form-control" oninput="changeAmount(this)"> <span class="text-gray-500">$</span>
</div>
<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">
</div> </div>
</td> </td>
</tr> </tr>
@ -119,11 +157,11 @@
</tbody> </tbody>
</table> </table>
<div class="d-flex"> <div class="flex justify-end mt-4 space-x-2">
{% if transaction and transaction.id %} {% if transaction and transaction.id %}
<button type="submit" name="action" value="delete" class="btn btn-outline-danger" onclick="confirm('Are you sure you want to delete this transaction? This operation is irreversible.')">Delete</button> <button type="submit" name="action" value="delete" class="px-3 py-1 text-red-600 ring-1 ring-inset ring-red-500 hover:bg-gray-50" onclick="confirm('Are you sure you want to delete this transaction? This operation is irreversible.')">Delete</button>
{% endif %} {% endif %}
<button type="submit" class="btn btn-primary ms-auto">Save</button> <button type="submit" class="bg-emerald-600 px-3 py-1 text-white shadow-sm hover:bg-emerald-700">Save</button>
</div> </div>
<input type="hidden" name="referrer" value="{{ request.referrer or '' }}"> <input type="hidden" name="referrer" value="{{ request.referrer or '' }}">
@ -131,9 +169,10 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
{# TODO: This would be much easier with React or similar... #}
<script> <script>
function changeDrCr(el) { function changeDrCr(el) {
let trPosting = el.parentNode.parentNode.parentNode; let trPosting = el.parentNode.parentNode.parentNode.parentNode.parentNode;
let amountContent = trPosting.querySelector('.has-amount').innerHTML; let amountContent = trPosting.querySelector('.has-amount').innerHTML;
let amountValue = trPosting.querySelector('.has-amount input').value; let amountValue = trPosting.querySelector('.has-amount input').value;
@ -154,11 +193,40 @@
let trPosting = el.parentNode.parentNode.parentNode; let trPosting = el.parentNode.parentNode.parentNode;
let sign = trPosting.querySelector('select').value; // Use same sign as row clicked let sign = trPosting.querySelector('select').value; // Use same sign as row clicked
let inputAmount = '<div class="input-group"><div class="input-group-text">$</div><input type="text" name="amount" class="form-control" oninput="changeAmount(this)"></div>'; let inputAmount =
'<div class="relative shadow-sm">' +
'<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">' +
'<span class="text-gray-500">$</span>' +
'</div>' +
'<input type="number" class="block w-full border-0 py-1 pl-7 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="amount" step="0.01" oninput="changeAmount(this)">' +
'</div>';
// Add new posting row // Add new posting row
let trNew = document.createElement('tr'); let trNew = document.createElement('tr');
trNew.innerHTML = '<tr><td></td><td></td><td><div class="input-group"><select class="form-select" name="sign" style="flex-grow:0;min-width:5em" onchange="changeDrCr(this)"><option value="dr"' + (sign === 'dr' ? ' selected' : '') + '>Dr</option><option value="cr"' + (sign === 'cr' ? ' selected' : '') + '>Cr</option></select><input type="text" name="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>' + (sign === 'dr' ? ('<td class="amount-dr has-amount">' + inputAmount + '</td>') : '<td class="amount-dr"></td>') + (sign === 'cr' ? ('<td class="amount-cr has-amount">' + inputAmount + '</td>') : '<td class="amount-cr"></td>') + '</tr>'; trNew.innerHTML =
'<tr>' +
'<td></td>' +
'<td class="py-1 px-1" colspan="2">' +
'<div class="relative flex">' +
'<div class="relative flex flex-grow items-stretch shadow-sm">' +
'<div class="absolute inset-y-0 left-0 flex items-center">' +
'<select class="h-full border-0 bg-transparent py-0 pl-2 pr-8 text-gray-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600" name="sign" onchange="changeDrCr(this)">' +
(sign === 'dr' ? '<option value="dr" selected>Dr</option><option value="cr">Cr</option>' : '<option value="dr">Dr</option><option value="cr" selected>Cr</option>') +
'</select>' +
'</div>' +
'<input type="text" class="block w-full border-0 py-1 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600" name="account">' +
'</div>' +
'<a class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" href="#" onclick="addPosting(this);return false;">' +
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">' +
'<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />' +
'</svg>' +
'</a>' +
'</div>' +
'</td>' +
(sign === 'dr' ? ('<td class="amount-dr has-amount py-1 px-1">' + inputAmount + '</td>') : '<td class="amount-dr py-1 px-1"></td>') +
(sign === 'cr' ? ('<td class="amount-cr has-amount py-1 pl-1">' + inputAmount + '</td>') : '<td class="amount-cr py-1 pl-1"></td>') +
'</tr>';
trPosting.after(trNew); trPosting.after(trNew);
} }