diff --git a/src/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts index c0859e1..c13dedd 100644 --- a/src/common/pages/BasePageElement/BasePageElement.ts +++ b/src/common/pages/BasePageElement/BasePageElement.ts @@ -4,19 +4,23 @@ import { BaseElement } from 'common/'; import { isTrue } from 'core/utils'; class BasePageElement extends BaseElement { - public pageTitle: string = ''; + public _pageTitle: string = ''; @attr hidetitle: string; @attr customtitle: string; private _data: any; constructor(options: OptionType) { super(); if (options?.title) { - this.pageTitle = options?.title; + this._pageTitle = options?.title; } this.connectedCallback = this.connectedCallback.bind(this); this.disconnectedCallback = this.disconnectedCallback.bind(this); } + get pageTitle() { + return this._pageTitle; + } + public renderTitle = () => { if (!isTrue(this.hidetitle)) { return html`
${this.customtitle ? this.customtitle : this.pageTitle}
`; diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index 7577455..dad85be 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -136,8 +136,8 @@ class AppPaginationElement extends BaseComponentElement { (${item.currency ? item.currency : 'USD'}) - - + + `; diff --git a/src/pages/subscription-create/SubscriptionCreateElement.ts b/src/pages/subscription-create/SubscriptionCreateElement.ts index 52c2913..3aa4381 100644 --- a/src/pages/subscription-create/SubscriptionCreateElement.ts +++ b/src/pages/subscription-create/SubscriptionCreateElement.ts @@ -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, }); diff --git a/src/pages/subscription-edit/SubscriptionEditElement.ts b/src/pages/subscription-edit/SubscriptionEditElement.ts index 7000197..bc9aeb9 100644 --- a/src/pages/subscription-edit/SubscriptionEditElement.ts +++ b/src/pages/subscription-edit/SubscriptionEditElement.ts @@ -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, }); diff --git a/src/pages/subscription-list/SubscriptionListElement.ts b/src/pages/subscription-list/SubscriptionListElement.ts index 61f8d63..655d17f 100644 --- a/src/pages/subscription-list/SubscriptionListElement.ts +++ b/src/pages/subscription-list/SubscriptionListElement.ts @@ -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 { (${item.currency ? item.currency : 'USD'}) - - - - + ${item.hasEnd ? html`` : html` + + + + ` + } `; getSubscriptions = async (options): Promise => { diff --git a/src/pages/transaction-create/TransactionCreateElement.ts b/src/pages/transaction-create/TransactionCreateElement.ts index 20a78ba..75d77bc 100644 --- a/src/pages/transaction-create/TransactionCreateElement.ts +++ b/src/pages/transaction-create/TransactionCreateElement.ts @@ -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, }); diff --git a/src/pages/transaction-edit/TransactionEditElement.ts b/src/pages/transaction-edit/TransactionEditElement.ts index 28d6074..e48769c 100644 --- a/src/pages/transaction-edit/TransactionEditElement.ts +++ b/src/pages/transaction-edit/TransactionEditElement.ts @@ -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'; diff --git a/src/pages/wallet-list/WalletListElement.ts b/src/pages/wallet-list/WalletListElement.ts index 25eba41..b03ab6b 100644 --- a/src/pages/wallet-list/WalletListElement.ts +++ b/src/pages/wallet-list/WalletListElement.ts @@ -55,8 +55,8 @@ class WalletListElement extends BasePageElement { renderItem = (item): TemplateResult => html` - - + + `; diff --git a/src/pages/wallet-page/WalletPageElement.ts b/src/pages/wallet-page/WalletPageElement.ts index 51a708a..efd6ee8 100644 --- a/src/pages/wallet-page/WalletPageElement.ts +++ b/src/pages/wallet-page/WalletPageElement.ts @@ -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 => { 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` ${dayjs(item.lastTransactionDate).format("MMM DD 'YY")} every ${item.customRange} ${item.rangeName} @@ -83,6 +123,12 @@ class WalletPageElement extends BasePageElement { (${item.currency ? item.currency : 'USD'}) + ${item.hasEnd ? html`` : html` + + + + ` + } `; getSubscriptions = async (options): Promise => { @@ -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` { if (this.routerService?.routerState?.data?.walletId) { return html`
+
diff --git a/src/services/SubscriptionService.ts b/src/services/SubscriptionService.ts index f1b45a6..5dc01b6 100644 --- a/src/services/SubscriptionService.ts +++ b/src/services/SubscriptionService.ts @@ -6,7 +6,7 @@ class SubscriptionService extends BaseService { } endSubscription = (id) => { - return this.appService.put(this.endpoint + `/end/${id || ''}`, null, null); + return this.appService.post(this.endpoint + `/end`, {id}, null); }; } diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss index 7700eca..cd21b2c 100644 --- a/src/styles/app-pagination/app-pagination.scss +++ b/src/styles/app-pagination/app-pagination.scss @@ -142,7 +142,7 @@ app-pagination { grid-template-columns: repeat(6, 1fr); } &.col-subscription { - grid-template-columns: 1fr 2fr 10fr 1fr 2fr 1fr; + grid-template-columns: 1fr 2fr 10fr 1fr 2fr 2fr; } td, th { diff --git a/src/styles/core/variables.scss b/src/styles/core/variables.scss index dfdda2b..bd1a2fd 100644 --- a/src/styles/core/variables.scss +++ b/src/styles/core/variables.scss @@ -13,6 +13,10 @@ $button-map: ( $gray-08, $white, ), + 'gray': ( + $gray-04, + $black, + ), 'secondary': ( $orange-08, $white, diff --git a/src/styles/icons/ico-edit.scss b/src/styles/icons/ico-edit.scss new file mode 100644 index 0000000..e4142a1 --- /dev/null +++ b/src/styles/icons/ico-edit.scss @@ -0,0 +1,40 @@ +.ico-edit { + box-sizing: border-box; + position: relative; + display: block; + transform: rotate(-45deg) scale(var(--ggs,1)); + width: 14px; + height: 4px; + border-right: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + margin-right: -2px +} +.ico-edit::after, +.ico-edit::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute +} +.ico-edit::before { + background: currentColor; + border-left: 0; + right: -6px; + width: 3px; + height: 4px; + border-radius: 1px; + top: 0 +} +.ico-edit::after { + width: 8px; + height: 7px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-right: 7px solid; + left: -11px; + top: -2px +} \ No newline at end of file diff --git a/src/styles/icons/index.scss b/src/styles/icons/index.scss new file mode 100644 index 0000000..fffc766 --- /dev/null +++ b/src/styles/icons/index.scss @@ -0,0 +1 @@ +@import './ico-edit.scss'; \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 9997e1c..1617658 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,3 +14,4 @@ @import './wallet-header/index.scss'; @import './app-pagination/index.scss'; @import './wallet-list/index.scss'; +@import './icons/index.scss'; \ No newline at end of file