Skip to content

Commit a27c585

Browse files
pi-sigmapi-sigma
committed
[#2099] Enable toggle active/inactive for submit button
 * refactor JS for active/inactive toggle buttons, use more general component
1 parent 70da7ce commit a27c585

File tree

8 files changed

+131
-29
lines changed

8 files changed

+131
-29
lines changed

‎src/open_inwoner/accounts/views/contactmoments.py

+101
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,107 @@ def get_context_data(self, **kwargs):
151151
)
152152
ctx["contactmomenten"] = [self.get_kcm_data(kcm) for kcm in kcms]
153153
ctx["question_form"] = ContactForm(user=self.request.user)
154+
155+
# TODO
156+
import zoneinfo
157+
158+
from django.utils import timezone
159+
160+
old_date = datetime(
161+
2012, 3, 3, 20, 10, 50, tzinfo=zoneinfo.ZoneInfo(key="Europe/Paris")
162+
)
163+
164+
ctx["contactmomenten"] = [
165+
KCMDict(
166+
registered_date=timezone.now(),
167+
channel="Contact Formulier",
168+
text="Mag ik mijn garage veranderen in een kantoor?\n\n",
169+
url="https://contactmomenten.nl/api/vi1/contactmoment/aaaaaaaa-aaa",
170+
identificatie="BA321",
171+
type="test",
172+
onderwerp="Garage verbouwen",
173+
status="afgehandeld",
174+
antwoord="Hier is een vergunning voor nodig vanwege het bestemmingsplan.",
175+
),
176+
KCMDict(
177+
registered_date=old_date,
178+
channel="sms",
179+
text="hello world",
180+
url="http://example.com",
181+
identificatie="123",
182+
type="test",
183+
onderwerp="foo",
184+
status="bar",
185+
antwoord="yes - no - maybe",
186+
),
187+
KCMDict(
188+
registered_date=timezone.now(),
189+
channel="sms",
190+
text="hello world",
191+
url="http://example.com",
192+
identificatie="123",
193+
type="test",
194+
onderwerp="foo",
195+
status="bar",
196+
antwoord="yes - no - maybe",
197+
),
198+
KCMDict(
199+
registered_date=timezone.now(),
200+
channel="sms",
201+
text="hello world",
202+
url="http://example.com",
203+
identificatie="123",
204+
type="test",
205+
onderwerp="foo",
206+
status="bar",
207+
antwoord="yes - no - maybe",
208+
),
209+
KCMDict(
210+
registered_date=timezone.now(),
211+
channel="sms",
212+
text="hello world",
213+
url="http://example.com",
214+
identificatie="123",
215+
type="test",
216+
onderwerp="foo",
217+
status="bar",
218+
antwoord="yes - no - maybe",
219+
),
220+
KCMDict(
221+
registered_date=timezone.now(),
222+
channel="sms",
223+
text="hello world",
224+
url="http://example.com",
225+
identificatie="123",
226+
type="test",
227+
onderwerp="foo",
228+
status="bar",
229+
antwoord="yes - no - maybe",
230+
),
231+
KCMDict(
232+
registered_date=timezone.now(),
233+
channel="sms",
234+
text="hello world",
235+
url="http://example.com",
236+
identificatie="123",
237+
type="test",
238+
onderwerp="foo",
239+
status="bar",
240+
antwoord="yes - no - maybe",
241+
),
242+
KCMDict(
243+
registered_date=timezone.now(),
244+
channel="sms",
245+
text="hello world",
246+
url="http://example.com",
247+
identificatie="123",
248+
type="test",
249+
onderwerp="foo",
250+
status="bar",
251+
antwoord="yes - no - maybe",
252+
),
253+
]
254+
154255
paginator_dict = self.paginate_with_context(ctx["contactmomenten"])
155256
ctx.update(paginator_dict)
156257
return ctx

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
export class DisableCaseContactButton {
2-
static selector = '.case-contact-form'
1+
export class DisableContactFormButton {
2+
static selector = '.contact-form'
33

44
constructor(form) {
55
this.form = form
@@ -21,5 +21,5 @@ export class DisableCaseContactButton {
2121
}
2222

2323
document
24-
.querySelectorAll(DisableCaseContactButton.selector)
25-
.forEach((caseContactForm) => new DisableCaseContactButton(caseContactForm))
24+
.querySelectorAll(DisableContactFormButton.selector)
25+
.forEach((ContactForm) => new DisableContactFormButton(ContactForm))

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

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
import './FileInput'
2+
import './DisableContactFormButton'

‎src/open_inwoner/js/components/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import './autocomplete-search'
99
import './autocomplete'
1010
import './autosumbit'
1111
import './cases'
12-
import { DisableCaseContactButton } from './cases/case_contact_form'
12+
import { DisableContactFormButton } from './form/DisableContactFormButton'
1313
import { DisableSubmitButton } from './cases/document_upload'
1414
import './confirmation'
1515
import './contacts'
@@ -48,8 +48,8 @@ const elementWrappers = [
4848
[CreateGumshoe.selector, (elt) => new CreateGumshoe(elt)],
4949
[DisableSubmitButton.selector, (elt) => new DisableSubmitButton(elt)],
5050
[
51-
DisableCaseContactButton.selector,
52-
(elt) => new DisableCaseContactButton(elt),
51+
DisableContactFormButton.selector,
52+
(elt) => new DisableContactFormButton(elt),
5353
],
5454
[Notification.selector, (elt) => new Notification(elt)],
5555
[AnchorMobile.selector, (elt) => new AnchorMobile(elt)],

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

-11
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,4 @@
8787
#cases-contact-form-content > h2 {
8888
margin-top: var(--spacing-large);
8989
}
90-
91-
.case-contact-form {
92-
.button[type='submit']:disabled,
93-
.button--primary.button--disabled {
94-
background-color: var(--color-gray) !important;
95-
border-color: var(--color-gray) !important;
96-
color: var(--color-white);
97-
cursor: default;
98-
pointer-events: none;
99-
}
100-
}
10190
}

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

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
.contactmomenten {
22
margin-top: var(--spacing-giant);
33

4+
.contact-form {
5+
.button[type='submit']:disabled,
6+
.button--primary.button--disabled {
7+
background-color: var(--color-gray) !important;
8+
border-color: var(--color-gray) !important;
9+
color: var(--color-white);
10+
cursor: default;
11+
pointer-events: none;
12+
}
13+
}
14+
415
&__scrolldown {
516
padding-top: 3em;
617

@@ -40,10 +51,6 @@
4051
max-width: 100% !important;
4152
}
4253
}
43-
44-
.button {
45-
float: left;
46-
}
4754
}
4855
}
4956

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h2 class="h2" id="contact">{% trans 'Stel een vraag' %}</h2>
99
{% endblocktrans %}
1010
</p>
1111

