diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index 7d41ad1c4..f20563f47 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -130,6 +130,9 @@ export abstract class Table extends AKElement { @property({ type: Boolean }) checkbox = false; + @property({ type: Boolean }) + radioSelect = false; + @property({ type: Boolean }) checkboxChip = false; @@ -289,41 +292,57 @@ export abstract class Table extends AKElement { private renderRowGroup(items: T[]): TemplateResult[] { 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("[name=select-all]"); + if (!selectAllCheckbox) { + return; + } + if (this.selectedElements.length < 1) { + selectAllCheckbox.checked = false; + this.requestUpdate(); + } + }; return html` - + { + itemSelectHandler(); + }} + > ${this.checkbox ? html` ` : html``}