web/admin: add edit button to application view page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-04 13:44:57 +02:00
parent 67fef02d71
commit 5b5d7e4997
4 changed files with 36 additions and 27 deletions

View file

@ -29,6 +29,7 @@ export class ModalButton extends LitElement {
css`
:host {
text-align: left;
font-size: var(--pf-global--FontSize--md);
}
.pf-c-modal-box.pf-m-lg {
overflow-y: auto;

View file

@ -57,18 +57,10 @@ export class ConfirmationForm extends ModalButton {
</h1>
</div>
</section>
<section class="pf-c-page__main-section">
<div class="pf-l-stack">
<div class="pf-l-stack__item">
<div class="pf-c-card">
<div class="pf-c-card__body">
<form class="pf-c-form pf-m-horizontal">
<slot name="body"></slot>
</form>
</div>
</div>
</div>
</div>
<section class="pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal">
<slot name="body"></slot>
</form>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button

View file

@ -55,20 +55,12 @@ export class DeleteForm extends ModalButton {
</h1>
</div>
</section>
<section class="pf-c-page__main-section">
<div class="pf-l-stack">
<div class="pf-l-stack__item">
<div class="pf-c-card">
<div class="pf-c-card__body">
<form class="pf-c-form pf-m-horizontal">
<p>
${t`Are you sure you want to delete ${this.objectLabel} '${this.obj?.name}'?`}
</p>
</form>
</div>
</div>
</div>
</div>
<section class="pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal">
<p>
${t`Are you sure you want to delete ${this.objectLabel} '${this.obj?.name}'?`}
</p>
</form>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button

View file

@ -7,6 +7,7 @@ import "../../elements/buttons/SpinnerButton";
import "../../elements/EmptyState";
import "../../elements/events/ObjectChangelog";
import "../policies/BoundPoliciesList";
import "./ApplicationForm";
import { Application, CoreApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
@ -15,6 +16,7 @@ import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import AKGlobal from "../../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
@customElement("ak-application-view")
export class ApplicationViewPage extends LitElement {
@ -32,7 +34,7 @@ export class ApplicationViewPage extends LitElement {
application!: Application;
static get styles(): CSSResult[] {
return [PFBase, PFPage, PFContent, PFGallery, PFCard, AKGlobal].concat(
return [PFBase, PFPage, PFContent, PFButton, PFGallery, PFCard, AKGlobal].concat(
css`
img.pf-icon {
max-height: 24px;
@ -96,6 +98,28 @@ export class ApplicationViewPage extends LitElement {
</dd>
</div>`:
html``}
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Edit`}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<ak-forms-modal>
<span slot="submit">
${t`Update`}
</span>
<span slot="header">
${t`Update Application`}
</span>
<ak-application-form slot="form" .application=${this.application}>
</ak-application-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`}
</button>
</ak-forms-modal>
</div>
</dd>
</div>
</dl>
</div>
</div>