code refactor

src/lib/transaction.js

@@ -14,6 +14,14 @@ import {
     getFirstAvaiableSubCategoryId
 } from './category.js';
 
+function getDisplayAmount(amount, currency, hideAmount, formatAmountWithCurrencyFunc) {
+    if (hideAmount) {
+        return formatAmountWithCurrencyFunc('***', currency);
+    }
+
+    return formatAmountWithCurrencyFunc(amount, currency);
+}
+
 export function setTransactionModelByTransaction(transaction, transaction2, allCategories, allCategoriesMap, allVisibleAccounts, allAccountsMap, defaultAccountId, options, setContextData, convertContextTime) {
     if ((!options.type || options.type === '0') && options.categoryId && options.categoryId !== '0' && allCategoriesMap[options.categoryId]) {
         const category = allCategoriesMap[options.categoryId];
@@ -148,3 +156,33 @@ export function setTransactionModelByTransaction(transaction, transaction2, allC
         }
     }
 }
+
+export function getTransactionDisplayAmount(transaction, allFilterAccountIdsCount, allFilterAccountIds, formatAmountWithCurrencyFunc) {
+    if (allFilterAccountIdsCount < 1) {
+        if (transaction.sourceAccount) {
+            return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount, formatAmountWithCurrencyFunc);
+        }
+    } else if (allFilterAccountIdsCount === 1) {
+        if (transaction.sourceAccount && (allFilterAccountIds[transaction.sourceAccount.id] || allFilterAccountIds[transaction.sourceAccount.parentId])) {
+            return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
+        } else if (transaction.destinationAccount && (allFilterAccountIds[transaction.destinationAccount.id] || allFilterAccountIds[transaction.destinationAccount.parentId])) {
+            return getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
+        }
+    } else { // allFilterAccountIdsCount > 1
+        if (transaction.sourceAccount && transaction.destinationAccount) {
+            if ((allFilterAccountIds[transaction.sourceAccount.id] || allFilterAccountIds[transaction.sourceAccount.parentId])
+                && !allFilterAccountIds[transaction.destinationAccount.id] && !allFilterAccountIds[transaction.destinationAccount.parentId]) {
+                return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
+            } else if ((allFilterAccountIds[transaction.destinationAccount.id] || allFilterAccountIds[transaction.destinationAccount.parentId])
+                && !allFilterAccountIds[transaction.sourceAccount.id] && !allFilterAccountIds[transaction.sourceAccount.parentId]) {
+                return getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
+            }
+        }
+    }
+
+    if (transaction.sourceAccount) {
+        return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount, formatAmountWithCurrencyFunc);
+    }
+
+    return '';
+}

src/views/desktop/transactions/ListPage.vue

@@ -133,6 +133,17 @@
                                                                 </div>
                                                             </v-list-item-title>
                                                         </v-list-item>
+                                                        <v-list-item key="multiple" value="multiple" class="text-sm" density="compact"
+                                                                     :class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }"
+                                                                     :append-icon="(query.categoryIds && queryAllFilterCategoryIdsCount > 1 ? icons.check : null)">
+                                                            <v-list-item-title class="cursor-pointer"
+                                                                               @click="showMultipleCategoriesDialog()">
+                                                                <div class="d-flex align-center">
+                                                                    <v-icon :icon="icons.multiple" />
+                                                                    <span class="text-sm ml-3">{{ $t('Multiple Categories') }}</span>
+                                                                </div>
+                                                            </v-list-item-title>
+                                                        </v-list-item>
 
                                                         <template :key="categoryType"
                                                                   v-for="(categories, categoryType) in allPrimaryCategories">
@@ -160,7 +171,7 @@
                                                                 <v-divider />
                                                                 <v-list-item class="text-sm" density="compact"
                                                                              :value="category.id"
-                                                                             :append-icon="(query.categoryIds === category.id ? icons.check : null)">
+                                                                             :append-icon="(queryAllFilterCategoryIds[category.id] ? icons.check : null)">
                                                                     <v-list-item-title class="cursor-pointer"
                                                                                        @click="changeCategoryFilter(category.id)">
                                                                         <div class="d-flex align-center">
@@ -175,8 +186,8 @@
                                                                     <v-divider v-if="!subCategory.hidden" />
                                                                     <v-list-item class="text-sm" density="compact"
                                                                                  :value="subCategory.id"
