Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Julien Fastré 2021-12-29 18:51:25 +01:00
parent 8fe94bd117
commit 9ddfd194be
6 changed files with 109 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js Normal file
View File

@ -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);
});
})

42
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue Normal file
View File

@ -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>

13
src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig
View File

@ -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>

13
src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
View File

@ -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>

2
src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
View File

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

4
src/Bundle/ChillMainBundle/chill.webpack.config.js
View File

@ -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');
};