submit/reset buttons can be added to Forms and Collections

testapp/forms/profile.py

@@ -3,7 +3,6 @@
 from formset.collection import FormCollection
 from formset.dialog import ApplyButton, CancelButton, DialogForm
 from formset.fields import Activator
-from formset.renderers import ButtonVariant
 from formset.widgets import Button, UploadedFileInput
 
 

testapp/forms/terms_of_use.py

@@ -0,0 +1,62 @@
+from django.forms import fields, forms
+from django.utils.safestring import mark_safe
+
+from formset.collection import FormCollection
+from formset.dialog import ApplyButton, CancelButton, DialogForm
+from formset.fields import Activator
+from formset.renderers import ButtonVariant
+from formset.widgets import Button
+
+
+class AcceptDialogForm(DialogForm):
+    title = "Terms of Use"
+    epilogue = mark_safe("""
+        <p>This site does not allow content or activity that:</p>
+        <ul>
+            <li>is unlawful or promotes violence.</li>
+            <li>shows sexual exploitation or abuse.</li>
+            <li>harasses, defames or defrauds other users.</li>
+            <li>is discriminatory against other groups of users.</li>
+            <li>violates the privacy of other users.</li>
+        </ul>
+        <p>Before proceeding, please accept the terms of use.</p>
+    """)
+    induce_open = 'submit:active'
+    induce_close = '.close:active'
+    close = Activator(
+        label="Close",
+        widget=CancelButton,
+    )
+
+
+class UserNameForm(forms.Form):
+    full_name = fields.CharField(
+        label="Full Name",
+        max_length=100,
+    )
+    accept_terms = fields.BooleanField(
+        label="Accept terms of use",
+        required=False,
+    )
+
+
+class AcceptTermsCollection(FormCollection):
+    legend = "User Acceptance Collection"
+    user = UserNameForm()
+    accept = AcceptDialogForm()
+    submit = Activator(
+        label="Submit",
+        widget=Button(
+            action='user.accept_terms ? disable -> submit -> reload !~ scrollToError : activate',
+            button_variant=ButtonVariant.PRIMARY,
+            icon_path='formset/icons/send.svg',
+        ),
+    )
+    reset = Activator(
+        label="Reset to initial",
+        widget=Button(
+            action='reset',
+            button_variant=ButtonVariant.WARNING,
+            icon_path='formset/icons/reset.svg',
+        ),
+    )

testapp/templates/testapp/form-collection-no-buttons.html

@@ -0,0 +1,7 @@
+{% extends framework|default:"testapp"|add:"/base.html" %}
+
+{% block main-content %}
+<django-formset endpoint="{{ request.path }}"{% if force_submission %} force-submission{% endif %}{% if withhold_feedback %} withhold-feedback="{{ withhold_feedback }}"{% endif %} csrf-token="{{ csrf_token }}">
+	{{ form_collection }}
+</django-formset>
+{% endblock %}

testapp/templates/testapp/native-form-no-buttons.html

@@ -0,0 +1,8 @@
+{% extends framework|default:"testapp"|add:"/base.html" %}
+{% load render_form from formsetify %}
+
+{% block main-content %}
+<django-formset endpoint="{{ request.path }}"{% if force_submission %} force-submission{% endif %}{% if withhold_feedback %} withhold-feedback="{{ withhold_feedback }}"{% endif %} csrf-token="{{ csrf_token }}">
+	{% render_form form framework form_classes=form_css_classes field_classes=field_css_classes fieldset_classes=fieldset_css_classes label_classes=label_css_classes|default:None control_classes=control_css_classes %}
+</django-formset>
+{% endblock %}

testapp/tests/test_e2e_button.py

@@ -248,6 +248,7 @@ def test_button_submit(page, mocker, viewname):
     button_elem = page.locator('django-formset button').first
     spy = mocker.spy(FormView, 'post')
     button_elem.click()
+    sleep(0.25)
     assert spy.called is True
     request = json.loads(spy.call_args.args[1].body)
     assert request['formset_data']['enter'] == "BAR"

testapp/views.py

