implemented dropdowns

src/pages/index.ts

@@ -6,3 +6,4 @@ export * from "./not-found/NotFoundElement";
 export * from "./history-page/HistoryPageElement";
 export * from "./wallet-list/WalletListElement";
 export * from "./wallet-create/WalletCreateElement";
+export * from "./transaction-create/TransactionCreateElement";

src/pages/transaction-create/TransactionCreateElement.ts

@@ -0,0 +1,116 @@
+import { targets, controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
+import { AuthService, TransactionsService, WalletService } from "services/";
+import { InputFieldElement } from "components/";
+import { RouterService } from "core/services";
+import { BasePageElement } from "common/";
+import { AppDropdownElement } from "components/app-dropdown/AppDropdownElement";
+
+@controller
+class TransactionCreateElement extends BasePageElement {
+    @targets inputs: Array<InputFieldElement | AppDropdownElement>;
+    private transactionService: TransactionsService;
+    private walletService: WalletService;
+    authService: AuthService;
+    errorMessage: string;
+    constructor() {
+        super({
+            title: "New Transaction",
+        });
+    }
+    elementConnected = (): void => {
+        this.walletService = new WalletService(this.appMain?.appService);
+        this.transactionService = new TransactionsService(
+            this.appMain?.appService
+        );
+        this.authService = new AuthService(this.appMain.appService);
+        this.update();
+    };
+
+    get nameInput(): InputFieldElement | AppDropdownElement {
+        for (const i in this.inputs) {
+            if (this.inputs[i]?.name == "name") {
+                return this.inputs[i];
+            }
+        }
+    }
+
+    get values(): any {
+        const formObject: any = {};
+        this.inputs.forEach((input: InputFieldElement) => {
+            const inputType = input.inp;
+            formObject[input.name] = (inputType as HTMLInputElement).value;
+        });
+        return formObject;
+    }
+
+    getWallets = async (options): Promise<void> => {
+        try {
+            const response = await this.walletService.getAll(options);
+            return response;
+        } catch (err) {}
+    };
+
+    onSubmit = async (): Promise<void> => {
+        try {
+            if (!this.validate()) {
+                return;
+            }
+            const { name: description, wallet: walletId } = this.values;
+            const response = await this.transactionService.post({
+                description,
+                walletId,
+            });
+
+            if (response?.id) {
+                this.appMain.triggerWalletUpdate();
+                this.routerService.goTo("/history", {
+                    walletId: response.id,
+                });
+            }
+        } catch (err) {
+            this.errorMessage = "Unable to create transaction!";
+            this.update();
+        }
+    };
+
+    validate(): boolean {
+        let _return = true;
+        this.inputs.forEach((input: InputFieldElement) => {
+            const valid: boolean = input.validate();
+            if (!valid) _return = false;
+        });
+        return _return;
+    }
+
+    render = (): TemplateResult => {
+        return html`
+            <div>Create wallet</div>
+            <app-form
+                data-custom="transaction-create#onSubmit"
+                data-has-cancel="true"
+            >
+                <input-field
+                    data-type="text"
+                    data-name="name"
+                    data-label="Name"
+                    data-targets="transaction-create.inputs"
+                    data-rules="required"
+                ></input-field>
+                <app-dropdown
+                    data-name="wallet"
+                    data-label="Wallet"
+                    data-targets="transaction-create.inputs"
+                    data-rules="required"
+                    data-fetch="transaction-create#getWallets"
+                >
+                </app-dropdown>
+                ${this.errorMessage
+                    ? html`<div>${this.errorMessage}</div>`
+                    : html``}
+            </app-form>
+        `;
+    };
+}
+
+export type { TransactionCreateElement };