web/admin: fix Table not updating selectedElements correctly after update
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
9c9addb0ce
commit
b0f09eb2c4
|
@ -85,7 +85,7 @@ class TokenIntrospectionParams:
|
||||||
|
|
||||||
params = TokenIntrospectionParams(token=token)
|
params = TokenIntrospectionParams(token=token)
|
||||||
if not any([params.authenticate_basic(request), params.authenticate_bearer(request)]):
|
if not any([params.authenticate_basic(request), params.authenticate_bearer(request)]):
|
||||||
LOGGER.debug("Not authenticated")
|
LOGGER.warning("Not authenticated")
|
||||||
raise TokenIntrospectionError()
|
raise TokenIntrospectionError()
|
||||||
return params
|
return params
|
||||||
|
|
||||||
|
|
|
@ -127,7 +127,7 @@ export abstract class Table<T> extends LitElement {
|
||||||
expandable = false;
|
expandable = false;
|
||||||
|
|
||||||
@property({ attribute: false })
|
@property({ attribute: false })
|
||||||
expandedRows: boolean[] = [];
|
expandedElements: T[] = [];
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [
|
return [
|
||||||
|
@ -158,7 +158,16 @@ export abstract class Table<T> extends LitElement {
|
||||||
.then((r) => {
|
.then((r) => {
|
||||||
this.data = r;
|
this.data = r;
|
||||||
this.page = r.pagination.current;
|
this.page = r.pagination.current;
|
||||||
this.expandedRows = [];
|
r.results.forEach((res) => {
|
||||||
|
const selectedIndex = this.selectedElements.indexOf(res);
|
||||||
|
if (selectedIndex <= -1) {
|
||||||
|
this.selectedElements.splice(selectedIndex, 1);
|
||||||
|
}
|
||||||
|
const expandedIndex = this.expandedElements.indexOf(res);
|
||||||
|
if (expandedIndex <= -1) {
|
||||||
|
this.expandedElements.splice(expandedIndex, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
@ -200,12 +209,9 @@ export abstract class Table<T> extends LitElement {
|
||||||
return [this.renderEmpty()];
|
return [this.renderEmpty()];
|
||||||
}
|
}
|
||||||
return this.data.results.map((item: T, idx: number) => {
|
return this.data.results.map((item: T, idx: number) => {
|
||||||
if (this.expandedRows.length - 1 < idx) {
|
|
||||||
this.expandedRows[idx] = false;
|
|
||||||
}
|
|
||||||
return html`<tbody
|
return html`<tbody
|
||||||
role="rowgroup"
|
role="rowgroup"
|
||||||
class="${this.expandedRows[idx] ? "pf-m-expanded" : ""}"
|
class="${this.expandedElements.indexOf(item) > -1 ? "pf-m-expanded" : ""}"
|
||||||
>
|
>
|
||||||
<tr role="row">
|
<tr role="row">
|
||||||
${this.checkbox
|
${this.checkbox
|
||||||
|
@ -231,11 +237,20 @@ export abstract class Table<T> extends LitElement {
|
||||||
${this.expandable
|
${this.expandable
|
||||||
? html`<td class="pf-c-table__toggle" role="cell">
|
? html`<td class="pf-c-table__toggle" role="cell">
|
||||||
<button
|
<button
|
||||||
class="pf-c-button pf-m-plain ${this.expandedRows[idx]
|
class="pf-c-button pf-m-plain ${this.expandedElements.indexOf(
|
||||||
|
item,
|
||||||
|
) > -1
|
||||||
? "pf-m-expanded"
|
? "pf-m-expanded"
|
||||||
: ""}"
|
: ""}"
|
||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.expandedRows[idx] = !this.expandedRows[idx];
|
const idx = this.expandedElements.indexOf(item);
|
||||||
|
if (idx <= -1) {
|
||||||
|
// Element is not expanded, add it
|
||||||
|
this.expandedElements.push(item);
|
||||||
|
} else {
|
||||||
|
// Element is expanded, remove it
|
||||||
|
this.expandedElements.splice(idx, 1);
|
||||||
|
}
|
||||||
this.requestUpdate();
|
this.requestUpdate();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -251,13 +266,13 @@ export abstract class Table<T> extends LitElement {
|
||||||
})}
|
})}
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="pf-c-table__expandable-row ${this.expandedRows[idx]
|
class="pf-c-table__expandable-row ${this.expandedElements.indexOf(item) > -1
|
||||||
? "pf-m-expanded"
|
? "pf-m-expanded"
|
||||||
: ""}"
|
: ""}"
|
||||||
role="row"
|
role="row"
|
||||||
>
|
>
|
||||||
<td></td>
|
<td></td>
|
||||||
${this.expandedRows[idx] ? this.renderExpanded(item) : html``}
|
${this.expandedElements.indexOf(item) > -1 ? this.renderExpanded(item) : html``}
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>`;
|
</tbody>`;
|
||||||
});
|
});
|
||||||
|
|
Reference in New Issue