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
parent
67fef02d71
commit
5b5d7e4997
|
|
@ -29,6 +29,7 @@ export class ModalButton extends LitElement {
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
font-size: var(--pf-global--FontSize--md);
|
||||||
}
|
}
|
||||||
.pf-c-modal-box.pf-m-lg {
|
.pf-c-modal-box.pf-m-lg {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
|
||||||
|
|
@ -57,18 +57,10 @@ export class ConfirmationForm extends ModalButton {
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="pf-c-page__main-section">
|
<section class="pf-c-page__main-section pf-m-light">
|
||||||
<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">
|
<form class="pf-c-form pf-m-horizontal">
|
||||||
<slot name="body"></slot>
|
<slot name="body"></slot>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<footer class="pf-c-modal-box__footer">
|
<footer class="pf-c-modal-box__footer">
|
||||||
<ak-spinner-button
|
<ak-spinner-button
|
||||||
|
|
|
||||||
|
|
@ -55,20 +55,12 @@ export class DeleteForm extends ModalButton {
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="pf-c-page__main-section">
|
<section class="pf-c-page__main-section pf-m-light">
|
||||||
<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">
|
<form class="pf-c-form pf-m-horizontal">
|
||||||
<p>
|
<p>
|
||||||
${t`Are you sure you want to delete ${this.objectLabel} '${this.obj?.name}'?`}
|
${t`Are you sure you want to delete ${this.objectLabel} '${this.obj?.name}'?`}
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
<footer class="pf-c-modal-box__footer">
|
<footer class="pf-c-modal-box__footer">
|
||||||
<ak-spinner-button
|
<ak-spinner-button
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import "../../elements/buttons/SpinnerButton";
|
||||||
import "../../elements/EmptyState";
|
import "../../elements/EmptyState";
|
||||||
import "../../elements/events/ObjectChangelog";
|
import "../../elements/events/ObjectChangelog";
|
||||||
import "../policies/BoundPoliciesList";
|
import "../policies/BoundPoliciesList";
|
||||||
|
import "./ApplicationForm";
|
||||||
import { Application, CoreApi } from "authentik-api";
|
import { Application, CoreApi } from "authentik-api";
|
||||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||||
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
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 PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||||
import AKGlobal from "../../authentik.css";
|
import AKGlobal from "../../authentik.css";
|
||||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||||
|
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||||
|
|
||||||
@customElement("ak-application-view")
|
@customElement("ak-application-view")
|
||||||
export class ApplicationViewPage extends LitElement {
|
export class ApplicationViewPage extends LitElement {
|
||||||
|
|
@ -32,7 +34,7 @@ export class ApplicationViewPage extends LitElement {
|
||||||
application!: Application;
|
application!: Application;
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [PFBase, PFPage, PFContent, PFGallery, PFCard, AKGlobal].concat(
|
return [PFBase, PFPage, PFContent, PFButton, PFGallery, PFCard, AKGlobal].concat(
|
||||||
css`
|
css`
|
||||||
img.pf-icon {
|
img.pf-icon {
|
||||||
max-height: 24px;
|
max-height: 24px;
|
||||||
|
|
@ -96,6 +98,28 @@ export class ApplicationViewPage extends LitElement {
|
||||||
</dd>
|
</dd>
|
||||||
</div>`:
|
</div>`:
|
||||||
html``}
|
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>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in New Issue