web: add notification 'mark as seen' button

This commit is contained in:
Jens Langhammer 2021-01-16 19:09:03 +01:00
parent 36e8b1004c
commit 8acb9dde5f
5 changed files with 23 additions and 10 deletions

View File

@ -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"],

View File

@ -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
});
}
} }

View File

@ -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 },
}); });

View File

@ -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>`;

View File

@ -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++) {