habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: re-format with prettier

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-08-03 17:52:21 +02:00
parent 77ed25ae34
commit 2c60ec50be
218 changed files with 11696 additions and 8225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/elements/forms/ConfirmationForm.ts
View File

@ -8,7 +8,6 @@ import { showMessage } from "../messages/MessageContainer";
@customElement("ak-forms-confirm")
export class ConfirmationForm extends ModalButton {
@property()
successMessage!: string;
@property()
@ -17,23 +16,25 @@ export class ConfirmationForm extends ModalButton {
@property()
action!: string;
@property({attribute: false})
@property({ attribute: false })
onConfirm!: () => Promise<unknown>;
confirm(): Promise<void> {
return this.onConfirm().then(() => {
this.onSuccess();
this.open = false;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
}).catch((e) => {
this.onError(e);
throw e;
});
return this.onConfirm()
.then(() => {
this.onSuccess();
this.open = false;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
})
.catch((e) => {
this.onError(e);
throw e;
});
}
onSuccess(): void {
@ -52,33 +53,34 @@ export class ConfirmationForm extends ModalButton {
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot>
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal">
<slot class="pf-c-content" name="body"></slot>
</form>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm();
}}
class="pf-m-danger">
${this.action}
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary">
${t`Cancel`}
</ak-spinner-button>
</footer>`;
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot>
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<form class="pf-c-form pf-m-horizontal">
<slot class="pf-c-content" name="body"></slot>
</form>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm();
}}
class="pf-m-danger"
>
${this.action} </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary"
>
${t`Cancel`}
</ak-spinner-button>
</footer>`;
}
}

166
web/src/elements/forms/DeleteForm.ts
View File

@ -11,42 +11,43 @@ import { until } from "lit-html/directives/until";
@customElement("ak-forms-delete")
export class DeleteForm extends ModalButton {
static get styles(): CSSResult[] {
return super.styles.concat(PFList);
}
@property({attribute: false})
@property({ attribute: false })
obj?: Record<string, unknown>;
@property()
objectLabel?: string;
@property({attribute: false})
@property({ attribute: false })
usedBy?: () => Promise<UsedBy[]>;
@property({attribute: false})
@property({ attribute: false })
delete!: () => Promise<unknown>;
confirm(): Promise<void> {
return this.delete().then(() => {
this.onSuccess();
this.open = false;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
}).catch((e) => {
this.onError(e);
throw e;
});
return this.delete()
.then(() => {
this.onSuccess();
this.open = false;
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
})
.catch((e) => {
this.onError(e);
throw e;
});
}
onSuccess(): void {
showMessage({
message: t`Successfully deleted ${this.objectLabel} ${ this.obj?.name }`,
message: t`Successfully deleted ${this.objectLabel} ${this.obj?.name}`,
level: MessageLevel.success,
});
}
@ -66,69 +67,70 @@ export class DeleteForm extends ModalButton {
objName = "";
}
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
${t`Delete ${this.objectLabel}`}
</h1>
</div>
</section>
<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} ${objName} ?`}
</p>
</form>
</section>
${this.usedBy ? until(this.usedBy().then(usedBy => {
if (usedBy.length < 1) {
return html``;
}
return html`
<section class="pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<p>
${t`The following objects use ${objName} `}
</p>
<ul class="pf-c-list">
${usedBy.map(ub => {
let consequence = "";
switch (ub.action) {
case UsedByActionEnum.Cascade:
consequence = t`object will be DELETED`;
break;
case UsedByActionEnum.CascadeMany:
consequence = t`connecting object will be deleted`;
break;
case UsedByActionEnum.SetDefault:
consequence = t`reference will be reset to default value`;
break;
case UsedByActionEnum.SetNull:
consequence = t`reference will be set to an empty value`;
break;
}
return html`<li>${t`${ub.name} (${consequence})`}</li>`;
})}
</ul>
</form>
</section>
`;
})) : html``}
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm();
}}
class="pf-m-danger">
${t`Delete`}
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary">
${t`Cancel`}
</ak-spinner-button>
</footer>`;
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
</div>
</section>
<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} ${objName} ?`}</p>
</form>
</section>
${this.usedBy
? until(
this.usedBy().then((usedBy) => {
if (usedBy.length < 1) {
return html``;
}
return html`
<section class="pf-c-page__main-section">
<form class="pf-c-form pf-m-horizontal">
<p>${t`The following objects use ${objName} `}</p>
<ul class="pf-c-list">
${usedBy.map((ub) => {
let consequence = "";
switch (ub.action) {
case UsedByActionEnum.Cascade:
consequence = t`object will be DELETED`;
break;
case UsedByActionEnum.CascadeMany:
consequence = t`connecting object will be deleted`;
break;
case UsedByActionEnum.SetDefault:
consequence = t`reference will be reset to default value`;
break;
case UsedByActionEnum.SetNull:
consequence = t`reference will be set to an empty value`;
break;
}
return html`<li>
${t`${ub.name} (${consequence})`}
</li>`;
})}
</ul>
</form>
</section>
`;
}),
)
: html``}
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm();
}}
class="pf-m-danger"
>
${t`Delete`} </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary"
>
${t`Cancel`}
</ak-spinner-button>
</footer>`;
}
}

