diff --git a/src/components/app-dropdown/AppDropdownElement.ts b/src/components/app-dropdown/AppDropdownElement.ts index c560526..421fdee 100644 --- a/src/components/app-dropdown/AppDropdownElement.ts +++ b/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(); } diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index a283158..4dd7864 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/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'); diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index b883246..0e5528c 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/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 { diff --git a/src/pages/index.ts b/src/pages/index.ts index 33f0f20..78ff56a 100644 --- a/src/pages/index.ts +++ b/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'; diff --git a/src/pages/subscription-create/SubscriptionCreateElement.ts b/src/pages/subscription-create/SubscriptionCreateElement.ts new file mode 100644 index 0000000..18772ca --- /dev/null +++ b/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; + @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 => { + try { + const response = await this.walletService.getAll(options); + return response; + } catch (err) {} + }; + + getTypes = async (options): Promise => { + try { + const response = await this.transactionTypeService.getAll(options); + return response; + } catch (err) {} + }; + + getSubs = async (options): Promise => { + try { + const response = await this.subscriptionTypeService.getAll(options); + return response; + } catch (err) {} + }; + + onSubmit = async (values): Promise => { + 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``; + }; + + const renderDropdown = (fetch, name, label, rules, hide?) => { + if (hide) { + return html``; + } + return html``; + }; + + return html` + + ${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`
${this.errorMessage}
` : html``} + + `; + }; +} + +export type { SubscriptionCreateElement }; diff --git a/src/pages/wallet-page/WalletPageElement.ts b/src/pages/wallet-page/WalletPageElement.ts index 63f48dc..2dcfbfa 100644 --- a/src/pages/wallet-page/WalletPageElement.ts +++ b/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`
+
diff --git a/src/services/SubscriptionService.ts b/src/services/SubscriptionService.ts new file mode 100644 index 0000000..a5c89fa --- /dev/null +++ b/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; diff --git a/src/services/SubscriptionTypeService.ts b/src/services/SubscriptionTypeService.ts new file mode 100644 index 0000000..6dd4836 --- /dev/null +++ b/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; diff --git a/src/services/index.ts b/src/services/index.ts index 50bb30e..31edfd1 100644 --- a/src/services/index.ts +++ b/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';