web/admin: improve empty state

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

# Conflicts:
#	web/src/elements/table/TablePage.ts
#	web/src/pages/applications/ApplicationListPage.ts
This commit is contained in:
Jens Langhammer 2022-04-18 17:11:44 +02:00
parent 8691a79204
commit 263bcae050
31 changed files with 67 additions and 45 deletions

View file

@ -1,3 +1,5 @@
import { t } from "@lingui/macro";
import { CSSResult } from "lit";
import { TemplateResult, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
@ -26,6 +28,24 @@ export abstract class TablePage<T> extends Table<T> {
return html``;
}
renderEmpty(inner?: TemplateResult): TemplateResult {
return super.renderEmpty(html`
${inner
? inner
: html`<ak-empty-state icon=${this.pageIcon()} header="${t`No objects found.`}">
<div slot="body">${this.renderObjectCreate()}</div>
</ak-empty-state>`}
`);
}
renderObjectCreate(): TemplateResult {
return html``;
}
renderToolbar(): TemplateResult {
return html`${this.renderObjectCreate()}${super.renderToolbar()}`;
}
render(): TemplateResult {
return html`<ak-page-header
icon=${this.pageIcon()}

View file

@ -3363,6 +3363,7 @@ msgid "No matching events could be found."
msgstr "Es konnten keine passenden Ereignisse gefunden werden."
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "Keine Objekte gefunden."

View file

@ -3416,6 +3416,7 @@ msgid "No matching events could be found."
msgstr "No matching events could be found."
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "No objects found."

View file

@ -3356,6 +3356,7 @@ msgid "No matching events could be found."
msgstr "No se han encontrado eventos coincidentes."
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "No se han encontrado objetos."

View file

@ -3387,6 +3387,7 @@ msgid "No matching events could be found."
msgstr "Aucun événement correspondant n'a été trouvé."
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "Aucun objet trouvé."

View file

@ -3353,6 +3353,7 @@ msgid "No matching events could be found."
msgstr "Nie znaleziono pasujących zdarzeń."
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "Nie znaleziono żadnych obiektów."

View file

@ -3398,6 +3398,7 @@ msgid "No matching events could be found."
msgstr ""
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr ""

View file

@ -3357,6 +3357,7 @@ msgid "No matching events could be found."
msgstr "Eşleşen olay bulunamadı."
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "Nesne bulunamadı."

View file

@ -3339,6 +3339,7 @@ msgid "No matching events could be found."
msgstr "未找到匹配的事件"
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "未找到对象。"

View file

@ -3342,6 +3342,7 @@ msgid "No matching events could be found."
msgstr "找不到匹配的事件。"
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "未找到任何对象。"

View file

@ -3342,6 +3342,7 @@ msgid "No matching events could be found."
msgstr "找不到匹配的事件。"
#: src/elements/table/Table.ts
#: src/elements/table/TablePage.ts
msgid "No objects found."
msgstr "未找到任何对象。"

View file

@ -159,7 +159,7 @@ export class ApplicationListPage extends TablePage<Application> {
];
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal .open=${getURLParam("createForm", false)}>
<span slot="submit"> ${t`Create`} </span>
@ -167,7 +167,6 @@ export class ApplicationListPage extends TablePage<Application> {
<ak-application-form slot="form"> </ak-application-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -186,7 +186,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
<td></td>`;
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -201,7 +201,6 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
</ak-crypto-certificate-generate-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">${t`Generate`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -93,7 +93,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
];
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -101,7 +101,6 @@ export class RuleListPage extends TablePage<NotificationRule> {
<ak-event-rule-form slot="form"> </ak-event-rule-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}

View file

@ -101,7 +101,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
];
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -109,7 +109,6 @@ export class TransportListPage extends TablePage<NotificationTransport> {
<ak-event-transport-form slot="form"> </ak-event-transport-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -127,8 +127,9 @@ export class FlowListPage extends TablePage<Flow> {
];
}
renderToolbar(): TemplateResult {
return html` <ak-forms-modal>
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
<span slot="header"> ${t`Create Flow`} </span>
<ak-flow-form slot="form"> </ak-flow-form>
@ -140,6 +141,11 @@ export class FlowListPage extends TablePage<Flow> {
<ak-flow-import-form slot="form"> </ak-flow-import-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Import`}</button>
</ak-forms-modal>
`;
}
renderToolbar(): TemplateResult {
return html`
${super.renderToolbar()}
<ak-forms-confirm
successMessage=${t`Successfully cleared flow cache`}
@ -158,6 +164,7 @@ export class FlowListPage extends TablePage<Flow> {
${t`Clear cache`}
</button>
<div slot="modal"></div>
</ak-forms-confirm>`;
</ak-forms-confirm>
`;
}
}

View file

