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

web/elements: add new API to store attributes in URL, use for table and tabs

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-11-18 21:01:58 +01:00
parent c363b1cfde
commit 465898c7d0
6 changed files with 83 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
import { CURRENT_CLASS, ROUTE_SEPARATOR } from "../constants";
import { getURLParams, updateURLParams } from "./router/RouteMatch";
@customElement("ak-tabs")
export class Tabs extends LitElement {
@ -65,9 +66,9 @@ export class Tabs extends LitElement {
onClick(slot?: string): void {
this.currentPage = slot;
const currentUrl = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR)[0];
const newUrl = `#${currentUrl};${slot}`;
history.replaceState(undefined, "", newUrl);
updateURLParams({
page: slot,
});
}
renderTab(page: Element): TemplateResult {
@ -81,18 +82,20 @@ export class Tabs extends LitElement {
render(): TemplateResult {
const pages = Array.from(this.querySelectorAll("[slot^='page-']"));
if (window.location.hash.includes(ROUTE_SEPARATOR)) {
const params = getURLParams();
if ("page" in params) {
if (this.querySelector(`[slot='${params.page}']`) !== null) {
// To update the URL to match with the current slot
this.currentPage = params.page;
}
}
}
if (!this.currentPage) {
if (pages.length < 1) {
return html`<h1>${t`no tabs defined`}</h1>`;
}
let wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
if (window.location.hash.includes(ROUTE_SEPARATOR)) {
const urlParts = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR);
if (this.querySelector(`[slot='${urlParts[1]}']`) !== null) {
// To update the URL to match with the current slot
wantedPage = urlParts[1];
}
}
const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
this.onClick(wantedPage);
}
return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">