From 275d602f97927e684aa3c21b4c784be309eeb648 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 3 Sep 2024 14:43:16 +0200
Subject: [PATCH] chore: hiding entry details on history change

---
 .../JournalView/JournalTimetables/EntryDetails.vue   |  1 +
 .../JournalTimetables/JournalTimetableEntry.vue      |  7 ++++---
 .../JournalTimetables/JournalTimetablesList.vue      | 12 ++++++++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/EntryDetails.vue b/src/components/JournalView/JournalTimetables/EntryDetails.vue
index c0478d0..99d19af 100644
--- a/src/components/JournalView/JournalTimetables/EntryDetails.vue
+++ b/src/components/JournalView/JournalTimetables/EntryDetails.vue
@@ -165,6 +165,7 @@ export default defineComponent({
 .details-actions {
   display: flex;
   gap: 0.5em;
+  margin-top: 1em;
 
   button img {
     height: 1.25em;
diff --git a/src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue b/src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue
index 0d7710e..bce35ff 100644
--- a/src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue
+++ b/src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue
@@ -27,12 +27,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { API } from '../../../typings/api';
-import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
-import dateMixin from '../../../mixins/dateMixin';
 import { useApiStore } from '../../../store/apiStore';
 import { Journal } from '../typings';
 
+import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
+
 import EntryGeneral from './EntryGeneral.vue';
 import EntryStatus from './EntryStatus.vue';
 import EntryDetails from './EntryDetails.vue';
@@ -126,7 +127,7 @@ export default defineComponent({
 
   methods: {
     toggleExtraInfo() {
-      this.$emit('toggleShowExtraInfo', this.timetableEntry.id);
+      this.$emit('toggleShowExtraInfo');
     }
   }
 });
diff --git a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
index f1dda21..f8276fb 100644
--- a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
@@ -19,10 +19,10 @@
         <ul v-else class="journal-list">
           <transition-group name="list-anim">
             <JournalTimetableEntry
-              v-for="timetableEntry in timetableHistory"
+              v-for="(timetableEntry, i) in timetableHistory"
               :key="timetableEntry.id"
               :timetableEntry="timetableEntry"
-              :onToggleShowExtraInfo="toggleExtraInfo"
+              :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
               :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
             />
           </transition-group>
@@ -90,6 +90,14 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    timetableHistory: {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
   methods: {
     toggleExtraInfo(id: number) {
       const existingIdx = this.extraInfoIndexes.indexOf(id);