habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: further cleanup, more linting

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-02 15:44:40 +01:00
parent 05aeeafacc
commit c17623323a
23 changed files with 1647 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/elements/CodeMirror.ts
View File

@ -9,7 +9,7 @@ import "codemirror/mode/python/python.js";
@customElement("pb-codemirror")
export class CodeMirrorTextarea extends LitElement {
@property()
@property({type: Boolean})
readOnly = false;
@property()

3
web/src/elements/Tabs.ts
View File

@ -1,4 +1,5 @@
import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
// @ts-ignore
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore
@ -38,6 +39,6 @@ export class Tabs extends LitElement {
${pages.map((page) => this.renderTab(page))}
</ul>
</div>
<slot name="${this.currentPage}"></slot>`;
<slot name="${ifDefined(this.currentPage)}"></slot>`;
}
}

2
web/src/elements/buttons/ModalButton.ts
View File

@ -19,7 +19,7 @@ export class ModalButton extends LitElement {
@property()
href?: string;
@property()
@property({type: Boolean})
open = false;
static get styles(): CSSResult[] {

2
web/src/elements/buttons/SpinnerButton.ts
View File

@ -9,7 +9,7 @@ import { ColorStyles, PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
@customElement("pb-spinner-button")
export class SpinnerButton extends LitElement {
@property()
@property({type: Boolean})
isRunning = false;
@property()

3
web/src/elements/cards/AggregateCard.ts
View File

@ -1,5 +1,6 @@
import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
import { COMMON_STYLES } from "../../common/styles";
@customElement("pb-aggregate-card")
@ -33,7 +34,7 @@ export class AggregateCard extends LitElement {
return html`<div class="pf-c-card pf-c-card-aggregate">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__header-main">
<i class="${this.icon}"></i> ${this.header ? gettext(this.header) : ""}
<i class="${ifDefined(this.icon)}"></i> ${this.header ? gettext(this.header) : ""}
</div>
${this.headerLink ? html`<a href="${this.headerLink}">
<i class="fa fa-external-link-alt"> </i>

10
web/src/elements/cards/AggregatePromiseCard.ts
View File

@ -1,24 +1,26 @@
import { customElement, html, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until";
import { AggregateCard } from "./AggregateCard";
import "../Spinner";
import { SpinnerSize } from "../Spinner";
@customElement("pb-aggregate-card-promise")
export class AggregatePromiseCard extends AggregateCard {
@property()
promise?: Promise<string>;
@property({attribute: false})
promise?: Promise<Record<string, unknown>>;
promiseProxy(): Promise<TemplateResult> {
if (!this.promise) {
return new Promise<TemplateResult>(() => html``);
}
return this.promise.then(s => {
return html`<i class="fa fa-check-circle"></i> ${s}`;
return html`<i class="fa fa-check-circle"></i> ${s.toString()}`;
});
}
renderInner(): TemplateResult {
return html`<p class="center-value">
${until(this.promiseProxy(), html`<pb-spinner size="large"></pb-spinner>`)}
${until(this.promiseProxy(), html`<pb-spinner size="${SpinnerSize.Large}"></pb-spinner>`)}
</p>`;
}

3
web/src/elements/sidebar/Sidebar.ts
View File

@ -8,6 +8,9 @@ import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import { until } from "lit-html/directives/until";
import "./SidebarBrand";
import "./SidebarUser";
export interface SidebarItem {
name: string;
path?: string[];

2
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -16,7 +16,7 @@ export const DefaultConfig: Config = {
@customElement("pb-sidebar-brand")
export class SidebarBrand extends LitElement {
@property()
@property({attribute: false})
config: Config = DefaultConfig;
static get styles(): CSSResult[] {

4
web/src/elements/sidebar/SidebarUser.ts
View File

@ -46,9 +46,9 @@ export class SidebarUser extends LitElement {
return html`
<a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
${until(User.me().then(u => {
return html`<img class="pf-c-avatar" src="${u.avatar}" alt="" />
return html`<img class="pf-c-avatar" src="${u.avatar}" alt="" />
<span>${u.username}</span>`;
}), html``)}
}), html``)}
</a>
<a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>

6
web/src/elements/table/Table.ts
View File

@ -4,15 +4,17 @@ import { PBResponse } from "../../api/client";
import { COMMON_STYLES } from "../../common/styles";
import { htmlFromString } from "../../utils";
import "./TablePagination";
export abstract class Table<T> extends LitElement {
abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
abstract columns(): Array<string>;
abstract row(item: T): Array<string>;
@property()
@property({attribute: false})
data?: PBResponse<T>;
@property()
@property({type: Number})
page = 1;
static get styles(): CSSResult[] {

6
web/src/elements/table/TablePagination.ts
View File

@ -4,7 +4,7 @@ import { COMMON_STYLES } from "../../common/styles";
@customElement("pb-table-pagination")
export class TablePagination extends LitElement {
@property()
@property({attribute: false})
table?: Table<unknown>;
static get styles(): CSSResult[] {
@ -44,7 +44,7 @@ export class TablePagination extends LitElement {
<button
class="pf-c-button pf-m-plain"
@click=${() => {this.previousHandler();}}
disabled="${this.table?.data?.pagination.previous ? "true" : "false"}"
?disabled="${(this.table?.data?.pagination.previous || 0) > 0}"
aria-label="{% trans 'Go to previous page' %}"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
@ -54,7 +54,7 @@ export class TablePagination extends LitElement {
<button
class="pf-c-button pf-m-plain"
@click=${() => {this.nextHandler();}}
disabled="${this.table?.data?.pagination.next ? "true" : "false"}"
?disabled="${(this.table?.data?.pagination.next || 0) > 0}"
aria-label="{% trans 'Go to next page' %}"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>