-                                                                                 :class="{ 'list-item-selected': query.categoryIds === subCategory.id }"
+                                                                                 :class="{ 'list-item-selected': queryAllFilterCategoryIds[subCategory.id] }"
-                                                                                 :append-icon="(query.categoryIds === subCategory.id ? icons.check : null)"
+                                                                                 :append-icon="(queryAllFilterCategoryIds[subCategory.id] ? icons.check : null)"
                                                                                  v-if="!subCategory.hidden">
                                                                         <v-list-item-title class="cursor-pointer"
                                                                                            @click="changeCategoryFilter(subCategory.id)">
@@ -265,13 +276,24 @@
                                                                 </div>
                                                             </v-list-item-title>
                                                         </v-list-item>
+                                                        <v-list-item key="multiple" value="multiple" class="text-sm" density="compact"
+                                                                     :class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }"
+                                                                     :append-icon="(query.accountIds && queryAllFilterAccountIdsCount > 1 ? icons.check : null)">
+                                                            <v-list-item-title class="cursor-pointer"
+                                                                               @click="showMultipleAccountsDialog()">
+                                                                <div class="d-flex align-center">
+                                                                    <v-icon :icon="icons.multiple" />
+                                                                    <span class="text-sm ml-3">{{ $t('Multiple Accounts') }}</span>
+                                                                </div>
+                                                            </v-list-item-title>
+                                                        </v-list-item>
                                                         <template :key="account.id"
                                                                   v-for="account in allAccounts">
                                                             <v-divider v-if="!account.hidden" />
                                                             <v-list-item class="text-sm" density="compact"
                                                                          :value="account.id"
-                                                                         :class="{ 'list-item-selected': query.accountIds === account.id }"
+                                                                         :class="{ 'list-item-selected': queryAllFilterAccountIds[account.id] }"
-                                                                         :append-icon="(query.accountIds === account.id ? icons.check : null)"
+                                                                         :append-icon="(queryAllFilterAccountIds[account.id] ? icons.check : null)"
                                                                          v-if="!account.hidden">
                                                                 <v-list-item-title class="cursor-pointer"
                                                                                    @click="changeAccountFilter(account.id)">
@@ -347,9 +369,7 @@
                                                 </td>
                                                 <td class="transaction-table-column-amount" :class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
                                                     <div v-if="transaction.sourceAccount">
-                                                        <span v-if="!query.accountIds || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountIds || transaction.sourceAccount.parentId === query.accountIds))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
+                                                        <span>{{ getTransactionDisplayAmount(transaction) }}</span>
-                                                        <span v-else-if="query.accountIds && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountIds || transaction.destinationAccount.parentId === query.accountIds)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
-                                                        <span v-else></span>
                                                     </div>
                                                 </td>
                                                 <td class="transaction-table-column-account">
@@ -431,12 +451,14 @@ import {
     transactionTypeToCategoryType
 } from '@/lib/category.js';
 import { getUnifiedSelectedAccountsCurrencyOrDefaultCurrency } from '@/lib/account.js';
