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() {
-		this.appMain.setTitle(this.pageTitle);
+		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?.executeFetch?.(null, () => this.mappedData(this.modalData.data));
+		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
+		const renderEditActions = () => html`<div class="d--flex">
-				><button class="btn btn-rounded btn-red" @click="${() => this.transactionEdit(item)}}">Cancel</button></span
+			<button class="btn btn-rounded btn-red" @click="${() => this.transactionEdit(item)}}">Cancel</button>
-			><span
+			<button class="btn btn-rounded btn-primary" @click="${() => this.transactionEditSave(item)}}">Save</button>
-				><button class="btn btn-rounded btn-primary" @click="${() => this.transactionEditSave(item)}}">
+		</div>`;
-					Save
+		const renderRegularActions = () => html`<div class="d--flex">
-				</button></span
+			<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>
-		const renderRegularActions = () => html`<span
+		</div>`;
-				><button class="btn btn-rounded btn-primary" @click="${() => this.transactionEdit(item)}}">Edit</button></span
+		return html`<tr class="col-checks">
-			>
-			<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
@@ -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

@@ -1,66 +1,76 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 app-main {
-    * {
+	* {
-        font-family: 'Roboto', sans-serif;
+		font-family: 'Roboto', sans-serif;
-        font-size: 14px;
+		font-size: 14px;
-    }
+	}
 
-    input,
+	input,
-    select,
+	select,
-    textarea,
+	textarea,
-    button {
+	button {
-        font-family: inherit;
+		font-family: inherit;
-        font-size: inherit;
+		font-size: inherit;
-        line-height: inherit;
+		line-height: inherit;
-    }
+	}
 
-    a {
+	a {
-        color: $blue-07;
+		color: $blue-07;
-        text-decoration: none;
+		text-decoration: none;
 
-        &:hover {
+		&:hover {
-            text-decoration: underline;
+			text-decoration: underline;
-        }
+		}
-    }
+	}
 
-    hr,
+	hr,
-    .line {
+	.line {
-        // Horizontal line should look more clean
+		// Horizontal line should look more clean
-        height: 0;
+		height: 0;
-        margin: 15px 0;
+		margin: 15px 0;
-        overflow: hidden;
+		overflow: hidden;
-        background: transparent;
+		background: transparent;
-        border: 0;
+		border: 0;
-        border-bottom: $border-width $border-style $gray-03;
+		border-bottom: $border-width $border-style $gray-03;
-    }
+	}
 
-    table {
+	table {
-        border-spacing: 0;
+		border-spacing: 0;
-        border-collapse: collapse;
+		border-collapse: collapse;
-    }
+	}
 
-    td,
+	td,
-    th {
+	th {
-        padding: 0;
+		padding: 0;
-    }
+	}
 
-    button {
+	button {
-        cursor: pointer;
+		cursor: pointer;
-        border-radius: 0;
+		border-radius: 0;
-    }
+	}
 
-    details {
+	details {
-        summary {
+		summary {
-            cursor: pointer;
+			cursor: pointer;
-        }
+		}
-        &:not([open]) {
+		&:not([open]) {
-            > *:not(summary) {
+			> *:not(summary) {
-                display: none !important;
+				display: none !important;
-            }
+			}
-        }
+		}
-    }
+	}
 
-    [hidden][hidden] {
+	[hidden][hidden] {
-        display: none !important;
+		display: none !important;
-    }
+	}
+}
+
+.d {
+	&--flex {
+		display: flex;
+		> * {
+			flex: 1;
+			margin: 0 4px;
+		}
+	}
 }