From ba58886c367d68e0f9c5c6314e3eeed3d90104f6 Mon Sep 17 00:00:00 2001
From: Cioraneanu Mihai <cioraneanumihai@gmail.com>
Date: Fri, 20 Sep 2024 09:18:03 +0300
Subject: [PATCH] - added transaction search by budget

---
 .../components/transaction/transaction-filters.vue  | 13 ++++++++++++-
 front/pages/budgets/[[id]].vue                      |  2 +-
 front/pages/transactions/list.vue                   | 13 +++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/front/components/transaction/transaction-filters.vue b/front/components/transaction/transaction-filters.vue
index 554b6cc..ff2b554 100644
--- a/front/components/transaction/transaction-filters.vue
+++ b/front/components/transaction/transaction-filters.vue
@@ -29,6 +29,15 @@
             <tag-select v-model="tag" :disabled="!!withoutTag" class="flex-1" :is-multi-select="false" :auto-select-parents="false" />
           </div>
 
+          <div class="display-flex van-cell-fake pl-3 align-items-baseline">
+            <div class="display-flex flex-column gap-3 align-items-center">
+              <div class="text-size-14">Without</div>
+              <app-checkbox v-model="withoutBudget" shape="square" />
+            </div>
+
+            <budget-select v-model="budget" :disabled="!!withoutBudget" class="flex-1" :is-multi-select="false" :auto-select-parents="false" />
+          </div>
+
           <account-select v-model="account" />
 
           <div class="flex-center-vertical">
@@ -69,7 +78,7 @@ import { addMonths, endOfMonth, startOfMonth } from 'date-fns'
 const modelValue = defineModel({})
 
 const localModelValue = ref({})
-const { description, dateStart, dateEnd, amountStart, amountEnd, category, withoutCategory, tag, withoutTag, account, transactionType } = generateChildren(localModelValue, [
+const { description, dateStart, dateEnd, amountStart, amountEnd, category, withoutCategory, tag, withoutTag, account, transactionType, withoutBudget, budget } = generateChildren(localModelValue, [
   'description',
   'dateStart',
   'dateEnd',
@@ -79,6 +88,8 @@ const { description, dateStart, dateEnd, amountStart, amountEnd, category, witho
   'withoutCategory',
   'withoutTag',
   'tag',
+  'withoutBudget',
+  'budget',
   'account',
   'transactionType',
 ])
diff --git a/front/pages/budgets/[[id]].vue b/front/pages/budgets/[[id]].vue
index 687ac12..c3bcaea 100644
--- a/front/pages/budgets/[[id]].vue
+++ b/front/pages/budgets/[[id]].vue
@@ -15,7 +15,7 @@
           <div>Percent: {{ budgetLimitPercent }}</div>
           <div>Interval: {{ budgetLimitInterval }}</div>
         </div>
-        <app-field-link label="Show transactions" :icon="TablerIconConstants.transaction" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTION_FIELDS_ORDER)" />
+        <app-field-link label="Show transactions" :icon="TablerIconConstants.transaction" @click="navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?budget_id=${itemId}`)" />
 
       </app-card-info>
 
diff --git a/front/pages/transactions/list.vue b/front/pages/transactions/list.vue
index 9ab3b89..b4adad7 100644
--- a/front/pages/transactions/list.vue
+++ b/front/pages/transactions/list.vue
@@ -57,6 +57,7 @@ import Category from '~/models/Category.js'
 import { get, isEqual } from 'lodash'
 import anime from 'animejs'
 import { animateSwipeList } from '~/utils/AnimationUtils.js'
+import Budget from '~/models/Budget.js'
 
 const dataStore = useDataStore()
 const route = useRoute()
@@ -138,6 +139,16 @@ let filtersDictionary = computed(() => {
       filter: `has_any_category:false"`,
       active: !!_filter.withoutCategory,
     },
+    {
+      display: `Budget: ${Budget.getDisplayName(_filter.budget)}`,
+      filter: `budget_is:"${Budget.getDisplayName(_filter.budget)}"`,
+      active: !!_filter.budget,
+    },
+    {
+      display: `No budget`,
+      filter: `has_any_budget:false"`,
+      active: !!_filter.withoutBudget,
+    },
     {
       display: `Account: ${Account.getDisplayName(_filter.account)}`,
       filter: `account_is:"${Account.getDisplayName(_filter.account)}"`,
@@ -205,6 +216,7 @@ onMounted(() => {
     excludedTag: dataStore.tagDictionaryById[get(route.query, 'excluded_tag_id')],
     transactionType: Object.values(Transaction.types).find((item) => item.code === get(route.query, 'type')),
     category: dataStore.categoryDictionary[get(route.query, 'category_id')],
+    budget: dataStore.budgetDictionary[get(route.query, 'budget_id')],
     excludedCategory: dataStore.categoryDictionary[get(route.query, 'excluded_category_id')],
     account: dataStore.accountDictionary[get(route.query, 'account_id')],
     excludedAccount: dataStore.accountDictionary[get(route.query, 'excluded_account_id')],
@@ -214,6 +226,7 @@ onMounted(() => {
     amountStart: get(route.query, 'amount_start'),
     amountEnd: get(route.query, 'amount_end'),
     withoutTag: get(route.query, 'without_tag'),
+    withoutBudget: get(route.query, 'without_budget'),
     withoutCategory: get(route.query, 'without_category'),
   }
   filters.value = urlFilters