From ca7cbf64810deebf3a5654948cc426b79b175018 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sat, 6 Apr 2024 03:37:07 +1100
Subject: [PATCH] Add option groups to custom dropdown in chart of accounts
 setup

---
 drcr/templates/chart_of_accounts.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/drcr/templates/chart_of_accounts.html b/drcr/templates/chart_of_accounts.html
index fab314e..4c34546 100644
--- a/drcr/templates/chart_of_accounts.html
+++ b/drcr/templates/chart_of_accounts.html
@@ -35,8 +35,11 @@
 					</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">
+				<ul class="hidden absolute z-20 mt-1 max-h-60 w-full overflow-auto bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
 					{% for plugin_name, plugin_account_kinds in account_kinds_by_plugin.items() %}
+						<li class="relative cursor-default select-none py-1 pl-3 pr-9 text-gray-500 border-b border-gray-300{% if loop.index0 > 0 %} pt-4{% endif %}">
+							<span class="block truncate text-xs font-bold uppercase">{{ plugin_name }}</span>
+						</li>
 						{% 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>
@@ -104,11 +107,15 @@
 			
 			// Update value on select
 			elUl.querySelectorAll('li').forEach((elLi) => {
+				if (!elLi.dataset.value) {
+					return;
+				}
+				
 				elLi.addEventListener('click', (evt) => {
 					const liText = elLi.querySelector('.combobox-text').innerText;
 					const liValue = elLi.dataset.value;
 					
-					elButton.innerText = liText;
+					elButton.querySelector('.dropdownbox-text').innerText = liText;
 					elInput.value = liValue;
 					
 					elUl.querySelectorAll('li').forEach((elLi2) => {