diff --git a/src/lib/ui.desktop.js b/src/lib/ui.desktop.js
index 306a707f..6c30dcbd 100644
--- a/src/lib/ui.desktop.js
+++ b/src/lib/ui.desktop.js
@@ -10,6 +10,32 @@ export function getOuterHeight(element) {
.reduce((prev, cur) => prev + cur);
}
+export function getNavSideBarOuterHeight(element) {
+ if (!element) {
+ return 0;
+ }
+
+ const contentEl = element.querySelectorAll('.v-navigation-drawer__content');
+
+ if (!contentEl || !contentEl[0]) {
+ return 0;
+ }
+
+ const children = contentEl[0].children;
+
+ if (!children || children.length < 1) {
+ return 0;
+ }
+
+ let totalHeight = 0;
+
+ for (let i = 0; i < children.length; i++) {
+ totalHeight += getOuterHeight(children[i]);
+ }
+
+ return totalHeight;
+}
+
export function getCssValue(element, name) {
if (!element) {
return 0;
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index b5e46012..42bad157 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -9,12 +9,12 @@
{ name: $t('Expense'), value: allCategoryTypes.Expense },
{ name: $t('Income'), value: allCategoryTypes.Income },
{ name: $t('Transfer'), value: allCategoryTypes.Transfer }
- ]" v-model="activeCategoryType" @update:modelValue="switchActiveCategoryType" />
+ ]" v-model="activeCategoryType" @update:modelValue="switchAllPrimaryCategories" />
-
+
{{ $t('Primary Categories') }}
@@ -191,7 +191,7 @@ import { mapStores } from 'pinia';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
import categoryConstants from '@/consts/category.js';
-import { getOuterHeight } from '@/lib/ui.desktop.js';
+import { getNavSideBarOuterHeight } from '@/lib/ui.desktop.js';
import {
mdiRefresh,
@@ -391,6 +391,8 @@ export default {
if (result && result.message) {
self.$refs.snackbar.showMessage(result.message);
}
+
+ self.updateCardMinHeight();
}).catch(error => {
if (error) {
self.$refs.snackbar.showError(error);
@@ -407,6 +409,8 @@ export default {
if (result && result.message) {
self.$refs.snackbar.showMessage(result.message);
}
+
+ self.updateCardMinHeight();
}).catch(error => {
if (error) {
self.$refs.snackbar.showError(error);
@@ -425,6 +429,8 @@ export default {
}).then(() => {
self.updating = false;
self.categoryHiding[category.id] = false;
+
+ self.updateCardMinHeight();
}).catch(error => {
self.updating = false;
self.categoryHiding[category.id] = false;
@@ -446,6 +452,8 @@ export default {
}).then(() => {
self.updating = false;
self.categoryRemoving[category.id] = false;
+
+ self.updateCardMinHeight();
}).catch(error => {
self.updating = false;
self.categoryRemoving[category.id] = false;
@@ -462,10 +470,6 @@ export default {
this.reload(false);
}
},
- switchActiveCategoryType() {
- this.primaryCategoryId = '0';
- this.updateCardMinHeight();
- },
isCategorySupportSwitch(category) {
if (!category || category.hidden) {
return false;
@@ -473,6 +477,10 @@ export default {
return !category.parentId || category.parentId === '' || category.parentId === '0';
},
+ switchAllPrimaryCategories() {
+ this.primaryCategoryId = '0';
+ this.updateCardMinHeight();
+ },
switchPrimaryCategory(category) {
if (!category || category.hidden) {
return;
@@ -481,17 +489,16 @@ export default {
if (!category.parentId || category.parentId === '' || category.parentId === '0') {
this.primaryCategoryId = category.id;
}
+
+ this.updateCardMinHeight();
},
updateCardMinHeight() {
const self = this
self.$nextTick(() => {
if (self.$refs.navbar && self.$refs.navbar.$el && self.$refs.navbar.$el.nextElementSibling) {
- let navbarHeight = getOuterHeight(self.$refs.navbar.$el.nextElementSibling);
-
- if (navbarHeight > self.cardMinHeight) {
- self.cardMinHeight = navbarHeight;
- }
+ let navbarHeight = getNavSideBarOuterHeight(self.$refs.navbar.$el.nextElementSibling);
+ self.cardMinHeight = Math.max(navbarHeight, 680);
}
});
}