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

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/Tabs.ts

@@ -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" : ""}">

web/src/elements/router/RouteMatch.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from "lit";
 
+import { ROUTE_SEPARATOR } from "../../constants";
 import { Route } from "./Route";
 
 export class RouteMatch {
@@ -22,3 +23,44 @@ export class RouteMatch {
         )}>`;
     }
 }
+
+export function getURLParam<T>(key: string, fallback: T): T {
+    const params = getURLParams();
+    if (key in params) {
+        return params[key] as T;
+    }
+    return fallback;
+}
+
+export function getURLParams(): { [key: string]: unknown } {
+    const params = {};
+    if (window.location.hash.includes(ROUTE_SEPARATOR)) {
+        const urlParts = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR, 2);
+        const rawParams = decodeURIComponent(urlParts[1]);
+        try {
+            return JSON.parse(rawParams);
+        } catch {
+            return params;
+        }
+    }
+    return params;
+}
+
+export function setURLParams(params: { [key: string]: unknown }, replace = true): void {
+    const paramsString = JSON.stringify(params);
+    const currentUrl = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR)[0];
+    const newUrl = `#${currentUrl};${encodeURIComponent(paramsString)}`;
+    if (replace) {
+        history.replaceState(undefined, "", newUrl);
+    } else {
+        history.pushState(undefined, "", newUrl);
+    }
+}
+
+export function updateURLParams(params: { [key: string]: unknown }, replace = true): void {
+    const currentParams = getURLParams();
+    for (const key in params) {
+        currentParams[key] = params[key] as string;
+    }
+    setURLParams(currentParams, replace);
+}

web/src/elements/table/Table.ts

@@ -19,6 +19,7 @@ import { groupBy } from "../../utils";
 import "../EmptyState";
 import "../chips/Chip";
 import "../chips/ChipGroup";
+import { getURLParams, updateURLParams } from "../router/RouteMatch";
 import "./TablePagination";
 import "./TableSearch";
 
@@ -355,6 +356,9 @@ export abstract class Table<T> extends LitElement {
                         composed: true,
                     }),
                 );
+                updateURLParams({
+                    search: value,
+                });
             }}
         >
         </ak-table-search>`;
@@ -393,6 +397,10 @@ export abstract class Table<T> extends LitElement {
     }
 
     firstUpdated(): void {
+        const params = getURLParams();
+        if ("search" in params) {
+            this.search = params.search;
+        }
         this.fetch();
     }