diff --git a/package.json b/package.json index f8212b7..22e29b7 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "uglify-js": "^3.13.9", "uglifyjs-webpack-plugin": "^2.2.0", "webpack": "^5.38.1", - "webpack-cli": "^4.7.0", + "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" } } 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/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts index c0859e1..c13dedd 100644 --- a/src/common/pages/BasePageElement/BasePageElement.ts +++ b/src/common/pages/BasePageElement/BasePageElement.ts @@ -4,19 +4,23 @@ import { BaseElement } from 'common/'; import { isTrue } from 'core/utils'; class BasePageElement extends BaseElement { - public pageTitle: string = ''; + public _pageTitle: string = ''; @attr hidetitle: string; @attr customtitle: string; private _data: any; constructor(options: OptionType) { super(); if (options?.title) { - this.pageTitle = options?.title; + this._pageTitle = options?.title; } this.connectedCallback = this.connectedCallback.bind(this); this.disconnectedCallback = this.disconnectedCallback.bind(this); } + get pageTitle() { + return this._pageTitle; + } + public renderTitle = () => { if (!isTrue(this.hidetitle)) { return html`
${this.customtitle ? this.customtitle : this.pageTitle}
`; diff --git a/src/components/app-dropdown/AppDropdownElement.ts b/src/components/app-dropdown/AppDropdownElement.ts index 8b62bc9..fe79955 100644 --- a/src/components/app-dropdown/AppDropdownElement.ts +++ b/src/components/app-dropdown/AppDropdownElement.ts @@ -33,6 +33,7 @@ class AppDropdownElement extends BaseComponentElement { page: number = 1; rpp: number = 30; validator: Validator; + itemValue: any = null; constructor() { super(); @@ -119,7 +120,10 @@ class AppDropdownElement extends BaseComponentElement { }; get selectedItem() { - const { value, valuekey, items } = this; + const { value, valuekey, items, itemValue } = this; + if (itemValue) { + return itemValue; + } const item = items?.find((item) => { return value == item[valuekey]; }); @@ -173,6 +177,7 @@ class AppDropdownElement extends BaseComponentElement { itemSelected = (e) => { const value = (e.target as HTMLSpanElement).getAttribute('data-value'); + this.itemValue = null; this.setValue(value); this.setOpen(false); this.appForm?.inputChange(e); @@ -183,6 +188,11 @@ class AppDropdownElement extends BaseComponentElement { this.update(); }; + setItemValue = (itemValue) => { + this.itemValue = itemValue; + this.update(); + } + render = () => { const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this; diff --git a/src/components/app-form/AppFormElement.ts b/src/components/app-form/AppFormElement.ts index ed946f3..af7d956 100644 --- a/src/components/app-form/AppFormElement.ts +++ b/src/components/app-form/AppFormElement.ts @@ -77,13 +77,27 @@ class AppFormElement extends BaseComponentElement { formObject[input.name] = input._value; }); this.appDropdown?.forEach((input: AppDropdownElement) => { - if (input.required && input.value) { - formObject[input.name] = input._value; - } + formObject[input.name] = input._value; }); return formObject; } + set = (data): any => { + for (let i = 0; i < this.inputField.length; i++) { + const input = this.inputField[i]; + if(data?.[input.name]) { + input._value = data[input.name] + this.update() + } + } + this.appDropdown?.forEach((input: AppDropdownElement) => { + if(data?.[input.name]) { + input.setValue(data[input.name]) + this.update() + } + }); + } + getInput = (name: string): InputFieldElement | AppDropdownElement => { let formObject; this.inputField.forEach((input: InputFieldElement) => { diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index ef529df..391ea54 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,7 @@ class AppLinkElement extends BaseComponentElement { get disabled(): boolean { if (isTrue(this.goBack)) { - return this.routerService.emptyState; + return this.routerService?.emptyState; } return false; } diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index f9f05fb..88ba2b4 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -102,10 +102,10 @@ class AppMenuElement extends BaseComponentElement { 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`
diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index fd91bdf..dad85be 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(); @@ -95,6 +103,17 @@ class AppPaginationElement extends BaseComponentElement { } }; + transactionEdit = (id) => { + const _modal = this.appMain.appModal; + if (_modal) { + this.appMain.closeModal(); + } else { + this.appMain.createModal('transaction-edit', { + id: id + }); + } + } + render = (): TemplateResult => { const { rpp, totalItems, page, items } = this; @@ -117,6 +136,9 @@ class AppPaginationElement extends BaseComponentElement { (${item.currency ? item.currency : 'USD'}) + + + `; const renderItems = this.customRenderItems diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index 3da6361..d970dd6 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/src/components/input-field/InputFieldElement.ts @@ -18,6 +18,7 @@ class InputFieldElement extends BaseComponentElement { @target main: HTMLElement; @target inp: HTMLElement; @closest appForm: AppFormElement; + @attr disabled: string; valid: boolean; displayError: boolean; randId: string; @@ -36,12 +37,16 @@ class InputFieldElement extends BaseComponentElement { //this.validate(); }; + attributeChangedCallback() { + this.update(); + } + setError = (error) => { this.validator.error = error; }; get error(): string { - return this.validator.error; + return this.validator?.error; } get isValid(): boolean { @@ -53,8 +58,23 @@ class InputFieldElement extends BaseComponentElement { } get _value() { + if (this.type == 'checkbox') { + return (this.inp as HTMLInputElement)?.checked; + } return (this.inp as HTMLInputElement)?.value; } + + get _disabled() { + return this.disabled == "true" + } + + set _value(value) { + if (this.type == 'checkbox') { + (this.inp as HTMLInputElement).checked = (value as boolean); + } else { + (this.inp as HTMLInputElement).value = (value as string); + } + } validate = (): boolean => { const valid = this.validator.validate(); @@ -88,7 +108,6 @@ class InputFieldElement extends BaseComponentElement { }; render = (): TemplateResult => { - console.log('e'); const renderMessage = (label: string) => { if (this.label) { return html``; @@ -113,6 +132,7 @@ class InputFieldElement extends BaseComponentElement { step="0.01" data-target="input-field.inp" id="${this.randId}" + ?disabled=${this._disabled} app-action=" input:input-field#inputChange blur:input-field#validateDisplay ${this.customAction ? this.customAction : ''} " />`; @@ -122,6 +142,7 @@ class InputFieldElement extends BaseComponentElement { autocomplete="${this.name}" type="${this.type}" data-target="input-field.inp" + ?disabled=${this._disabled} id="${this.randId}" app-action=" input:input-field#inputChange diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index 1b1718a..177f8cc 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) => { @@ -43,8 +50,7 @@ class MenuItemElement extends BaseComponentElement { render = (): TemplateResult => { return html`
- ${this.title} ${this.customaction ? html`
+
` diff --git a/src/core/services/app-service/AppService.ts b/src/core/services/app-service/AppService.ts index a4c3d37..674a052 100644 --- a/src/core/services/app-service/AppService.ts +++ b/src/core/services/app-service/AppService.ts @@ -50,7 +50,7 @@ class AppService { } }; - delete = async (url: string, data: Object, headersParam: HeadersInit): Promise => { + delete = async (url: string, data?: Object, headersParam?: HeadersInit): Promise => { headersParam = { ...headersParam, Authorization: `BEARER ${this.appMain?.authStore?.token}`, diff --git a/src/core/services/base-service/BaseService.ts b/src/core/services/base-service/BaseService.ts index b412bc4..ade5b48 100644 --- a/src/core/services/base-service/BaseService.ts +++ b/src/core/services/base-service/BaseService.ts @@ -7,20 +7,20 @@ class BaseService { return this.appService.get(this.endpoint, params, headers); }; - get = (params?: Object, headers?: HeadersInit) => { - return this.appService.get(this.endpoint, params, headers); + get = (id: string, params?: Object, headers?: HeadersInit) => { + return this.appService.get(this.endpoint + `/${id}`, params, headers); }; - put = (data?: Object, headers?: HeadersInit) => { - return this.appService.put(this.endpoint, data, headers); + put = (id: string, data?: any, headers?: HeadersInit) => { + return this.appService.put(this.endpoint + `/${id || data?.id || ''}`, data, headers); }; post = (data?: Object, headers?: HeadersInit) => { return this.appService.post(this.endpoint, data, headers); }; - delete = (data?: Object, headers?: HeadersInit) => { - return this.appService.delete(this.endpoint, data, headers); + delete = (id:string, data?: any, headers?: HeadersInit) => { + return this.appService.delete(this.endpoint + `/${id || data?.id || ''}`, data, headers); }; } diff --git a/src/pages/index.ts b/src/pages/index.ts index 314fc18..6d646df 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -10,3 +10,6 @@ export * from './transaction-create/TransactionCreateElement'; 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'; +export * from './wallet-edit/WalletEditElement'; \ No newline at end of file diff --git a/src/pages/subscription-create/SubscriptionCreateElement.ts b/src/pages/subscription-create/SubscriptionCreateElement.ts index dc6c9ee..3aa4381 100644 --- a/src/pages/subscription-create/SubscriptionCreateElement.ts +++ b/src/pages/subscription-create/SubscriptionCreateElement.ts @@ -142,18 +142,19 @@ class SubscriptionCreateElement extends BasePageElement { if (response?.id) { this.appMain.triggerTransactionUpdate(); - this.appMain.pushToast('success', 'Transaction created successfully!'); + this.appMain.pushToast('success', 'Subscription created successfully!'); if (walletData.walletId) { this.appMain?.closeModal(); } else { - this.routerService.goTo('/history', { + this.appMain?.closeModal(); + this.routerService.goTo('/subscriptions', { walletId: response.walletId, }); } } } catch (err) { - this.errorMessage = 'Unable to create transaction!'; + this.errorMessage = 'Unable to create subscription!'; this.update(); } }; diff --git a/src/pages/subscription-edit/SubscriptionEditElement.ts b/src/pages/subscription-edit/SubscriptionEditElement.ts new file mode 100644 index 0000000..bc9aeb9 --- /dev/null +++ b/src/pages/subscription-edit/SubscriptionEditElement.ts @@ -0,0 +1,260 @@ +import { targets, controller, target } from '@github/catalyst'; +import { html, TemplateResult } from 'core/utils'; +import { + AuthService, + SubscriptionService, + SubscriptionTypeService, + TransactionTypeService, + WalletService, +} from 'services/'; +import { AppFormElement, InputFieldElement } from 'components/'; +import { BasePageElement } from 'common/'; +import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement'; +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; +dayjs.extend(utc); + +@controller +class SubscriptionEditElement extends BasePageElement { + @targets inputs: Array; + @target appForm: AppFormElement; + private subscriptionService: SubscriptionService; + private transactionTypeService: TransactionTypeService; + private subscriptionTypeService: SubscriptionTypeService; + private walletService: WalletService; + walletData: any = null; + authService: AuthService; + errorMessage: string; + private initial: boolean = false; + constructor() { + super({ + title: 'Edit Subscription', + }); + } + elementConnected = (): void => { + this.walletService = new WalletService(this.appMain?.appService); + this.subscriptionService = new SubscriptionService(this.appMain?.appService); + this.transactionTypeService = new TransactionTypeService(this.appMain?.appService); + this.subscriptionTypeService = new SubscriptionTypeService(this.appMain?.appService); + this.authService = new AuthService(this.appMain.appService); + this.walletData = this.getData(); + this.update(); + this.getSubscription(this.walletData?.id); + if (this.walletData && this.walletData.walletId) { + this.setTransactionType(); + } else { + this.initial = true; + } + }; + + get hasEndCheck(): InputFieldElement | AppDropdownElement { + for (const i in this.inputs) { + if (this.inputs[i]?.name == 'hasEnd') { + return this.inputs[i]; + } + } + } + + 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; + } + + setTransactionType = async () => { + this.appForm.isValid = false; + try { + const response = await this.transactionTypeService.getAll(); + this.walletData.transactionTypeId = response?.find((type) => type.type == this.walletData.transactionType)?.id; + } catch (err) { + } finally { + this.appForm.isValid = true; + } + }; + + getSubscription = async (id) => { + try { + const response = await this.subscriptionService.get(id, { + embed: 'Wallet' + }); + const wallet = this.appForm.getInput('wallet'); + if (wallet) { + (wallet as AppDropdownElement).setItemValue(response.wallet); + } + response.wallet = response.walletId; + response.endDate = dayjs(response.endDate).format('YYYY-MM-DD'); + this.appForm.set(response); + } catch (err) { + + } + } + + getWallets = async (options): Promise => { + try { + const response = await this.walletService.getAll(options); + return response; + } catch (err) {} + }; + + getTypes = async (options): Promise => { + try { + const response = await this.transactionTypeService.getAll(options); + return response; + } catch (err) {} + }; + + getSubs = async (options): Promise => { + try { + const response = await this.subscriptionTypeService.getAll(options); + return response; + } catch (err) {} + }; + + onSubmit = async (values): Promise => { + try { + if (!this.validate()) { + return; + } + + const { + description: description, + wallet: walletId, + amount, + endDate, + } = values; + + const endDateFormat = dayjs(endDate).utc(true).format(); + + const walletData = this.walletData; + + const formData = { + description, + amount, + hasEnd: (this.hasEndCheck?.inp as HTMLInputElement)?.checked, + endDate: endDateFormat, + walletId: walletData && walletData.walletId ? walletData.walletId : walletId, + }; + const response = await this.subscriptionService.put(this.walletData.id, formData); + + if (response?.id) { + this.appMain.triggerTransactionUpdate(); + this.appMain.pushToast('success', 'Subscription edited successfully!'); + + if (walletData.id) { + this.appMain?.closeModal(); + } else { + this.appMain?.closeModal(); + this.routerService.goTo('/subscriptions', { + walletId: response.walletId, + }); + } + } + } catch (err) { + this.errorMessage = 'Unable to edit subscription!'; + this.update(); + } + }; + + validate(): boolean { + let _return = true; + this.inputs.forEach((input: InputFieldElement) => { + const valid: boolean = input.validate(); + if (!valid) _return = false; + }); + return _return; + } + + onCheck = () => { + this.appForm.update(); + this.appForm.validate(); + this.appForm.update(); + }; + + renderForms = () => { + const renderInput = (type, name, label, rules, hide?, customAction?) => { + return html``; + }; + + const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => { + if (hide) { + return html``; + } + return html``; + }; + + const renderDropdown = (fetch, name, label, rules, hide?) => { + if (hide) { + return html``; + } + return html``; + }; + return html` +
+ ${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)} + ${renderInput('text', 'description', 'Description', 'required')} + ${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-edit#onCheck')} + ${renderInput( + 'date', + 'endDate', + 'End date', + 'required', + !(this.hasEndCheck?.inp as HTMLInputElement)?.checked + )} + ${renderDropdown( + 'subscription-edit#getWallets', + 'wallet', + 'Wallet', + 'required', + this.walletData && this.walletData.walletId + )} + ${this.errorMessage ? html`
${this.errorMessage}
` : html``}`; + }; + + render = (): TemplateResult => { + return html` + + + `; + }; +} + +export type { SubscriptionEditElement }; diff --git a/src/pages/subscription-list/SubscriptionListElement.ts b/src/pages/subscription-list/SubscriptionListElement.ts index ae30d66..655d17f 100644 --- a/src/pages/subscription-list/SubscriptionListElement.ts +++ b/src/pages/subscription-list/SubscriptionListElement.ts @@ -33,6 +33,24 @@ class SubscriptionListElement extends BasePageElement { this.pagination?.executeFetch(); }; + subscriptionEdit = (id) => { + const _modal = this.appMain.appModal; + if (_modal) { + this.appMain.closeModal(); + } else { + this.appMain.createModal('subscription-edit', { + id: id + }); + } + } + + subscriptionEnd = async (id) => { + if (confirm('Are you sure you want to end this subscription?')) { + await this.subscriptionService.endSubscription(id); + this.appMain.triggerTransactionUpdate(); + } + } + renderSubscription = (item) => html` ${dayjs(item.lastTransactionDate).format("MMM DD 'YY")} every ${item.customRange} ${item.rangeName} @@ -50,6 +68,12 @@ class SubscriptionListElement extends BasePageElement { (${item.currency ? item.currency : 'USD'}) + ${item.hasEnd ? html`` : html` + + + + ` + } `; getSubscriptions = async (options): Promise => { diff --git a/src/pages/transaction-create/TransactionCreateElement.ts b/src/pages/transaction-create/TransactionCreateElement.ts index 20a78ba..75d77bc 100644 --- a/src/pages/transaction-create/TransactionCreateElement.ts +++ b/src/pages/transaction-create/TransactionCreateElement.ts @@ -117,6 +117,7 @@ class TransactionCreateElement extends BasePageElement { if (walletData.walletId) { this.appMain?.closeModal(); } else { + this.appMain?.closeModal(); this.routerService.goTo('/history', { walletId: response.walletId, }); diff --git a/src/pages/transaction-edit/TransactionEditElement.ts b/src/pages/transaction-edit/TransactionEditElement.ts new file mode 100644 index 0000000..e48769c --- /dev/null +++ b/src/pages/transaction-edit/TransactionEditElement.ts @@ -0,0 +1,234 @@ +import { targets, controller, target } from '@github/catalyst'; +import { html, TemplateResult } from 'core/utils'; +import { AuthService, TransactionsService, TransactionTypeService, WalletService } from 'services/'; +import { AppFormElement, InputFieldElement } from 'components/'; +import { BasePageElement } from 'common/'; +import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement'; +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; +dayjs.extend(utc); + +@controller +class TransactionEditElement extends BasePageElement { + @targets inputs: Array; + @target appForm: AppFormElement; + private transactionService: TransactionsService; + private transactionTypeService: TransactionTypeService; + private walletService: WalletService; + walletData: any = null; + authService: AuthService; + errorMessage: string; + private initial: boolean = false; + constructor() { + super({ + title: 'Edit Transaction', + }); + } + elementConnected = (): void => { + this.walletService = new WalletService(this.appMain?.appService); + this.transactionService = new TransactionsService(this.appMain?.appService); + this.transactionTypeService = new TransactionTypeService(this.appMain?.appService); + this.authService = new AuthService(this.appMain.appService); + this.walletData = this.getData(); + this.update(); + this.getTransaction(this.walletData?.id) + if (this.walletData && this.walletData.walletId) { + this.setTransactionType(); + } else { + this.initial = true; + } + }; + + getTransaction = async (id) => { + try { + const response = await this.transactionService.get(id, { + embed: 'Wallet,TransactionType' + }); + const wallet = this.appForm.getInput('wallet'); + if (wallet) { + (wallet as AppDropdownElement).setItemValue(response.wallet); + } + const transactionType = this.appForm.getInput('transactionType'); + if (transactionType) { + (transactionType as AppDropdownElement).setItemValue(response.transactionType); + } + response.wallet = response.walletId; + response.transactionType = response.transactionTypeId; + response.transactionDate = dayjs(response.transactionDate).format('YYYY-MM-DD'); + this.appForm.set(response); + } catch (err) { + + } + } + + 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; + } + + setTransactionType = async () => { + this.appForm.isValid = false; + try { + const response = await this.transactionTypeService.getAll(); + this.walletData.transactionTypeId = response?.find((type) => type.type == this.walletData.transactionType)?.id; + } catch (err) { + } finally { + this.appForm.isValid = true; + } + }; + + getWallets = async (options): Promise => { + try { + const response = await this.walletService.getAll(options); + return response; + } catch (err) {} + }; + + getTypes = async (options): Promise => { + try { + const response = await this.transactionTypeService.getAll(options); + return response; + } catch (err) {} + }; + + onSubmit = async (values): Promise => { + try { + if (!this.validate()) { + return; + } + + const { + description: description, + wallet: walletId, + amount, + transactionType: transactionTypeId, + transactionDate, + } = values; + + const formattedDate = dayjs(transactionDate).utc(true).format(); + + const walletData = this.walletData; + + const formData = { + description, + amount, + walletId: walletData && walletData.walletId ? walletData.walletId : walletId, + transactionDate: formattedDate, + transactionTypeId: + walletData && walletData.transactionTypeId ? walletData.transactionTypeId : transactionTypeId, + }; + + const response = await this.transactionService.put(this.walletData?.id, formData); + + if (response?.id) { + this.appMain.triggerTransactionUpdate(); + this.appMain.pushToast('success', 'Transaction edited successfully!'); + + if (walletData.id) { + this.appMain?.closeModal(); + } else { + this.routerService.goTo('/history', { + walletId: response.walletId, + }); + } + } + } catch (err) { + this.errorMessage = 'Unable to edit 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 => { + const renderInput = (type, name, label, rules, hide?, customAction?) => { + if (hide) { + return html``; + } + return html``; + }; + + const renderNumericInput = (pattern, name, label, rules, hide?, customAction?) => { + if (hide) { + return html``; + } + return html``; + }; + + const renderDropdown = (fetch, name, label, rules, hide?) => { + if (hide) { + return html``; + } + return html``; + }; + + return html` + + ${renderNumericInput('^d+(?:.d{1,2})?$', 'amount', 'Amount', 'required', false)} + ${renderInput('text', 'description', 'Description', 'required')} + ${renderInput('date', 'transactionDate', 'Transaction date', 'required')} + ${renderDropdown( + 'transaction-edit#getWallets', + 'wallet', + 'Wallet', + 'required', + this.walletData && this.walletData.walletId + )} + ${renderDropdown( + 'transaction-edit#getTypes', + 'transactionType', + 'Transaction Type', + 'required', + this.walletData && this.walletData.walletId + )} + ${this.errorMessage ? html`
${this.errorMessage}
` : html``} + + `; + }; +} + +export type { TransactionEditElement }; 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..b03ab6b 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/pages/wallet-page/WalletPageElement.ts b/src/pages/wallet-page/WalletPageElement.ts index 51a708a..efd6ee8 100644 --- a/src/pages/wallet-page/WalletPageElement.ts +++ b/src/pages/wallet-page/WalletPageElement.ts @@ -14,13 +14,21 @@ class WalletPageElement extends BasePageElement { @target paginationSub: AppPaginationElement; @target walletHeader: WalletHeaderElement; walletId: string; + walletTitle: string; constructor() { super({ - title: 'Wallet', + title: 'Wallet' }); } - elementConnected = (): void => { + get pageTitle(){ + if (this.walletTitle) { + return `Wallet - ${this.walletTitle}` + } + return 'Wallet' + } + + elementConnected = async(): Promise => { this.walletService = new WalletService(this.appMain?.appService); this.transactionsService = new TransactionsService(this.appMain?.appService); this.subscriptionService = new SubscriptionService(this.appMain?.appService); @@ -30,15 +38,18 @@ class WalletPageElement extends BasePageElement { this.walletId = walletId; } } + await this.getWallet(); this.update(); this.pagination?.setFetchFunc?.(this.getTransactions, true)!; this.paginationSub?.setFetchFunc?.(this.getSubscriptions, true)!; this.paginationSub?.setCustomRenderItem?.(this.renderSubscription)!; + this.appMain.addEventListener('walletupdate', this.getWallet); this.appMain.addEventListener('tokenchange', this.update); this.appMain.addEventListener('transactionupdate', this.transactionUpdated); }; elementDisconnected = (appMain: AppMainElement): void => { + appMain?.removeEventListener('walletupdate', this.getWallet); appMain?.removeEventListener('tokenchange', this.update); appMain?.removeEventListener('transactionupdate', this.transactionUpdated); }; @@ -66,6 +77,35 @@ class WalletPageElement extends BasePageElement { } }; + getWallet = async() => { + try { + const id = this.walletId; + const response = await this.walletService.get(id, null); + this.walletTitle = response.name; + } catch (err) { + throw err; + } + this.update(); + } + + subscriptionEdit = (id) => { + const _modal = this.appMain.appModal; + if (_modal) { + this.appMain.closeModal(); + } else { + this.appMain.createModal('subscription-edit', { + id: id + }); + } + } + + subscriptionEnd = async (id) => { + if (confirm('Are you sure you want to end this subscription?')) { + await this.subscriptionService.endSubscription(id); + this.appMain.triggerTransactionUpdate(); + } + } + renderSubscription = (item) => html` ${dayjs(item.lastTransactionDate).format("MMM DD 'YY")} every ${item.customRange} ${item.rangeName} @@ -83,6 +123,12 @@ class WalletPageElement extends BasePageElement { (${item.currency ? item.currency : 'USD'}) + ${item.hasEnd ? html`` : html` + + + + ` + } `; getSubscriptions = async (options): Promise => { @@ -175,6 +221,17 @@ class WalletPageElement extends BasePageElement { }); } }; + + walletEdit = () => { + const _modal = this.appMain.appModal; + if (_modal) { + this.appMain.closeModal(); + } else { + this.appMain.createModal('wallet-edit', { + id: this.routerService?.routerState?.data?.walletId + }); + } + } render = (): TemplateResult => { const renderHeader = () => html` { if (this.routerService?.routerState?.data?.walletId) { return html`
+
diff --git a/src/services/SubscriptionService.ts b/src/services/SubscriptionService.ts index a5c89fa..5dc01b6 100644 --- a/src/services/SubscriptionService.ts +++ b/src/services/SubscriptionService.ts @@ -1,9 +1,13 @@ import { AppService, BaseService } from 'core/services'; class SubscriptionService extends BaseService { - constructor(appService: AppService) { + constructor(public appService: AppService) { super('/subscription', appService); } + + endSubscription = (id) => { + return this.appService.post(this.endpoint + `/end`, {id}, null); + }; } export default SubscriptionService; diff --git a/src/styles/app-pagination/app-pagination.scss b/src/styles/app-pagination/app-pagination.scss index d1da237..cd21b2c 100644 --- a/src/styles/app-pagination/app-pagination.scss +++ b/src/styles/app-pagination/app-pagination.scss @@ -47,13 +47,17 @@ app-pagination { grid-template-columns: repeat(6, 1fr); } &.col-transactions { - grid-template-columns: auto 1fr auto; + grid-template-columns: 1fr 10fr 1fr 1fr; + } + &.col-wallet { + grid-template-columns: 9fr 1fr; } td, th { margin: 0 12px; overflow: hidden; // Or flex might break list-style: none; + align-self: center; &.--left { text-align: left; } @@ -138,13 +142,14 @@ app-pagination { grid-template-columns: repeat(6, 1fr); } &.col-subscription { - grid-template-columns: 1fr 2fr 10fr 1fr 2fr; + grid-template-columns: 1fr 2fr 10fr 1fr 2fr 2fr; } td, th { margin: 0 12px; overflow: hidden; // Or flex might break list-style: none; + align-self: center; &.--left { text-align: left; } diff --git a/src/styles/core/variables.scss b/src/styles/core/variables.scss index dfdda2b..bd1a2fd 100644 --- a/src/styles/core/variables.scss +++ b/src/styles/core/variables.scss @@ -13,6 +13,10 @@ $button-map: ( $gray-08, $white, ), + 'gray': ( + $gray-04, + $black, + ), 'secondary': ( $orange-08, $white, diff --git a/src/styles/icons/ico-edit.scss b/src/styles/icons/ico-edit.scss new file mode 100644 index 0000000..e4142a1 --- /dev/null +++ b/src/styles/icons/ico-edit.scss @@ -0,0 +1,40 @@ +.ico-edit { + box-sizing: border-box; + position: relative; + display: block; + transform: rotate(-45deg) scale(var(--ggs,1)); + width: 14px; + height: 4px; + border-right: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + margin-right: -2px +} +.ico-edit::after, +.ico-edit::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute +} +.ico-edit::before { + background: currentColor; + border-left: 0; + right: -6px; + width: 3px; + height: 4px; + border-radius: 1px; + top: 0 +} +.ico-edit::after { + width: 8px; + height: 7px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-right: 7px solid; + left: -11px; + top: -2px +} \ No newline at end of file diff --git a/src/styles/icons/index.scss b/src/styles/icons/index.scss new file mode 100644 index 0000000..fffc766 --- /dev/null +++ b/src/styles/icons/index.scss @@ -0,0 +1 @@ +@import './ico-edit.scss'; \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 9997e1c..1617658 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,3 +14,4 @@ @import './wallet-header/index.scss'; @import './app-pagination/index.scss'; @import './wallet-list/index.scss'; +@import './icons/index.scss'; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9d60438..e3f0e70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1207,22 +1207,22 @@ "@webassemblyjs/ast" "1.11.0" "@xtuc/long" "4.2.2" -"@webpack-cli/configtest@^1.0.3": - version "1.0.3" - resolved "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.3.tgz" - integrity sha512-WQs0ep98FXX2XBAfQpRbY0Ma6ADw8JR6xoIkaIiJIzClGOMqVRvPCWqndTxf28DgFopWan0EKtHtg/5W1h0Zkw== +"@webpack-cli/configtest@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.4.tgz#f03ce6311c0883a83d04569e2c03c6238316d2aa" + integrity sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ== -"@webpack-cli/info@^1.2.4": - version "1.2.4" - resolved "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.4.tgz" - integrity sha512-ogE2T4+pLhTTPS/8MM3IjHn0IYplKM4HbVNMCWA9N4NrdPzunwenpCsqKEXyejMfRu6K8mhauIPYf8ZxWG5O6g== +"@webpack-cli/info@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.3.0.tgz#9d78a31101a960997a4acd41ffd9b9300627fe2b" + integrity sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w== dependencies: envinfo "^7.7.3" -"@webpack-cli/serve@^1.4.0": - version "1.4.0" - resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.4.0.tgz" - integrity sha512-xgT/HqJ+uLWGX+Mzufusl3cgjAcnqYYskaB7o0vRcwOEfuu6hMzSILQpnIzFMGsTaeaX4Nnekl+6fadLbl1/Vg== +"@webpack-cli/serve@^1.5.1": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.5.1.tgz#b5fde2f0f79c1e120307c415a4c1d5eb15a6f278" + integrity sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw== "@xtuc/ieee754@^1.2.0": version "1.2.0" @@ -6595,15 +6595,15 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -webpack-cli@^4.7.0: - version "4.7.0" - resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.7.0.tgz" - integrity sha512-7bKr9182/sGfjFm+xdZSwgQuFjgEcy0iCTIBxRUeteJ2Kr8/Wz0qNJX+jw60LU36jApt4nmMkep6+W5AKhok6g== +webpack-cli@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.7.2.tgz#a718db600de6d3906a4357e059ae584a89f4c1a5" + integrity sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw== dependencies: "@discoveryjs/json-ext" "^0.5.0" - "@webpack-cli/configtest" "^1.0.3" - "@webpack-cli/info" "^1.2.4" - "@webpack-cli/serve" "^1.4.0" + "@webpack-cli/configtest" "^1.0.4" + "@webpack-cli/info" "^1.3.0" + "@webpack-cli/serve" "^1.5.1" colorette "^1.2.1" commander "^7.0.0" execa "^5.0.0"