added subscription modal

src/components/app-dropdown/AppDropdownElement.ts

@@ -144,6 +144,8 @@ class AppDropdownElement extends BaseComponentElement {
 	setOpen = (isOpen) => {
 		this.isOpen = isOpen;
 		if (!isOpen) {
+			const active = this.appMain.activeElement;
+			if (active.closest('app-link') || active.closest('a') || active.closest('button')) return;
 			this.validate();
 			this.update();
 		}

src/components/app-main/AppMainElement.ts

@@ -25,6 +25,7 @@ class AppMainElement extends HTMLElement {
 		walletupdate: new Event('walletupdate'),
 		transactionupdate: new Event('transactionupdate'),
 	};
+	activeElement: HTMLElement = this;
 
 	constructor() {
 		super();
@@ -105,8 +106,25 @@ class AppMainElement extends HTMLElement {
 			},
 		]);
 		this.routerService.init();
+		this.addEventListener('mousedown', this.setActiveElement, false);
+		this.addEventListener('tokenchange', this.closeOffToken);
 	}
 
+	closeOffToken = () => {
+		if (!this.isAuth) {
+			this.closeModal();
+		}
+	};
+
+	disconnectedCallback = () => {
+		this.removeEventListener('mousedown', this.setActiveElement);
+		this.removeEventListener('tokenchange', this.closeOffToken);
+	};
+
+	setActiveElement = (e) => {
+		this.activeElement = e?.target || this;
+	};
+
 	middleAuth = () => {
 		if (!this.isAuth) {
 			this.routerService.goTo('/unauthorized');

src/components/input-field/InputFieldElement.ts

@@ -58,6 +58,8 @@ class InputFieldElement extends BaseComponentElement {
 	};
 
 	validateDisplay = () => {
+		const active = this.appMain.activeElement;
+		if (active.closest('app-link') || active.closest('a') || active.closest('button')) return;
 		if (!this.validate()) {
 			this.displayError = true;
 		} else {

src/pages/index.ts

@@ -7,4 +7,5 @@ export * from './history-page/HistoryPageElement';
 export * from './wallet-list/WalletListElement';
 export * from './wallet-create/WalletCreateElement';
 export * from './transaction-create/TransactionCreateElement';
+export * from './subscription-create/SubscriptionCreateElement';
 export * from './wallet-page/WalletPageElement';

src/pages/subscription-create/SubscriptionCreateElement.ts

@@ -0,0 +1,202 @@
+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';
+
+@controller
+class SubscriptionCreateElement 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: 'New 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();
+		if (this.walletData && this.walletData.walletId) {
+			this.setTransactionType();
+		} else {
+			this.initial = true;
+		}
+	};
+
+	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) {}
+	};
+
+	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,
+				customRange,
+				transactionType: transactionTypeId,
+				subscriptionType: subscriptionTypeId,
+			} = values;
+
+			const walletData = this.walletData;
+
+			const formData = {
+				description,
+				amount,
+				customRange: customRange || 0,
+				walletId: walletData && walletData.walletId ? walletData.walletId : walletId,
+				transactionTypeId:
+					walletData && walletData.transactionTypeId ? walletData.transactionTypeId : transactionTypeId,
+				subscriptionTypeId:
+					walletData && walletData.subscriptionTypeId ? walletData.subscriptionTypeId : subscriptionTypeId,
+			};
+			const response = await this.subscriptionService.post(formData);
+
+			if (response?.id) {
+				this.appMain.triggerTransactionUpdate();
+				this.appMain.pushToast('success', 'Transaction created successfully!');
+
+				if (walletData.walletId) {
+					this.appMain?.closeModal();
+				} else {
+					this.routerService.goTo('/history', {
+						walletId: response.walletId,
+					});
+				}
+			}
+		} catch (err) {
+			this.errorMessage = 'Unable to create 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?) => {
+			if (hide) {
+				return html``;
+			}
+			return html`<input-field
+				data-type="${type}"
+				data-name="${name}"
+				data-label="${label}"
+				data-targets="subscription-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="subscription-create.inputs"
+				data-rules="${rules}"
+				data-fetch="${fetch}"
+			></app-dropdown>`;
+		};
+
+		return html`
+			<app-form
+				data-custom="subscription-create#onSubmit"
+				data-has-cancel="true"
+				data-target="subscription-create.appForm"
+			>
+				${renderInput('number', 'amount', 'Amount', 'required')}
+				${renderInput('text', 'description', 'Description', 'required')}
+				${renderDropdown(
+					'subscription-create#getWallets',
+					'wallet',
+					'Wallet',
+					'required',
+					this.walletData && this.walletData.walletId
+				)}
+				${renderDropdown('subscription-create#getTypes', 'transactionType', 'Transaction Type', 'required')}
+				${renderInput('number', 'customRange', 'Every', 'required')}
+				${renderDropdown('subscription-create#getSubs', 'subscriptionType', 'Subscription Type', 'required')}
+				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
+			</app-form>
+		`;
+	};
+}
+
+export type { SubscriptionCreateElement };

src/pages/wallet-page/WalletPageElement.ts

@@ -101,6 +101,17 @@ class WalletPageElement extends BasePageElement {
 		}
 	};
 
+	newSub = (s): void => {
+		const _modal = this.appMain.appModal;
+		if (_modal) {
+			this.appMain.closeModal();
+		} else {
+			this.appMain.createModal('subscription-create', {
+				walletId: this.routerService?.routerState?.data?.walletId,
+			});
+		}
+	};
+
 	render = (): TemplateResult => {
 		const renderHeader = () => html`<wallet-header
 			data-target="wallet-page.walletHeader"
@@ -115,6 +126,7 @@ class WalletPageElement extends BasePageElement {
 			if (this.routerService?.routerState?.data?.walletId) {
 				return html`<div class="wallet-buttons">
 					<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>
 						<button class="btn btn-squared btn-green" app-action="click:wallet-page#newGain">New Gain</button>
 					</div>

src/services/SubscriptionService.ts

@@ -0,0 +1,9 @@
+import { AppService, BaseService } from 'core/services';
+
+class SubscriptionService extends BaseService {
+	constructor(appService: AppService) {
+		super('/subscription', appService);
+	}
+}
+
+export default SubscriptionService;

src/services/SubscriptionTypeService.ts

@@ -0,0 +1,9 @@
+import { AppService, BaseService } from 'core/services';
+
+class SubscriptionTypeService extends BaseService {
+	constructor(appService: AppService) {
+		super('/subscription-type', appService);
+	}
+}
+
+export default SubscriptionTypeService;

src/services/index.ts

@@ -3,3 +3,5 @@ export { default as AuthService } from './AuthService';
 export { default as WalletService } from './WalletService';
 export { default as TransactionsService } from './TransactionsService';
 export { default as TransactionTypeService } from './TransactionTypeService';
+export { default as SubscriptionService } from './SubscriptionService';
+export { default as SubscriptionTypeService } from './SubscriptionTypeService';