implemented wallet list page

src/pages/history-page/HistoryPageElement.ts

@@ -27,6 +27,12 @@ class HistoryPageElement extends BasePageElement {
 
     getTransactions = async (options): Promise<any> => {
         try {
+            if (this?.routerService?.routerState?.data) {
+                const { walletId } = this?.routerService?.routerState?.data;
+                if (walletId) {
+                    options["walletId"] = walletId;
+                }
+            }
             const response = await this.transactionsService.getAll(options);
             return response;
         } catch (err) {
@@ -35,11 +41,20 @@ class HistoryPageElement extends BasePageElement {
     };
 
     render = (): TemplateResult => {
-        return html`
+        const renderWallet = () => {
+            if (this.routerService?.routerState?.data?.walletId) {
+                return html`<span
+                    >${this.routerService?.routerState?.data?.walletId}</span
+                >`;
+            }
+            return html``;
+        };
+        return html`<div>
+            ${renderWallet()}
             <app-pagination
                 data-target="history-page.pagination"
             ></app-pagination>
-        `;
+        </div>`;
     };
 }
 

src/pages/index.ts

@@ -4,3 +4,4 @@ export * from "./register-page/RegisterPageElement";
 export * from "./login-page/LoginPageElement";
 export * from "./not-found/NotFoundElement";
 export * from "./history-page/HistoryPageElement";
+export * from "./wallet-list/WalletListElement";

src/pages/wallet-list/WalletListElement.ts

@@ -0,0 +1,48 @@
+import { targets, controller, target } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
+import { AuthService, WalletService } from "services/";
+import { AppPaginationElement, InputFieldElement } from "components/";
+import { BasePageElement } from "common/";
+
+@controller
+class WalletListElement extends BasePageElement {
+    @targets inputs: Array<InputFieldElement>;
+    private walletService: WalletService;
+    @target pagination: AppPaginationElement;
+    authService: AuthService;
+    errorMessage: string;
+    constructor() {
+        super();
+    }
+    elementConnected = (): void => {
+        this.walletService = new WalletService(this.appMain?.appService);
+        this.authService = new AuthService(this.appMain.appService);
+        this.update();
+        this.pagination?.setCustomRenderItem(this.renderItem);
+        this.pagination?.setFetchFunc?.(this.getWallets, true)!;
+    };
+
+    getWallets = async (options): Promise<any> => {
+        try {
+            const response = await this.walletService.getAll(options);
+            return response;
+        } catch (err) {
+            throw err;
+        }
+    };
+
+    renderItem = (item): TemplateResult => html`<tr>
+        <td><app-link data-to="/wallet/${item.id}">${item.name}</app-link></td>
+    </tr>`;
+
+    render = (): TemplateResult => {
+        return html`
+            <div>Wallets</div>
+            <app-pagination
+                data-target="wallet-list.pagination"
+            ></app-pagination>
+        `;
+    };
+}
+
+export type { WalletListElement };