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:
parent
8691a79204
commit
263bcae050
|
@ -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()}
|
||||
|
|
|
@ -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."
|
||||
|
||||
|
|
|
@ -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."
|
||||
|
||||
|
|
|
@ -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."
|
||||
|
||||
|
|
|
@ -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é."
|
||||
|
||||
|
|
|
@ -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."
|
||||
|
||||
|
|
|
@ -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 ""
|
||||
|
||||
|
|
|
@ -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ı."
|
||||
|
||||
|
|
|
@ -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 "未找到对象。"
|
||||
|
||||
|
|
|
@ -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 "未找到任何对象。"
|
||||
|
||||
|
|
|
@ -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 "未找到任何对象。"
|
||||
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -86,8 +86,4 @@ export class RelatedGroupList extends Table<Group> {
|
|||
</ak-forms-modal>`,
|
||||
];
|
||||
}
|
||||
|
||||
renderToolbar(): TemplateResult {
|
||||
return html` ${super.renderToolbar()} `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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`}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
@ -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()}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue