Add automatic icons to category select (#24)

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"

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>

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 {

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`;
+    });
+  }
 }

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