diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index 38fb7ac..d667133 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -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); } diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 82e891d..beb3b74 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -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 {
${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)} ${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} ${notAuthMenu('/register', 'Register')} diff --git a/src/pages/index.ts b/src/pages/index.ts index 78ff56a..314fc18 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -8,4 +8,5 @@ export * from './wallet-list/WalletListElement'; export * from './wallet-create/WalletCreateElement'; export * from './transaction-create/TransactionCreateElement'; export * from './subscription-create/SubscriptionCreateElement'; +export * from './subscription-list/SubscriptionListElement'; export * from './wallet-page/WalletPageElement'; diff --git a/src/pages/subscription-list/SubscriptionListElement.ts b/src/pages/subscription-list/SubscriptionListElement.ts new file mode 100644 index 0000000..56ff39a --- /dev/null +++ b/src/pages/subscription-list/SubscriptionListElement.ts @@ -0,0 +1,65 @@ +import { controller, target } from '@github/catalyst'; +import { html, TemplateResult } from 'core/utils'; +import { SubscriptionService } from 'services/'; +import { AppMainElement, AppPaginationElement } from 'components/'; +import { BasePageElement } from 'common/'; + +@controller +class SubscriptionListElement extends BasePageElement { + private subscriptionService: SubscriptionService; + @target pagination: AppPaginationElement; + constructor() { + super({ + title: 'Subscription History', + }); + } + + elementConnected = (): void => { + this.subscriptionService = new SubscriptionService(this.appMain?.appService); + this.update(); + this.pagination?.setFetchFunc?.(this.getSubscriptions, true)!; + this.appMain.addEventListener('tokenchange', this.update); + this.appMain.addEventListener('transactionupdate', this.transactionUpdated); + }; + + elementDisconnected = (appMain: AppMainElement): void => { + appMain?.removeEventListener('tokenchange', this.update); + appMain?.removeEventListener('transactionupdate', this.transactionUpdated); + }; + + transactionUpdated = () => { + this.pagination?.executeFetch(); + }; + + getSubscriptions = async (options): Promise => { + try { + if (this?.routerService?.routerState?.data) { + const { walletId } = this?.routerService?.routerState?.data; + if (walletId) { + options['walletId'] = walletId; + } + } + options.embed = 'TransactionType'; + options.sortBy = 'dateCreated|desc'; + const response = await this.subscriptionService.getAll(options); + return response; + } catch (err) { + throw err; + } + }; + + render = (): TemplateResult => { + const renderWallet = () => { + if (this.routerService?.routerState?.data?.walletId) { + return html`${this.routerService?.routerState?.data?.walletId}`; + } + return html``; + }; + return html`
+ ${renderWallet()} + +
`; + }; +} + +export type { SubscriptionListElement }; diff --git a/src/pages/wallet-page/WalletPageElement.ts b/src/pages/wallet-page/WalletPageElement.ts index 14ca618..c9d7afd 100644 --- a/src/pages/wallet-page/WalletPageElement.ts +++ b/src/pages/wallet-page/WalletPageElement.ts @@ -1,14 +1,16 @@ import { controller, target } from '@github/catalyst'; import { html, TemplateResult } from 'core/utils'; -import { TransactionsService, WalletService } from 'services/'; +import { SubscriptionService, TransactionsService, WalletService } from 'services/'; import { AppMainElement, AppPaginationElement, WalletHeaderElement } from 'components/'; import { BasePageElement } from 'common/'; @controller class WalletPageElement extends BasePageElement { private transactionsService: TransactionsService; + private subscriptionService: SubscriptionService; private walletService: WalletService; @target pagination: AppPaginationElement; + @target paginationSub: AppPaginationElement; @target walletHeader: WalletHeaderElement; walletId: string; constructor() { @@ -20,6 +22,7 @@ class WalletPageElement extends BasePageElement { elementConnected = (): void => { this.walletService = new WalletService(this.appMain?.appService); this.transactionsService = new TransactionsService(this.appMain?.appService); + this.subscriptionService = new SubscriptionService(this.appMain?.appService); if (this?.routerService?.routerState?.data) { const { walletId } = this?.routerService?.routerState?.data; if (walletId) { @@ -28,6 +31,7 @@ class WalletPageElement extends BasePageElement { } this.update(); this.pagination?.setFetchFunc?.(this.getTransactions, true)!; + this.paginationSub?.setFetchFunc?.(this.getSubscriptions, true)!; this.appMain.addEventListener('tokenchange', this.update); this.appMain.addEventListener('transactionupdate', this.transactionUpdated); }; @@ -40,6 +44,7 @@ class WalletPageElement extends BasePageElement { transactionUpdated = () => { this.walletHeader?.executeFetch(); this.pagination?.executeFetch(); + this.paginationSub?.executeFetch(); }; getTransactions = async (options): Promise => { @@ -59,6 +64,23 @@ class WalletPageElement extends BasePageElement { } }; + getSubscriptions = async (options): Promise => { + try { + if (this?.routerService?.routerState?.data) { + const { walletId } = this?.routerService?.routerState?.data; + if (walletId) { + options['walletId'] = walletId; + } + } + options.embed = 'TransactionType'; + options.sortBy = 'dateCreated|desc'; + const response = await this.subscriptionService.getAll(options); + return response; + } catch (err) { + throw err; + } + }; + getBalance = async (): Promise => { try { const response = await this.walletService.getBalance({ @@ -137,7 +159,10 @@ class WalletPageElement extends BasePageElement { }; return html`
${renderHeader()} ${renderWallet()} +

Transactions

+

Subscriptions

+
`; }; } diff --git a/src/styles/modal/modal.scss b/src/styles/modal/modal.scss index 96d109c..36932eb 100644 --- a/src/styles/modal/modal.scss +++ b/src/styles/modal/modal.scss @@ -15,7 +15,7 @@ app-modal { z-index: 1005; width: 960px; min-height: 160px; - max-height: 560px; + max-height: 580px; overflow-y: auto; padding-bottom: 10px; margin: 0; @@ -23,11 +23,48 @@ app-modal { left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - background: $gray-05; - color: $black; + background: $gray-10; + color: $white; box-shadow: 1px 1px 5px -5px #868686; border-radius: 3px; + .close-button { + position: absolute; + top: 2px; + right: 2px; + div { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + width: 40px; + height: 40px; + cursor: pointer; + &:hover { + &:before, + &:after { + background-color: $gray-05; + } + } + &:before, + &:after { + position: absolute; + content: ''; + width: 100%; + height: 1px; + background-color: $white; + } + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } + } + } + .page { &.--title { margin-top: 4px; @@ -37,7 +74,7 @@ app-modal { app-form { .app-form { - margin-bottom: 64px; + margin-bottom: 54px; .form-buttons { .button-content { position: absolute; @@ -50,3 +87,23 @@ app-modal { } } } + +@media (max-width: 1020px) { + app-modal { + [data-target='app-modal.modalOverlay'] { + [data-target='app-modal.modalContent'] { + width: 95%; + } + } + } +} + +@media (max-height: 600px) { + app-modal { + [data-target='app-modal.modalOverlay'] { + [data-target='app-modal.modalContent'] { + height: 95%; + } + } + } +}