Przekierowanie do historii dr

src/App.vue

@@ -70,7 +70,7 @@
               /
               <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }} </router-link>
               /
-              <router-link class="route" active-class="route-active" to="/journal"
+              <router-link class="route" active-class="route-active" to="/journal?view=timetables"
                 >{{ $t('app.journal') }}
               </router-link>
             </span>
@@ -79,7 +79,7 @@
       </header>
 
       <main class="app_main">
-        <router-view v-slot="{ Component }">
+        <router-view v-slot="{ Component }" :key="$route.fullPath">
           <!-- <transition name="view-anim" mode="out-in"> -->
           <keep-alive>
             <component :is="Component" />

src/components/JournalView/JournalDispatchers.vue

@@ -133,7 +133,12 @@ export default defineComponent({
   mixins: [dateMixin],
 
   props: {
-    searchedSceneryName: {
+    sceneryName: {
+      type: String,
+      required: false,
+    },
+
+    dispatcherName: {
       type: String,
       required: false,
     },
@@ -202,16 +207,25 @@ export default defineComponent({
   },
 
   mounted() {
+    const query = this.$route.query;
+
+    console.log("Mounted");
+    
+
+    if (query.sceneryName || query.dispatcherName) {
+      this.searchersValues[1].value = query.sceneryName?.toString() || "";
+      this.searchersValues[0].value = query.dispatcherName?.toString() || "";
+      
+      this.search();
+
+      return;
+    }
+
     this.fetchHistoryData();
   },
 
   activated() {
     window.addEventListener('scroll', this.handleScroll);
-
-    if (this.searchedSceneryName) {
-      this.searchersValues[1].value = this.searchedSceneryName;
-      this.search();
-    }
   },
 
   deactivated() {

src/components/JournalView/JournalTimetables.vue

@@ -112,7 +112,7 @@
                       <!-- Nick dyżurnego -->
                       <div v-if="item.authorName">
                         <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
-                        <b>{{ item.authorName }}</b>
+                        <router-link class="dispatcher-link" :to="`/journal?view=dispatchers&dispatcherName=${item.authorName}`">{{ item.authorName }}</router-link>
                       </div>
                     </div>
 
@@ -437,4 +437,8 @@ export default defineComponent({
     }
   }
 }
+
+.dispatcher-link {
+  font-weight: bold;
+}
 </style>

src/router/index.ts

@@ -21,7 +21,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/journal",
     name: "JournalView",
-    component: () => import("@/views/JournalView.vue"),
+    component: () => import("@/views/JournalView.vue")
   },
   {
     path: '/:catchAll(.*)',

src/views/JournalView.vue

@@ -1,27 +1,30 @@
 <template>
   <section class="journal-view">
     <div class="journal-type-options">
-      <button
-        class="btn btn--text"
-        :class="{ checked: journalTypeChosen == 'timetables' }"
-        @click="changeJournalType('timetables')"
+      <router-link
+        class="router-link"
+        :class="{ active: journalTypeChosen == 'timetables' }"
+        to="/journal?view=timetables"
       >
         {{ $t('journal.section-timetables') }}
-      </button>
+      </router-link>
       &nbsp;&bull;&nbsp;
-      <button
-        class="btn btn--text"
-        :class="{ checked: journalTypeChosen == 'dispatchers' }"
-        @click="changeJournalType('dispatchers')"
+      <router-link
+        class="router-link"
+        :class="{ active: journalTypeChosen == 'dispatchers' }"
+        to="/journal?view=dispatchers"
       >
         {{ $t('journal.section-dispatchers') }}
-      </button>
+      </router-link>
     </div>
 
     <div class="journal-section">
       <keep-alive>
         <JournalTimetables v-if="journalTypeChosen == 'timetables'" />
-        <JournalDispatchers v-else-if="journalTypeChosen == 'dispatchers'" :searchedSceneryName="$route.query.sceneryName?.toString()" />
+        <JournalDispatchers
+          v-else-if="journalTypeChosen == 'dispatchers'"
+          :sceneryName="$route.query.sceneryName?.toString()"
+        />
       </keep-alive>
     </div>
   </section>
@@ -29,15 +32,17 @@
 
 <script lang="ts">
 import JournalTimetables from '@/components/JournalView/JournalTimetables.vue';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import JournalDispatchers from '@/components/JournalView/JournalDispatchers.vue';
 
 export default defineComponent({
   components: { JournalTimetables, JournalDispatchers },
 
-  data() {
+  setup() {
+    const journalTypeChosen = ref('timetables');
+
     return {
-      journalTypeChosen: 'timetables',
+      journalTypeChosen,
     };
   },
 
@@ -49,9 +54,9 @@ export default defineComponent({
 
   activated() {
     const query = this.$route.query;
-    
-    if(query.sceneryName) this.journalTypeChosen = 'dispatchers';
-  }
+
+    if (query.view == 'dispatchers') this.journalTypeChosen = 'dispatchers';
+  },
 });
 </script>
 
@@ -76,4 +81,8 @@ export default defineComponent({
   display: flex;
   justify-content: center;
 }
+
+.router-link.active {
+  color: gold;
+}
 </style>