From 11bdec457c2500d73c081c2bf7f72961403f737f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Tue, 1 Jun 2021 23:41:54 +0200 Subject: [PATCH] fixed menu rendering --- src/components/app-menu/AppMenuElement.ts | 115 +++++++++--------- src/components/index.ts | 3 +- src/components/menu-item/MenuItemElement.ts | 52 ++++++++ .../services/router-service/RouterService.ts | 33 +++-- src/pages/history-page/HistoryPageElement.ts | 5 +- src/pages/home-page/HomePageElement.ts | 1 - src/styles/sidebar/sidebar.scss | 27 ++++ 7 files changed, 164 insertions(+), 72 deletions(-) create mode 100644 src/components/menu-item/MenuItemElement.ts diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index cfd8c05..7824da5 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -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, totalWallets: number) { + setWallets = (wallets: Array, 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`${wallet.name}` + ); + } + return null; + }; + render = () => { + const { isAuth, totalWallets, walletData } = this; + + const regularMenu = (path: string, title: string): TemplateResult => + html`${title}`; + 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) => { + 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`
-
    -
  • - Home -
    • - ${this.isAuth - ? html`
  • - History -
    • ` - : null} - ${this.isAuth && this.totalWallets > 0 - ? this.walletData.map((wallet) => { - return html` -
  • - ${wallet.name} -
    • - `; - }) - : null} - ${this.isAuth && this.totalWallets > 2 - ? html` -
  • - Other -
    • - ` - : null} - ${this.isAuth - ? html`
  • - Logout -
    • ` - : null} - ${!this.isAuth - ? html` -
  • - Login -
    • -
  • - Register -
    • - ` - : null} -
+ ${regularMenu("/", "Home")} ${authMenu("/history", "History")} + ${renderWallets(walletData)} ${otherWallets()} + ${authMenu("/logout", "Logout")} + ${notAuthMenu("/login", "Login")} + ${notAuthMenu("/register", "Register")}
`; }; diff --git a/src/components/index.ts b/src/components/index.ts index 53a3fc4..7deca3a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -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"; diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts new file mode 100644 index 0000000..9bb4fc1 --- /dev/null +++ b/src/components/menu-item/MenuItemElement.ts @@ -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` +
+ ${this.title} +
+ `; + }; + + update = () => { + render(this.render(), this); + }; +} diff --git a/src/core/services/router-service/RouterService.ts b/src/core/services/router-service/RouterService.ts index c85cc13..58e0234 100644 --- a/src/core/services/router-service/RouterService.ts +++ b/src/core/services/router-service/RouterService.ts @@ -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) => { + public setRoutes = (routes: Array): 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 { diff --git a/src/pages/history-page/HistoryPageElement.ts b/src/pages/history-page/HistoryPageElement.ts index 2c7fdc1..b21994e 100644 --- a/src/pages/history-page/HistoryPageElement.ts +++ b/src/pages/history-page/HistoryPageElement.ts @@ -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) { this.transactions = transactions; + console.log(transactions); this.update(); } @@ -56,7 +57,7 @@ class HistoryPageElement extends HTMLElement {
    ${this.transactions ? this.transactions.map((transaction) => { - html`
  • ${transaction.description}
    • `; + return html`
  • ${transaction.description}
    • `; }) : null}
diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts index 1e9757c..c87ab99 100644 --- a/src/pages/home-page/HomePageElement.ts +++ b/src/pages/home-page/HomePageElement.ts @@ -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); } diff --git a/src/styles/sidebar/sidebar.scss b/src/styles/sidebar/sidebar.scss index 91f56c5..602a14e 100644 --- a/src/styles/sidebar/sidebar.scss +++ b/src/styles/sidebar/sidebar.scss @@ -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; + } + } + } + } + } } }