Implement inline form renderer

This commit is contained in:
Tobias Kunze 2025-03-20 08:57:24 +01:00
parent 72bd7388d6
commit b36ebcf5ff
6 changed files with 34 additions and 26 deletions

View file

@ -16,13 +16,20 @@ class VerticalFormRenderer(TemplatesSetting):
form_template_name = "frontend/forms/form.html"
field_template_name = "frontend/forms/vertical_field.html"
def get_class_names(self, input_type):
if input_type == "checkbox":
return "form-check-input"
return "form-control"
def render(self, template_name, context, request=None):
if field := context.get("field"):
if field.field.widget.input_type == "checkbox":
class_name = "form-check-input"
else:
class_name = "form-control"
field.build_widget_attrs = inject_class(
field.build_widget_attrs, class_name
field.build_widget_attrs,
self.get_class_names(field.field.widget.input_type),
)
return super().render(template_name, context, request)
class InlineFormRenderer(VerticalFormRenderer):
form_template_name = "frontend/forms/form.html"
field_template_name = "frontend/forms/inline_field.html"

View file

@ -8,6 +8,7 @@
<link rel="stylesheet"
href="{% static 'mazer/compiled/css/app-dark.css' %}">
<link rel="stylesheet" href="{% static 'mazer/compiled/css/iconly.css' %}">
<link rel="stylesheet" href="{% static 'css/servala.css' %}">
<script src="{% static "js/htmx.min.js" %}" defer></script>
</head>
<title>

View file

@ -0,0 +1,16 @@
{% load i18n %}
<div class="form-group d-inline{% if field.field.required %} mandatory{% endif %}{% if errors %} is-invalid{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">
{% if field.use_fieldset %}
<fieldset {% if field.help_text and field.auto_id and "aria-describedby" not in field.field.widget.attrs %} aria-describedby="{{ field.auto_id }}_helptext"{% endif %}>
{% endif %}
{{ field }}
{% if field.field.widget.input_type == "checkbox" and not field.field.widget.allow_multiple_selected %}
<label for="{{ field.auto_id }}" class="form-check-label form-label">{{ field.label }}</label>
{% endif %}
{% if field.use_fieldset %}</fieldset>{% endif %}
{% for text in field.errors %}<div class="invalid-feedback">{{ text }}</div>{% endfor %}
{% if field.help_text %}
<small class="form-text text-muted"
{% if field.auto_id %}id="{{ field.auto_id }}_helptext"{% endif %}>{{ field.help_text|safe }}</small>
{% endif %}
</div>

View file

@ -0,0 +1 @@
{% include "frontend/forms/field.html" with extra_class="d-inline" %}

View file

@ -1,21 +1 @@
{% load i18n %}
<div class="col-12">
<div class="form-group{% if field.field.required %} mandatory{% endif %}{% if errors %} is-invalid{% endif %}">
{% if field.field.widget.input_type != "checkbox" or field.field.widget.allow_multiple_selected %}
<label for="{{ field.auto_id }}" class="form-label">{{ field.label }}</label>
{% endif %}
{% if field.use_fieldset %}
<fieldset {% if field.help_text and field.auto_id and "aria-describedby" not in field.field.widget.attrs %} aria-describedby="{{ field.auto_id }}_helptext"{% endif %}>
{% endif %}
{{ field }}
{% if field.field.widget.input_type == "checkbox" and not field.field.widget.allow_multiple_selected %}
<label for="{{ field.auto_id }}" class="form-check-label form-label">{{ field.label }}</label>
{% endif %}
{% if field.use_fieldset %}</fieldset>{% endif %}
{% for text in field.errors %}<div class="invalid-feedback">{{ text }}</div>{% endfor %}
{% if field.help_text %}
<small class="form-text text-muted"
{% if field.auto_id %}id="{{ field.auto_id }}_helptext"{% endif %}>{{ field.help_text|safe }}</small>
{% endif %}
</div>
</div>
<div class="col-12">{% include "frontend/forms/field.html" %}</div>

View file

@ -0,0 +1,3 @@
.form-group.d-inline {
margin-bottom: 0;
}