${category.name}
+${MESSAGE.REQUIRED_MESSAGE(field)}
- `; - - element.insertAdjacentHTML('afterend', markup); -}; - export const redirectToLoginPage = () => { window.location.replace('/login'); }; diff --git a/javascript-practice/src/js/helpers/transform.js b/javascript-practice/src/js/helpers/transform.js new file mode 100644 index 0000000..f989c48 --- /dev/null +++ b/javascript-practice/src/js/helpers/transform.js @@ -0,0 +1,26 @@ +export default class Transform { + constructor() { + this.signal = {}; + } + + onSendSignal(fromClass, value) { + Object.keys(this.signal).forEach((key) => { + const item = this.signal[key]; + + // Same receiver + if (item.name === fromClass) { + return; + } + + // Send signal + const { handler } = this.signal[key]; + if (handler) { + handler(value); + } + }); + } + + create(className, handler = null) { + this.signal[className] = { name: className, handler }; + } +} diff --git a/javascript-practice/src/js/helpers/validateForm.js b/javascript-practice/src/js/helpers/validateForm.js new file mode 100644 index 0000000..bf1a4f4 --- /dev/null +++ b/javascript-practice/src/js/helpers/validateForm.js @@ -0,0 +1,27 @@ +import { REGEX } from '../constants/config'; +import * as MESSAGE from '../constants/message'; + +/** + * Validate password + * @param {string} password Password input + * @returns {boolean} Return true if validate password success, otherwise return false + */ +export const isValidPassword = (password) => { + return REGEX.PASSWORD.test(password); +}; + +export const isValidateEmail = (email) => { + return String(email).toLowerCase().match(REGEX.EMAIL); +}; + +export const compare2Password = (password, passwordConfirm) => { + return password === passwordConfirm; +}; + +export const renderRequiredText = (field, element) => { + const markup = ` +${MESSAGE.REQUIRED_MESSAGE(field)}
+ `; + + element.insertAdjacentHTML('afterend', markup); +}; diff --git a/javascript-practice/src/js/models/transaction.js b/javascript-practice/src/js/models/transaction.js index c6ff86f..9da4900 100644 --- a/javascript-practice/src/js/models/transaction.js +++ b/javascript-practice/src/js/models/transaction.js @@ -1,21 +1,12 @@ +import { createId } from '../helpers/dataProcess'; + export default class Transaction { - constructor({ - id = '', - categoryName = '', - date = '', - note = '', - amount = 0, - idUser, - }) { - this.id = id === '' ? Transaction.createIdTransactions() : id; + constructor({ id, categoryName, date, note, amount = 0, idUser }) { + this.id = !id ? createId() : id; this.categoryName = categoryName; this.date = date; this.note = note; this.amount = amount; this.idUser = idUser; } - - static createIdTransactions() { - return new Date().getTime(); - } } diff --git a/javascript-practice/src/js/models/user.js b/javascript-practice/src/js/models/user.js index b3ed5e7..f8005c6 100644 --- a/javascript-practice/src/js/models/user.js +++ b/javascript-practice/src/js/models/user.js @@ -1,12 +1,10 @@ +import { createId } from '../helpers/dataProcess'; + export default class User { constructor({ email, password, accessToken = '' }) { - this.id = User.createIdUser(); + this.id = createId(); this.email = email; this.password = password; this.accessToken = accessToken; } - - static createIdUser() { - return new Date().getTime(); - } } diff --git a/javascript-practice/src/js/models/wallet.js b/javascript-practice/src/js/models/wallet.js index 44d5a6e..3ab711d 100644 --- a/javascript-practice/src/js/models/wallet.js +++ b/javascript-practice/src/js/models/wallet.js @@ -1,13 +1,15 @@ +import { createId } from '../helpers/dataProcess'; + export default class Wallet { - constructor({ walletName = '', inflow = 0, outflow = 0, idUser }) { - this.id = Wallet.createIdWallet(); + constructor({ walletName, inflow = 0, outflow = 0, idUser }) { + this.id = createId(); this.walletName = walletName; this.inflow = inflow; this.outflow = outflow; this.idUser = idUser; } - static createIdWallet() { - return new Date().getTime(); + amountWallet() { + return +this.inflow + +this.outflow; } } diff --git a/javascript-practice/src/js/services/commonService.js b/javascript-practice/src/js/services/commonService.js index eb3d611..bb9648d 100644 --- a/javascript-practice/src/js/services/commonService.js +++ b/javascript-practice/src/js/services/commonService.js @@ -1,8 +1,8 @@ +import { timeOutConnect } from '../helpers/helpers'; import { convertDataObjectToModel, convertModelToDataObject, - timeOutConnect, -} from '../helpers/helpers'; +} from '../helpers/dataProcess'; import FirebaseService from './firebaseService'; export default class CommonService { diff --git a/javascript-practice/src/js/services/walletService.js b/javascript-practice/src/js/services/walletService.js index 7092e11..9e19b7a 100644 --- a/javascript-practice/src/js/services/walletService.js +++ b/javascript-practice/src/js/services/walletService.js @@ -1,3 +1,4 @@ +import Wallet from '../models/wallet'; import CommonService from './commonService'; export default class WalletService extends CommonService { @@ -34,6 +35,10 @@ export default class WalletService extends CommonService { async getWalletByIdUser(idUser) { const result = await this.getDataFromProp('idUser', idUser); - return result || null; + if (result) { + return new Wallet(result); + } + + return null; } } diff --git a/javascript-practice/src/js/views/authenticationView.js b/javascript-practice/src/js/views/authenticationView.js index 29a3fbc..105a690 100644 --- a/javascript-practice/src/js/views/authenticationView.js +++ b/javascript-practice/src/js/views/authenticationView.js @@ -5,7 +5,7 @@ import { isValidPassword, isValidateEmail, renderRequiredText, -} from '../helpers/helpers'; +} from '../helpers/validateForm'; export default class AuthenticationView extends CommonView { constructor() { diff --git a/javascript-practice/src/js/views/budgetView.js b/javascript-practice/src/js/views/budgetView.js new file mode 100644 index 0000000..20140fe --- /dev/null +++ b/javascript-practice/src/js/views/budgetView.js @@ -0,0 +1,174 @@ +import { DEFAULT_CATEGORY } from '../constants/config'; +import Transaction from '../models/transaction'; +import * as MESSAGE from '../constants/message'; +import { renderRequiredText } from '../helpers/validateForm'; + +class BudgetView { + constructor() { + this.budgetDialog = document.getElementById('budgetDialog'); + this.addBudgetBtn = document.getElementById('addBudget'); + + this.handlerEventBudgetView(); + } + + initFunction( + showErrorToast, + showSuccessToast, + toggleLoaderSpinner, + saveTransaction, + loadTransactionData, + updateAmountWallet, + loadData, + transform, + ) { + this.showErrorToast = showErrorToast; + this.showSuccessToast = showSuccessToast; + this.toggleLoaderSpinner = toggleLoaderSpinner; + this.saveTransaction = saveTransaction; + this.loadTransactionData = loadTransactionData; + this.updateAmountWallet = updateAmountWallet; + this.loadData = loadData; + this.transform = transform; + } + + subscribe() { + this.transform.create('budgetView', this.updateData.bind(this)); + } + + sendData() { + const data = { wallet: this.wallet, listTransaction: this.listTransaction }; + + this.transform.onSendSignal('budgetView', data); + } + + updateData(data) { + if (data.wallet) this.wallet = data.wallet; + + if (data.listTransactions) this.listTransaction = data.listTransactions; + + if (data.listCategory) this.listCategory = data.listCategory; + } + + addHandlerEventBudgetForm() { + this.budgetDialog.addEventListener('submit', (e) => { + e.preventDefault(); + + this.clearErrorStyleBudgetForm(); + this.submitBudgetForm(); + }); + + this.budgetDialog.addEventListener('input', () => { + this.changeBtnStyle(); + this.clearErrorStyleBudgetForm(); + }); + } + + clearErrorStyleBudgetForm() { + // Clear error style + const inputFieldEls = + this.budgetDialog.querySelectorAll('.form__input-field'); + const errorTexts = this.budgetDialog.querySelectorAll('.error-text'); + + inputFieldEls.forEach((item) => { + if (item.classList.contains('error-input')) + item.classList.remove('error-input'); + }); + + errorTexts.forEach((item) => { + if (item) item.remove(); + }); + } + + async submitBudgetForm() { + try { + const { formAddBudget } = document.forms; + const form = new FormData(formAddBudget); + const date = form.get('selected_date'); + const amount = form.get('amount'); + const note = form.get('note'); + + // Validate data user input + + if (this.validateBudgetForm(date, amount)) { + this.toggleLoaderSpinner(); // Enable loader spinner + this.budgetDialog.close(); // Close dialog + + const transaction = new Transaction({ + categoryName: DEFAULT_CATEGORY.INCOME, + date, + amount: +amount, + note, + idUser: this.wallet.idUser, + }); + + await this.saveTransaction(transaction); + + // Reload data + await this.loadTransactionData(); + await this.updateAmountWallet(); + await this.loadData(); + + // Hide loader spinner + this.toggleLoaderSpinner(); + + // Show success message + this.showSuccessToast( + MESSAGE.ADD_TRANSACTION_SUCCESS, + MESSAGE.DEFAULT_MESSAGE, + ); + + document.getElementById('formAddBudget').reset(); + } + } catch (error) { + this.showErrorToast(error); + } + } + + validateBudgetForm(date, amount) { + const inputFieldEl = + this.budgetDialog.querySelectorAll('.form__input-field'); + + if (!date || !amount) { + if (!date) { + renderRequiredText('date', inputFieldEl[0]); + inputFieldEl[0].classList.add('error-input'); + } + + if (!amount) { + renderRequiredText('amount', inputFieldEl[1]); + inputFieldEl[1].classList.add('error-input'); + } + + return false; + } + + return true; + } + + changeBtnStyle() { + const date = this.budgetDialog.querySelector('.input-date').value; + const amount = +this.budgetDialog.querySelector('.form__input-balance') + .value; + const saveBtn = this.budgetDialog.querySelector('.form__save-btn'); + + if (date.trim() && amount >= 1) { + saveBtn.classList.add('active'); + } else { + saveBtn.classList.remove('active'); + } + } + + handlerEventBudgetView() { + this.addBudgetBtn.addEventListener('click', () => { + // Set default value for date input + this.budgetDialog.querySelector("[name='selected_date']").valueAsDate = + new Date(); + + this.budgetDialog.showModal(); + }); + + this.addHandlerEventBudgetForm(); + } +} + +export default new BudgetView(); diff --git a/javascript-practice/src/js/views/categoryView.js b/javascript-practice/src/js/views/categoryView.js new file mode 100644 index 0000000..b0e7161 --- /dev/null +++ b/javascript-practice/src/js/views/categoryView.js @@ -0,0 +1,136 @@ +import { REMOVE_CATEGORY } from '../constants/config'; + +class CategoryView { + constructor() { + this.categoryDialog = document.getElementById('categoryDialog'); + this.categoryField = document.getElementById('selectCategory'); + this.closeIcon = document.querySelector('.close-icon'); + + this.handlerEventCategoryDialog(); + this.addEventSelectCategoryDialog(); + } + + initFunction(getAllCategory, transform) { + this.getAllCategory = getAllCategory; + this.transform = transform; + } + + sendData() { + const data = { listCategory: this.listCategory }; + + this.transform.onSendSignal('categoryView', data); + } + + handlerEventCategoryDialog() { + this.categoryDialog.addEventListener('input', () => { + setTimeout(() => { + this.searchCategory(); + }, 300); + }); + } + + /** + * Load category data + * @param {function} getAllCategory Get all category function + */ + async loadCategory() { + if (!this.listCategory) { + this.listCategory = await this.getAllCategory(); + + this.sendData(); + } + + if (this.listCategory) { + this.renderCategoryList(); + } + } + + searchCategory() { + const searchCategoryEl = + this.categoryDialog.querySelector("[name='category']"); + const searchValue = searchCategoryEl.value.trim().toLowerCase(); + let newListCategory = []; + + if (searchValue) { + this.listCategory.forEach((category) => { + const categoryName = category.name.trim().toLowerCase(); + + if (categoryName.includes(searchValue)) { + newListCategory.unshift(category); + } + }); + } else { + newListCategory = this.listCategory; + } + + // Render category item + this.renderCategoryList(this.keySearchCategory, newListCategory); + } + + renderCategoryList(categorySelected, listCategory = this.listCategory) { + // Remove category name unnecessary + const newListCategory = listCategory.filter( + (item) => !REMOVE_CATEGORY.includes(item.name), + ); + + const listCategoryEl = document.querySelector('.list-category'); + + listCategoryEl.innerHTML = ''; // Remove old category item + + newListCategory.forEach((category) => { + const markup = ` +${category.name}
+${transaction.day}
-- ${transaction.fullDateString} -
-${ - transaction.note === '' ? 'None' : transaction.note - }
-${transaction.amount >= 0 ? '+' : '-'}$ ${formatNumber( - Math.abs(transaction.amount), - )}
-- ${transactionDetail.categoryName} -
-${ - transactionDetail.totalTransaction - } Transactions
-${ - transactionDetail.totalAmount >= 0 ? '+' : '-' - }$ ${formatNumber(Math.abs(transactionDetail.totalAmount))}
-${category.name}
-${transaction.day}
++ ${transaction.fullDateString} +
+${ + transaction.note === '' ? 'None' : transaction.note + }
+${transaction.amount >= 0 ? '+' : '-'}$ ${formatNumber( + Math.abs(transaction.amount), + )}
++ ${transactionDetail.categoryName} +
+${ + transactionDetail.totalTransaction + } Transactions
+${ + transactionDetail.totalAmount >= 0 ? '+' : '-' + }$ ${formatNumber(Math.abs(transactionDetail.totalAmount))}
+