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

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

Browse Source
This commit is contained in:
Mathieu Jaumotte 2022-01-13 18:56:07 +01:00
parent d7d7fb5693
commit 819017112d
4 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js
View File

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

3
src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
View File

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

3
src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig
View File

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

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

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