[#2099] Re-design mijn vragen

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
@@ -16,6 +16,7 @@
 from open_inwoner.openklant.clients import build_client
 from open_inwoner.openklant.constants import Status
 from open_inwoner.openklant.models import ContactFormSubject
+from open_inwoner.openklant.views.contactform import ContactFormView
 from open_inwoner.openklant.wrap import (
     fetch_klantcontactmoment,
     fetch_klantcontactmomenten,
@@ -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,8 +100,40 @@ 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, ContactFormView, KlantContactMomentBaseView
+):
+    """
+    Display "contactmomenten" (questions), and a form (via ContactFormView) to send a new question
+    """
 
-class KlantContactMomentListView(PaginationMixin, KlantContactMomentBaseView):
     template_name = "pages/contactmoment/list.html"
     paginate_by = 9
 

src/open_inwoner/js/components/cases/case_contact_form.js → src/open_inwoner/js/components/form/DisableContactFormButton.js

@@ -1,5 +1,5 @@
-export class DisableCaseContactButton {
-  static selector = '.case-contact-form'
+export class DisableContactFormButton {
+  static selector = '.contact-form'
 
   constructor(form) {
     this.form = form
@@ -21,5 +21,5 @@ export class DisableCaseContactButton {
 }
 
 document
-  .querySelectorAll(DisableCaseContactButton.selector)
-  .forEach((caseContactForm) => new DisableCaseContactButton(caseContactForm))
+  .querySelectorAll(DisableContactFormButton.selector)
+  .forEach((ContactForm) => new DisableContactFormButton(ContactForm))

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

@@ -1,2 +1,3 @@
 import './FileInput'
 import './ChoiceListSingle'
+import './DisableContactFormButton'

src/open_inwoner/js/components/index.js

@@ -9,7 +9,7 @@ import './autocomplete-search'
 import './autocomplete'
 import './autosumbit'
 import './cases'
-import { DisableCaseContactButton } from './cases/case_contact_form'
+import { DisableContactFormButton } from './form/DisableContactFormButton'
 import { DisableSubmitButton } from './cases/document_upload'
 import './confirmation'
 import './contacts'
@@ -48,8 +48,8 @@ const elementWrappers = [
   [CreateGumshoe.selector, (elt) => new CreateGumshoe(elt)],
   [DisableSubmitButton.selector, (elt) => new DisableSubmitButton(elt)],
   [
-    DisableCaseContactButton.selector,
-    (elt) => new DisableCaseContactButton(elt),
+    DisableContactFormButton.selector,
+    (elt) => new DisableContactFormButton(elt),
   ],
   [Notification.selector, (elt) => new Notification(elt)],
   [AnchorMobile.selector, (elt) => new AnchorMobile(elt)],

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;

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

@@ -87,15 +87,4 @@
   #cases-contact-form-content > h2 {
     margin-top: var(--spacing-large);
   }
-
-  .case-contact-form {
-    .button[type='submit']:disabled,
-    .button--primary.button--disabled {
-      background-color: var(--color-gray) !important;
-      border-color: var(--color-gray) !important;
-      color: var(--color-white);
-      cursor: default;
-      pointer-events: none;
-    }
-  }
 }

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);
-    }
-  }
 }

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

@@ -1,6 +1,48 @@
 .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;
+        }
+      }
+    }
+  }
+
   & .grid {
     grid-row-gap: var(--spacing-medium);
     grid-column-gap: var(--spacing-extra-large);
@@ -73,3 +115,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;
+}

src/open_inwoner/scss/components/Form/Form.scss

@@ -273,6 +273,17 @@
       grid-template-columns: 1fr 1fr 1fr 1fr;
     }
   }
+
+  /// buttons
+
+  .button[type='submit']:disabled,
+  .button--primary.button--disabled {
+    background-color: var(--color-gray) !important;
+    border-color: var(--color-gray) !important;
+    color: var(--color-white);
+    cursor: default;
+    pointer-events: none;
+  }
 }
 
 /// Specific forms

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

@@ -9,7 +9,7 @@ <h2 class="h2" id="contact">{% trans 'Stel een vraag' %}</h2>
     {% endblocktrans %}
 </p>
 
-{% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="case-contact-form" %}
+{% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="contact-form" %}
     {% csrf_token %}
     {% textarea contact_form.question %}
     <div class="form__submit">