create transaction with type and wallet id when comming from wallet page

src/pages/history-page/HistoryPageElement.ts

@@ -19,10 +19,16 @@ class HistoryPageElement extends BasePageElement {
 		this.update();
 		this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
 		this.appMain.addEventListener('tokenchange', this.update);
+		this.appMain.addEventListener('transactionupdate', this.transactionUpdated);
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
 		appMain?.removeEventListener('tokenchange', this.update);
+		appMain?.removeEventListener('transactionupdate', this.transactionUpdated);
+	};
+
+	transactionUpdated = () => {
+		this.pagination?.executeFetch();
 	};
 
 	getTransactions = async (options): Promise<any> => {

src/pages/transaction-create/TransactionCreateElement.ts

@@ -1,7 +1,7 @@
-import { targets, controller } from '@github/catalyst';
+import { targets, controller, target } from '@github/catalyst';
 import { html, TemplateResult } from 'core/utils';
-import { AuthService, TransactionsService, WalletService } from 'services/';
-import { InputFieldElement } from 'components/';
+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';
@@ -9,10 +9,14 @@ import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 @controller
 class TransactionCreateElement 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: 'New Transaction',
@@ -21,8 +25,15 @@ class TransactionCreateElement extends BasePageElement {
 	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();
+		if (this.walletData && this.walletData.walletId) {
+			this.setTransactionType();
+		} else {
+			this.initial = true;
+		}
 	};
 
 	get nameInput(): InputFieldElement | AppDropdownElement {
@@ -42,6 +53,17 @@ class TransactionCreateElement extends BasePageElement {
 		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);
@@ -49,26 +71,43 @@ class TransactionCreateElement extends BasePageElement {
 		} 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 } = values;
+			const { description: description, wallet: walletId, amount, transactionType: transactionTypeId } = values;
 
-			const response = await this.transactionService.post({
+			const walletData = this.walletData;
+
+			const formData = {
 				description,
-				walletId,
 				amount,
-			});
+				walletId: walletData && walletData.walletId ? walletData.walletId : walletId,
+				transactionTypeId:
+					walletData && walletData.transactionTypeId ? walletData.transactionTypeId : transactionTypeId,
+			};
+			const response = await this.transactionService.post(formData);
 
 			if (response?.id) {
-				this.appMain.triggerWalletUpdate();
+				this.appMain.triggerTransactionUpdate();
 				this.appMain.pushToast('success', 'Transaction created successfully!');
-				this.routerService.goTo('/history', {
-					walletId: response.id,
-				});
+
+				if (walletData.walletId) {
+					this.appMain?.closeModal();
+				} else {
+					this.routerService.goTo('/history', {
+						walletId: response.walletId,
+					});
+				}
 			}
 		} catch (err) {
 			this.errorMessage = 'Unable to create transaction!';
@@ -86,31 +125,55 @@ class TransactionCreateElement extends BasePageElement {
 	}
 
 	render = (): TemplateResult => {
+		const renderInput = (type, name, label, rules, hide?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="${type}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="transaction-create.inputs"
+				data-rules="${rules}"
+			></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-create.inputs"
+				data-rules="${rules}"
+				data-fetch="${fetch}"
+			></app-dropdown>`;
+		};
+
 		return html`
 			<div>Create wallet</div>
-			<app-form data-custom="transaction-create#onSubmit" data-has-cancel="true">
-				<input-field
-					data-type="number"
-					data-name="amount"
-					data-label="Amount"
-					data-targets="transaction-create.inputs"
-					data-rules="required"
-				></input-field>
-				<input-field
-					data-type="text"
-					data-name="description"
-					data-label="Description"
-					data-targets="transaction-create.inputs"
-					data-rules="required"
-				></input-field>
-				<app-dropdown
-					data-name="wallet"
-					data-label="Wallet"
-					data-targets="transaction-create.inputs"
-					data-rules="required"
-					data-fetch="transaction-create#getWallets"
-				>
-				</app-dropdown>
+			<app-form
+				data-custom="transaction-create#onSubmit"
+				data-has-cancel="true"
+				data-target="transaction-create.appForm"
+			>
+				${renderInput('number', 'amount', 'Amount', 'required')}
+				${renderInput('text', 'description', 'Description', 'required')}
+				${renderDropdown(
+					'transaction-create#getWallets',
+					'wallet',
+					'Wallet',
+					'required',
+					this.walletData && this.walletData.walletId
+				)}
+				${renderDropdown(
+					'transaction-create#getTypes',
+					'transactionType',
+					'Transaction Type',
+					'required',
+					this.walletData && this.walletData.walletId
+				)}
 				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
 			</app-form>
 		`;

src/pages/wallet-page/WalletPageElement.ts

@@ -29,10 +29,17 @@ class WalletPageElement extends BasePageElement {
 		this.update();
 		this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
 		this.appMain.addEventListener('tokenchange', this.update);
+		this.appMain.addEventListener('transactionupdate', this.transactionUpdated);
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
 		appMain?.removeEventListener('tokenchange', this.update);
+		appMain?.removeEventListener('transactionupdate', this.transactionUpdated);
+	};
+
+	transactionUpdated = () => {
+		this.walletHeader?.executeFetch();
+		this.pagination?.executeFetch();
 	};
 
 	getTransactions = async (options): Promise<any> => {
@@ -43,6 +50,7 @@ class WalletPageElement extends BasePageElement {
 					options['walletId'] = walletId;
 				}
 			}
+			options.embed = 'TransactionType';
 			const response = await this.transactionsService.getAll(options);
 			return response;
 		} catch (err) {
@@ -69,6 +77,30 @@ class WalletPageElement extends BasePageElement {
 		this.walletHeader.nextMonth = header.nextMonth || '0';
 	};
 
+	newExpense = (s): void => {
+		const _modal = this.appMain.appModal;
+		if (_modal) {
+			this.appMain.closeModal();
+		} else {
+			this.appMain.createModal('transaction-create', {
+				walletId: this.routerService?.routerState?.data?.walletId,
+				transactionType: 'expense',
+			});
+		}
+	};
+
+	newGain = (s): void => {
+		const _modal = this.appMain.appModal;
+		if (_modal) {
+			this.appMain.closeModal();
+		} else {
+			this.appMain.createModal('transaction-create', {
+				walletId: this.routerService?.routerState?.data?.walletId,
+				transactionType: 'gain',
+			});
+		}
+	};
+
 	render = (): TemplateResult => {
 		const renderHeader = () => html`<wallet-header
 			data-target="wallet-page.walletHeader"
@@ -81,7 +113,10 @@ class WalletPageElement extends BasePageElement {
 
 		const renderWallet = () => {
 			if (this.routerService?.routerState?.data?.walletId) {
-				return html`<span>${this.routerService?.routerState?.data?.walletId}</span>`;
+				return html`<div class="wallet-buttons">
+					<button class="btn btn-squared btn-red" app-action="click:wallet-page#newExpense">New Expense</button>
+					<button class="btn btn-squared btn-green" app-action="click:wallet-page#newGain">New Gain</button>
+				</div>`;
 			}
 			return html``;
 		};