save or complete transaction check

src/components/app-main/AppMainElement.ts

@@ -129,7 +129,7 @@ class AppMainElement extends HTMLElement {
 
 	checkSubscriptions = async () => {
 		if (this.isAuth && !this.subscriptionChecked) {
-			const checked = await this.transactionsService.check();
+			const checked = await this.transactionsService.check({ sortBy: 'transactionDate asc' });
 			this.createModal('transaction-check', {
 				data: checked,
 			});

src/pages/transaction-check/TransactionCheckElement.ts

@@ -1,6 +1,6 @@
 import { TemplateResult, controller, target, html } from 'core/utils';
-import { TransactionsService } from 'services/';
-import { AppMainElement, AppPaginationElement } from 'components/';
+import { TransactionsService, TransactionStatusService } from 'services/';
+import { AppPaginationElement } from 'components/';
 import { BasePageElement } from 'common/';
 import { TransactionCheckElementTemplate } from 'pages/transaction-check';
 import dayjs from 'dayjs';
@@ -8,6 +8,8 @@ import dayjs from 'dayjs';
 @controller('transaction-check')
 class TransactionCheckElement extends BasePageElement {
 	private transactionsService: TransactionsService;
+	private transactionStatusService: TransactionStatusService;
+	transactionStatuses: [];
 	@target pagination: AppPaginationElement;
 	modalData: any = null;
 	constructor() {
@@ -16,7 +18,9 @@ class TransactionCheckElement extends BasePageElement {
 		});
 	}
 
-	elementConnected = (): void => {
+	elementConnected = async (): Promise<void> => {
+		this.transactionStatusService = new TransactionStatusService(this.appMain?.appService);
+		await this.fetchTransactionStatus();
 		this.transactionsService = new TransactionsService(this.appMain?.appService);
 		this.update();
 		this.pagination?.setCustomRenderItem?.(this.renderSubscription)!;
@@ -32,39 +36,77 @@ class TransactionCheckElement extends BasePageElement {
 		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'}"
+	renderSubscription = (item) => {
+		const renderEditActions = () => html`<span
+				><button class="btn btn-rounded btn-red" @click="${() => this.transactionEdit(item)}}">Cancel</button></span
+			><span
+				><button class="btn btn-rounded btn-primary" @click="${() => this.transactionEditSave(item)}}">
+					Save
+				</button></span
+			>`;
+		const renderRegularActions = () => html`<span
+				><button class="btn btn-rounded btn-primary" @click="${() => this.transactionEdit(item)}}">Edit</button></span
 			>
-				${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>`;
+			<span
+				><button class="btn btn-rounded btn-green" @click="${() => this.transactionEditComplete(item)}}">
+					Complete
+				</button></span
+			>`;
+		return 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">${item.isEdit ? renderEditActions() : renderRegularActions()}</td>
+		</tr>`;
+	};
+
+	fetchTransactionStatus = async () => {
+		this.transactionStatuses = await this.transactionStatusService.getAll();
+	};
 
 	transactionEdit = (item) => {
 		item.isEdit = !item.isEdit;
 		this.pagination?.update();
 	};
 
+	transactionEditSave = async (item) => {
+		const resource = {
+			transactionDate: dayjs(item.newTransactionDate || item.transactionDate)
+				.utc(true)
+				.format(),
+		};
+		await this.updateTransaction(item.id, resource);
+	};
+
+	transactionEditComplete = async (item) => {
+		const completedStatusId = (this.transactionStatuses?.find((item: any) => item.status === 'completed') as any)?.id!;
+		if (completedStatusId) {
+			const resource = {
+				transactionStatusId: completedStatusId,
+			};
+			await this.updateTransaction(item.id, resource);
+		}
+	};
+
 	transactionUpdated = () => {
 		this.pagination?.executeFetch();
 	};
@@ -72,11 +114,22 @@ class TransactionCheckElement extends BasePageElement {
 	getTransactions = async (options): Promise<any> => {
 		try {
 			options.embed = 'TransactionType';
-			options.sortBy = 'dateCreated|desc';
+			options.sortBy = 'transactionDate|asc';
 			const response = await this.transactionsService.check(options);
+			return this.mappedData(response);
+		} catch (err) {
+			throw err;
+		}
+	};
+
+	updateTransaction = async (id, resource): Promise<any> => {
+		try {
+			const response = await this.transactionsService.put(id, resource);
 			return response;
 		} catch (err) {
 			throw err;
+		} finally {
+			this.pagination?.defaultFetch();
 		}
 	};
 

src/pages/transaction-check/TransactionCheckElementTemplate.ts

@@ -1,16 +1,7 @@
 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/services/TransactionStatusService.ts

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

src/services/index.ts

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