subscription list and modal restyling

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

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 {
 			<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')}

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';

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<any> => {
+		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`<span>${this.routerService?.routerState?.data?.walletId}</span>`;
+			}
+			return html``;
+		};
+		return html`<div>
+			${renderWallet()}
+			<app-pagination data-target="subscription-list.pagination"></app-pagination>
+		</div>`;
+	};
+}
+
+export type { SubscriptionListElement };

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<any> => {
@@ -59,6 +64,23 @@ class WalletPageElement extends BasePageElement {
 		}
 	};
 
+	getSubscriptions = async (options): Promise<any> => {
+		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<void> => {
 		try {
 			const response = await this.walletService.getBalance({
@@ -137,7 +159,10 @@ class WalletPageElement extends BasePageElement {
 		};
 		return html`<div>
 			${renderHeader()} ${renderWallet()}
+			<h2>Transactions</h2>
 			<app-pagination data-target="wallet-page.pagination"></app-pagination>
+			<h2>Subscriptions</h2>
+			<app-pagination data-target="wallet-page.paginationSub"></app-pagination>
 		</div>`;
 	};
 }

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%;
+			}
+		}
+	}
+}