feat(app): auth, orgs/events UI, router guards, and dev tooling
- Add Sanctum auth flow (store, composables, login, axios interceptors) - Add dashboard, organisation list/detail, events CRUD dialogs - Wire router guards, navigation, organisation switcher in layout - Replace Vuexy @db types in NavSearchBar; add @iconify/types; themeConfig title typing - Vuetify settings.scss + resolve configFile via fileURLToPath; drop dead path aliases - Root index redirects to dashboard; fix events table route name - API: DevSeeder + DatabaseSeeder updates; docs TEST_SCENARIO; corporate identity assets Made-with: Cursor
This commit is contained in:
54
apps/app/src/composables/api/useAuth.ts
Normal file
54
apps/app/src/composables/api/useAuth.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import type { LoginCredentials, LoginResponse, MeResponse } from '@/types/auth'
|
||||
|
||||
export function useLogin() {
|
||||
const authStore = useAuthStore()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (credentials: LoginCredentials) => {
|
||||
const { data } = await apiClient.post<LoginResponse>('/auth/login', credentials)
|
||||
return data
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
authStore.setToken(data.data.token)
|
||||
authStore.setUser(data.data.user)
|
||||
queryClient.setQueryData(['auth', 'me'], data.data.user)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useMe() {
|
||||
const authStore = useAuthStore()
|
||||
|
||||
return useQuery({
|
||||
queryKey: ['auth', 'me'],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<{ success: boolean; data: MeResponse }>('/auth/me')
|
||||
return data.data
|
||||
},
|
||||
staleTime: Infinity,
|
||||
enabled: () => authStore.isAuthenticated,
|
||||
select: (data) => {
|
||||
authStore.setUser(data)
|
||||
return data
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useLogout() {
|
||||
const authStore = useAuthStore()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async () => {
|
||||
await apiClient.post('/auth/logout')
|
||||
},
|
||||
onSettled: () => {
|
||||
authStore.logout()
|
||||
queryClient.clear()
|
||||
},
|
||||
})
|
||||
}
|
||||
86
apps/app/src/composables/api/useEvents.ts
Normal file
86
apps/app/src/composables/api/useEvents.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import type { Ref } from 'vue'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import type {
|
||||
CreateEventPayload,
|
||||
EventType,
|
||||
UpdateEventPayload,
|
||||
} from '@/types/event'
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
interface PaginatedResponse<T> {
|
||||
data: T[]
|
||||
links: Record<string, string | null>
|
||||
meta: {
|
||||
current_page: number
|
||||
per_page: number
|
||||
total: number
|
||||
last_page: number
|
||||
}
|
||||
}
|
||||
|
||||
export function useEventList(orgId: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['events', orgId],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<PaginatedResponse<EventType>>(
|
||||
`/organisations/${orgId.value}/events`,
|
||||
)
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!orgId.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function useEventDetail(orgId: Ref<string>, id: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['events', orgId, id],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<ApiResponse<EventType>>(
|
||||
`/organisations/${orgId.value}/events/${id.value}`,
|
||||
)
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!orgId.value && !!id.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function useCreateEvent(orgId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload: CreateEventPayload) => {
|
||||
const { data } = await apiClient.post<ApiResponse<EventType>>(
|
||||
`/organisations/${orgId.value}/events`,
|
||||
payload,
|
||||
)
|
||||
return data.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['events', orgId.value] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateEvent(orgId: Ref<string>, id: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload: UpdateEventPayload) => {
|
||||
const { data } = await apiClient.put<ApiResponse<EventType>>(
|
||||
`/organisations/${orgId.value}/events/${id.value}`,
|
||||
payload,
|
||||
)
|
||||
return data.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['events', orgId.value] })
|
||||
queryClient.invalidateQueries({ queryKey: ['events', orgId.value, id.value] })
|
||||
},
|
||||
})
|
||||
}
|
||||
75
apps/app/src/composables/api/useOrganisations.ts
Normal file
75
apps/app/src/composables/api/useOrganisations.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import { computed, type Ref } from 'vue'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import type {
|
||||
Organisation,
|
||||
UpdateOrganisationPayload,
|
||||
} from '@/types/organisation'
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
interface PaginatedResponse<T> {
|
||||
data: T[]
|
||||
links: Record<string, string | null>
|
||||
meta: {
|
||||
current_page: number
|
||||
per_page: number
|
||||
total: number
|
||||
last_page: number
|
||||
}
|
||||
}
|
||||
|
||||
export function useOrganisationList() {
|
||||
return useQuery({
|
||||
queryKey: ['organisations'],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<PaginatedResponse<Organisation>>('/organisations')
|
||||
return data.data
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useOrganisationDetail(id: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['organisations', id],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<ApiResponse<Organisation>>(`/organisations/${id.value}`)
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!id.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function useMyOrganisation() {
|
||||
const authStore = useAuthStore()
|
||||
const id = computed(() => authStore.currentOrganisation?.id ?? '')
|
||||
|
||||
return useQuery({
|
||||
queryKey: ['organisations', id],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<ApiResponse<Organisation>>(`/organisations/${id.value}`)
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!id.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateOrganisation() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, ...payload }: UpdateOrganisationPayload & { id: string }) => {
|
||||
const { data } = await apiClient.put<ApiResponse<Organisation>>(`/organisations/${id}`, payload)
|
||||
return data.data
|
||||
},
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['organisations'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['organisations', variables.id] })
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import { useCurrentOrganisationId } from '@/composables/useOrganisationContext'
|
||||
import type { ApiResponse, Event, Pagination } from '@/types/events'
|
||||
|
||||
interface LaravelPaginatedEventsBody {
|
||||
data: Event[]
|
||||
meta: {
|
||||
current_page: number
|
||||
per_page: number
|
||||
total: number
|
||||
last_page: number
|
||||
from: number | null
|
||||
to: number | null
|
||||
}
|
||||
}
|
||||
|
||||
function requireOrganisationId(organisationId: string | null): string {
|
||||
if (!organisationId) {
|
||||
throw new Error('No organisation in session. Log in again.')
|
||||
}
|
||||
return organisationId
|
||||
}
|
||||
|
||||
export function useEvents() {
|
||||
const { organisationId } = useCurrentOrganisationId()
|
||||
const events = ref<Event[]>([])
|
||||
const currentEvent = ref<Event | null>(null)
|
||||
const pagination = ref<Pagination | null>(null)
|
||||
const isLoading = ref(false)
|
||||
const error = ref<Error | null>(null)
|
||||
|
||||
function eventsPath(): string {
|
||||
const id = requireOrganisationId(organisationId.value)
|
||||
return `/organisations/${id}/events`
|
||||
}
|
||||
|
||||
async function fetchEvents(params?: { page?: number; per_page?: number }) {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const { data } = await apiClient.get<LaravelPaginatedEventsBody>(eventsPath(), { params })
|
||||
events.value = data.data
|
||||
pagination.value = {
|
||||
current_page: data.meta.current_page,
|
||||
per_page: data.meta.per_page,
|
||||
total: data.meta.total,
|
||||
last_page: data.meta.last_page,
|
||||
from: data.meta.from,
|
||||
to: data.meta.to,
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
error.value = err instanceof Error ? err : new Error('Failed to fetch events')
|
||||
throw error.value
|
||||
}
|
||||
finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchEvent(id: string) {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const { data } = await apiClient.get<ApiResponse<Event>>(`${eventsPath()}/${id}`)
|
||||
currentEvent.value = data.data
|
||||
return data.data
|
||||
}
|
||||
catch (err) {
|
||||
error.value = err instanceof Error ? err : new Error('Failed to fetch event')
|
||||
throw error.value
|
||||
}
|
||||
finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
organisationId: computed(() => organisationId.value),
|
||||
events: computed(() => events.value),
|
||||
currentEvent: computed(() => currentEvent.value),
|
||||
pagination: computed(() => pagination.value),
|
||||
isLoading: computed(() => isLoading.value),
|
||||
error: computed(() => error.value),
|
||||
fetchEvents,
|
||||
fetchEvent,
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { useCookie } from '@core/composable/useCookie'
|
||||
import { computed } from 'vue'
|
||||
|
||||
export interface AuthOrganisationSummary {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
role: string
|
||||
}
|
||||
|
||||
export interface AuthUserCookie {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
roles?: string[]
|
||||
organisations?: AuthOrganisationSummary[]
|
||||
}
|
||||
|
||||
export function useCurrentOrganisationId() {
|
||||
const userData = useCookie<AuthUserCookie | null>('userData')
|
||||
|
||||
const organisationId = computed(() => userData.value?.organisations?.[0]?.id ?? null)
|
||||
|
||||
return { organisationId }
|
||||
}
|
||||
Reference in New Issue
Block a user