perf(ZMSKVR-1022): reduce API calls by fetching available days only once

- Remove refetch on provider selection change (no longer needed since we fetch all providers)
- Rename refetchAvailableDaysForSelection to fetchAvailableDaysForSelection
- Update test to reflect new client-side filtering behavior

Author: ThomasAFink

zmscitizenview/src/components/Appointment/AppointmentSelection.vue

@@ -477,7 +477,7 @@ const showSelectionForProvider = async (provider: OfficeImpl) => {
   error.value = false;
   selectedDay.value = undefined;
   selectedTimeslot.value = 0;
-  await refetchAvailableDaysForSelection();
+  await fetchAvailableDaysForSelection();
 };
 
 const TODAY = new Date();
@@ -761,7 +761,7 @@ const handleError = (data: any): void => {
 };
 
 // API calls
-const refetchAvailableDaysForSelection = async (): Promise<void> => {
+const fetchAvailableDaysForSelection = async (): Promise<void> => {
   // Always fetch available days for ALL providers to maintain the full list
   const allProviderIds = (selectableProviders.value || []).map((p) =>
     Number(p.id)
@@ -1067,7 +1067,11 @@ function scheduleRefreshAfterProviderChange() {
     const prevSelectedDay = selectedDay.value
       ? new Date(selectedDay.value)
       : undefined;
-    await refetchAvailableDaysForSelection();
+
+    // No need to refetch availableDays - we already have all provider data from initial fetch
+    // Just update the UI based on current selection
+    isSwitchingProvider.value = false;
+
     // Selection changed while awaiting? Abort this cycle.
     if (selectionSnapshot !== JSON.stringify(selectedProviders.value)) {
       return;

zmscitizenview/tests/unit/Appointment/AppointmentSelection.spec.ts

@@ -518,50 +518,35 @@ describe("AppointmentSelection", () => {
       await wrapper.vm.showSelectionForProvider({ name: 'Office X', id: 10351880, address: { street: 'Test', house_number: '1' } });
       await nextTick();
 
-      // Mock the availableDays to simulate what would be fetched for selected providers
+      // Mock availableDays where 2025-06-16 only has provider 10470, and 2025-06-17 has provider 10351880
+      // This means when we select only 10351880, the current date (2025-06-16) becomes invalid
       wrapper.vm.availableDays = [
-        { time: '2025-06-16', providerIDs: '10351880,10470' },
-        { time: '2025-06-17', providerIDs: '10351880,10470' },
+        { time: '2025-06-16', providerIDs: '10470' },
+        { time: '2025-06-17', providerIDs: '10351880' },
       ];
 
-      // Set current date explicitly to the one without appointments
+      // Set current date to 2025-06-16 (only available for provider 10470)
       wrapper.vm.selectedDay = new Date('2025-06-16');
       await nextTick();
       await wrapper.vm.getAppointmentsOfDay('2025-06-16');
       await nextTick();
 
-      // Control subsequent refetches: first refetch returns both days, final refetch returns only 2025-06-17
-      let refetchCall = 0;
-      (fetchAvailableDays as Mock).mockImplementation(() => {
-        refetchCall += 1;
-        if (refetchCall === 1) {
-          return Promise.resolve({
-            availableDays: [
-              { time: '2025-06-16', providerIDs: '10351880,10470' },
-              { time: '2025-06-17', providerIDs: '10351880,10470' }
-            ]
-          });
-        }
-        return Promise.resolve({
-          availableDays: [
-            { time: '2025-06-17', providerIDs: '10351880' }
-          ]
-        });
-      });
-
-      // Simulate provider change to trigger nearest-date selection pipeline with deep change
-      wrapper.vm.selectedProviders = { '10351880': false, '10470': true } as any;
+      // Initially both providers are selected
+      wrapper.vm.selectedProviders = { '10351880': true, '10470': true } as any;
       await nextTick();
       await flushPromises();
+
+      // Now deselect provider 10470, leaving only 10351880 selected
+      // Since 2025-06-16 only has 10470, the date should snap to 2025-06-17
       wrapper.vm.selectedProviders = { '10351880': true, '10470': false } as any;
       await nextTick();
       await flushPromises();
-      // Wait for debounced pipeline (150ms) + fetch/updates to complete
-      await new Promise(r => setTimeout(r, 900));
+      // Wait for debounced pipeline (150ms) + updates to complete
+      await new Promise(r => setTimeout(r, 300));
       await nextTick();
       await flushPromises();
 
-      // Should snap to 2025-06-17 as nearest available date after provider change
+      // Should snap to 2025-06-17 as nearest available date for selected provider
       expect(wrapper.vm.selectedDay).toEqual(new Date('2025-06-17'));
     });