layout fixes for edit

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`<div class="page --title">${this.customtitle ? this.customtitle : this.pageTitle}</div>`;

src/components/app-pagination/AppPaginationElement.ts

@@ -136,8 +136,8 @@ class AppPaginationElement extends BaseComponentElement {
 						</span>
 						<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
 					</td>
-					<td class="--left">
-						<span><button @click=${() => this.transactionEdit(item.id)}}>Edit</button></span>
+					<td class="--right">
+						<span><button class="btn btn-rounded btn-gray" @click=${() => this.transactionEdit(item.id)}}>Edit</button></span>
 					</td>
 			  </tr>`;
 

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

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

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 {
 			</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> => {

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

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

src/pages/wallet-list/WalletListElement.ts

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

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

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

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 {

src/styles/core/variables.scss

@@ -13,6 +13,10 @@ $button-map: (
 		$gray-08,
 		$white,
 	),
+	'gray': (
+		$gray-04,
+		$black,
+	),
 	'secondary': (
 		$orange-08,
 		$white,

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

src/styles/icons/index.scss

@@ -0,0 +1 @@
+@import './ico-edit.scss';

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