mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-11-11 07:41:09 +00:00
formatted files
This commit is contained in:
Fran Jurmanović
@@ -1,241 +1,213 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { findMethod, firstUpper } from "core/utils";
|
||||
import { html } from "lit-html";
|
||||
import randomId from "core/utils/random-id";
|
||||
import validator from "validator";
|
||||
import { validatorErrors } from "core/constants";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { findMethod, firstUpper } from 'core/utils';
|
||||
import { html } from 'lit-html';
|
||||
import randomId from 'core/utils/random-id';
|
||||
import validator from 'validator';
|
||||
import { validatorErrors } from 'core/constants';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class AppDropdownElement extends BaseComponentElement {
|
||||
@attr name: string;
|
||||
@attr label: string;
|
||||
@attr rules: string;
|
||||
@target main: HTMLElement;
|
||||
@target inp: HTMLElement;
|
||||
@attr displaykey: string = "name";
|
||||
@attr valuekey: string = "id";
|
||||
@attr fetch: string;
|
||||
fetchFunc: any;
|
||||
@attr name: string;
|
||||
@attr label: string;
|
||||
@attr rules: string;
|
||||
@target main: HTMLElement;
|
||||
@target inp: HTMLElement;
|
||||
@attr displaykey: string = 'name';
|
||||
@attr valuekey: string = 'id';
|
||||
@attr fetch: string;
|
||||
fetchFunc: any;
|
||||
|
||||
error: boolean;
|
||||
errorMessage: string;
|
||||
error: boolean;
|
||||
errorMessage: string;
|
||||
|
||||
searchPhrase: string;
|
||||
searchPhrase: string;
|
||||
|
||||
randId: string;
|
||||
value: string;
|
||||
randId: string;
|
||||
value: string;
|
||||
|
||||
@attr isOpen: boolean = false;
|
||||
@attr isOpen: boolean = false;
|
||||
|
||||
items: Array<any>;
|
||||
totalItems: number;
|
||||
page: number = 1;
|
||||
rpp: number = 30;
|
||||
items: Array<any>;
|
||||
totalItems: number;
|
||||
page: number = 1;
|
||||
rpp: number = 30;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
getItems = async (options?: any): Promise<void> => {
|
||||
if (typeof this.fetchFunc !== "function") return;
|
||||
try {
|
||||
const response = await this.fetchFunc(options);
|
||||
this.setItems(response);
|
||||
} catch (err) {
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
getItems = async (options?: any): Promise<void> => {
|
||||
if (typeof this.fetchFunc !== 'function') return;
|
||||
try {
|
||||
const response = await this.fetchFunc(options);
|
||||
this.setItems(response);
|
||||
} catch (err) {
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
|
||||
setItems = (response): void => {
|
||||
if (response) {
|
||||
let items = [];
|
||||
if (Array.isArray(response)) {
|
||||
items = response;
|
||||
} else if (Array.isArray(response.items)) {
|
||||
items = response.items;
|
||||
this.totalItems = response?.totalRecords;
|
||||
} else {
|
||||
items = [];
|
||||
}
|
||||
this.items = items;
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
setItems = (response): void => {
|
||||
if (response) {
|
||||
let items = [];
|
||||
if (Array.isArray(response)) {
|
||||
items = response;
|
||||
} else if (Array.isArray(response.items)) {
|
||||
items = response.items;
|
||||
this.totalItems = response?.totalRecords;
|
||||
} else {
|
||||
items = [];
|
||||
}
|
||||
this.items = items;
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
|
||||
get selectedItem() {
|
||||
const { value, valuekey, items } = this;
|
||||
const item = items?.find((item) => {
|
||||
return value == item[valuekey];
|
||||
});
|
||||
get selectedItem() {
|
||||
const { value, valuekey, items } = this;
|
||||
const item = items?.find((item) => {
|
||||
return value == item[valuekey];
|
||||
});
|
||||
|
||||
console.log(item, value, valuekey);
|
||||
console.log(item, value, valuekey);
|
||||
|
||||
return item;
|
||||
}
|
||||
return item;
|
||||
}
|
||||
|
||||
get optionValues() {
|
||||
let values = [];
|
||||
this.inp.childNodes.forEach((item: HTMLElement) => {
|
||||
const value = item.getAttribute("value");
|
||||
const name = item.innerText;
|
||||
values.push({ name, value });
|
||||
});
|
||||
return values;
|
||||
}
|
||||
get optionValues() {
|
||||
let values = [];
|
||||
this.inp.childNodes.forEach((item: HTMLElement) => {
|
||||
const value = item.getAttribute('value');
|
||||
const name = item.innerText;
|
||||
values.push({ name, value });
|
||||
});
|
||||
return values;
|
||||
}
|
||||
|
||||
public elementConnected = (): void => {
|
||||
this.randId = `${name}${randomId()}`;
|
||||
this.fetchFunc = findMethod(this.fetch, this.appMain);
|
||||
this.update();
|
||||
public elementConnected = (): void => {
|
||||
this.randId = `${name}${randomId()}`;
|
||||
this.fetchFunc = findMethod(this.fetch, this.appMain);
|
||||
this.update();
|
||||
|
||||
const options = {
|
||||
rpp: this.rpp,
|
||||
page: this.page,
|
||||
};
|
||||
this.getItems(options);
|
||||
};
|
||||
const options = {
|
||||
rpp: this.rpp,
|
||||
page: this.page,
|
||||
};
|
||||
this.getItems(options);
|
||||
};
|
||||
|
||||
attributeChangedCallback(): void {
|
||||
this.update();
|
||||
}
|
||||
attributeChangedCallback(): void {
|
||||
this.update();
|
||||
}
|
||||
|
||||
get valid(): boolean {
|
||||
return !!this.error;
|
||||
}
|
||||
get valid(): boolean {
|
||||
return !!this.error;
|
||||
}
|
||||
|
||||
get required(): boolean {
|
||||
return this.rules.includes("required");
|
||||
}
|
||||
get required(): boolean {
|
||||
return this.rules.includes('required');
|
||||
}
|
||||
|
||||
validate(): boolean {
|
||||
let _return = true;
|
||||
const rules = this.rules?.split("|").filter((a) => a);
|
||||
const value = (this.inp as HTMLSelectElement)?.value;
|
||||
rules
|
||||
.slice()
|
||||
.reverse()
|
||||
.forEach((rule) => {
|
||||
let valid = true;
|
||||
if (rule == "required") {
|
||||
if (value === "") valid = false;
|
||||
} else {
|
||||
if (validator.hasOwnProperty(rule)) {
|
||||
valid = validator?.[rule]?.(value);
|
||||
}
|
||||
}
|
||||
if (!valid) {
|
||||
const error = validatorErrors[rule]?.replaceAll(
|
||||
"{- name}",
|
||||
firstUpper(this.name?.toString())
|
||||
);
|
||||
_return = false;
|
||||
this.error = error;
|
||||
}
|
||||
});
|
||||
if (_return) {
|
||||
this.error = null;
|
||||
}
|
||||
this.update();
|
||||
return _return;
|
||||
}
|
||||
validate(): boolean {
|
||||
let _return = true;
|
||||
const rules = this.rules?.split('|').filter((a) => a);
|
||||
const value = (this.inp as HTMLSelectElement)?.value;
|
||||
rules
|
||||
.slice()
|
||||
.reverse()
|
||||
.forEach((rule) => {
|
||||
let valid = true;
|
||||
if (rule == 'required') {
|
||||
if (value === '') valid = false;
|
||||
} else {
|
||||
if (validator.hasOwnProperty(rule)) {
|
||||
valid = validator?.[rule]?.(value);
|
||||
}
|
||||
}
|
||||
if (!valid) {
|
||||
const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
|
||||
_return = false;
|
||||
this.error = error;
|
||||
}
|
||||
});
|
||||
if (_return) {
|
||||
this.error = null;
|
||||
}
|
||||
this.update();
|
||||
return _return;
|
||||
}
|
||||
|
||||
openDropdown = () => {
|
||||
this.isOpen = true;
|
||||
};
|
||||
openDropdown = () => {
|
||||
this.isOpen = true;
|
||||
};
|
||||
|
||||
stopPropagation = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
stopPropagation = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
toggleDropdown = () => {
|
||||
const isOpen = this.isOpen;
|
||||
this.isOpen = !isOpen;
|
||||
};
|
||||
toggleDropdown = () => {
|
||||
const isOpen = this.isOpen;
|
||||
this.isOpen = !isOpen;
|
||||
};
|
||||
|
||||
itemSelected = (e) => {
|
||||
const value = (e.target as HTMLSpanElement).getAttribute("data-value");
|
||||
this.value = value;
|
||||
this.isOpen = false;
|
||||
};
|
||||
itemSelected = (e) => {
|
||||
const value = (e.target as HTMLSpanElement).getAttribute('data-value');
|
||||
this.value = value;
|
||||
this.isOpen = false;
|
||||
};
|
||||
|
||||
get _value() {
|
||||
return this.value;
|
||||
}
|
||||
get _value() {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const {
|
||||
label,
|
||||
error,
|
||||
errorMessage,
|
||||
isOpen,
|
||||
searchPhrase,
|
||||
items,
|
||||
selectedItem,
|
||||
displaykey,
|
||||
valuekey,
|
||||
} = this;
|
||||
render = () => {
|
||||
const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
|
||||
|
||||
console.log(isOpen);
|
||||
console.log(isOpen);
|
||||
|
||||
const renderItem = (item) => {
|
||||
return html` <li
|
||||
class="dropdown-custom-listitem ${selectedItem?.[valuekey] ==
|
||||
item[valuekey]
|
||||
? "--selected"
|
||||
: ""}"
|
||||
app-action="click:app-dropdown#itemSelected"
|
||||
data-value="${item[valuekey]}"
|
||||
>
|
||||
${item[displaykey]}
|
||||
</li>`;
|
||||
};
|
||||
const renderItem = (item) => {
|
||||
return html` <li
|
||||
class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
|
||||
app-action="click:app-dropdown#itemSelected"
|
||||
data-value="${item[valuekey]}"
|
||||
>
|
||||
${item[displaykey]}
|
||||
</li>`;
|
||||
};
|
||||
|
||||
const renderItems = (_items) => {
|
||||
return _items.map((item) => renderItem(item));
|
||||
};
|
||||
const renderItems = (_items) => {
|
||||
return _items.map((item) => renderItem(item));
|
||||
};
|
||||
|
||||
return html`
|
||||
<div>
|
||||
<label app-action="click:app-dropdown#openDropdown">
|
||||
${label ? html`<div>${label}</div>` : html``}
|
||||
<div
|
||||
class="dropdown-custom"
|
||||
app-action="click:app-dropdown#stopPropagation"
|
||||
>
|
||||
<div
|
||||
class="dropdown-custom-top"
|
||||
app-action="click:app-dropdown#toggleDropdown"
|
||||
>
|
||||
<span class="dropdown-custom-fieldname"
|
||||
>${selectedItem
|
||||
? selectedItem[displaykey]
|
||||
: "Select"}</span
|
||||
>
|
||||
</div>
|
||||
${isOpen
|
||||
? html`
|
||||
<div class="dropdown-custom-open">
|
||||
<input
|
||||
class="dropdown-custom-search"
|
||||
type="text"
|
||||
value="${searchPhrase}"
|
||||
app-action="input:app-dropdown#phraseChange"
|
||||
autofocus
|
||||
/>
|
||||
<ul class="dropdown-custom-list">
|
||||
${renderItems(items)}
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
${error
|
||||
? html` <div class="h5 text-red">${errorMessage}</div>`
|
||||
: html``}
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
return html`
|
||||
<div>
|
||||
<label app-action="click:app-dropdown#openDropdown">
|
||||
${label ? html`<div>${label}</div>` : html``}
|
||||
<div class="dropdown-custom" app-action="click:app-dropdown#stopPropagation">
|
||||
<div class="dropdown-custom-top" app-action="click:app-dropdown#toggleDropdown">
|
||||
<span class="dropdown-custom-fieldname">${selectedItem ? selectedItem[displaykey] : 'Select'}</span>
|
||||
</div>
|
||||
${isOpen
|
||||
? html`
|
||||
<div class="dropdown-custom-open">
|
||||
<input
|
||||
class="dropdown-custom-search"
|
||||
type="text"
|
||||
value="${searchPhrase}"
|
||||
app-action="input:app-dropdown#phraseChange"
|
||||
autofocus
|
||||
/>
|
||||
<ul class="dropdown-custom-list">
|
||||
${renderItems(items)}
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
${error ? html` <div class="h5 text-red">${errorMessage}</div>` : html``}
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppDropdownElement };
|
||||
|
||||
@@ -1,135 +1,125 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { html, TemplateResult, unsafeHTML } from "lit-html";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { AppDropdownElement } from "components/app-dropdown/AppDropdownElement";
|
||||
import { InputFieldElement } from "components/input-field/InputFieldElement";
|
||||
import { findMethod, isTrue, querys } from "core/utils";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { html, TemplateResult, unsafeHTML } from 'lit-html';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
|
||||
import { InputFieldElement } from 'components/input-field/InputFieldElement';
|
||||
import { findMethod, isTrue, querys } from 'core/utils';
|
||||
|
||||
@controller
|
||||
class AppFormElement extends BaseComponentElement {
|
||||
@target formElement: HTMLElement;
|
||||
@target innerSlot: HTMLElement;
|
||||
@querys inputField: NodeListOf<InputFieldElement>;
|
||||
@querys appDropdown: NodeListOf<AppDropdownElement>;
|
||||
@attr custom: string;
|
||||
@attr hasCancel: string;
|
||||
slotted: any;
|
||||
isValid: boolean = false;
|
||||
error: string;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@target formElement: HTMLElement;
|
||||
@target innerSlot: HTMLElement;
|
||||
@querys inputField: NodeListOf<InputFieldElement>;
|
||||
@querys appDropdown: NodeListOf<AppDropdownElement>;
|
||||
@attr custom: string;
|
||||
@attr hasCancel: string;
|
||||
slotted: any;
|
||||
isValid: boolean = false;
|
||||
error: string;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public inputChange = (e) => {
|
||||
this.validate();
|
||||
this.update();
|
||||
};
|
||||
public inputChange = (e) => {
|
||||
this.validate();
|
||||
this.update();
|
||||
};
|
||||
|
||||
public onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!this.valid) {
|
||||
return;
|
||||
}
|
||||
const actionString = this.custom;
|
||||
const submitFunc = findMethod(actionString, this.appMain);
|
||||
submitFunc?.(this.values);
|
||||
return false;
|
||||
};
|
||||
public onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!this.valid) {
|
||||
return;
|
||||
}
|
||||
const actionString = this.custom;
|
||||
const submitFunc = findMethod(actionString, this.appMain);
|
||||
submitFunc?.(this.values);
|
||||
return false;
|
||||
};
|
||||
|
||||
public validate = () => {
|
||||
this.isValid = true;
|
||||
this.inputField?.forEach((input) => {
|
||||
if (input?.error) {
|
||||
this.isValid = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
public validate = () => {
|
||||
this.isValid = true;
|
||||
this.inputField?.forEach((input) => {
|
||||
if (input?.error) {
|
||||
this.isValid = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
public setError = (error) => {
|
||||
this.error = error;
|
||||
this.update();
|
||||
};
|
||||
public setError = (error) => {
|
||||
this.error = error;
|
||||
this.update();
|
||||
};
|
||||
|
||||
public goBack = (e) => {
|
||||
e.preventDefault();
|
||||
public goBack = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.appMain?.appModal) {
|
||||
this.appMain?.closeModal?.();
|
||||
} else if (this.routerService?.canGoBack) {
|
||||
this.routerService?.goBack();
|
||||
} else {
|
||||
this.routerService?.goTo("/");
|
||||
}
|
||||
};
|
||||
if (this.appMain?.appModal) {
|
||||
this.appMain?.closeModal?.();
|
||||
} else if (this.routerService?.canGoBack) {
|
||||
this.routerService?.goBack();
|
||||
} else {
|
||||
this.routerService?.goTo('/');
|
||||
}
|
||||
};
|
||||
|
||||
get values(): any {
|
||||
const formObject: any = {};
|
||||
this.inputField.forEach((input: InputFieldElement) => {
|
||||
formObject[input.name] = input._value;
|
||||
});
|
||||
this.appDropdown?.forEach((input: AppDropdownElement) => {
|
||||
if (input.required && input.value) {
|
||||
formObject[input.name] = input._value;
|
||||
}
|
||||
});
|
||||
return formObject;
|
||||
}
|
||||
get values(): any {
|
||||
const formObject: any = {};
|
||||
this.inputField.forEach((input: InputFieldElement) => {
|
||||
formObject[input.name] = input._value;
|
||||
});
|
||||
this.appDropdown?.forEach((input: AppDropdownElement) => {
|
||||
if (input.required && input.value) {
|
||||
formObject[input.name] = input._value;
|
||||
}
|
||||
});
|
||||
return formObject;
|
||||
}
|
||||
|
||||
get valid() {
|
||||
let _valid = 0;
|
||||
this.inputField?.forEach((input) => {
|
||||
if (input.required && (input.inp as HTMLSelectElement).value) {
|
||||
_valid++;
|
||||
}
|
||||
});
|
||||
return _valid == this.inputField?.length;
|
||||
}
|
||||
get valid() {
|
||||
let _valid = 0;
|
||||
this.inputField?.forEach((input) => {
|
||||
if (input.required && (input.inp as HTMLSelectElement).value) {
|
||||
_valid++;
|
||||
}
|
||||
});
|
||||
return _valid == this.inputField?.length;
|
||||
}
|
||||
|
||||
elementConnected = (): void => {
|
||||
const _template = document.createElement("template");
|
||||
const _slot = this.innerHTML;
|
||||
_template.innerHTML = _slot;
|
||||
this.innerHTML = null;
|
||||
this.update();
|
||||
elementConnected = (): void => {
|
||||
const _template = document.createElement('template');
|
||||
const _slot = this.innerHTML;
|
||||
_template.innerHTML = _slot;
|
||||
this.innerHTML = null;
|
||||
this.update();
|
||||
|
||||
this.formElement.replaceChild(_template.content, this.innerSlot);
|
||||
};
|
||||
this.formElement.replaceChild(_template.content, this.innerSlot);
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const renderSubmit = (valid: boolean) => {
|
||||
if (!valid) {
|
||||
return html` <button type="submit" disabled>Submit</button> `;
|
||||
}
|
||||
return html` <button type="submit">Submit</button> `;
|
||||
};
|
||||
const renderError = (error: string) => {
|
||||
if (error) {
|
||||
return html`<span>${error}</span>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const renderCancel = (hasCancel: boolean) => {
|
||||
if (hasCancel) {
|
||||
return html`<button
|
||||
type="button"
|
||||
app-action="click:app-form#goBack"
|
||||
>
|
||||
Cancel
|
||||
</button>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
render = (): TemplateResult => {
|
||||
const renderSubmit = (valid: boolean) => {
|
||||
if (!valid) {
|
||||
return html` <button type="submit" disabled>Submit</button> `;
|
||||
}
|
||||
return html` <button type="submit">Submit</button> `;
|
||||
};
|
||||
const renderError = (error: string) => {
|
||||
if (error) {
|
||||
return html`<span>${error}</span>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const renderCancel = (hasCancel: boolean) => {
|
||||
if (hasCancel) {
|
||||
return html`<button type="button" app-action="click:app-form#goBack">Cancel</button>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
|
||||
return html`<form
|
||||
app-action="submit:app-form#onSubmit"
|
||||
data-target="app-form.formElement"
|
||||
>
|
||||
<slot data-target="app-form.innerSlot"></slot>
|
||||
${renderError(this.error)}${renderSubmit(
|
||||
this.isValid
|
||||
)}${renderCancel(isTrue(this.hasCancel))}
|
||||
</form>`;
|
||||
};
|
||||
return html`<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
|
||||
<slot data-target="app-form.innerSlot"></slot>
|
||||
${renderError(this.error)}${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}
|
||||
</form>`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppFormElement };
|
||||
|
||||
@@ -1,72 +1,67 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { isTrue } from "core/utils";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { AppMainElement } from "components/app-main/AppMainElement";
|
||||
import { RouterService } from "core/services";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { isTrue } from 'core/utils';
|
||||
import { html, TemplateResult } from 'lit-html';
|
||||
import { AppMainElement } from 'components/app-main/AppMainElement';
|
||||
import { RouterService } from 'core/services';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class AppLinkElement extends BaseComponentElement {
|
||||
@attr to: string;
|
||||
@attr goBack: string;
|
||||
@attr title: string;
|
||||
@target main: Element;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@attr to: string;
|
||||
@attr goBack: string;
|
||||
@attr title: string;
|
||||
@target main: Element;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {
|
||||
if (!this.title && this.innerText) {
|
||||
const _slottedText = this.innerText;
|
||||
this.innerText = null;
|
||||
this.title = _slottedText;
|
||||
}
|
||||
this.update();
|
||||
if (isTrue(this.goBack)) {
|
||||
this.appMain.addEventListener("routechanged", this.update);
|
||||
}
|
||||
};
|
||||
elementConnected = (): void => {
|
||||
if (!this.title && this.innerText) {
|
||||
const _slottedText = this.innerText;
|
||||
this.innerText = null;
|
||||
this.title = _slottedText;
|
||||
}
|
||||
this.update();
|
||||
if (isTrue(this.goBack)) {
|
||||
this.appMain.addEventListener('routechanged', this.update);
|
||||
}
|
||||
};
|
||||
|
||||
elementDisconnected = (appMain: AppMainElement): void => {
|
||||
if (isTrue(this.goBack)) {
|
||||
appMain?.removeEventListener("routechanged", this.update);
|
||||
}
|
||||
};
|
||||
elementDisconnected = (appMain: AppMainElement): void => {
|
||||
if (isTrue(this.goBack)) {
|
||||
appMain?.removeEventListener('routechanged', this.update);
|
||||
}
|
||||
};
|
||||
|
||||
goTo = (e: Event): void => {
|
||||
e.preventDefault();
|
||||
if (!isTrue(this.goBack) && this.to) {
|
||||
this.routerService.goTo(this.to);
|
||||
} else {
|
||||
this.routerService.goBack();
|
||||
}
|
||||
this.update();
|
||||
};
|
||||
goTo = (e: Event): void => {
|
||||
e.preventDefault();
|
||||
if (!isTrue(this.goBack) && this.to) {
|
||||
this.routerService.goTo(this.to);
|
||||
} else {
|
||||
this.routerService.goBack();
|
||||
}
|
||||
this.update();
|
||||
};
|
||||
|
||||
get disabled(): boolean {
|
||||
if (isTrue(this.goBack)) {
|
||||
return this.routerService.emptyState;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
get disabled(): boolean {
|
||||
if (isTrue(this.goBack)) {
|
||||
return this.routerService.emptyState;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
render = (): TemplateResult => {
|
||||
return html`${this.disabled
|
||||
? html`<a
|
||||
class="btn btn-link btn-disabled"
|
||||
data-target="app-link.main"
|
||||
style="color:grey"
|
||||
>${this.title}</a
|
||||
>`
|
||||
: html`<a
|
||||
class="btn btn-link"
|
||||
data-target="app-link.main"
|
||||
app-action="click:app-link#goTo"
|
||||
href="${this.to}"
|
||||
style="text-decoration: underline; cursor: pointer;"
|
||||
>${this.title}</a
|
||||
>`}`;
|
||||
};
|
||||
render = (): TemplateResult => {
|
||||
return html`${this.disabled
|
||||
? html`<a class="btn btn-link btn-disabled" data-target="app-link.main" style="color:grey">${this.title}</a>`
|
||||
: html`<a
|
||||
class="btn btn-link"
|
||||
data-target="app-link.main"
|
||||
app-action="click:app-link#goTo"
|
||||
href="${this.to}"
|
||||
style="text-decoration: underline; cursor: pointer;"
|
||||
>${this.title}</a
|
||||
>`}`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppLinkElement };
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
import { controller, target } from "@github/catalyst";
|
||||
import { html } from "lit-html";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { controller, target } from '@github/catalyst';
|
||||
import { html } from 'lit-html';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class AppLoaderElement extends BaseComponentElement {
|
||||
private finished: boolean = true;
|
||||
private _loading: number = 0;
|
||||
private finished: boolean = true;
|
||||
private _loading: number = 0;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public start = () => {
|
||||
this.finished = false;
|
||||
this._loading++;
|
||||
this.update();
|
||||
};
|
||||
public start = () => {
|
||||
this.finished = false;
|
||||
this._loading++;
|
||||
this.update();
|
||||
};
|
||||
|
||||
public stop = () => {
|
||||
if (this._loading > 0) {
|
||||
this._loading--;
|
||||
}
|
||||
if (this._loading == 0) {
|
||||
this.finishInitiate();
|
||||
}
|
||||
this.update();
|
||||
};
|
||||
public stop = () => {
|
||||
if (this._loading > 0) {
|
||||
this._loading--;
|
||||
}
|
||||
if (this._loading == 0) {
|
||||
this.finishInitiate();
|
||||
}
|
||||
this.update();
|
||||
};
|
||||
|
||||
public get loading() {
|
||||
return this._loading > 0;
|
||||
}
|
||||
public get loading() {
|
||||
return this._loading > 0;
|
||||
}
|
||||
|
||||
private finishInitiate = () => {
|
||||
setTimeout(() => {
|
||||
this.finished = true;
|
||||
this.update();
|
||||
}, 300);
|
||||
};
|
||||
private finishInitiate = () => {
|
||||
setTimeout(() => {
|
||||
this.finished = true;
|
||||
this.update();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
elementConnected = (): void => {
|
||||
this.update();
|
||||
};
|
||||
elementConnected = (): void => {
|
||||
this.update();
|
||||
};
|
||||
|
||||
render = () => {
|
||||
const renderLoader = (finished: boolean, loading: boolean) => {
|
||||
if (!finished && !loading) {
|
||||
return html`<div class="loader --removing"></div>`;
|
||||
} else if (loading) {
|
||||
return html`<div class="loader --loading"></div>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
return html`${renderLoader(this.finished, this.loading)}`;
|
||||
};
|
||||
render = () => {
|
||||
const renderLoader = (finished: boolean, loading: boolean) => {
|
||||
if (!finished && !loading) {
|
||||
return html`<div class="loader --removing"></div>`;
|
||||
} else if (loading) {
|
||||
return html`<div class="loader --loading"></div>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
return html`${renderLoader(this.finished, this.loading)}`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppLoaderElement };
|
||||
|
||||
@@ -1,185 +1,185 @@
|
||||
import { controller, target } from "@github/catalyst";
|
||||
import { AppService, HttpClient, RouterService } from "core/services";
|
||||
import { AuthStore } from "core/store";
|
||||
import { AppModalElement, AppRootElement } from "components/";
|
||||
import { closest } from "core/utils";
|
||||
import { AppLoaderElement } from "components/app-loader/AppLoaderElement";
|
||||
import { controller, target } from '@github/catalyst';
|
||||
import { AppService, HttpClient, RouterService } from 'core/services';
|
||||
import { AuthStore } from 'core/store';
|
||||
import { AppModalElement, AppRootElement } from 'components/';
|
||||
import { closest } from 'core/utils';
|
||||
import { AppLoaderElement } from 'components/app-loader/AppLoaderElement';
|
||||
|
||||
@controller
|
||||
class AppMainElement extends HTMLElement {
|
||||
public routerService: RouterService;
|
||||
public authStore: AuthStore;
|
||||
private httpClient: HttpClient;
|
||||
public appService: AppService;
|
||||
@target appModal: AppModalElement;
|
||||
@target mainRoot: AppRootElement;
|
||||
@target appLoader: AppLoaderElement;
|
||||
@closest appMain: AppMainElement;
|
||||
public domEvents: any = {
|
||||
routechanged: new Event("routechanged"),
|
||||
tokenchange: new Event("tokenchange"),
|
||||
walletupdate: new Event("walletupdate"),
|
||||
};
|
||||
public routerService: RouterService;
|
||||
public authStore: AuthStore;
|
||||
private httpClient: HttpClient;
|
||||
public appService: AppService;
|
||||
@target appModal: AppModalElement;
|
||||
@target mainRoot: AppRootElement;
|
||||
@target appLoader: AppLoaderElement;
|
||||
@closest appMain: AppMainElement;
|
||||
public domEvents: any = {
|
||||
routechanged: new Event('routechanged'),
|
||||
tokenchange: new Event('tokenchange'),
|
||||
walletupdate: new Event('walletupdate'),
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
connectedCallback() {
|
||||
if (this.appMain !== this) return;
|
||||
this.createLoader();
|
||||
const mainRoot = this.createMainRoot();
|
||||
this.httpClient = new HttpClient();
|
||||
this.appService = new AppService(this, this.httpClient);
|
||||
this.routerService = new RouterService(this, mainRoot);
|
||||
this.authStore = new AuthStore(this, this.appService);
|
||||
this.routerService.setRoutes([
|
||||
{
|
||||
path: "/",
|
||||
component: "home-page",
|
||||
layout: "menu-layout",
|
||||
middleware: this.isAuth,
|
||||
},
|
||||
{
|
||||
path: "/home",
|
||||
component: "home-page",
|
||||
layout: "menu-layout",
|
||||
middleware: this.isAuth,
|
||||
},
|
||||
{
|
||||
path: "/history",
|
||||
component: "history-page",
|
||||
layout: "menu-layout",
|
||||
middleware: this.isAuth,
|
||||
},
|
||||
{
|
||||
path: "/wallet",
|
||||
component: "history-page",
|
||||
layout: "menu-layout",
|
||||
middleware: this.isAuth,
|
||||
children: [
|
||||
{
|
||||
path: "/all",
|
||||
component: "wallet-list",
|
||||
layout: "menu-layout",
|
||||
},
|
||||
{
|
||||
path: "/:walletId",
|
||||
component: "wallet-page",
|
||||
layout: "menu-layout",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
component: "register-page",
|
||||
layout: "initial-layout",
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
component: "login-page",
|
||||
layout: "initial-layout",
|
||||
},
|
||||
{
|
||||
path: "/unauthorized",
|
||||
component: "login-page",
|
||||
layout: "initial-layout",
|
||||
},
|
||||
{
|
||||
path: "/token-expired",
|
||||
component: "login-page",
|
||||
layout: "initial-layout",
|
||||
},
|
||||
{
|
||||
path: "/not-found",
|
||||
component: "not-found",
|
||||
layout: "initial-layout",
|
||||
},
|
||||
{
|
||||
path: "/logout",
|
||||
component: "logout-page",
|
||||
},
|
||||
]);
|
||||
this.routerService.init();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
connectedCallback() {
|
||||
if (this.appMain !== this) return;
|
||||
this.createLoader();
|
||||
const mainRoot = this.createMainRoot();
|
||||
this.httpClient = new HttpClient();
|
||||
this.appService = new AppService(this, this.httpClient);
|
||||
this.routerService = new RouterService(this, mainRoot);
|
||||
this.authStore = new AuthStore(this, this.appService);
|
||||
this.routerService.setRoutes([
|
||||
{
|
||||
path: '/',
|
||||
component: 'home-page',
|
||||
layout: 'menu-layout',
|
||||
middleware: this.isAuth,
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
component: 'home-page',
|
||||
layout: 'menu-layout',
|
||||
middleware: this.isAuth,
|
||||
},
|
||||
{
|
||||
path: '/history',
|
||||
component: 'history-page',
|
||||
layout: 'menu-layout',
|
||||
middleware: this.isAuth,
|
||||
},
|
||||
{
|
||||
path: '/wallet',
|
||||
component: 'history-page',
|
||||
layout: 'menu-layout',
|
||||
middleware: this.isAuth,
|
||||
children: [
|
||||
{
|
||||
path: '/all',
|
||||
component: 'wallet-list',
|
||||
layout: 'menu-layout',
|
||||
},
|
||||
{
|
||||
path: '/:walletId',
|
||||
component: 'wallet-page',
|
||||
layout: 'menu-layout',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
component: 'register-page',
|
||||
layout: 'initial-layout',
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: 'login-page',
|
||||
layout: 'initial-layout',
|
||||
},
|
||||
{
|
||||
path: '/unauthorized',
|
||||
component: 'login-page',
|
||||
layout: 'initial-layout',
|
||||
},
|
||||
{
|
||||
path: '/token-expired',
|
||||
component: 'login-page',
|
||||
layout: 'initial-layout',
|
||||
},
|
||||
{
|
||||
path: '/not-found',
|
||||
component: 'not-found',
|
||||
layout: 'initial-layout',
|
||||
},
|
||||
{
|
||||
path: '/logout',
|
||||
component: 'logout-page',
|
||||
},
|
||||
]);
|
||||
this.routerService.init();
|
||||
}
|
||||
|
||||
middleAuth = () => {
|
||||
if (!this.isAuth) {
|
||||
this.routerService.goTo("/unauthorized");
|
||||
return true;
|
||||
}
|
||||
};
|
||||
middleAuth = () => {
|
||||
if (!this.isAuth) {
|
||||
this.routerService.goTo('/unauthorized');
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
createModal = (element: string) => {
|
||||
this.closeModal();
|
||||
this.appMain.addEventListener("routechanged", this.closeModal);
|
||||
createModal = (element: string) => {
|
||||
this.closeModal();
|
||||
this.appMain.addEventListener('routechanged', this.closeModal);
|
||||
|
||||
const _appModal = this.createAppModal();
|
||||
const _modalContent = this.createModalContent(element);
|
||||
const _modalOverlay = this.createModalOverlay();
|
||||
const _appModal = this.createAppModal();
|
||||
const _modalContent = this.createModalContent(element);
|
||||
const _modalOverlay = this.createModalOverlay();
|
||||
|
||||
_modalOverlay.appendChild(_modalContent);
|
||||
_appModal.appendChild(_modalOverlay);
|
||||
this.appendChild(_appModal);
|
||||
};
|
||||
_modalOverlay.appendChild(_modalContent);
|
||||
_appModal.appendChild(_modalOverlay);
|
||||
this.appendChild(_appModal);
|
||||
};
|
||||
|
||||
public triggerWalletUpdate = () => {
|
||||
this.dispatchEvent(this.domEvents.walletupdate);
|
||||
};
|
||||
public triggerWalletUpdate = () => {
|
||||
this.dispatchEvent(this.domEvents.walletupdate);
|
||||
};
|
||||
|
||||
public setTitle = (title: string): void => {
|
||||
if (!title) title = __CONFIG__.appName;
|
||||
window.document.title = title;
|
||||
};
|
||||
public setTitle = (title: string): void => {
|
||||
if (!title) title = __CONFIG__.appName;
|
||||
window.document.title = title;
|
||||
};
|
||||
|
||||
private createAppModal = () => {
|
||||
const _appModal = document.createElement("app-modal");
|
||||
_appModal.setAttribute("data-target", "app-main.appModal");
|
||||
return _appModal;
|
||||
};
|
||||
private createAppModal = () => {
|
||||
const _appModal = document.createElement('app-modal');
|
||||
_appModal.setAttribute('data-target', 'app-main.appModal');
|
||||
return _appModal;
|
||||
};
|
||||
|
||||
private createLoader = () => {
|
||||
const _loader = document.createElement("app-loader");
|
||||
_loader.setAttribute("data-target", "app-main.appLoader");
|
||||
this.appendChild(_loader);
|
||||
};
|
||||
private createLoader = () => {
|
||||
const _loader = document.createElement('app-loader');
|
||||
_loader.setAttribute('data-target', 'app-main.appLoader');
|
||||
this.appendChild(_loader);
|
||||
};
|
||||
|
||||
private createModalContent = (element: string) => {
|
||||
const _modalElement = document.createElement(element);
|
||||
const _divEl = document.createElement("div");
|
||||
_modalElement.setAttribute("data-target", "app-modal.modalElement");
|
||||
_divEl.setAttribute("data-target", "app-modal.modalContent");
|
||||
_divEl.setAttribute("data-action", "click:app-main#preventClosing");
|
||||
_divEl.appendChild(_modalElement);
|
||||
return _divEl;
|
||||
};
|
||||
private createModalContent = (element: string) => {
|
||||
const _modalElement = document.createElement(element);
|
||||
const _divEl = document.createElement('div');
|
||||
_modalElement.setAttribute('data-target', 'app-modal.modalElement');
|
||||
_divEl.setAttribute('data-target', 'app-modal.modalContent');
|
||||
_divEl.setAttribute('data-action', 'click:app-main#preventClosing');
|
||||
_divEl.appendChild(_modalElement);
|
||||
return _divEl;
|
||||
};
|
||||
|
||||
private createModalOverlay = () => {
|
||||
const _divOverlay = document.createElement("div");
|
||||
_divOverlay.setAttribute("data-target", "app-modal.modalOverlay");
|
||||
_divOverlay.setAttribute("data-action", "click:app-main#closeModal");
|
||||
return _divOverlay;
|
||||
};
|
||||
private createModalOverlay = () => {
|
||||
const _divOverlay = document.createElement('div');
|
||||
_divOverlay.setAttribute('data-target', 'app-modal.modalOverlay');
|
||||
_divOverlay.setAttribute('data-action', 'click:app-main#closeModal');
|
||||
return _divOverlay;
|
||||
};
|
||||
|
||||
private createMainRoot = () => {
|
||||
if (this.mainRoot) this.removeChild(this.mainRoot);
|
||||
const _mainRoot = document.createElement("app-root");
|
||||
_mainRoot.setAttribute("data-target", "app-main.mainRoot");
|
||||
this.appendChild(_mainRoot);
|
||||
return _mainRoot;
|
||||
};
|
||||
private createMainRoot = () => {
|
||||
if (this.mainRoot) this.removeChild(this.mainRoot);
|
||||
const _mainRoot = document.createElement('app-root');
|
||||
_mainRoot.setAttribute('data-target', 'app-main.mainRoot');
|
||||
this.appendChild(_mainRoot);
|
||||
return _mainRoot;
|
||||
};
|
||||
|
||||
preventClosing = (e: Event) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
preventClosing = (e: Event) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
closeModal = () => {
|
||||
if (this.appModal) this.removeChild(this.appModal);
|
||||
this.appMain.removeEventListener("routechanged", this.closeModal);
|
||||
};
|
||||
closeModal = () => {
|
||||
if (this.appModal) this.removeChild(this.appModal);
|
||||
this.appMain.removeEventListener('routechanged', this.closeModal);
|
||||
};
|
||||
|
||||
isAuth = (): boolean => {
|
||||
return this.authStore && !!this.authStore.token;
|
||||
};
|
||||
isAuth = (): boolean => {
|
||||
return this.authStore && !!this.authStore.token;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppMainElement };
|
||||
|
||||
@@ -1,164 +1,132 @@
|
||||
import { controller, target } from "@github/catalyst";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { AppMainElement } from "components/app-main/AppMainElement";
|
||||
import { MenuItemElement } from "components/menu-item/MenuItemElement";
|
||||
import { WalletService } from "services/";
|
||||
import { controller, target } from '@github/catalyst';
|
||||
import { html, TemplateResult } from 'lit-html';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
import { AppMainElement } from 'components/app-main/AppMainElement';
|
||||
import { MenuItemElement } from 'components/menu-item/MenuItemElement';
|
||||
import { WalletService } from 'services/';
|
||||
|
||||
@controller
|
||||
class AppMenuElement extends BaseComponentElement {
|
||||
private walletService: WalletService;
|
||||
private walletData: Array<any>;
|
||||
private totalWallets: number;
|
||||
@target walletlist: MenuItemElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
private walletService: WalletService;
|
||||
private walletData: Array<any>;
|
||||
private totalWallets: number;
|
||||
@target walletlist: MenuItemElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {
|
||||
this.walletService = new WalletService(this.appMain?.appService);
|
||||
if (this.appMain.isAuth) {
|
||||
this.getWallets();
|
||||
}
|
||||
this.update();
|
||||
this.appMain.addEventListener("tokenchange", this.updateToken);
|
||||
this.appMain.addEventListener("walletupdate", this.updateToken);
|
||||
};
|
||||
elementConnected = (): void => {
|
||||
this.walletService = new WalletService(this.appMain?.appService);
|
||||
if (this.appMain.isAuth) {
|
||||
this.getWallets();
|
||||
}
|
||||
this.update();
|
||||
this.appMain.addEventListener('tokenchange', this.updateToken);
|
||||
this.appMain.addEventListener('walletupdate', this.updateToken);
|
||||
};
|
||||
|
||||
elementDisconnected = (appMain: AppMainElement): void => {
|
||||
appMain?.removeEventListener("tokenchange", this.updateToken);
|
||||
appMain?.removeEventListener("walletupdate", this.updateToken);
|
||||
};
|
||||
elementDisconnected = (appMain: AppMainElement): void => {
|
||||
appMain?.removeEventListener('tokenchange', this.updateToken);
|
||||
appMain?.removeEventListener('walletupdate', this.updateToken);
|
||||
};
|
||||
|
||||
getWallets = async (): Promise<void> => {
|
||||
try {
|
||||
const response = await this.walletService.getAll({ rpp: 3 });
|
||||
this.setWallets(response.items, response.totalRecords);
|
||||
} catch (err) {
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
getWallets = async (): Promise<void> => {
|
||||
try {
|
||||
const response = await this.walletService.getAll({ rpp: 3 });
|
||||
this.setWallets(response.items, response.totalRecords);
|
||||
} catch (err) {
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
|
||||
setWallets = (wallets: Array<any>, totalWallets: number): void => {
|
||||
this.walletData = wallets;
|
||||
this.totalWallets = totalWallets;
|
||||
this.update();
|
||||
};
|
||||
setWallets = (wallets: Array<any>, totalWallets: number): void => {
|
||||
this.walletData = wallets;
|
||||
this.totalWallets = totalWallets;
|
||||
this.update();
|
||||
};
|
||||
|
||||
updateToken = (): void => {
|
||||
if (this.isAuth) {
|
||||
this.getWallets();
|
||||
} else {
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
updateToken = (): void => {
|
||||
if (this.isAuth) {
|
||||
this.getWallets();
|
||||
} else {
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
|
||||
get isAuth(): boolean {
|
||||
if (this.appMain?.isAuth) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
get isAuth(): boolean {
|
||||
if (this.appMain?.isAuth) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
renderWallets = (): Array<TemplateResult> => {
|
||||
if (this.isAuth && this.totalWallets > 0) {
|
||||
return this.walletData.map(
|
||||
(wallet) => html`<menu-item data-path="/wallet/${wallet.id}"
|
||||
>${wallet.name}</menu-item
|
||||
>`
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
renderWallets = (): Array<TemplateResult> => {
|
||||
if (this.isAuth && this.totalWallets > 0) {
|
||||
return this.walletData.map(
|
||||
(wallet) => html`<menu-item data-path="/wallet/${wallet.id}">${wallet.name}</menu-item>`
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
modalWallet = (): void => {
|
||||
const _modal = this.appMain.appModal;
|
||||
if (_modal) {
|
||||
this.appMain.closeModal();
|
||||
} else {
|
||||
this.appMain.createModal("wallet-create");
|
||||
}
|
||||
};
|
||||
modalWallet = (): void => {
|
||||
const _modal = this.appMain.appModal;
|
||||
if (_modal) {
|
||||
this.appMain.closeModal();
|
||||
} else {
|
||||
this.appMain.createModal('wallet-create');
|
||||
}
|
||||
};
|
||||
|
||||
modalTransaction = (): void => {
|
||||
const _modal = this.appMain.appModal;
|
||||
if (_modal) {
|
||||
this.appMain.closeModal();
|
||||
} else {
|
||||
this.appMain.createModal("transaction-create");
|
||||
}
|
||||
};
|
||||
modalTransaction = (): void => {
|
||||
const _modal = this.appMain.appModal;
|
||||
if (_modal) {
|
||||
this.appMain.closeModal();
|
||||
} else {
|
||||
this.appMain.createModal('transaction-create');
|
||||
}
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const { isAuth, totalWallets, walletData } = this;
|
||||
render = (): TemplateResult => {
|
||||
const { isAuth, totalWallets, walletData } = this;
|
||||
|
||||
const regularMenu = (
|
||||
path: string,
|
||||
title: string,
|
||||
action?: string
|
||||
): TemplateResult => {
|
||||
if (action) {
|
||||
return html`
|
||||
<menu-item data-path="${path}" data-customaction="${action}"
|
||||
>${title}</menu-item
|
||||
>
|
||||
`;
|
||||
}
|
||||
return html`<menu-item data-path="${path}">${title}</menu-item>`;
|
||||
};
|
||||
const authMenu = (
|
||||
path: string,
|
||||
title: string,
|
||||
action?: string
|
||||
): TemplateResult => {
|
||||
if (isAuth) {
|
||||
return regularMenu(path, title, action);
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const notAuthMenu = (
|
||||
path: string,
|
||||
title: string,
|
||||
action?: string
|
||||
): TemplateResult => {
|
||||
if (!isAuth) {
|
||||
return regularMenu(path, title, action);
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const renderWallets = (wallets: Array<any>) => {
|
||||
if (isAuth && totalWallets > 0) {
|
||||
return html`<div class="menu-item divider"></div>
|
||||
${wallets.map((wallet) =>
|
||||
regularMenu(`/wallet/${wallet.id}`, wallet.name)
|
||||
)}`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const menuHeader = (title) =>
|
||||
html`<div class="menu-item menu-header">${title}</div>`;
|
||||
const regularMenu = (path: string, title: string, action?: string): TemplateResult => {
|
||||
if (action) {
|
||||
return html` <menu-item data-path="${path}" data-customaction="${action}">${title}</menu-item> `;
|
||||
}
|
||||
return html`<menu-item data-path="${path}">${title}</menu-item>`;
|
||||
};
|
||||
const authMenu = (path: string, title: string, action?: string): TemplateResult => {
|
||||
if (isAuth) {
|
||||
return regularMenu(path, title, action);
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const notAuthMenu = (path: string, title: string, action?: string): TemplateResult => {
|
||||
if (!isAuth) {
|
||||
return regularMenu(path, title, action);
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const renderWallets = (wallets: Array<any>) => {
|
||||
if (isAuth && totalWallets > 0) {
|
||||
return html`<div class="menu-item divider"></div>
|
||||
${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name))}`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const menuHeader = (title) => html`<div class="menu-item menu-header">${title}</div>`;
|
||||
|
||||
return html`
|
||||
<div data-target="app-menu.sidebar">
|
||||
${menuHeader(__CONFIG__.appName)} ${regularMenu("/", "Home")}
|
||||
${authMenu(
|
||||
"/history",
|
||||
"Transaction History",
|
||||
"click:app-menu#modalTransaction"
|
||||
)}
|
||||
${authMenu(
|
||||
"/wallet/all",
|
||||
"My Wallets",
|
||||
"click:app-menu#modalWallet"
|
||||
)}
|
||||
${renderWallets(walletData)}
|
||||
<span class="menu-item divider"></span>
|
||||
${authMenu("/logout", "Logout")}
|
||||
${notAuthMenu("/login", "Login")}
|
||||
${notAuthMenu("/register", "Register")}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
return html`
|
||||
<div data-target="app-menu.sidebar">
|
||||
${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')}
|
||||
${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')}
|
||||
${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
|
||||
<span class="menu-item divider"></span>
|
||||
${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} ${notAuthMenu('/register', 'Register')}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppMenuElement };
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { controller, target } from "@github/catalyst";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { controller, target } from '@github/catalyst';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class AppModalElement extends BaseComponentElement {
|
||||
@target modalElement: HTMLElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@target modalElement: HTMLElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {};
|
||||
elementConnected = (): void => {};
|
||||
}
|
||||
|
||||
export type { AppModalElement };
|
||||
|
||||
@@ -1,148 +1,143 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { html, TemplateResult } from 'lit-html';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
|
||||
|
||||
@controller
|
||||
class AppPaginationElement extends BaseComponentElement {
|
||||
public items: Array<any>;
|
||||
@attr page: number;
|
||||
@attr rpp: number;
|
||||
@attr totalItems: number;
|
||||
@attr autoInit: string;
|
||||
public items: Array<any>;
|
||||
@attr page: number;
|
||||
@attr rpp: number;
|
||||
@attr totalItems: number;
|
||||
@attr autoInit: string;
|
||||
|
||||
private customRenderItems: () => TemplateResult;
|
||||
private customRenderItem: (item: any) => TemplateResult;
|
||||
fetchFunc: Function = () => {};
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
private customRenderItems: () => TemplateResult;
|
||||
private customRenderItem: (item: any) => TemplateResult;
|
||||
fetchFunc: Function = () => {};
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {};
|
||||
elementConnected = (): void => {};
|
||||
|
||||
attributeChangedCallback(): void {
|
||||
this.update();
|
||||
}
|
||||
attributeChangedCallback(): void {
|
||||
this.update();
|
||||
}
|
||||
|
||||
setItems = (items): void => {
|
||||
this.items = items;
|
||||
this.update();
|
||||
};
|
||||
setItems = (items): void => {
|
||||
this.items = items;
|
||||
this.update();
|
||||
};
|
||||
|
||||
setFetchFunc = async (fetchFunc: Function, autoInit?): Promise<void> => {
|
||||
this.fetchFunc = fetchFunc;
|
||||
if (autoInit) {
|
||||
const options = {
|
||||
rpp: this.rpp || 5,
|
||||
page: this.page || 1,
|
||||
};
|
||||
this.executeFetch(options);
|
||||
}
|
||||
};
|
||||
setFetchFunc = async (fetchFunc: Function, autoInit?): Promise<void> => {
|
||||
this.fetchFunc = fetchFunc;
|
||||
if (autoInit) {
|
||||
const options = {
|
||||
rpp: this.rpp || 5,
|
||||
page: this.page || 1,
|
||||
};
|
||||
this.executeFetch(options);
|
||||
}
|
||||
};
|
||||
|
||||
setCustomRenderItems = (customRenderItems: () => TemplateResult) => {
|
||||
this.customRenderItems = customRenderItems;
|
||||
this.update();
|
||||
};
|
||||
setCustomRenderItems = (customRenderItems: () => TemplateResult) => {
|
||||
this.customRenderItems = customRenderItems;
|
||||
this.update();
|
||||
};
|
||||
|
||||
setCustomRenderItem = (customRenderItem: (item: any) => TemplateResult) => {
|
||||
this.customRenderItem = customRenderItem;
|
||||
this.update();
|
||||
};
|
||||
setCustomRenderItem = (customRenderItem: (item: any) => TemplateResult) => {
|
||||
this.customRenderItem = customRenderItem;
|
||||
this.update();
|
||||
};
|
||||
|
||||
executeFetch = async (options?): Promise<void> => {
|
||||
if (!options) {
|
||||
options = {
|
||||
rpp: this.rpp || 5,
|
||||
page: this.page || 1,
|
||||
};
|
||||
}
|
||||
executeFetch = async (options?): Promise<void> => {
|
||||
if (!options) {
|
||||
options = {
|
||||
rpp: this.rpp || 5,
|
||||
page: this.page || 1,
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
this.loader?.start?.();
|
||||
const response = await this.fetchFunc(options);
|
||||
this.loader?.stop?.();
|
||||
this.setItems(response?.items);
|
||||
this.totalItems = response?.totalRecords;
|
||||
this.page = response?.page;
|
||||
this.rpp = response?.rpp;
|
||||
} catch (err) {
|
||||
this.loader?.stop?.();
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
try {
|
||||
this.loader?.start?.();
|
||||
const response = await this.fetchFunc(options);
|
||||
this.loader?.stop?.();
|
||||
this.setItems(response?.items);
|
||||
this.totalItems = response?.totalRecords;
|
||||
this.page = response?.page;
|
||||
this.rpp = response?.rpp;
|
||||
} catch (err) {
|
||||
this.loader?.stop?.();
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
pageBack = (): void => {
|
||||
const { page } = this;
|
||||
if (page > 1) {
|
||||
this.page--;
|
||||
this.executeFetch();
|
||||
}
|
||||
};
|
||||
pageBack = (): void => {
|
||||
const { page } = this;
|
||||
if (page > 1) {
|
||||
this.page--;
|
||||
this.executeFetch();
|
||||
}
|
||||
};
|
||||
|
||||
pageNext = (): void => {
|
||||
const { rpp, totalItems, page } = this;
|
||||
const pageRange = Math.ceil(totalItems / rpp);
|
||||
if (page < pageRange) {
|
||||
this.page++;
|
||||
this.executeFetch();
|
||||
}
|
||||
};
|
||||
pageNext = (): void => {
|
||||
const { rpp, totalItems, page } = this;
|
||||
const pageRange = Math.ceil(totalItems / rpp);
|
||||
if (page < pageRange) {
|
||||
this.page++;
|
||||
this.executeFetch();
|
||||
}
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const { rpp, totalItems, page, items } = this;
|
||||
render = (): TemplateResult => {
|
||||
const { rpp, totalItems, page, items } = this;
|
||||
|
||||
const renderItem = this.customRenderItem
|
||||
? this.customRenderItem
|
||||
: (item) => html`<tr>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.amount}</td>
|
||||
</tr>`;
|
||||
const renderItem = this.customRenderItem
|
||||
? this.customRenderItem
|
||||
: (item) => html`<tr>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.amount}</td>
|
||||
</tr>`;
|
||||
|
||||
const renderItems = this.customRenderItems
|
||||
? this.customRenderItems
|
||||
: () => {
|
||||
if (this.loader && this.loader.loading) {
|
||||
return html`<circle-loader></circle-loader>`;
|
||||
} else {
|
||||
if (items?.length > 0) {
|
||||
return html`<div class="table">
|
||||
${items?.map((item) => renderItem(item))}
|
||||
</div>`;
|
||||
}
|
||||
return html``;
|
||||
}
|
||||
};
|
||||
const renderItems = this.customRenderItems
|
||||
? this.customRenderItems
|
||||
: () => {
|
||||
if (this.loader && this.loader.loading) {
|
||||
return html`<circle-loader></circle-loader>`;
|
||||
} else {
|
||||
if (items?.length > 0) {
|
||||
return html`<table>
|
||||
${items?.map((item) => renderItem(item))}
|
||||
</table>`;
|
||||
}
|
||||
return html``;
|
||||
}
|
||||
};
|
||||
|
||||
const renderPagination = () => {
|
||||
if (totalItems > items?.length) {
|
||||
const pageRange = Math.ceil(totalItems / rpp);
|
||||
return html`
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
const renderPagination = () => {
|
||||
if (totalItems > items?.length) {
|
||||
const pageRange = Math.ceil(totalItems / rpp);
|
||||
return html`
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
return html`<div>${renderItems()} ${renderPagination()}</div>`;
|
||||
};
|
||||
return html`<div>${renderItems()} ${renderPagination()}</div>`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { AppPaginationElement };
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { controller, target } from "@github/catalyst";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { controller, target } from '@github/catalyst';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class AppRootElement extends BaseComponentElement {
|
||||
@target rootElement: HTMLElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@target rootElement: HTMLElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {};
|
||||
elementConnected = (): void => {};
|
||||
}
|
||||
|
||||
export type { AppRootElement };
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { controller } from "@github/catalyst";
|
||||
import style from "styles/main.scss";
|
||||
import { controller } from '@github/catalyst';
|
||||
import style from 'styles/main.scss';
|
||||
|
||||
(function () {
|
||||
const _shadow = new WeakMap();
|
||||
const _shadow = new WeakMap();
|
||||
|
||||
@controller
|
||||
class AppShadowElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
_shadow.set(this, this.attachShadow({ mode: "closed" }));
|
||||
}
|
||||
@controller
|
||||
class AppShadowElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
_shadow.set(this, this.attachShadow({ mode: 'closed' }));
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const _root = _shadow.get(this);
|
||||
const _appMain = document.createElement("app-main");
|
||||
const _style = document.createElement("style");
|
||||
_style.innerHTML = style;
|
||||
connectedCallback() {
|
||||
const _root = _shadow.get(this);
|
||||
const _appMain = document.createElement('app-main');
|
||||
const _style = document.createElement('style');
|
||||
_style.innerHTML = style;
|
||||
|
||||
_root.appendChild(_style);
|
||||
_root.appendChild(_appMain);
|
||||
}
|
||||
}
|
||||
_root.appendChild(_style);
|
||||
_root.appendChild(_appMain);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { controller, target } from "@github/catalyst";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { controller, target } from '@github/catalyst';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class AppSlotElement extends BaseComponentElement {
|
||||
@target slotElement: HTMLElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@target slotElement: HTMLElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {};
|
||||
elementConnected = (): void => {};
|
||||
}
|
||||
|
||||
export type { AppSlotElement };
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
import { attr, controller } from "@github/catalyst";
|
||||
import { html } from "lit-html";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { attr, controller } from '@github/catalyst';
|
||||
import { html } from 'lit-html';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class CircleLoaderElement extends BaseComponentElement {
|
||||
@attr size: string;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@attr size: string;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {
|
||||
this.update();
|
||||
};
|
||||
elementConnected = (): void => {
|
||||
this.update();
|
||||
};
|
||||
|
||||
render = () => {
|
||||
return html`<div
|
||||
class="circle-loader ${this.size ? `-${this.size}` : ""}"
|
||||
></div>`;
|
||||
};
|
||||
render = () => {
|
||||
return html`<div class="circle-loader ${this.size ? `-${this.size}` : ''}"></div>`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { CircleLoaderElement };
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
export * from "./app-link/AppLinkElement";
|
||||
export * from "./menu-item/MenuItemElement";
|
||||
export * from "./app-pagination/AppPaginationElement";
|
||||
export * from "./app-modal/AppModalElement";
|
||||
export * from "./app-root/AppRootElement";
|
||||
export * from "./app-slot/AppSlotElement";
|
||||
export * from "./app-menu/AppMenuElement";
|
||||
export * from "./input-field/InputFieldElement";
|
||||
export * from "./app-dropdown/AppDropdownElement";
|
||||
export * from "./app-loader/AppLoaderElement";
|
||||
export * from "./circle-loader/CircleLoaderElement";
|
||||
export * from "./app-form/AppFormElement";
|
||||
export * from "./wallet-header/WalletHeaderElement";
|
||||
export * from './app-link/AppLinkElement';
|
||||
export * from './menu-item/MenuItemElement';
|
||||
export * from './app-pagination/AppPaginationElement';
|
||||
export * from './app-modal/AppModalElement';
|
||||
export * from './app-root/AppRootElement';
|
||||
export * from './app-slot/AppSlotElement';
|
||||
export * from './app-menu/AppMenuElement';
|
||||
export * from './input-field/InputFieldElement';
|
||||
export * from './app-dropdown/AppDropdownElement';
|
||||
export * from './app-loader/AppLoaderElement';
|
||||
export * from './circle-loader/CircleLoaderElement';
|
||||
export * from './app-form/AppFormElement';
|
||||
export * from './wallet-header/WalletHeaderElement';
|
||||
|
||||
// LAST
|
||||
export * from "./app-main/AppMainElement";
|
||||
export * from "./app-shadow/AppShadowElement";
|
||||
export * from './app-main/AppMainElement';
|
||||
export * from './app-shadow/AppShadowElement';
|
||||
|
||||
@@ -1,125 +1,119 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { closest, firstUpper } from "core/utils";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { RouterService } from "core/services";
|
||||
import randomId from "core/utils/random-id";
|
||||
import validator from "validator";
|
||||
import { validatorErrors } from "core/constants";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { AppFormElement } from "components/app-form/AppFormElement";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { closest, firstUpper } from 'core/utils';
|
||||
import { html, TemplateResult } from 'lit-html';
|
||||
import { RouterService } from 'core/services';
|
||||
import randomId from 'core/utils/random-id';
|
||||
import validator from 'validator';
|
||||
import { validatorErrors } from 'core/constants';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
import { AppFormElement } from 'components/app-form/AppFormElement';
|
||||
|
||||
@controller
|
||||
class InputFieldElement extends BaseComponentElement {
|
||||
@attr name: string;
|
||||
@attr type: string;
|
||||
@attr label: string;
|
||||
@attr rules: string;
|
||||
@target main: HTMLElement;
|
||||
@target inp: HTMLElement;
|
||||
@closest appForm: AppFormElement;
|
||||
error: string;
|
||||
displayError: boolean;
|
||||
randId: string;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@attr name: string;
|
||||
@attr type: string;
|
||||
@attr label: string;
|
||||
@attr rules: string;
|
||||
@target main: HTMLElement;
|
||||
@target inp: HTMLElement;
|
||||
@closest appForm: AppFormElement;
|
||||
error: string;
|
||||
displayError: boolean;
|
||||
randId: string;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public elementConnected = (): void => {
|
||||
this.randId = `${name}${randomId()}`;
|
||||
this.update();
|
||||
this.validate();
|
||||
};
|
||||
public elementConnected = (): void => {
|
||||
this.randId = `${name}${randomId()}`;
|
||||
this.update();
|
||||
this.validate();
|
||||
};
|
||||
|
||||
get valid(): boolean {
|
||||
return !!this.error;
|
||||
}
|
||||
get valid(): boolean {
|
||||
return !!this.error;
|
||||
}
|
||||
|
||||
get required(): boolean {
|
||||
return this.rules.includes("required");
|
||||
}
|
||||
get required(): boolean {
|
||||
return this.rules.includes('required');
|
||||
}
|
||||
|
||||
get _value() {
|
||||
return (this.inp as HTMLInputElement)?.value;
|
||||
}
|
||||
get _value() {
|
||||
return (this.inp as HTMLInputElement)?.value;
|
||||
}
|
||||
|
||||
validate = (): boolean => {
|
||||
let _return = true;
|
||||
const rules = this.rules?.split("|").filter((a) => a);
|
||||
const value = (this.inp as HTMLInputElement)?.value;
|
||||
rules
|
||||
.slice()
|
||||
.reverse()
|
||||
.forEach((rule) => {
|
||||
let valid = true;
|
||||
if (rule == "required") {
|
||||
if (value === "") valid = false;
|
||||
} else {
|
||||
if (validator.hasOwnProperty(rule)) {
|
||||
valid = validator?.[rule]?.(value);
|
||||
}
|
||||
}
|
||||
if (!valid) {
|
||||
const error = validatorErrors[rule]?.replaceAll(
|
||||
"{- name}",
|
||||
firstUpper(this.name?.toString())
|
||||
);
|
||||
_return = false;
|
||||
this.error = error;
|
||||
}
|
||||
});
|
||||
if (_return) {
|
||||
this.error = null;
|
||||
}
|
||||
return _return;
|
||||
};
|
||||
validate = (): boolean => {
|
||||
let _return = true;
|
||||
const rules = this.rules?.split('|').filter((a) => a);
|
||||
const value = (this.inp as HTMLInputElement)?.value;
|
||||
rules
|
||||
.slice()
|
||||
.reverse()
|
||||
.forEach((rule) => {
|
||||
let valid = true;
|
||||
if (rule == 'required') {
|
||||
if (value === '') valid = false;
|
||||
} else {
|
||||
if (validator.hasOwnProperty(rule)) {
|
||||
valid = validator?.[rule]?.(value);
|
||||
}
|
||||
}
|
||||
if (!valid) {
|
||||
const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
|
||||
_return = false;
|
||||
this.error = error;
|
||||
}
|
||||
});
|
||||
if (_return) {
|
||||
this.error = null;
|
||||
}
|
||||
return _return;
|
||||
};
|
||||
|
||||
validateDisplay = () => {
|
||||
if (!this.validate()) {
|
||||
this.displayError = true;
|
||||
} else {
|
||||
this.displayError = false;
|
||||
}
|
||||
this.update();
|
||||
};
|
||||
validateDisplay = () => {
|
||||
if (!this.validate()) {
|
||||
this.displayError = true;
|
||||
} else {
|
||||
this.displayError = false;
|
||||
}
|
||||
this.update();
|
||||
};
|
||||
|
||||
inputChange = (e) => {
|
||||
this.validate();
|
||||
this.appForm?.inputChange(e);
|
||||
};
|
||||
inputChange = (e) => {
|
||||
this.validate();
|
||||
this.appForm?.inputChange(e);
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const renderMessage = (label: string) => {
|
||||
if (this.label) {
|
||||
return html`<label for="${this.randId}"
|
||||
>${this.label}${this.required ? " (*)" : ""}</label
|
||||
>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
render = (): TemplateResult => {
|
||||
const renderMessage = (label: string) => {
|
||||
if (this.label) {
|
||||
return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
|
||||
const renderError = (displayError: boolean, error: string) => {
|
||||
if (displayError) {
|
||||
return html`<span>${error}</span>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
const renderError = (displayError: boolean, error: string) => {
|
||||
if (displayError) {
|
||||
return html`<span>${error}</span>`;
|
||||
}
|
||||
return html``;
|
||||
};
|
||||
|
||||
const renderInput = (type) => {
|
||||
return html` <input
|
||||
type="${this.type}"
|
||||
data-target="input-field.inp"
|
||||
app-action="
|
||||
const renderInput = (type) => {
|
||||
return html` <input
|
||||
type="${this.type}"
|
||||
data-target="input-field.inp"
|
||||
app-action="
|
||||
input:input-field#inputChange
|
||||
blur:input-field#validateDisplay
|
||||
"
|
||||
/>`;
|
||||
};
|
||||
/>`;
|
||||
};
|
||||
|
||||
return html`<div class="input-main" data-target="input-field.main">
|
||||
${renderMessage(this.label)} ${renderInput(this.type)}
|
||||
${renderError(this.displayError, this.error)}
|
||||
</div>`;
|
||||
};
|
||||
return html`<div class="input-main" data-target="input-field.main">
|
||||
${renderMessage(this.label)} ${renderInput(this.type)} ${renderError(this.displayError, this.error)}
|
||||
</div>`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { InputFieldElement };
|
||||
|
||||
@@ -1,55 +1,47 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { AppMainElement } from "components/app-main/AppMainElement";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { html, TemplateResult } from 'lit-html';
|
||||
import { AppMainElement } from 'components/app-main/AppMainElement';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
|
||||
@controller
|
||||
class MenuItemElement extends BaseComponentElement {
|
||||
@attr path: string;
|
||||
@attr title: string;
|
||||
@attr customaction: string;
|
||||
@target itemEl: HTMLElement;
|
||||
@target customButton: HTMLDivElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@attr path: string;
|
||||
@attr title: string;
|
||||
@attr customaction: string;
|
||||
@target itemEl: HTMLElement;
|
||||
@target customButton: HTMLDivElement;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public elementConnected = (): void => {
|
||||
if (!this.title && this.innerText) {
|
||||
const _slottedText = this.innerText;
|
||||
this.innerText = null;
|
||||
this.title = _slottedText;
|
||||
}
|
||||
this.update();
|
||||
this.appMain.addEventListener("routechanged", this.update);
|
||||
};
|
||||
public elementConnected = (): void => {
|
||||
if (!this.title && this.innerText) {
|
||||
const _slottedText = this.innerText;
|
||||
this.innerText = null;
|
||||
this.title = _slottedText;
|
||||
}
|
||||
this.update();
|
||||
this.appMain.addEventListener('routechanged', this.update);
|
||||
};
|
||||
|
||||
public elementDisconnected = (appMain: AppMainElement): void => {
|
||||
appMain?.removeEventListener("routechanged", this.update);
|
||||
};
|
||||
public elementDisconnected = (appMain: AppMainElement): void => {
|
||||
appMain?.removeEventListener('routechanged', this.update);
|
||||
};
|
||||
|
||||
get current(): boolean {
|
||||
return this.routerService.comparePath(this.path);
|
||||
}
|
||||
get current(): boolean {
|
||||
return this.routerService.comparePath(this.path);
|
||||
}
|
||||
|
||||
render = (): TemplateResult => {
|
||||
return html`
|
||||
<div
|
||||
class="${this.current ? "selected " : ""}menu-item"
|
||||
data-target="menu-item.itemEl"
|
||||
>
|
||||
<app-link data-to="${this.path}">${this.title}</app-link>
|
||||
${this.customaction
|
||||
? html`<div
|
||||
data-target="menu-item.customButton"
|
||||
app-action="${this.customaction}"
|
||||
>
|
||||
+
|
||||
</div>`
|
||||
: html``}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
render = (): TemplateResult => {
|
||||
return html`
|
||||
<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
|
||||
<app-link data-to="${this.path}">${this.title}</app-link>
|
||||
${this.customaction
|
||||
? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`
|
||||
: html``}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { MenuItemElement };
|
||||
|
||||
@@ -1,70 +1,66 @@
|
||||
import { attr, controller, target } from "@github/catalyst";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { BaseComponentElement } from "common/";
|
||||
import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
|
||||
import { findMethod } from "core/utils";
|
||||
import { attr, controller, target } from '@github/catalyst';
|
||||
import { html, TemplateResult } from 'lit-html';
|
||||
import { BaseComponentElement } from 'common/';
|
||||
import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
|
||||
import { findMethod } from 'core/utils';
|
||||
|
||||
@controller
|
||||
class WalletHeaderElement extends BaseComponentElement {
|
||||
@attr currentBalance: number;
|
||||
@attr lastMonth: number;
|
||||
@attr nextMonth: number;
|
||||
@attr currency: string;
|
||||
@attr custom: string;
|
||||
@attr currentBalance: number;
|
||||
@attr lastMonth: number;
|
||||
@attr nextMonth: number;
|
||||
@attr currency: string;
|
||||
@attr custom: string;
|
||||
|
||||
fetchFunc: Function = () => {};
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
fetchFunc: Function = () => {};
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
elementConnected = (): void => {
|
||||
this.executeFetch();
|
||||
this.update();
|
||||
};
|
||||
elementConnected = (): void => {
|
||||
this.executeFetch();
|
||||
this.update();
|
||||
};
|
||||
|
||||
attributeChangedCallback(): void {
|
||||
this.update();
|
||||
}
|
||||
attributeChangedCallback(): void {
|
||||
this.update();
|
||||
}
|
||||
|
||||
executeFetch = async (options?): Promise<void> => {
|
||||
const actionString = this.custom;
|
||||
const submitFunc = findMethod(actionString, this.appMain);
|
||||
executeFetch = async (options?): Promise<void> => {
|
||||
const actionString = this.custom;
|
||||
const submitFunc = findMethod(actionString, this.appMain);
|
||||
|
||||
try {
|
||||
this.loader?.start?.();
|
||||
await submitFunc(options);
|
||||
this.loader?.stop?.();
|
||||
} catch (err) {
|
||||
this.loader?.stop?.();
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
try {
|
||||
this.loader?.start?.();
|
||||
await submitFunc(options);
|
||||
this.loader?.stop?.();
|
||||
} catch (err) {
|
||||
this.loader?.stop?.();
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const { currentBalance, currency, lastMonth, nextMonth } = this;
|
||||
render = (): TemplateResult => {
|
||||
const { currentBalance, currency, lastMonth, nextMonth } = this;
|
||||
|
||||
const renderItem = (header, balance, currency) => html`<div>
|
||||
<div>${header}</div>
|
||||
<div><span>${balance}</span><span>${currency}</span></div>
|
||||
</div>`;
|
||||
const renderItem = (header, balance, currency) => html`<div>
|
||||
<div>${header}</div>
|
||||
<div><span>${balance}</span><span>${currency}</span></div>
|
||||
</div>`;
|
||||
|
||||
const renderHeader = () => {
|
||||
if (this.loader && this.loader.loading) {
|
||||
return html`<circle-loader></circle-loader>`;
|
||||
}
|
||||
return html`${renderItem(
|
||||
"Last Month",
|
||||
lastMonth,
|
||||
currency
|
||||
)}${renderItem(
|
||||
"Current Balance",
|
||||
currentBalance,
|
||||
currency
|
||||
)}${renderItem("Next Month", nextMonth, currency)}`;
|
||||
};
|
||||
const renderHeader = () => {
|
||||
if (this.loader && this.loader.loading) {
|
||||
return html`<circle-loader></circle-loader>`;
|
||||
}
|
||||
return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
|
||||
'Current Balance',
|
||||
currentBalance,
|
||||
currency
|
||||
)}${renderItem('Next Month', nextMonth, currency)}`;
|
||||
};
|
||||
|
||||
return html`<div>${renderHeader()}</div>`;
|
||||
};
|
||||
return html`<div>${renderHeader()}</div>`;
|
||||
};
|
||||
}
|
||||
|
||||
export type { WalletHeaderElement };
|
||||
|
||||
Reference in New Issue
Block a user