Refactor code

javascript-practice/src/js/app.js

@@ -12,5 +12,6 @@ export default class App {
   start() {
     this.controller.registerController.init();
     this.controller.loginController.init();
+    this.controller.homeController.init();
   }
 }

javascript-practice/src/js/constants/constant.js

@@ -15,7 +15,7 @@ export const MESSAGE = {
 export const URL = {
   LOGIN: 'login',
   REGISTER: 'register',
-  HOME: 'home',
+  HOME: '',
 };
 
 export const BTN_CONTENT = {

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

@@ -1,3 +1,4 @@
+import HomeController from './homeController';
 import LoginController from './loginController';
 import RegisterController from './registerController';
 
@@ -5,5 +6,6 @@ export default class Controller {
   constructor(service, view) {
     this.registerController = new RegisterController(service, view);
     this.loginController = new LoginController(service, view);
+    this.homeController = new HomeController(service, view);
   }
 }

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

@@ -0,0 +1,14 @@
+export default class HomeController {
+  constructor(service, view) {
+    this.service = service;
+    this.homeView = view.homeView;
+  }
+
+  init() {
+    if (this.homeView) {
+      this.homeView.handlerTabsTransfer();
+      this.homeView.addCommonEventPage();
+      this.homeView.addEventSelectCategoryDialog();
+    }
+  }
+}

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

@@ -96,7 +96,21 @@ export default class CommonView {
    */
   handleEventBtnPopupAndOverlay() {
     this.popupBtn.addEventListener('click', this.tooglePopupForm.bind(this));
-    this.overlay.addEventListener('click', this.tooglePopupForm.bind(this));
+    this.overlay.addEventListener('click', this.toogleDialog.bind(this));
+  }
+
+  toogleDialog() {
+    this.overlay.classList.toggle('active');
+    if (this.dialog.length) {
+      // If it have more dialog
+      this.dialog.forEach((item) => {
+        if (item.classList.contains('active')) {
+          item.classList.remove('active');
+        }
+      });
+    } else {
+      this.dialog.classList.toggle('active');
+    }
   }
 
   /**

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

@@ -0,0 +1,116 @@
+import CommonView from './commonView';
+
+export default class HomeView extends CommonView {
+  constructor() {
+    super();
+
+    this.tabs = document.querySelectorAll('.app__tab-item');
+    this.allContent = document.querySelectorAll('.app__content-item');
+    this.addTransactionBtn = document.getElementById('addTransaction');
+    this.addBudgetBtn = document.getElementById('addBudget');
+    this.overlay = document.querySelector('.overlay');
+    this.darkOverlay = document.querySelector('.dark-overlay');
+    this.dialog = document.querySelectorAll('.dialog');
+    this.cancelBtn = document.querySelectorAll('.form__cancel-btn');
+    this.categoryField = document.getElementById('selectCategory');
+    this.closeIcon = document.querySelector('.close-icon');
+
+    this.budgetForm = document.getElementById('budgetForm');
+    this.transactionForm = document.getElementById('transactionForm');
+    this.categoryForm = document.getElementById('categoryForm');
+
+    this.homePage = document.URL.includes('/');
+  }
+
+  /**
+   * Handle event when click on tabs
+   */
+  handlerTabsTransfer() {
+    this.tabs.forEach((tab, index) => {
+      tab.addEventListener('click', (e) => {
+        this.removeActiveTab();
+        tab.classList.add('active');
+
+        const line = document.querySelector('.app__line');
+        line.style.width = `${e.target.offsetWidth}px`;
+        line.style.left = `${e.target.offsetLeft}px`;
+
+        this.allContent.forEach((content) => {
+          content.classList.remove('active');
+        });
+        this.allContent[index].classList.add('active');
+      });
+    });
+  }
+
+  addCommonEventPage() {
+    this.addTransactionBtn.addEventListener('click', () => {
+      this.transactionForm.classList.add('active');
+      this.toggleActiveOverlay();
+    });
+
+    this.addBudgetBtn.addEventListener('click', () => {
+      this.budgetForm.classList.add('active');
+      this.toggleActiveOverlay();
+    });
+
+    this.cancelBtn.forEach((item) => {
+      item.addEventListener('click', () => {
+        this.hideDialog();
+        this.toggleActiveOverlay();
+      });
+    });
+
+    this.overlay.addEventListener('click', () => {
+      this.hideDialog();
+    });
+  }
+
+  addEventSelectCategoryDialog() {
+    this.categoryField.addEventListener('click', () => {
+      this.categoryForm.classList.add('active');
+      this.toggleDarkOverlayActive();
+    });
+
+    this.closeIcon.addEventListener(
+      'click',
+      this.hideSelectCategoryForm.bind(this),
+    );
+
+    this.darkOverlay.addEventListener(
+      'click',
+      this.hideSelectCategoryForm.bind(this),
+    );
+  }
+
+  hideSelectCategoryForm() {
+    this.categoryForm.classList.remove('active');
+    this.toggleDarkOverlayActive();
+  }
+
+  toggleDarkOverlayActive() {
+    this.darkOverlay.classList.toggle('active');
+  }
+
+  hideDialog() {
+    this.dialog.forEach((item) => {
+      if (item.classList.contains('active')) {
+        item.classList.remove('active');
+      }
+    });
+  }
+
+  toggleActiveOverlay() {
+    this.overlay.classList.toggle('active');
+  }
+
+  removeActiveTab() {
+    this.tabs.forEach((tab) => {
+      tab.classList.remove('active');
+    });
+  }
+
+  isHomePage() {
+    return this.homePage;
+  }
+}

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

@@ -7,6 +7,7 @@ export default class LoginView extends CommonLoginRegisterView {
 
     this.parentElement = document.querySelector('.form');
     this.loginPage = document.URL.includes('/login');
+    this.dialog = document.querySelector('.modal-box');
   }
 
   /**

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

@@ -7,6 +7,7 @@ export default class RegisterView extends CommonLoginRegisterView {
     super();
 
     this.registerPage = document.URL.includes('/register');
+    this.dialog = document.querySelector('.modal-box');
   }
 
   /**

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

@@ -2,6 +2,7 @@ import RegisterView from './registerView';
 import LoginView from './loginView';
 import { getURL } from '../helpers/helpers';
 import { URL } from '../constants/constant';
+import HomeView from './homeView';
 
 export default class View {
   constructor() {
@@ -12,6 +13,9 @@ export default class View {
       case URL.REGISTER:
         this.registerView = new RegisterView();
         break;
+      case URL.HOME:
+        this.homeView = new HomeView();
+        break;
       default:
     }
   }

javascript-practice/src/pages/index.html

@@ -8,7 +8,6 @@
     <title>Money Lover Web</title>
   </head>
   <body class="home-page">
-    <div class="overlay active"></div>
     <div class="dark-overlay"></div>
     <!-- <div class="modal-box success active">
       <div class="mark check"></div>
@@ -18,7 +17,7 @@
       <button class="modal-box__redirect-btn">OK</button>
     </div> -->
     <!-- Add a wallet form -->
-    <div class="dialog active" id="walletForm">
+    <div class="dialog" id="walletForm">
       <div class="dialog__add-wallet">
         <!-- Dialog header -->
         <div class="dialog__header">
@@ -403,7 +402,8 @@
       <!-- End app -->
     </div>
     <!-- All scripts below is use for test purpose!  -->
-    <script>
+    <script type="module" src="../js/main.js"></script>
+    <!-- <script>
       // Handle event when click on tabs
       const tabs = document.querySelectorAll('.app__tab-item');
       const all_content = document.querySelectorAll('.app__content-item');
@@ -486,6 +486,6 @@
         darkOverlay.classList.remove('active');
         categoryForm.classList.remove('active');
       });
-    </script>
+    </script> -->
   </body>
 </html>