feat: crowd lists frontend with list view, create/edit dialog and person management

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -0,0 +1,121 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type { CrowdList, CreateCrowdListDto, UpdateCrowdListDto } from '@/types/crowdList'
+import type { Person } from '@/types/person'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+export function useCrowdLists(eventId: Ref<string>) {
+  return useQuery({
+    queryKey: ['crowd-lists', eventId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<{ data: CrowdList[] }>(
+        `/events/${eventId.value}/crowd-lists`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!eventId.value,
+  })
+}
+
+export function useCrowdListPersons(eventId: Ref<string>, listId: Ref<string>) {
+  return useQuery({
+    queryKey: ['crowd-lists', eventId, 'persons', listId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<{ data: Person[] }>(
+        `/events/${eventId.value}/crowd-lists/${listId.value}/persons`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!eventId.value && !!listId.value,
+  })
+}
+
+export function useCreateCrowdList(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: CreateCrowdListDto) => {
+      const { data } = await apiClient.post<ApiResponse<CrowdList>>(
+        `/events/${eventId.value}/crowd-lists`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+    },
+  })
+}
+
+export function useUpdateCrowdList(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: UpdateCrowdListDto & { id: string }) => {
+      const { data } = await apiClient.put<ApiResponse<CrowdList>>(
+        `/events/${eventId.value}/crowd-lists/${id}`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+    },
+  })
+}
+
+export function useDeleteCrowdList(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`/events/${eventId.value}/crowd-lists/${id}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+    },
+  })
+}
+
+export function useAddPersonToCrowdList(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ listId, personId }: { listId: string; personId: string }) => {
+      const { data } = await apiClient.post<ApiResponse<CrowdList>>(
+        `/events/${eventId.value}/crowd-lists/${listId}/persons`,
+        { person_id: personId },
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+    },
+  })
+}
+
+export function useRemovePersonFromCrowdList(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ listId, personId }: { listId: string; personId: string }) => {
+      await apiClient.delete(
+        `/events/${eventId.value}/crowd-lists/${listId}/persons/${personId}`,
+      )
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+    },
+  })
+}