Skip to content

Commit 51a29f7

Browse files
pi-sigmapi-sigma
committed
[#2099] Re-design mijn vragen
1 parent 3c780d7 commit 51a29f7

File tree

5 files changed

+192
-73
lines changed

5 files changed

+192
-73
lines changed

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

+31-20
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import logging
22
from datetime import datetime
3-
from typing import TypedDict
3+
from typing import Optional, TypedDict
44

55
from django.contrib.auth.mixins import AccessMixin
66
from django.http import Http404
@@ -15,6 +15,7 @@
1515
from open_inwoner.openklant.api_models import KlantContactMoment
1616
from open_inwoner.openklant.clients import build_client
1717
from open_inwoner.openklant.constants import Status
18+
from open_inwoner.openklant.forms import ContactForm
1819
from open_inwoner.openklant.models import ContactFormSubject
1920
from open_inwoner.openklant.wrap import (
2021
fetch_klantcontactmoment,
@@ -90,25 +91,7 @@ def get_kcm_data(self, kcm: KlantContactMoment) -> KCMDict:
9091
# replace e_suite_subject_code with OIP configured subject, if applicable
9192
e_suite_subject_code = getattr(kcm.contactmoment, "onderwerp", None)
9293

93-
if not e_suite_subject_code:
94-
data["onderwerp"] = None
95-
else:
96-
try:
97-
subject = ContactFormSubject.objects.get(
98-
subject_code=e_suite_subject_code
99-
)
100-
except (
101-
ContactFormSubject.DoesNotExist,
102-
ContactFormSubject.MultipleObjectsReturned,
103-
) as e:
104-
logger.warning(
105-
"Could not determine subject ('onderwerp') for contactmoment %s (%s)",
106-
kcm.contactmoment.url,
107-
e,
108-
)
109-
data["onderwerp"] = None
110-
else:
111-
data["onderwerp"] = subject.subject
94+
data["onderwerp"] = self.get_kcm_subject(kcm, e_suite_subject_code)
11295

11396
return data
11497

@@ -117,9 +100,36 @@ def get_context_data(self, **kwargs):
117100
ctx["anchors"] = self.get_anchors()
118101
return ctx
119102

103+
def get_kcm_subject(
104+
self,
105+
kcm: KlantContactMoment,
106+
e_suite_subject_code: str,
107+
) -> Optional[str]:
108+
"""
109+
Try to determine the subject ('onderwerp') of a contactmoment
110+
"""
111+
if not e_suite_subject_code:
112+
return None
113+
114+
try:
115+
subject = ContactFormSubject.objects.get(subject_code=e_suite_subject_code)
116+
except (
117+
ContactFormSubject.DoesNotExist,
118+
ContactFormSubject.MultipleObjectsReturned,
119+
) as exc:
120+
logger.warning(
121+
"Could not determine subject ('onderwerp') for contactmoment %s",
122+
kcm.contactmoment.url,
123+
exc_info=exc,
124+
)
125+
return None
126+
127+
return subject.subject
128+
120129

121130
class KlantContactMomentListView(PaginationMixin, KlantContactMomentBaseView):
122131
template_name = "pages/contactmoment/list.html"
132+
form_class = ContactForm
123133
paginate_by = 9
124134

125135
@cached_property
@@ -140,6 +150,7 @@ def get_context_data(self, **kwargs):
140150
**get_fetch_parameters(self.request, use_vestigingsnummer=True)
141151
)
142152
ctx["contactmomenten"] = [self.get_kcm_data(kcm) for kcm in kcms]
153+
ctx["question_form"] = ContactForm(user=self.request.user)
143154
paginator_dict = self.paginate_with_context(ctx["contactmomenten"])
144155
ctx.update(paginator_dict)
145156
return ctx

‎src/open_inwoner/scss/components/Card/Card.scss

+43
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,49 @@
8484
}
8585
}
8686

