Fix bug and improve UX/UI

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

@@ -354,6 +354,7 @@ export default class HomeView extends CommonView {
 
           // Reload data
           await this.loadTransactionData();
+          await this.updateAmountWallet();
           await this.loadData();
 
           this.showSuccessToast('Delete success!', MESSAGE.DEFAULT_MESSAGE);
@@ -382,35 +383,51 @@ export default class HomeView extends CommonView {
     );
   }
 
-  initDataTransactionDialog(idTransaction) {
+  initValueTransactionDialog(idTransaction) {
-    const transactionArr = this.listTransactions.filter(
+    let categoryName;
-      (obj) => obj.id === idTransaction,
-    );
-    const transaction = Object.assign({}, ...transactionArr);
-    const categoryArr = this.listCategory.filter(
-      (obj) => obj.name === transaction.categoryName,
-    );
-    const category = Object.assign({}, ...categoryArr);
 
-    const idEl = this.transactionDialog.querySelector(
+    if (idTransaction) {
-      "[name='id_transaction']",
+      // Get transaction object
-    );
+      const transactionArr = this.listTransactions.filter(
-    const dateEl = this.transactionDialog.querySelector(
+        (obj) => obj.id === idTransaction,
-      "[name='selected_date']",
+      );
-    );
+      const transaction = Object.assign({}, ...transactionArr);
-    const categoryEl = this.transactionDialog.querySelector(
+      // Get category object
-      "[name='category_name']",
+      const categoryArr = this.listCategory.filter(
-    );
+        (obj) => obj.name === transaction.categoryName,
-    const amountEl = this.transactionDialog.querySelector("[name='amount']");
+      );
-    const noteEl = this.transactionDialog.querySelector("[name='note']");
+      const category = Object.assign({}, ...categoryArr);
-    const iconEl = this.transactionDialog.querySelector('.category-icon');
 
-    idEl.value = transaction.id;
+      const idEl = this.transactionDialog.querySelector(
-    dateEl.value = transaction.date;
+        "[name='id_transaction']",
-    categoryEl.value = transaction.categoryName;
+      );
-    amountEl.value = Math.abs(transaction.amount);
+      const dateEl = this.transactionDialog.querySelector(
-    noteEl.value = transaction.note;
+        "[name='selected_date']",
-    iconEl.src = category.url;
+      );
+      const categoryEl = this.transactionDialog.querySelector(
+        "[name='category_name']",
+      );
+      const amountEl = this.transactionDialog.querySelector("[name='amount']");
+      const noteEl = this.transactionDialog.querySelector("[name='note']");
+      const iconEl = this.transactionDialog.querySelector('.category-icon');
+
+      idEl.value = transaction.id;
+      dateEl.value = transaction.date;
+      categoryEl.value = transaction.categoryName;
+      amountEl.value = Math.abs(transaction.amount);
+      noteEl.value = transaction.note;
+      iconEl.src = category.url;
+
+      categoryName = categoryEl.value;
+    }
+
+    // Show delete button only if it is a edit form and not a income transaction
+    const deleteBtn = this.transactionDialog.querySelector('.form__delete-btn');
+    const showDeleteBtn = () => {
+      return idTransaction && categoryName !== 'Income';
+    };
+
+    deleteBtn.classList.toggle('hide', !showDeleteBtn());
   }
 
   async submitTransactionDialog() {
@@ -917,14 +934,10 @@ export default class HomeView extends CommonView {
   showTransactionDialog(idTransaction = null) {
     this.clearInputTransactionForm();
 
-    // Show delete button only if it is a edit form
+    // Init data transaction to dialog
-    const deleteBtn = this.transactionDialog.querySelector('.form__delete-btn');
+    this.initValueTransactionDialog(idTransaction);
-    deleteBtn.classList.toggle('hide', !idTransaction);
 
-    if (idTransaction) {
+    if (!idTransaction)
-      // Init data transaction to dialog
-      this.initDataTransactionDialog(idTransaction);
-    } else
       this.transactionDialog.querySelector(
         "[name='selected_date']",
       ).valueAsDate = new Date(); // Set default value for date input
@@ -936,14 +949,21 @@ export default class HomeView extends CommonView {
 
   addEventTransactionItem() {
     const transactionItemEl = document.querySelectorAll('.transaction__item');
+
     if (transactionItemEl) {
       transactionItemEl.forEach((item) => {
         item.addEventListener('click', (e) => {
           const transactionTime = e.target.closest('.transaction__time');
+          const categoryNameEl = item.querySelector(
+            '.transaction__category-name',
+          );
+
           if (transactionTime) {
             const idTransaction = transactionTime.dataset.id;
 
-            this.showTransactionDialog(idTransaction);
+            // If it is income transaction, don't show dialog
+            if (categoryNameEl.textContent.trim() !== 'Income')
+              this.showTransactionDialog(idTransaction);
           }
         });
       });

javascript-practice/src/styles/_main.scss

@@ -15,7 +15,6 @@
 
 // Layouts
 @import './layouts/header';
-@import './layouts/nav';
 
 // Pages
 @import './pages/login-register';

javascript-practice/src/styles/layouts/_header.scss

@@ -1 +1,36 @@
-// TODO
+.home-page {
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: $white;
+
+    &__content {
+      @extend %d-flex;
+      @include flex-layout($justify: space-between, $align: center);
+
+      padding: 12px 8px;
+    }
+
+    &__left-content {
+      @extend %d-flex;
+      @include flex-layout($align: center, $gap: 12px);
+    }
+
+    &__add-btn {
+      @extend %base-btn, %rounded-sm;
+
+      height: 32px;
+      padding-inline: 12px;
+      font-weight: 500;
+      line-height: 16px;
+      transition: 0.2s;
+      cursor: pointer;
+
+      &:hover {
+        background: $dark-primary-color;
+      }
+    }
+  }
+}

javascript-practice/src/styles/layouts/_nav.scss

@@ -1 +0,0 @@
-// TODO

javascript-practice/src/styles/pages/_index.scss

@@ -14,41 +14,6 @@
     padding-top: 96px;
   }
 
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: $white;
-
-    &__content {
-      @extend %d-flex;
-      @include flex-layout($justify: space-between, $align: center);
-
-      padding: 12px 8px;
-    }
-
-    &__left-content {
-      @extend %d-flex;
-      @include flex-layout($align: center, $gap: 12px);
-    }
-
-    &__add-btn {
-      @extend %base-btn, %rounded-sm;
-
-      height: 32px;
-      padding-inline: 12px;
-      font-weight: 500;
-      line-height: 16px;
-      transition: 0.2s;
-      cursor: pointer;
-
-      &:hover {
-        background: $dark-primary-color;
-      }
-    }
-  }
-
   .wallet {
     @extend %d-flex;
     @include flex-layout($align: center, $gap: 8px);
@@ -358,12 +323,8 @@
           @extend %d-flex;
           @include flex-layout($gap: 32px);
 
-          & .form__input-container:first-child .form__input-field {
+          & .form__input-container {
-            width: 208px;
+            width: 100%;
-          }
-
-          & .form__input-container:last-child .form__input-field {
-            width: 240px;
           }
         }