Full support for database backed forms

Author: Archmonger

src/reactpy_django/components.py

@@ -27,7 +27,7 @@
 if TYPE_CHECKING:
     from collections.abc import Sequence
 
-    from django.forms import Form
+    from django.forms import Form, ModelForm
     from django.views import View
 
     from reactpy_django.types import FormEvent
@@ -119,13 +119,14 @@ def django_js(static_path: str, key: Key | None = None):
 
 
 def django_form(
-    form: type[Form],
+    form: type[Form | ModelForm],
     *,
     extra_props: dict[str, Any] | None = None,
     on_success: Callable[[FormEvent], None] | None = None,
     on_error: Callable[[FormEvent], None] | None = None,
     on_submit: Callable[[FormEvent], None] | None = None,
     on_change: Callable[[FormEvent], None] | None = None,
+    auto_save: bool = True,
     form_template: str | None = None,
     top_children: Sequence = (),
     bottom_children: Sequence = (),
@@ -138,6 +139,7 @@ def django_form(
         on_error=on_error,
         on_submit=on_submit,
         on_change=on_change,
+        auto_save=auto_save,
         form_template=form_template,
         top_children=top_children,
         bottom_children=bottom_children,

src/reactpy_django/forms/components.py

@@ -5,7 +5,7 @@
 from uuid import uuid4
 
 from channels.db import database_sync_to_async
-from django.forms import Form
+from django.forms import Form, ModelForm
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
 from reactpy.web import export, module_from_file
@@ -31,12 +31,13 @@
 
 @component
 def _django_form(
-    form: type[Form],
+    form: type[Form | ModelForm],
     extra_props: dict,
     on_success: Callable[[FormEvent], None] | None,
     on_error: Callable[[FormEvent], None] | None,
     on_submit: Callable[[FormEvent], None] | None,
     on_change: Callable[[FormEvent], None] | None,
+    auto_save: bool,
     form_template: str | None,
     top_children: Sequence,
     bottom_children: Sequence,
@@ -46,7 +47,6 @@ def _django_form(
     # Perhaps pre-rendering is robust enough already handle this scenario?
     # Additionally, "URL" mode would limit the user to one form per page.
     # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
-    # TODO: Add auto-save option for database-backed forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
@@ -59,20 +59,17 @@ def _django_form(
         msg = "Dynamically changing the number of top or bottom children is not allowed."
         raise ValueError(msg)
 
+    # Ensure the provided form is a Django Form
+    if not isinstance(form, (type(Form), type(ModelForm))):
+        msg = (
+            "The provided form must be an uninitialized Django Form. "
+            "Do NOT initialize your form by calling it (ex. `MyForm()`)."
+        )
+        raise TypeError(msg)
+
     # Try to initialize the form with the provided data
-    try:
-        initialized_form = form(data=submitted_data)
-    except Exception as e:
-        if not isinstance(form, type(Form)):
-            msg = (
-                "The provided form must be an uninitialized Django Form. "
-                "Do NOT initialize your form by calling it (ex. `MyForm()`)."
-            )
-            raise TypeError(msg) from e
-        raise
-
-    # Set up the form event object
-    form_event = FormEvent(form=initialized_form, data=submitted_data or {})
+    initialized_form = form(data=submitted_data)
+    form_event = FormEvent(form=initialized_form, data=submitted_data or {}, set_data=set_submitted_data)
 
     # Validate and render the form
     @hooks.use_effect
@@ -85,6 +82,9 @@ async def render_form():
                 on_success(form_event)
             if not success and on_error:
                 on_error(form_event)
+            if success and auto_save and isinstance(initialized_form, ModelForm):
+                await database_sync_to_async(initialized_form.save)()
+                set_submitted_data(None)
 
         set_rendered_form(await database_sync_to_async(initialized_form.render)(form_template))
 
@@ -99,7 +99,7 @@ def on_submit_callback(new_data: dict[str, Any]):
         convert_boolean_fields(new_data, initialized_form)
 
         if on_submit:
-            on_submit(FormEvent(form=initialized_form, data=new_data))
+            on_submit(FormEvent(form=initialized_form, data=new_data, set_data=set_submitted_data))
 
         # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:

src/reactpy_django/forms/utils.py

@@ -1,9 +1,11 @@
+from __future__ import annotations
+
 from typing import Any
 
-from django.forms import BooleanField, Form, ModelMultipleChoiceField, MultipleChoiceField, NullBooleanField
+from django.forms import BooleanField, Form, ModelForm, ModelMultipleChoiceField, MultipleChoiceField, NullBooleanField
 
 
-def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
+def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form | ModelForm) -> None:
     multi_choice_fields = {
         field_name
         for field_name, field in initialized_form.fields.items()
@@ -16,7 +18,7 @@ def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form)
             data[choice_field_name] = [data[choice_field_name]]
 
 
-def convert_boolean_fields(data: dict[str, Any], initialized_form: Form) -> None:
+def convert_boolean_fields(data: dict[str, Any], initialized_form: Form | ModelForm) -> None:
     boolean_fields = {
         field_name
         for field_name, field in initialized_form.fields.items()

src/reactpy_django/types.py

@@ -19,7 +19,7 @@
 if TYPE_CHECKING:
     from collections.abc import MutableMapping, Sequence
 
-    from django.forms import Form
+    from django.forms import Form, ModelForm
 
     from reactpy_django.websocket.consumer import ReactpyAsyncWebsocketConsumer
 
@@ -57,8 +57,9 @@ def __call__(self, *args: FuncParams.args, **kwargs: FuncParams.kwargs) -> None:
 class FormEvent:
     """State of a form provided to Form custom events."""
 
-    form: Form
+    form: Form | ModelForm
     data: dict[str, Any]
+    set_data: Callable[[dict[str, Any] | None], None]
 
 
 class AsyncPostprocessor(Protocol):

tests/test_app/forms/components.py

@@ -2,7 +2,7 @@
 
 from reactpy_django.components import django_form
 
-from .forms import BasicForm
+from .forms import BasicForm, DatabaseBackedForm
 
 
 @component
@@ -17,3 +17,8 @@ def bootstrap_form():
         extra_props={"style": {"maxWidth": "600px", "margin": "auto"}},
         form_template="bootstrap_form_template.html",
     )
+
+
+@component
+def database_backed_form():
+    return django_form(DatabaseBackedForm, bottom_children=(html.input({"type": "submit"}),))

tests/test_app/forms/urls.py

@@ -5,4 +5,5 @@
 urlpatterns = [
     path("form/", views.form),
     path("form/bootstrap/", views.bootstrap_form),
+    path("form/database/", views.databased_backed_form),
 ]

tests/test_app/forms/views.py

@@ -7,3 +7,7 @@ def form(request):
 
 def bootstrap_form(request):
     return render(request, "bootstrap_form.html", {})
+
+
+def databased_backed_form(request):
+    return render(request, "database_backed_form.html", {})

tests/test_app/templates/database_backed_form.html

@@ -0,0 +1,26 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Database Form Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.database_backed_form" %}
+    <hr>
+</body>
+
+</html>