diff --git a/examples/badge.html b/examples/badge.html index f5f716d485ca6799e0efbacb6633a96e78a3d608..c540f28797d4f3f1ae94079f7e72e6e8621f15d6 100644 --- a/examples/badge.html +++ b/examples/badge.html @@ -5,11 +5,12 @@ SIB Badge - Demo - + @@ -19,11 +20,22 @@ --sib-badge-theme: #ffd759; } + + -

SIB Badge - demo

+

SIB Badge - demo

Number of notifications related to conversation 1

+ + diff --git a/examples/notifications-format-date.html b/examples/notifications-format-date.html index 482e63979100c5e7d16e940f95d092326b53568f..d3afb0592a65e72fe0e9ba446873c2ea2ee5340b 100644 --- a/examples/notifications-format-date.html +++ b/examples/notifications-format-date.html @@ -5,32 +5,41 @@ SIB Notifications - Demo - + - - + + -

SIB Notifications - Demo

+

SIB Notifications - Demo

- + bind-user + nested-field="inbox" + date-format="dddd Do, MMMM" + > + + diff --git a/examples/notifications-routing.html b/examples/notifications-routing.html index c06850b55c511f9e77851d7951668ec6260326c6..95be3b3cfc06ef3d0ddba37113f22ec4659c4b7e 100644 --- a/examples/notifications-routing.html +++ b/examples/notifications-routing.html @@ -5,32 +5,40 @@ SIB Notifications - Demo - + - + + + -

SIB Notifications and routing - Demo

+

SIB Notifications and routing - Demo

+ > @@ -45,5 +53,9 @@

Conversations

+ + diff --git a/examples/notifications.html b/examples/notifications.html index e517fe7a6c3fb8b196d035cd9b288990e1091a5f..935f95d228ce5bcc9829428047df70273496ac9a 100644 --- a/examples/notifications.html +++ b/examples/notifications.html @@ -2,35 +2,43 @@ - SIB Notifications - Demo - + - - + + -

SIB Notifications - Demo

+

SIB Notifications - Demo

- + bind-user + nested-field="inbox" + > + + diff --git a/sib-badge.js b/sib-badge.js index b6ddbcdd65b534953bcf178339292afec4f85ebf..ba8cbb1153cd496029f650a78542bbd2fc5855f2 100644 --- a/sib-badge.js +++ b/sib-badge.js @@ -1,4 +1,4 @@ -import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.8'; +import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.9'; // Dev Mode //const base_url = import.meta.url.replace(/\/[^\/]*$/, ''); diff --git a/sib-notifications.js b/sib-notifications.js index 442bd1dd204f019a3fd868b50939c0e7020f28fa..4f7108b95aa4d939ecc179608ebd04c4ac8360b7 100644 --- a/sib-notifications.js +++ b/sib-notifications.js @@ -1,4 +1,4 @@ -import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.8'; +import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.9'; import Favico from 'https://dev.jspm.io/favico.js-slevomat'; // Dev Mode @@ -12,12 +12,11 @@ class SIBNotifications extends SIBTemplateElement { super() this.favicon = new Favico({animation:'none'}) - this.title = "" // On read event, mark notification as read window.addEventListener('read', event => { - if(event.detail && event.detail.resource && event.detail.resource['@id']) { + if (event.detail && event.detail.resource && event.detail.resource['@id']) { this._onReadResource(event.detail.resource['@id']) } else { this._printError('Resource parameter is missing. Check the documentation: https://git.happy-dev.fr/startinblox/framework/sib-notifications') @@ -86,34 +85,33 @@ class SIBNotifications extends SIBTemplateElement { } } - refresh() { - const context = document.querySelector('#notifications-list').component.context; - store.get(this.resourceId, context, true).then(() => this.render()) + async refresh() { + const notificationsListElement = document.querySelector('#notifications-list'); + if (notificationsListElement) await notificationsListElement.component.resource.clearCache(); + this.render(); } /* Events listeners */ - _onReadResource(resourceId) { - const edits = this._getNotificationsList() - .filter((notification) => notification.unread && - (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) - .then(() => this.render()) + async _onReadResource(resourceId) { + let promises = []; + + for await(const notification of this._getNotificationsList()['ldp:contains']){ + const unread = (await notification.unread).toString() == 'true'; + if (unread && ((await notification.object).toString() === resourceId || notification['@id'] === resourceId)) { + promises.push(store.patch({ "http://happy-dev.fr/owl/#unread": false }, notification['@id'])) + } + } + + Promise.all(promises) + .then(() => this.refresh()) .catch((error) => this._printError(error)); } - _onClickNotification(target) { - let extraContext = {} - if (this.props.extraContext) { - extraContext = JSON.parse(this.props.extraContext) - } - const context = { ...target.component.context, ...extraContext } - store.get(target.component.resource.object, context).then((resource) => { - if (!resource) return; - window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: resource } })) - this.querySelector('details').removeAttribute("open") - }) + async _onClickNotification(target) { + const object = await target.component.resource.object + if (!object) return; + window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: object } })) + this.querySelector('details').removeAttribute("open") } _updateUnread() { @@ -131,14 +129,14 @@ class SIBNotifications extends SIBTemplateElement { _updateUI() { const notifications = this.querySelectorAll('#notifications-list sib-display') - notifications.forEach(notif => { - if (!notif.component.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread + notifications.forEach(async notif => { + if (!(await notif.component.resource.unread == 'true')) notif.setAttribute('data-read', 'true') // opacity unread }); } _getNotificationsList() { const notificationsList = this.querySelector('#notifications-list'); - return notificationsList ? notificationsList.component.resources : null; + return notificationsList ? notificationsList.component.resource : null; } _printError(error) { @@ -149,16 +147,12 @@ class SIBNotifications extends SIBTemplateElement { return this.props.dateFormat ? this.props.dateFormat : 'DD/MM/YYYY - kk:mm'; } - get resourceId() { - return this.props.dataSrc + (this.props.nestedField ? this.props.nestedField + '/' : '') - } - - template({ dataSrc }) { + template({ dataSrc, nestedField }) { if (dataSrc) { return `
- +
@@ -166,7 +160,8 @@ class SIBNotifications extends SIBTemplateElement {