added transaction check list

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);
 		}

src/components/app-pagination/AppPaginationElement.ts

@@ -60,7 +60,7 @@ class AppPaginationElement extends BaseComponentElement {
 		this.update();
 	};
 
-	executeFetch = async (options?): Promise<void> => {
+	executeFetch = async (options?, fetchFunc = this.fetchFunc): Promise<void> => {
 		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;

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() {

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';

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`<tr class="col-transactions">
+		${!item.isEdit
+			? html`<td class="--left">${dayjs(item.transactionDate).format("MMM DD 'YY")}</td>`
+			: html`<input-field
+					data-type="date"
+					data-name="${item.name}"
+					data-targets="transaction-check.inputs"
+					data-initial-value="${item.formattedDate}"
+					@change="${(e) => (item.newTransactionDate = e.target.value)}"
+			  ></input-field>`}
+		<td class="--left">${item.description}</td>
+		<td class="balance-cell --right">
+			<span
+				class="balance ${item.amount > 0 && item?.transactionType?.type != 'expense' ? '--positive' : '--negative'}"
+			>
+				${item?.transactionType?.type == 'expense' ? '- ' : ''}
+				${Number(item.amount).toLocaleString('en-US', {
+					maximumFractionDigits: 2,
+					minimumFractionDigits: 2,
+				})}
+			</span>
+			<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
+		</td>
+		<td class="--right">
+			<span><button class="btn btn-rounded btn-gray" @click="${() => this.transactionEdit(item)}}">Edit</button></span>
+		</td>
+	</tr>`;
+
+	transactionEdit = (item) => {
+		item.isEdit = !item.isEdit;
+		this.pagination?.update();
+	};
+
+	transactionUpdated = () => {
+		this.pagination?.executeFetch();
+	};
+
+	getTransactions = async (options): Promise<any> => {
+		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 };

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`<span>${walletId}</span>`;
+		}
+		return nothing;
+	};
+
+	return html`<div>
+		${renderWallet()}
+		<app-pagination data-target="transaction-check.pagination"></app-pagination>
+	</div>`;
+};

src/pages/transaction-check/index.ts

@@ -0,0 +1,2 @@
+export { default as TransactionCheckElementTemplate } from './TransactionCheckElementTemplate';
+export * from './TransactionCheckElement';