feat: allow entering data for years in the past

closes #35

src/app/components/base/context-menu/ContextMenu.types.ts

@@ -10,6 +10,7 @@ export type ContextMenuOptionId = number | string;
 
 export interface ContextMenuOption {
   id: ContextMenuOptionId;
+  muted?: boolean;
   icon?: Component;
   label?: string;
 }

src/app/components/base/context-menu/ContextMenu.vue

@@ -12,6 +12,7 @@
           :pad-icon="hasOptionWithIcon"
           :text="option.label ?? option.id"
           :icon="option.icon"
+          :muted="option.muted"
           :highlight="option.id === highlight"
           @click="select(option)"
         />

src/app/components/base/context-menu/ContextMenuButton.vue

@@ -22,12 +22,14 @@ const props = withDefaults(
     class?: ClassNames;
     text: string | number;
     icon?: Component;
+    muted?: boolean;
     padIcon?: boolean;
     highlight?: boolean;
   }>(),
   {
     highlight: false,
-    padIcon: false
+    padIcon: false,
+    muted: false
   }
 );
 
@@ -38,6 +40,7 @@ const classes = computed(() => [
   props.class,
   styles.btn,
   {
+    [styles.muted]: props.muted,
     [styles.highlight]: props.highlight,
     [styles.padIcon]: props.padIcon && !props.icon
   }
@@ -86,6 +89,10 @@ const onClick = (evt: MouseEvent) => {
     padding-left: calc(12px + 20px);
   }
 
+  &.muted {
+    color: var(--context-menu-item-color-muted);
+  }
+
   &:hover,
   &.highlight {
     color: var(--context-menu-item-color-hover);

src/app/pages/navigation/tools/ToolsButton.vue

@@ -14,6 +14,7 @@
       <ImportButton />
       <CopyButton />
       <PasteButton />
+      <DeleteYearButton />
     </template>
   </ContextMenu>
 </template>
@@ -30,9 +31,10 @@ import { ClassNames } from '@utils';
 import ChangePasswordButton from './change-password/ChangePasswordButton.vue';
 import CopyButton from './copy-paste/CopyButton.vue';
 import PasteButton from './copy-paste/PasteButton.vue';
-import LoadDemoDataButton from './demo/LoadDemoDataButton.vue';
+import DeleteYearButton from './delete-year/DeleteYearButton.vue';
 import ExportButton from './export/ExportButton.vue';
 import ImportButton from './import/ImportButton.vue';
+import LoadDemoDataButton from './load-demo-data/LoadDemoDataButton.vue';
 import PrivacyModeButton from './privacy-mode/PrivacyModeButton.vue';
 
 const props = defineProps<{

src/app/pages/navigation/tools/delete-year/DeleteYearButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <ContextMenuButton
+    v-if="state.activeYear === state.years[0].year && state.years.length > 1"
+    :text="t('navigation.tools.deleteYear.delete', { year: state.activeYear })"
+    :icon="RiDeleteBin5Line"
+    @click="deleteCurrentYear"
+  />
+</template>
+
+<script lang="ts" setup>
+import { RiDeleteBin5Line } from '@remixicon/vue';
+import { useI18n } from 'vue-i18n';
+import ContextMenuButton from '@components/base/context-menu/ContextMenuButton.vue';
+import { useDataStore } from '@store/state';
+
+const { state, shiftYears } = useDataStore();
+const { t } = useI18n();
+
+const deleteCurrentYear = () => {
+  if (window.confirm(t('navigation.tools.deleteYear.confirm'))) {
+    shiftYears();
+  }
+};
+</script>

src/app/pages/navigation/year/ChangeYearButton.vue

@@ -36,12 +36,13 @@ const time = useTime();
 const classes = computed(() => props.class);
 const options = computed((): ContextMenuOption[] => {
   const yearsStored = state.years.map((v) => v.year);
-  const offset = Math.min(...yearsStored);
+  const firstYear = Math.min(...yearsStored);
   const list: ContextMenuOption[] = [];
 
-  for (let year = offset; year <= time.year.value + PRE_PLANNABLE_YEARS; year++) {
+  for (let year = firstYear - 1; year <= time.year.value + PRE_PLANNABLE_YEARS; year++) {
     list.push({
       id: year,
+      muted: year === firstYear - 1,
       icon: state.activeYear === year ? RiCalendarCheckLine : RiCalendarTodoLine
     });
   }

src/i18n/locales/de.json

@@ -28,6 +28,10 @@
       "demo": {
         "loadDemoData": "Demo-Daten laden"
       },
+      "deleteYear": {
+        "delete": "Jahr {year} entfernen",
+        "confirm": "Sind Sie sicher, dass Sie das Jahr {year} löschen möchten?"
+      },
       "export": {
         "export": "Als JSON-Datei exportieren"
       },

src/i18n/locales/en.json

@@ -28,6 +28,10 @@
       "demo": {
         "loadDemoData": "Load demo data"
       },
+      "deleteYear": {
+        "delete": "Remove {year}",
+        "confirm": "Are you sure you want to remove {year}?"
+      },
       "export": {
         "export": "Export as json file"
       },

src/store/state/index.ts

@@ -31,6 +31,7 @@ interface Store {
   deserialize(file: File): Promise<void>;
   deserialize(file: DataState): Promise<void>;
 
+  shiftYears(): void;
   changeYear(year: number): void;
   changeLocale(locale: AvailableLocale): void;
   changeCurrency(currency: AvailableCurrency): void;
@@ -181,6 +182,16 @@ export const createDataStore = (storage?: Storage): Store => {
       }
     },
 
+    shiftYears() {
+      if (state.years.length > 1) {
+        const item = state.years.shift();
+
+        if (item?.year === activeYear.value) {
+          activeYear.value = state.years.at(0)?.year as number;
+        }
+      }
+    },
+
     changeYear(year: number) {
       let data = state.years.find((v) => v.year === year);
 

src/styles/themes/dark.scss

@@ -144,6 +144,7 @@
   --dialog-box-shadow: 0 2px 10px #00000080;
 
   --context-menu-item-color: #c1c1cf;
+  --context-menu-item-color-muted: #6e6e72;
   --context-menu-item-color-hover: #ededf6;
   --context-menu-item-background-hover: #00000080;
   --context-menu-backdrop: blur(4px) brightness(0.25);

src/styles/themes/light.scss

@@ -144,6 +144,7 @@
   --dialog-box-shadow: 0 2px 5px #00000012;
 
   --context-menu-item-color: #777788;
+  --context-menu-item-color-muted: #cacfda;
   --context-menu-item-color-hover: #222228;
   --context-menu-item-background-hover: #0000000d;
   --context-menu-backdrop: brightness(10);