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 status works on *all* container (change DOM selector)

Browse Source
This commit is contained in:
Mathieu Jaumotte 2022-01-14 20:02:00 +01:00
parent 20fcaa5428
commit 22022e5143
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ const i18n = _createI18n({});
window.addEventListener('DOMContentLoaded', function (e) { window.addEventListener('DOMContentLoaded', function (e) {
document.querySelectorAll('.notification_toggle_read_status') document.querySelectorAll('.notification_toggle_read_status')
.forEach(function (el) { .forEach(function (el, i) {
createApp({ createApp({
template: '<notification-read-toggle ' + template: '<notification-read-toggle ' +
':notificationId="notificationId" ' + ':notificationId="notificationId" ' +
@ -31,20 +31,20 @@ window.addEventListener('DOMContentLoaded', function (e) {
}, },
computed: { computed: {
getContainer() { getContainer() {
return document.getElementById(this.container); return document.querySelectorAll('div.' + this.container);
} }
}, },
methods: { methods: {
onMarkRead() { onMarkRead() {
if (null !== this.getContainer) { if (typeof this.getContainer[i] !== 'undefined') {
this.getContainer.classList.replace('read', 'unread'); this.getContainer[i].classList.replace('read', 'unread');
} } else { throw 'data-container attribute is missing' }
this.isRead = false; this.isRead = false;
}, },
onMarkUnread() { onMarkUnread() {
if (null !== this.getContainer) { if (typeof this.getContainer[i] !== 'undefined') {
this.getContainer.classList.replace('unread', 'read'); this.getContainer[i].classList.replace('unread', 'read');
} } else { throw 'data-container attribute is missing' }
this.isRead = true; this.isRead = true;
}, },
} }

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

@ -1,4 +1,4 @@
<div class="item-bloc {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status"> <div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
<div class="item-row title"> <div class="item-row title">
<h2 class="notification-title"> <h2 class="notification-title">
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"> <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">

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

@ -4,7 +4,7 @@
</div> </div>
{# TODO pagination or limit #} {# TODO pagination or limit #}
{% for notification in notifications %} {% for notification in notifications %}
<div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status"> <div class="list-group-item notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
{% if not notification.isSystem %} {% if not notification.isSystem %}
{% if notification.sender == app.user %} {% if notification.sender == app.user %}