From ad5349ee08dd157c349fdbd2b8b23fa360d4c41e Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Mon, 18 Sep 2023 10:36:12 +0700 Subject: [PATCH] Fix bug and improve UX/UI --- javascript-practice/src/js/views/homeView.js | 90 +++++++++++-------- javascript-practice/src/styles/_main.scss | 1 - .../src/styles/layouts/_header.scss | 37 +++++++- .../src/styles/layouts/_nav.scss | 1 - .../src/styles/pages/_index.scss | 43 +-------- 5 files changed, 93 insertions(+), 79 deletions(-) delete mode 100644 javascript-practice/src/styles/layouts/_nav.scss diff --git a/javascript-practice/src/js/views/homeView.js b/javascript-practice/src/js/views/homeView.js index ad8908e..618c17e 100644 --- a/javascript-practice/src/js/views/homeView.js +++ b/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) { - const transactionArr = this.listTransactions.filter( - (obj) => obj.id === idTransaction, - ); - const transaction = Object.assign({}, ...transactionArr); - const categoryArr = this.listCategory.filter( - (obj) => obj.name === transaction.categoryName, - ); - const category = Object.assign({}, ...categoryArr); + initValueTransactionDialog(idTransaction) { + let categoryName; - const idEl = this.transactionDialog.querySelector( - "[name='id_transaction']", - ); - const dateEl = this.transactionDialog.querySelector( - "[name='selected_date']", - ); - 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'); + if (idTransaction) { + // Get transaction object + const transactionArr = this.listTransactions.filter( + (obj) => obj.id === idTransaction, + ); + const transaction = Object.assign({}, ...transactionArr); + // Get category object + const categoryArr = this.listCategory.filter( + (obj) => obj.name === transaction.categoryName, + ); + const category = Object.assign({}, ...categoryArr); - 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; + const idEl = this.transactionDialog.querySelector( + "[name='id_transaction']", + ); + const dateEl = this.transactionDialog.querySelector( + "[name='selected_date']", + ); + 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 - const deleteBtn = this.transactionDialog.querySelector('.form__delete-btn'); - deleteBtn.classList.toggle('hide', !idTransaction); + // Init data transaction to dialog + this.initValueTransactionDialog(idTransaction); - if (idTransaction) { - // Init data transaction to dialog - this.initDataTransactionDialog(idTransaction); - } else + if (!idTransaction) 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); } }); }); diff --git a/javascript-practice/src/styles/_main.scss b/javascript-practice/src/styles/_main.scss index 4f52398..8e11aa0 100644 --- a/javascript-practice/src/styles/_main.scss +++ b/javascript-practice/src/styles/_main.scss @@ -15,7 +15,6 @@ // Layouts @import './layouts/header'; -@import './layouts/nav'; // Pages @import './pages/login-register'; diff --git a/javascript-practice/src/styles/layouts/_header.scss b/javascript-practice/src/styles/layouts/_header.scss index 70b786d..676a7a7 100644 --- a/javascript-practice/src/styles/layouts/_header.scss +++ b/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; + } + } + } +} diff --git a/javascript-practice/src/styles/layouts/_nav.scss b/javascript-practice/src/styles/layouts/_nav.scss deleted file mode 100644 index 70b786d..0000000 --- a/javascript-practice/src/styles/layouts/_nav.scss +++ /dev/null @@ -1 +0,0 @@ -// TODO diff --git a/javascript-practice/src/styles/pages/_index.scss b/javascript-practice/src/styles/pages/_index.scss index d335020..3e3b2f8 100644 --- a/javascript-practice/src/styles/pages/_index.scss +++ b/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 { - width: 208px; - } - - & .form__input-container:last-child .form__input-field { - width: 240px; + & .form__input-container { + width: 100%; } }