implemented balance headers

src/components/app-dropdown/AppDropdownElement.ts

@@ -116,7 +116,6 @@ class AppDropdownElement extends BaseComponentElement {
         let _return = true;
         const rules = this.rules?.split("|").filter((a) => a);
         const value = (this.inp as HTMLSelectElement)?.value;
-        console.log(_return, rules, value);
         rules
             .slice()
             .reverse()
@@ -146,7 +145,7 @@ class AppDropdownElement extends BaseComponentElement {
     }
 
     render = (): TemplateResult => {
-        return html`<div data-target="app-dropdown.main">
+        return html`<div class="input-main" data-target="app-dropdown.main">
             <select
                 data-target="app-dropdown.inp"
                 data-action="change:app-dropdown#onChange"

src/components/app-form/AppFormElement.ts

@@ -1,6 +1,7 @@
 import { attr, controller, target } from "@github/catalyst";
 import { html, TemplateResult, unsafeHTML } from "@github/jtml";
 import { BaseComponentElement } from "common/";
+import { AppDropdownElement } from "components/app-dropdown/AppDropdownElement";
 import { InputFieldElement } from "components/input-field/InputFieldElement";
 import { findMethod, isTrue, querys } from "core/utils";
 
@@ -9,6 +10,7 @@ class AppFormElement extends BaseComponentElement {
     @target formElement: HTMLElement;
     @target innerSlot: HTMLElement;
     @querys inputField: NodeListOf<InputFieldElement>;
+    @querys appDropdown: NodeListOf<AppDropdownElement>;
     @attr custom: string;
     @attr hasCancel: string;
     slotted: any;
@@ -30,7 +32,7 @@ class AppFormElement extends BaseComponentElement {
         }
         const actionString = this.custom;
         const submitFunc = findMethod(actionString, this.appMain);
-        submitFunc?.(e);
+        submitFunc?.(this.values);
         return false;
     };
 
@@ -60,6 +62,21 @@ class AppFormElement extends BaseComponentElement {
         }
     };
 
+    get values(): any {
+        const formObject: any = {};
+        this.inputField.forEach((input: InputFieldElement) => {
+            const inputType = input.inp;
+            formObject[input.name] = (inputType as HTMLInputElement).value;
+        });
+        this.appDropdown?.forEach((input: AppDropdownElement) => {
+            if (input.required && (input.inp as HTMLSelectElement).value) {
+                const inputType = input.inp;
+                formObject[input.name] = (inputType as HTMLSelectElement).value;
+            }
+        });
+        return formObject;
+    }
+
     get valid() {
         let _valid = 0;
         this.inputField?.forEach((input) => {

src/components/app-main/AppMainElement.ts

@@ -64,7 +64,7 @@ class AppMainElement extends HTMLElement {
                     },
                     {
                         path: "/:walletId",
-                        component: "history-page",
+                        component: "wallet-page",
                         layout: "menu-layout",
                     },
                 ],
@@ -72,27 +72,27 @@ class AppMainElement extends HTMLElement {
             {
                 path: "/register",
                 component: "register-page",
-                layout: "menu-layout",
+                layout: "initial-layout",
             },
             {
                 path: "/login",
                 component: "login-page",
-                layout: "menu-layout",
+                layout: "initial-layout",
             },
             {
                 path: "/unauthorized",
                 component: "login-page",
-                layout: "menu-layout",
+                layout: "initial-layout",
             },
             {
                 path: "/token-expired",
                 component: "login-page",
-                layout: "menu-layout",
+                layout: "initial-layout",
             },
             {
                 path: "/not-found",
                 component: "not-found",
-                layout: "menu-layout",
+                layout: "initial-layout",
             },
             {
                 path: "/logout",

src/components/index.ts

@@ -10,6 +10,7 @@ export * from "./app-dropdown/AppDropdownElement";
 export * from "./app-loader/AppLoaderElement";
 export * from "./circle-loader/CircleLoaderElement";
 export * from "./app-form/AppFormElement";
+export * from "./wallet-header/WalletHeaderElement";
 
 // LAST
 export * from "./app-main/AppMainElement";

src/components/input-field/InputFieldElement.ts

@@ -111,7 +111,7 @@ class InputFieldElement extends BaseComponentElement {
             />`;
         };
 
-        return html`<div data-target="input-field.main">
+        return html`<div class="input-main" data-target="input-field.main">
             ${renderMessage(this.label)} ${renderInput(this.type)}
             ${renderError(this.displayError, this.error)}
         </div>`;

src/components/wallet-header/WalletHeaderElement.ts

@@ -0,0 +1,70 @@
+import { attr, controller, target } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
+import { BaseComponentElement } from "common/";
+import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
+import { findMethod } from "core/utils";
+
+@controller
+class WalletHeaderElement extends BaseComponentElement {
+    @attr currentBalance: number;
+    @attr lastMonth: number;
+    @attr nextMonth: number;
+    @attr currency: string;
+    @attr custom: string;
+
+    fetchFunc: Function = () => {};
+    constructor() {
+        super();
+    }
+
+    elementConnected = (): void => {
+        this.executeFetch();
+        this.update();
+    };
+
+    attributeChangedCallback(): void {
+        this.update();
+    }
+
+    executeFetch = async (options?): Promise<void> => {
+        const actionString = this.custom;
+        const submitFunc = findMethod(actionString, this.appMain);
+
+        try {
+            this.loader?.start?.();
+            await submitFunc(options);
+            this.loader?.stop?.();
+        } catch (err) {
+            this.loader?.stop?.();
+            console.error(err);
+        }
+    };
+
+    render = (): TemplateResult => {
+        const { currentBalance, currency, lastMonth, nextMonth } = this;
+
+        const renderItem = (header, balance, currency) => html`<div>
+            <div>${header}</div>
+            <div><span>${balance}</span><span>${currency}</span></div>
+        </div>`;
+
+        const renderHeader = () => {
+            if (this.loader && this.loader.loading) {
+                return html`<circle-loader></circle-loader>`;
+            }
+            return html`${renderItem(
+                "Last Month",
+                lastMonth,
+                currency
+            )}${renderItem(
+                "Current Balance",
+                currentBalance,
+                currency
+            )}${renderItem("Next Month", nextMonth, currency)}`;
+        };
+
+        return html`<div>${renderHeader()}</div>`;
+    };
+}
+
+export type { WalletHeaderElement };