2021-08-03 15:52:21 +00:00
|
|
|
import {
|
|
|
|
css,
|
|
|
|
CSSResult,
|
|
|
|
customElement,
|
|
|
|
html,
|
|
|
|
LitElement,
|
|
|
|
property,
|
|
|
|
TemplateResult,
|
|
|
|
} from "lit-element";
|
2021-04-10 15:06:54 +00:00
|
|
|
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
|
|
|
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
|
|
|
import AKGlobal from "../authentik.css";
|
|
|
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
2021-04-10 15:30:23 +00:00
|
|
|
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
2021-07-22 12:15:54 +00:00
|
|
|
import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants";
|
|
|
|
import { DEFAULT_CONFIG, tenant } from "../api/Config";
|
|
|
|
import { EventsApi } from "../../api/dist";
|
2021-04-10 15:06:54 +00:00
|
|
|
|
|
|
|
@customElement("ak-page-header")
|
|
|
|
export class PageHeader extends LitElement {
|
|
|
|
@property()
|
|
|
|
icon?: string;
|
|
|
|
|
2021-08-03 15:52:21 +00:00
|
|
|
@property({ type: Boolean })
|
|
|
|
iconImage = false;
|
2021-04-10 15:06:54 +00:00
|
|
|
|
2021-08-03 15:52:21 +00:00
|
|
|
@property({ type: Boolean })
|
2021-07-23 18:57:06 +00:00
|
|
|
hasNotifications = false;
|
|
|
|
|
2021-04-10 15:06:54 +00:00
|
|
|
@property()
|
|
|
|
set header(value: string) {
|
2021-08-03 15:52:21 +00:00
|
|
|
tenant().then((tenant) => {
|
2021-04-22 21:49:30 +00:00
|
|
|
if (value !== "") {
|
2021-05-29 15:35:56 +00:00
|
|
|
document.title = `${value} - ${tenant.brandingTitle}`;
|
2021-04-22 21:49:30 +00:00
|
|
|
} else {
|
2021-05-29 15:35:56 +00:00
|
|
|
document.title = tenant.brandingTitle || TITLE_DEFAULT;
|
2021-04-22 21:49:30 +00:00
|
|
|
}
|
|
|
|
});
|
2021-04-10 15:06:54 +00:00
|
|
|
this._header = value;
|
|
|
|
}
|
|
|
|
|
|
|
|
get header(): string {
|
|
|
|
return this._header;
|
|
|
|
}
|
|
|
|
|
|
|
|
@property()
|
|
|
|
description?: string;
|
|
|
|
|
|
|
|
_header = "";
|
|
|
|
|
|
|
|
static get styles(): CSSResult[] {
|
2021-08-03 15:52:21 +00:00
|
|
|
return [
|
|
|
|
PFBase,
|
|
|
|
PFButton,
|
|
|
|
PFPage,
|
|
|
|
PFContent,
|
|
|
|
AKGlobal,
|
|
|
|
css`
|
|
|
|
:host {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
min-height: 114px;
|
|
|
|
}
|
|
|
|
.pf-c-button.pf-m-plain {
|
|
|
|
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
|
|
|
|
border-radius: 0px;
|
|
|
|
}
|
|
|
|
.pf-c-page__main-section {
|
|
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
img.pf-icon {
|
|
|
|
max-height: 24px;
|
|
|
|
}
|
|
|
|
.sidebar-trigger,
|
|
|
|
.notification-trigger {
|
|
|
|
font-size: 24px;
|
|
|
|
}
|
|
|
|
.notification-trigger.has-notifications {
|
|
|
|
color: #2b9af3;
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
];
|
2021-04-10 15:06:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
renderIcon(): TemplateResult {
|
|
|
|
if (this.icon) {
|
|
|
|
if (this.iconImage) {
|
|
|
|
return html`<img class="pf-icon" src="${this.icon}" /> `;
|
|
|
|
}
|
|
|
|
return html`<i class=${this.icon}></i> `;
|
|
|
|
}
|
|
|
|
return html``;
|
|
|
|
}
|
|
|
|
|
2021-07-23 18:57:06 +00:00
|
|
|
firstUpdated(): void {
|
2021-08-03 15:52:21 +00:00
|
|
|
new EventsApi(DEFAULT_CONFIG)
|
|
|
|
.eventsNotificationsList({
|
|
|
|
seen: false,
|
|
|
|
ordering: "-created",
|
|
|
|
pageSize: 1,
|
|
|
|
})
|
|
|
|
.then((r) => {
|
|
|
|
this.hasNotifications = r.pagination.count > 0;
|
|
|
|
});
|
2021-07-23 18:57:06 +00:00
|
|
|
}
|
|
|
|
|
2021-04-10 15:06:54 +00:00
|
|
|
render(): TemplateResult {
|
2021-04-10 15:30:23 +00:00
|
|
|
return html`<button
|
2021-08-03 15:52:21 +00:00
|
|
|
class="sidebar-trigger pf-c-button pf-m-plain"
|
|
|
|
@click=${() => {
|
|
|
|
this.dispatchEvent(
|
|
|
|
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
|
|
|
|
bubbles: true,
|
|
|
|
composed: true,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<i class="fas fa-bars"></i>
|
|
|
|
</button>
|
|
|
|
<section class="pf-c-page__main-section pf-m-light">
|
|
|
|
<div class="pf-c-content">
|
|
|
|
<h1>${this.renderIcon()} ${this.header}</h1>
|
|
|
|
${this.description ? html`<p>${this.description}</p>` : html``}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<button
|
|
|
|
class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications
|
|
|
|
? "has-notifications"
|
|
|
|
: ""}"
|
|
|
|
@click=${() => {
|
|
|
|
this.dispatchEvent(
|
|
|
|
new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
|
|
|
|
bubbles: true,
|
|
|
|
composed: true,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<i class="fas fa-bell"></i>
|
|
|
|
</button>`;
|
2021-04-10 15:06:54 +00:00
|
|
|
}
|
|
|
|
}
|