diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index 163694b..81d2249 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/src/common/core/BaseElement/BaseElement.ts @@ -9,6 +9,7 @@ class BaseElement extends HTMLElement { private _appMain: AppMainElement; public loader: Loader; public elementDisconnectCallbacks: Array = []; + public initialized: boolean = false; constructor() { super(); this.connectedCallback = this.connectedCallback.bind(this); @@ -86,6 +87,7 @@ class BaseElement extends HTMLElement { this.bindEvents('data-action'); this.bindEvents('app-action'); this.updateCallback(); + this.initialized = true; }; connectedCallback(): void { diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index ef529df..d994a71 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/src/components/app-link/AppLinkElement.ts @@ -14,6 +14,7 @@ class AppLinkElement extends BaseComponentElement { @target main: Element; constructor() { super(); + this.attributeChangedCallback = this.attributeChangedCallback.bind(this); } elementConnected = (): void => { @@ -34,6 +35,12 @@ class AppLinkElement extends BaseComponentElement { } }; + attributeChangedCallback(changed) { + if(this.initialized && changed == 'data-title') { + this.update(); + } + } + goTo = (e: Event): void => { e.preventDefault(); if (!isTrue(this.goBack) && this.to) { @@ -46,7 +53,8 @@ class AppLinkElement extends BaseComponentElement { get disabled(): boolean { if (isTrue(this.goBack)) { - return this.routerService.emptyState; + console.log(this.routerService) + return this.routerService?.emptyState; } return false; } diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index f9f05fb..a884e03 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -42,6 +42,7 @@ class AppMenuElement extends BaseComponentElement { setWallets = (wallets: Array, totalWallets: number): void => { this.walletData = wallets; this.totalWallets = totalWallets; + console.log(wallets) this.update(); }; @@ -99,13 +100,15 @@ class AppMenuElement extends BaseComponentElement { render = (): TemplateResult => { const { isAuth, totalWallets, walletData } = this; + console.log(walletData) + const regularMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => { if (action) { return html` - ${title} + `; } - return html`${title}`; + return html``; }; const menuButton = (title: string, action?: string): TemplateResult => { return html`
@@ -128,6 +131,7 @@ class AppMenuElement extends BaseComponentElement { }; const renderWallets = (wallets: Array) => { if (isAuth && totalWallets > 0) { + console.log(wallets[0].name) return html`
${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name, '', '--wallet'))}`; } diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index fb0fcc7..7577455 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -44,6 +44,14 @@ class AppPaginationElement extends BaseComponentElement { } }; + defaultFetch = () => { + const options = { + rpp: this.rpp || 10, + page: 1 + } + this.executeFetch(options); + } + setCustomRenderItems = (customRenderItems: () => TemplateResult) => { this.customRenderItems = customRenderItems; this.update(); diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index 1b1718a..c1b11e8 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/src/components/menu-item/MenuItemElement.ts @@ -14,6 +14,7 @@ class MenuItemElement extends BaseComponentElement { @target customButton: HTMLDivElement; constructor() { super(); + this.attributeChangedCallback = this.attributeChangedCallback.bind(this); } public elementConnected = (): void => { @@ -30,8 +31,14 @@ class MenuItemElement extends BaseComponentElement { appMain?.removeEventListener('routechanged', this.update); }; + attributeChangedCallback(changed) { + if(this.initialized && changed == 'data-title') { + this.update(); + } + } + get current(): boolean { - return this.routerService.comparePath(this.path); + return this.routerService?.comparePath(this.path); } itemClick = (e) => { @@ -41,10 +48,10 @@ class MenuItemElement extends BaseComponentElement { }; render = (): TemplateResult => { + console.log(this.title) return html`
- ${this.title} ${this.customaction ? html`
+
` diff --git a/src/pages/index.ts b/src/pages/index.ts index fd97128..6d646df 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -11,4 +11,5 @@ export * from './subscription-create/SubscriptionCreateElement'; export * from './subscription-list/SubscriptionListElement'; export * from './wallet-page/WalletPageElement'; export * from './subscription-edit/SubscriptionEditElement'; -export * from './transaction-edit/TransactionEditElement'; \ No newline at end of file +export * from './transaction-edit/TransactionEditElement'; +export * from './wallet-edit/WalletEditElement'; \ No newline at end of file diff --git a/src/pages/wallet-edit/WalletEditElement.ts b/src/pages/wallet-edit/WalletEditElement.ts new file mode 100644 index 0000000..d94946f --- /dev/null +++ b/src/pages/wallet-edit/WalletEditElement.ts @@ -0,0 +1,98 @@ +import { targets, controller, target } from '@github/catalyst'; +import { html, TemplateResult } from 'core/utils'; +import { AuthService, WalletService } from 'services/'; +import { AppDropdownElement, AppFormElement, InputFieldElement } from 'components/'; +import { BasePageElement } from 'common/'; + +@controller +class WalletEditElement extends BasePageElement { + @targets inputs: Array; + @target appForm: AppFormElement; + private walletService: WalletService; + authService: AuthService; + errorMessage: string; + walletData: any; + constructor() { + super({ + title: 'Edit Wallet', + }); + } + elementConnected = (): void => { + this.walletService = new WalletService(this.appMain?.appService); + this.authService = new AuthService(this.appMain.appService); + this.walletData = this.getData(); + this.update(); + this.getWallet(this.walletData?.id) + }; + + getWallet = async (id) => { + try { + const response = await this.walletService.get(id, null); + this.appForm.set(response); + } catch (err) { + + } + } + + get nameInput(): InputFieldElement { + for (const i in this.inputs) { + if (this.inputs[i]?.name == 'name') { + return this.inputs[i]; + } + } + } + + get values(): Object { + const formObject: any = {}; + this.inputs.forEach((input: InputFieldElement) => { + const inputType = input.inp; + formObject[input.name] = (inputType as HTMLInputElement).value; + }); + return formObject; + } + + onSubmit = async (): Promise => { + try { + if (!this.validate()) { + return; + } + const response = await this.walletService.put(this.walletData?.id, this.values); + + if (response?.id) { + this.appMain.triggerWalletUpdate(); + this.appMain.pushToast('success', 'Wallet edited successfully!'); + this.appMain.closeModal(); + } + } catch (err) { + this.errorMessage = 'Unable to edit wallet!'; + 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` + + + ${this.errorMessage ? html`
${this.errorMessage}
` : html``} + + `; + }; +} + +export type { WalletEditElement }; diff --git a/src/pages/wallet-list/WalletListElement.ts b/src/pages/wallet-list/WalletListElement.ts index 6c8841d..25eba41 100644 --- a/src/pages/wallet-list/WalletListElement.ts +++ b/src/pages/wallet-list/WalletListElement.ts @@ -1,7 +1,7 @@ import { targets, controller, target } from '@github/catalyst'; import { html, TemplateResult } from 'core/utils'; import { AuthService, WalletService } from 'services/'; -import { AppPaginationElement, InputFieldElement } from 'components/'; +import { AppMainElement, AppPaginationElement, InputFieldElement } from 'components/'; import { BasePageElement } from 'common/'; @controller @@ -22,8 +22,17 @@ class WalletListElement extends BasePageElement { this.update(); this.pagination?.setCustomRenderItem(this.renderItem); this.pagination?.setFetchFunc?.(this.getWallets, true)!; + this.appMain.addEventListener('walletupdate', this.updateToken); }; + elementDisconnected = (appMain: AppMainElement) => { + appMain?.removeEventListener('walletupdate', this.updateToken); + } + + get updateToken() { + return this.pagination?.defaultFetch; + } + getWallets = async (options): Promise => { try { const response = await this.walletService.getAll(options); @@ -33,8 +42,22 @@ class WalletListElement extends BasePageElement { } }; - renderItem = (item): TemplateResult => html` - ${item.name} + walletEdit = (id) => { + const _modal = this.appMain.appModal; + if (_modal) { + this.appMain.closeModal(); + } else { + this.appMain.createModal('wallet-edit', { + id: id + }); + } + } + + renderItem = (item): TemplateResult => html` + + + + `; render = (): TemplateResult => { diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss index bcfc9cd..7700eca 100644 --- a/src/styles/app-pagination/app-pagination.scss +++ b/src/styles/app-pagination/app-pagination.scss @@ -49,6 +49,9 @@ app-pagination { &.col-transactions { grid-template-columns: 1fr 10fr 1fr 1fr; } + &.col-wallet { + grid-template-columns: 9fr 1fr; + } td, th { margin: 0 12px;