web/admin: add spinner to table refresh to show progress
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
ea097afeae
commit
5594ad0b36
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Reference in New Issue