notification: fix widget toggle read status

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

@@ -1,38 +1,35 @@
 import {createApp} from "vue";
 import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
 
-const App = {
-    template: '<notification-read-toggle ' +
-        ':notificationId="notificationId" ' +
-        ':isRead="isRead"' +
-        '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
-        '></notification-read-toggle>',
-    components: {
-        NotificationReadToggle,
-    },
-    methods: {
-        onMarkRead() {
-            this.isRead = true;
-        },
-        onMarkUnread() {
-            this.isRead = false;
-        },
-    }
-}
-
 window.addEventListener('DOMContentLoaded', function (e) {
     document.querySelectorAll('.notification_toggle_read_status')
-        .forEach(function (app) {
+        .forEach(function (el) {
-            console.log('app', app);
+            console.log('app', el);
-            const myApp = Object.assign(App, {
+            const App = {
+                template: '<notification-read-toggle ' +
+                    ':notificationId="notificationId" ' +
+                    ':isRead="isRead"' +
+                    '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
+                    '></notification-read-toggle>',
+                components: {
+                    NotificationReadToggle,
+                },
                 data() {
                     return {
-                        notificationId: +app.dataset.notificationId,
+                        notificationId: +el.dataset.notificationId,
-                        isRead: 1 === +app.dataset.notificationCurrentIsRead,
+                        isRead: 1 === +el.dataset.notificationCurrentIsRead,
                     }
+                },
+                methods: {
+                    onMarkRead() {
+                        this.isRead = false;
+                    },
+                    onMarkUnread() {
+                        this.isRead = true;
+                    },
                 }
-            })
+            }
 
-            createApp(myApp).mount(app);
+            createApp(App).mount(el);
         });
 })

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -23,14 +23,12 @@ export default {
     methods: {
         markAsUnread() {
            makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
-               console.log('marked as unread', this.notificationId);
                this.$emit('markRead', { notificationId: this.notificationId });
            })
         },
         markAsRead() {
             makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/read`, []).then(response => {
-                console.log('marked as read', this.notificationId);
+                this.$emit('markUnread', { notificationId: this.notificationId });
-                this.$emit('markRead', { notificationId: this.notificationId });
             })
         },
     },