Make vragen detail conform to design

src/open_inwoner/accounts/views/contactmoments.py

@@ -216,24 +216,55 @@ def get_context_data(self, **kwargs):
             ocm = client.retrieve_objectcontactmoment(
                 kcm.contactmoment, "zaak", zaken_client
             )
-            ctx["zaak"] = getattr(ocm, "object", None)
+            zaak = getattr(ocm, "object", None)
+            if zaak:
+                zaak_url = reverse(
+                    "cases:case_detail", kwargs={"object_id": str(zaak.uuid)}
+                )
+            else:
+                zaak_url = None
+            ctx["zaak"] = zaak
 
         contactmoment: KCMDict = self.get_kcm_data(kcm)
         ctx["contactmoment"] = contactmoment
         ctx["metrics"] = [
             {
-                "label": _("Ontvangstdatum: "),
+                "label": _("Status: "),
+                "value": contactmoment["status"],
+            },
+            {
+                "label": _("Ingediend op: "),
                 "value": contactmoment["registered_date"],
             },
             {
-                "label": _("Contactwijze: "),
-                "value": contactmoment["channel"],
+                "label": _("Vraag nummer: "),
+                "value": contactmoment["identificatie"],
             },
             {
-                "label": _("Status: "),
-                "value": contactmoment["status"],
+                "label": _("Contact gehad via: "),
+                "value": contactmoment["channel"],
             },
         ]
+        origin = self.request.headers.get("Referer")
+        if origin == reverse("cases:contactmoment_list"):
+            ctx["origin"] = {
+                "label": _("Terug naar overzicht"),
+                "url": origin,
+            }
+            if zaak:
+                ctx["destination"] = {
+                    "label": _("Naar aanvrag"),
+                    "url": zaak_url,
+                }
+        else:
+            ctx["origin"] = {
+                "label": _("Terug naar aanvrag"),
+                "url": zaak_url,
+            }
+            ctx["destination"] = {
+                "label": _("Bekijk alle vragen"),
+                "url": reverse("cases:contactmoment_list"),
+            }
         return ctx
 
 

src/open_inwoner/openklant/tests/test_views.py

@@ -292,9 +292,9 @@ def test_show_detail_for_bsn_with_zaak(self, m, mock_get_kcm_answer_mapping):
             },
         )
 
-        zaak_link = response.pyquery(".case-detail__link")
+        zaak_link = response.pyquery("#origin_link")
 
-        self.assertEqual(zaak_link.text(), _("Ga naar zaak"))
+        self.assertIn(_("Terug naar aanvrag"), zaak_link.text())
         self.assertEqual(
             zaak_link.attr("href"),
             reverse(
@@ -303,6 +303,13 @@ def test_show_detail_for_bsn_with_zaak(self, m, mock_get_kcm_answer_mapping):
             ),
         )
 
+        contactmoment_link = response.pyquery("#destination_link")
+        self.assertIn(_("Bekijk alle vragen"), contactmoment_link.text())
+        self.assertEqual(
+            contactmoment_link.attr("href"),
+            reverse("cases:contactmoment_list"),
+        )
+
         kcm_local = KlantContactMomentAnswer.objects.get(
             contactmoment_url=data.klant_contactmoment["contactmoment"]
         )
