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

fixed subscription table

Browse Source
This commit is contained in:
Fran Jurmanović
2021-07-25 10:48:03 +02:00
parent ac13cdcc11
commit 4a69e8c370
3 changed files with 180 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/subscription-list/SubscriptionListElement.ts
View File

@@ -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`<tr class="col-subscription">
<td class="--left">${dayjs(item.lastTransactionDate).format("MMM DD 'YY")}</td>
<td class="--left">every ${item.customRange} ${item.rangeName}</td>
<td class="--left">${item.description}</td>
<td class="--left">${dayjs(item.nextTransaction).format("MMM DD 'YY")}</td>
<td class="balance-cell --right">
<span
class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense' ? '--positive' : '--negative'}"
>
${item?.transactionType?.type == 'expense' ? '- ' : ''}
${Number(item.amount).toLocaleString('en-US', {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
})}
</span>
<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
</td>
</tr>`;
getSubscriptions = async (options): Promise<any> => {
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`<div>
${renderWallet()}
<app-pagination data-target="subscription-list.pagination"></app-pagination>
<app-pagination
data-target="subscription-list.pagination"
data-table-layout="subscription-table"
></app-pagination>
</div>`;
};
}

45
src/pages/wallet-page/WalletPageElement.ts
View File

@@ -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`<tr class="col-subscription">
<td class="--left">${dayjs(item.lastTransactionDate).format("MMM DD 'YY")}</td>
<td class="--left">every ${item.customRange} ${item.rangeName}</td>
<td class="--left">${item.description}</td>
<td class="--left">${dayjs(item.nextTransaction).format("MMM DD 'YY")}</td>
<td class="balance-cell --right">
<span
class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense' ? '--positive' : '--negative'}"
>
${item?.transactionType?.type == 'expense' ? '- ' : ''}
${Number(item.amount).toLocaleString('en-US', {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
})}
</span>
<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
</td>
</tr>`;
getSubscriptions = async (options): Promise<any> => {
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 {
<h2>Transactions</h2>
<app-pagination data-target="wallet-page.pagination"></app-pagination>
<h2>Subscriptions</h2>
<app-pagination data-target="wallet-page.paginationSub"></app-pagination>
<app-pagination data-target="wallet-page.paginationSub" data-table-layout="subscription-table"></app-pagination>
</div>`;
};
}

91
src/styles/app-pagination/app-pagination.scss
View File

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