From b4654ec44519368de299aad9d37e7d1f92f6c839 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Thu, 2 Jan 2025 16:40:27 +0100
Subject: [PATCH] Add automatic icons to category select (#24)

---
 nummi/category/forms.py                           |  5 +++++
 .../category/forms/widgets/category.html          |  5 +++++
 nummi/main/static/main/css/form.css               |  6 ++++++
 nummi/main/static/main/js/base.js                 | 12 ++++++++++++
 nummi/transaction/forms.py                        | 15 +++++++++++++++
 5 files changed, 43 insertions(+)
 create mode 100644 nummi/category/templates/category/forms/widgets/category.html

diff --git a/nummi/category/forms.py b/nummi/category/forms.py
index b0bbf27..25f5d9e 100644
--- a/nummi/category/forms.py
+++ b/nummi/category/forms.py
@@ -1,3 +1,4 @@
+from django.forms.widgets import Select
 from main.forms import NummiForm
 
 from .models import Category
@@ -11,3 +12,7 @@ class CategoryForm(NummiForm):
             "icon",
             "budget",
         ]
+
+
+class CategorySelect(Select):
+    template_name = "category/forms/widgets/category.html"
diff --git a/nummi/category/templates/category/forms/widgets/category.html b/nummi/category/templates/category/forms/widgets/category.html
new file mode 100644
index 0000000..625832f
--- /dev/null
+++ b/nummi/category/templates/category/forms/widgets/category.html
@@ -0,0 +1,5 @@
+{% load main_extras %}
+<span class="category-select">
+  {{ "folder"|remix }}
+  {% include "django/forms/widgets/select.html" %}
+</span>
diff --git a/nummi/main/static/main/css/form.css b/nummi/main/static/main/css/form.css
index a4412a2..13502eb 100644
--- a/nummi/main/static/main/css/form.css
+++ b/nummi/main/static/main/css/form.css
@@ -67,6 +67,7 @@ form {
         border-bottom: 1px solid var(--gray);
         background: none;
         z-index: 1;
+        padding: 0;
 
         &:not([type="checkbox"]) {
           width: 100%;
@@ -102,6 +103,11 @@ form {
           }
         }
       }
+      > .category-select {
+        display: grid;
+        grid-template-columns: min-content 1fr;
+        column-gap: 0.5rem;
+      }
     }
   }
   .buttons {
diff --git a/nummi/main/static/main/js/base.js b/nummi/main/static/main/js/base.js
index 6080811..54be5c3 100644
--- a/nummi/main/static/main/js/base.js
+++ b/nummi/main/static/main/js/base.js
@@ -18,4 +18,16 @@ for (let form of forms) {
   form.addEventListener("reset", (event) => {
     window.removeEventListener("beforeunload", beforeUnloadHandler);
   });
+
+  let categorySelect = form.querySelector(".category-select");
+  if (categorySelect) {
+    let input = categorySelect.querySelector("select");
+    let icon = categorySelect.querySelector("span");
+    let icons = JSON.parse(input.dataset.icons);
+
+    icon.className = `ri-${icons[input.value] || "folder"}-line`;
+    input.addEventListener("input", (event) => {
+      icon.className = `ri-${icons[input.value] || "folder"}-line`;
+    });
+  }
 }
diff --git a/nummi/transaction/forms.py b/nummi/transaction/forms.py
index 9255ab7..45267b0 100644
--- a/nummi/transaction/forms.py
+++ b/nummi/transaction/forms.py
@@ -1,3 +1,6 @@
+import json
+
+from category.forms import CategorySelect
 from django.forms.widgets import TextInput
 from main.forms import NummiFileInput, NummiForm
 
@@ -19,6 +22,9 @@ class TransactionForm(NummiForm):
             "payment",
             "description",
         ]
+        widgets = {
+            "category": CategorySelect(),
+        }
 
     meta_fieldsets = [
         [
@@ -50,6 +56,15 @@ class TransactionForm(NummiForm):
         self.fields["payment"].widget = DatalistInput(
             options=get_datalist(_user, "payment")
         )
+        self.fields["category"].widget.attrs |= {
+            "class": "category",
+            "data-icons": json.dumps(
+                {
+                    str(cat.id): cat.icon
+                    for cat in self.fields["category"].queryset.only("id", "icon")
+                }
+            ),
+        }
 
         if _disable_statement:
             self.fields["statement"].disabled = True