🐛 refresh active checkin card after editing the status

resources/tailwind-app/components/ActiveStatusCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { trans } from 'laravel-vue-i18n';
 import { DateTime } from 'luxon';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { StopoverResource } from '../../types/Api.gen';
 import LineIndicator from '../../vue/components/LineIndicator.vue';
@@ -50,6 +50,8 @@ function getNextStation() {
     }
 }
 
+watch(() => state.status, getNextStation);
+
 function format(dateTime: DateTime | null): string {
     return dateTime ? dateTime.toFormat('HH:mm') : '';
 }

resources/tailwind-app/components/Status/StatusContextMenu.vue

@@ -19,6 +19,7 @@ import { Notyf } from 'notyf';
 import { computed, inject, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Api, StatusResource, TripResource } from '../../../types/Api.gen';
+import { useActiveCheckin } from '../../../vue/stores/activeCheckin';
 import { useUserStore } from '../../../vue/stores/user';
 import ReportModal from '../ReportModal.vue';
 import TripCopyModal from '../Trip/TripCopyModal.vue';
@@ -36,6 +37,7 @@ const emit = defineEmits<{
 const api = new Api({ baseUrl: window.location.origin + '/api' });
 const notyf = inject('notyf') as Notyf;
 const userStore = useUserStore();
+const activeCheckin = useActiveCheckin();
 const router = useRouter();
 
 const busyDepartureNow = ref(false);
@@ -113,6 +115,7 @@ async function departureNow() {
     busyDepartureNow.value = true;
     try {
         const res = await api.status.updateSingleStatus({ manualDeparture: getNowIso() } as never, props.status.id);
+        activeCheckin.updateStatus(res.data.data as StatusResource);
         emit('status-updated', res.data.data as StatusResource);
     } finally {
         busyDepartureNow.value = false;
@@ -123,6 +126,7 @@ async function arrivalNow() {
     busyArrivalNow.value = true;
     try {
         const res = await api.status.updateSingleStatus({ manualArrival: getNowIso() } as never, props.status.id);
+        activeCheckin.updateStatus(res.data.data as StatusResource);
         emit('status-updated', res.data.data as StatusResource);
     } finally {
         busyArrivalNow.value = false;

resources/tailwind-app/components/Status/StatusEditModal.vue

@@ -14,6 +14,7 @@ import {
     StopoverResource,
 } from '../../../types/Api.gen';
 import { getDepartureForStatus } from '../../../vue/helpers/DateTimeHelper';
+import { useActiveCheckin } from '../../../vue/stores/activeCheckin';
 import { ALL_VISIBILITIES, VISIBILITY_ICONS } from '../../helpers/visibility';
 
 const props = defineProps<{
@@ -28,6 +29,7 @@ const emit = defineEmits<{
 
 const api = new Api({ baseUrl: window.location.origin + '/api' });
 const notyf = inject('notyf') as Notyf;
+const activeCheckin = useActiveCheckin();
 
 const loading = ref(false);
 const stopovers = ref<StopoverResource[]>([]);
@@ -120,6 +122,7 @@ async function save() {
         }
 
         const res = await api.status.updateSingleStatus(updateBody, props.status.id);
+        activeCheckin.updateStatus(res.data.data as StatusResource);
         emit('saved', res.data.data as StatusResource);
     } catch {
         notyf?.error(trans('generic.error'));

resources/vue/stores/activeCheckin.ts

@@ -20,6 +20,12 @@ export const useActiveCheckin = defineStore(
             stopovers.value = null;
         }
 
+        function updateStatus(updated: StatusResource): void {
+            if (status.value?.id === updated.id) {
+                status.value = updated;
+            }
+        }
+
         async function fetchStopovers(trip: number): Promise<void> {
             const response = await api.stopovers.getStopOvers(trip.toString());
             if (Object.prototype.hasOwnProperty.call(response.data.data, trip)) {
@@ -70,6 +76,7 @@ export const useActiveCheckin = defineStore(
             error,
             refreshed,
             reset,
+            updateStatus,
             fetchStopovers,
             fetchActiveStatus,
         };