Implement show wallet data method

javascript-practice/src/js/controllers/homeController.js

@@ -12,6 +12,10 @@ export default class HomeController {
     return this.service.walletService.checkWalletExist(idUser);
   }
 
+  handlerGetWalletUser(idUser) {
+    return this.service.walletService.getWalletByIdUser(idUser);
+  }
+
   handlerSaveWallet(wallet) {
     return this.service.walletService.saveWallet(wallet);
   }
@@ -19,13 +23,18 @@ export default class HomeController {
   init() {
     if (this.homeView) {
       this.homeView.addHandlerInputChangeWalletForm();
+
       this.homeView.addHandlerSubmitWalletForm(
         this.handlerSaveWallet.bind(this),
       );
+
       this.homeView.loadPage(
         this.handlerGetInfoUserLogin.bind(this),
         this.handlerCheckWalletExist.bind(this),
+        this.handlerGetWalletUser.bind(this),
       );
+
+      this.homeView.addHandlerSubmitBudgetForm();
     }
   }
 }

javascript-practice/src/js/helpers/helpers.js

@@ -75,3 +75,9 @@ export const getSubdirectoryURL = () => {
 
   return subDirectory;
 };
+
+export const formatNumber = (number) => {
+  return number.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+  });
+};

javascript-practice/src/js/models/transaction.js

@@ -0,0 +1,13 @@
+export default class Transaction {
+  constructor({ categoryName = '', date = '', note = 'None', amount = 0 }) {
+    this.id = Transaction.createIdTransactions();
+    this.categoryName = categoryName;
+    this.date = date;
+    this.note = note;
+    this.amount = amount;
+  }
+
+  static createIdTransactions() {
+    return new Date().getTime();
+  }
+}

javascript-practice/src/js/models/wallet.js

