web: add notification 'mark as seen' button
This commit is contained in:
parent
36e8b1004c
commit
8acb9dde5f
|
@ -18,7 +18,7 @@
|
||||||
"lit"
|
"lit"
|
||||||
],
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"indent": ["error", 4],
|
"indent": "off",
|
||||||
"linebreak-style": ["error", "unix"],
|
"linebreak-style": ["error", "unix"],
|
||||||
"quotes": ["error", "double"],
|
"quotes": ["error", "double"],
|
||||||
"semi": ["error", "always"],
|
"semi": ["error", "always"],
|
||||||
|
|
|
@ -21,4 +21,10 @@ export class Notification {
|
||||||
return DefaultClient.fetch<PBResponse<Notification>>(["events", "notifications"], filter);
|
return DefaultClient.fetch<PBResponse<Notification>>(["events", "notifications"], filter);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static markSeen(pk: string): Promise<Notification> {
|
||||||
|
return DefaultClient.update<Notification>(["events", "notifications", pk], {
|
||||||
|
"seen": true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,11 +15,6 @@ export class ActionButton extends SpinnerButton {
|
||||||
}
|
}
|
||||||
this.setLoading();
|
this.setLoading();
|
||||||
const csrftoken = getCookie("authentik_csrf");
|
const csrftoken = getCookie("authentik_csrf");
|
||||||
if (!csrftoken) {
|
|
||||||
console.debug("No csrf token in cookie");
|
|
||||||
this.setDone(ERROR_CLASS);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const request = new Request(this.url, {
|
const request = new Request(this.url, {
|
||||||
headers: { "X-CSRFToken": csrftoken },
|
headers: { "X-CSRFToken": csrftoken },
|
||||||
});
|
});
|
||||||
|
|
|
@ -30,9 +30,12 @@ export class NotificationDrawer extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(): void {
|
firstUpdated(): void {
|
||||||
Notification.list().then(r => {
|
Notification.list({
|
||||||
|
seen: false,
|
||||||
|
ordering: "-created"
|
||||||
|
}).then(r => {
|
||||||
this.notifications = r;
|
this.notifications = r;
|
||||||
this.unread = r.results.filter((n) => !n.seen).length;
|
this.unread = r.results.length;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,6 +66,15 @@ export class NotificationDrawer extends LitElement {
|
||||||
${item.event?.action}
|
${item.event?.action}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pf-c-notification-drawer__list-item-action">
|
||||||
|
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" @click=${() => {
|
||||||
|
Notification.markSeen(item.pk).then(() => {
|
||||||
|
this.firstUpdated();
|
||||||
|
});
|
||||||
|
}}>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
|
<p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
|
||||||
<small class="pf-c-notification-drawer__list-item-timestamp">${age}</small>
|
<small class="pf-c-notification-drawer__list-item-timestamp">${age}</small>
|
||||||
</li>`;
|
</li>`;
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { html, TemplateResult } from "lit-html";
|
import { html, TemplateResult } from "lit-html";
|
||||||
import { SpinnerSize } from "./elements/Spinner";
|
import { SpinnerSize } from "./elements/Spinner";
|
||||||
|
|
||||||
export function getCookie(name: string): string | undefined {
|
export function getCookie(name: string): string {
|
||||||
let cookieValue = undefined;
|
let cookieValue = "";
|
||||||
if (document.cookie && document.cookie !== "") {
|
if (document.cookie && document.cookie !== "") {
|
||||||
const cookies = document.cookie.split(";");
|
const cookies = document.cookie.split(";");
|
||||||
for (let i = 0; i < cookies.length; i++) {
|
for (let i = 0; i < cookies.length; i++) {
|
||||||
|
|
Reference in a new issue