[#2235] Fix toggle-hide for case-related questions

src/open_inwoner/js/components/card/ToggleHideSelection.js → src/open_inwoner/js/components/card/ToggleHide.js

@@ -1,20 +1,21 @@
-export class ToggleHideSelection {
-  static selector = '.card--toggle-hide'
+export class ToggleHide {
+  static selector = '.expand'
+  static selectorCard = '.card--toggle-hide'
 
-  constructor() {
+  constructor(node) {
+    this.node = node
     this.icon = document.querySelector('.expand-icon')
     this.button = document.getElementById('toggle-hide-elements')
     this.button.addEventListener('click', this.toggleHide.bind(this))
     this.button.innerHTML = `${this.icon.outerHTML} ${this.button.dataset.labelReveal} (${this.button.dataset.labelNumElems})`
 
-    // Hide all but the first three cards by default
-    const allCards = document.querySelectorAll(ToggleHideSelection.selector)
-    const cardsTail = Array.from(allCards).slice(3)
+    const toggleCards = document.querySelectorAll(ToggleHide.selectorCard)
 
-    if (cardsTail.length === 0) {
+    // Hide cards or the toggle button/link (if there are no cards to be hidden)
+    if (toggleCards.length === 0) {
       this.button.classList.add('hidden')
     } else {
-      cardsTail.forEach((element) => {
+      toggleCards.forEach((element) => {
         element.classList.add('hidden')
       })
     }
@@ -28,22 +29,20 @@ export class ToggleHideSelection {
     this.button.setAttribute('aria-expanded', isExpanded ? 'true' : 'false')
     this.icon.textContent = isExpanded ? 'expand_more' : 'expand_less'
 
+    // Toggle hide/show on cards
+    const toggleCards = document.querySelectorAll(ToggleHide.selectorCard)
+    toggleCards.forEach((card) => {
+      card.classList.toggle('hidden')
+    })
+
     this.button.innerHTML =
       this.icon.outerHTML +
       (isExpanded
         ? this.button.dataset.labelCollapse
         : `${this.button.dataset.labelReveal} (${this.button.dataset.labelNumElems})`)
-
-    // Toggle 'hidden' class on cards beyond the first three
-    const allCards = document.querySelectorAll(ToggleHideSelection.selector)
-    const cardsTail = Array.from(allCards).slice(3)
-
-    cardsTail.forEach((element) => {
-      element.classList.toggle('hidden', !isExpanded)
-    })
   }
 }
 
 document
-  .querySelectorAll(ToggleHideSelection.selector)
-  .forEach((toggleHide) => new ToggleHideSelection(toggleHide))
+  .querySelectorAll(ToggleHide.selector)
+  .forEach((toggleHide) => new ToggleHide(toggleHide))

src/open_inwoner/js/components/index.js

@@ -32,7 +32,7 @@ import { StatusAccordion } from './cases/status_accordion'
 import './session'
 import './twofactor-sms'
 import { FileInput } from './form/FileInput'
-import { ToggleHideSelection } from './card/ToggleHideSelection'
+import { ToggleHide } from './card/ToggleHide'
 
 const htmx = (window.htmx = require('htmx.org'))
 
@@ -56,7 +56,7 @@ const elementWrappers = [
   [AnchorMobile.selector, (elt) => new AnchorMobile(elt)],
   [StatusAccordion.selector, (elt) => new StatusAccordion(elt)],
   [FileInput.selector, (elt) => new FileInput(elt)],
-  [ToggleHideSelection.selector, (elt) => new ToggleHideSelection(elt)],
+  [ToggleHide.selector, (elt) => new ToggleHide(elt)],
 ]
 
 // harden against multiple events

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

@@ -72,7 +72,6 @@ <h2 class="h2 {% if case.new_docs %}indicator{% endif %}" id="documents">{% tran
                         {% icon extra_classes="expand-icon" icon="expand_more" icon_position="after" icon_outlined=True %}
                     </a>
                 </div>
-
             {% endif %}
 
             {#  Contact form #}

src/open_inwoner/templates/pages/questions/question.html

@@ -0,0 +1,29 @@
+{% load i18n icon_tags list_tags %}
+
+<a href="{% url 'cases:kcm_redirect' contactmoment.uuid %}" class="card card--compact card--stretch {% if toggle_hide %}card--toggle-hide{% endif %} contactmomenten__link">
+    {% if contactmoment.new_answer_available %}
+        {% translate "Nieuw antwoord beschikbaar" as new_answer_text %}
+        {% include "components/StatusIndicator/StatusIndicator.html" with status_indicator="info" status_indicator_text=new_answer_text only %}
+    {% endif %}
+    <div class="card__body">
+        {% render_list %}
+        <span class="contactmomenten-list">
+            <li class="list-item list-item--compact">
+                {% with register_date=contactmoment.registratiedatum|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.tekst compact=True strong=False %}
+            <li class="list-item list-item--compact">
+                {% with channel=contactmoment.kanaal|default:"" %}
+                <p class="card__caption card__text--small"><span>{% trans "Ingediend via" %}:</span><span class="card__text--dark">{{ channel }}</span></p>
+                {% endwith %}
+            </li>
+        </span>
+        {% endrender_list %}
+        <span class="link link--icon link--primary" aria-label="{% trans "Bekijk vraag" %}" title="{% trans "Bekijk vraag" %}">
+            <span class="link__text">{% trans "Bekijk vraag" %}</span>
+            {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
+        </span>
+    </div>
+</a>

src/open_inwoner/templates/pages/questions/questions.html

@@ -2,34 +2,10 @@
 
 <h2 class="h3 contactmomenten__title">{% trans "Vragen" %}</h2>
 <div class="contactmomenten">
-    {% for contactmoment in questions %}
-        {# redirect to fetch klantcontactmoment from contactmoment #}
-        <a href="{% url 'cases:kcm_redirect' contactmoment.uuid %}" class="card card--compact card--stretch card--toggle-hide contactmomenten__link">
-            {% if contactmoment.new_answer_available %}
-                {% translate "Nieuw antwoord beschikbaar" as new_answer_text %}
-                {% include "components/StatusIndicator/StatusIndicator.html" with status_indicator="info" status_indicator_text=new_answer_text only %}
-            {% endif %}
-            <div class="card__body">
-                {% render_list %}
-                <span class="contactmomenten-list">
-                    <li class="list-item list-item--compact">
-                        {% with register_date=contactmoment.registratiedatum|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.tekst compact=True strong=False %}
-                    <li class="list-item list-item--compact">
-                        {% with channel=contactmoment.kanaal|default:"" %}
-                        <p class="card__caption card__text--small"><span>{% trans "Ingediend via" %}:</span><span class="card__text--dark">{{ channel }}</span></p>
-                        {% endwith %}
-                    </li>
-                </span>
-                {% endrender_list %}
-                <span class="link link--icon link--primary" aria-label="{% trans "Bekijk vraag" %}" title="{% trans "Bekijk vraag" %}">
-                    <span class="link__text">{% trans "Bekijk vraag" %}</span>
-                    {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
-                </span>
-            </div>
-        </a>
+    {% for contactmoment in questions|slice:":3" %}
+        {% include "pages/questions/question.html" with contactmoment=contactmoment only %}
+    {% endfor %}
+    {% for contactmoment in questions|slice:"3:" %}
+        {% include "pages/questions/question.html" with contactmoment=contactmoment toggle_hide=True only %}
     {% endfor %}
 </div>