fixed transaction check layout

src/common/pages/BasePageElement/BasePageElement.ts

@@ -5,6 +5,7 @@ import { isTrue } from 'core/utils';
 
 class BasePageElement extends BaseElement {
 	public _pageTitle: string = '';
+	public hideTitleHead: boolean = false;
 	@attr hidetitle: string;
 	@attr customtitle: string;
 	private _data: any;
@@ -13,6 +14,7 @@ class BasePageElement extends BaseElement {
 		if (options?.title) {
 			this._pageTitle = options?.title;
 		}
+		this.hideTitleHead = options?.hideTitleHead || false;
 		this.connectedCallback = this.connectedCallback.bind(this);
 		this.disconnectedCallback = this.disconnectedCallback.bind(this);
 	}
@@ -36,7 +38,9 @@ class BasePageElement extends BaseElement {
 	};
 
 	connectedCallback() {
+		if (!this.hideTitleHead) {
 			this.appMain.setTitle(this.pageTitle);
+		}
 		super.connectedCallback();
 	}
 
@@ -53,4 +57,5 @@ export default BasePageElement;
 
 export type OptionType = {
 	title?: string;
+	hideTitleHead?: boolean;
 };

src/components/app-main/AppMainElement.ts

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

src/pages/history-page/HistoryPageElement.ts

@@ -49,6 +49,12 @@ class HistoryPageElement extends BasePageElement {
 		}
 	};
 
+	transactionCheck = () => {
+		this.appMain.createModal('transaction-check', {
+			autoInit: true,
+		});
+	};
+
 	render = (): TemplateResult =>
 		HistoryPageElementTemplate({ walletId: this.routerService?.routerState?.data?.walletId });
 }

src/pages/history-page/HistoryPageElementTemplate.ts

@@ -1,16 +1,12 @@
 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()}
+		<div class="wallet-buttons">
+			<button class="btn btn-squared btn-primary" app-action="click:history-page#transactionCheck">
+				Check Transactions
+			</button>
+		</div>
 		<app-pagination data-target="history-page.pagination"></app-pagination>
 	</div>`;
 };

src/pages/transaction-check/TransactionCheckElement.ts

@@ -15,6 +15,7 @@ class TransactionCheckElement extends BasePageElement {
 	constructor() {
 		super({
 			title: 'Transaction Check',
+			hideTitleHead: true,
 		});
 	}
 
@@ -23,10 +24,12 @@ class TransactionCheckElement extends BasePageElement {
 		await this.fetchTransactionStatus();
 		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?.setCustomRenderItem?.(this.renderSubscription)!;
+		this.pagination?.setFetchFunc?.(this.getTransactions, this.modalData?.autoInit)!;
+		if (!this.modalData?.autoInit) {
 			this.pagination?.executeFetch?.(null, () => this.mappedData(this.modalData.data));
+		}
 	};
 
 	mappedData = (data) => {
@@ -37,22 +40,15 @@ class TransactionCheckElement extends BasePageElement {
 	};
 
 	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
-			>
-			<span
-				><button class="btn btn-rounded btn-green" @click="${() => this.transactionEditComplete(item)}}">
-					Complete
-				</button></span
-			>`;
-		return html`<tr class="col-transactions">
+		const renderEditActions = () => html`<div class="d--flex">
+			<button class="btn btn-rounded btn-red" @click="${() => this.transactionEdit(item)}}">Cancel</button>
+			<button class="btn btn-rounded btn-primary" @click="${() => this.transactionEditSave(item)}}">Save</button>
+		</div>`;
+		const renderRegularActions = () => html`<div class="d--flex">
+			<button class="btn btn-rounded btn-primary" @click="${() => this.transactionEdit(item)}}">Edit</button>
+			<button class="btn btn-rounded btn-green" @click="${() => this.transactionEditComplete(item)}}">Complete</button>
+		</div>`;
+		return html`<tr class="col-checks">
 			${!item.isEdit
 				? html`<td class="--left">${dayjs(item.transactionDate).format("MMM DD 'YY")}</td>`
 				: html`<input-field
@@ -129,7 +125,12 @@ class TransactionCheckElement extends BasePageElement {
 		} catch (err) {
 			throw err;
 		} finally {
-			this.pagination?.defaultFetch();
+			const options = {
+				page: this.pagination?.page || 1,
+				rpp: this.pagination?.rpp || 10,
+			};
+			this.pagination?.executeFetch(options);
+			this.appMain?.triggerTransactionUpdate?.()!;
 		}
 	};
 

src/styles/app-pagination/app-pagination.scss

@@ -49,6 +49,9 @@ app-pagination {
 				&.col-transactions {
 					grid-template-columns: 1fr 10fr 1fr 1fr;
 				}
+				&.col-checks {
+					grid-template-columns: 3fr 8fr 2fr 3fr;
+				}
 				&.col-wallet {
 					grid-template-columns: 9fr 1fr;
 				}

src/styles/core/main.scss

@@ -64,3 +64,13 @@ app-main {
 		display: none !important;
 	}
 }
+
+.d {
+	&--flex {
+		display: flex;
+		> * {
+			flex: 1;
+			margin: 0 4px;
+		}
+	}
+}