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

fixed menu rendering

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-01 23:41:54 +02:00
parent eca3d7db4a
commit 11bdec457c
7 changed files with 164 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { controller, target } from "@github/catalyst";
import { html, render } from "@github/jtml";
import { html, render, TemplateResult } from "@github/jtml";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest, update } from "core/utils";
import { WalletService } from "services/";
@@ -16,8 +16,11 @@ class AppMenuElement extends HTMLElement {
connectedCallback() {
this.walletService = new WalletService(this.appMain?.appService);
this.update();
if (this.appMain.isAuth) this.getWallets();
if (this.appMain.isAuth) {
this.getWallets();
} else {
this.update();
}
window.addEventListener("tokenchange", this.updateToken);
}
@@ -34,12 +37,11 @@ class AppMenuElement extends HTMLElement {
}
};
setWallets(wallets: Array<any>, totalWallets: number) {
setWallets = (wallets: Array<any>, totalWallets: number) => {
this.walletData = wallets;
this.totalWallets = totalWallets;
console.log("eh");
this.update();
}
};
updateToken = () => {
if (this.isAuth) {
@@ -53,60 +55,63 @@ class AppMenuElement extends HTMLElement {
render(this.render(), this);
};
get isAuth() {
return this.appMain.isAuth;
get isAuth(): boolean {
if (this.appMain?.isAuth) {
console.log(true);
return true;
}
return false;
}
renderWallets = () => {
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;
};
render = () => {
const { isAuth, totalWallets, walletData } = this;
const regularMenu = (path: string, title: string): TemplateResult =>
html`<menu-item data-path="${path}">${title}</menu-item>`;
const authMenu = (path: string, title: string): TemplateResult => {
if (isAuth) {
return regularMenu(path, title);
}
return html``;
};
const notAuthMenu = (path: string, title: string): TemplateResult => {
if (!isAuth) {
return regularMenu(path, title);
}
return html``;
};
const renderWallets = (wallets: Array<any>) => {
if (isAuth && totalWallets > 0) {
return html`${wallets.map((wallet) =>
regularMenu(`wallet/${wallet.id}`, wallet.name)
)}`;
}
return html``;
};
const otherWallets = () => {
if (isAuth && totalWallets > 2) {
return regularMenu("/wallet/all", "Other");
}
return html``;
};
return html`
<div data-target="app-menu.sidebar">
<ul>
<li>
<app-link data-to="/">Home</app-link>
</li>
${this.isAuth
? html` <li>
<app-link data-to="/history">History</app-link>
</li>`
: null}
${this.isAuth && this.totalWallets > 0
? this.walletData.map((wallet) => {
return html`
<li>
<app-link data-to="/wallet/${wallet.id}"
>${wallet.name}</app-link
>
</li>
`;
})
: null}
${this.isAuth && this.totalWallets > 2
? html`
<li>
<app-link data-to="/wallet/all"
>Other</app-link
>
</li>
`
: null}
${this.isAuth
? html` <li>
<app-link data-to="/logout">Logout</app-link>
</li>`
: null}
${!this.isAuth
? html`
<li>
<app-link data-to="/login">Login</app-link>
</li>
<li>
<app-link data-to="/register"
>Register</app-link
>
</li>
`
: null}
</ul>
${regularMenu("/", "Home")} ${authMenu("/history", "History")}
${renderWallets(walletData)} ${otherWallets()}
${authMenu("/logout", "Logout")}
${notAuthMenu("/login", "Login")}
${notAuthMenu("/register", "Register")}
</div>
`;
};

3
src/components/index.ts
View File

@@ -1,6 +1,7 @@
export * from "./app-shadow/AppShadowElement";
export * from "./app-main/AppMainElement";
export * from "./app-link/AppLinkElement";
export * from "./menu-item/MenuItemElement";
export * from "./app-main/AppMainElement";
export * from "./app-modal/AppModalElement";
export * from "./app-root/AppRootElement";
export * from "./app-slot/AppSlotElement";

52
src/components/menu-item/MenuItemElement.ts Normal file
View File

@@ -0,0 +1,52 @@
import { attr, targets, controller, target } 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";
@controller
class MenuItemElement extends HTMLElement {
@closest appMain: AppMainElement;
@attr path: string;
@attr title: string;
@target itemEl: HTMLElement;
routerService: RouterService;
constructor() {
super();
}
public connectedCallback(): void {
this.routerService = this.appMain?.routerService;
if (!this.title && this.innerText) {
const _slottedText = this.innerText;
this.innerText = null;
this.title = _slottedText;
}
this.update();
window.addEventListener("routechanged", this.update);
}
public disconnectedCallback(): void {
window.removeEventListener("routechanged", this.update);
}
get current() {
return this.routerService.comparePath(this.path);
}
render = () => {
return html`
<div
class="${this.current ? "selected " : ""}menu-item"
data-target="menu-item.itemEl"
>
<app-link data-to="${this.path}">${this.title}</app-link>
</div>
`;
};
update = () => {
render(this.render(), this);
};
}

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

@@ -9,7 +9,7 @@ class RouterService {
};
constructor(private mainRoot: ShadowRoot | HTMLElement) {}
get routerState() {
get routerState(): RouteState {
const historyLen = this.historyStack?.length;
if (historyLen < 1) {
return null;
@@ -17,7 +17,7 @@ class RouterService {
return this.historyStack[historyLen - 1];
}
get emptyState() {
get emptyState(): boolean {
const historyLen = this.historyStack?.length;
if (historyLen < 2) {
return true;
@@ -26,7 +26,7 @@ class RouterService {
}
}
setRoutes = (routes: Array<any>) => {
public setRoutes = (routes: Array<any>): void => {
if (!Array.isArray(this._routes)) this._routes = [];
routes.forEach((route) => {
const { path, component, data, layout, middleware } = route;
@@ -41,7 +41,7 @@ class RouterService {
});
};
update() {
public update = (): void => {
if (!this._routes) return;
const path = window.location.pathname;
const _mainRoot = this.mainRoot;
@@ -119,9 +119,9 @@ class RouterService {
this.update();
}
window.dispatchEvent(this.domEvents.routechanged);
}
};
goTo(path: string) {
public goTo = (path: string): void => {
if (!Array.isArray(this.historyStack)) this.historyStack = [];
const currentPath = window.location.pathname;
if (path == currentPath) return;
@@ -134,9 +134,9 @@ class RouterService {
window.history.pushState({}, "", url.toString());
this.update();
}
}
};
goBack() {
public goBack = (): void => {
if (!Array.isArray(this.historyStack)) this.historyStack = [];
const lenHistory = this.historyStack.length;
if (lenHistory > 1) {
@@ -147,17 +147,17 @@ class RouterService {
this.historyStack.pop();
}
this.update();
}
};
init() {
public init = (): void => {
window.addEventListener("popstate", () => {
this.historyStack.pop();
this.update();
});
this.update();
}
};
findByPath() {
public findByPath = (): RouteState => {
const path = window.location.pathname;
const _index = this._routes.findIndex((route) => route.path === path);
const _indexOfEmpty = this._routes.findIndex(
@@ -169,7 +169,14 @@ class RouterService {
return new RouteState("/not-found", "not-found");
}
return this._routes[_index];
}
};
public comparePath = (path: string): boolean => {
if (this.routerState?.path === path) {
return true;
}
return false;
};
}
class RouteState {

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

@@ -30,7 +30,7 @@ class HistoryPageElement extends HTMLElement {
try {
const response = await this.transactionsService.getAll();
if (response) {
this.setTransactions(response);
this.setTransactions(response?.items);
}
} catch (err) {
throw err;
@@ -39,6 +39,7 @@ class HistoryPageElement extends HTMLElement {
setTransactions(transactions: Array<any>) {
this.transactions = transactions;
console.log(transactions);
this.update();
}
@@ -56,7 +57,7 @@ class HistoryPageElement extends HTMLElement {
<ul>
${this.transactions
? this.transactions.map((transaction) => {
html` <li>${transaction.description}</li> `;
return html` <li>${transaction.description}</li> `;
})
: null}
</ul>

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

@@ -14,7 +14,6 @@ class HomePageElement extends HTMLElement {
connectedCallback() {
this.pingService = new PingService(this.appMain?.appService);
if (this.appMain.isAuth) this.getPong();
this.update();
window.addEventListener("tokenchange", this.update);
}

27
src/styles/sidebar/sidebar.scss
View File

@@ -9,6 +9,33 @@ app-menu {
overflow: auto;
top: 0;
left: 0;
menu-item {
[data-target="menu-item.itemEl"] {
app-link {
[data-target="app-link.main"] {
width: 100%;
height: 25px;
background-color: #828282;
color: #d5d5d5;
border-radius: 0;
padding-bottom: 25px;
margin: 1px auto;
&:hover {
background-color: #82878a;
}
}
}
&.selected {
app-link {
[data-target="app-link.main"] {
color: #1a1a1a;
background-color: #6e838d;
}
}
}
}
}
}
}