diff --git a/src/open_inwoner/js/components/card/ToggleHideSelection.js b/src/open_inwoner/js/components/card/ToggleHide.js similarity index 57% rename from src/open_inwoner/js/components/card/ToggleHideSelection.js rename to src/open_inwoner/js/components/card/ToggleHide.js index 0ce35da437..3376e29c64 100644 --- a/src/open_inwoner/js/components/card/ToggleHideSelection.js +++ b/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)) diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js index 96849aa58a..57a53952d8 100644 --- a/src/open_inwoner/js/components/index.js +++ b/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 diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html index f1cdd6f712..bf4379c304 100644 --- a/src/open_inwoner/templates/pages/cases/status_inner.html +++ b/src/open_inwoner/templates/pages/cases/status_inner.html @@ -72,7 +72,6 @@

{% tran {% icon extra_classes="expand-icon" icon="expand_more" icon_position="after" icon_outlined=True %} - {% endif %} {# Contact form #} diff --git a/src/open_inwoner/templates/pages/questions/question.html b/src/open_inwoner/templates/pages/questions/question.html new file mode 100644 index 0000000000..257de236ef --- /dev/null +++ b/src/open_inwoner/templates/pages/questions/question.html @@ -0,0 +1,29 @@ +{% load i18n icon_tags list_tags %} + + + {% 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 %} +
+ {% render_list %} + +
  • + {% with register_date=contactmoment.registratiedatum|default:"" %} +

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

    + {% endwith %} +
  • + {% list_item contactmoment.tekst compact=True strong=False %} +
  • + {% with channel=contactmoment.kanaal|default:"" %} +

    {% trans "Ingediend via" %}:{{ channel }}

    + {% endwith %} +
  • +
    + {% endrender_list %} + + {% trans "Bekijk vraag" %} + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} + +
    +
    diff --git a/src/open_inwoner/templates/pages/questions/questions.html b/src/open_inwoner/templates/pages/questions/questions.html index 8bbdcd78f6..26dd83295e 100644 --- a/src/open_inwoner/templates/pages/questions/questions.html +++ b/src/open_inwoner/templates/pages/questions/questions.html @@ -2,34 +2,10 @@

    {% trans "Vragen" %}

    - {% for contactmoment in questions %} - {# redirect to fetch klantcontactmoment from contactmoment #} - - {% 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 %} -
    - {% render_list %} - -
  • - {% with register_date=contactmoment.registratiedatum|default:"" %} -

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

    - {% endwith %} -
  • - {% list_item contactmoment.tekst compact=True strong=False %} -
  • - {% with channel=contactmoment.kanaal|default:"" %} -

    {% trans "Ingediend via" %}:{{ channel }}

    - {% endwith %} -
  • -
    - {% endrender_list %} - - {% trans "Bekijk vraag" %} - {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} - -
    -
    + {% 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 %}