[#2099] Enable toggle active/inactive for submit button

Author: pi-sigma

src/open_inwoner/accounts/views/contactmoments.py

@@ -15,8 +15,8 @@
 from open_inwoner.openklant.api_models import KlantContactMoment
 from open_inwoner.openklant.clients import build_client
 from open_inwoner.openklant.constants import Status
-from open_inwoner.openklant.forms import ContactForm
 from open_inwoner.openklant.models import ContactFormSubject
+from open_inwoner.openklant.views.contactform import ContactFormView
 from open_inwoner.openklant.wrap import (
     fetch_klantcontactmoment,
     fetch_klantcontactmomenten,
@@ -127,9 +127,14 @@ def get_kcm_subject(
         return subject.subject
 
 
-class KlantContactMomentListView(PaginationMixin, KlantContactMomentBaseView):
+class KlantContactMomentListView(
+    PaginationMixin, ContactFormView, KlantContactMomentBaseView
+):
+    """
+    Display "contactmomenten" (questions), and a form (via ContactFormView) to send a new question
+    """
+
     template_name = "pages/contactmoment/list.html"
-    form_class = ContactForm
     paginate_by = 9
 
     @cached_property
@@ -150,7 +155,6 @@ def get_context_data(self, **kwargs):
             **get_fetch_parameters(self.request, use_vestigingsnummer=True)
         )
         ctx["contactmomenten"] = [self.get_kcm_data(kcm) for kcm in kcms]
-        ctx["question_form"] = ContactForm(user=self.request.user)
         paginator_dict = self.paginate_with_context(ctx["contactmomenten"])
         ctx.update(paginator_dict)
         return ctx

src/open_inwoner/js/components/cases/case_contact_form.js renamed to src/open_inwoner/js/components/form/DisableContactFormButton.js

@@ -1,5 +1,5 @@
-export class DisableCaseContactButton {
-  static selector = '.case-contact-form'
+export class DisableContactFormButton {
+  static selector = '.contact-form'
 
   constructor(form) {
     this.form = form
@@ -21,5 +21,5 @@ export class DisableCaseContactButton {
 }
 
 document
-  .querySelectorAll(DisableCaseContactButton.selector)
-  .forEach((caseContactForm) => new DisableCaseContactButton(caseContactForm))
+  .querySelectorAll(DisableContactFormButton.selector)
+  .forEach((ContactForm) => new DisableContactFormButton(ContactForm))

src/open_inwoner/js/components/form/index.js

@@ -1,2 +1,3 @@
 import './FileInput'
 import './ChoiceListSingle'
+import './DisableContactFormButton'

src/open_inwoner/js/components/index.js

@@ -9,7 +9,7 @@ import './autocomplete-search'
 import './autocomplete'
 import './autosumbit'
 import './cases'
-import { DisableCaseContactButton } from './cases/case_contact_form'
+import { DisableContactFormButton } from './form/DisableContactFormButton'
 import { DisableSubmitButton } from './cases/document_upload'
 import './confirmation'
 import './contacts'
@@ -48,8 +48,8 @@ const elementWrappers = [
   [CreateGumshoe.selector, (elt) => new CreateGumshoe(elt)],
   [DisableSubmitButton.selector, (elt) => new DisableSubmitButton(elt)],
   [
-    DisableCaseContactButton.selector,
-    (elt) => new DisableCaseContactButton(elt),
+    DisableContactFormButton.selector,
+    (elt) => new DisableContactFormButton(elt),
   ],
   [Notification.selector, (elt) => new Notification(elt)],
   [AnchorMobile.selector, (elt) => new AnchorMobile(elt)],

src/open_inwoner/scss/components/Cases/CaseDetail.scss

@@ -87,15 +87,4 @@
   #cases-contact-form-content > h2 {
     margin-top: var(--spacing-large);
   }
-
-  .case-contact-form {
-    .button[type='submit']:disabled,
-    .button--primary.button--disabled {
-      background-color: var(--color-gray) !important;
-      border-color: var(--color-gray) !important;
-      color: var(--color-white);
-      cursor: default;
-      pointer-events: none;
-    }
-  }
 }

src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss

@@ -40,10 +40,6 @@
           max-width: 100% !important;
         }
       }
-
-      .button {
-        float: left;
-      }
     }
   }
 
@@ -120,6 +116,18 @@
   }
 }
 
+
+.contact-form {
+    .button[type='submit']:disabled,
+    .button--primary.button--disabled {
+      background-color: var(--color-gray) !important;
+      border-color: var(--color-gray) !important;
+      color: var(--color-white);
+      cursor: default;
+      pointer-events: none;
+    }
+}
+
 // overrides of elements outside of components
 section {
   display: block;

src/open_inwoner/templates/pages/cases/contact_form.html

@@ -9,7 +9,7 @@ <h2 class="h2" id="contact">{% trans 'Stel een vraag' %}</h2>
     {% endblocktrans %}
 </p>
 
-{% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="case-contact-form" %}
+{% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="contact-form" %}
     {% csrf_token %}
     {% textarea contact_form.question %}
     <div class="form__submit">

src/open_inwoner/templates/pages/contactmoment/list.html

@@ -16,7 +16,9 @@ <h2 class="h2">{% trans "Stel een vraag" %}</h2>
                 {% endblocktrans %}
                 </p>
             </div>
-            {% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
+            <div class="button-row">
+                {% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
+            </div>
         </div>
     </section>
 
@@ -76,16 +78,18 @@ <h2 class="h2">{% trans "Stel een vraag" %}</h2>
                 </p>
             </div>
             <div>
-                <form action="#" method="POST" id="question-form">
+                <form action="{% url 'cases:contactmoment_list' %}" method="POST" id="question-form" class="contact-form">
                     {% csrf_token %}
-                    {% for field in question_form.fields %}
-                        {% autorender_field question_form field %}
-                    {% endfor %}
 
-                    <button class="button button--textless button--icon button--icon-after button--primary" type="submit">
-                        <span aria-hidden="true" class="material-icons">arrow_forward</span>
-                        {% trans "Verstuur vraag" %}
-                    </button>
+                    {% input form.subject no_help=True icon="expand_more" %}
+                    {% input form.phonenumber no_help=True %}
+                    {% input form.question no_help=True %}
+
+                    <div class="form__submit">
+                        {% button_row %}
+                            {% button text=_("Vraag versturen") icon="east" icon_position="after" icon_outlined=True id="submit_question" type="submit" disabled=True primary=True name="question_form_submit" %}
+                        {% endbutton_row %}
+                    </div>
                 </form>
             </div>
         </div>