web/admin: fix Table not updating selectedElements correctly after update

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-07 20:06:17 +02:00
parent 9c9addb0ce
commit b0f09eb2c4
2 changed files with 26 additions and 11 deletions

View File

@ -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

View File

@ -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>`;
}); });