12-
{% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="case-contact-form" %}
12+
{% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="contact-form" %}
1313
{% csrf_token %}
1414
{% textarea contact_form.question %}
1515
<div class="form__submit">

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

+10-6
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ <h2 class="h2">{% trans "Stel een vraag" %}</h2>
1616
{% endblocktrans %}
1717
</p>
1818
</div>
19-
{% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
19+
<div class="button-row">
20+
{% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
21+
</div>
2022
</div>
2123
</section>
2224

@@ -76,16 +78,18 @@ <h2 class="h2">{% trans "Stel een vraag" %}</h2>
7678
</p>
7779
</div>
7880
<div>
79-
<form action="#" method="POST" id="question-form">
81+
<form action="#" method="POST" id="question-form" class="contact-form">
8082
{% csrf_token %}
83+
8184
{% for field in question_form.fields %}
8285
{% autorender_field question_form field %}
8386
{% endfor %}
8487

85-
<button class="button button--textless button--icon button--icon-after button--primary" type="submit">
86-
<span aria-hidden="true" class="material-icons">arrow_forward</span>
87-
{% trans "Verstuur vraag" %}
88-
</button>
88+
<div class="form__submit">
89+
{% button_row %}
90+
{% 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" %}
91+
{% endbutton_row %}
92+
</div>
8993
</form>
9094
</div>
9195
</div>

0 commit comments

Comments
 (0)