87+
&__header {
88+
display: flex;
89+
background-color: var(--color-info-lighter);
90+
border-top-left-radius: var(--border-radius);
91+
border-top-right-radius: var(--border-radius);
92+
color: var(--color-info-darker);
93+
font-size: var(--font-size-body);
94+
95+
.card__status_indicator_text {
96+
// Fix for optical illusion
97+
padding: 8px var(--spacing-large) 10px 0;
98+
}
99+
100+
[class*='icons'] {
101+
// Fix for optical illusion
102+
margin: 6px 10px 6px 10px;
103+
}
104+
105+
&.success {
106+
display: flex;
107+
background-color: var(--color-success-lighter);
108+
color: var(--color-success);
109+
}
110+
111+
&.info {
112+
display: flex;
113+
background-color: var(--color-info-lighter);
114+
color: var(--color-info-darker);
115+
}
116+
117+
&.warning {
118+
display: flex;
119+
background-color: var(--color-danger-lightest);
120+
color: var(--color-danger-darker);
121+
}
122+
123+
&.failure {
124+
display: flex;
125+
background-color: var(--color-error-lighter);
126+
color: var(--color-error-darker);
127+
}
128+
}
129+
87130
&__img {
88131
height: 100px;
89132
object-fit: cover;

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

-45
Original file line numberDiff line numberDiff line change
@@ -41,49 +41,4 @@
4141
&__detail {
4242
box-sizing: border-box;
4343
}
44-
45-
/// cards with statuses
46-
47-
.card__header {
48-
display: flex;
49-
background-color: var(--color-info-lighter);
50-
border-top-left-radius: var(--border-radius);
51-
border-top-right-radius: var(--border-radius);
52-
color: var(--color-info-darker);
53-
font-size: var(--font-size-body);
54-
55-
.card__status_indicator_text {
56-
// Fix for optical illusion
57-
padding: 8px var(--spacing-large) 10px 0;
58-
}
59-
60-
[class*='icons'] {
61-
// Fix for optical illusion
62-
margin: 6px 10px 6px 10px;
63-
}
64-
65-
&.success {
66-
display: flex;
67-
background-color: var(--color-success-lighter);
68-
color: var(--color-success);
69-
}
70-
71-
&.info {
72-
display: flex;
73-
background-color: var(--color-info-lighter);
74-
color: var(--color-info-darker);
75-
}
76-
77-
&.warning {
78-
display: flex;
79-
background-color: var(--color-danger-lightest);
80-
color: var(--color-danger-darker);
81-
}
82-
83-
&.failure {
84-
display: flex;
85-
background-color: var(--color-error-lighter);
86-
color: var(--color-error-darker);
87-
}
88-
}
8944
}

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

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

4+
&__scrolldown {
5+
padding-top: 3em;
6+
7+
.form-container {
8+
width: 50%;
9+
}
10+
11+
.button {
12+
margin-top: var(--spacing-giant);
13+
}
14+
}
15+
16+
&__contact-form {
17+
text-align: center;
18+
19+
.form-container {
20+
margin: auto;
21+
width: 50%;
22+
}
23+
24+
.form-heading {
25+
padding-bottom: var(--spacing-giant);
26+
text-align: left;
27+
}
28+
29+
form {
30+
textarea {
31+
width: 100%;
32+
}
33+
34+
.form__control {
35+
label {
36+
padding-bottom: var(--spacing-extra-large);
37+
}
38+
39+
.input {
40+
max-width: 100% !important;
41+
}
42+
}
43+
44+
.button {
45+
float: left;
46+
}
47+
}
48+
}
49+
450
& .grid {
551
grid-row-gap: var(--spacing-medium);
652
grid-column-gap: var(--spacing-extra-large);
@@ -73,3 +119,15 @@
73119
}
74120
}
75121
}
122+
123+
// overrides of elements outside of components
124+
section {
125+
display: block;
126+
padding-bottom: 2em;
127+
}
128+
129+
.pagination {
130+
display: table !important;
131+
margin: 0 auto !important;
132+
padding-top: 1em !important;
133+
}

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

+60-8
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,51 @@
11
{% extends 'master.html' %}
2-
{% load i18n anchor_menu_tags card_tags grid_tags icon_tags link_tags list_tags pagination_tags utils %}
2+
{% load i18n anchor_menu_tags button_tags card_tags form_tags grid_tags icon_tags link_tags list_tags pagination_tags utils %}
33

44
{% block content %}
55
<h1 class="utrecht-heading-1" id="contactmomenten">{{ page_title }} ({{ contactmomenten|length }})</h1>
66

