diff --git a/src/pages/subscription-list/SubscriptionListElement.ts b/src/pages/subscription-list/SubscriptionListElement.ts index 56ff39a..ae30d66 100644 --- a/src/pages/subscription-list/SubscriptionListElement.ts +++ b/src/pages/subscription-list/SubscriptionListElement.ts @@ -3,6 +3,7 @@ import { html, TemplateResult } from 'core/utils'; import { SubscriptionService } from 'services/'; import { AppMainElement, AppPaginationElement } from 'components/'; import { BasePageElement } from 'common/'; +import dayjs from 'dayjs'; @controller class SubscriptionListElement extends BasePageElement { @@ -18,6 +19,7 @@ class SubscriptionListElement extends BasePageElement { this.subscriptionService = new SubscriptionService(this.appMain?.appService); this.update(); this.pagination?.setFetchFunc?.(this.getSubscriptions, true)!; + this.pagination?.setCustomRenderItem?.(this.renderSubscription)!; this.appMain.addEventListener('tokenchange', this.update); this.appMain.addEventListener('transactionupdate', this.transactionUpdated); }; @@ -31,6 +33,25 @@ class SubscriptionListElement extends BasePageElement { this.pagination?.executeFetch(); }; + renderSubscription = (item) => html` + ${dayjs(item.lastTransactionDate).format("MMM DD 'YY")} + every ${item.customRange} ${item.rangeName} + ${item.description} + ${dayjs(item.nextTransaction).format("MMM DD 'YY")} + + + ${item?.transactionType?.type == 'expense' ? '- ' : ''} + ${Number(item.amount).toLocaleString('en-US', { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + })} + + (${item.currency ? item.currency : 'USD'}) + + `; + getSubscriptions = async (options): Promise => { try { if (this?.routerService?.routerState?.data) { @@ -39,9 +60,29 @@ class SubscriptionListElement extends BasePageElement { options['walletId'] = walletId; } } - options.embed = 'TransactionType'; + options.embed = 'TransactionType,SubscriptionType'; options.sortBy = 'dateCreated|desc'; const response = await this.subscriptionService.getAll(options); + response?.items?.map?.((i) => { + switch (i.subscriptionType.type) { + case 'monthly': + i.rangeName = i.customRange != 1 ? 'Months' : 'Month'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(i.customRange, 'month'); + break; + case 'yearly': + i.rangeName = i.customRange != 1 ? 'Years' : 'Year'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(i.customRange, 'year'); + break; + case 'daily': + i.rangeName = i.customRange != 1 ? 'Days' : 'Day'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(i.customRange, 'day'); + break; + case 'weekly': + i.rangeName = i.customRange != 1 ? 'Weeks' : 'Week'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(7 * i.customRange, 'day'); + break; + } + }); return response; } catch (err) { throw err; @@ -57,7 +98,10 @@ class SubscriptionListElement extends BasePageElement { }; return html`
${renderWallet()} - +
`; }; } diff --git a/src/pages/wallet-page/WalletPageElement.ts b/src/pages/wallet-page/WalletPageElement.ts index c9d7afd..51a708a 100644 --- a/src/pages/wallet-page/WalletPageElement.ts +++ b/src/pages/wallet-page/WalletPageElement.ts @@ -3,6 +3,7 @@ import { html, TemplateResult } from 'core/utils'; import { SubscriptionService, TransactionsService, WalletService } from 'services/'; import { AppMainElement, AppPaginationElement, WalletHeaderElement } from 'components/'; import { BasePageElement } from 'common/'; +import dayjs from 'dayjs'; @controller class WalletPageElement extends BasePageElement { @@ -32,6 +33,7 @@ class WalletPageElement extends BasePageElement { this.update(); this.pagination?.setFetchFunc?.(this.getTransactions, true)!; this.paginationSub?.setFetchFunc?.(this.getSubscriptions, true)!; + this.paginationSub?.setCustomRenderItem?.(this.renderSubscription)!; this.appMain.addEventListener('tokenchange', this.update); this.appMain.addEventListener('transactionupdate', this.transactionUpdated); }; @@ -64,6 +66,25 @@ class WalletPageElement extends BasePageElement { } }; + renderSubscription = (item) => html` + ${dayjs(item.lastTransactionDate).format("MMM DD 'YY")} + every ${item.customRange} ${item.rangeName} + ${item.description} + ${dayjs(item.nextTransaction).format("MMM DD 'YY")} + + + ${item?.transactionType?.type == 'expense' ? '- ' : ''} + ${Number(item.amount).toLocaleString('en-US', { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + })} + + (${item.currency ? item.currency : 'USD'}) + + `; + getSubscriptions = async (options): Promise => { try { if (this?.routerService?.routerState?.data) { @@ -72,9 +93,29 @@ class WalletPageElement extends BasePageElement { options['walletId'] = walletId; } } - options.embed = 'TransactionType'; + options.embed = 'TransactionType,SubscriptionType'; options.sortBy = 'dateCreated|desc'; const response = await this.subscriptionService.getAll(options); + response?.items?.map?.((i) => { + switch (i.subscriptionType.type) { + case 'monthly': + i.rangeName = i.customRange != 1 ? 'Months' : 'Month'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(i.customRange, 'month'); + break; + case 'yearly': + i.rangeName = i.customRange != 1 ? 'Years' : 'Year'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(i.customRange, 'year'); + break; + case 'daily': + i.rangeName = i.customRange != 1 ? 'Days' : 'Day'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(i.customRange, 'day'); + break; + case 'weekly': + i.rangeName = i.customRange != 1 ? 'Weeks' : 'Week'; + i.nextTransaction = dayjs(i.lastTransactionDate).add(7 * i.customRange, 'day'); + break; + } + }); return response; } catch (err) { throw err; @@ -162,7 +203,7 @@ class WalletPageElement extends BasePageElement {

Transactions

Subscriptions

- + `; }; } diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss index ff587bf..d1da237 100644 --- a/src/styles/app-pagination/app-pagination.scss +++ b/src/styles/app-pagination/app-pagination.scss @@ -97,5 +97,96 @@ app-pagination { } } } + table.subscription-table { + margin: 0 0 3em 0; + padding: 0; + width: 100%; + background-color: $gray-09; + border: 1px solid $gray-09; + border-radius: 4px; + display: block; + &.--loading { + min-height: 80px; + tr { + td { + visibility: hidden; + } + } + } + tr { + background-color: $gray-07; + padding: 4px 12px; + border-radius: 4px; + display: grid; + margin: 6px 8px; + &.col-3 { + grid-template-columns: repeat(3, 1fr); + } + &.col-2 { + grid-template-columns: repeat(2, 1fr); + } + &.col-1 { + grid-template-columns: 1fr; + } + &.col-4 { + grid-template-columns: repeat(4, 1fr); + } + &.col-5 { + grid-template-columns: repeat(5, 1fr); + } + &.col-6 { + grid-template-columns: repeat(6, 1fr); + } + &.col-subscription { + grid-template-columns: 1fr 2fr 10fr 1fr 2fr; + } + td, + th { + margin: 0 12px; + overflow: hidden; // Or flex might break + list-style: none; + &.--left { + text-align: left; + } + &.--right { + text-align: right; + } + &.balance-cell { + .balance { + display: inline; + &.--positive { + color: $green-01; + } + &.--negative { + color: $red-01; + } + } + .currency { + display: inline; + color: $gray-10; + } + } + } + } + .paginate { + position: relative; + height: 33px; + margin-bottom: 7px; + .--total { + position: absolute; + left: 7px; + bottom: 9px; + color: $gray-05; + } + .--footer { + position: absolute; + right: 7px; + .--pages { + margin-right: 7px; + color: $gray-05; + } + } + } + } } }