web/admin: add spinner to table refresh to show progress

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-02 19:34:17 +01:00
parent ea097afeae
commit 5594ad0b36
2 changed files with 18 additions and 33 deletions

View file

@ -17,6 +17,7 @@ import { AKResponse } from "../../api/Client";
import { EVENT_REFRESH } from "../../constants";
import { groupBy } from "../../utils";
import "../EmptyState";
import "../buttons/SpinnerButton";
import "../chips/Chip";
import "../chips/ChipGroup";
import { getURLParam, updateURLParams } from "../router/RouteMatch";
@ -162,12 +163,12 @@ export abstract class Table<T> extends LitElement {
});
}
public fetch(): void {
public async fetch(): Promise<void> {
if (this.isLoading) {
return;
}
this.isLoading = true;
this.apiEndpoint(this.page)
return this.apiEndpoint(this.page)
.then((r) => {
this.data = r;
this.page = r.pagination.current;
@ -319,19 +320,14 @@ export abstract class Table<T> extends LitElement {
}
renderToolbar(): TemplateResult {
return html`<button
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
return html` <ak-spinner-button
.callAction=${() => {
return this.fetch();
}}
class="pf-c-button pf-m-secondary"
class="pf-m-secondary"
>
${t`Refresh`}
</button>`;
${t`Refresh`}</ak-spinner-button
>`;
}
renderToolbarSelected(): TemplateResult {
@ -350,12 +346,7 @@ export abstract class Table<T> extends LitElement {
value=${ifDefined(this.search)}
.onSearch=${(value: string) => {
this.search = value;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
this.fetch();
updateURLParams({
search: value,
});
@ -382,12 +373,7 @@ export abstract class Table<T> extends LitElement {
.pages=${this.data?.pagination}
.pageChangeHandler=${(page: number) => {
this.page = page;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
this.fetch();
}}
>
</ak-table-pagination>`
@ -442,12 +428,7 @@ export abstract class Table<T> extends LitElement {
.pages=${this.data?.pagination}
.pageChangeHandler=${(page: number) => {
this.page = page;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
this.fetch();
}}
>
</ak-table-pagination>

View file

@ -3582,8 +3582,12 @@ msgid "Re-evaluate policies"
msgstr "Ré-évaluer les politiques"
#: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
msgid "Receive a push notification on your phone to prove your identity."
msgstr "Recevez une notification push sur votre téléphone pour prouver votre identité."
msgid "Receive a push notification on your device."
msgstr ""
#: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
#~ msgid "Receive a push notification on your phone to prove your identity."
#~ msgstr "Recevez une notification push sur votre téléphone pour prouver votre identité."
#: src/pages/flows/utils.ts
#: src/pages/tokens/TokenListPage.ts