@ -95,7 +95,7 @@ export class GroupListPage extends TablePage<Group> {
];
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -103,7 +103,6 @@ export class GroupListPage extends TablePage<Group> {
<ak-group-form slot="form"> </ak-group-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -86,8 +86,4 @@ export class RelatedGroupList extends Table<Group> {
</ak-forms-modal>`,
];
}
renderToolbar(): TemplateResult {
return html` ${super.renderToolbar()} `;
}
}

View file

@ -178,7 +178,7 @@ export class OutpostListPage extends TablePage<Outpost> {
</ak-forms-delete-bulk>`;
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -186,7 +186,6 @@ export class OutpostListPage extends TablePage<Outpost> {
<ak-outpost-form slot="form"> </ak-outpost-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -123,8 +123,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
</ak-forms-delete-bulk>`;
}
renderToolbar(): TemplateResult {
return html`<ak-service-connection-wizard></ak-service-connection-wizard>
${super.renderToolbar()}`;
renderObjectCreate(): TemplateResult {
return html`<ak-service-connection-wizard></ak-service-connection-wizard> `;
}
}

View file

@ -196,7 +196,6 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
${t`Create Binding`}
</button>
</ak-forms-modal>
<ak-policy-wizard createText=${t`Create Policy`}></ak-policy-wizard>
${super.renderToolbar()}`;
<ak-policy-wizard createText=${t`Create Policy`}></ak-policy-wizard> `;
}
}

View file

@ -126,9 +126,12 @@ export class PolicyListPage extends TablePage<Policy> {
</ak-forms-delete-bulk>`;
}
renderObjectCreate(): TemplateResult {
return html`<ak-policy-wizard> </ak-policy-wizard>`;
}
renderToolbar(): TemplateResult {
return html`<ak-policy-wizard> </ak-policy-wizard>
${super.renderToolbar()}
return html` ${super.renderToolbar()}
<ak-forms-confirm
successMessage=${t`Successfully cleared policy cache`}
errorMessage=${t`Failed to delete policy cache`}

View file

@ -121,9 +121,8 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
];
}
renderToolbar(): TemplateResult {
return html`<ak-property-mapping-wizard></ak-property-mapping-wizard>
${super.renderToolbar()}`;
renderObjectCreate(): TemplateResult {
return html`<ak-property-mapping-wizard></ak-property-mapping-wizard> `;
}
renderToolbarAfter(): TemplateResult {

View file

@ -110,7 +110,7 @@ export class ProviderListPage extends TablePage<Provider> {
];
}
renderToolbar(): TemplateResult {
return html`<ak-provider-wizard> </ak-provider-wizard> ${super.renderToolbar()}`;
renderObjectCreate(): TemplateResult {
return html`<ak-provider-wizard> </ak-provider-wizard> `;
}
}

View file

@ -114,7 +114,7 @@ export class SourceListPage extends TablePage<Source> {
];
}
renderToolbar(): TemplateResult {
return html`<ak-source-wizard> </ak-source-wizard> ${super.renderToolbar()}`;
renderObjectCreate(): TemplateResult {
return html`<ak-source-wizard> </ak-source-wizard> `;
}
}

View file

@ -132,7 +132,7 @@ export class StageListPage extends TablePage<Stage> {
];
}
renderToolbar(): TemplateResult {
return html`<ak-stage-wizard></ak-stage-wizard> ${super.renderToolbar()}`;
renderObjectCreate(): TemplateResult {
return html`<ak-stage-wizard></ak-stage-wizard> `;
}
}

View file

@ -123,7 +123,7 @@ export class InvitationListPage extends TablePage<Invitation> {
<td></td>`;
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -131,7 +131,6 @@ export class InvitationListPage extends TablePage<Invitation> {
<ak-invitation-form slot="form"> </ak-invitation-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}

View file

@ -99,7 +99,7 @@ export class PromptListPage extends TablePage<Prompt> {
];
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -107,7 +107,6 @@ export class PromptListPage extends TablePage<Prompt> {
<ak-prompt-form slot="form"> </ak-prompt-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -95,7 +95,7 @@ export class TenantListPage extends TablePage<Tenant> {
];
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -103,7 +103,6 @@ export class TenantListPage extends TablePage<Tenant> {
<ak-tenant-form slot="form"> </ak-tenant-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}
}

View file

@ -92,7 +92,7 @@ export class TokenListPage extends TablePage<Token> {
</ak-forms-delete-bulk>`;
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -100,7 +100,6 @@ export class TokenListPage extends TablePage<Token> {
<ak-token-form slot="form"> </ak-token-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}

View file

@ -300,7 +300,7 @@ export class UserListPage extends TablePage<User> {
<td></td>`;
}
renderToolbar(): TemplateResult {
renderObjectCreate(): TemplateResult {
return html`
<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
@ -316,7 +316,6 @@ export class UserListPage extends TablePage<User> {
${t`Create Service account`}
</button>
</ak-forms-modal>
${super.renderToolbar()}
`;
}