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

53
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,19 +292,19 @@ 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) => {
return html`<tbody const itemSelectHandler = (ev?: InputEvent) => {
role="rowgroup" let checked = false;
class="${this.expandedElements.indexOf(item) > -1 ? "pf-m-expanded" : ""}" if (ev) {
> checked = (ev.target as HTMLInputElement).checked;
<tr role="row"> } else {
${this.checkbox // If we have no event, toggle the state
? html`<td class="pf-c-table__check" role="cell"> checked = this.selectedElements.indexOf(item) === -1;
<label }
><input if (checked) {
type="checkbox" // Prevent double-adding the element to selected items
.checked=${this.selectedElements.indexOf(item) >= 0} if (this.selectedElements.indexOf(item) !== -1) {
@input=${(ev: InputEvent) => { return;
if ((ev.target as HTMLInputElement).checked) { }
// Add item to selected // Add item to selected
this.selectedElements.push(item); this.selectedElements.push(item);
} else { } else {
@ -312,18 +315,34 @@ export abstract class Table<T> extends AKElement {
} }
this.requestUpdate(); this.requestUpdate();
// Unset select-all if selectedElements is empty // Unset select-all if selectedElements is empty
if (this.selectedElements.length < 1) {
const selectAllCheckbox = const selectAllCheckbox =
this.shadowRoot?.querySelector<HTMLInputElement>( this.shadowRoot?.querySelector<HTMLInputElement>("[name=select-all]");
"[name=select-all]",
);
if (!selectAllCheckbox) { if (!selectAllCheckbox) {
return; return;
} }
if (this.selectedElements.length < 1) {
selectAllCheckbox.checked = false; selectAllCheckbox.checked = false;
this.requestUpdate(); this.requestUpdate();
} }
};
return html`<tbody
role="rowgroup"
class="${this.expandedElements.indexOf(item) > -1 ? "pf-m-expanded" : ""}"
>
<tr
role="row"
class="${this.checkbox ? "pf-m-hoverable" : ""}"
@click=${() => {
itemSelectHandler();
}} }}
>
${this.checkbox
? html`<td class="pf-c-table__check" role="cell">
<label
><input
type="checkbox"
.checked=${this.selectedElements.indexOf(item) >= 0}
@input=${itemSelectHandler}
/></label> /></label>
</td>` </td>`
: html``} : html``}