198
web/src/elements/forms/Form.ts
View File

@ -2,7 +2,15 @@ import "@polymer/paper-input/paper-input";
import "@polymer/iron-form/iron-form";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { showMessage } from "../../elements/messages/MessageContainer";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import {
css,
CSSResult,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
@ -18,31 +26,38 @@ import { ValidationError } from "authentik-api";
import { EVENT_REFRESH } from "../../constants";
export class APIError extends Error {
constructor(public response: ValidationError) {
super();
}
}
@customElement("ak-form")
export class Form<T> extends LitElement {
@property()
successMessage = "";
@property()
send!: (data: T) => Promise<unknown>;
@property({attribute: false})
@property({ attribute: false })
nonFieldErrors?: string[];
static get styles(): CSSResult[] {
return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFInputGroup, PFFormControl, AKGlobal, css`
select[multiple] {
height: 15em;
}
`];
return [
PFBase,
PFCard,
PFButton,
PFForm,
PFAlert,
PFInputGroup,
PFFormControl,
AKGlobal,
css`
select[multiple] {
height: 15em;
}
`,
];
}
get isInViewport(): boolean {
@ -55,25 +70,27 @@ export class Form<T> extends LitElement {
}
updated(): void {
this.shadowRoot?.querySelectorAll<HTMLInputElement>("input[name=name]").forEach(nameInput => {
const form = nameInput.closest("form");
if (form === null) {
return;
}
const slugField = form.querySelector<HTMLInputElement>("input[name=slug]");
if (!slugField) {
return;
}
// Only attach handler if the slug is already equal to the name
// if not, they are probably completely different and shouldn't update
// each other
if (convertToSlug(nameInput.value) !== slugField.value) {
return;
}
nameInput.addEventListener("input", () => {
slugField.value = convertToSlug(nameInput.value);
this.shadowRoot
?.querySelectorAll<HTMLInputElement>("input[name=name]")
.forEach((nameInput) => {
const form = nameInput.closest("form");
if (form === null) {
return;
}
const slugField = form.querySelector<HTMLInputElement>("input[name=slug]");
if (!slugField) {
return;
}
// Only attach handler if the slug is already equal to the name
// if not, they are probably completely different and shouldn't update
// each other
if (convertToSlug(nameInput.value) !== slugField.value) {
return;
}
nameInput.addEventListener("input", () => {
slugField.value = convertToSlug(nameInput.value);
});
});
});
}
/**
@ -110,7 +127,7 @@ export class Form<T> extends LitElement {
serializeForm(form: IronFormElement): T {
const elements: HTMLInputElement[] = form._getSubmittableElements();
const json: { [key: string]: unknown } = {};
elements.forEach(element => {
elements.forEach((element) => {
const values = form._serializeElementValues(element);
if (element.hidden) {
return;
@ -138,54 +155,58 @@ export class Form<T> extends LitElement {
return;
}
const data = this.serializeForm(ironForm);
return this.send(data).then((r) => {
showMessage({
level: MessageLevel.success,
message: this.getSuccessMessage()
});
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
);
return r;
}).catch((ex: Response | Error) => {
if (ex instanceof Error) {
throw ex;
}
if (ex.status > 399 && ex.status < 500) {
return ex.json().then((errorMessage: ValidationError) => {
if (!errorMessage) return errorMessage;
if (errorMessage instanceof Error) {
throw errorMessage;
}
// assign all input-related errors to their elements
const elements: PaperInputElement[] = ironForm._getSubmittableElements();
elements.forEach((element) => {
const elementName = element.name;
if (!elementName) return;
if (camelToSnake(elementName) in errorMessage) {
element.errorMessage = errorMessage[camelToSnake(elementName)].join(", ");
element.invalid = true;
}
});
if ("non_field_errors" in errorMessage) {
this.nonFieldErrors = errorMessage["non_field_errors"];
}
throw new APIError(errorMessage);
return this.send(data)
.then((r) => {
showMessage({
level: MessageLevel.success,
message: this.getSuccessMessage(),
});
}
throw ex;
}).catch((ex: Error) => {
// error is local or not from rest_framework
showMessage({
message: ex.toString(),
level: MessageLevel.error,
this.dispatchEvent(
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
}),
);
return r;
})
.catch((ex: Response | Error) => {
if (ex instanceof Error) {
throw ex;
}
if (ex.status > 399 && ex.status < 500) {
return ex.json().then((errorMessage: ValidationError) => {
if (!errorMessage) return errorMessage;
if (errorMessage instanceof Error) {
throw errorMessage;
}
// assign all input-related errors to their elements
const elements: PaperInputElement[] = ironForm._getSubmittableElements();
elements.forEach((element) => {
const elementName = element.name;
if (!elementName) return;
if (camelToSnake(elementName) in errorMessage) {
element.errorMessage =
errorMessage[camelToSnake(elementName)].join(", ");
element.invalid = true;
}
});
if ("non_field_errors" in errorMessage) {
this.nonFieldErrors = errorMessage["non_field_errors"];
}
throw new APIError(errorMessage);
});
}
throw ex;
})
.catch((ex: Error) => {
// error is local or not from rest_framework
showMessage({
message: ex.toString(),
level: MessageLevel.error,
});
// rethrow the error so the form doesn't close
throw ex;
});
// rethrow the error so the form doesn't close
throw ex;
});
}
renderForm(): TemplateResult {
@ -197,24 +218,24 @@ export class Form<T> extends LitElement {
return html``;
}
return html`<div class="pf-c-form__alert">
${this.nonFieldErrors.map(err => {
return html`<div class="pf-c-alert pf-m-inline pf-m-danger">
<div class="pf-c-alert__icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<h4 class="pf-c-alert__title">
${err}
</h4>
</div>`;
})}
${this.nonFieldErrors.map((err) => {
return html`<div class="pf-c-alert pf-m-inline pf-m-danger">
<div class="pf-c-alert__icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<h4 class="pf-c-alert__title">${err}</h4>
</div>`;
})}
</div>`;
}
renderVisible(): TemplateResult {
return html`<iron-form
@iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
${this.renderNonFieldErrors()}
${this.renderForm()}
@iron-form-presubmit=${(ev: Event) => {
this.submit(ev);
}}
>
${this.renderNonFieldErrors()} ${this.renderForm()}
</iron-form>`;
}
@ -224,5 +245,4 @@ export class Form<T> extends LitElement {
}
return this.renderVisible();
}
}

44
web/src/elements/forms/FormElement.ts
View File

@ -6,16 +6,19 @@ import { ErrorDetail } from "authentik-api";
@customElement("ak-form-element")
export class FormElement extends LitElement {
static get styles(): CSSResult[] {
return [PFForm, PFFormControl, css`
slot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
`];
return [
PFForm,
PFFormControl,
css`
slot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
`,
];
}
@property()
@ -28,22 +31,23 @@ export class FormElement extends LitElement {
errors?: ErrorDetail[];
updated(): void {
this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach(input => {
this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach((input) => {
input.focus();
});
}
render(): TemplateResult {
return html`<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${this.label}</span>
${this.required ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>` : html``}
</label>
<slot></slot>
${(this.errors || []).map((error) => {
return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`;
})}
</div>`;
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${this.label}</span>
${this.required
? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>`
: html``}
</label>
<slot></slot>
${(this.errors || []).map((error) => {
return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`;
})}
</div>`;
}
}

41
web/src/elements/forms/FormGroup.ts
View File

@ -1,4 +1,12 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import {
css,
CSSResult,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@ -7,25 +15,37 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
@customElement("ak-form-group")
export class FormGroup extends LitElement {
@property({ type: Boolean })
expanded = false;
static get styles(): CSSResult[] {
return [PFBase, PFForm, PFButton, PFFormControl, AKGlobal, css`
slot[name=body][hidden] {
display: none !important;
}
`];
return [
PFBase,
PFForm,
PFButton,
PFFormControl,
AKGlobal,
css`
slot[name="body"][hidden] {
display: none !important;
}
`,
];
}
render(): TemplateResult {
return html`<div class="pf-c-form__field-group ${this.expanded ? "pf-m-expanded" : ""}">
<div class="pf-c-form__field-group-toggle">
<div class="pf-c-form__field-group-toggle-button">
<button class="pf-c-button pf-m-plain" type="button" aria-expanded="${this.expanded}" aria-label="Details" @click=${() => {
this.expanded = !this.expanded;
}}>
<button
class="pf-c-button pf-m-plain"
type="button"
aria-expanded="${this.expanded}"
aria-label="Details"
@click=${() => {
this.expanded = !this.expanded;
}}
>
<span class="pf-c-form__field-group-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
@ -47,5 +67,4 @@ export class FormGroup extends LitElement {
<slot ?hidden=${!this.expanded} class="pf-c-form__field-group-body" name="body"></slot>
</div>`;
}
}

65
web/src/elements/forms/HorizontalFormElement.ts
View File

@ -8,17 +8,24 @@ import { t } from "@lingui/macro";
@customElement("ak-form-element-horizontal")
export class HorizontalFormElement extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFForm, PFFormControl, AKGlobal, css`
.pf-c-form__group {
display: grid;
grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
}
.pf-c-form__group-label {
padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
}
`];
return [
PFBase,
PFForm,
PFFormControl,
AKGlobal,
css`
.pf-c-form__group {
display: grid;
grid-template-columns:
var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth)
var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
}
.pf-c-form__group-label {
padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
}
`,
];
}
@property()
@ -43,7 +50,7 @@ export class HorizontalFormElement extends LitElement {
name = "";
updated(): void {
this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach(input => {
this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach((input) => {
input.focus();
});
this.querySelectorAll("*").forEach((input) => {
@ -59,7 +66,7 @@ export class HorizontalFormElement extends LitElement {
return;
}
if (this.writeOnly && !this.writeOnlyActivated) {
const i = (input as HTMLInputElement);
const i = input as HTMLInputElement;
i.setAttribute("hidden", "true");
const handler = () => {
i.removeAttribute("hidden");
@ -76,24 +83,36 @@ export class HorizontalFormElement extends LitElement {
<div class="pf-c-form__group-label">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${this.label}</span>
${this.required ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>` : html``}
${this.required
? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>`
: html``}
</label>
</div>
<div class="pf-c-form__group-control">
${this.writeOnly && !this.writeOnlyActivated ?
html`<div class="pf-c-form__horizontal-group">
<input class="pf-c-form-control" type="password" disabled value="**************">
</div>` :
html``}
${this.writeOnly && !this.writeOnlyActivated
? html`<div class="pf-c-form__horizontal-group">
<input
class="pf-c-form-control"
type="password"
disabled
value="**************"
/>
</div>`
: html``}
<slot class="pf-c-form__horizontal-group"></slot>
<div class="pf-c-form__horizontal-group">
${this.writeOnly ? html`<p class="pf-c-form__helper-text" aria-live="polite">${
t`Click to change value`
}</p>` : html``}
${this.invalid ? html`<p class="pf-c-form__helper-text pf-m-error" aria-live="polite">${this.errorMessage}</p>` : html``}
${this.writeOnly
? html`<p class="pf-c-form__helper-text" aria-live="polite">
${t`Click to change value`}
</p>`
: html``}
${this.invalid
? html`<p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
${this.errorMessage}
</p>`
: html``}
</div>
</div>
</div>`;
}
}

60
web/src/elements/forms/ModalForm.ts
View File

@ -7,11 +7,10 @@ import "../buttons/SpinnerButton";
@customElement("ak-forms-modal")
export class ModalForm extends ModalButton {
@property({ type: Boolean })
closeAfterSuccessfulSubmit = true;
confirm(): Promise<void> {
confirm(): Promise<void> {
const form = this.querySelector<Form<unknown>>("[slot=form]");
if (!form) {
return Promise.reject(t`No form found`);
@ -29,39 +28,40 @@ export class ModalForm extends ModalButton {
new CustomEvent(EVENT_REFRESH, {
bubbles: true,
composed: true,
})
}),
);
});
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot>
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<slot name="form"></slot>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm();
}}
class="pf-m-primary">
<slot name="submit"></slot>
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.resetForms();
this.open = false;
}}
class="pf-m-secondary">
${t`Cancel`}
</ak-spinner-button>
</footer>`;
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
<slot name="header"></slot>
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">
<slot name="form"></slot>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm();
}}
class="pf-m-primary"
>
<slot name="submit"></slot> </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.resetForms();
this.open = false;
}}
class="pf-m-secondary"
>
${t`Cancel`}
</ak-spinner-button>
</footer>`;
}
}

8
web/src/elements/forms/ModelForm.ts
View File

@ -3,14 +3,13 @@ import { EVENT_REFRESH } from "../../constants";
import { Form } from "./Form";
export abstract class ModelForm<T, PKT extends string | number> extends Form<T> {
abstract loadInstance(pk: PKT): Promise<T>;
@property({attribute: false})
@property({ attribute: false })
set instancePk(value: PKT) {
this._instancePk = value;
if (this.isInViewport) {
this.loadInstance(value).then(instance => {
this.loadInstance(value).then((instance) => {
this.instance = instance;
this.requestUpdate();
});
@ -32,7 +31,7 @@ export abstract class ModelForm<T, PKT extends string | number> extends Form<T>
super();
this.addEventListener(EVENT_REFRESH, () => {
if (!this._instancePk) return;
this.loadInstance(this._instancePk).then(instance => {
this.loadInstance(this._instancePk).then((instance) => {
this.instance = instance;
});
});
@ -51,5 +50,4 @@ export abstract class ModelForm<T, PKT extends string | number> extends Form<T>
}
return super.render();
}
}

6
web/src/elements/forms/ProxyForm.ts
View File

@ -3,14 +3,13 @@ import { Form } from "./Form";
@customElement("ak-proxy-form")
export class ProxyForm extends Form<unknown> {
@property()
type!: string;
@property({attribute: false})
@property({ attribute: false })
args: Record<string, unknown> = {};
@property({attribute: false})
@property({ attribute: false })
typeMap: Record<string, string> = {};
submit(ev: Event): Promise<unknown> | undefined {
@ -43,5 +42,4 @@ export class ProxyForm extends Form<unknown> {
}
return html`${el}`;
}
}