chore(journal): added synching detailed timetable data with basic

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -138,7 +138,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -167,15 +167,6 @@ const currentHistoryIndex = ref(0);
 
 const timetableDetails = ref<API.TimetableHistory.Data | null>(null);
 
-watch(
-  computed(() => props.showExtraInfo),
-  (state) => {
-    if (state == true) {
-      fetchTimetableDetails();
-    }
-  }
-);
-
 const stockHistory = computed(() => {
   return (
     timetableDetails.value?.stockHistory
@@ -231,8 +222,12 @@ async function fetchTimetableDetails() {
   }
 }
 
-function toggleExtraInfo() {
-  emits('toggleExtraInfo', props.timetableId);
+async function toggleExtraInfo() {
+  if (props.showExtraInfo == false) {
+    await fetchTimetableDetails();
+  }
+
+  emits('toggleExtraInfo', timetableDetails.value);
 }
 
 function copyStockToClipboard() {

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -10,7 +10,7 @@
 
     <hr />
 
-    <div @click="toggleExtraInfo" style="cursor: pointer">
+    <div style="cursor: pointer">
       <!-- Status -->
       <EntryStatus :timetable="timetableEntry" />
     </div>
@@ -60,8 +60,8 @@ export default defineComponent({
   },
 
   methods: {
-    toggleExtraInfo() {
-      this.$emit('toggleShowExtraInfo');
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleShowExtraInfo', data);
     }
   }
 });

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -20,7 +20,7 @@
           v-for="(timetableEntry, i) in timetableHistory"
           :key="timetableEntry.id"
           :timetableEntry="timetableEntry"
-          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :onToggleShowExtraInfo="toggleExtraInfo"
           :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
         />
       </transition-group>
@@ -59,6 +59,8 @@ export default defineComponent({
     JournalTimetableEntry
   },
 
+  emits: ['toggleExtraInfo'],
+
   props: {
     timetableHistory: {
       type: Array as PropType<API.TimetableHistory.ResponseShort>,
@@ -75,32 +77,23 @@ export default defineComponent({
     },
     dataStatus: {
       type: Number as PropType<Status.Data>
+    },
+    extraInfoIndexes: {
+      type: Object as PropType<number[]>,
+      required: true
     }
   },
 
   data() {
     return {
       Status,
-      store: useMainStore(),
-      extraInfoIndexes: [] as number[]
+      store: useMainStore()
     };
   },
 
-  watch: {
-    '$route.query': {
-      deep: true,
-      handler() {
-        this.extraInfoIndexes.length = 0;
-      }
-    }
-  },
-  
   methods: {
-    toggleExtraInfo(id: number) {
-      const existingIdx = this.extraInfoIndexes.indexOf(id);
-
-      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
-      else this.extraInfoIndexes.push(id);
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleExtraInfo', data);
     }
   }
 });
@@ -111,7 +104,7 @@ export default defineComponent({
 @use '../../../styles/journal-section';
 @use '../../../styles/responsive';
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .journal_item-info {
     text-align: center;
   }

src/views/JournalTimetables.vue

@@ -29,6 +29,8 @@
           :dataStatus="dataStatus"
           :scrollDataLoaded="scrollDataLoaded"
           :scrollNoMoreData="scrollNoMoreData"
+          :extraInfoIndexes="extraInfoIndexes"
+          @toggleExtraInfo="toggleExtraInfo"
         />
       </div>
     </div>
@@ -145,6 +147,7 @@ export default defineComponent({
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
+    extraInfoIndexes: [] as number[],
 
     chosenPlayerId: -1,
 
@@ -201,7 +204,15 @@ export default defineComponent({
 
   watch: {
     currentQueryParams(q: API.TimetableHistory.QueryParams) {
+      console.log(q);
       this.currentOptionsActive = Object.values(q).some((v) => v !== undefined);
+    },
+
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
     }
   },
 
@@ -232,6 +243,24 @@ export default defineComponent({
       this.setOptions(query as any);
     },
 
+    async toggleExtraInfo(timetableDetails: API.TimetableHistory.Data | null) {
+      if (!timetableDetails) return;
+
+      const existingIdx = this.extraInfoIndexes.indexOf(timetableDetails.id);
+
+      if (existingIdx == -1) {
+        this.extraInfoIndexes.push(timetableDetails.id);
+
+        const synchedTimetable = this.timetableHistory.find((t) => t.id == timetableDetails.id);
+
+        if (synchedTimetable) {
+          Object.assign(synchedTimetable, timetableDetails);
+        }
+      } else {
+        this.extraInfoIndexes.splice(existingIdx, 1);
+      }
+    },
+
     setOptions(options: { [key: string]: string }) {
       Object.keys(this.searchersValues).forEach((v) => {
         this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';