diff --git a/nummi/account/forms.py b/nummi/account/forms.py index 4b66f90..cde1416 100644 --- a/nummi/account/forms.py +++ b/nummi/account/forms.py @@ -1,4 +1,4 @@ -from main.forms import NummiForm +from main.forms import IconInput, NummiForm from .models import Account @@ -12,3 +12,6 @@ class AccountForm(NummiForm): "default", "archived", ] + widgets = { + "icon": IconInput(), + } diff --git a/nummi/category/forms.py b/nummi/category/forms.py index 25f5d9e..9988c6f 100644 --- a/nummi/category/forms.py +++ b/nummi/category/forms.py @@ -1,5 +1,5 @@ from django.forms.widgets import Select -from main.forms import NummiForm +from main.forms import IconInput, NummiForm from .models import Category @@ -12,6 +12,9 @@ class CategoryForm(NummiForm): "icon", "budget", ] + widgets = { + "icon": IconInput, + } class CategorySelect(Select): diff --git a/nummi/category/templates/category/forms/widgets/category.html b/nummi/category/templates/category/forms/widgets/category.html index 625832f..fc6724b 100644 --- a/nummi/category/templates/category/forms/widgets/category.html +++ b/nummi/category/templates/category/forms/widgets/category.html @@ -1,5 +1,5 @@ {% load main_extras %} - + {{ "folder"|remix }} {% include "django/forms/widgets/select.html" %} diff --git a/nummi/main/forms.py b/nummi/main/forms.py index 82c0146..05a6ae4 100644 --- a/nummi/main/forms.py +++ b/nummi/main/forms.py @@ -1,4 +1,7 @@ from django import forms +from django.forms.widgets import TextInput + +from .utils import get_icons class NummiFileInput(forms.ClearableFileInput): @@ -19,3 +22,29 @@ class NummiForm(forms.ModelForm): yield ((self[f] for f in fieldset) for fieldset in group) else: yield ([f] for f in self) + + +class DatalistInput(TextInput): + template_name = "main/forms/widgets/datalist.html" + + def __init__(self, *args, options=[]): + self.options = options + super().__init__(*args) + + def get_context(self, *args): + context = super().get_context(*args) + name = context["widget"]["name"] + context["widget"]["attrs"]["list"] = f"{name}-list" + context["widget"]["attrs"]["autocomplete"] = "off" + context["widget"]["options"] = self.options + return context + + +class IconInput(DatalistInput): + template_name = "main/forms/widgets/icon.html" + icon_list = get_icons() + + def get_context(self, *args): + context = super().get_context(*args) + context["widget"]["options"] = self.icon_list + return context diff --git a/nummi/main/static/main/css/form.css b/nummi/main/static/main/css/form.css index 13502eb..5cb1504 100644 --- a/nummi/main/static/main/css/form.css +++ b/nummi/main/static/main/css/form.css @@ -103,7 +103,7 @@ form { } } } - > .category-select { + > .ico-input { display: grid; grid-template-columns: min-content 1fr; column-gap: 0.5rem; diff --git a/nummi/main/static/main/js/base.js b/nummi/main/static/main/js/base.js index 54be5c3..f294d85 100644 --- a/nummi/main/static/main/js/base.js +++ b/nummi/main/static/main/js/base.js @@ -25,9 +25,34 @@ for (let form of forms) { let icon = categorySelect.querySelector("span"); let icons = JSON.parse(input.dataset.icons); - icon.className = `ri-${icons[input.value] || "folder"}-line`; - input.addEventListener("input", (event) => { + function setIcon(event) { icon.className = `ri-${icons[input.value] || "folder"}-line`; + } + setIcon(); + input.addEventListener("input", setIcon); + form.addEventListener("reset", (event) => { + setTimeout(setIcon, 0); + }); + } + + let iconSelect = form.querySelector(".icon-select"); + if (iconSelect) { + let input = iconSelect.querySelector("input"); + let icon = iconSelect.querySelector("span"); + let icons = Array.from(iconSelect.querySelector("datalist").options).map( + (opt) => opt.value, + ); + + function setIcon(event) { + console.log(input.value); + icon.className = `ri-${ + icons.includes(input.value) ? input.value : "square" + }-line`; + } + setIcon(); + input.addEventListener("input", setIcon); + form.addEventListener("reset", (event) => { + setTimeout(setIcon, 0); }); } } diff --git a/nummi/transaction/templates/transaction/forms/widgets/datalist.html b/nummi/main/templates/main/forms/widgets/datalist.html similarity index 100% rename from nummi/transaction/templates/transaction/forms/widgets/datalist.html rename to nummi/main/templates/main/forms/widgets/datalist.html diff --git a/nummi/main/templates/main/forms/widgets/icon.html b/nummi/main/templates/main/forms/widgets/icon.html new file mode 100644 index 0000000..39e0e3c --- /dev/null +++ b/nummi/main/templates/main/forms/widgets/icon.html @@ -0,0 +1,5 @@ +{% load main_extras %} + + {{ "square"|remix }} + {% include "main/forms/widgets/datalist.html" %} + diff --git a/nummi/main/utils.py b/nummi/main/utils.py new file mode 100644 index 0000000..2a8bb28 --- /dev/null +++ b/nummi/main/utils.py @@ -0,0 +1,9 @@ +import json +from urllib import request + + +def get_icons(): + url = "https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.glyph.json" + data = json.loads(request.urlopen(url).read()) + + return [i.removesuffix("-line") for i in data.keys() if i.endswith("-line")] diff --git a/nummi/transaction/forms.py b/nummi/transaction/forms.py index 45267b0..5c6160e 100644 --- a/nummi/transaction/forms.py +++ b/nummi/transaction/forms.py @@ -1,8 +1,7 @@ import json from category.forms import CategorySelect -from django.forms.widgets import TextInput -from main.forms import NummiFileInput, NummiForm +from main.forms import DatalistInput, NummiFileInput, NummiForm from .models import Invoice, Transaction from .utils import get_datalist @@ -82,19 +81,3 @@ class InvoiceForm(NummiForm): widgets = { "file": NummiFileInput, } - - -class DatalistInput(TextInput): - template_name = "transaction/forms/widgets/datalist.html" - - def __init__(self, *args, options=[]): - self.options = options - super().__init__(*args) - - def get_context(self, *args): - context = super().get_context(*args) - name = context["widget"]["name"] - context["widget"]["attrs"]["list"] = f"{name}-list" - context["widget"]["attrs"]["autocomplete"] = "off" - context["widget"]["options"] = self.options - return context