+import { getTransactionDisplayAmount } from '@/lib/transaction.js';
 import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
 
 import {
     mdiMagnify,
     mdiCheck,
-    mdiTextBoxCheckOutline,
+    mdiViewGridOutline,
+    mdiVectorArrangeBelow,
     mdiRefresh,
     mdiMenu,
     mdiMenuDown,
@@ -485,7 +507,8 @@ export default {
             icons: {
                 search: mdiMagnify,
                 check: mdiCheck,
-                all: mdiTextBoxCheckOutline,
+                all: mdiViewGridOutline,
+                multiple: mdiVectorArrangeBelow,
                 refresh: mdiRefresh,
                 menu: mdiMenu,
                 dropdownMenu: mdiMenuDown,
@@ -502,11 +525,7 @@ export default {
             return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
         },
         canAddTransaction() {
-            if (this.queryAllFilterCategoryIdsCount > 1 || this.queryAllFilterAccountIdsCount > 1) {
+            if (this.query.accountIds && this.queryAllFilterAccountIdsCount === 1) {
-                return false;
-            }
-
-            if (this.query.accountIds) {
                 const account = this.allAccounts[this.query.accountIds];
 
                 if (account && account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
@@ -1040,14 +1059,20 @@ export default {
             this.currentPageTransactions = [];
             this.transactionsStore.clearTransactions();
             this.$router.push(this.getFilterLinkUrl());
+        },
+        showMultipleCategoriesDialog() {
+
+        },
+        showMultipleAccountsDialog() {
+
         },
         add() {
             const self = this;
 
             self.$refs.editDialog.open({
                 type: self.query.type,
-                categoryId: self.query.categoryIds,
+                categoryId: self.queryAllFilterCategoryIdsCount === 1 ? self.query.categoryIds : '',
-                accountId: self.query.accountIds
+                accountId: self.queryAllFilterAccountIdsCount === 1 ? self.query.accountIds : ''
             }).then(result => {
                 if (result && result.message) {
                     self.$refs.snackbar.showMessage(result.message);
@@ -1134,13 +1159,6 @@ export default {
         getDisplayTimezone(transaction) {
             return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
         },
-        getDisplayAmount(amount, currency, hideAmount) {
-            if (hideAmount) {
-                return this.getDisplayCurrency('***', currency);
-            }
-
-            return this.getDisplayCurrency(amount, currency);
-        },
         getDisplayMonthTotalAmount(amount, currency, symbol, incomplete) {
             const displayAmount = this.getDisplayCurrency(amount, currency);
             return symbol + displayAmount + (incomplete ? '+' : '');
@@ -1172,6 +1190,9 @@ export default {
         getTransactionTypeFromCategoryType(categoryType) {
             return categoryTypeToTransactionType(parseInt(categoryType));
         },
+        getTransactionDisplayAmount(transaction) {
+            return getTransactionDisplayAmount(transaction, this.queryAllFilterAccountIdsCount, this.queryAllFilterAccountIds, this.getDisplayCurrency);
+        },
         getCategoryListItemCheckedClass(category, queryCategoryIds) {
             if (queryCategoryIds && queryCategoryIds[category.id]) {
                 return {

src/views/mobile/transactions/ListPage.vue

@@ -11,7 +11,7 @@
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title :title="$t('Transaction List')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
-                <f7-link icon-f7="plus" :class="{ 'disabled': !canAddTransaction }" :href="`/transaction/add?type=${query.type}&categoryId=${query.categoryIds}&accountId=${query.accountIds}`"></f7-link>
+                <f7-link icon-f7="plus" :class="{ 'disabled': !canAddTransaction }" :href="`/transaction/add?type=${query.type}&categoryId=${queryAllFilterCategoryIdsCount === 1 ? query.categoryIds : ''}&accountId=${queryAllFilterAccountIdsCount === 1 ? query.accountIds : ''}`"></f7-link>
             </f7-nav-right>
 
             <f7-subnavbar :inner="false">
@@ -200,9 +200,7 @@
                                             <div class="item-after">
                                                 <div class="transaction-amount" v-if="transaction.sourceAccount"
                                                      :class="{ 'text-color-teal': transaction.type === allTransactionTypes.Expense, 'text-color-red': transaction.type === allTransactionTypes.Income }">
-                                                    <span v-if="!query.accountIds || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountIds || transaction.sourceAccount.parentId === query.accountIds))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
+                                                    <span>{{ getTransactionDisplayAmount(transaction) }}</span>
-                                                    <span v-else-if="query.accountIds && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountIds || transaction.destinationAccount.parentId === query.accountIds)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
-                                                    <span v-else></span>
                                                 </div>
                                             </div>
                                         </div>
@@ -286,12 +284,20 @@
             <f7-list dividers accordion-list>
                 <f7-list-item :class="{ 'list-item-selected': !query.categoryIds }" :title="$t('All')" @click="changeCategoryFilter('')">
                     <template #media>
-                        <f7-icon f7="rectangle_badge_checkmark"></f7-icon>
+                        <f7-icon f7="rectangle_grid_2x2"></f7-icon>
                     </template>
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.categoryIds"></f7-icon>
                     </template>
                 </f7-list-item>
+                <f7-list-item :class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }" :title="$t('Multiple Categories')" @click="showMultipleCategoriesPopup()">
+                    <template #media>
+                        <f7-icon f7="rectangle_on_rectangle"></f7-icon>
+                    </template>
+                    <template #after>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds && queryAllFilterCategoryIdsCount > 1"></f7-icon>
+                    </template>
+                </f7-list-item>
             </f7-list>
             <f7-list dividers accordion-list
                      class="no-margin-vertical"
@@ -311,16 +317,16 @@
                     </template>
                     <f7-accordion-content>
                         <f7-list dividers class="padding-left">
-                            <f7-list-item :class="{ 'list-item-selected': query.categoryIds === category.id }" :title="$t('All')" @click="changeCategoryFilter(category.id)">
+                            <f7-list-item :class="{ 'list-item-selected': queryAllFilterCategoryIds[category.id] }" :title="$t('All')" @click="changeCategoryFilter(category.id)">
                                 <template #media>
-                                    <f7-icon f7="rectangle_badge_checkmark"></f7-icon>
+                                    <f7-icon f7="rectangle_grid_2x2"></f7-icon>
                                 </template>
                                 <template #after>
-                                    <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds === category.id"></f7-icon>
+                                    <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="queryAllFilterCategoryIds[category.id]"></f7-icon>
                                 </template>
                             </f7-list-item>
                             <f7-list-item :title="subCategory.name"
-                                          :class="{ 'list-item-selected': query.categoryIds === subCategory.id }"
+                                          :class="{ 'list-item-selected': queryAllFilterCategoryIds[subCategory.id] }"
                                           :key="subCategory.id"
                                           v-for="subCategory in category.subCategories"
                                           v-show="!subCategory.hidden"
@@ -332,7 +338,7 @@
                                 <template #after>
                                     <f7-icon class="list-item-checked-icon"
                                              f7="checkmark_alt"
-                                             v-if="query.categoryIds === subCategory.id">
+                                             v-if="queryAllFilterCategoryIds[subCategory.id]">
                                     </f7-icon>
                                 </template>
                             </f7-list-item>
@@ -348,14 +354,22 @@
             <f7-list dividers>
                 <f7-list-item :class="{ 'list-item-selected': !query.accountIds }" :title="$t('All')" @click="changeAccountFilter('')">
                     <template #media>
-                        <f7-icon f7="rectangle_badge_checkmark"></f7-icon>
+                        <f7-icon f7="rectangle_grid_2x2"></f7-icon>
                     </template>
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.accountIds"></f7-icon>
                     </template>
                 </f7-list-item>
+                <f7-list-item :class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }" :title="$t('Multiple Accounts')" @click="showMultipleAccountsPopup()">
+                    <template #media>
+                        <f7-icon f7="rectangle_on_rectangle"></f7-icon>
+                    </template>
+                    <template #after>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.accountIds && queryAllFilterAccountIdsCount > 1"></f7-icon>
+                    </template>
+                </f7-list-item>
                 <f7-list-item :title="account.name"
-                              :class="{ 'list-item-selected': query.accountIds === account.id }"
+                              :class="{ 'list-item-selected': queryAllFilterAccountIds[account.id] }"
                               :key="account.id"
                               v-for="account in allAccounts"
                               v-show="!account.hidden"
@@ -367,7 +381,7 @@
                     <template #after>
                         <f7-icon class="list-item-checked-icon"
                                  f7="checkmark_alt"
-                                 v-if="query.accountIds === account.id">
+                                 v-if="queryAllFilterAccountIds[account.id]">
                         </f7-icon>
                     </template>
                 </f7-list-item>
@@ -461,6 +475,7 @@ import {
 } from '@/lib/datetime.js';
 import { categoryTypeToTransactionType, transactionTypeToCategoryType } from '@/lib/category.js';
 import { getUnifiedSelectedAccountsCurrencyOrDefaultCurrency } from '@/lib/account.js';
+import { getTransactionDisplayAmount } from '@/lib/transaction.js';
 import { onSwipeoutDeleted, scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -490,11 +505,7 @@ export default {
             return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
         },
         canAddTransaction() {
-            if (this.queryAllFilterCategoryIdsCount > 1 || this.queryAllFilterAccountIdsCount > 1) {
+            if (this.query.accountIds && this.queryAllFilterAccountIdsCount === 1) {
-                return false;
-            }
-
-            if (this.query.accountIds) {
                 const account = this.allAccounts[this.query.accountIds];
 
                 if (account && account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
@@ -868,6 +879,12 @@ export default {
             });
 
             this.reload(null);
+        },
+        showMultipleCategoriesPopup() {
+
+        },
+        showMultipleAccountsPopup() {
+
         },
         duplicate(transaction) {
             this.f7router.navigate(`/transaction/add?id=${transaction.id}&type=${transaction.type}`);
@@ -936,13 +953,6 @@ export default {
         getDisplayTimezone(transaction) {
             return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
         },
-        getDisplayAmount(amount, currency, hideAmount) {
-            if (hideAmount) {
-                return this.getDisplayCurrency('***', currency);
-            }
-
-            return this.getDisplayCurrency(amount, currency);
-        },
         getDisplayMonthTotalAmount(amount, currency, symbol, incomplete) {
             const displayAmount = this.getDisplayCurrency(amount, currency);
             return symbol + displayAmount + (incomplete ? '+' : '');
@@ -970,6 +980,9 @@ export default {
         getTransactionTypeFromCategoryType(categoryType) {
             return categoryTypeToTransactionType(parseInt(categoryType));
         },
+        getTransactionDisplayAmount(transaction) {
+            return getTransactionDisplayAmount(transaction, this.queryAllFilterAccountIdsCount, this.queryAllFilterAccountIds, this.getDisplayCurrency);
+        },
         getTransactionDomId(transaction) {
             return 'transaction_' + transaction.id;
         },