wallet edit

src/common/core/BaseElement/BaseElement.ts

@@ -9,6 +9,7 @@ class BaseElement extends HTMLElement {
 	private _appMain: AppMainElement;
 	public loader: Loader;
 	public elementDisconnectCallbacks: Array<Function> = [];
+	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 {

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

src/components/app-menu/AppMenuElement.ts

@@ -42,6 +42,7 @@ class AppMenuElement extends BaseComponentElement {
 	setWallets = (wallets: Array<any>, 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`
-					<menu-item class="${className || ''}" data-path="${path}" data-customaction="${action}">${title}</menu-item>
+					<menu-item class="${className || ''}" data-path="${path}" data-customaction="${action}" data-title="${title}"></menu-item>
 				`;
 			}
-			return html`<menu-item class="${className || ''}" data-path="${path}">${title}</menu-item>`;
+			return html`<menu-item class="${className || ''}" data-path="${path}" data-title="${title}"></menu-item>`;
 		};
 		const menuButton = (title: string, action?: string): TemplateResult => {
 			return html` <div class="menu-item --retract" data-target="menu-item.itemEl">
@@ -128,6 +131,7 @@ class AppMenuElement extends BaseComponentElement {
 		};
 		const renderWallets = (wallets: Array<any>) => {
 			if (isAuth && totalWallets > 0) {
+				console.log(wallets[0].name)
 				return html`<div class="menu-item divider"></div>
 					${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name, '', '--wallet'))}`;
 			}

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();

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`
 			<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
-				<app-link class="${this.className}" data-to="${this.path}" data-custom-action="click:menu-item#itemClick"
+				<app-link class="${this.className}" data-to="${this.path}" data-custom-action="click:menu-item#itemClick" data-title="${this.title}"></app-link
-					>${this.title}</app-link
 				>
 				${this.customaction
 					? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`

src/pages/index.ts

@@ -12,3 +12,4 @@ export * from './subscription-list/SubscriptionListElement';
 export * from './wallet-page/WalletPageElement';
 export * from './subscription-edit/SubscriptionEditElement';
 export * from './transaction-edit/TransactionEditElement';
+export * from './wallet-edit/WalletEditElement';

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<InputFieldElement>;
+	@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<void> => {
+		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`
+			<app-form data-custom="wallet-edit#onSubmit" data-has-cancel="true" 
+			data-target="wallet-edit.appForm">
+				<input-field
+					data-type="text"
+					data-name="name"
+					data-label="Name"
+					data-targets="wallet-edit.inputs"
+					data-rules="required"
+				></input-field>
+				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
+			</app-form>
+		`;
+	};
+}
+
+export type { WalletEditElement };

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<any> => {
 		try {
 			const response = await this.walletService.getAll(options);
@@ -33,8 +42,22 @@ class WalletListElement extends BasePageElement {
 		}
 	};
 
-	renderItem = (item): TemplateResult => html`<tr class="col-1">
+	walletEdit = (id) => {
-		<td><app-link class="wallet-item" data-to="/wallet/${item.id}">${item.name}</app-link></td>
+		const _modal = this.appMain.appModal;
+		if (_modal) {
+			this.appMain.closeModal();
+		} else {
+			this.appMain.createModal('wallet-edit', {
+				id: id
+			});
+		}
+	}
+
+	renderItem = (item): TemplateResult => html`<tr class="col-wallet">
+		<td><app-link class="wallet-item" data-to="/wallet/${item.id}" data-title="${item.name}"></app-link></td>
+		<td>
+			<span><button @click=${() => this.walletEdit(item.id)}}>Edit</button></span>
+		</td>
 	</tr>`;
 
 	render = (): TemplateResult => {

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;