implemented wallet list page

src/components/app-pagination/AppPaginationElement.ts

@@ -9,6 +9,9 @@ class AppPaginationElement extends BaseComponentElement {
     @attr rpp: number;
     @attr totalItems: number;
     @attr autoInit: string;
+
+    private customRenderItems: () => TemplateResult;
+    private customRenderItem: (item: any) => TemplateResult;
     fetchFunc: Function = () => {};
     constructor() {
         super();
@@ -36,6 +39,16 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
+    setCustomRenderItems = (customRenderItems: () => TemplateResult) => {
+        this.customRenderItems = customRenderItems;
+        this.update();
+    };
+
+    setCustomRenderItem = (customRenderItem: (item: any) => TemplateResult) => {
+        this.customRenderItem = customRenderItem;
+        this.update();
+    };
+
     executeFetch = async (options?): Promise<void> => {
         if (!options) {
             options = {
@@ -75,12 +88,16 @@ class AppPaginationElement extends BaseComponentElement {
     render = (): TemplateResult => {
         const { rpp, totalItems, page, items } = this;
 
-        const renderItem = (item) => html`<tr>
+        const renderItem = this.customRenderItem
+            ? this.customRenderItem
+            : (item) => html`<tr>
                   <td>${item.description}</td>
                   <td>${item.amount}</td>
               </tr>`;
 
-        const renderItems = () => {
+        const renderItems = this.customRenderItems
+            ? this.customRenderItems
+            : () => {
                   if (items?.length > 0) {
                       return html`<span>
                           ${items?.map((item) => renderItem(item))}

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 };