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

subscription list and modal restyling

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-26 18:31:09 +02:00
parent f594d45133
commit 5583ee9586
6 changed files with 179 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,6 +57,12 @@ class AppMainElement extends HTMLElement {
layout: 'menu-layout',
middleware: this.isAuth,
},
{
path: '/subscriptions',
component: 'subscription-list',
layout: 'menu-layout',
middleware: this.isAuth,
},
{
path: '/wallet',
component: 'history-page',
@@ -136,10 +142,18 @@ class AppMainElement extends HTMLElement {
this.closeModal();
this.appMain.addEventListener('routechanged', this.closeModal);
const _closeButton = document.createElement('div');
_closeButton.className = 'close-button';
_closeButton.setAttribute('data-action', 'click:app-main#closeModal');
_closeButton.setAttribute('data-target', 'app-modal.closeButton');
const _closeButtonDiv = document.createElement('div');
_closeButton.appendChild(_closeButtonDiv);
const _appModal = this.createAppModal();
const _modalContent = this.createModalContent(element, data);
const _modalOverlay = this.createModalOverlay();
_modalContent.appendChild(_closeButton);
_modalOverlay.appendChild(_modalContent);
_appModal.appendChild(_modalOverlay);
this.appendChild(_appModal);
@@ -216,9 +230,10 @@ class AppMainElement extends HTMLElement {
closeModal = (e?) => {
const selector = "[data-target='app-modal.modalContent']";
const closeButton = 'div.close-button';
if (this.appModal) {
if (e?.target) {
if (e?.target?.closest(selector)) return;
if (e?.target?.closest(selector) && !e?.target?.closest(closeButton)) return;
if (e?.target?.closest('app-main')) {
this.removeChild(this.appModal);
}

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

@@ -87,6 +87,15 @@ class AppMenuElement extends BaseComponentElement {
}
};
modalSubscription = (s): void => {
const _modal = this.appMain.appModal;
if (_modal) {
this.appMain.closeModal();
} else {
this.appMain.createModal('subscription-create');
}
};
render = (): TemplateResult => {
const { isAuth, totalWallets, walletData } = this;
@@ -121,6 +130,7 @@ class AppMenuElement extends BaseComponentElement {
<div data-target="app-menu.sidebar">
${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')}
${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')}
${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')}
${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')}