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

layout fixes for edit

Browse Source
This commit is contained in:
Fran Jurmanovic
2021-08-02 04:31:59 -07:00
parent 4abcba0143
commit 86a8852784
15 changed files with 130 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/subscription-create/SubscriptionCreateElement.ts
View File

@@ -147,6 +147,7 @@ class SubscriptionCreateElement extends BasePageElement {
if (walletData.walletId) {
this.appMain?.closeModal();
} else {
this.appMain?.closeModal();
this.routerService.goTo('/subscriptions', {
walletId: response.walletId,
});

1
src/pages/subscription-edit/SubscriptionEditElement.ts
View File

@@ -154,6 +154,7 @@ class SubscriptionEditElement extends BasePageElement {
if (walletData.id) {
this.appMain?.closeModal();
} else {
this.appMain?.closeModal();
this.routerService.goTo('/subscriptions', {
walletId: response.walletId,
});

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

@@ -44,9 +44,10 @@ class SubscriptionListElement extends BasePageElement {
}
}
subscriptionEnd = (id) => {
subscriptionEnd = async (id) => {
if (confirm('Are you sure you want to end this subscription?')) {
this.subscriptionService.endSubscription(id);
await this.subscriptionService.endSubscription(id);
this.appMain.triggerTransactionUpdate();
}
}
@@ -67,10 +68,12 @@ class SubscriptionListElement extends BasePageElement {
</span>
<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
</td>
<td class="--left">
<span><button @click=${() => this.subscriptionEdit(item.id)}}>Edit</button></span>
<span><button @click=${() => this.subscriptionEnd(item.id)}}>End</button></span>
</td>
${item.hasEnd ? html`` : html`
<td class="--right">
<span><button class="btn btn-rounded btn-gray" @click=${() => this.subscriptionEdit(item.id)}}>Edit</button></span>
<span><button class="btn btn-rounded btn-alert" @click=${() => this.subscriptionEnd(item.id)}}>End</button></span>
</td>`
}
</tr>`;
getSubscriptions = async (options): Promise<any> => {

1
src/pages/transaction-create/TransactionCreateElement.ts
View File

@@ -117,6 +117,7 @@ class TransactionCreateElement extends BasePageElement {
if (walletData.walletId) {
this.appMain?.closeModal();
} else {
this.appMain?.closeModal();
this.routerService.goTo('/history', {
walletId: response.walletId,
});

1
src/pages/transaction-edit/TransactionEditElement.ts
View File

@@ -2,7 +2,6 @@ import { targets, controller, target } from '@github/catalyst';
import { html, TemplateResult } from 'core/utils';
import { AuthService, TransactionsService, TransactionTypeService, WalletService } from 'services/';
import { AppFormElement, InputFieldElement } from 'components/';
import { RouterService } from 'core/services';
import { BasePageElement } from 'common/';
import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
import dayjs from 'dayjs';

4
src/pages/wallet-list/WalletListElement.ts
View File

@@ -55,8 +55,8 @@ class WalletListElement extends BasePageElement {
renderItem = (item): TemplateResult => html`<tr class="col-wallet">
<td><app-link class="wallet-item" data-to="/wallet/${item.id}" data-title="${item.name}"></app-link></td>
<td>
<span><button @click=${() => this.walletEdit(item.id)}}>Edit</button></span>
<td class="--right">
<span><button class="btn btn-rounded btn-gray" @click=${() => this.walletEdit(item.id)}}>Edit</button></span>
</td>
</tr>`;

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

@@ -14,13 +14,21 @@ class WalletPageElement extends BasePageElement {
@target paginationSub: AppPaginationElement;
@target walletHeader: WalletHeaderElement;
walletId: string;
walletTitle: string;
constructor() {
super({
title: 'Wallet',
title: 'Wallet'
});
}
elementConnected = (): void => {
get pageTitle(){
if (this.walletTitle) {
return `Wallet - ${this.walletTitle}`
}
return 'Wallet'
}
elementConnected = async(): Promise<void> => {
this.walletService = new WalletService(this.appMain?.appService);
this.transactionsService = new TransactionsService(this.appMain?.appService);
this.subscriptionService = new SubscriptionService(this.appMain?.appService);
@@ -30,15 +38,18 @@ class WalletPageElement extends BasePageElement {
this.walletId = walletId;
}
}
await this.getWallet();
this.update();
this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
this.paginationSub?.setFetchFunc?.(this.getSubscriptions, true)!;
this.paginationSub?.setCustomRenderItem?.(this.renderSubscription)!;
this.appMain.addEventListener('walletupdate', this.getWallet);
this.appMain.addEventListener('tokenchange', this.update);
this.appMain.addEventListener('transactionupdate', this.transactionUpdated);
};
elementDisconnected = (appMain: AppMainElement): void => {
appMain?.removeEventListener('walletupdate', this.getWallet);
appMain?.removeEventListener('tokenchange', this.update);
appMain?.removeEventListener('transactionupdate', this.transactionUpdated);
};
@@ -66,6 +77,35 @@ class WalletPageElement extends BasePageElement {
}
};
getWallet = async() => {
try {
const id = this.walletId;
const response = await this.walletService.get(id, null);
this.walletTitle = response.name;
} catch (err) {
throw err;
}
this.update();
}
subscriptionEdit = (id) => {
const _modal = this.appMain.appModal;
if (_modal) {
this.appMain.closeModal();
} else {
this.appMain.createModal('subscription-edit', {
id: id
});
}
}
subscriptionEnd = async (id) => {
if (confirm('Are you sure you want to end this subscription?')) {
await this.subscriptionService.endSubscription(id);
this.appMain.triggerTransactionUpdate();
}
}
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>
@@ -83,6 +123,12 @@ class WalletPageElement extends BasePageElement {
</span>
<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
</td>
${item.hasEnd ? html`` : html`
<td class="--right">
<span><button class="btn btn-rounded btn-gray" @click=${() => this.subscriptionEdit(item.id)}}>Edit</button></span>
<span><button class="btn btn-rounded btn-alert" @click=${() => this.subscriptionEnd(item.id)}}>End</button></span>
</td>`
}
</tr>`;
getSubscriptions = async (options): Promise<any> => {
@@ -175,6 +221,17 @@ class WalletPageElement extends BasePageElement {
});
}
};
walletEdit = () => {
const _modal = this.appMain.appModal;
if (_modal) {
this.appMain.closeModal();
} else {
this.appMain.createModal('wallet-edit', {
id: this.routerService?.routerState?.data?.walletId
});
}
}
render = (): TemplateResult => {
const renderHeader = () => html`<wallet-header
@@ -189,6 +246,7 @@ class WalletPageElement extends BasePageElement {
const renderWallet = () => {
if (this.routerService?.routerState?.data?.walletId) {
return html`<div class="wallet-buttons">
<button class="btn btn-squared btn-gray" app-action="click:wallet-page#walletEdit">Edit Wallet</button>
<div class="button-group">
<button class="btn btn-squared btn-primary" app-action="click:wallet-page#newSub">New Subscription</button>
<button class="btn btn-squared btn-red" app-action="click:wallet-page#newExpense">New Expense</button>