fix: ververs crowd list tellers in detailzijbalk na verwijderen persoon

Made-with: Cursor

apps/app/src/composables/api/useCrowdLists.ts

@@ -125,8 +125,11 @@ export function useRemovePersonFromCrowdList(eventId: Ref<string>) {
         `/events/${eventId.value}/crowd-lists/${listId}/persons/${personId}`,
       )
     },
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+      queryClient.invalidateQueries({
+        queryKey: ['crowd-lists', eventId.value, 'persons', variables.listId],
+      })
     },
   })
 }

apps/app/src/pages/events/[id]/crowd-lists/index.vue

@@ -56,6 +56,14 @@ const editingCrowdList = ref<CrowdList | null>(null)
 const isDetailPanelOpen = ref(false)
 const selectedCrowdList = ref<CrowdList | null>(null)
 
+/** Sync met TanStack-query na mutaties (verwijderen personen, enz.); anders blijft de zijbalk op oude tellers. */
+const detailPanelCrowdList = computed((): CrowdList | null => {
+  const selected = selectedCrowdList.value
+  if (!selected) return null
+  const fresh = crowdLists.value?.find(cl => cl.id === selected.id)
+  return fresh ?? selected
+})
+
 // Delete confirmation
 const isDeleteDialogOpen = ref(false)
 const deletingCrowdList = ref<CrowdList | null>(null)
@@ -262,7 +270,7 @@ function formatPersonsCount(item: CrowdList): string {
       v-model="isDetailPanelOpen"
       :event-id="eventId"
       :org-id="orgId"
-      :crowd-list="selectedCrowdList"
+      :crowd-list="detailPanelCrowdList"
       @edit="onEditFromPanel"
     />