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

closed shadowRoot and changed pages, components, layout to extend base class

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

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);
};
}