From a268625d808bb014f0fb1508dc546dd33bca3f4b Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Thu, 20 Nov 2025 11:56:10 +0100
Subject: [PATCH] Add number addon widget

---
 src/servala/frontend/forms/widgets.py         | 19 +++++++++++++++++++
 .../forms/number_input_with_addon.html        | 11 +++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/servala/frontend/templates/frontend/forms/number_input_with_addon.html

diff --git a/src/servala/frontend/forms/widgets.py b/src/servala/frontend/forms/widgets.py
index d67030f..99b7a59 100644
--- a/src/servala/frontend/forms/widgets.py
+++ b/src/servala/frontend/forms/widgets.py
@@ -2,6 +2,7 @@ import json
 
 from django import forms
 from django.core.exceptions import ValidationError
+from django.forms.widgets import NumberInput
 
 
 class DynamicArrayWidget(forms.Widget):
@@ -216,3 +217,21 @@ class DynamicArrayField(forms.JSONField):
                             raise ValidationError(
                                 f"Item {i + 1} must be one of: {', '.join(enum_values)}"
                             )
+
+
+class NumberInputWithAddon(NumberInput):
+    """
+    Widget for number input fields with a suffix add-on (e.g., "Gi", "MB").
+    Renders as a Bootstrap input-group with the suffix displayed as an add-on.
+    """
+
+    template_name = "frontend/forms/number_input_with_addon.html"
+
+    def __init__(self, addon_text="", attrs=None):
+        super().__init__(attrs)
+        self.addon_text = addon_text
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"]["addon_text"] = self.addon_text
+        return context
diff --git a/src/servala/frontend/templates/frontend/forms/number_input_with_addon.html b/src/servala/frontend/templates/frontend/forms/number_input_with_addon.html
new file mode 100644
index 0000000..4fe3b54
--- /dev/null
+++ b/src/servala/frontend/templates/frontend/forms/number_input_with_addon.html
@@ -0,0 +1,11 @@
+<div class="input-group">
+    <input type="{{ widget.type }}"
+           name="{{ widget.name }}"
+           {% if widget.value != None %}value="{{ widget.value }}"{% endif %}
+           {% if widget.attrs.id %}id="{{ widget.attrs.id }}"{% endif %}
+           {% for name, value in widget.attrs.items %} {% if value is not False and name != "id" %} {{ name }}{% if value is not True %}="{{ value }}"{% endif %}
+           {% endif %}
+           {% endfor %}
+           class="form-control{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}" />
+    <span class="input-group-text">{{ widget.addon_text }}</span>
+</div>