Merge branch 'sea-of-edit' into develop

package.json

@@ -43,7 +43,7 @@
     "uglify-js": "^3.13.9",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"
   }
 }

src/common/core/BaseElement/BaseElement.ts

@@ -9,6 +9,7 @@ class BaseElement extends HTMLElement {
 	private _appMain: AppMainElement;
 	public loader: Loader;
 	public elementDisconnectCallbacks: Array<Function> = [];
+	public initialized: boolean = false;
 	constructor() {
 		super();
 		this.connectedCallback = this.connectedCallback.bind(this);
@@ -86,6 +87,7 @@ class BaseElement extends HTMLElement {
 		this.bindEvents('data-action');
 		this.bindEvents('app-action');
 		this.updateCallback();
+		this.initialized = true;
 	};
 
 	connectedCallback(): void {

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-dropdown/AppDropdownElement.ts

@@ -33,6 +33,7 @@ class AppDropdownElement extends BaseComponentElement {
 	page: number = 1;
 	rpp: number = 30;
 	validator: Validator;
+	itemValue: any = null;
 
 	constructor() {
 		super();
@@ -119,7 +120,10 @@ class AppDropdownElement extends BaseComponentElement {
 	};
 
 	get selectedItem() {
-		const { value, valuekey, items } = this;
+		const { value, valuekey, items, itemValue } = this;
+		if (itemValue) {
+			return itemValue;
+		}
 		const item = items?.find((item) => {
 			return value == item[valuekey];
 		});
@@ -173,6 +177,7 @@ class AppDropdownElement extends BaseComponentElement {
 
 	itemSelected = (e) => {
 		const value = (e.target as HTMLSpanElement).getAttribute('data-value');
+		this.itemValue = null;
 		this.setValue(value);
 		this.setOpen(false);
 		this.appForm?.inputChange(e);
@@ -183,6 +188,11 @@ class AppDropdownElement extends BaseComponentElement {
 		this.update();
 	};
 
+	setItemValue = (itemValue) => {
+		this.itemValue = itemValue;
+		this.update();
+	}
+
 	render = () => {
 		const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
 

src/components/app-form/AppFormElement.ts

@@ -77,13 +77,27 @@ class AppFormElement extends BaseComponentElement {
 			formObject[input.name] = input._value;
 		});
 		this.appDropdown?.forEach((input: AppDropdownElement) => {
-			if (input.required && input.value) {
+			formObject[input.name] = input._value;
-				formObject[input.name] = input._value;
-			}
 		});
 		return formObject;
 	}
 
+	set = (data): any => {
+		for (let i = 0; i < this.inputField.length; i++) {
+			const input = this.inputField[i];
+			if(data?.[input.name]) {
+				input._value = data[input.name]
+				this.update()
+			}
+		}
+		this.appDropdown?.forEach((input: AppDropdownElement) => {
+			if(data?.[input.name]) {
+				input.setValue(data[input.name])
+				this.update()
+			}
+		});
+	}
+
 	getInput = (name: string): InputFieldElement | AppDropdownElement => {
 		let formObject;
 		this.inputField.forEach((input: InputFieldElement) => {

src/components/app-link/AppLinkElement.ts

@@ -14,6 +14,7 @@ class AppLinkElement extends BaseComponentElement {
 	@target main: Element;
 	constructor() {
 		super();
+		this.attributeChangedCallback = this.attributeChangedCallback.bind(this);
 	}
 
 	elementConnected = (): void => {
@@ -34,6 +35,12 @@ class AppLinkElement extends BaseComponentElement {
 		}
 	};
 
+	attributeChangedCallback(changed) {
+		if(this.initialized && changed == 'data-title') {
+			this.update();
+		}
+	}
+
 	goTo = (e: Event): void => {
 		e.preventDefault();
 		if (!isTrue(this.goBack) && this.to) {
@@ -46,7 +53,7 @@ class AppLinkElement extends BaseComponentElement {
 
 	get disabled(): boolean {
 		if (isTrue(this.goBack)) {
-			return this.routerService.emptyState;
+			return this.routerService?.emptyState;
 		}
 		return false;
 	}

src/components/app-menu/AppMenuElement.ts

@@ -102,10 +102,10 @@ class AppMenuElement extends BaseComponentElement {
 		const regularMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
 			if (action) {
 				return html`
-					<menu-item class="${className || ''}" data-path="${path}" data-customaction="${action}">${title}</menu-item>
+					<menu-item class="${className || ''}" data-path="${path}" data-customaction="${action}" data-title="${title}"></menu-item>
 				`;
 			}
-			return html`<menu-item class="${className || ''}" data-path="${path}">${title}</menu-item>`;
+			return html`<menu-item class="${className || ''}" data-path="${path}" data-title="${title}"></menu-item>`;
 		};
 		const menuButton = (title: string, action?: string): TemplateResult => {
 			return html` <div class="menu-item --retract" data-target="menu-item.itemEl">

src/components/app-pagination/AppPaginationElement.ts

@@ -44,6 +44,14 @@ class AppPaginationElement extends BaseComponentElement {
 		}
 	};
 
+	defaultFetch = () => {
+		const options = {
+			rpp: this.rpp || 10,
+			page: 1
+		}
+		this.executeFetch(options);
+	}
+
 	setCustomRenderItems = (customRenderItems: () => TemplateResult) => {
 		this.customRenderItems = customRenderItems;
 		this.update();
@@ -95,6 +103,17 @@ class AppPaginationElement extends BaseComponentElement {
 		}
 	};
 
+	transactionEdit = (id) => {
+		const _modal = this.appMain.appModal;
+		if (_modal) {
+			this.appMain.closeModal();
+		} else {
+			this.appMain.createModal('transaction-edit', {
+				id: id
+			});
+		}
+	}
+
 	render = (): TemplateResult => {
 		const { rpp, totalItems, page, items } = this;
 
@@ -117,6 +136,9 @@ class AppPaginationElement extends BaseComponentElement {
 						</span>
 						<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
 					</td>
+					<td class="--right">
+						<span><button class="btn btn-rounded btn-gray" @click=${() => this.transactionEdit(item.id)}}>Edit</button></span>
+					</td>
 			  </tr>`;
 
 		const renderItems = this.customRenderItems

src/components/input-field/InputFieldElement.ts

@@ -18,6 +18,7 @@ class InputFieldElement extends BaseComponentElement {
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
 	@closest appForm: AppFormElement;
+	@attr disabled: string;
 	valid: boolean;
 	displayError: boolean;
 	randId: string;
@@ -36,12 +37,16 @@ class InputFieldElement extends BaseComponentElement {
 		//this.validate();
 	};
 
+	attributeChangedCallback() {
+		this.update();
+	}
+
 	setError = (error) => {
 		this.validator.error = error;
 	};
 
 	get error(): string {
-		return this.validator.error;
+		return this.validator?.error;
 	}
 
 	get isValid(): boolean {
@@ -53,9 +58,24 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	get _value() {
+		if (this.type == 'checkbox') {
+			return (this.inp as HTMLInputElement)?.checked;
+		}
 		return (this.inp as HTMLInputElement)?.value;
 	}
 	
+	get _disabled() {
+		return this.disabled == "true" 
+	}
+
+	set _value(value) {
+		if (this.type == 'checkbox') {
+			(this.inp as HTMLInputElement).checked = (value as boolean);
+		} else {
+			(this.inp as HTMLInputElement).value = (value as string);
+		}
+	}
+
 	validate = (): boolean => {
 		const valid = this.validator.validate();
 		if (valid && this.displayError) {
@@ -88,7 +108,6 @@ class InputFieldElement extends BaseComponentElement {
 	};
 
 	render = (): TemplateResult => {
-		console.log('e');
 		const renderMessage = (label: string) => {
 			if (this.label) {
 				return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
@@ -113,6 +132,7 @@ class InputFieldElement extends BaseComponentElement {
 					step="0.01"
 					data-target="input-field.inp"
 					id="${this.randId}"
+					?disabled=${this._disabled}
 					app-action=" input:input-field#inputChange blur:input-field#validateDisplay
 				${this.customAction ? this.customAction : ''} "
 				/>`;
@@ -122,6 +142,7 @@ class InputFieldElement extends BaseComponentElement {
 				autocomplete="${this.name}"
 				type="${this.type}"
 				data-target="input-field.inp"
+				?disabled=${this._disabled}
 				id="${this.randId}"
 				app-action="
                     input:input-field#inputChange

src/components/menu-item/MenuItemElement.ts

@@ -14,6 +14,7 @@ class MenuItemElement extends BaseComponentElement {
 	@target customButton: HTMLDivElement;
 	constructor() {
 		super();
+		this.attributeChangedCallback = this.attributeChangedCallback.bind(this);
 	}
 
 	public elementConnected = (): void => {
@@ -30,8 +31,14 @@ class MenuItemElement extends BaseComponentElement {
 		appMain?.removeEventListener('routechanged', this.update);
 	};
 
+	attributeChangedCallback(changed) {
+		if(this.initialized && changed == 'data-title') {
+			this.update();
+		}
+	}
+
 	get current(): boolean {
-		return this.routerService.comparePath(this.path);
+		return this.routerService?.comparePath(this.path);
 	}
 
 	itemClick = (e) => {
@@ -43,8 +50,7 @@ class MenuItemElement extends BaseComponentElement {
 	render = (): TemplateResult => {
 		return html`
 			<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
-				<app-link class="${this.className}" data-to="${this.path}" data-custom-action="click:menu-item#itemClick"
+				<app-link class="${this.className}" data-to="${this.path}" data-custom-action="click:menu-item#itemClick" data-title="${this.title}"></app-link
-					>${this.title}</app-link
 				>
 				${this.customaction
 					? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`

src/core/services/app-service/AppService.ts

@@ -50,7 +50,7 @@ class AppService {
 		}
 	};
 
-	delete = async (url: string, data: Object, headersParam: HeadersInit): Promise<any> => {
+	delete = async (url: string, data?: Object, headersParam?: HeadersInit): Promise<any> => {
 		headersParam = {
 			...headersParam,
 			Authorization: `BEARER ${this.appMain?.authStore?.token}`,

src/core/services/base-service/BaseService.ts

@@ -7,20 +7,20 @@ class BaseService {
 		return this.appService.get(this.endpoint, params, headers);
 	};
 
-	get = (params?: Object, headers?: HeadersInit) => {
+	get = (id: string, params?: Object, headers?: HeadersInit) => {
-		return this.appService.get(this.endpoint, params, headers);
+		return this.appService.get(this.endpoint + `/${id}`, params, headers);
 	};
 
-	put = (data?: Object, headers?: HeadersInit) => {
+	put = (id: string, data?: any, headers?: HeadersInit) => {
-		return this.appService.put(this.endpoint, data, headers);
+		return this.appService.put(this.endpoint + `/${id || data?.id || ''}`, data, headers);
 	};
 
 	post = (data?: Object, headers?: HeadersInit) => {
 		return this.appService.post(this.endpoint, data, headers);
 	};
 
-	delete = (data?: Object, headers?: HeadersInit) => {
+	delete = (id:string, data?: any, headers?: HeadersInit) => {
-		return this.appService.delete(this.endpoint, data, headers);
+		return this.appService.delete(this.endpoint + `/${id || data?.id || ''}`, data, headers);
 	};
 }
 

src/pages/index.ts

@@ -10,3 +10,6 @@ export * from './transaction-create/TransactionCreateElement';
 export * from './subscription-create/SubscriptionCreateElement';
 export * from './subscription-list/SubscriptionListElement';
 export * from './wallet-page/WalletPageElement';
+export * from './subscription-edit/SubscriptionEditElement';
+export * from './transaction-edit/TransactionEditElement';
+export * from './wallet-edit/WalletEditElement';

src/pages/subscription-create/SubscriptionCreateElement.ts

@@ -142,18 +142,19 @@ class SubscriptionCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerTransactionUpdate();
-				this.appMain.pushToast('success', 'Transaction created successfully!');
+				this.appMain.pushToast('success', 'Subscription created successfully!');
 
 				if (walletData.walletId) {
 					this.appMain?.closeModal();
 				} else {
-					this.routerService.goTo('/history', {
+					this.appMain?.closeModal();
+					this.routerService.goTo('/subscriptions', {
 						walletId: response.walletId,
 					});
 				}
 			}
 		} catch (err) {
-			this.errorMessage = 'Unable to create transaction!';
+			this.errorMessage = 'Unable to create subscription!';
 			this.update();
 		}
 	};

src/pages/subscription-edit/SubscriptionEditElement.ts

@@ -0,0 +1,260 @@
+import { targets, controller, target } from '@github/catalyst';
+import { html, TemplateResult } from 'core/utils';
+import {
+	AuthService,
+	SubscriptionService,
+	SubscriptionTypeService,
+	TransactionTypeService,
+	WalletService,
+} from 'services/';
+import { AppFormElement, InputFieldElement } from 'components/';
+import { BasePageElement } from 'common/';
+import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+@controller
+class SubscriptionEditElement extends BasePageElement {
+	@targets inputs: Array<InputFieldElement | AppDropdownElement>;
+	@target appForm: AppFormElement;
+	private subscriptionService: SubscriptionService;
+	private transactionTypeService: TransactionTypeService;
+	private subscriptionTypeService: SubscriptionTypeService;
+	private walletService: WalletService;
+	walletData: any = null;
+	authService: AuthService;
+	errorMessage: string;
+	private initial: boolean = false;
+	constructor() {
+		super({
+			title: 'Edit Subscription',
+		});
+	}
+	elementConnected = (): void => {
+		this.walletService = new WalletService(this.appMain?.appService);
+		this.subscriptionService = new SubscriptionService(this.appMain?.appService);
+		this.transactionTypeService = new TransactionTypeService(this.appMain?.appService);
+		this.subscriptionTypeService = new SubscriptionTypeService(this.appMain?.appService);
+		this.authService = new AuthService(this.appMain.appService);
+		this.walletData = this.getData();
+		this.update();
+		this.getSubscription(this.walletData?.id);
+		if (this.walletData && this.walletData.walletId) {
+			this.setTransactionType();
+		} else {
+			this.initial = true;
+		}
+	};
+
+	get hasEndCheck(): InputFieldElement | AppDropdownElement {
+		for (const i in this.inputs) {
+			if (this.inputs[i]?.name == 'hasEnd') {
+				return this.inputs[i];
+			}
+		}
+	}
+
+	get nameInput(): InputFieldElement | AppDropdownElement {
+		for (const i in this.inputs) {
+			if (this.inputs[i]?.name == 'name') {
+				return this.inputs[i];
+			}
+		}
+	}
+
+	get values(): any {
+		const formObject: any = {};
+		this.inputs.forEach((input: InputFieldElement) => {
+			const inputType = input.inp;
+			formObject[input.name] = (inputType as HTMLInputElement).value;
+		});
+		return formObject;
+	}
+
+	setTransactionType = async () => {
+		this.appForm.isValid = false;
+		try {
+			const response = await this.transactionTypeService.getAll();
+			this.walletData.transactionTypeId = response?.find((type) => type.type == this.walletData.transactionType)?.id;
+		} catch (err) {
+		} finally {
+			this.appForm.isValid = true;
+		}
+	};
+
+	getSubscription = async (id) => {
+		try {
+			const response = await this.subscriptionService.get(id, {
+				embed: 'Wallet'
+			});
+			const wallet = this.appForm.getInput('wallet');
+			if (wallet) {
+				(wallet as AppDropdownElement).setItemValue(response.wallet);
+			}
+			response.wallet = response.walletId;
+			response.endDate = dayjs(response.endDate).format('YYYY-MM-DD');
+			this.appForm.set(response);
+		} catch (err) {
+
+		}
+	}
+
+	getWallets = async (options): Promise<void> => {
+		try {
+			const response = await this.walletService.getAll(options);
+			return response;
+		} catch (err) {}
+	};
+
+	getTypes = async (options): Promise<void> => {
+		try {
+			const response = await this.transactionTypeService.getAll(options);
+			return response;
+		} catch (err) {}
+	};
+
+	getSubs = async (options): Promise<void> => {
+		try {
+			const response = await this.subscriptionTypeService.getAll(options);
+			return response;
+		} catch (err) {}
+	};
+
+	onSubmit = async (values): Promise<void> => {
+		try {
+			if (!this.validate()) {
+				return;
+			}
+
+			const {
+				description: description,
+				wallet: walletId,
+				amount,
+				endDate,
+			} = values;
+
+			const endDateFormat = dayjs(endDate).utc(true).format();
+
+			const walletData = this.walletData;
+
+			const formData = {
+				description,
+				amount,
+				hasEnd: (this.hasEndCheck?.inp as HTMLInputElement)?.checked,
+				endDate: endDateFormat,
+				walletId: walletData && walletData.walletId ? walletData.walletId : walletId,
+			};
+			const response = await this.subscriptionService.put(this.walletData.id, formData);
+
+			if (response?.id) {
+				this.appMain.triggerTransactionUpdate();
+				this.appMain.pushToast('success', 'Subscription edited successfully!');
+
+				if (walletData.id) {
+					this.appMain?.closeModal();
+				} else {
+					this.appMain?.closeModal();
+					this.routerService.goTo('/subscriptions', {
+						walletId: response.walletId,
+					});
+				}
+			}
+		} catch (err) {
+			this.errorMessage = 'Unable to edit subscription!';
+			this.update();
+		}
+	};
+
+	validate(): boolean {
+		let _return = true;
+		this.inputs.forEach((input: InputFieldElement) => {
+			const valid: boolean = input.validate();
+			if (!valid) _return = false;
+		});
+		return _return;
+	}
+
+	onCheck = () => {
+		this.appForm.update();
+		this.appForm.validate();
+		this.appForm.update();
+	};
+
+	renderForms = () => {
+		const renderInput = (type, name, label, rules, hide?, customAction?) => {
+			return html`<input-field
+				data-type="${type}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="subscription-edit.inputs"
+				data-rules="${rules}"
+				data-custom-action="${customAction || ''}"
+				data-disabled="${hide}"
+			></input-field>`;
+		};
+
+		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="number"
+				data-pattern="${pattern}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="subscription-edit.inputs"
+				data-rules="${rules}"
+				custom-action="${customAction}"
+			></input-field>`;
+		};
+
+		const renderDropdown = (fetch, name, label, rules, hide?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<app-dropdown
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="subscription-edit.inputs"
+				data-rules="${rules}"
+				data-fetch="${fetch}"
+			></app-dropdown>`;
+		};
+		return html`
+				<div slot="inputs">
+					${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
+					${renderInput('text', 'description', 'Description', 'required')}
+					${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-edit#onCheck')}
+					${renderInput(
+						'date',
+						'endDate',
+						'End date',
+						'required',
+						!(this.hasEndCheck?.inp as HTMLInputElement)?.checked
+					)}
+					${renderDropdown(
+						'subscription-edit#getWallets',
+						'wallet',
+						'Wallet',
+						'required',
+						this.walletData && this.walletData.walletId
+					)}
+					${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}</template
+				>`;
+	};
+
+	render = (): TemplateResult => {
+		return html`
+			<app-form
+				data-custom="subscription-edit#onSubmit"
+				data-has-cancel="true"
+				data-target="subscription-edit.appForm"
+				data-render-input="subscription-edit#renderForms"
+			>
+			</app-form>
+		`;
+	};
+}
+
+export type { SubscriptionEditElement };

src/pages/subscription-list/SubscriptionListElement.ts

@@ -33,6 +33,24 @@ class SubscriptionListElement extends BasePageElement {
 		this.pagination?.executeFetch();
 	};
 
+	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>
@@ -50,6 +68,12 @@ class SubscriptionListElement 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> => {

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

@@ -0,0 +1,234 @@
+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 { BasePageElement } from 'common/';
+import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+@controller
+class TransactionEditElement extends BasePageElement {
+	@targets inputs: Array<InputFieldElement | AppDropdownElement>;
+	@target appForm: AppFormElement;
+	private transactionService: TransactionsService;
+	private transactionTypeService: TransactionTypeService;
+	private walletService: WalletService;
+	walletData: any = null;
+	authService: AuthService;
+	errorMessage: string;
+	private initial: boolean = false;
+	constructor() {
+		super({
+			title: 'Edit Transaction',
+		});
+	}
+	elementConnected = (): void => {
+		this.walletService = new WalletService(this.appMain?.appService);
+		this.transactionService = new TransactionsService(this.appMain?.appService);
+		this.transactionTypeService = new TransactionTypeService(this.appMain?.appService);
+		this.authService = new AuthService(this.appMain.appService);
+		this.walletData = this.getData();
+		this.update();
+		this.getTransaction(this.walletData?.id)
+		if (this.walletData && this.walletData.walletId) {
+			this.setTransactionType();
+		} else {
+			this.initial = true;
+		}
+	};
+
+	getTransaction = async (id) => {
+		try {
+			const response = await this.transactionService.get(id, {
+				embed: 'Wallet,TransactionType'
+			});
+			const wallet = this.appForm.getInput('wallet');
+			if (wallet) {
+				(wallet as AppDropdownElement).setItemValue(response.wallet);
+			}
+			const transactionType = this.appForm.getInput('transactionType');
+			if (transactionType) {
+				(transactionType as AppDropdownElement).setItemValue(response.transactionType);
+			}
+			response.wallet = response.walletId;
+			response.transactionType = response.transactionTypeId;
+			response.transactionDate = dayjs(response.transactionDate).format('YYYY-MM-DD');
+			this.appForm.set(response);
+		} catch (err) {
+
+		}
+	}
+
+	get nameInput(): InputFieldElement | AppDropdownElement {
+		for (const i in this.inputs) {
+			if (this.inputs[i]?.name == 'name') {
+				return this.inputs[i];
+			}
+		}
+	}
+
+	get values(): any {
+		const formObject: any = {};
+		this.inputs.forEach((input: InputFieldElement) => {
+			const inputType = input.inp;
+			formObject[input.name] = (inputType as HTMLInputElement).value;
+		});
+		return formObject;
+	}
+
+	setTransactionType = async () => {
+		this.appForm.isValid = false;
+		try {
+			const response = await this.transactionTypeService.getAll();
+			this.walletData.transactionTypeId = response?.find((type) => type.type == this.walletData.transactionType)?.id;
+		} catch (err) {
+		} finally {
+			this.appForm.isValid = true;
+		}
+	};
+
+	getWallets = async (options): Promise<void> => {
+		try {
+			const response = await this.walletService.getAll(options);
+			return response;
+		} catch (err) {}
+	};
+
+	getTypes = async (options): Promise<void> => {
+		try {
+			const response = await this.transactionTypeService.getAll(options);
+			return response;
+		} catch (err) {}
+	};
+
+	onSubmit = async (values): Promise<void> => {
+		try {
+			if (!this.validate()) {
+				return;
+			}
+
+			const {
+				description: description,
+				wallet: walletId,
+				amount,
+				transactionType: transactionTypeId,
+				transactionDate,
+			} = values;
+
+			const formattedDate = dayjs(transactionDate).utc(true).format();
+
+			const walletData = this.walletData;
+
+			const formData = {
+				description,
+				amount,
+				walletId: walletData && walletData.walletId ? walletData.walletId : walletId,
+				transactionDate: formattedDate,
+				transactionTypeId:
+					walletData && walletData.transactionTypeId ? walletData.transactionTypeId : transactionTypeId,
+			};
+
+			const response = await this.transactionService.put(this.walletData?.id, formData);
+
+			if (response?.id) {
+				this.appMain.triggerTransactionUpdate();
+				this.appMain.pushToast('success', 'Transaction edited successfully!');
+
+				if (walletData.id) {
+					this.appMain?.closeModal();
+				} else {
+					this.routerService.goTo('/history', {
+						walletId: response.walletId,
+					});
+				}
+			}
+		} catch (err) {
+			this.errorMessage = 'Unable to edit transaction!';
+			this.update();
+		}
+	};
+
+	validate(): boolean {
+		let _return = true;
+		this.inputs.forEach((input: InputFieldElement) => {
+			const valid: boolean = input.validate();
+			if (!valid) _return = false;
+		});
+		return _return;
+	}
+
+	render = (): TemplateResult => {
+		const renderInput = (type, name, label, rules, hide?, customAction?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="${type}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="transaction-edit.inputs"
+				data-rules="${rules}"
+				custom-action="${customAction}"
+			></input-field>`;
+		};
+
+		const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="number"
+				data-pattern="${pattern}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="transaction-edit.inputs"
+				data-rules="${rules}"
+				custom-action="${customAction}"
+			></input-field>`;
+		};
+
+		const renderDropdown = (fetch, name, label, rules, hide?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<app-dropdown
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="transaction-edit.inputs"
+				data-rules="${rules}"
+				data-fetch="${fetch}"
+			></app-dropdown>`;
+		};
+
+		return html`
+			<app-form
+				data-custom="transaction-edit#onSubmit"
+				data-has-cancel="true"
+				data-target="transaction-edit.appForm"
+			>
+				${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)}
+				${renderInput('text', 'description', 'Description', 'required')}
+				${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
+				${renderDropdown(
+					'transaction-edit#getWallets',
+					'wallet',
+					'Wallet',
+					'required',
+					this.walletData && this.walletData.walletId
+				)}
+				${renderDropdown(
+					'transaction-edit#getTypes',
+					'transactionType',
+					'Transaction Type',
+					'required',
+					this.walletData && this.walletData.walletId
+				)}
+				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
+			</app-form>
+		`;
+	};
+}
+
+export type { TransactionEditElement };

src/pages/wallet-edit/WalletEditElement.ts

@@ -0,0 +1,98 @@
+import { targets, controller, target } from '@github/catalyst';
+import { html, TemplateResult } from 'core/utils';
+import { AuthService, WalletService } from 'services/';
+import { AppDropdownElement, AppFormElement, InputFieldElement } from 'components/';
+import { BasePageElement } from 'common/';
+
+@controller
+class WalletEditElement extends BasePageElement {
+	@targets inputs: Array<InputFieldElement>;
+	@target appForm: AppFormElement;
+	private walletService: WalletService;
+	authService: AuthService;
+	errorMessage: string;
+	walletData: any;
+	constructor() {
+		super({
+			title: 'Edit Wallet',
+		});
+	}
+	elementConnected = (): void => {
+		this.walletService = new WalletService(this.appMain?.appService);
+		this.authService = new AuthService(this.appMain.appService);
+		this.walletData = this.getData();
+		this.update();
+		this.getWallet(this.walletData?.id)
+	};
+
+	getWallet = async (id) => {
+		try {
+			const response = await this.walletService.get(id, null);
+			this.appForm.set(response);
+		} catch (err) {
+
+		}
+	}
+
+	get nameInput(): InputFieldElement {
+		for (const i in this.inputs) {
+			if (this.inputs[i]?.name == 'name') {
+				return this.inputs[i];
+			}
+		}
+	}
+
+	get values(): Object {
+		const formObject: any = {};
+		this.inputs.forEach((input: InputFieldElement) => {
+			const inputType = input.inp;
+			formObject[input.name] = (inputType as HTMLInputElement).value;
+		});
+		return formObject;
+	}
+
+	onSubmit = async (): Promise<void> => {
+		try {
+			if (!this.validate()) {
+				return;
+			}
+			const response = await this.walletService.put(this.walletData?.id, this.values);
+
+			if (response?.id) {
+				this.appMain.triggerWalletUpdate();
+				this.appMain.pushToast('success', 'Wallet edited successfully!');
+				this.appMain.closeModal();
+			}
+		} catch (err) {
+			this.errorMessage = 'Unable to edit wallet!';
+			this.update();
+		}
+	};
+
+	validate(): boolean {
+		let _return = true;
+		this.inputs.forEach((input: InputFieldElement) => {
+			const valid: boolean = input.validate();
+			if (!valid) _return = false;
+		});
+		return _return;
+	}
+
+	render = (): TemplateResult => {
+		return html`
+			<app-form data-custom="wallet-edit#onSubmit" data-has-cancel="true" 
+			data-target="wallet-edit.appForm">
+				<input-field
+					data-type="text"
+					data-name="name"
+					data-label="Name"
+					data-targets="wallet-edit.inputs"
+					data-rules="required"
+				></input-field>
+				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
+			</app-form>
+		`;
+	};
+}
+
+export type { WalletEditElement };

src/pages/wallet-list/WalletListElement.ts

@@ -1,7 +1,7 @@
 import { targets, controller, target } from '@github/catalyst';
 import { html, TemplateResult } from 'core/utils';
 import { AuthService, WalletService } from 'services/';
-import { AppPaginationElement, InputFieldElement } from 'components/';
+import { AppMainElement, AppPaginationElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';
 
 @controller
@@ -22,8 +22,17 @@ class WalletListElement extends BasePageElement {
 		this.update();
 		this.pagination?.setCustomRenderItem(this.renderItem);
 		this.pagination?.setFetchFunc?.(this.getWallets, true)!;
+		this.appMain.addEventListener('walletupdate', this.updateToken);
 	};
 
+	elementDisconnected = (appMain: AppMainElement) => {
+		appMain?.removeEventListener('walletupdate', this.updateToken);
+	}
+
+	get updateToken() {
+		return this.pagination?.defaultFetch;
+	} 
+
 	getWallets = async (options): Promise<any> => {
 		try {
 			const response = await this.walletService.getAll(options);
@@ -33,8 +42,22 @@ class WalletListElement extends BasePageElement {
 		}
 	};
 
-	renderItem = (item): TemplateResult => html`<tr class="col-1">
+	walletEdit = (id) => {
-		<td><app-link class="wallet-item" data-to="/wallet/${item.id}">${item.name}</app-link></td>
+		const _modal = this.appMain.appModal;
+		if (_modal) {
+			this.appMain.closeModal();
+		} else {
+			this.appMain.createModal('wallet-edit', {
+				id: id
+			});
+		}
+	}
+
+	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 class="--right">
+			<span><button class="btn btn-rounded btn-gray" @click=${() => this.walletEdit(item.id)}}>Edit</button></span>
+		</td>
 	</tr>`;
 
 	render = (): TemplateResult => {

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> => {
@@ -176,6 +222,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
 			data-target="wallet-page.walletHeader"
@@ -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

@@ -1,9 +1,13 @@
 import { AppService, BaseService } from 'core/services';
 
 class SubscriptionService extends BaseService {
-	constructor(appService: AppService) {
+	constructor(public appService: AppService) {
 		super('/subscription', appService);
 	}
+
+	endSubscription = (id) => {
+		return this.appService.post(this.endpoint + `/end`, {id}, null);
+	};
 }
 
 export default SubscriptionService;

src/styles/app-pagination/app-pagination.scss

@@ -47,13 +47,17 @@ app-pagination {
 					grid-template-columns: repeat(6, 1fr);
 				}
 				&.col-transactions {
-					grid-template-columns: auto 1fr auto;
+					grid-template-columns: 1fr 10fr 1fr 1fr;
+				}
+				&.col-wallet {
+					grid-template-columns: 9fr 1fr;
 				}
 				td,
 				th {
 					margin: 0 12px;
 					overflow: hidden; // Or flex might break
 					list-style: none;
+					align-self: center;
 					&.--left {
 						text-align: left;
 					}
@@ -138,13 +142,14 @@ app-pagination {
 					grid-template-columns: repeat(6, 1fr);
 				}
 				&.col-subscription {
-					grid-template-columns: 1fr 2fr 10fr 1fr 2fr;
+					grid-template-columns: 1fr 2fr 10fr 1fr 2fr 2fr;
 				}
 				td,
 				th {
 					margin: 0 12px;
 					overflow: hidden; // Or flex might break
 					list-style: none;
+					align-self: center;
 					&.--left {
 						text-align: left;
 					}

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

yarn.lock

@@ -1207,22 +1207,22 @@
     "@webassemblyjs/ast" "1.11.0"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^1.0.3":
+"@webpack-cli/configtest@^1.0.4":
-  version "1.0.3"
+  version "1.0.4"
-  resolved "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.4.tgz#f03ce6311c0883a83d04569e2c03c6238316d2aa"
-  integrity sha512-WQs0ep98FXX2XBAfQpRbY0Ma6ADw8JR6xoIkaIiJIzClGOMqVRvPCWqndTxf28DgFopWan0EKtHtg/5W1h0Zkw==
+  integrity sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==
 
-"@webpack-cli/info@^1.2.4":
+"@webpack-cli/info@^1.3.0":
-  version "1.2.4"
+  version "1.3.0"
-  resolved "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.4.tgz"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.3.0.tgz#9d78a31101a960997a4acd41ffd9b9300627fe2b"
-  integrity sha512-ogE2T4+pLhTTPS/8MM3IjHn0IYplKM4HbVNMCWA9N4NrdPzunwenpCsqKEXyejMfRu6K8mhauIPYf8ZxWG5O6g==
+  integrity sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==
   dependencies:
     envinfo "^7.7.3"
 
-"@webpack-cli/serve@^1.4.0":
+"@webpack-cli/serve@^1.5.1":
-  version "1.4.0"
+  version "1.5.1"
-  resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.5.1.tgz#b5fde2f0f79c1e120307c415a4c1d5eb15a6f278"
-  integrity sha512-xgT/HqJ+uLWGX+Mzufusl3cgjAcnqYYskaB7o0vRcwOEfuu6hMzSILQpnIzFMGsTaeaX4Nnekl+6fadLbl1/Vg==
+  integrity sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -6595,15 +6595,15 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webpack-cli@^4.7.0:
+webpack-cli@^4.7.2:
-  version "4.7.0"
+  version "4.7.2"
-  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.7.2.tgz#a718db600de6d3906a4357e059ae584a89f4c1a5"
-  integrity sha512-7bKr9182/sGfjFm+xdZSwgQuFjgEcy0iCTIBxRUeteJ2Kr8/Wz0qNJX+jw60LU36jApt4nmMkep6+W5AKhok6g==
+  integrity sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^1.0.3"
+    "@webpack-cli/configtest" "^1.0.4"
-    "@webpack-cli/info" "^1.2.4"
+    "@webpack-cli/info" "^1.3.0"
-    "@webpack-cli/serve" "^1.4.0"
+    "@webpack-cli/serve" "^1.5.1"
     colorette "^1.2.1"
     commander "^7.0.0"
     execa "^5.0.0"