From 64b49b00fff9e4b09ba0af9d37232d4c49800fec Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sat, 6 Apr 2024 02:00:30 +1100
Subject: [PATCH] Apply custom accounts combobox to transaction editor

---
 drcr/journal/views.py                         |   4 +-
 .../components/accounts_combobox_inner.html   |   2 +-
 .../journal/journal_edit_transaction.html     | 184 +++++++++---------
 3 files changed, 90 insertions(+), 100 deletions(-)

diff --git a/drcr/journal/views.py b/drcr/journal/views.py
index add4ef5..4ba4fa7 100644
--- a/drcr/journal/views.py
+++ b/drcr/journal/views.py
@@ -38,7 +38,7 @@ def journal():
 @app.route('/journal/new-transaction', methods=['GET', 'POST'])
 def journal_new_transaction():
 	if request.method == 'GET':
-		return render_template('journal/journal_edit_transaction.html', transaction=None)
+		return render_template('journal/journal_edit_transaction.html', transaction=None, all_accounts=all_accounts())
 	
 	# New transaction
 	transaction = Transaction(
@@ -73,7 +73,7 @@ def journal_edit_transaction():
 		abort(404)
 	
 	if request.method == 'GET':
-		return render_template('journal/journal_edit_transaction.html', transaction=transaction)
+		return render_template('journal/journal_edit_transaction.html', transaction=transaction, all_accounts=all_accounts())
 	
 	if request.form.get('action', None) == 'delete':
 		# Delete transaction
diff --git a/drcr/templates/components/accounts_combobox_inner.html b/drcr/templates/components/accounts_combobox_inner.html
index d6ac009..fbcd632 100644
--- a/drcr/templates/components/accounts_combobox_inner.html
+++ b/drcr/templates/components/accounts_combobox_inner.html
@@ -20,7 +20,7 @@
 		<path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
 	</svg>
 </button>
-<ul class="hidden peer-focus:block absolute z-10 mt-1 max-h-60 w-full overflow-auto bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+<ul class="hidden peer-focus:block absolute z-20 mt-1 max-h-60 w-full overflow-auto bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
 	{% for account in all_accounts %}
 		<li class="group relative cursor-default select-none py-1 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600">
 			<span class="combobox-text block truncate group-data-[selected=selected]:font-semibold">{{ account }}</span>
diff --git a/drcr/templates/journal/journal_edit_transaction.html b/drcr/templates/journal/journal_edit_transaction.html
index af51929..a989a5c 100644
--- a/drcr/templates/journal/journal_edit_transaction.html
+++ b/drcr/templates/journal/journal_edit_transaction.html
@@ -18,6 +18,80 @@
 {% extends 'base.html' %}
 {% block title %}{{ 'Edit' if transaction and transaction.id else 'New' }} transaction{% endblock %}
 
+{# Macros for template posting rows as these are reused #}
+{% macro template_dr() %}
+	<tr>
+		<td></td>
+		{#<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 z-10">
+						<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)">
+							<option value="dr" selected>Dr</option>
+							<option value="cr">Cr</option>
+						</select>
+					</div>
+					<div class="relative combobox w-full">
+						<input type="text" class="bordered-field pl-16 peer" name="account" autocomplete="off">
+						{% include 'components/accounts_combobox_inner.html' %}
+					</div>
+				</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>
+		<td class="amount-dr has-amount py-1 px-1">
+			<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="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
+			</div>
+		</td>
+		<td class="amount-cr py-1 pl-1"></td>
+	</tr>
+{% endmacro %}
+{% macro template_cr() %}
+	<tr>
+		<td></td>
+		{#<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 z-10">
+						<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)">
+							<option value="dr">Dr</option>
+							<option value="cr" selected>Cr</option>
+						</select>
+					</div>
+					<div class="relative combobox w-full">
+						<input type="text" class="bordered-field pl-16 peer" name="account" autocomplete="off">
+						{% include 'components/accounts_combobox_inner.html' %}
+					</div>
+				</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>
+		<td class="amount-dr py-1 px-1"></td>
+		<td class="amount-cr has-amount py-1 pl-1">
+			<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="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
+			</div>
+		</td>
+	</tr>
+{% endmacro %}
+
 {% block content %}
 	<h1 class="page-heading mb-4">
 		{{ 'Edit' if transaction and transaction.id else 'New' }} transaction
@@ -52,13 +126,16 @@
 							<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">
+										<div class="absolute inset-y-0 left-0 flex items-center z-10">
 											<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)">
 												<option value="dr"{% if posting.quantity >= 0 %} selected{% endif %}>Dr</option>
 												<option value="cr"{% if posting.quantity < 0 %} selected{% endif %}>Cr</option>
 											</select>
 										</div>
-										<input type="text" class="bordered-field pl-16" name="account" value="{{ posting.account }}">
+										<div class="relative combobox w-full">
+											<input type="text" class="bordered-field pl-16 peer" name="account" value="{{ posting.account }}" autocomplete="off">
+											{% include 'components/accounts_combobox_inner.html' %}
+										</div>
 									</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">
@@ -91,68 +168,8 @@
 						</tr>
 					{% endfor %}
 				{% else %}
-					<tr>
-						<td></td>
-						{#<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)">
-											<option value="dr" selected>Dr</option>
-											<option value="cr">Cr</option>
-										</select>
-									</div>
-									<input type="text" class="bordered-field pl-16" 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>
-						<td class="amount-dr has-amount py-1 px-1">
-							<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="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
-							</div>
-						</td>
-						<td class="amount-cr py-1 pl-1"></td>
-					</tr>
-					<tr>
-						<td></td>
-						{#<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)">
-											<option value="dr">Dr</option>
-											<option value="cr" selected>Cr</option>
-										</select>
-									</div>
-									<input type="text" class="bordered-field pl-16" 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>
-						<td class="amount-dr py-1 px-1"></td>
-						<td class="amount-cr has-amount py-1 pl-1">
-							<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="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">
-							</div>
-						</td>
-					</tr>
+					{{ template_dr() }}
+					{{ template_cr() }}
 				{% endif %}
 			</tbody>
 		</table>
@@ -166,10 +183,13 @@
 		
 		<input type="hidden" name="referrer" value="{{ request.referrer or '' }}">
 	</form>
+	
+	{# Save HTML for template posting rows so we can access this from JS when required #}
+	<table style="display:none" id="template-dr">{{ template_dr() }}</table>
+	<table style="display:none" id="template-cr">{{ template_cr() }}</table>
 {% endblock %}
 
 {% block scripts %}
-	{# TODO: This would be much easier with React or similar... #}
 	<script>
 		function changeDrCr(el) {
 			let trPosting = el.parentNode.parentNode.parentNode.parentNode.parentNode;
@@ -193,40 +213,9 @@
 			let trPosting = el.parentNode.parentNode.parentNode;
 			let sign = trPosting.querySelector('select').value; // Use same sign as row clicked
 			
-			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="bordered-field pl-7" name="amount" step="0.01" oninput="changeAmount(this)">' +
-				'</div>';
-			
 			// Add new posting row
 			let trNew = document.createElement('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="bordered-field pl-16" 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>';
-			
+			trNew.innerHTML = document.getElementById(sign === 'dr' ? 'template-dr' : 'template-cr').querySelector('tr').innerHTML;
 			trPosting.after(trNew);
 		}
 		
@@ -247,4 +236,5 @@
 			}
 		}
 	</script>
+	<script src="{{ url_for('static', filename='js/combobox.js') }}"></script>
 {% endblock %}