notification: small vue component to toggle read status of a notification

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

@@ -0,0 +1,38 @@
+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) {
+            console.log('app', app);
+            const myApp = Object.assign(App, {
+                data() {
+                    return {
+                        notificationId: +app.dataset.notificationId,
+                        isRead: 1 === +app.dataset.notificationCurrentIsRead,
+                    }
+                }
+            })
+
+            createApp(myApp).mount(app);
+        });
+})

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

@@ -0,0 +1,42 @@
+<template>
+    <button v-if="isRead" @click="markAsUnread">Marquer non-lu</button>
+    <button v-if="!isRead" @click="markAsRead">Marquer lu</button>
+</template>
+
+<script>
+
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+    name: "NotificationReadToggle",
+    props: {
+        isRead: {
+            required: true,
+            type: Boolean,
+        },
+        notificationId: {
+            required: true,
+            type: Number,
+        }
+    },
+    emits: ['markRead', 'markUnread'],
+    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('markRead', { notificationId: this.notificationId });
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -2,6 +2,16 @@
 
 {% block title 'notification.List'|trans %}
 
+{% block js %}
+  {{ parent() }}
+  {{ encore_entry_script_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
 {% block content %}
     <div id="container content">
         <div class="row">
@@ -66,6 +76,9 @@
                                 </div>
                                 <div class="item-row">
                                     <ul class="record_actions">
+                                        <li>
+                                            <span class="notification_toggle_read_status" data-notification-id="{{ notification.id }}" data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"></span>
+                                        </li>
                                         {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
                                             <li>
                                                 <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}" class="btn btn-edit"></a>

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

@@ -2,6 +2,16 @@
 
 {% block title 'notification.show notification from %sender%'|trans({ '%sender%': notification.sender|chill_entity_render_string }) %}
 
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
 {% block content %}
     <div class="row">
         <div class="col-md-10">
@@ -77,6 +87,9 @@
                         {{ 'Cancel'|trans|chill_return_path_label }}
                     </a>
                 </li>
+                <li>
+                    <span class="notification_toggle_read_status" data-notification-id="{{ notification.id }}" data-notification-current-is-read="1"></span>
+                </li>
             </ul>
         </div>
     </div>

src/Bundle/ChillMainBundle/Resources/views/layout.html.twig

@@ -106,6 +106,6 @@
         });
     </script>
 
-    {% block js%}<!-- nothing added to js -->{% endblock %}
+    {% block js %}<!-- nothing added to js -->{% endblock %}
 </body>
 </html>

src/Bundle/ChillMainBundle/chill.webpack.config.js

@@ -61,10 +61,10 @@ module.exports = function(encore, entries)
     encore.addEntry('mod_ckeditor5', __dirname + '/Resources/public/module/ckeditor5/index.js');
     encore.addEntry('mod_disablebuttons', __dirname + '/Resources/public/module/disable-buttons/index.js');
     encore.addEntry('mod_blur', __dirname + '/Resources/public/module/blur/index.js');
-
     encore.addEntry('mod_input_address', __dirname + '/Resources/public/vuejs/Address/mod_input_address_index.js');
+    encore.addEntry('mod_notification_toggle_read_status', __dirname + '/Resources/public/module/notification/toggle_read.js');
+
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');
     encore.addEntry('vue_onthefly', __dirname + '/Resources/public/vuejs/OnTheFly/index.js');
-
 };