Use setTitle everywhere

web/src/components/Autocomplete.vue

@@ -15,7 +15,7 @@ interface Data {
 }
 
 const props = defineProps<{
-    modelValue: Suggestion,
+    modelValue: Suggestion | undefined,
     type: String
 }>();
 

web/src/components/Currency.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-const props = defineProps<{ value: number }>();
+const props = defineProps<{ value: number | undefined }>();
 
-const formattedValue = computed(() => Number(props.value).toLocaleString(undefined, {
+const internalValue = computed(() => Number(props.value ?? 0));
+
+const formattedValue = computed(() => internalValue.value.toLocaleString(undefined, {
     minimumFractionDigits: 2,
 }));
 </script>
 
 <template>
-    <span class="text-right" :class="value < 0 ? 'negative' : ''">{{ formattedValue }} €</span>
+    <span class="text-right" :class="internalValue < 0 ? 'negative' : ''">{{ formattedValue }} €</span>
 </template>

web/src/pages/Admin.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
+import { useSessionStore } from '../stores/session';
 
 onMounted(() => {
-    document.title = "Budgeteer - Admin";
+    useSessionStore().setTitle("Admin");
 })
 </script>
 

web/src/pages/Budgeting.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { computed, defineProps, watchEffect } from "vue";
+import { computed, defineProps, onMounted, watchEffect } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
 import { useAccountStore } from "../stores/budget-account";
+import { useSessionStore } from "../stores/session";
 
 const props = defineProps<{
     budgetid: string,
@@ -40,9 +41,9 @@ watchEffect(() => {
         return useAccountStore().FetchMonthBudget(props.budgetid ?? "", Number(props.year), Number(props.month));
 });
 
-/*{{define "title"}}
+onMounted(() => {
-    {{printf "Budget for %s %d" .Date.Month .Date.Year}}
+    useSessionStore().setTitle("Budget for " + selected.value.Month + "/" + selected.value.Year);
-{{end}}*/
+})
 </script>
 
 <template>

web/src/pages/Login.vue

@@ -7,7 +7,7 @@ const error = ref("");
 const login = ref({ user: "", password: "" });
 
 onMounted(() => {
-    document.title = "Budgeteer - Login";
+    useSessionStore().setTitle("Login");
 });
 
 function formSubmit(e: MouseEvent) {

web/src/pages/Settings.vue

@@ -10,7 +10,7 @@ const assignmentsFile = ref<File | undefined>(undefined);
 
 const filesIncomplete = computed(() => transactionsFile.value == undefined || assignmentsFile.value == undefined);
 onMounted(() => {
-    document.title = "Budgeteer - Settings";
+    useSessionStore().setTitle("Settings");
 });
 
 function gotAssignments(e: Event) {