@@ -1,14 +1,14 @@
 export default class Wallet {
   constructor({
     walletName = '',
-    amount = '',
+    amount = 0,
     inflow = 0,
     outflow = 0,
     idUser,
   }) {
     this.id = Wallet.createIdWallet();
     this.walletName = walletName;
-    this.amout = amount;
+    this.amount = amount;
     this.inflow = inflow;
     this.outflow = outflow;
     this.idUser = idUser;

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 {
@@ -39,7 +40,7 @@ export default class WalletService extends CommonService {
     const result = await this.getDataFromProp('idUser', idUser);
 
     if (result) {
-      return result;
+      return new Wallet(result);
     }
 
     return null;

javascript-practice/src/js/views/homeView.js

@@ -2,6 +2,7 @@ import { TYPE_TOAST, BTN_CONTENT } from '../constants/variable';
 import * as MESSAGE from '../constants/message';
 import CommonView from './commonView';
 import Wallet from '../models/wallet';
+import { formatNumber } from '../helpers/helpers';
 
 export default class HomeView extends CommonView {
   constructor() {
@@ -11,7 +12,7 @@ export default class HomeView extends CommonView {
     this.allContent = document.querySelectorAll('.app__content-item');
     this.addTransactionBtn = document.getElementById('addTransaction');
     this.addBudgetBtn = document.getElementById('addBudget');
-    this.saveBtn = document.querySelectorAll('.form__save-btn');
+    this.saveBtns = document.querySelectorAll('.form__save-btn');
     this.dialogs = document.querySelectorAll('.dialog');
     this.categoryField = document.getElementById('selectCategory');
     this.closeIcon = document.querySelector('.close-icon');
@@ -22,7 +23,8 @@ export default class HomeView extends CommonView {
     this.walletDialog = document.getElementById('walletDialog');
   }
 
-  async loadPage(getInfoUserLogin, checkWalletExist) {
+  async loadPage(getInfoUserLogin, checkWalletExist, getWalletByIdUser) {
+    this.getWalletByIdUser = getWalletByIdUser; // Init function
     this.toggleLoaderSpinner();
     const user = await getInfoUserLogin();
 
@@ -37,13 +39,40 @@ export default class HomeView extends CommonView {
         // Show add wallet dialog
         this.walletDialog.showModal();
       } else {
+        // Load event page
         this.loadEvent();
+
+        // Init data
+        this.loadData();
       }
     }
 
     this.toggleLoaderSpinner();
   }
 
+  async loadData() {
+    const wallet = await this.getWalletByIdUser(this.user.id); // Get data wallet
+    const walletName = document.querySelector('.wallet__name');
+    const walletPrice = document.querySelector('.wallet__price');
+    const sign = wallet.amount >= 0 ? '+' : '-';
+    const walletNameValue = wallet.walletName;
+    const walletAmountValue = formatNumber(wallet.amount);
+
+    this.wallet = wallet;
+
+    walletName.textContent = walletNameValue;
+    walletPrice.textContent = `${sign}$ ${walletAmountValue}`;
+  }
+
+  // ---------------------ADD BUDGET DIALOG---------------------//
+  addHandlerSubmitBudgetForm() {
+    this.budgetDialog.addEventListener('submit', (e) => {
+      // TODO
+    });
+  }
+  // ---------------------END DIALOG---------------------//
+
+  // ---------------------WALLET DIALOG--------------------- //
   addHandlerSubmitWalletForm(saveWallet) {
     this.walletDialog.addEventListener('submit', (e) => {
       e.preventDefault();
@@ -58,7 +87,7 @@ export default class HomeView extends CommonView {
     try {
       const wallet = new Wallet({
         walletName: this.walletName,
-        amount: this.amount,
+        amount: +this.amount,
         idUser: this.user.id,
       });
 
@@ -66,6 +95,7 @@ export default class HomeView extends CommonView {
 
       this.showSuccessToast('Add wallet success', 'Click ok to continue!');
       this.loadEvent();
+      this.loadData();
     } catch (error) {
       // Show toast error
       this.initErrorToast(error);
@@ -93,6 +123,8 @@ export default class HomeView extends CommonView {
     }
   }
 
+  // ---------------------END DIALOG--------------------- //
+
   showSuccessToast(title, message) {
     const typeToast = TYPE_TOAST.success;
     const btnContent = BTN_CONTENT.OK;
@@ -116,7 +148,7 @@ export default class HomeView extends CommonView {
     this.dialogToast.showModal();
   }
 
-  /* ------------------------------- HANDLER EVENT ------------------------------- */
+  // ------------------------------- HANDLER EVENT ------------------------------- //
 
   loadEvent() {
     this.addCommonEventPage();
@@ -169,6 +201,12 @@ export default class HomeView extends CommonView {
     this.addBudgetBtn.addEventListener('click', () => {
       this.budgetDialog.showModal();
     });
+
+    this.saveBtns.forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+      });
+    });
   }
 
   addEventSelectCategoryDialog() {

javascript-practice/src/pages/index.html

@@ -82,7 +82,7 @@
                   <div class="icon-btn"></div>
                 </div>
               </div>
-              <div class="form__input-field">
+              <div class="form__input-field error">
                 <p class="form__label">Amount</p>
                 <input
                   class="form__input-balance"
@@ -122,7 +122,7 @@
         </div>
         <!-- Body -->
         <div class="dialog__body">
-          <form class="form" id="formAddBudget">
+          <form class="form" id="formAddTransaction">
             <div class="form__date-category-amount-input">
               <div class="form__input-field">
                 <p class="form__label">Date</p>
@@ -284,8 +284,8 @@
                 <img src="../assets/images/icon.png" alt="Wallet Icon" />
               </div>
               <div class="wallet__info">
-                <p class="wallet__name">Nezumi</p>
+                <p class="wallet__name">User</p>
-                <p class="wallet__price">+$ 499,900,900.00</p>
+                <p class="wallet__price">+$ 0.00</p>
               </div>
             </div>
             <button class="header__add-btn" id="addBudget">Add budget</button>