web: add notification 'mark as seen' button
This commit is contained in:
parent
36e8b1004c
commit
8acb9dde5f
|
@ -18,7 +18,7 @@
|
|||
"lit"
|
||||
],
|
||||
"rules": {
|
||||
"indent": ["error", 4],
|
||||
"indent": "off",
|
||||
"linebreak-style": ["error", "unix"],
|
||||
"quotes": ["error", "double"],
|
||||
"semi": ["error", "always"],
|
||||
|
|
|
@ -21,4 +21,10 @@ export class Notification {
|
|||
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();
|
||||
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, {
|
||||
headers: { "X-CSRFToken": csrftoken },
|
||||
});
|
||||
|
|
|
@ -30,9 +30,12 @@ export class NotificationDrawer extends LitElement {
|
|||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
Notification.list().then(r => {
|
||||
Notification.list({
|
||||
seen: false,
|
||||
ordering: "-created"
|
||||
}).then(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}
|
||||
</h2>
|
||||
</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>
|
||||
<small class="pf-c-notification-drawer__list-item-timestamp">${age}</small>
|
||||
</li>`;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { html, TemplateResult } from "lit-html";
|
||||
import { SpinnerSize } from "./elements/Spinner";
|
||||
|
||||
export function getCookie(name: string): string | undefined {
|
||||
let cookieValue = undefined;
|
||||
export function getCookie(name: string): string {
|
||||
let cookieValue = "";
|
||||
if (document.cookie && document.cookie !== "") {
|
||||
const cookies = document.cookie.split(";");
|
||||
for (let i = 0; i < cookies.length; i++) {
|
||||
|
|
Reference in New Issue