From 34c28dbcf888912df92beff0f8975d164d4cc2c5 Mon Sep 17 00:00:00 2001 From: Paul Schilling Date: Tue, 20 Feb 2024 14:14:50 +0100 Subject: [PATCH] [#2099] Re-design mijn vragen --- .../accounts/views/contactmoments.py | 51 ++++++++------ .../scss/components/Card/Card.scss | 43 ++++++++++++ .../scss/components/Cases/Cases.scss | 45 ------------ .../Contactmomenten/Contactmomenten.scss | 58 ++++++++++++++++ .../templates/pages/contactmoment/list.html | 68 ++++++++++++++++--- 5 files changed, 192 insertions(+), 73 deletions(-) diff --git a/src/open_inwoner/accounts/views/contactmoments.py b/src/open_inwoner/accounts/views/contactmoments.py index 03f0ae7c6c..b49821c92d 100644 --- a/src/open_inwoner/accounts/views/contactmoments.py +++ b/src/open_inwoner/accounts/views/contactmoments.py @@ -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 @@ -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, @@ -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 @@ -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 @@ -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 diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss index 820e39bb26..461800a8fa 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -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; diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss index a76959b18a..119fd3a4f3 100644 --- a/src/open_inwoner/scss/components/Cases/Cases.scss +++ b/src/open_inwoner/scss/components/Cases/Cases.scss @@ -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); - } - } } diff --git a/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss b/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss index 92343095df..ffc90bbcb3 100644 --- a/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss +++ b/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss @@ -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); @@ -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; +} diff --git a/src/open_inwoner/templates/pages/contactmoment/list.html b/src/open_inwoner/templates/pages/contactmoment/list.html index f3f5b84002..525df2d8c3 100644 --- a/src/open_inwoner/templates/pages/contactmoment/list.html +++ b/src/open_inwoner/templates/pages/contactmoment/list.html @@ -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 %}

{{ page_title }} ({{ contactmomenten|length }})

+ {# title + scroll down button #} +
+
+
+

{% trans "Stel een vraag" %}

+

+ {% blocktrans trimmed %} + Heeft u een vraag? Dan kunt u deze hier stellen. + Een van onze medewerkers beantwoord uw vraag z.s.m. + {% endblocktrans %} +

+
+ {% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %} +
+
+ + {# grid with questions #}
+ {% if contactmomenten %} +

{% trans "Eerder gestelde vragen" %}

+ {% else %} +

{% trans "U heeft op dit moment nog geen vragen." %}

+ {% endif %} + {% render_grid %} {% for contactmoment in page_obj.object_list %} {% render_column start=forloop.counter_0|multiply:4 span=4 %}
+ {% include "components/StatusIndicator/StatusIndicator.html" with status_indicator="info" status_indicator_text="Nieuw antwoord bechikbaar" only %}
{% render_list %} - {% list_item contactmoment.registered_date caption=_("Ontvangstdatum") compact=True strong=False %} - {% list_item contactmoment.channel caption=_("Contactwijze") compact=True strong=False %} +

{{ contactmoment.onderwerp }}

+
  • + {% with register_date=contactmoment.registered_date|default:"" %} +

    {% trans "Vraag ingediend op:" %}{{ register_date|date }}

    + {% endwith %} +
    • + {% 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 %}     {% endrender_list %} @@ -39,4 +64,31 @@

    {{ page_title }} ({{ contactm {% if contactmomenten %} {% pagination page_obj=page_obj paginator=paginator request=request %} {% endif %} + +
    +
    +
    +

    {% trans "Stel een vraag" %}

    +

    + {% blocktrans trimmed %} + Heeft u een vraag? Dan kunt u deze hier stellen. + Een van onze medewerkers beantwoord uw vraag z.s.m. + {% endblocktrans %} +

    +
    +
    +
    + {% csrf_token %} + {% for field in question_form.fields %} + {% autorender_field question_form field %} + {% endfor %} + + +
    +
    +
    +
    {% endblock content %}