From b4a6145f403bc099f00e676a07209b85ce410635 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 7 May 2025 14:52:40 +0200
Subject: [PATCH] fix tanstack query store invalidation on detailed view update

---
 e2e/reporting.spec.ts                | 26 +++++++++++++++++++++++++-
 resources/js/utils/useTimeEntries.ts |  4 ++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/e2e/reporting.spec.ts b/e2e/reporting.spec.ts
index 2e07c9ba..c0b8d54f 100644
--- a/e2e/reporting.spec.ts
+++ b/e2e/reporting.spec.ts
@@ -43,7 +43,7 @@ async function createTimeEntryWithProject(page: Page, projectName: string, durat
     // Submit the time entry
     await Promise.all([
         page.getByRole('button', { name: 'Create Time Entry' }).click(),
-        page.waitForLoadState('networkidle')
+        page.waitForResponse(response => response.url().includes('/time-entries') && response.status() === 201)
     ]);
 }
 
@@ -183,4 +183,28 @@ test('test that detailed view shows time entries correctly', async ({ page }) =>
     await expect(page.getByText('Time entry for ' + projectName, { exact: true })).toBeVisible();
 });
 
+test('test that updating duration in detailed view works correctly', async ({ page }) => {
+    const projectName = 'Duration Update Project ' + Math.floor(Math.random() * 10000);
+    const initialDuration = '1h';
+    const updatedDuration = '2h 30min';
+
+    // Create a time entry with initial duration
+    await createTimeEntryWithProject(page, projectName, initialDuration);
+
+    // Go to detailed reporting view
+    await goToReportingDetailed(page);
+
+    // Find and update the duration
+    const durationInput = page.locator('input[name="Duration"]').first();
+    await durationInput.click();
+    await durationInput.fill(updatedDuration);
+    await durationInput.press('Enter');
+
+    // Wait for the update to be processed
+    await page.waitForLoadState('networkidle');
+
+    // Verify the new duration is displayed
+    await expect(durationInput).toHaveValue(updatedDuration);
+});
+
 // TODO: test that date range filtering works in reporting
diff --git a/resources/js/utils/useTimeEntries.ts b/resources/js/utils/useTimeEntries.ts
index f8ee7597..7c629073 100644
--- a/resources/js/utils/useTimeEntries.ts
+++ b/resources/js/utils/useTimeEntries.ts
@@ -14,6 +14,7 @@ import {
 import dayjs from 'dayjs';
 import { useNotificationsStore } from '@/utils/notification';
 import type { UpdateMultipleTimeEntriesChangeset } from '@/packages/api/src';
+import { useQueryClient } from "@tanstack/vue-query";
 
 export const useTimeEntriesStore = defineStore('timeEntries', () => {
     const timeEntries = ref<TimeEntry[]>(reactive([]));
@@ -21,6 +22,8 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
     const allTimeEntriesLoaded = ref(false);
     const { handleApiRequestNotifications } = useNotificationsStore();
 
+    const queryClient = useQueryClient();
+
     async function patchTimeEntries(
         queryParams: TimeEntriesQueryParams = {
             only_full_dates: 'true',
@@ -157,6 +160,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
             timeEntries.value = timeEntries.value.map((entry) =>
                 entry.id === timeEntry.id ? response.data : entry
             );
+            queryClient.invalidateQueries({queryKey: ['timeEntry']});
         }
     }