Skip to content

Commit

Permalink
[#2099] Re-design mijn vragen
Browse files Browse the repository at this point in the history
  • Loading branch information
@pi-sigma
pi-sigma committed Feb 23, 2024
1 parent 6282dd5 commit 34c28db
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 73 deletions.
51 changes: 31 additions & 20 deletions src/open_inwoner/accounts/views/contactmoments.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import logging
from datetime import datetime
from typing import TypedDict
from typing import Optional, TypedDict

from django.contrib.auth.mixins import AccessMixin
from django.http import Http404
Expand All @@ -15,6 +15,7 @@
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.wrap import (
fetch_klantcontactmoment,
Expand Down Expand Up @@ -90,25 +91,7 @@ def get_kcm_data(self, kcm: KlantContactMoment) -> KCMDict:
# replace e_suite_subject_code with OIP configured subject, if applicable
e_suite_subject_code = getattr(kcm.contactmoment, "onderwerp", None)

if not e_suite_subject_code:
data["onderwerp"] = None
else:
try:
subject = ContactFormSubject.objects.get(
subject_code=e_suite_subject_code
)
except (
ContactFormSubject.DoesNotExist,
ContactFormSubject.MultipleObjectsReturned,
) as e:
logger.warning(
"Could not determine subject ('onderwerp') for contactmoment %s (%s)",
kcm.contactmoment.url,
e,
)
data["onderwerp"] = None
else:
data["onderwerp"] = subject.subject
data["onderwerp"] = self.get_kcm_subject(kcm, e_suite_subject_code)

return data

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

def get_kcm_subject(
self,
kcm: KlantContactMoment,
e_suite_subject_code: str,
) -> Optional[str]:
"""
Try to determine the subject ('onderwerp') of a contactmoment
"""
if not e_suite_subject_code:
return None

try:
subject = ContactFormSubject.objects.get(subject_code=e_suite_subject_code)
except (
ContactFormSubject.DoesNotExist,
ContactFormSubject.MultipleObjectsReturned,
) as exc:
logger.warning(
"Could not determine subject ('onderwerp') for contactmoment %s",
kcm.contactmoment.url,
exc_info=exc,
)
return None

return subject.subject


class KlantContactMomentListView(PaginationMixin, KlantContactMomentBaseView):
template_name = "pages/contactmoment/list.html"
form_class = ContactForm
paginate_by = 9

@cached_property
Expand All @@ -140,6 +150,7 @@ 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
Expand Down
43 changes: 43 additions & 0 deletions src/open_inwoner/scss/components/Card/Card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,49 @@
}
}

&__header {
display: flex;
background-color: var(--color-info-lighter);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
color: var(--color-info-darker);
font-size: var(--font-size-body);

.card__status_indicator_text {
// Fix for optical illusion
padding: 8px var(--spacing-large) 10px 0;
}

[class*='icons'] {
// Fix for optical illusion
margin: 6px 10px 6px 10px;
}

&.success {
display: flex;
background-color: var(--color-success-lighter);
color: var(--color-success);
}

&.info {
display: flex;
background-color: var(--color-info-lighter);
color: var(--color-info-darker);
}

&.warning {
display: flex;
background-color: var(--color-danger-lightest);
color: var(--color-danger-darker);
}

&.failure {
display: flex;
background-color: var(--color-error-lighter);
color: var(--color-error-darker);
}
}

&__img {
height: 100px;
object-fit: cover;
Expand Down
45 changes: 0 additions & 45 deletions src/open_inwoner/scss/components/Cases/Cases.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,49 +41,4 @@
&__detail {
box-sizing: border-box;
}

/// cards with statuses

.card__header {
display: flex;
background-color: var(--color-info-lighter);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
color: var(--color-info-darker);
font-size: var(--font-size-body);

.card__status_indicator_text {
// Fix for optical illusion
padding: 8px var(--spacing-large) 10px 0;
}

[class*='icons'] {
// Fix for optical illusion
margin: 6px 10px 6px 10px;
}

&.success {
display: flex;
background-color: var(--color-success-lighter);
color: var(--color-success);
}

&.info {
display: flex;
background-color: var(--color-info-lighter);
color: var(--color-info-darker);
}

&.warning {
display: flex;
background-color: var(--color-danger-lightest);
color: var(--color-danger-darker);
}

&.failure {
display: flex;
background-color: var(--color-error-lighter);
color: var(--color-error-darker);
}
}
}
58 changes: 58 additions & 0 deletions src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,52 @@
.contactmomenten {
margin-top: var(--spacing-giant);

&__scrolldown {
padding-top: 3em;

.form-container {
width: 50%;
}

.button {
margin-top: var(--spacing-giant);
}
}

&__contact-form {
text-align: center;

.form-container {
margin: auto;
width: 50%;
}

.form-heading {
padding-bottom: var(--spacing-giant);
text-align: left;
}

form {
textarea {
width: 100%;
}

.form__control {
label {
padding-bottom: var(--spacing-extra-large);
}

.input {
max-width: 100% !important;
}
}

.button {
float: left;
}
}
}

& .grid {
grid-row-gap: var(--spacing-medium);
grid-column-gap: var(--spacing-extra-large);
Expand Down Expand Up @@ -73,3 +119,15 @@
}
}
}

