From e3256b1f5d733f02cef080be61da8f0d564c2c8b Mon Sep 17 00:00:00 2001 From: Paul Schilling Date: Wed, 28 Feb 2024 15:14:16 +0100 Subject: [PATCH] [#2099] Enable toggle active/inactive for submit button * refactor JS for active/inactive toggle buttons, use more general component --- .../accounts/views/contactmoments.py | 12 +++++++---- .../DisableContactFormButton.js} | 8 ++++---- src/open_inwoner/js/components/form/index.js | 1 + src/open_inwoner/js/components/index.js | 6 +++--- .../scss/components/Cases/CaseDetail.scss | 11 ---------- .../Contactmomenten/Contactmomenten.scss | 15 ++++++++++---- .../templates/pages/cases/contact_form.html | 2 +- .../templates/pages/contactmoment/list.html | 20 +++++++++++-------- 8 files changed, 40 insertions(+), 35 deletions(-) rename src/open_inwoner/js/components/{cases/case_contact_form.js => form/DisableContactFormButton.js} (72%) diff --git a/src/open_inwoner/accounts/views/contactmoments.py b/src/open_inwoner/accounts/views/contactmoments.py index 12c89b49e2..25fa06720e 100644 --- a/src/open_inwoner/accounts/views/contactmoments.py +++ b/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 diff --git a/src/open_inwoner/js/components/cases/case_contact_form.js b/src/open_inwoner/js/components/form/DisableContactFormButton.js similarity index 72% rename from src/open_inwoner/js/components/cases/case_contact_form.js rename to src/open_inwoner/js/components/form/DisableContactFormButton.js index b7c76bb0b6..ab4a394314 100644 --- a/src/open_inwoner/js/components/cases/case_contact_form.js +++ b/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)) diff --git a/src/open_inwoner/js/components/form/index.js b/src/open_inwoner/js/components/form/index.js index 27529c308e..1dbc905f9b 100644 --- a/src/open_inwoner/js/components/form/index.js +++ b/src/open_inwoner/js/components/form/index.js @@ -1 +1,2 @@ import './FileInput' +import './DisableContactFormButton' diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js index c505e303c0..7fe3dc3276 100644 --- a/src/open_inwoner/js/components/index.js +++ b/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)], diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss index c61fc188d9..e2d3d1110c 100644 --- a/src/open_inwoner/scss/components/Cases/CaseDetail.scss +++ b/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; - } - } } diff --git a/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss b/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss index ffc90bbcb3..37bedfd7e8 100644 --- a/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss +++ b/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss @@ -1,6 +1,17 @@ .contactmomenten { margin-top: var(--spacing-giant); + .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; + } + } + &__scrolldown { padding-top: 3em; @@ -40,10 +51,6 @@ max-width: 100% !important; } } - - .button { - float: left; - } } } diff --git a/src/open_inwoner/templates/pages/cases/contact_form.html b/src/open_inwoner/templates/pages/cases/contact_form.html index 5a8462df92..3cd01187c7 100644 --- a/src/open_inwoner/templates/pages/cases/contact_form.html +++ b/src/open_inwoner/templates/pages/cases/contact_form.html @@ -9,7 +9,7 @@

{% trans 'Stel een vraag' %}

{% endblocktrans %}

-{% 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 %}
diff --git a/src/open_inwoner/templates/pages/contactmoment/list.html b/src/open_inwoner/templates/pages/contactmoment/list.html index df2c642c81..8a8c126c3b 100644 --- a/src/open_inwoner/templates/pages/contactmoment/list.html +++ b/src/open_inwoner/templates/pages/contactmoment/list.html @@ -16,7 +16,9 @@

{% trans "Stel een vraag" %}

{% endblocktrans %}

- {% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %} +
+ {% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %} +
@@ -76,16 +78,18 @@

{% trans "Stel een vraag" %}

-
+ {% csrf_token %} - {% for field in question_form.fields %} - {% autorender_field question_form field %} + + {% for field in form.fields %} + {% autorender_field form field %} {% endfor %} - +
+ {% 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 %} +