- added new settings page for predefined transactions-list filters

front/constants/RouteConstants.js

@@ -16,7 +16,8 @@ export default {
   ROUTE_SETTINGS_DASHBOARD_CARDS_ORDER: '/settings/dashboard/cards',
   ROUTE_SETTINGS_TRANSACTION: '/settings/transactions',
   ROUTE_SETTINGS_TRANSACTION_FIELDS_ORDER: '/settings/transactions/fields',
-  ROUTE_SETTINGS_TRANSACTION_DEFAULT_VALUES: '/settings/transactions/defaults',
+  ROUTE_SETTINGS_TRANSACTION_DEFAULT_FORM_VALUES: '/settings/transactions/default-form-values',
+  ROUTE_SETTINGS_TRANSACTION_DEFAULT_LIST_FILTERS: '/settings/transactions/default-list-filters',
   ROUTE_SETTINGS_TRANSACTION_QUICK_AMOUNTS: '/settings/transactions/quick-amounts',
   ROUTE_SETTINGS_ABOUT: '/settings/about',
 

front/pages/settings/transactions/default-list-filters.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="app-form">
+    <app-top-toolbar />
+
+    <van-form @submit="onSave" class="">
+      <van-cell-group inset>
+        <div class="text-muted text-size-12 font-400 p-3">
+          It is recommended to use these filters only if you have a large amount of transactions which results in a slow list load.
+          <br>
+          Ex. Show only transactions after the start of the current year.
+        </div>
+        <account-select v-model="account" label="Source account" />
+        <div class="flex-center-vertical">
+          <app-date class="flex-1" v-model="dateStart" label="Date after" />
+          <app-date class="flex-1" v-model="dateEnd" label="Date before" />
+        </div>
+      </van-cell-group>
+
+      <app-button-form-save />
+    </van-form>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useProfileStore } from '~/stores/profileStore'
+import { useDataStore } from '~/stores/dataStore'
+import UIUtils from '~/utils/UIUtils'
+import { useToolbar } from '~/composables/useToolbar'
+import RouteConstants from '~/constants/RouteConstants'
+import { saveSettingsToStore, watchSettingsStore } from '~/utils/SettingUtils.js'
+
+const profileStore = useProfileStore()
+const dataStore = useDataStore()
+
+const account = ref(null)
+const dateStart = ref([])
+const dateEnd = ref([])
+
+const syncedSettings = [
+  { store: profileStore, path: 'transactionListDefaultFilterAccount', ref: account },
+  { store: profileStore, path: 'transactionListDefaultFilterDateStart', ref: dateStart },
+  { store: profileStore, path: 'transactionListDefaultFilterDateEnd', ref: dateEnd },
+]
+
+watchSettingsStore(syncedSettings)
+
+const onSave = async () => {
+  saveSettingsToStore(syncedSettings)
+  await profileStore.writeProfile()
+  UIUtils.showToastSuccess('User preferences saved')
+}
+
+const toolbar = useToolbar()
+toolbar.init({
+  title: 'Transaction list default filters',
+  backRoute: RouteConstants.ROUTE_SETTINGS_TRANSACTION,
+})
+
+onMounted(() => {
+  animateSettings()
+})
+</script>

front/pages/settings/transactions/index.vue

@@ -5,7 +5,8 @@
     <van-form @submit="onSave" class="">
       <van-cell-group inset>
 <!--        <div class="van-cell-group-title mb-0">Config:</div>-->
-        <app-field-link label="Default form values" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_DEFAULT_VALUES)" />
+        <app-field-link label="Default form values" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_DEFAULT_FORM_VALUES)" />
+        <app-field-link label="Default list filters" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_DEFAULT_LIST_FILTERS)" />
         <app-field-link label="Amount increment buttons" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_QUICK_AMOUNTS)" />
         <app-field-link label="Transaction fields order" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_FIELDS_ORDER)" />
       </van-cell-group>

front/pages/transactions/[[id]].vue

@@ -43,7 +43,7 @@
           <template #label>
             <div class="flex-center-vertical gap-1">
               <div class="flex-1">Source account</div>
-              <van-button v-if="showSourceAccountSuggestion" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_DEFAULT_VALUES)" size="mini" class="suggestion-button"
+              <van-button v-if="showSourceAccountSuggestion" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_DEFAULT_FORM_VALUES)" size="mini" class="suggestion-button"
                 >Set your default
               </van-button>
             </div>

front/pages/transactions/list.vue

@@ -54,7 +54,7 @@ import TransactionRepository from '~/repository/TransactionRepository'
 import Tag from '~/models/Tag.js'
 import Account from '~/models/Account.js'
 import Category from '~/models/Category.js'
-import { get, isEqual } from 'lodash'
+import { cloneDeep, get, isEqual } from 'lodash'
 import anime from 'animejs'
 import { animateSwipeList } from '~/utils/AnimationUtils.js'
 import Budget from '~/models/Budget.js'
