Commit 292a7ad1 authored by Matthieu Fesselier's avatar Matthieu Fesselier

syntax: use sib-display search for counter

parent 719a7911
Pipeline #2981 passed with stage
in 27 seconds
......@@ -92,7 +92,7 @@
background-color: var(--sib-notifications-theme, gray);
}*/
.sib-notifications__items read-badge [data-read]{
.sib-notifications__items read-badge [data-unread]{
display: block;
width: 4px;
height: 4px;
......@@ -104,7 +104,7 @@
border: 2px solid #DDD;
}
.sib-notifications__items read-badge [data-read=unread]{
.sib-notifications__items read-badge [data-unread=unread]{
border-color: var(--sib-notifications-theme, gray);
background-color: var(--sib-notifications-theme, gray);
}
......
......@@ -40,28 +40,23 @@ class SIBNotifications extends SIBTemplateElement {
super.render()
// Add event listener on populate
let notificationContainer = this.querySelector('#notifications-list')
if (notificationContainer) {
notificationContainer.addEventListener("populate", (event) => {
this._updateUnread(event.detail.resource)
})
let unreadFilter = this.querySelector('#unread-filter')
if (unreadFilter) {
unreadFilter.addEventListener("populate", () => this._updateUnread())
}
}
/* Events listeners */
_onReadResource(resourceId) {
let markedAsRead = 0
let edits = []
this._getNotificationsList().forEach(notification => {
if (notification.object['@id'] === resourceId) {
store.patch(notification['@id'], { read: true })
.then(() => console.log('Notification marked as read'))
.catch((error) => this._printError(error))
markedAsRead++
if (notification.unread && notification.object['@id'] === resourceId) {
edits.push(store.patch(notification['@id'], { unread: 0 }))
}
})
if (markedAsRead) {
this.render() // TODO : render after all marked as unread
}
Promise.all(edits)
.then(() => this.render())
.catch((error) => this._printError(error));
}
_onClickNotification(target) {
......@@ -73,17 +68,9 @@ class SIBNotifications extends SIBTemplateElement {
}
}
_updateUnread(resource) {
let unread = 0
const resources = Array.isArray(resource['ldp:contains']) ? resource['ldp:contains'] : [resource['ldp:contains']]
resources.forEach(notification => {
if (!notification.read) unread++
// TODO : read / unread
})
// Update favicon
this.favicon.badge(unread)
this.querySelector('#badge-unread').innerText = unread
_updateUnread() {
let unread = document.querySelector('#badge-unread').innerText
if (unread != 0) this.favicon.badge(unread)
}
_getNotificationsList() {
......@@ -104,7 +91,15 @@ class SIBNotifications extends SIBTemplateElement {
<summary class="sib-notifications__button">
<img src="${base_url}/img/notification-icon.svg" />
<div class="sib-notifications__counter">
<span id="badge-unread"></span>
<sib-display
id="unread-filter"
data-src="${sourceUrl}"
data-fields="none"
search-fields="unread"
search-value-unread="true"
search-widget-unread="sib-form-hidden"
counter-template="<span id='badge-unread'>\${counter}</span>"
></sib-display>
</div>
</summary>
<div class="sib-notifications__list">
......@@ -112,11 +107,10 @@ class SIBNotifications extends SIBTemplateElement {
id="notifications-list"
class="sib-notifications__items"
data-src="${sourceUrl}"
widget-read="read-badge"
widget-unread="read-badge"
set-wrapper="author_user.username, type, date"
set-content="author_user.avatar, wrapper"
data-fields="read, content"
data-fields="unread, content"
widget-author_user.avatar="sib-display-img"
paginate-by="10"></sib-display>
</div>
......@@ -124,7 +118,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-widget name="read-badge">
<template>
<div data-read="\${value?'read':'unread'}"></div>
<div data-unread="\${value?'unread':'read'}"></div>
</template>
</sib-widget>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment