web/admin: make table dispatch refresh event on refresh button instead of just fetching

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-07-05 09:48:14 +02:00
parent edfab0995f
commit abed254ca1
3 changed files with 43 additions and 11 deletions

11
web/package-lock.json generated
View file

@ -61,12 +61,13 @@
"typescript": "^4.3.5",
"webcomponent-qr-code": "^1.0.5",
"yaml": "^1.10.2"
}
},
"devDependencies": {}
},
"api": {
"name": "authentik-api",
"version": "0.0.1",
"dependencies": {
"version": "1.0.0",
"devDependencies": {
"typescript": "^3.6"
}
},
@ -74,6 +75,7 @@
"version": "3.9.9",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
"integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -10204,7 +10206,8 @@
"typescript": {
"version": "3.9.9",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
"integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w=="
"integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
"dev": true
}
}
},

View file

@ -225,7 +225,14 @@ export abstract class Table<T> extends LitElement {
renderToolbar(): TemplateResult {
return html`<button
@click=${() => { this.fetch(); }}
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
}}
class="pf-c-button pf-m-primary">
${t`Refresh`}
</button>`;
@ -241,7 +248,12 @@ export abstract class Table<T> extends LitElement {
}
return html`<ak-table-search value=${ifDefined(this.search)} .onSearch=${(value: string) => {
this.search = value;
this.fetch();
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
}}>
</ak-table-search>&nbsp;`;
}
@ -274,7 +286,15 @@ export abstract class Table<T> extends LitElement {
<ak-table-pagination
class="pf-c-toolbar__item pf-m-pagination"
.pages=${this.data?.pagination}
.pageChangeHandler=${(page: number) => { this.page = page; this.fetch(); }}>
.pageChangeHandler=${(page: number) => {
this.page = page;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
}}>
</ak-table-pagination>
</div>
</div>
@ -300,7 +320,15 @@ export abstract class Table<T> extends LitElement {
<ak-table-pagination
class="pf-c-toolbar__item pf-m-pagination"
.pages=${this.data?.pagination}
.pageChangeHandler=${(page: number) => { this.page = page; this.fetch(); }}>
.pageChangeHandler=${(page: number) => {
this.page = page;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
}}>
</ak-table-pagination>
</div>`;
}

View file

@ -15,7 +15,7 @@ export class OutpostHealthElement extends LitElement {
outpostId?: string;
@property({attribute: false})
outpostHealth: OutpostHealth[] = [];
outpostHealth?: OutpostHealth[];
static get styles(): CSSResult[] {
return [PFBase, AKGlobal];
@ -23,7 +23,8 @@ export class OutpostHealthElement extends LitElement {
constructor() {
super();
this.addEventListener(EVENT_REFRESH, () => {
window.addEventListener(EVENT_REFRESH, () => {
this.outpostHealth = undefined;
this.firstUpdated();
});
}
@ -38,7 +39,7 @@ export class OutpostHealthElement extends LitElement {
}
render(): TemplateResult {
if (!this.outpostId) {
if (!this.outpostId || !this.outpostHealth) {
return html`<ak-spinner></ak-spinner>`;
}
if (this.outpostHealth.length === 0) {