Merge branch 'ui/date-format' into 'master'

ui: date format #17 Closes #17 See merge request !13

Merge branch 'ui/date-format' into 'master'
ui: date format #17 Closes #17 See merge request !13
9be300ad · Matthieu Fesselier · da5bcf26 · 71057384 · 9be300ad · 9be300ad
Commit 9be300ad authored Jun 20, 2019 by Matthieu Fesselier
Showing with 71 additions and 3 deletions

README.md README.md +18 -1

examples/notifications-format-date.html examples/notifications-format-date.html +40 -0

index.html index.html +1 -0

sib-notifications.js sib-notifications.js +12 -2

No files found.
--- a/README.md
+++ b/README.md
@@ -12,14 +12,24 @@ window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))

 ## Usage
 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 +58,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:

--- a/examples/notifications-format-date.html
+++ b/examples/notifications-format-date.html
+<!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>
+
+  <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>
--- a/index.html
+++ b/index.html
@@ -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>

--- a/sib-notifications.js
+++ b/sib-notifications.js
@@ -2,7 +2,8 @@ import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinbl
 import Favico from 'https://dev.jspm.io/favico.js-slevomat';

 const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
-Helpers.importCSS(`${base_url}/css/notification.css`)
+Helpers.importCSS(`${base_url}/css/notification.css`);
+Helpers.importJS('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js');

 class SIBNotifications extends SIBTemplateElement {
  constructor() {
@@ -49,7 +50,8 @@ class SIBNotifications extends SIBTemplateElement {
    return {
      dataSrc: 'data-src',
      idSuffix: 'id-suffix',
-      extraContext: 'extra-context'
+      extraContext: 'extra-context',
+      dateFormat: 'date-format',
    }
  }

@@ -121,11 +123,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" />
@@ -154,6 +163,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>