@@ -328,13 +335,8 @@ def test_show_detail_for_bsn_with_zaak_reformat_esuite_id(
         kcm = response.context["contactmoment"]
         cm_data = data.contactmoment
 
-        zaak_id = (
-            response.pyquery.find(".case-detail__link").parent().text().split(" ")[0]
-        )
-
         self.assertIsNotNone(response.context["zaak"])
         self.assertEqual(response.context["zaak"].url, data.zaak["url"])
-        self.assertEqual(zaak_id, "542-2021")
         self.assertEqual(
             kcm,
             {
@@ -351,9 +353,9 @@ def test_show_detail_for_bsn_with_zaak_reformat_esuite_id(
             },
         )
 
-        zaak_link = response.pyquery(".case-detail__link")
+        zaak_link = response.pyquery("#origin_link")
 
-        self.assertEqual(zaak_link.text(), _("Ga naar zaak"))
+        self.assertIn(_("Terug naar aanvrag"), zaak_link.text())
         self.assertEqual(
             zaak_link.attr("href"),
             reverse(
@@ -362,6 +364,13 @@ def test_show_detail_for_bsn_with_zaak_reformat_esuite_id(
             ),
         )
 
+        contactmoment_link = response.pyquery("#destination_link")
+        self.assertIn(_("Bekijk alle vragen"), contactmoment_link.text())
+        self.assertEqual(
+            contactmoment_link.attr("href"),
+            reverse("cases:contactmoment_list"),
+        )
+
     def test_display_esuite_subject_code(self, m, mock_get_kcm_answer_mapping):
         data = MockAPIReadData().install_mocks(m)
 

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

@@ -74,46 +74,15 @@
 }
 
 .contactmoment {
-  &__details {
-    // Set table width for word-break
-    table {
-      margin-top: 0;
-      overflow-x: auto;
-      table-layout: fixed;
-      width: 100%;
-      @media (min-width: 768px) {
-        width: var(--mobile-ms-width);
-      }
-    }
-    table th {
-      width: 100px;
-      white-space: nowrap;
-    }
-    table td {
-      width: 300px;
-      overflow: hidden;
-      word-break: break-word;
-      white-space: normal;
-
-      &.table__item--status {
-        .table__item--wrapper {
-          display: flex;
-          justify-content: space-between;
-        }
-      }
+  margin: auto;
+  width: 100%;
 
-      .case-detail__link {
-        color: var(--color-primary);
-        text-decoration: none;
+  @media (min-width: 768px) and (max-width: 900px) {
+    width: 75%;
+  }
 
-        &::after {
-          font-family: 'Material Icons';
-          content: 'arrow_forward';
-          font-size: 1em;
-          vertical-align: middle;
-        }
-      }
-    }
+  @media (min-width: 901px) {
+    width: 50%;
   }
 }
 

src/open_inwoner/templates/pages/contactmoment/detail.html

@@ -1,21 +1,42 @@
 {% extends 'master.html' %}
-{% load i18n anchor_menu_tags card_tags file_tags grid_tags table_tags solo_tags form_tags button_tags %}
+{% load i18n grid_tags table_tags button_tags icon_tags %}
 
 {% block content %}
     {% if contactmoment %}
         {% render_grid %}
             {% render_column span=12 %}
-                {# Contactmoment/dashboard. #}
-                <h1 class="h1" id="title">{{ page_title }}</h1>
+                <h1 class="h1" id="title">{{ contactmoment.onderwerp }}</h1>
                 {% include "components/Dashboard/Dashboard.html" with metrics=metrics only %}
             {% endrender_column %}
-            {% render_column start=4 span=6 %}
+        {% endrender_grid %}
 
-                <div class="contactmoment__details">
-                {% contactmoment_table contactmoment zaak=zaak %}
+        <div class="container--no-margin">
+            <div class="contactmoment">
+                <h3>{% trans "Uw vraag" %}</h3>
+                <p>{{ contactmoment.text }}</p>
+            </div>
+            <div class="contactmoment">
+                <h3>{% trans "Antwoord" %}</h3>
+                {% if contactmoment.antwoord %}
+                    <p>{{ contactmoment.antwoord }}</p>
+                {% else %}
+                    <p>{% trans "Nog geen antwoord beschijkbaar" %}</p>
+                {% endif %}
+            </div>
+            <div class="contactmoment">
+                <a href="{{ origin.url }}" id="origin_link" class="button button--secondary">
+                    {% icon "arrow_backward" %}{{ origin.label }}
+                </a>
+            </div>
+            {% if destination %}
+                <div class="contactmoment">
+                    <a href="{{ destination.url }}" id="destination_link" class="button button--transparent">
+                        {{ destination.label }}{% icon "arrow_forward" %}
+                    </a>
                 </div>
-            {% endrender_column %}
-        {% endrender_grid %}
+            {% endif %}
+        </div>
+
     {% else %}
         <h2 class="h2">{% trans 'There is no available data at the moment.' %}</h2>
     {% endif %}