Feature/form refactor

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html

@@ -0,0 +1,16 @@
+{% extends "admin/base_site.html" %} {% load django_vite %} {% block extrahead %} {{
+block.super }} {% vite_hmr_client %} {% vite_asset 'js/main.ts' %} {% vite_asset
+'css/tailwind.js' %}
+<style>
+  [x-cloak] {
+    display: none !important;
+  }
+</style>
+{% endblock %} {% block title %} {% if subtitle %}{{ subtitle }} |{% endif %} {{ title }} |
+{{ site_title|default:_('Sampleapp site admin') }} {% endblock %} {% block branding %}
+<h1 id="site-name">
+  <a href="{% url 'admin:index' %}"
+    >{{ site_header|default:_('Sampleapp administration') }}</a
+  >
+</h1>
+{% endblock %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py

@@ -0,0 +1,43 @@
+from datetime import datetime
+
+from django import forms
+
+from {{ cookiecutter.repo_name }}.util.widgets import ToggleWidget
+
+
+class FormTest(forms.Form):
+    template_name = "samples/test_form.jinja"
+
+    first_name = forms.CharField(
+        label="First Name",
+        min_length=1,
+        max_length=100,
+        widget=forms.TextInput(
+            attrs={"placeholder": "First Name", "autocomplete": "given-name"}
+        ),
+    )
+    char = forms.CharField()
+    integer = forms.IntegerField()
+    email = forms.EmailField()
+    url = forms.URLField()
+    password = forms.CharField(widget=forms.PasswordInput())
+
+    date_initial = forms.DateField(initial=datetime.now)
+    datetime_initial = forms.DateTimeField(initial=datetime.now)
+    time_initial = forms.TimeField(initial=datetime.now)
+    date_empty = forms.DateField()
+    datetime_empty = forms.DateTimeField()
+    time_empty = forms.TimeField()
+
+    textarea = forms.CharField(widget=forms.Textarea())
+
+    checkbox = forms.BooleanField()
+    toggle = forms.BooleanField(widget=ToggleWidget)
+    choice = forms.ChoiceField(choices=[("choice1", "Choice 1"), ("choice2", "Choice 2")])
+    radio_choice = forms.ChoiceField(
+        choices=[("choice1", "Choice 1"), ("choice2", "Choice 2")], widget=forms.RadioSelect
+    )
+    file = forms.FileField()
+
+    class Meta:
+        fields = "__all__"

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/urls.py

@@ -1,7 +1,13 @@
 from django.urls import path
 from django.views.generic.base import TemplateView
 
-from .views import current_time, error, test_message_redirect, test_message_refresh
+from .views import (
+    current_time,
+    error,
+    form_test,
+    test_message_redirect,
+    test_message_refresh,
+)
 
 urlpatterns = [
     path("current-time/", current_time, name="current_time"),
@@ -13,5 +19,6 @@
         name="random_chart",
     ),
     path("error/", error, name="error"),
+    path("form-test/", form_test, name="form-test"),
     path("", TemplateView.as_view(template_name="index.jinja"), name="home"),
 ]

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/views.py

@@ -2,6 +2,8 @@
 
 from django.contrib import messages
 from django.template.response import TemplateResponse
+from django.http import HttpResponse
+from django.shortcuts import render
 from django.views.defaults import (
     bad_request,
     page_not_found,
@@ -10,6 +12,8 @@
 )
 from django_htmx.http import HttpResponseClientRedirect, HttpResponseClientRefresh
 
+from .forms import FormTest
+
 
 def error(request):
     """Generate an exception. Useful for e.g. configuring Sentry"""
@@ -46,3 +50,10 @@ def FourOhFour(request, exception):
 
 def WorkedLocally(request):
     return server_error(request, template_name="500.jinja")
+
+
+def form_test(request):
+    form = FormTest()
+    if request.method == "GET":
+        return render(request, "form_test.jinja", context={"form": form})
+    return HttpResponse(form.render())

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/login_form.jinja

@@ -1,10 +1,10 @@
 {% from 'forms/field.jinja' import field as f %}
-{% from 'forms/checkbox.jinja' import checkbox %}
+{% from 'forms/checkbox.jinja' import checkbox_field %}
 <div class="form-wrapper justify-between mb-6">
     {{ errors }}
     {% for field, errors in fields %}
         {% if field.name == 'remember' %}
