diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index a8a5720..556c574 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -130,7 +130,9 @@ class AppMainElement extends HTMLElement { checkSubscriptions = async () => { if (this.isAuth && !this.subscriptionChecked) { const checked = await this.transactionsService.check(); - console.log(checked); + this.createModal('transaction-check', { + data: checked, + }); this.subscriptionChecked = true; this.removeEventListener('routechanged', this.checkSubscriptions); } diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index 4875b03..e3e84a4 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -60,7 +60,7 @@ class AppPaginationElement extends BaseComponentElement { this.update(); }; - executeFetch = async (options?): Promise => { + executeFetch = async (options?, fetchFunc = this.fetchFunc): Promise => { if (!options) { options = { rpp: this.rpp || 5, @@ -70,7 +70,7 @@ class AppPaginationElement extends BaseComponentElement { try { this.loader?.start?.(); - const response = await this.fetchFunc(options); + const response = await fetchFunc(options); this.loader?.stop?.(); this.setItems(response?.items); this.totalItems = response?.totalRecords; diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index 70ae9b4..85c9758 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/src/components/input-field/InputFieldElement.ts @@ -12,6 +12,7 @@ class InputFieldElement extends BaseComponentElement { @attr rules: string; @attr pattern: string; @attr customAction: string; + @attr initialValue: string; @target main: HTMLElement; @target inp: HTMLElement; @closest appForm: AppFormElement; @@ -31,6 +32,9 @@ class InputFieldElement extends BaseComponentElement { this.validator = new Validator(this, this.appForm, this.rules); this.randId = `${name}${randomId()}`; this.update(); + if (this.initialValue) { + this._value = this.initialValue; + } }; attributeChangedCallback() { diff --git a/src/pages/index.ts b/src/pages/index.ts index 6766e30..5837b23 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -13,3 +13,4 @@ export * from './wallet-page'; export * from './subscription-edit'; export * from './transaction-edit'; export * from './wallet-edit'; +export * from './transaction-check'; diff --git a/src/pages/transaction-check/TransactionCheckElement.ts b/src/pages/transaction-check/TransactionCheckElement.ts new file mode 100644 index 0000000..eb92d55 --- /dev/null +++ b/src/pages/transaction-check/TransactionCheckElement.ts @@ -0,0 +1,87 @@ +import { TemplateResult, controller, target, html } from 'core/utils'; +import { TransactionsService } from 'services/'; +import { AppMainElement, AppPaginationElement } from 'components/'; +import { BasePageElement } from 'common/'; +import { TransactionCheckElementTemplate } from 'pages/transaction-check'; +import dayjs from 'dayjs'; + +@controller('transaction-check') +class TransactionCheckElement extends BasePageElement { + private transactionsService: TransactionsService; + @target pagination: AppPaginationElement; + modalData: any = null; + constructor() { + super({ + title: 'Transaction Check', + }); + } + + elementConnected = (): void => { + this.transactionsService = new TransactionsService(this.appMain?.appService); + this.update(); + this.pagination?.setCustomRenderItem?.(this.renderSubscription)!; + this.pagination?.setFetchFunc?.(this.getTransactions, false)!; + this.modalData = this.getData(); + this.pagination?.executeFetch?.(null, () => this.mappedData(this.modalData.data)); + }; + + mappedData = (data) => { + for (const item of data?.items) { + item.formattedDate = dayjs(item.transactionDate).format('YYYY-MM-DD'); + } + return data; + }; + + renderSubscription = (item) => html` + ${!item.isEdit + ? html`${dayjs(item.transactionDate).format("MMM DD 'YY")}` + : html``} + ${item.description} + + + ${item?.transactionType?.type == 'expense' ? '- ' : ''} + ${Number(item.amount).toLocaleString('en-US', { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + })} + + (${item.currency ? item.currency : 'USD'}) + + + + + `; + + transactionEdit = (item) => { + item.isEdit = !item.isEdit; + this.pagination?.update(); + }; + + transactionUpdated = () => { + this.pagination?.executeFetch(); + }; + + getTransactions = async (options): Promise => { + try { + options.embed = 'TransactionType'; + options.sortBy = 'dateCreated|desc'; + const response = await this.transactionsService.check(options); + return response; + } catch (err) { + throw err; + } + }; + + render = (): TemplateResult => + TransactionCheckElementTemplate({ walletId: this.routerService?.routerState?.data?.walletId }); +} + +export type { TransactionCheckElement }; diff --git a/src/pages/transaction-check/TransactionCheckElementTemplate.ts b/src/pages/transaction-check/TransactionCheckElementTemplate.ts new file mode 100644 index 0000000..ad9c3d1 --- /dev/null +++ b/src/pages/transaction-check/TransactionCheckElementTemplate.ts @@ -0,0 +1,16 @@ +import { html, nothing, TemplateResult } from 'core/utils'; + +export default (props): TemplateResult => { + const { walletId } = props; + const renderWallet = () => { + if (walletId) { + return html`${walletId}`; + } + return nothing; + }; + + return html`
+ ${renderWallet()} + +
`; +}; diff --git a/src/pages/transaction-check/index.ts b/src/pages/transaction-check/index.ts new file mode 100644 index 0000000..dcdccfe --- /dev/null +++ b/src/pages/transaction-check/index.ts @@ -0,0 +1,2 @@ +export { default as TransactionCheckElementTemplate } from './TransactionCheckElementTemplate'; +export * from './TransactionCheckElement';