Commit 51237f87 authored by Matthieu Fesselier's avatar Matthieu Fesselier

ui: date format with moment.js

parent 8cef1445
Pipeline #3705 passed with stage
in 27 seconds
......@@ -11,15 +11,29 @@ window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))
```
## Usage
In your template, insert the following line where you want to display the component.
First, you need to import `moment.js` library in your template, to display the dates properly.
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
```
Then, in your template, insert the following line where you want to display the component.
```html
<sib-notifications bind-user id-suffix="inbox"></sib-notifications>
```
If you want to use the `bind-user` attribute, do not forget to use `sib-oidc` for authentication.
### Parameters
| Name | Default | Description |
| --------------- | ---------------------- | :----------------------------------------------------------- |
| `data-src` | `undefined` | URL of the inbox to display. |
| `id-suffix` | `""` | String added at the end of the data source URL. Useful if you are using `bind-user` to get the current user URL. |
| `extra-context` | `{}` | Context to add to let the router know where to navigate after a click on a notification. |
| `date-format` | `"DD/MM/YYYY - kk:mm"` | Format of the date displayed in the notifications box. For more informations about available formats, look at the [moment.js doc](https://momentjs.com/docs/#/displaying/format/). |
### Routing
To redirect to specific pages when you click on a notification, you should:
To redirect to specific pages when you click on a notification, you should:
1. Choose a route to be the default view for a resource type. To do this, add the attribute `rdf-type` to a `sib-route` (ex: `<sib-route name="project" rdf-type="doap:project"></sib-route>`)
2. Add an `extra-context` to the sib-conversation component, so it can understands the `rdf_type` you used before.
......@@ -48,6 +62,13 @@ In your template, insert the following line where you want to display the compon
<sib-badge data-src="http://server/resourceId"></sib-badge>
```
### Parameters
| Name | Default | Description |
| ----------- | ----------- | :----------------------------------------------------------- |
| `data-src` | `undefined` | URL of the resource or container of which you want to get the unread notifications. |
| `id-suffix` | `""` | String added at the end of the data source URL. Useful if you are using `bind-resource` to get the current displayed resource. |
### Design
To customize your component, you can set the css variable `--sib-badge-theme` anywhere in your stylesheet to the color you want.
For example:
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title>
<script type="module" src="../index.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000/openid/"
data-client_id="464079"
data-id="paris"
>
</sib-auth-provider>
</sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<style>
:root{
--sib-notifications-theme: #ffd759;
}
</style>
</head>
<body>
<h1>SIB Notifications - Demo</h1>
<sib-notifications
bind-user
id-suffix="inbox"
date-format="dddd Do, MMMM"
>
</sib-notifications>
</body>
</html>
......@@ -19,6 +19,7 @@
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<style>
:root{
......
......@@ -19,6 +19,7 @@
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<style>
:root{
......
......@@ -22,6 +22,7 @@
<ul>
<li><a href="examples/notifications.html">notifications</a></li>
<li><a href="examples/notifications-routing.html">notifications-routing</a></li>
<li><a href="examples/notifications-format-date.html">notifications-format-date</a></li>
</ul>
<h2>SIB Badge</h2>
<ul>
......
......@@ -49,7 +49,8 @@ class SIBNotifications extends SIBTemplateElement {
return {
dataSrc: 'data-src',
idSuffix: 'id-suffix',
extraContext: 'extra-context'
extraContext: 'extra-context',
dateFormat: 'date-format',
}
}
......@@ -118,11 +119,18 @@ class SIBNotifications extends SIBTemplateElement {
console.error(error)
}
get dateFormat() {
return this.props.dateFormat ? this.props.dateFormat : 'DD/MM/YYYY - kk:mm';
}
template({ dataSrc, idSuffix }) {
if (dataSrc) {
let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
return `
<div class="sib-notifications">
<sib-widget name="custom-date">
<template>\${moment(value).format("${this.dateFormat}")}</template>
</sib-widget>
<details class="sib-notifications__container">
<summary class="sib-notifications__button">
<img src="${base_url}/img/notification-icon.svg" />
......@@ -151,6 +159,7 @@ class SIBNotifications extends SIBTemplateElement {
set-content="author.avatar, wrapper"
data-fields="unread, content"
widget-author.avatar="sib-display-img"
widget-date="custom-date"
paginate-by="10"></sib-display>
</div>
</details>
......
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