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

web/elements: improve consistency in row selection in table 

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-02-08 00:11:12 +01:00
parent 89417ce455
commit c5a935474b
No known key found for this signature in database
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -292,11 +292,15 @@ 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 | PointerEvent) => { const itemSelectHandler = (ev: InputEvent | PointerEvent) => {
let checked = false; let checked = false;
if (ev instanceof InputEvent) { const target = ev.target as HTMLElement;
checked = (ev.target as HTMLInputElement).checked; if (ev.type === "input") {
checked = (target as HTMLInputElement).checked;
} else if (ev instanceof PointerEvent) { } else if (ev instanceof PointerEvent) {
if (target.classList.contains("ignore-click")) {
return;
}
checked = this.selectedElements.indexOf(item) === -1; checked = this.selectedElements.indexOf(item) === -1;
} }
if (checked) { if (checked) {
@ -335,11 +339,15 @@ export abstract class Table<T> extends AKElement {
> >
${this.checkbox ${this.checkbox
? html`<td class="pf-c-table__check" role="cell"> ? html`<td class="pf-c-table__check" role="cell">
<label <label class="ignore-click"
><input ><input
type="checkbox" type="checkbox"
class="ignore-click"
.checked=${this.selectedElements.indexOf(item) >= 0} .checked=${this.selectedElements.indexOf(item) >= 0}
@input=${itemSelectHandler} @input=${itemSelectHandler}
@click=${(ev: Event) => {
ev.stopPropagation();
}}
/></label> /></label>
</td>` </td>`
: html``} : html``}
@ -351,7 +359,8 @@ export abstract class Table<T> extends AKElement {
) > -1 ) > -1
? "pf-m-expanded" ? "pf-m-expanded"
: ""}" : ""}"
@click=${() => { @click=${(ev: Event) => {
ev.stopPropagation();
const idx = this.expandedElements.indexOf(item); const idx = this.expandedElements.indexOf(item);
if (idx <= -1) { if (idx <= -1) {
// Element is not expanded, add it // Element is not expanded, add it