implemented balance headers

src/pages/home-page/HomePageElement.ts

@@ -1,12 +1,13 @@
-import { controller } from "@github/catalyst";
+import { controller, target } from "@github/catalyst";
 import { html, TemplateResult, until } from "@github/jtml";
-import { PingService } from "services/";
-import { AppMainElement } from "components/";
+import { WalletService } from "services/";
+import { AppMainElement, WalletHeaderElement } from "components/";
 import { BasePageElement } from "common/";
 
 @controller
 class HomePageElement extends BasePageElement {
-    private pingService: PingService;
+    @target walletHeader: WalletHeaderElement;
+    private walletService: WalletService;
     constructor() {
         super({
             title: "Home",
@@ -14,25 +15,31 @@ class HomePageElement extends BasePageElement {
     }
 
     elementConnected = (): void => {
-        this.pingService = new PingService(this.appMain?.appService);
+        this.walletService = new WalletService(this.appMain?.appService);
         this.update();
         this.appMain.addEventListener("tokenchange", this.update);
+        this.getBalance();
     };
 
     elementDisconnected = (appMain: AppMainElement): void => {
         appMain?.removeEventListener("tokenchange", this.update);
     };
 
-    getPong = async (): Promise<void> => {
+    getBalance = async (): Promise<void> => {
         try {
-            const response = await this.pingService.getAll();
+            const response = await this.walletService.getBalance();
+            this.setBalance(response);
         } catch (err) {
             throw err;
         }
     };
 
-    pongEl = (): TemplateResult => {
-        return html`<div>${until(this.getPong())}</div>`;
+    setBalance = (header) => {
+        if (!this.walletHeader) return;
+        this.walletHeader.currency = header.currency;
+        this.walletHeader.currentBalance = header.currentBalance || "0";
+        this.walletHeader.lastMonth = header.lastMonth || "0";
+        this.walletHeader.nextMonth = header.nextMonth || "0";
     };
 
     openModal = (): void => {
@@ -47,6 +54,14 @@ class HomePageElement extends BasePageElement {
     render = (): TemplateResult => {
         return html`
             <button data-action="click:home-page#openModal">New Wallet</button>
+            <wallet-header
+                data-target="home-page.walletHeader"
+                data-current-balance="0"
+                data-last-month="0"
+                data-next-month="0"
+                data-currency="0"
+                data-custom="home-page#getBalance"
+            ></wallet-header>
         `;
     };
 }

src/pages/index.ts

@@ -7,3 +7,4 @@ export * from "./history-page/HistoryPageElement";
 export * from "./wallet-list/WalletListElement";
 export * from "./wallet-create/WalletCreateElement";
 export * from "./transaction-create/TransactionCreateElement";
+export * from "./wallet-page/WalletPageElement";

src/pages/transaction-create/TransactionCreateElement.ts

@@ -51,15 +51,22 @@ class TransactionCreateElement extends BasePageElement {
         } catch (err) {}
     };
 
-    onSubmit = async (): Promise<void> => {
+    onSubmit = async (values): Promise<void> => {
         try {
             if (!this.validate()) {
                 return;
             }
-            const { name: description, wallet: walletId } = this.values;
+
+            const {
+                description: description,
+                wallet: walletId,
+                amount,
+            } = values;
+
             const response = await this.transactionService.post({
                 description,
                 walletId,
+                amount,
             });
 
             if (response?.id) {
@@ -90,10 +97,17 @@ class TransactionCreateElement extends BasePageElement {
                 data-custom="transaction-create#onSubmit"
                 data-has-cancel="true"
             >
+                <input-field
+                    data-type="number"
+                    data-name="amount"
+                    data-label="Amount"
+                    data-targets="transaction-create.inputs"
+                    data-rules="required"
+                ></input-field>
                 <input-field
                     data-type="text"
-                    data-name="name"
-                    data-label="Name"
+                    data-name="description"
+                    data-label="Description"
                     data-targets="transaction-create.inputs"
                     data-rules="required"
                 ></input-field>

src/pages/wallet-page/WalletPageElement.ts

@@ -0,0 +1,105 @@
+import { controller, target } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
+import { TransactionsService, WalletService } from "services/";
+import {
+    AppMainElement,
+    AppPaginationElement,
+    WalletHeaderElement,
+} from "components/";
+import { BasePageElement } from "common/";
+
+@controller
+class WalletPageElement extends BasePageElement {
+    private transactionsService: TransactionsService;
+    private walletService: WalletService;
+    @target pagination: AppPaginationElement;
+    @target walletHeader: WalletHeaderElement;
+    walletId: string;
+    constructor() {
+        super({
+            title: "Wallet",
+        });
+    }
+
+    elementConnected = (): void => {
+        this.walletService = new WalletService(this.appMain?.appService);
+        this.transactionsService = new TransactionsService(
+            this.appMain?.appService
+        );
+        if (this?.routerService?.routerState?.data) {
+            const { walletId } = this?.routerService?.routerState?.data;
+            if (walletId) {
+                this.walletId = walletId;
+            }
+        }
+        this.update();
+        this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
+        this.appMain.addEventListener("tokenchange", this.update);
+    };
+
+    elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("tokenchange", this.update);
+    };
+
+    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) {
+            throw err;
+        }
+    };
+
+    getBalance = async (): Promise<void> => {
+        try {
+            const response = await this.walletService.getBalance({
+                walletId: this.walletId,
+            });
+            this.setBalance(response);
+        } catch (err) {
+            throw err;
+        }
+    };
+
+    setBalance = (header) => {
+        if (!this.walletHeader) return;
+        this.walletHeader.currency = header.currency;
+        this.walletHeader.currentBalance = header.currentBalance || "0";
+        this.walletHeader.lastMonth = header.lastMonth || "0";
+        this.walletHeader.nextMonth = header.nextMonth || "0";
+    };
+
+    render = (): TemplateResult => {
+        const renderHeader = () => html`<wallet-header
+            data-target="wallet-page.walletHeader"
+            data-current-balance="0"
+            data-last-month="0"
+            data-next-month="0"
+            data-currency="0"
+            data-custom="wallet-page#getBalance"
+        ></wallet-header>`;
+
+        const renderWallet = () => {
+            if (this.routerService?.routerState?.data?.walletId) {
+                return html`<span
+                    >${this.routerService?.routerState?.data?.walletId}</span
+                >`;
+            }
+            return html``;
+        };
+        return html`<div>
+            ${renderHeader()} ${renderWallet()}
+            <app-pagination
+                data-target="wallet-page.pagination"
+            ></app-pagination>
+        </div>`;
+    };
+}
+
+export type { WalletPageElement };