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

View File

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