@@ -33,6 +33,7 @@
 from testapp.forms.advertisement import AdvertisementForm
 from testapp.forms.article import ArticleForm
 from testapp.forms.blog import BlogModelForm
+from testapp.forms.company import CompanyCollection, CompaniesCollection
 from testapp.forms.complete import CompleteForm
 from testapp.forms.contact import (
     SimpleContactCollection, ContactCollection, ContactCollectionList, IntermediateContactCollectionList,
@@ -42,6 +43,7 @@
 from testapp.forms.country import CountryForm
 from testapp.forms.county import CountyForm
 from testapp.forms.customer import CustomerCollection
+from testapp.forms.gallerycollection import GalleryCollection
 from testapp.forms.moment import MomentBoxForm, MomentCalendarForm, MomentInputForm, MomentPickerForm
 from testapp.forms.moon import MoonForm, MoonCalendarRenderer
 from testapp.forms.opinion import OpinionForm
@@ -52,10 +54,9 @@
 from testapp.forms.questionnaire import QuestionnaireForm
 from testapp.forms.schedule import ScheduleBoxForm, ScheduleCalendarForm, SchedulePickerForm
 from testapp.forms.state import StateForm, StatesForm
-from testapp.forms.company import CompanyCollection, CompaniesCollection
+from testapp.forms.terms_of_use import AcceptTermsCollection
 from testapp.forms.user import UserCollection, UserListCollection
 from testapp.forms.upload import UploadForm
-from testapp.forms.gallerycollection import GalleryCollection
 from testapp.models import BlogModel, Company, PersonModel, PollModel
 from testapp.models.gallery import Gallery
 
@@ -316,7 +317,11 @@ class GalleryCollectionView(DemoFormCollectionViewMixin, SessionFormCollectionVi
     'default': {'*': {}},
     'bootstrap': {
         '*': {
-            'field_css_classes': 'mb-2',
+            'field_css_classes': {
+                '*': 'mb-2',
+                'submit': 'd-grid col-3',
+                'reset': 'd-grid col-3',
+            },
             'fieldset_css_classes': 'border p-3',
             'button_css_classes': 'mt-4',
         },
@@ -326,8 +331,8 @@ class GalleryCollectionView(DemoFormCollectionViewMixin, SessionFormCollectionVi
                 '*': 'mb-2 col-12',
                 'postal_code': 'mb-2 col-4',
                 'city': 'mb-2 col-8',
-                'submit': 'd-grid col-3',
-                'reset': 'd-grid col-3',
+                'submit': 'd-grid col-6 col-md-5 col-lg-4 col-xl-3',
+                'reset': 'd-grid col-6 col-md-5 col-lg-4 col-xl-3',
             },
         },
         'horizontal': {
@@ -351,7 +356,14 @@ class GalleryCollectionView(DemoFormCollectionViewMixin, SessionFormCollectionVi
                 'label': 'mb-2 col-4',
                 '*': 'mb-2 col-12',
             },
-        }
+        },
+        # 'terms_of_use': {
+        #     'field_css_classes': {
+        #         '*': 'mb-2 col-12',
+        #         'submit': 'd-grid col-3',
+        #         'reset': 'd-grid col-3',
+        #     },
+        # },
     },
     'bulma': {
         '*': {
@@ -461,6 +473,7 @@ class CompleteForm(FormMixin, forms.Form):
     ), name='complete.horizontal'),
     path('address', DemoFormView.as_view(
         form_class=AddressForm,
+        template_name='testapp/native-form-no-buttons.html'
     ), name='address'),
     path('article', DemoFormView.as_view(
         form_class=ArticleForm,
@@ -520,6 +533,10 @@ class CompleteForm(FormMixin, forms.Form):
         collection_class=SimpleContactCollection,
         initial={'person': sample_person_data},
     ), name='simplecontact'),
+    path('terms_of_use', DemoFormCollectionView.as_view(
+        collection_class=AcceptTermsCollection,
+        template_name='testapp/form-collection-no-buttons.html',
+    ), name='simplecontact'),
     path('customer', DemoFormCollectionView.as_view(
         collection_class=CustomerCollection,
     ), name='customer'),