trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/elements: rework treeview parents 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-06-15 20:06:01 +02:00
parent 9f15ee8cb8
commit 6d9579d3e6
2 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/elements/TreeView.ts
View File

@ -11,7 +11,7 @@ import { EVENT_REFRESH } from "../constants";
import { setURLParams } from "./router/RouteMatch"; import { setURLParams } from "./router/RouteMatch";
export interface TreeViewItem { export interface TreeViewItem {
id: string; id?: string;
label: string; label: string;
childItems: TreeViewItem[]; childItems: TreeViewItem[];
parent?: TreeViewItem; parent?: TreeViewItem;
@ -30,7 +30,7 @@ export class TreeViewNode extends LitElement {
host?: TreeView; host?: TreeView;
@property() @property()
path = ""; activePath = "";
@property() @property()
separator = ""; separator = "";
@ -43,7 +43,9 @@ export class TreeViewNode extends LitElement {
const pathItems = []; const pathItems = [];
let item = this.item; let item = this.item;
while (item) { while (item) {
pathItems.push(item.id); if (item.id) {
pathItems.push(item.id);
}
item = item.parent; item = item.parent;
} }
return pathItems.reverse().join(this.separator); return pathItems.reverse().join(this.separator);
@ -54,14 +56,14 @@ export class TreeViewNode extends LitElement {
} }
firstUpdated(): void { firstUpdated(): void {
const pathSegments = this.path.split(this.separator); const pathSegments = this.activePath.split(this.separator);
const level = this.item?.level || 0; const level = this.item?.level || 0;
// Ignore the last item as that shouldn't be expanded // Ignore the last item as that shouldn't be expanded
pathSegments.pop(); pathSegments.pop();
if (pathSegments[level] == this.item?.id) { if (pathSegments[level] == this.item?.id) {
this.open = true; this.open = true;
} }
if (this.path === this.fullPath && this.host !== undefined) { if (this.activePath === this.fullPath && this.host !== undefined) {
this.host.activeNode = this; this.host.activeNode = this;
} }
} }
@ -122,7 +124,7 @@ export class TreeViewNode extends LitElement {
${this.item?.childItems.map((item) => { ${this.item?.childItems.map((item) => {
return html`<ak-treeview-node return html`<ak-treeview-node
.item=${item} .item=${item}
path=${this.path} activePath=${this.activePath}
separator=${this.separator} separator=${this.separator}
.host=${this.host} .host=${this.host}
></ak-treeview-node>`; ></ak-treeview-node>`;
@ -143,61 +145,61 @@ export class TreeView extends LitElement {
items: string[] = []; items: string[] = [];
@property() @property()
path = ""; activePath = "";
@state() @state()
activeNode?: TreeViewNode; activeNode?: TreeViewNode;
separator = "/"; separator = "/";
createNode(path: string[], tree: TreeViewItem[], level: number): TreeViewItem { createNode(path: string[], parentItem: TreeViewItem, level: number): TreeViewItem {
const id = path.shift(); const id = path.shift();
const idx = tree.findIndex((e: TreeViewItem) => { const idx = parentItem.childItems.findIndex((e: TreeViewItem) => {
return e.id == id; return e.id == id;
}); });
if (idx < 0) { if (idx < 0) {
const item: TreeViewItem = { const item: TreeViewItem = {
id: id || "", id: id,
label: id || "", label: id || "",
childItems: [], childItems: [],
level: level, level: level,
parent: parentItem,
}; };
tree.push(item); parentItem.childItems.push(item);
if (path.length !== 0) { if (path.length !== 0) {
const child = this.createNode(path, tree[tree.length - 1].childItems, level + 1); const child = this.createNode(path, item, level + 1);
child.parent = item; child.parent = item;
} }
return item; return item;
} else { } else {
const child = this.createNode(path, tree[idx].childItems, level + 1); const child = this.createNode(path, parentItem.childItems[idx], level + 1);
child.parent = tree[idx];
return child; return child;
} }
} }
parse(data: string[]): TreeViewItem[] { parse(data: string[]): TreeViewItem {
const tree: TreeViewItem[] = []; const rootItem: TreeViewItem = {
id: undefined,
label: t`Root`,
childItems: [],
level: -1,
};
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const path: string = data[i]; const path: string = data[i];
const split: string[] = path.split(this.separator); const split: string[] = path.split(this.separator);
this.createNode(split, tree, 0); this.createNode(split, rootItem, 0);
} }
return tree; return rootItem;
} }
render(): TemplateResult { render(): TemplateResult {
const result = this.parse(this.items); const rootItem = this.parse(this.items);
return html`<div class="pf-c-tree-view pf-m-guides"> return html`<div class="pf-c-tree-view pf-m-guides">
<ul class="pf-c-tree-view__list" role="tree"> <ul class="pf-c-tree-view__list" role="tree">
<!-- @ts-ignore --> <!-- @ts-ignore -->
<ak-treeview-node <ak-treeview-node
.item=${{ .item=${rootItem}
id: "", activePath=${this.activePath}
label: t`Root`,
childItems: result,
level: -1,
} as TreeViewItem}
path=${this.path}
?open=${true} ?open=${true}
separator=${this.separator} separator=${this.separator}
.host=${this} .host=${this}

4
web/src/pages/users/UserListPage.ts
View File

@ -55,7 +55,7 @@ export class UserListPage extends TablePage<User> {
order = "last_login"; order = "last_login";
@property() @property()
path = getURLParam<string>("path", "/"); activePath = getURLParam<string>("path", "/");
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return super.styles.concat(PFDescriptionList, PFCard, PFAlert, AKGlobal); return super.styles.concat(PFDescriptionList, PFCard, PFAlert, AKGlobal);
@ -332,7 +332,7 @@ export class UserListPage extends TablePage<User> {
.then((paths) => { .then((paths) => {
return html`<ak-treeview return html`<ak-treeview
.items=${paths.paths} .items=${paths.paths}
path=${this.path} activePath=${this.activePath}
></ak-treeview>`; ></ak-treeview>`;
}), }),
)} )}