Commit 44dfb9b0 authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'update/23-make-badge-disappear' into 'master'

update: render badge on read #23

Closes #23

See merge request !14
parents a64b4e09 043a3f64
Pipeline #4248 passed with stage
in 27 seconds
......@@ -28,6 +28,6 @@
<body>
<h1>SIB Badge - demo</h1>
<p>Number of notifications related to conversation 1</p>
<sib-badge data-src="http://127.0.0.1:8000/conversations/1/"></sib-badge>
<sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge>
</body>
</html>
......@@ -4,6 +4,24 @@ const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
Helpers.importCSS(`${base_url}/css/badge.css`)
class SIBBadge extends SIBTemplateElement {
constructor() {
super()
// On read events, remove badge
window.addEventListener('read', event => {
if (event.detail &&
event.detail.resource &&
event.detail.resource['@id'] &&
event.detail.resource['@id'] == this.resourceId) {
this.querySelector('.counter').remove();
}
})
}
get resourceId() {
return this.props.dataSrc + (this.props.idSuffix ? this.props.idSuffix + '/' : '')
}
static get propsDefinition() {
return {
dataSrc: 'data-src',
......@@ -11,9 +29,8 @@ class SIBBadge extends SIBTemplateElement {
}
}
template({ dataSrc, idSuffix }) {
template({dataSrc}) {
if (dataSrc) {
let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
return `
<sib-display
bind-user
......@@ -21,7 +38,7 @@ class SIBBadge extends SIBTemplateElement {
data-fields
search-fields="unread, object"
search-value-unread="true"
search-value-object="${sourceUrl}"
search-value-object="${this.resourceId}"
search-widget-unread="sib-form-hidden"
search-widget-object="sib-form-hidden"
counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>"
......
......@@ -22,10 +22,15 @@ class SIBNotifications extends SIBTemplateElement {
// On click events, ...
this.addEventListener("click", event => {
// unread button -> mark as read
// unread button -> dispatch read event
let unreadButton = event.target.closest('button[data-unread=unread]')
if (unreadButton) {
this._onClickUnreadButton(unreadButton)
window.dispatchEvent(new CustomEvent('read', {
detail: {
resource: unreadButton.closest('sib-display').resource // get resource from sib display
}
}));
unreadButton.disabled = true
return
}
......@@ -74,7 +79,7 @@ class SIBNotifications extends SIBTemplateElement {
_onReadResource(resourceId) {
const edits = this._getNotificationsList()
.filter((notification) => notification.unread &&
(notification.object['@id'] === resourceId || notification['@id'] === resourceId))
(notification.object['@id'] === resourceId || notification['@id'] === resourceId)) // compare id with objects id or notifications id
.map((notification) => store.patch(notification['@id'], { unread: false }))
Promise.all(edits)
......@@ -94,10 +99,6 @@ class SIBNotifications extends SIBTemplateElement {
this.querySelector('details').removeAttribute("open")
})
}
_onClickUnreadButton(target) {
this._onReadResource(target.closest('sib-display').resource['@id'])
target.disabled = true
}
_updateUnread() {
let unread = Number(document.querySelector('#badge-unread').innerText)
......
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