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

web/elements: make table rows clickable to select items

Browse source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-02-02 22:37:59 +01:00
parent 7d4ce41e12
commit ada44d84f8
No known key found for this signature in database
1 changed files with 44 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
web/src/elements/table/Table.ts
View file

@ -130,6 +130,9 @@ export abstract class Table<T> extends AKElement {
@property({ type: Boolean }) @property({ type: Boolean })
checkbox = false; checkbox = false;
@property({ type: Boolean })
radioSelect = false;
@property({ type: Boolean }) @property({ type: Boolean })
checkboxChip = false; checkboxChip = false;
@ -289,41 +292,57 @@ export abstract class Table<T> extends AKElement {
private renderRowGroup(items: T[]): TemplateResult[] { private renderRowGroup(items: T[]): TemplateResult[] {
return items.map((item) => { return items.map((item) => {
const itemSelectHandler = (ev?: InputEvent) => {
let checked = false;
if (ev) {
checked = (ev.target as HTMLInputElement).checked;
} else {
// If we have no event, toggle the state
checked = this.selectedElements.indexOf(item) === -1;
}
if (checked) {
// Prevent double-adding the element to selected items
if (this.selectedElements.indexOf(item) !== -1) {
return;
}
// Add item to selected
this.selectedElements.push(item);
} else {
// Get index of item and remove if selected
const index = this.selectedElements.indexOf(item);
if (index <= -1) return;
this.selectedElements.splice(index, 1);
}
this.requestUpdate();
// Unset select-all if selectedElements is empty
const selectAllCheckbox =
this.shadowRoot?.querySelector<HTMLInputElement>("[name=select-all]");
if (!selectAllCheckbox) {
return;
}
if (this.selectedElements.length < 1) {
selectAllCheckbox.checked = false;
this.requestUpdate();
}
};
return html`<tbody return html`<tbody
role="rowgroup" role="rowgroup"
class="${this.expandedElements.indexOf(item) > -1 ? "pf-m-expanded" : ""}" class="${this.expandedElements.indexOf(item) > -1 ? "pf-m-expanded" : ""}"
> >
<tr role="row"> <tr
role="row"
class="${this.checkbox ? "pf-m-hoverable" : ""}"
@click=${() => {
itemSelectHandler();
}}
>
${this.checkbox ${this.checkbox
? html`<td class="pf-c-table__check" role="cell"> ? html`<td class="pf-c-table__check" role="cell">
<label <label
><input ><input
type="checkbox" type="checkbox"
.checked=${this.selectedElements.indexOf(item) >= 0} .checked=${this.selectedElements.indexOf(item) >= 0}
@input=${(ev: InputEvent) => { @input=${itemSelectHandler}
if ((ev.target as HTMLInputElement).checked) {
// Add item to selected
this.selectedElements.push(item);
} else {
// Get index of item and remove if selected
const index = this.selectedElements.indexOf(item);
if (index <= -1) return;
this.selectedElements.splice(index, 1);
}
this.requestUpdate();
// Unset select-all if selectedElements is empty
if (this.selectedElements.length < 1) {
const selectAllCheckbox =
this.shadowRoot?.querySelector<HTMLInputElement>(
"[name=select-all]",
);
if (!selectAllCheckbox) {
return;
}
selectAllCheckbox.checked = false;
this.requestUpdate();
}
}}
/></label> /></label>
</td>` </td>`
: html``} : html``}