Commit 6b9040a9 authored by Jean-Baptiste Pasquier's avatar Jean-Baptiste Pasquier

update: idSuffix to nestedField

parent ccc32cb2
Pipeline #4867 passed with stage
in 1 minute and 30 seconds
......@@ -14,7 +14,7 @@ window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))
In your template, insert the following line where you want to display the component.
```html
<sib-notifications bind-user id-suffix="inbox"></sib-notifications>
<sib-notifications bind-user nested-field="inbox"></sib-notifications>
```
If you want to use the `bind-user` attribute, do not forget to use `sib-oidc` for authentication.
......@@ -24,7 +24,7 @@ If you want to use the `bind-user` attribute, do not forget to use `sib-oidc` fo
| 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. |
| `nested-field` | `""` | 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/). |
......@@ -63,7 +63,7 @@ In your template, insert the following line where you want to display the compon
| 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. |
| `nested-field` | `""` | 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.
......
......@@ -8,9 +8,7 @@
<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"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
......
......@@ -8,9 +8,7 @@
<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"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
......@@ -30,7 +28,7 @@
<sib-notifications
bind-user
id-suffix="inbox"
nested-field="inbox"
date-format="dddd Do, MMMM"
>
</sib-notifications>
......
......@@ -8,9 +8,7 @@
<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"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
......@@ -30,7 +28,7 @@
<sib-notifications
bind-user
id-suffix="inbox"
nested-field="inbox"
extra-context='{"hd": "http://happy-dev.fr/owl/#"}'
></sib-notifications>
......
......@@ -9,9 +9,7 @@
<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"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
......
......@@ -7,9 +7,7 @@
<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"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
......
......@@ -21,13 +21,13 @@ class SIBBadge extends SIBTemplateElement {
}
get resourceId() {
return this.props.dataSrc + (this.props.idSuffix ? this.props.idSuffix + '/' : '')
return this.props.dataSrc + (this.props.nestedField ? this.props.nestedField + '/' : '')
}
static get propsDefinition() {
return {
dataSrc: 'data-src',
idSuffix: 'id-suffix'
nestedField: 'nested-field'
}
}
......
......@@ -63,7 +63,7 @@ class SIBNotifications extends SIBTemplateElement {
static get propsDefinition() {
return {
dataSrc: 'data-src',
idSuffix: 'id-suffix',
nestedField: 'nested-field',
extraContext: 'extra-context',
dateFormat: 'date-format',
}
......@@ -140,7 +140,7 @@ class SIBNotifications extends SIBTemplateElement {
}
get resourceId() {
return this.props.dataSrc + (this.props.idSuffix ? this.props.idSuffix + '/' : '')
return this.props.dataSrc + (this.props.nestedField ? this.props.nestedField + '/' : '')
}
template({ dataSrc }) {
......
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