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

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>