From 77792d40eb7fa62ae97fc9b424efffd97c96c683 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sat, 6 Apr 2024 03:01:15 +1100
Subject: [PATCH] Custom dropdown box for chart of accounts setup

---
 drcr/static/js/combobox.js            |  7 +--
 drcr/templates/chart_of_accounts.html | 70 ++++++++++++++++++++++++---
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/drcr/static/js/combobox.js b/drcr/static/js/combobox.js
index 755e65f..2a4573a 100644
--- a/drcr/static/js/combobox.js
+++ b/drcr/static/js/combobox.js
@@ -49,11 +49,8 @@ document.querySelectorAll('.combobox').forEach((elCombobox) => {
 	elCombobox.querySelector('button').addEventListener('click', (evt) => {
 		elInput.focus();
 	});
-});
-
-// Update combobox value on select
-document.querySelectorAll('.combobox').forEach((elCombobox) => {
-	const elInput = elCombobox.querySelector('input');
+	
+	// Update combobox value on select
 	elCombobox.querySelector('ul').querySelectorAll('li').forEach((elLi) => {
 		elLi.addEventListener('mousedown', (evt) => {
 			const liText = elLi.querySelector('.combobox-text').innerText;
diff --git a/drcr/templates/chart_of_accounts.html b/drcr/templates/chart_of_accounts.html
index ea06e5b..fab314e 100644
--- a/drcr/templates/chart_of_accounts.html
+++ b/drcr/templates/chart_of_accounts.html
@@ -25,16 +25,30 @@
 	
 	<form method="POST">
 		<div class="my-2 py-2 flex gap-x-2 items-baseline bg-white sticky top-0">
-			<div>
-				<select class="mt-2 bordered-field pl-3 pr-10" name="kind">
+			<div class="relative dropdownbox w-[450px]">  {# FIXME: Width hardcoded #}
+				<button type="button" class="relative w-full cursor-default bg-white bordered-field pl-3 pr-10 text-left">
+					<span class="dropdownbox-text block truncate">Asset</span>  {# FIXME: Hardcoded default #}
+					<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+						<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+						<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>
+					</span>
+				</button>
+				<input type="hidden" name="kind" value="drcr.asset">  {# FIXME: Hardcoded default #}
+				<ul class="hidden 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 plugin_name, plugin_account_kinds in account_kinds_by_plugin.items() %}
-						<optgroup label="{{ plugin_name }}">
-							{% for account_kind in plugin_account_kinds %}
-								<option value="{{ account_kind[0] }}">{{ account_kind[1] }}</option>
-							{% endfor %}
-						</optgroup>
+						{% for account_kind in plugin_account_kinds %}
+							<li class="group relative cursor-default select-none py-1 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-emerald-600" data-value="{{ account_kind[0] }}"{% if account_kind[0] == 'drcr.asset' %} data-selected="selected"{% endif %}>
+								<span class="combobox-text block truncate group-data-[selected=selected]:font-semibold">{{ account_kind[1] }}</span>
+								<span class="hidden group-data-[selected=selected]:flex absolute inset-y-0 right-0 items-center pr-4 text-emerald-600 group-hover:text-white">
+									<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+										<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+									</svg>
+								</span>
+							</li>
+						{% endfor %}
 					{% endfor %}
-				</select>
+				</ul>
 			</div>
 			<div>
 				<button formaction="{{ url_for('account_add_kind') }}" class="btn-primary" type="submit">Add type</button>
@@ -69,3 +83,43 @@
 		</table>
 	</form>
 {% endblock %}
+
+{% block scripts %}
+	<script>
+		document.querySelectorAll('.dropdownbox').forEach((elDropdownbox) => {
+			const elButton = elDropdownbox.querySelector('button');
+			const elInput = elDropdownbox.querySelector('input');
+			const elUl = elDropdownbox.querySelector('ul');
+			
+			// Open and close dropdown box
+			elButton.addEventListener('click', (evt) => {
+				if (elUl.classList.contains('hidden')) {
+					elUl.classList.remove('hidden');
+					elUl.classList.add('block');
+				} else {
+					elUl.classList.remove('block');
+					elUl.classList.add('hidden');
+				}
+			});
+			
+			// Update value on select
+			elUl.querySelectorAll('li').forEach((elLi) => {
+				elLi.addEventListener('click', (evt) => {
+					const liText = elLi.querySelector('.combobox-text').innerText;
+					const liValue = elLi.dataset.value;
+					
+					elButton.innerText = liText;
+					elInput.value = liValue;
+					
+					elUl.querySelectorAll('li').forEach((elLi2) => {
+						elLi2.dataset.selected = '';
+					});
+					elLi.dataset.selected = 'selected';
+					
+					elUl.classList.remove('block');
+					elUl.classList.add('hidden');
+				});
+			});
+		});
+	</script>
+{% endblock %}