@@ -129,6 +129,10 @@ toolbar.init({
 
 onMounted(() => {
   filters.value = TransactionFilterUtils.getFiltersFromURL()
+
+  if (!TransactionFilterUtils.filterHasValues(filters.value)) {
+    filters.value = TransactionFilterUtils.getPredefinedFilters()
+  }
 })
 
 animateSwipeList(list)

front/stores/profileStore.js

@@ -33,6 +33,10 @@ export const useProfileStore = defineStore('profile', {
       defaultTags: useLocalStorage('defaultTags', [], { serializer: StorageSerializers.object }),
       autoAddedTags: useLocalStorage('autoAddedTags', [], { serializer: StorageSerializers.object }),
 
+      transactionListDefaultFilterAccount: useLocalStorage('transactionListDefaultFilterAccount', null, { serializer: StorageSerializers.object }),
+      transactionListDefaultFilterDateStart: useLocalStorage('transactionListDefaultFilterDateStart', null),
+      transactionListDefaultFilterDateEnd: useLocalStorage('transactionListDefaultFilterDateEnd', null),
+
       quickValueButtons: useLocalStorage('quickValueButtons', ['-10', '-1', '+1', '+10']),
       transactionOrderedFieldsList: useLocalStorage('transactionOrderedFieldsList', FORM_CONSTANTS_TRANSACTION_FIELDS_LIST),
       dashboardOrderedCardsList: useLocalStorage('dashboardOrderedCardsList', DASHBOARD_SECTIONS_LIST),
@@ -115,6 +119,6 @@ export const useProfileStore = defineStore('profile', {
       if (profileStore.dashboardOrderedCardsList.length !== DASHBOARD_SECTIONS_LIST.length) {
         profileStore.dashboardOrderedCardsList = DASHBOARD_SECTIONS_LIST
       }
-    }
+    },
   },
 })

front/utils/TransactionFilterUtils.js

@@ -4,6 +4,7 @@ import Tag from '~/models/Tag.js'
 import Category from '~/models/Category.js'
 import Budget from '~/models/Budget.js'
 import Account from '~/models/Account.js'
+import { useProfileStore } from '~/stores/profileStore.js'
 
 export default {
   filters: {
@@ -107,19 +108,17 @@ export default {
       filterName: 'date_after',
       bagKey: 'dateStart',
       displayValue: (item) => DateUtils.dateToUI(item),
-      filterValue: (item) => DateUtils.dateToString(item)
+      filterValue: (item) => DateUtils.dateToString(item),
     },
     dateBefore: {
       displayName: 'Date <',
       filterName: 'date_before',
       bagKey: 'dateEnd',
       displayValue: (item) => DateUtils.dateToUI(item),
-      filterValue: (item) => DateUtils.dateToString(item)
+      filterValue: (item) => DateUtils.dateToString(item),
     },
   },
 
-
-
   getFiltersFromURL() {
     let dataStore = useDataStore()
     const route = useRoute()
@@ -146,28 +145,41 @@ export default {
     }
   },
 
+  getPredefinedFilters() {
+    let profileStore = useProfileStore()
+
+    return {
+      account: profileStore.transactionListDefaultFilterAccount,
+      dateStart: profileStore.transactionListDefaultFilterDateStart,
+      dateEnd: profileStore.transactionListDefaultFilterDateEnd,
+    }
+  },
+
+  filterHasValues(filterBag) {
+    return Object.values(filterBag).some((item) => !!item)
+  },
 
   getActiveFilters(filterBag) {
     return Object.values(this.filters)
-    .map((item) => {
-      let value = get(filterBag, item.bagKey)
-      if (!value) {
-        return null
-      }
-      let displayValue = item.displayValue ? (isArray(value) ? value.map((singleValue) => item.displayValue(singleValue)) : item.displayValue(value)) : value
-      let filterValue = item.filterValue ? (isArray(value) ? value.map((singleValue) => item.filterValue(singleValue)) : item.filterValue(value)) : value
+      .map((item) => {
+        let value = get(filterBag, item.bagKey)
+        if (!value) {
+          return null
+        }
+        let displayValue = item.displayValue ? (isArray(value) ? value.map((singleValue) => item.displayValue(singleValue)) : item.displayValue(value)) : value
+        let filterValue = item.filterValue ? (isArray(value) ? value.map((singleValue) => item.filterValue(singleValue)) : item.filterValue(value)) : value
 
-      return {
-        ...item,
-        displayValue,
-        filterValue,
-      }
-    })
-    .filter((item) => !!item?.filterValue)
-    .map((item) => ({
-      display: `${item.displayName}: ${item.displayValue}`,
-      filter: `${item.filterName}:${item.filterValue}`,
-    }))
+        return {
+          ...item,
+          displayValue,
+          filterValue,
+        }
+      })
+      .filter((item) => !!item?.filterValue)
+      .map((item) => ({
+        display: `${item.displayName}: ${item.displayValue}`,
+        filter: `${item.filterName}:${item.filterValue}`,
+      }))
   },
 
   getFilterValueFromDictionary(value, dictionary) {