Improve title

Author: JanisV

frontend/src/App.vue

@@ -9,6 +9,7 @@ import AboutView from "@/components/AboutView.vue";
 const selectedFile = ref(null)
 const coinsList = ref([])
 let isOpened = false;
+const title = ref('OpenNumismat')
 
 const db = ref(null);
 const status = ref('');
@@ -86,7 +87,7 @@ const handleFileUpload = async (file) => {
         @click="router.back()"
       ></v-app-bar-nav-icon>
 
-      <v-toolbar-title>OpenNumismat</v-toolbar-title>
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" temporary>
@@ -110,13 +111,13 @@ const handleFileUpload = async (file) => {
 
     <v-main>
       <div v-if="(route.name === 'home' && !isOpened) || route.name === 'open'">
-        <FileUploaderView :onFileUploaded="handleFileUpload" />
+        <FileUploaderView v-model:title="title" :onFileUploaded="handleFileUpload" />
       </div>
       <div v-if="route.name === 'home' && isOpened">
-        <CoinListView :file_name="selectedFile.name" :coins_list="coinsList" />
+        <CoinListView v-model:title="title" :file_name="selectedFile.name" :coins_list="coinsList" />
       </div>
       <div v-if="route.name === 'about'">
-        <AboutView />
+        <AboutView v-model:title="title" />
       </div>
       <div v-if="status" class="status">{{ status }}</div>
     </v-main>

frontend/src/components/AboutView.vue

@@ -1,5 +1,21 @@
 <script setup>
+import {defineProps, onMounted, onUnmounted} from "vue";
+
 const appVersion = import.meta.env.VITE_APP_VERSION;
+
+const props = defineProps({
+  title: String,
+});
+const emit = defineEmits(['update:title']);
+let oldTitle = null;
+
+onMounted(async () => {
+  oldTitle = props.title;
+  emit('update:title', 'About');
+})
+onUnmounted(async () => {
+  emit('update:title', oldTitle);
+})
 </script>
 
 <template>

frontend/src/components/CoinListView.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { defineProps } from 'vue';
+import {defineProps, onMounted, onUnmounted} from "vue";
 
-defineProps({
+const props = defineProps({
+  title: String,
   file_name: {
     type: String,
     required: true,
@@ -12,14 +13,24 @@ defineProps({
   },
 });
 
+const emit = defineEmits(['update:title']);
+let oldTitle = null;
+
+onMounted(async () => {
+  oldTitle = props.title;
+  emit('update:title', props.file_name);
+})
+onUnmounted(async () => {
+  emit('update:title', oldTitle);
+})
+
 function arrayBufferToBase64( buffer ) {
   let binary = '';
   const bytes = new Uint8Array( buffer );
   const len = bytes.byteLength;
   for (let i = 0; i < len; i++) {
     binary += String.fromCharCode( bytes[ i ] );
   }
-//  return window.btoa( binary );
   const base64String = window.btoa( binary );
   return `data:image/png;base64,${base64String}`;
 }
@@ -45,8 +56,6 @@ function generateDescription( coin_data ) {
 </script>
 
 <template>
-  <h2 class="file-name">{{ file_name }}</h2>
-
   <div>
     <table>
       <tr v-for="coin_data in coins_list">

frontend/src/components/FileUploaderView.vue

@@ -1,10 +1,27 @@
 <script setup>
+import {defineProps, onMounted, onUnmounted} from "vue";
+import {useRoute} from "vue-router";
 import { VFileUpload } from 'vuetify/labs/VFileUpload'
 
 const props = defineProps({
+  title: String,
   onFileUploaded: Function,
 });
 
+const emit = defineEmits(['update:title']);
+let oldTitle = null;
+
+const route = useRoute()
+
+onMounted(async () => {
+  oldTitle = props.title;
+  if (route.name === 'open')
+    emit('update:title', 'Open File');
+})
+onUnmounted(async () => {
+  emit('update:title', oldTitle);
+})
+
 function onFileChange(event) {
   console.log('Selected files:', event.target.files);