create transaction with type and wallet id when comming from wallet page

src/components/app-dropdown/AppDropdownElement.ts

@@ -46,9 +46,8 @@ class AppDropdownElement extends BaseComponentElement {
 		this.validator = new Validator(this, this.appForm, this.rules);
 		this.randId = `${name}${randomId()}`;
 		this.update();
-		this.appMain.addEventListener('click', this.outsideClick);
+		this.appMain?.addEventListener('click', this.outsideClick);
 		this.elementDisconnectCallbacks.push((appMain) => {
-			console.log('oslo');
 			appMain.removeEventListener('click', this.outsideClick);
 		});
 
@@ -62,7 +61,6 @@ class AppDropdownElement extends BaseComponentElement {
 	elementDisconnected = (): void => {};
 
 	outsideClick = (e) => {
-		console.log(e.target);
 		this.closeDropdown(e);
 	};
 
@@ -209,7 +207,7 @@ class AppDropdownElement extends BaseComponentElement {
 										<input
 											class="dropdown-custom-search"
 											type="text"
-											value="${searchPhrase}"
+											value="${searchPhrase || ''}"
 											app-action="input:app-dropdown#phraseChange"
 											autofocus
 										/>

src/components/app-main/AppMainElement.ts

@@ -5,6 +5,7 @@ import { AppModalElement, AppRootElement } from 'components/';
 import { closest } from 'core/utils';
 import { AppLoaderElement } from 'components/app-loader/AppLoaderElement';
 import { ToastPortalElement } from 'components/toast-portal/ToastPortalElement';
+import { BasePageElement } from 'common/';
 
 @controller
 class AppMainElement extends HTMLElement {
@@ -22,6 +23,7 @@ class AppMainElement extends HTMLElement {
 		routechanged: new Event('routechanged'),
 		tokenchange: new Event('tokenchange'),
 		walletupdate: new Event('walletupdate'),
+		transactionupdate: new Event('transactionupdate'),
 	};
 
 	constructor() {
@@ -112,12 +114,12 @@ class AppMainElement extends HTMLElement {
 		}
 	};
 
-	createModal = (element: string) => {
+	createModal = (element: string, data?: any) => {
 		this.closeModal();
 		this.appMain.addEventListener('routechanged', this.closeModal);
 
 		const _appModal = this.createAppModal();
-		const _modalContent = this.createModalContent(element);
+		const _modalContent = this.createModalContent(element, data);
 		const _modalOverlay = this.createModalOverlay();
 
 		_modalOverlay.appendChild(_modalContent);
@@ -129,6 +131,10 @@ class AppMainElement extends HTMLElement {
 		this.dispatchEvent(this.domEvents.walletupdate);
 	};
 
+	public triggerTransactionUpdate = () => {
+		this.dispatchEvent(this.domEvents.transactionupdate);
+	};
+
 	public setTitle = (title: string): void => {
 		if (!title) title = __CONFIG__.appName;
 		window.document.title = title;
@@ -146,10 +152,11 @@ class AppMainElement extends HTMLElement {
 		this.appendChild(_loader);
 	};
 
-	private createModalContent = (element: string) => {
+	private createModalContent = (element: string, data?: any) => {
 		const _modalElement = document.createElement(element);
 		const _divEl = document.createElement('div');
 		_modalElement.setAttribute('data-target', 'app-modal.modalElement');
+		(_modalElement as BasePageElement).setData({ ...data });
 		_divEl.setAttribute('data-target', 'app-modal.modalContent');
 		//_divEl.setAttribute('data-action', 'click:app-main#preventClosing');
 		_divEl.appendChild(_modalElement);

src/components/app-pagination/AppPaginationElement.ts

@@ -11,6 +11,7 @@ class AppPaginationElement extends BaseComponentElement {
 	@attr totalItems: number;
 	@attr autoInit: string;
 	@attr tableLayout: string = 'transactions-table';
+	@attr colLayout: string = 'col-transactions';
 	initial: boolean = false;
 
 	private customRenderItems: () => TemplateResult;
@@ -95,14 +96,20 @@ class AppPaginationElement extends BaseComponentElement {
 
 	render = (): TemplateResult => {
 		const { rpp, totalItems, page, items } = this;
+		console.log(items);
 
 		const renderItem = this.customRenderItem
 			? this.customRenderItem
-			: (item, iter) => html`<tr>
+			: (item, iter) => html`<tr class="${this.colLayout ? this.colLayout : ''}">
 					<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
 					<td class="--left">${item.description}</td>
 					<td class="balance-cell --right">
-						<span class="balance ${item.amount > 0 ? '--positive' : '--negative'}">
+						<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,
@@ -119,11 +126,11 @@ class AppPaginationElement extends BaseComponentElement {
 						return html``;
 					} else {
 						if (items?.length > 0) {
-							return html`<table class="${this.tableLayout}">
-								${items?.map((item, iter) => renderItem(item, iter))} ${renderPagination()}
-							</table>`;
+							return items?.map((item, iter) => renderItem(item, iter));
 						}
-						return html``;
+						return html`<tr>
+							<td>No data</td>
+						</tr>`;
 					}
 			  };
 
@@ -151,7 +158,11 @@ class AppPaginationElement extends BaseComponentElement {
 			}
 		};
 
-		return html`<div class="app-pagination">${renderItems()}</div>`;
+		return html`<div class="app-pagination">
+			<table class="${this.tableLayout}">
+				${renderItems()} ${renderPagination()}
+			</table>
+		</div>`;
 	};
 }