-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#2098] Display/hide older questions
- Loading branch information
Showing
10 changed files
with
195 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
src/open_inwoner/js/components/card/ToggleHideSelection.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| export class ToggleHideSelection { | ||
| static selector = '.card' | ||
|
|
||
| constructor(node) { | ||
| this.node = node | ||
| this.button = document.querySelector('#toggle-hide-elements') | ||
| this.button?.addEventListener('click', this.toggleHide.bind(this)) | ||
|
|
||
| // save default button text for toggling | ||
| this.node.buttonText = this.button.textContent | ||
|
|
||
| // hide all but the first 3 cards by default | ||
| var allCards = document.querySelectorAll('.card') | ||
| var cardsTail = Array.from(allCards).slice(3) | ||
| cardsTail.forEach((element) => { | ||
| element.classList.add('hide-me') | ||
| }) | ||
| } | ||
|
|
||
| toggleHide() { | ||
| var allCards = document.querySelectorAll('.card') | ||
| var cardsTail = Array.from(allCards).slice(3) | ||
|
|
||
| cardsTail.forEach((e) => { | ||
| this.node.classList.toggle('hide-me') | ||
| }) | ||
|
|
||
| // toggle button text | ||
| for (var i = 0; i < cardsTail.length; i++) { | ||
| if (cardsTail[i].classList.contains('hide-me')) { | ||
| this.button.textContent = this.node.buttonText | ||
| break | ||
| } else { | ||
| this.button.textContent = 'Minder toon' | ||
| break | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| document | ||
| .querySelectorAll(ToggleHideSelection.selector) | ||
| .forEach((toggleHide) => new ToggleHideSelection(toggleHide)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| {% load i18n icon_tags list_tags %} | ||
|
|
||
| <div class="contactmomenten"> | ||
| <h2 class="h3 contactmomenten__title">{% trans "Vragen" %}</h2> | ||
| {% for contactmoment in questions %} | ||
| <div class="card card--compact card--stretch"> | ||
| <div class="card__body "> | ||
| {# redirect to fetch klantcontactmoment from contactmoment #} | ||
| <a href="{% url 'cases:kcm_redirect' contactmoment.uuid %}" class="contactmomenten__link"> | ||
| {% render_list %} | ||
| <span class="contactmomenten-list"> | ||
| {% list_item contactmoment.tekst compact=True strong=False %} | ||
| <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> | ||
| {% if contactmoment.identificatie %} | ||
| {% list_item contactmoment.identificatie caption=_("Vraag nummer") compact=True strong=False %} | ||
| {% endif %} | ||
| <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--secondary" 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> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| {% endfor %} | ||
| </div> |