7+
{# title + scroll down button #}
8+
<section class="contactmomenten__scrolldown">
9+
<div class="form-container">
10+
<div class="form-heading">
11+
<h2 class="h2">{% trans "Stel een vraag" %}</h2>
12+
<p class="p">
13+
{% blocktrans trimmed %}
14+
Heeft u een vraag? Dan kunt u deze hier stellen.
15+
Een van onze medewerkers beantwoord uw vraag z.s.m.
16+
{% endblocktrans %}
17+
</p>
18+
</div>
19+
{% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
20+
</div>
21+
</section>
22+
23+
{# grid with questions #}
724
<div class="contactmomenten">
25+
{% if contactmomenten %}
26+
<h2 class="contactmomenten__title">{% trans "Eerder gestelde vragen" %}</h2>
27+
{% else %}
28+
<h2>{% trans "U heeft op dit moment nog geen vragen." %}</h2>
29+
{% endif %}
30+
831
{% render_grid %}
932
{% for contactmoment in page_obj.object_list %}
1033
{% render_column start=forloop.counter_0|multiply:4 span=4 %}
1134
<div class="card card--compact card--stretch">
35+
{% include "components/StatusIndicator/StatusIndicator.html" with status_indicator="info" status_indicator_text="Nieuw antwoord bechikbaar" only %}
1236
<div class="card__body">
1337
<a href="{{ contactmoment.url }}" class="contactmomenten__link">
1438
{% render_list %}
1539
<span class="contactmomenten-list">
16-
{% list_item contactmoment.registered_date caption=_("Ontvangstdatum") compact=True strong=False %}
17-
{% list_item contactmoment.channel caption=_("Contactwijze") compact=True strong=False %}
40+
<h2 class="card__heading-2">{{ contactmoment.onderwerp }}</h2>
41+
<li class="list-item list-item--compact">
42+
{% with register_date=contactmoment.registered_date|default:"" %}
43+
<p class="card__caption card__text--small"><span>{% trans "Vraag ingediend op:" %}</span><span class="card__text--dark">{{ register_date|date }}</span></p>
44+
{% endwith %}
45+
</li>
46+
{% list_item contactmoment.text compact=True strong=False %}
1847
{% list_item contactmoment.status caption=_("Status") compact=True strong=False %}
19-
{% if contactmoment.onderwerp %}
20-
{% list_item contactmoment.onderwerp|truncatechars:25 caption=_("Onderwerp") compact=True strong=False %}
21-
{% else %}
22-
{% list_item contactmoment.text|truncatechars:25 caption=_("Bericht") compact=True strong=False %}
23-
{% endif %}
48+
{% list_item contactmoment.identificatie caption=_("Vraag nummer") compact=True strong=False %}
2449
</span>
2550
{% endrender_list %}
2651

@@ -39,4 +64,31 @@ <h1 class="utrecht-heading-1" id="contactmomenten">{{ page_title }} ({{ contactm
3964
{% if contactmomenten %}
4065
{% pagination page_obj=page_obj paginator=paginator request=request %}
4166
{% endif %}
67+
68+
<section class="contactmomenten contactmomenten__contact-form">
69+
<div class="form-container">
70+
<div class="form-heading">
71+
<h2 class="h2">{% trans "Stel een vraag" %}</h2>
72+
<p class="p">
73+
{% blocktrans trimmed %}
74+
Heeft u een vraag? Dan kunt u deze hier stellen.
75+
Een van onze medewerkers beantwoord uw vraag z.s.m.
76+
{% endblocktrans %}
77+
</p>
78+
</div>
79+
<div>
80+
<form action="#" method="POST" id="question-form">
81+
{% csrf_token %}
82+
{% for field in question_form.fields %}
83+
{% autorender_field question_form field %}
84+
{% endfor %}
85+
86+
<button class="button button--textless button--icon button--icon-after button--primary" type="submit">
87+
<span aria-hidden="true" class="material-icons">arrow_forward</span>
88+
{% trans "Verstuur vraag" %}
89+
</button>
90+
</form>
91+
</div>
92+
</div>
93+
</section>
4294
{% endblock content %}

0 commit comments

Comments
 (0)