feat: add year toggle to expenses and income as well

simonwep · Oct 20, 2024 · ecec48e · ecec48e
1 parent a0649a5
commit ecec48e
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 55 deletions.
diff --git a/src/app/pages/dashboard/Dashboard.vue b/src/app/pages/dashboard/Dashboard.vue
@@ -8,15 +8,7 @@
         </span>
       </template>
       <template v-else>
-        <template v-if="state.years.length > 1">
-          <Button :icon="RiArrowLeftSLine" rounded @click="rotateYear(-1)" />
-          <Button :icon="RiArrowRightSLine" rounded @click="rotateYear(1)" />
-        </template>
-        <i18n-t tag="span" keypath="page.dashboard.header" scope="global">
-          <template #year>
-            <TextWheel :values="allYears" :value="state.activeYear" />
-          </template>
-        </i18n-t>
+        <YearToggle key-path="page.dashboard.budgetFor" />
       </template>
     </template>
     <template #header>
@@ -53,18 +45,11 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  RiArrowLeftSLine,
-  RiArrowRightSLine,
-  RiCalendar2Line,
-  RiDashboardLine,
-  RiEarthLine,
-  RiTableLine
-} from '@remixicon/vue';
-import { computed, shallowRef } from 'vue';
+import { RiCalendar2Line, RiDashboardLine, RiEarthLine, RiTableLine } from '@remixicon/vue';
+import { shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
+import YearToggle from '@app/pages/shared/YearToggle.vue';
 import Button from '@components/base/button/Button.vue';
-import TextWheel from '@components/base/text-wheel/TextWheel.vue';
 import ComponentTransition from '@components/misc/component-transition/ComponentTransition.vue';
 import { useDataStore } from '@store/state';
 import Pane from '../shared/Pane.vue';
@@ -74,18 +59,8 @@ import Summary from './summary/Summary.vue';
 import type { Component } from 'vue';
 
 const { t } = useI18n();
-const { state, changeYear } = useDataStore();
+const { state } = useDataStore();
 const view = shallowRef<Component>(Overview);
-
-const allYears = computed(() => state.years.map((v) => v.year));
-
-const rotateYear = (dir: -1 | 1) => {
-  const possibleYears = allYears.value;
-  const currentIndex = possibleYears.indexOf(state.activeYear);
-  const newIndex = (currentIndex + dir + possibleYears.length) % possibleYears.length;
-  const newYear = possibleYears[newIndex];
-  changeYear(newYear);
-};
 </script>
 
 <style lang="scss" module>

diff --git a/src/app/pages/expenses/Expenses.vue b/src/app/pages/expenses/Expenses.vue
@@ -1,10 +1,12 @@
 <template>
-  <BudgetPane :title="t('page.expenses.title')" type="expenses" />
+  <BudgetPane type="expenses">
+    <template #title>
+      <YearToggle key-path="page.expenses.expensesFor" />
+    </template>
+  </BudgetPane>
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
+import YearToggle from '@app/pages/shared/YearToggle.vue';
 import BudgetPane from '../shared/BudgetPane.vue';
-
-const { t } = useI18n();
 </script>
diff --git a/src/app/pages/income/Income.vue b/src/app/pages/income/Income.vue
@@ -1,10 +1,12 @@
 <template>
-  <BudgetPane :title="t('page.income.title')" type="income" />
+  <BudgetPane type="income">
+    <template #title>
+      <YearToggle key-path="page.income.incomeFor" />
+    </template>
+  </BudgetPane>
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
+import YearToggle from '@app/pages/shared/YearToggle.vue';
 import BudgetPane from '../shared/BudgetPane.vue';
-
-const { t } = useI18n();
 </script>
diff --git a/src/app/pages/shared/BudgetPane.vue b/src/app/pages/shared/BudgetPane.vue
@@ -1,5 +1,8 @@
 <template>
   <Pane :amount="amount" :title="title">
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
     <template #header>
       <MiniChart :class="$style.miniChart" :values="total" />
     </template>
@@ -16,7 +19,7 @@ import Pane from './Pane.vue';
 import MiniChart from './mini-chart/MiniChart.vue';
 
 const props = defineProps<{
-  title: string;
+  title?: string;
   type: 'expenses' | 'income';
 }>();
 

diff --git a/src/app/pages/shared/YearToggle.vue b/src/app/pages/shared/YearToggle.vue
@@ -0,0 +1,35 @@
+<template>
+  <template v-if="state.years.length > 1">
+    <Button :icon="RiArrowLeftSLine" rounded @click="rotateYear(-1)" />
+    <Button :icon="RiArrowRightSLine" rounded @click="rotateYear(1)" />
+  </template>
+  <i18n-t tag="span" :keypath="keyPath" scope="global">
+    <template #year>
+      <TextWheel :values="allYears" :value="state.activeYear" />
+    </template>
+  </i18n-t>
+</template>
+
+<script lang="ts" setup>
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/vue';
+import { computed } from 'vue';
+import Button from '@components/base/button/Button.vue';
+import TextWheel from '@components/base/text-wheel/TextWheel.vue';
+import { useDataStore } from '@store/state';
+
+defineProps<{
+  keyPath: string;
+}>();
+
+const { state, changeYear } = useDataStore();
+
+const allYears = computed(() => state.years.map((v) => v.year));
+
+const rotateYear = (dir: -1 | 1) => {
+  const possibleYears = allYears.value;
+  const currentIndex = possibleYears.indexOf(state.activeYear);
+  const newIndex = (currentIndex + dir + possibleYears.length) % possibleYears.length;
+  const newYear = possibleYears[newIndex];
+  changeYear(newYear);
+};
+</script>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -100,10 +100,12 @@
   },
   "page": {
     "income": {
-      "title": "Einnahmen"
+      "title": "Einnahmen",
+      "incomeFor": "Einnahmen für {year}"
     },
     "expenses": {
-      "title": "Ausgaben"
+      "title": "Ausgaben",
+      "expensesFor": "Ausgaben für {year}"
     },
     "dashboard": {
       "title": "Dashboard",
@@ -115,7 +117,7 @@
       "allTime": "Allzeit Übersicht",
       "allTimeFromTo": "Allzeit Übersicht von {from} bis {to}",
       "endingBalance": "Endsaldo",
-      "header": "Jährliches Budget für {year}",
+      "budgetFor": "Jährliches Budget für {year}",
       "remainingBalance": "Verbleibendes Netto bis {year}",
       "netSavings": "Nettoersparnisse",
       "yearInThePast": "Jahr liegt in der Vergangenheit",

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -100,10 +100,12 @@
   },
   "page": {
     "income": {
-      "title": "Income"
+      "title": "Income",
+      "incomeFor": "Income for {year}"
     },
     "expenses": {
-      "title": "Expenses"
+      "title": "Expenses",
+      "expensesFor": "Expenses for {year}"
     },
     "dashboard": {
       "title": "Dashboard",
@@ -115,7 +117,7 @@
       "expenses": "Expenses",
       "expensesTrend": "Expenses Trend",
       "endingBalance": "Ending Balance",
-      "header": "Annual budget for {year}",
+      "budgetFor": "Annual budget for {year}",
       "remainingBalance": "Remaining Balance until {year}",
       "netSavings": "Net Savings",
       "yearInThePast": "Year is in the past",

diff --git a/src/i18n/locales/pt-br.json b/src/i18n/locales/pt-br.json
@@ -100,10 +100,12 @@
   },
   "page": {
     "income": {
-      "title": "Receita"
+      "title": "Receita",
+      "incomeFor": "Receita para {year}"
     },
     "expenses": {
-      "title": "Despesas"
+      "title": "Despesas",
+      "expensesFor": "Despesas para {year}"
     },
     "dashboard": {
       "title": "Painel",
@@ -115,7 +117,7 @@
       "expenses": "Despesas",
       "expensesTrend": "Tendência de Despesas",
       "endingBalance": "Balanço Final",
-      "header": "Orçamento anual para {year}",
+      "budgetFor": "Orçamento anual para {year}",
       "remainingBalance": "Balanço restante para {year}",
       "netSavings": "Receita líquida",
       "yearInThePast": "Ano anterior",

diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
@@ -99,6 +99,14 @@
     "totals" : "Toplamlar"
   },
   "page" : {
+    "income" : {
+      "title" : "Gelir",
+      "incomeFor": "{year} için Gelir"
+    },
+    "expenses" : {
+      "title" : "Harcamalar",
+      "expensesFor": "{year} için Harcamalar"
+    },
     "dashboard" : {
       "allTime" : "Tüm zamanlara genel bakış",
       "allTimeExpenses" : "Tüm Zamanların Giderleri",
@@ -110,7 +118,7 @@
       "endingBalance" : "Bitiş Bakiyesi",
       "expenses" : "Harcamalar",
       "expensesTrend" : "Gider Eğilimi",
-      "header" : "{year} için yıllık bütçe",
+      "budgetFor" : "{year} için yıllık bütçe",
       "income" : "Gelir",
       "incomeTrend" : "Gelir Eğilimi",
       "netSavings" : "Net Tasarruflar",
@@ -122,12 +130,6 @@
       "yearInThePast" : "Yıl geçmişte",
       "yoyExpenseGrowth" : "Yıllık Gider Artışı",
       "yoyIncomeGrowth" : "Yıllık Gelir Artışı"
-    },
-    "expenses" : {
-      "title" : "Harcamalar"
-    },
-    "income" : {
-      "title" : "Gelir"
     }
   }
 }