-            {{ checkbox(field) }}
+            {{ checkbox_field(field, errors) }}
         {% else %}
             {{ f(field, errors) }}
         {% endif %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/util.jinja

@@ -7,3 +7,7 @@
         {% endfor %}
     {% endif %}
 {% endmacro %}
+
+{% macro get_event_name_from_id(id="") %}
+{% if id %}update-{{ id | replace('_', '-')}}{% endif %}
+{% endmacro %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html

@@ -1,3 +1,2 @@
-{% from 'forms/clearable_file_input.jinja' import widget_to_clearable_file_input %}
-
-{{widget_to_clearable_file_input(widget)}}
+{% from 'forms/clearable_file_input.jinja' import clearable_file_input_widget %}
+{{clearable_file_input_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html

@@ -1,2 +1,2 @@
-{% from 'forms/date_datetime.jinja' import widget_to_date_datetime %}
-{{ widget_to_date_datetime(widget) }}
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, date=True) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html

@@ -1,2 +1,2 @@
-{% from 'forms/date_datetime.jinja' import widget_to_date_datetime %}
-{{ widget_to_date_datetime(widget, true) }}
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, time=True, date=True) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html

@@ -1,3 +1 @@
-{% from 'forms/input.jinja' import widget_to_input %}
-
-{{widget_to_input(widget)}}
+{% from 'forms/input.jinja' import input_widget %} {{input_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input_option.html

@@ -1,3 +1,2 @@
-{% from 'forms/input_option.jinja' import widget_to_input_option %}
-
-{{widget_to_input_option(widget)}}
+{% from 'forms/input_option.jinja' import input_option_widget %}
+{{input_option_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/password.html

@@ -1,3 +1 @@
-{% from 'forms/password.jinja' import widget_to_password %}
-
-{{widget_to_password(widget)}}
+{% from 'forms/password.jinja' import password_widget %} {{password_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/radio.html

@@ -1,3 +1 @@
-{% from 'forms/radio.jinja' import widget_to_radio %}
-
-{{ widget_to_radio(widget) }}
+{% from 'forms/radio.jinja' import radio_widget %} {{ radio_widget(widget) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html

@@ -1,3 +1 @@
-{% from 'forms/select.jinja' import widget_to_select %}
-
-{{widget_to_select(widget)}}
+{% from 'forms/select.jinja' import select_widget %} {{select_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select_option.html

@@ -1,3 +1 @@
-{% from 'forms/select.jinja' import select_option %}
-
-{{ select_option(widget.value, widget.label, widget.attrs) }}
+{% from 'forms/select.jinja' import select_option %} {{ select_option(widget) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html

@@ -1,3 +1 @@
-{% from 'forms/textarea.jinja' import widget_to_textarea %}
-
-{{widget_to_textarea(widget)}}
+{% from 'forms/textarea.jinja' import textarea_widget %} {{textarea_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/time.html

@@ -0,0 +1,2 @@
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, time=True) }}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/toggle.html

@@ -1,3 +1 @@
-{% from 'forms/toggle.jinja' import widget_to_toggle %}
-
-{{widget_to_toggle(widget)}}
+{% from 'forms/toggle.jinja' import toggle_widget %} {{toggle_widget(widget)}}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/form_test.jinja

@@ -0,0 +1,10 @@
+{% extends "base.jinja" %}
+{% block title %}title{% endblock title %}
+{% block content %}
+<div class="flex flex-col items-center mt-4">
+    <span class="text-xl">Form test</span>
+    <form method="post" class="flex flex-col gap-4" hx-post="{{ url('form-test')}}" hx-swap="innerHTML">
+        {{form }}
+    </form>
+</div>
+{% endblock content %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja

@@ -1,11 +1,18 @@
-{% macro checkbox(field) %}
-    <div class="relative flex items-start">
-        <div class="flex items-center h-5">{{ field }}</div>
-        <div class="ml-3 text-sm">
-            {% if field.label %}{{ field.label_tag() }}{% endif %}
-            <p class="text-gray-500" id="email-description">
-                {{ field.help_text|safe }}
-            </p>
-        </div>
-    </div>
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+{% from "forms/wrappers.jinja" import boolean_shell %}
+
+{% macro checkbox_field(field, errors) %}
+    {{ boolean_shell(field, errors, wrapper_classes="gap-4") }}
+{% endmacro %}
+
+{% macro checkbox_widget(widget) %}
+    {% set attrs = widget.attrs %}
+    {% do attrs.update({"name": widget.name, "value": widget.value or "", "type": widget.type}) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
+
+    <input
+        type="checkbox"
+        x-data="input('{{ event_name }}', '{{ widget.value or "" }}')"
+        x-ref="input" class="input {{ input_classes or ""}} {{attrs.class or ""}}" {{ attributes(attrs)}}
+    />
 {% endmacro %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja

@@ -1,20 +1,27 @@
-{% from 'forms/input.jinja' import input %}
-{% macro clearable_file_input(type="file", name="", value=None, is_initial=False, initial_text="", required=False, checkbox_name="", checkbox_id="", clear_checkbox_label="", input_text="", attrs={}) %}
-    <div x-data="input('update-{{ attrs.id | replace('_', '-') }}', '{{ value }}')"
+{% from 'forms/input.jinja' import input_widget %}
+{% from "forms/wrappers.jinja" import file_shell %}
+{% from 'forms/checkbox.jinja' import checkbox_widget %}
+{% from 'components/util.jinja' import get_event_name_from_id %}
+
+{% macro clearable_file_input_field(field, errors) %}
+    {{ file_shell(field, errors) }}
+{% endmacro %}
+
+{% macro clearable_file_input_widget(widget) %}
+    {% set attrs = widget.attrs or {} %}
+    {% set event_name = get_event_name_from_id(attrs.id) %}
+
+    <div
          class="w-full input flex items-center pb-2">
         {% if is_initial %}
-            {{widget.initial_text}}: <a href="{{value.url}}">{{value}}</a>
+            {{widget.initial_text}}: <a href="{{widget.value.url}}">{{widget.value}}</a>
             {% if not required %}
-                {{ input(type="checkbox", name=checkbox_name, attrs={'id': checkbox_id, 'disabled': attrs.disabled}) }}
-                <label for="{{checkbox_id}}">{{clear_checkbox_label}}</label>
+                {{ checkbox_widget({"type": "checkbox", "name": widget.checkbox_name, "attrs":{'id': widget.checkbox_id, 'disabled': attrs.disabled}}) }}
+                <label for="{{widget.checkbox_id}}">{{widget.clear_checkbox_label}}</label>
             {% endif %}
             <br>
-            {{input_text}}:
+            {{widget.input_text}}:
         {% endif %}
-        {{ input(type=type, name=name, attrs=attrs, input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
+        {{ input_widget(widget, input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
     </div>
 {% endmacro %}
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_clearable_file_input(widget) %}
-    {{ clearable_file_input(type=widget.type, name=widget.name, value=widget.value, is_initial=widget.is_initial, initial_text=widget.initial_text, required=widget.required, checkbox_name=widget.checkbox_name, checkbox_id=widget.checkbox_id, clear_checkbox_label=widget.clear_checkbox_label, input_text=widget.input_text, attrs=widget.attrs)}}
-{% endmacro %}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja

@@ -1,15 +1,26 @@
-{% from 'components/util.jinja' import attributes %}
-{% macro date_datetime(name=none, value=none, id=none, attrs={}, time=false) %}
-    {% set event_name = "update-"|join(id | replace('_', '-')) if id else "" %}
-    {% do attrs.update({"name": name, "value": value}) %}
-    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ value }}', {{ 'true' if time else 'false' }})"
+{% from "forms/wrappers.jinja" import input_shell %}
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+
+{% macro datetime_field(field, errors) %}
+    {{ input_shell(field, errors) }}
+{% endmacro %}
+
+{% macro date_field(field, errors) %}
+    {{ input_shell(field, errors) }}
+{% endmacro %}
+
+{% macro time_field(field, errors) %}
+    {{ input_shell(field, errors) }}
+{% endmacro %}
+
+
+{% macro date_datetime_widget(widget, time=False, date=False) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name, "value": widget.value or ""}) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
+
+    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ widget.value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
          class="w-full input" :class="{'has-focus': active}">
-        <input class="w-full rounded-md border border-gray-200 px-3 py-2.5" x-ref="picker" type="text" {{ attributes(attrs) }}/>
+        <input class="w-full rounded-md border border-gray-200 px-3 py-2.5 flatpickr flatpickr-input" x-ref="picker" type="text" {{ attributes(attrs) }}/>
     </div>
 {% endmacro %}
-{#
-    Django date or datetime widget to date_datetime macro
- #}
-{% macro widget_to_date_datetime(widget, time=false) %}
-    {{ date_datetime(name=widget.name, value=widget.value, id=widget.attrs.id, attrs=widget.attrs, time=time) }}
-{% endmacro %}