From 3320d1ad09cd0405dbe2b2dc2afc5efd627a722f Mon Sep 17 00:00:00 2001 From: Fran Jurmanovic Date: Fri, 30 Jul 2021 22:26:09 +0200 Subject: [PATCH] transaction edit --- .../app-pagination/AppPaginationElement.ts | 14 ++ src/pages/index.ts | 3 +- .../SubscriptionEditElement.ts | 8 +- .../TransactionEditElement.ts | 235 ++++++++++++++++++ src/styles/app-pagination/app-pagination.scss | 3 +- 5 files changed, 257 insertions(+), 6 deletions(-) create mode 100644 src/pages/transaction-edit/TransactionEditElement.ts diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index fd91bdf..fb0fcc7 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -95,6 +95,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 +128,9 @@ class AppPaginationElement extends BaseComponentElement { (${item.currency ? item.currency : 'USD'}) + + + `; const renderItems = this.customRenderItems diff --git a/src/pages/index.ts b/src/pages/index.ts index d9c7138..fd97128 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -10,4 +10,5 @@ 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'; \ No newline at end of file +export * from './subscription-edit/SubscriptionEditElement'; +export * from './transaction-edit/TransactionEditElement'; \ No newline at end of file diff --git a/src/pages/subscription-edit/SubscriptionEditElement.ts b/src/pages/subscription-edit/SubscriptionEditElement.ts index c19fd9a..7000197 100644 --- a/src/pages/subscription-edit/SubscriptionEditElement.ts +++ b/src/pages/subscription-edit/SubscriptionEditElement.ts @@ -38,8 +38,8 @@ class SubscriptionEditElement extends BasePageElement { this.subscriptionTypeService = new SubscriptionTypeService(this.appMain?.appService); this.authService = new AuthService(this.appMain.appService); this.walletData = this.getData(); - this.getSubscription(this.walletData.id); this.update(); + this.getSubscription(this.walletData?.id); if (this.walletData && this.walletData.walletId) { this.setTransactionType(); } else { @@ -92,8 +92,8 @@ class SubscriptionEditElement extends BasePageElement { if (wallet) { (wallet as AppDropdownElement).setItemValue(response.wallet); } - response.wallet = response.walletId - response.endDate = dayjs(response.endDate).format('YYYY-MM-DD') + response.wallet = response.walletId; + response.endDate = dayjs(response.endDate).format('YYYY-MM-DD'); this.appForm.set(response); } catch (err) { @@ -151,7 +151,7 @@ class SubscriptionEditElement extends BasePageElement { this.appMain.triggerTransactionUpdate(); this.appMain.pushToast('success', 'Subscription edited successfully!'); - if (walletData.walletId) { + if (walletData.id) { this.appMain?.closeModal(); } else { this.routerService.goTo('/subscriptions', { diff --git a/src/pages/transaction-edit/TransactionEditElement.ts b/src/pages/transaction-edit/TransactionEditElement.ts new file mode 100644 index 0000000..28d6074 --- /dev/null +++ b/src/pages/transaction-edit/TransactionEditElement.ts @@ -0,0 +1,235 @@ +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'; +import utc from 'dayjs/plugin/utc'; +dayjs.extend(utc); + +@controller +class TransactionEditElement extends BasePageElement { + @targets inputs: Array; + @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 => { + 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) {} + }; + + onSubmit = async (values): Promise => { + 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``; + }; + + const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => { + if (hide) { + return html``; + } + return html``; + }; + + const renderDropdown = (fetch, name, label, rules, hide?) => { + if (hide) { + return html``; + } + return html``; + }; + + return html` + + ${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`
${this.errorMessage}
` : html``} + + `; + }; +} + +export type { TransactionEditElement }; diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss index 27a822b..bcfc9cd 100644 --- a/src/styles/app-pagination/app-pagination.scss +++ b/src/styles/app-pagination/app-pagination.scss @@ -47,13 +47,14 @@ app-pagination { grid-template-columns: repeat(6, 1fr); } &.col-transactions { - grid-template-columns: auto 1fr auto; + grid-template-columns: 1fr 10fr 1fr 1fr; } td, th { margin: 0 12px; overflow: hidden; // Or flex might break list-style: none; + align-self: center; &.--left { text-align: left; }