// overrides of elements outside of components
section {
display: block;
padding-bottom: 2em;
}

.pagination {
display: table !important;
margin: 0 auto !important;
padding-top: 1em !important;
}
68 changes: 60 additions & 8 deletions src/open_inwoner/templates/pages/contactmoment/list.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,51 @@
{% extends 'master.html' %}
{% load i18n anchor_menu_tags card_tags grid_tags icon_tags link_tags list_tags pagination_tags utils %}
{% load i18n anchor_menu_tags button_tags card_tags form_tags grid_tags icon_tags link_tags list_tags pagination_tags utils %}

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

{# title + scroll down button #}
<section class="contactmomenten__scrolldown">
<div class="form-container">
<div class="form-heading">
<h2 class="h2">{% trans "Stel een vraag" %}</h2>
<p class="p">
{% blocktrans trimmed %}
Heeft u een vraag? Dan kunt u deze hier stellen.
Een van onze medewerkers beantwoord uw vraag z.s.m.
{% endblocktrans %}
</p>
</div>
{% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
</div>
</section>

{# grid with questions #}
<div class="contactmomenten">
{% if contactmomenten %}
<h2 class="contactmomenten__title">{% trans "Eerder gestelde vragen" %}</h2>
{% else %}
<h2>{% trans "U heeft op dit moment nog geen vragen." %}</h2>
{% endif %}

{% render_grid %}
{% for contactmoment in page_obj.object_list %}
{% render_column start=forloop.counter_0|multiply:4 span=4 %}
<div class="card card--compact card--stretch">
{% include "components/StatusIndicator/StatusIndicator.html" with status_indicator="info" status_indicator_text="Nieuw antwoord bechikbaar" only %}
<div class="card__body">
<a href="{{ contactmoment.url }}" class="contactmomenten__link">
{% render_list %}
<span class="contactmomenten-list">
{% list_item contactmoment.registered_date caption=_("Ontvangstdatum") compact=True strong=False %}
{% list_item contactmoment.channel caption=_("Contactwijze") compact=True strong=False %}
<h2 class="card__heading-2">{{ contactmoment.onderwerp }}</h2>
<li class="list-item list-item--compact">
{% with register_date=contactmoment.registered_date|default:"" %}
<p class="card__caption card__text--small"><span>{% trans "Vraag ingediend op:" %}</span><span class="card__text--dark">{{ register_date|date }}</span></p>
{% endwith %}
</li>
{% list_item contactmoment.text compact=True strong=False %}
{% list_item contactmoment.status caption=_("Status") compact=True strong=False %}
{% if contactmoment.onderwerp %}
{% list_item contactmoment.onderwerp|truncatechars:25 caption=_("Onderwerp") compact=True strong=False %}
{% else %}
{% list_item contactmoment.text|truncatechars:25 caption=_("Bericht") compact=True strong=False %}
{% endif %}
{% list_item contactmoment.identificatie caption=_("Vraag nummer") compact=True strong=False %}
</span>
{% endrender_list %}

Expand All @@ -39,4 +64,31 @@ <h1 class="utrecht-heading-1" id="contactmomenten">{{ page_title }} ({{ contactm
{% if contactmomenten %}
{% pagination page_obj=page_obj paginator=paginator request=request %}
{% endif %}

<section class="contactmomenten contactmomenten__contact-form">
<div class="form-container">
<div class="form-heading">
<h2 class="h2">{% trans "Stel een vraag" %}</h2>
<p class="p">
{% blocktrans trimmed %}
Heeft u een vraag? Dan kunt u deze hier stellen.
Een van onze medewerkers beantwoord uw vraag z.s.m.
{% endblocktrans %}
</p>
</div>
<div>
<form action="#" method="POST" id="question-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>
</form>
</div>
</div>
</section>
{% endblock content %}

0 comments on commit 34c28db

Please sign in to comment.