feat: make it possible to specify the starting month of a year

closes #45

Author: simonwep

src/app/components/base/select/Select.vue

@@ -2,7 +2,7 @@
   <div :class="$style.select">
     <label :for="fieldId" :class="$style.label">{{ label }}</label>
 
-    <ContextMenu tooltip-position="bottom" :options="options" position="bottom" @select="modelValue = $event.id">
+    <ContextMenu tooltip-position="bottom" :options="options" position="bottom-start" @select="modelValue = $event.id">
       <template #default="{ toggle }">
         <button :id="fieldId" :class="$style.btn" type="button" @click="toggle">
           {{ currentValue }}

src/app/components/feature/BudgetGroups.vue

@@ -68,16 +68,18 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import BudgetGroup from './BudgetGroup.vue';
 import type { Component } from 'vue';
+import { useSettingsStore } from '@store/settings';
 
 const props = defineProps<{
   type: 'expenses' | 'income';
 }>();
 
 const { state, moveBudgetGroup, moveBudgetIntoGroup, addBudgetGroup, getBudgetGroup, isCurrentMonth } = useDataStore();
+const { state: settings } = useSettingsStore();
 const { t } = useI18n();
 
 const groups = computed(() => state[props.type]);
-const months = useMonthNames();
+const months = useMonthNames('long', () => settings.general.monthOffset);
 
 const totals = computed(() => {
   const totals = new Array(12).fill(0);
@@ -146,7 +148,7 @@ const reorder = (evt: ReorderEvent) => {
 
   position: sticky;
   position: -webkit-sticky;
-  top: 0px;
+  top: 0;
   background: var(--app-background);
   border: 2px var(--app-background);
 

src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue

@@ -13,14 +13,16 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { LineChartConfig } from './line-chart/LineChart.types';
 import LineChart from './line-chart/LineChart.vue';
+import { useSettingsStore } from '@store/settings';
 
 const props = defineProps<{
   class?: ClassNames;
 }>();
 
-const months = useMonthNames();
 const { state } = useDataStore();
+const { state: settings } = useSettingsStore();
 const { t, locale } = useI18n();
+const months = useMonthNames('long', () => settings.general.monthOffset);
 
 const classes = computed(() => props.class);
 const isEmpty = computed(() => {

src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue

@@ -57,6 +57,7 @@ import { average, ClassNames, sum, add } from '@utils';
 import { DeepReadonly, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SummaryTable from './SummaryTable.vue';
+import { useSettingsStore } from '@store/settings';
 
 const props = defineProps<{
   class?: ClassNames;
@@ -66,7 +67,8 @@ const props = defineProps<{
 
 const { t, n } = useI18n();
 const { isCurrentMonth } = useDataStore();
-const months = useMonthNames();
+const { state: settings } = useSettingsStore();
+const months = useMonthNames('long', () => settings.general.monthOffset);
 
 const flatted = computed(() => flatten(props.groups));
 </script>

src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue

@@ -71,6 +71,7 @@ import { aggregate, average, subtract, sum } from '@utils';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SummaryTable from './SummaryTable.vue';
+import { useSettingsStore } from '@store/settings';
 
 const props = withDefaults(
   defineProps<{
@@ -85,7 +86,8 @@ const props = withDefaults(
 
 const { t, n } = useI18n();
 const { isCurrentMonth } = useDataStore();
-const months = useMonthNames();
+const { state: settings } = useSettingsStore();
+const months = useMonthNames('long', () => settings.general.monthOffset);
 
 const netSavings = computed(() => subtract(props.income, props.expenses));
 const endingBalance = computed(() => aggregate(netSavings.value));

src/app/pages/navigation/settings/SettingsDialog.vue

@@ -14,6 +14,13 @@
         :options="currencies"
         @update:model-value="changeCurrency($event as AvailableCurrency)"
       />
+
+      <Select
+        :model-value="settings.general.monthOffset"
+        :label="t('navigation.settings.firstMonthOfYear')"
+        :options="months"
+        @update:model-value="setMonthOffset($event as number)"
+      />
     </div>
   </Dialog>
 </template>
@@ -28,6 +35,8 @@ import { useDataStore } from '@store/state';
 import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.types.ts';
 import Select from '@components/base/select/Select.vue';
 import { availableCurrencies, AvailableCurrency } from '@store/state/types.ts';
+import { useSettingsStore } from '@store/settings';
+import { useMonthNames } from '@composables';
 
 const emit = defineEmits<{
   (e: 'close'): void;
@@ -38,7 +47,9 @@ defineProps<{
 }>();
 
 const { t, locale } = useI18n();
+const { setMonthOffset, state: settings } = useSettingsStore();
 const { changeCurrency, changeLocale, state } = useDataStore();
+const monthNames = useMonthNames();
 
 const locales = computed<ContextMenuOption[]>(() => {
   const displayNames = new Intl.DisplayNames(initialLocale, { type: 'language' });
@@ -58,6 +69,14 @@ const currencies = computed<ContextMenuOption[]>(() =>
   }))
 );
 
+const months = computed<ContextMenuOption[]>(() =>
+  monthNames.value.map((value, index) => ({
+    id: index,
+    label: value,
+    icon: settings.general.monthOffset === index ? RiCheckLine : undefined
+  }))
+);
+
 const formatNumber = (locale: string, currency: string, currencyDisplay?: Intl.NumberFormatOptionsCurrencyDisplay) => {
   const symbol = new Intl.NumberFormat(locale, {
     style: 'currency',

src/composables/useMonthNames.ts

@@ -1,15 +1,19 @@
-import { computed, ComputedRef } from 'vue';
+import { computed, ComputedRef, MaybeRefOrGetter, toValue } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-export const useMonthNames = (format: Intl.DateTimeFormatOptions['month'] = 'long'): ComputedRef<string[]> => {
+export const useMonthNames = (
+  format: Intl.DateTimeFormatOptions['month'] = 'long',
+  offset: MaybeRefOrGetter<number> = 0
+): ComputedRef<string[]> => {
   const { locale } = useI18n();
 
   return computed(() => {
+    const resolvedOffset = toValue(offset);
     const list = [];
 
     for (let i = 0; i < 12; i++) {
       list.push(
-        new Date(0, i).toLocaleDateString(locale.value, {
+        new Date(0, (i + resolvedOffset) % 12).toLocaleDateString(locale.value, {
           month: format
         })
       );

src/i18n/locales/cze.json

@@ -82,7 +82,8 @@
     "settings": {
       "settings": "Nastavení",
       "language": "Jazyk",
-      "currency": "Měna"
+      "currency": "Měna",
+      "firstMonthOfYear": "První měsíc roku"
     }
   },
   "shared": {

src/i18n/locales/de.json

@@ -82,7 +82,8 @@
     "settings": {
       "settings": "Einstellungen",
       "language": "Sprache",
-      "currency": "Währung"
+      "currency": "Währung",
+      "firstMonthOfYear": "Erster Monat des Jahres"
     }
   },
   "shared": {

src/i18n/locales/en.json

@@ -82,7 +82,8 @@
     "settings": {
       "settings": "Settings",
       "language": "Language",
-      "currency": "Currency"
+      "currency": "Currency",
+      "firstMonthOfYear": "First month of the year"
     }
   },
   "shared": {