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

Merge branch 'feature/WW-26-architecture'

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-02 13:19:38 +02:00
parent f01c328716 91032927fd
commit ffef98e7a5
25 changed files with 206 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/common/components/BaseComponentElement/BaseComponentElement.ts Normal file
View File

@@ -0,0 +1,43 @@
import { html, render } from "@github/jtml";
import { AppMainElement } from "components/";
import { closest } from "core/utils";
class BaseComponentElement extends HTMLElement {
@closest appMain: AppMainElement;
bindEvents = () => {
const _elems = this.querySelectorAll("[data-action]");
_elems?.forEach((el) => {
for (const action of (el.getAttribute("data-action") || "")
.trim()
.split(/\s+/)) {
const eventSep = action.lastIndexOf(":");
const methodSep = action.lastIndexOf("#");
const tag = action.slice(eventSep + 1, methodSep);
const type = action.slice(0, eventSep);
const method = action.slice(methodSep + 1);
if (tag.toUpperCase() === this.tagName) {
el.addEventListener(type, this?.[method]);
} else {
this.childNodes.forEach((child: HTMLElement) => {
if (child.tagName == tag.toUpperCase()) {
el.addEventListener(type, child?.[method]);
}
});
}
}
});
};
render = () => {
return html``;
};
update = () => {
render(this.render(), this);
this.bindEvents();
};
}
export default BaseComponentElement;

1
src/common/components/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement";

3
src/common/index.ts
View File

@@ -0,0 +1,3 @@
export * from "./layouts";
export * from "./components";
export * from "./pages";

33
src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
View File

@@ -1,7 +1,11 @@
import { target } from "@github/catalyst";
import { html, render } from "@github/jtml";
import { AppMainElement } from "components/";
import { closest } from "core/utils";
class BaseLayoutElement extends HTMLElement {
@target appSlot: HTMLElement;
@closest appMain: AppMainElement;
public isLayout: boolean = true;
public _appSlot: string;
constructor() {
@@ -24,6 +28,35 @@ class BaseLayoutElement extends HTMLElement {
this._appSlot = _appSlot;
this.appSlot.innerHTML = _appSlot;
};
bindEvents = () => {
const _elems = this.querySelectorAll("[data-action]");
_elems?.forEach((el) => {
for (const action of (el.getAttribute("data-action") || "")
.trim()
.split(/\s+/)) {
const eventSep = action.lastIndexOf(":");
const methodSep = action.lastIndexOf("#");
const tag = action.slice(eventSep + 1, methodSep);
const type = action.slice(0, eventSep);
const method = action.slice(methodSep + 1);
if (tag.toUpperCase() === this.tagName) {
this.addEventListener(type, this[method]);
}
}
});
};
render = () => {
return html``;
};
update = () => {
render(this.render(), this);
this.bindEvents();
};
}
export default BaseLayoutElement;

37
src/common/pages/BasePageElement/BasePageElement.ts Normal file
View File

@@ -0,0 +1,37 @@
import { html, render } from "@github/jtml";
import { AppMainElement } from "components/";
import { closest } from "core/utils";
class BasePageElement extends HTMLElement {
@closest appMain: AppMainElement;
bindEvents = () => {
const _elems = this.querySelectorAll("[data-action]");
_elems?.forEach((el) => {
for (const action of (el.getAttribute("data-action") || "")
.trim()
.split(/\s+/)) {
const eventSep = action.lastIndexOf(":");
const methodSep = action.lastIndexOf("#");
const tag = action.slice(eventSep + 1, methodSep);
const type = action.slice(0, eventSep);
const method = action.slice(methodSep + 1);
if (tag.toUpperCase() === this.tagName) {
this.addEventListener(type, this[method]);
}
}
});
};
render = () => {
return html``;
};
update = () => {
render(this.render(), this);
this.bindEvents();
};
}
export default BasePageElement;

1
src/common/pages/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as BasePageElement } from "./BasePageElement/BasePageElement";

16
src/components/app-link/AppLinkElement.ts
View File

