FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added custom forms to pages

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-05 22:14:32 +02:00
parent 0c6930c993
commit 110ea53f76
3 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/app-form/AppFormElement.ts
View File

@@ -2,7 +2,7 @@ import { attr, controller, target } from "@github/catalyst";
import { html, TemplateResult, unsafeHTML } from "@github/jtml"; import { html, TemplateResult, unsafeHTML } from "@github/jtml";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { InputFieldElement } from "components/input-field/InputFieldElement"; import { InputFieldElement } from "components/input-field/InputFieldElement";
import { querys } from "core/utils"; import { isTrue, querys } from "core/utils";
@controller @controller
class AppFormElement extends BaseComponentElement { class AppFormElement extends BaseComponentElement {
@@ -10,6 +10,7 @@ class AppFormElement extends BaseComponentElement {
@target innerSlot: HTMLElement; @target innerSlot: HTMLElement;
@querys inputField: NodeListOf<InputFieldElement>; @querys inputField: NodeListOf<InputFieldElement>;
@attr custom: string; @attr custom: string;
@attr hasCancel: string;
slotted: any; slotted: any;
isValid: boolean = false; isValid: boolean = false;
error: string; error: string;
@@ -63,7 +64,14 @@ class AppFormElement extends BaseComponentElement {
public goBack = (e) => { public goBack = (e) => {
e.preventDefault(); e.preventDefault();
this.routerService?.goBack();
if (this.appMain?.appModal) {
this.appMain?.closeModal?.();
} else if (this.routerService?.canGoBack) {
this.routerService?.goBack();
} else {
this.routerService?.goTo("/");
}
}; };
get valid() { get valid() {
@@ -99,13 +107,16 @@ class AppFormElement extends BaseComponentElement {
} }
return html``; return html``;
}; };
const renderCancel = () => { const renderCancel = (hasCancel: boolean) => {
return html`<button if (hasCancel) {
type="button" return html`<button
data-action="click:app-form#goBack" type="button"
> data-action="click:app-form#goBack"
Cancel >
</button>`; Cancel
</button>`;
}
return html``;
}; };
return html`<form return html`<form
@@ -115,7 +126,7 @@ class AppFormElement extends BaseComponentElement {
<slot data-target="app-form.innerSlot"></slot> <slot data-target="app-form.innerSlot"></slot>
${renderError(this.error)}${renderSubmit( ${renderError(this.error)}${renderSubmit(
this.isValid this.isValid
)}${renderCancel()} )}${renderCancel(isTrue(this.hasCancel))}
</form>`; </form>`;
}; };
} }

13
src/pages/register-page/RegisterPageElement.ts
View File

@@ -51,7 +51,10 @@ class RegisterPageElement extends BasePageElement {
render = (): TemplateResult => { render = (): TemplateResult => {
return html` return html`
<form> <app-form
data-custom="register-page#onSubmit"
data-has-cancel="true"
>
<input-field <input-field
data-type="text" data-type="text"
data-name="username" data-name="username"
@@ -74,13 +77,7 @@ class RegisterPageElement extends BasePageElement {
data-rules="required" data-rules="required"
> >
</input-field> </input-field>
<button </app-form>
type="button"
data-action="click:register-page#onSubmit"
>
Register
</button>
</form>
`; `;
}; };
} }

13
src/pages/wallet-create/WalletCreateElement.ts
View File

@@ -68,7 +68,10 @@ class WalletCreateElement extends BasePageElement {
render = (): TemplateResult => { render = (): TemplateResult => {
return html` return html`
<div>Create wallet</div> <div>Create wallet</div>
<form> <app-form
data-custom="wallet-create#onSubmit"
data-has-cancel="true"
>
<input-field <input-field
data-type="text" data-type="text"
data-name="name" data-name="name"
@@ -79,13 +82,7 @@ class WalletCreateElement extends BasePageElement {
${this.errorMessage ${this.errorMessage
? html`<div>${this.errorMessage}</div>` ? html`<div>${this.errorMessage}</div>`
: html``} : html``}
<button </app-form>
type="button"
data-action="click:wallet-create#onSubmit"
>
Create
</button>
</form>
`; `;
}; };
} }