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

fixed page and table loaders

Browse Source
This commit is contained in:
Fran Jurmanović
2021-07-04 14:15:57 +02:00
parent 0b7d8af32b
commit 0e23b10bef
7 changed files with 116 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@ class AppFormElement extends BaseComponentElement {
};
public onSubmit = (e) => {
e.preventDefault();
//e.preventDefault();
if (!this.isValid) {
return;
}
@@ -135,7 +135,13 @@ class AppFormElement extends BaseComponentElement {
return html`
<div class="app-form">
<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
<form
app-action="submit:app-form#onSubmit"
data-target="app-form.formElement"
autocomplete="on"
method="POST"
action="javascript:void(0)"
>
${this.renderInput ? this.customRender() : html`<slot data-target="app-form.innerSlot"></slot>`}
${renderError(this.error)}
<div class="form-buttons">

4
src/components/app-loader/AppLoaderElement.ts
View File

@@ -51,7 +51,9 @@ class AppLoaderElement extends BaseComponentElement {
}
return html``;
};
return html`${renderLoader(this.finished, this.loading)}`;
return html`<div class="loader-wrapper">
<div class="loader-relative">${renderLoader(this.finished, this.loading)}</div>
</div>`;
};
}

37
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -142,18 +142,28 @@ class AppPaginationElement extends BaseComponentElement {
<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
<div class="--footer">
<span class="--pages">Page ${page} of ${pageRange}</span>
<button
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
app-action="click:app-pagination#pageBack"
>
Prev
</button>
<button
class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
app-action="click:app-pagination#pageNext"
>
Next
</button>
${page <= 1 || this.loader.loading
? html` <button
class="btn btn-primary btn-squared disabled"
disabled
app-action="click:app-pagination#pageBack"
>
Prev
</button>`
: html` <button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageBack">
Prev
</button>`}
${page >= pageRange || this.loader.loading
? html` <button
class="btn btn-primary btn-squared disabled"
disabled
app-action="click:app-pagination#pageNext"
>
Next
</button>`
: html`<button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageNext">
Next
</button>`}
</div>
</div>
`;
@@ -161,9 +171,10 @@ class AppPaginationElement extends BaseComponentElement {
};
return html`<div class="app-pagination">
<table class="${this.tableLayout}">
<table class="${this.tableLayout} ${this.loader && this.loader.loading ? '--loading' : ''}">
${renderItems()} ${renderPagination()}
</table>
${this.loader && this.loader.loading ? html`<circle-loader></circle-loader>` : html``}
</div>`;
};
}

16
src/components/input-field/InputFieldElement.ts
View File

@@ -33,7 +33,7 @@ class InputFieldElement extends BaseComponentElement {
this.validator = new Validator(this, this.appForm, this.rules);
this.randId = `${name}${randomId()}`;
this.update();
this.validate();
//this.validate();
};
setError = (error) => {
@@ -83,11 +83,12 @@ class InputFieldElement extends BaseComponentElement {
if (!this.changed && e?.target?.value) {
this.changed = true;
}
this.validate();
//this.validate();
this.appForm?.inputChange(e);
};
render = (): TemplateResult => {
console.log('e');
const renderMessage = (label: string) => {
if (this.label) {
return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
@@ -105,19 +106,20 @@ class InputFieldElement extends BaseComponentElement {
const renderInput = (type) => {
if (this.pattern) {
return html` <input
name="${this.name}"
autocomplete="${this.name}"
type="${this.type}"
pattern="${this.pattern}"
step="0.01"
data-target="input-field.inp"
id="${this.randId}"
app-action="
input:input-field#inputChange
blur:input-field#validateDisplay
${this.customAction ? this.customAction : ''}
"
app-action=" input:input-field#inputChange blur:input-field#validateDisplay
${this.customAction ? this.customAction : ''} "
/>`;
}
return html` <input
name="${this.name}"
autocomplete="${this.name}"
type="${this.type}"
data-target="input-field.inp"
id="${this.randId}"