From 22022e5143419c8ed63b8469f5faeb2309b0b880 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 14 Jan 2022 20:02:00 +0100
Subject: [PATCH] JS toggle class read/unread status works on *all* container
 (change DOM selector)

---
 .../public/module/notification/toggle_read.js    | 16 ++++++++--------
 .../views/Notification/_list_item.html.twig      |  2 +-
 .../extension_list_notifications_for.html.twig   |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js b/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
index 9788ca82a..68b06b76a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
@@ -6,7 +6,7 @@ const i18n = _createI18n({});
 
 window.addEventListener('DOMContentLoaded', function (e) {
     document.querySelectorAll('.notification_toggle_read_status')
-        .forEach(function (el) {
+        .forEach(function (el, i) {
             createApp({
                 template: '<notification-read-toggle ' +
                     ':notificationId="notificationId" ' +
@@ -31,20 +31,20 @@ window.addEventListener('DOMContentLoaded', function (e) {
                 },
                 computed: {
                     getContainer() {
-                        return document.getElementById(this.container);
+                        return document.querySelectorAll('div.' + this.container);
                     }
                 },
                 methods: {
                     onMarkRead() {
-                        if (null !== this.getContainer) {
-                            this.getContainer.classList.replace('read', 'unread');
-                        }
+                        if (typeof this.getContainer[i] !== 'undefined') {
+                            this.getContainer[i].classList.replace('read', 'unread');
+                        } else { throw 'data-container attribute is missing' }
                         this.isRead = false;
                     },
                     onMarkUnread() {
-                        if (null !== this.getContainer) {
-                            this.getContainer.classList.replace('unread', 'read');
-                        }
+                        if (typeof this.getContainer[i] !== 'undefined') {
+                            this.getContainer[i].classList.replace('unread', 'read');
+                        } else { throw 'data-container attribute is missing' }
                         this.isRead = true;
                     },
                 }
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
index 3cead3aff..836993924 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
@@ -1,4 +1,4 @@
-<div class="item-bloc {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status">
+<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
     <div class="item-row title">
         <h2 class="notification-title">
             <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
index ebe498d0d..8bb695078 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
@@ -4,7 +4,7 @@
     </div>
     {# TODO pagination or limit #}
     {% for notification in notifications %}
-        <div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status">
+        <div class="list-group-item notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
 
             {% if not notification.isSystem %}
                 {% if notification.sender == app.user %}