Add icons to categories

nummi/main/migrations/0008_alter_category_options_category_icon.py

@@ -0,0 +1,22 @@
+# Generated by Django 4.0.4 on 2022-05-20 20:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("main", "0007_alter_category_options_alter_transaction_options_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="category",
+            options={"ordering": ["name"]},
+        ),
+        migrations.AddField(
+            model_name="category",
+            name="icon",
+            field=models.CharField(default="folder", max_length=64),
+        ),
+    ]

nummi/main/models.py

@@ -10,6 +10,7 @@ class Category(models.Model):
     name = models.CharField(
         max_length=64, validators=[validate_unicode_slug], default="New Category"
     )
+    icon = models.CharField(max_length=64, default="folder")
 
     def __str__(self):
         return self.name
@@ -21,7 +22,7 @@ class Category(models.Model):
 class CategoryForm(ModelForm):
     class Meta:
         model = Category
-        fields = ["name"]
+        fields = ["name", "icon"]
 
 
 class Transaction(models.Model):

nummi/main/templates/main/category.html

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block body %}
-<h1>{{ category }}</h1>
+<h1><i class="fa fa-{{ category.icon }}"></i> {{ category }}</h1>
 
 <form action="{% url 'update_category' category.id %}" method="post">
 	{% csrf_token %}

nummi/main/templates/main/index.html

@@ -27,6 +27,7 @@
 				<span class="trader text center">{{ trans.trader|default_if_none:"–" }}</span>
 				<span class="category text center">
 					{% if trans.category %}
+					<i class="fa fa-{{ trans.category.icon }}"></i>
 					<a href="{% url 'category' trans.category.id %}">
 						{{ trans.category }}
 					</a>
@@ -44,7 +45,7 @@
 	<h2>Catégories</h2>
 	<div id="categories">
 		{% for cat in categories %}
-		<a href="{% url 'category' cat.id %}">{{ cat }}</a>
+		<a href="{% url 'category' cat.id %}"><i class="fa fa-{{ cat.icon }}"></i> {{ cat }}</a>
 		{% endfor %}
 	</div>
 {% endif %}