JS toggle class read/unread when clicking on vue component NotificationReadToggle.vue

src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js

@@ -26,13 +26,25 @@ window.addEventListener('DOMContentLoaded', function (e) {
                         buttonNoText: 'false' === el.dataset.buttonText,
                         showUrl: el.dataset.showButtonUrl,
                         isRead: 1 === +el.dataset.notificationCurrentIsRead,
+                        container: el.dataset.container
+                    }
+                },
+                computed: {
+                    getContainer() {
+                        return document.getElementById(this.container);
                     }
                 },
                 methods: {
                     onMarkRead() {
+                        if (null !== this.getContainer) {
+                            this.getContainer.classList.replace('read', 'unread');
+                        }
                         this.isRead = false;
                     },
                     onMarkUnread() {
+                        if (null !== this.getContainer) {
+                            this.getContainer.classList.replace('unread', 'read');
+                        }
                         this.isRead = true;
                     },
                 }
@@ -40,4 +52,4 @@ window.addEventListener('DOMContentLoaded', function (e) {
             .use(i18n)
             .mount(el);
         });
-})
+});

src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig

@@ -1,4 +1,4 @@
-<div class="item-bloc {% if not notification.isReadBy(app.user) %}unread{% else %}read{% endif %}">
+<div class="item-bloc {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status">
     <div class="item-row title">
         <h2 class="notification-title">
             <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
@@ -70,6 +70,7 @@
                     <span class="notification_toggle_read_status"
                           data-notification-id="{{ notification.id }}"
                           data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                          data-container="notification-status"
                     ></span>
                 </li>
                 {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}

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 %}">
+        <div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status">
 
             {% if not notification.isSystem %}
                 {% if notification.sender == app.user %}
@@ -17,6 +17,7 @@
                         <span class="notification_toggle_read_status"
                             data-notification-id="{{ notification.id }}"
                             data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                            data-container="notification-status"
                             data-show-button-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
                             data-button-class="btn-outline-primary"
                             data-button-text="false"

src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig

@@ -115,6 +115,7 @@
             <span class="notification_toggle_read_status"
                 data-notification-id="{{ notification.id }}"
                 data-notification-current-is-read="1"
+                data-container="notification-status"
             ></span>
         </li>
     </ul>