@@ -1,13 +1,19 @@
import { attr, targets, controller, target } from "@github/catalyst";
import {
attr,
targets,
controller,
target,
listenForBind,
} from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { PingService } from "services/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { RouterService } from "core/services";
import { BaseComponentElement } from "common/";
@controller
class AppLinkElement extends HTMLElement {
@closest appMain: AppMainElement;
class AppLinkElement extends BaseComponentElement {
@attr to: string;
@attr goBack: string;
@attr title: string;
@@ -67,8 +73,4 @@ class AppLinkElement extends HTMLElement {
>${this.title}</a
>`}`;
};
update = () => {
render(this.render(), this);
};
}

15
src/components/app-main/AppMainElement.ts
View File

@@ -2,14 +2,14 @@ import { controller, target } from "@github/catalyst";
import { closest } from "core/utils";
import { AppService, HttpClient, RouterService } from "core/services";
import { AuthStore } from "core/store";
import { BaseComponentElement } from "common/";
@controller
class AppMainElement extends HTMLElement {
class AppMainElement extends BaseComponentElement {
public routerService: RouterService;
public authStore: AuthStore;
private httpClient: HttpClient;
public appService: AppService;
@closest appMain;
@target appModal;
@target mainRoot;
@@ -28,28 +28,31 @@ class AppMainElement extends HTMLElement {
path: "/",
component: "home-page",
layout: "menu-layout",
middleware: this.isAuth,
},
{
path: "/home",
component: "home-page",
layout: "menu-layout",
middleware: this.middleAuth,
middleware: this.isAuth,
},
{
path: "/history",
component: "history-page",
layout: "menu-layout",
middleware: this.middleAuth,
middleware: this.isAuth,
},
{
path: "/register",
component: "register-page",
layout: "menu-layout",
middleware: this.isAuth,
},
{
path: "/login",
component: "login-page",
layout: "menu-layout",
middleware: this.isAuth,
},
{
path: "/unauthorized",
@@ -130,9 +133,9 @@ class AppMainElement extends HTMLElement {
if (this.appModal) this.removeChild(this.appModal);
};
get isAuth(): boolean {
isAuth = (): boolean => {
return this.authStore && this.authStore.token;
}
};
}
export type { AppMainElement };

9
src/components/app-menu/AppMenuElement.ts
View File

@@ -1,15 +1,15 @@
import { controller, target } from "@github/catalyst";
import { html, render, TemplateResult } from "@github/jtml";
import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest, update } from "core/utils";
import { WalletService } from "services/";
@controller
class AppMenuElement extends HTMLElement {
class AppMenuElement extends BaseComponentElement {
private walletService: WalletService;
private walletData: Array<any>;
private totalWallets: number;
@closest appMain: AppMainElement;
constructor() {
super();
}
@@ -51,13 +51,8 @@ class AppMenuElement extends HTMLElement {
}
};
update = () => {
render(this.render(), this);
};
get isAuth(): boolean {
if (this.appMain?.isAuth) {
console.log(true);
return true;
}
return false;

4
src/components/app-modal/AppModalElement.ts
View File

@@ -1,11 +1,11 @@
import { controller, target } from "@github/catalyst";
import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest } from "core/utils";
@controller
class AppModalElement extends HTMLElement {
class AppModalElement extends BaseComponentElement {
@target modalElement: HTMLElement;
@closest appMain: AppMainElement;
constructor() {
super();
}

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

@@ -1,11 +1,11 @@
import { attr, controller, target } from "@github/catalyst";
import { html, render } from "@github/jtml";
import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest, isTrue } from "core/utils";
@controller
class AppPaginationElement extends HTMLElement {
@closest appMain: AppMainElement;
class AppPaginationElement extends BaseComponentElement {
public items: Array<any>;
@attr page: number;
@attr rpp: number;
@@ -39,6 +39,7 @@ class AppPaginationElement extends HTMLElement {
};
executeFetch = async (options?) => {
console.log(this.page);
if (!options) {
options = {
rpp: this.rpp || 5,
@@ -52,6 +53,7 @@ class AppPaginationElement extends HTMLElement {
this.totalItems = response?.totalRecords;
this.page = response?.page;
this.rpp = response?.rpp;
console.log(this.page);
} catch (err) {
console.error(err);
}
@@ -67,6 +69,7 @@ class AppPaginationElement extends HTMLElement {
pageNext = () => {
const { rpp, totalItems, page } = this;
console.log(this.page);
const pageRange = Math.ceil(totalItems / rpp);
if (page < pageRange) {
this.page++;
@@ -84,7 +87,9 @@ class AppPaginationElement extends HTMLElement {
const renderItems = () => {
if (items?.length > 0) {
return html`${items?.map((item) => renderItem(item))}`;
return html`<span>
${items?.map((item) => renderItem(item))}
</span>`;
}
return html``;
};
@@ -92,6 +97,7 @@ class AppPaginationElement extends HTMLElement {
const renderPagination = () => {
if (totalItems > items?.length) {
const pageRange = Math.ceil(totalItems / rpp);
console.log(pageRange);
return html`
<div>
<button
@@ -115,16 +121,7 @@ class AppPaginationElement extends HTMLElement {
}
};
return html`<div>
<table>
${renderItems()}
</table>
${renderPagination()}
</div>`;
};
update = () => {
render(this.render(), this);
return html`<div>${renderItems()} ${renderPagination()}</div>`;
};
}

4
src/components/app-root/AppRootElement.ts
View File

@@ -1,11 +1,11 @@
import { controller, target } from "@github/catalyst";
import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest } from "core/utils";
@controller
class AppRootElement extends HTMLElement {
class AppRootElement extends BaseComponentElement {
@target rootElement: HTMLElement;
@closest appMain: AppMainElement;
constructor() {
super();
}

31
src/components/app-shadow/AppShadowElement.ts
View File

@@ -1,19 +1,24 @@
import { controller } from "@github/catalyst";
import style from "styles/main.scss";
@controller
class AppShadowElement extends HTMLElement {
constructor() {
super();
}
(function () {
const _shadow = new WeakMap();
connectedCallback() {
this.attachShadow({ mode: "open" });
const _appMain = document.createElement("app-main");
const _style = document.createElement("style");
_style.innerHTML = style;
@controller
class AppShadowElement extends HTMLElement {
constructor() {
super();
_shadow.set(this, this.attachShadow({ mode: "closed" }));
}
this.shadowRoot.appendChild(_style);
this.shadowRoot.appendChild(_appMain);
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);
}
}
}
})();

4
src/components/app-slot/AppSlotElement.ts
View File

@@ -1,11 +1,11 @@
import { controller, target } from "@github/catalyst";
import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest } from "core/utils";
@controller
class AppSlotElement extends HTMLElement {
class AppSlotElement extends BaseComponentElement {
@target slotElement: HTMLElement;
@closest appMain: AppMainElement;
constructor() {
super();
}

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

@@ -7,10 +7,10 @@ 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/";
@controller
class InputFieldElement extends HTMLElement {
@closest appMain: AppMainElement;
class InputFieldElement extends BaseComponentElement {
@attr name: string;
@attr type: string;
@attr label: string;
@@ -79,10 +79,6 @@ class InputFieldElement extends HTMLElement {
${this.error && html`<span>${this.error}</span>`}
</div>`;
};
update = () => {
render(this.render(), this);
};
}
export type { InputFieldElement };

8
src/components/menu-item/MenuItemElement.ts
View File

@@ -4,10 +4,10 @@ import { html, render, until } from "@github/jtml";
import { PingService } from "services/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { RouterService } from "core/services";
import { BaseComponentElement } from "common/";
@controller
class MenuItemElement extends HTMLElement {
@closest appMain: AppMainElement;
class MenuItemElement extends BaseComponentElement {
@attr path: string;
@attr title: string;
@target itemEl: HTMLElement;
@@ -45,8 +45,4 @@ class MenuItemElement extends HTMLElement {
</div>
`;
};
update = () => {
render(this.render(), this);
};
}

3
src/core/services/router-service/RouterService.ts
View File

@@ -47,9 +47,6 @@ class RouterService {
const _mainRoot = this.mainRoot;
const route = this.routerState;
if (path == route?.path || route?.path == "/not-found") {
if (route.middleware && typeof route.middleware == "function") {
if (route.middleware()) return;
}
let changed: boolean = false;
if (_mainRoot?.childNodes.length > 0) {
_mainRoot?.childNodes?.forEach?.((child: BaseLayoutElement) => {

2
src/index.ts
View File

@@ -1,3 +1,3 @@
import "layouts";
import "pages";
import "components";
import "pages";

17
src/layouts/menu-layout/MenuLayoutElement.ts
View File

@@ -15,16 +15,20 @@ class MenuLayoutElement extends BaseLayoutElement {
connectedCallback() {
this.update();
window.addEventListener("tokenchange", this.updateAuth);
window.addEventListener("routechanged", this.updateAuth);
}
disconnectedCallback(): void {
window.removeEventListener("tokenchange", this.updateAuth);
window.removeEventListener("routechanged", this.updateAuth);
}
get isAuth() {
const _hasToken = this.appMain?.isAuth;
const _hasData = this.appMain?.authStore?.user;
return _hasToken;
const _is = this.appMain?.routerService?.routerState?.middleware;
if (typeof _is == "function") {
return _is();
}
return !!_is;
}
updateAuth = () => {
@@ -32,13 +36,10 @@ class MenuLayoutElement extends BaseLayoutElement {
};
render = () => {
const _isAuth = this.isAuth;
return html`
<app-menu></app-menu>
${_isAuth ? html`<app-menu></app-menu>` : html``}
<app-slot data-target="menu-layout.appSlot"></app-slot>
`;
};
update = () => {
render(this.render(), this);
};
}

8
src/pages/history-page/HistoryPageElement.ts
View File

@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { TransactionsService } from "services/";
import { AppMainElement, AppPaginationElement } from "components/";
import { BasePageElement } from "common/";
@controller
class HistoryPageElement extends HTMLElement {
class HistoryPageElement extends BasePageElement {
private transactionsService: TransactionsService;
@closest appMain: AppMainElement;
@target pagination: AppPaginationElement;
constructor() {
super();
@@ -42,8 +42,4 @@ class HistoryPageElement extends HTMLElement {
></app-pagination>
`;
};
update = () => {
render(this.render(), this);
};
}

8
src/pages/home-page/HomePageElement.ts
View File

@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { PingService } from "services/";
import { AppMainElement } from "components/";
import { BasePageElement } from "common/";
@controller
class HomePageElement extends HTMLElement {
class HomePageElement extends BasePageElement {
private pingService: PingService;
@closest appMain: AppMainElement;
constructor() {
super();
}
@@ -48,8 +48,4 @@ class HomePageElement extends HTMLElement {
<button data-action="click:home-page#openModal">Test</button>
`;
};
update = () => {
render(this.render(), this);
};
}

17
src/pages/login-page/LoginPageElement.ts
View File

@@ -1,14 +1,20 @@
import { attr, targets, controller, target } from "@github/catalyst";
import {
attr,
targets,
controller,
target,
listenForBind,
} from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { AuthService, PingService } from "services/";
import { AppMainElement, InputFieldElement } from "components/";
import { RouterService } from "core/services";
import { BasePageElement } from "common/";
@controller
class LoginPageElement extends HTMLElement {
class LoginPageElement extends BasePageElement {
@targets inputs: Array<InputFieldElement>;
@closest appMain: AppMainElement;
authService: AuthService;
routerService: RouterService;
errorMessage: string;
@@ -48,6 +54,7 @@ class LoginPageElement extends HTMLElement {
onSubmit = async () => {
try {
console.log("test");
if (!this.validate()) {
return;
}
@@ -113,8 +120,4 @@ class LoginPageElement extends HTMLElement {
</div>
`;
};
update() {
render(this.render(), this);
}
}

4
src/pages/logout-page/LogoutPageElement.ts
View File

@@ -2,10 +2,10 @@ import { controller } from "@github/catalyst";
import { closest, update } from "core/utils";
import { AuthService } from "services/";
import { AppMainElement } from "components/";
import { BasePageElement } from "common/";
@controller
class LogoutPageElement extends HTMLElement {
@closest appMain: AppMainElement;
class LogoutPageElement extends BasePageElement {
authService: AuthService;
constructor() {
super();

8
src/pages/not-found/NotFoundElement.ts
View File

@@ -2,10 +2,10 @@ import { controller } from "@github/catalyst";
import { closest, update } from "core/utils";
import { html, render } from "@github/jtml";
import { AppMainElement } from "components/";
import { BasePageElement } from "common/";
@controller
class NotFoundElement extends HTMLElement {
@closest appMain: AppMainElement;
class NotFoundElement extends BasePageElement {
constructor() {
super();
}
@@ -19,8 +19,4 @@ class NotFoundElement extends HTMLElement {
<div><app-link data-to="/" data-title="Homepage"></app-link></div>
`;
};
update = () => {
render(this.render(), this);
};
}

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

@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { AuthService, PingService } from "services/";
import { AppMainElement, InputFieldElement } from "components/";
import { BasePageElement } from "common/";
@controller
class RegisterPageElement extends HTMLElement {
class RegisterPageElement extends BasePageElement {
@targets inputs: Array<InputFieldElement>;
@closest appMain: AppMainElement;
authService: AuthService;
constructor() {
super();
@@ -84,8 +84,4 @@ class RegisterPageElement extends HTMLElement {
</form>
`;
};
update = () => {
render(this.render(), this);
};
}