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:
@@ -4,6 +4,7 @@ import ScrollToTop from '@core/components/ScrollToTop.vue'
|
||||
import initCore from '@core/initCore'
|
||||
import { initConfigStore, useConfigStore } from '@core/stores/config'
|
||||
import { hexToRgb } from '@core/utils/colorConverter'
|
||||
import { useMe } from '@/composables/api/useAuth'
|
||||
|
||||
const { global } = useTheme()
|
||||
|
||||
@@ -12,6 +13,9 @@ initCore()
|
||||
initConfigStore()
|
||||
|
||||
const configStore = useConfigStore()
|
||||
|
||||
// Hydrate auth store on page load (token survives in localStorage, user data does not)
|
||||
useMe()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
179
apps/app/src/components/events/CreateEventDialog.vue
Normal file
179
apps/app/src/components/events/CreateEventDialog.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreateEvent } from '@/composables/api/useEvents'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
|
||||
const props = defineProps<{
|
||||
orgId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
slug: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
timezone: 'Europe/Amsterdam',
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
|
||||
const { mutate: createEvent, isPending } = useCreateEvent(orgIdRef)
|
||||
|
||||
const timezoneOptions = [
|
||||
{ title: 'Europe/Amsterdam', value: 'Europe/Amsterdam' },
|
||||
{ title: 'Europe/London', value: 'Europe/London' },
|
||||
{ title: 'Europe/Paris', value: 'Europe/Paris' },
|
||||
{ title: 'UTC', value: 'UTC' },
|
||||
]
|
||||
|
||||
watch(() => form.value.name, (name) => {
|
||||
form.value.slug = name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '')
|
||||
})
|
||||
|
||||
const endDateRule = (v: string) => {
|
||||
if (!v) return 'Einddatum is verplicht'
|
||||
if (form.value.start_date && v < form.value.start_date) {
|
||||
return 'Einddatum moet op of na startdatum liggen'
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
form.value = { name: '', slug: '', start_date: '', end_date: '', timezone: 'Europe/Amsterdam' }
|
||||
errors.value = {}
|
||||
refVForm.value?.resetValidation()
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
createEvent(form.value, {
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
resetForm()
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = Object.fromEntries(
|
||||
Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
|
||||
)
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { name: data.message }
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard title="Nieuw evenement">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.slug"
|
||||
label="Slug"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.slug"
|
||||
hint="Wordt gebruikt in de URL"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.start_date"
|
||||
label="Startdatum"
|
||||
type="date"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.start_date"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.end_date"
|
||||
label="Einddatum"
|
||||
type="date"
|
||||
:rules="[requiredValidator, endDateRule]"
|
||||
:error-messages="errors.end_date"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.timezone"
|
||||
label="Tijdzone"
|
||||
:items="timezoneOptions"
|
||||
:error-messages="errors.timezone"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Aanmaken
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Evenement aangemaakt
|
||||
</VSnackbar>
|
||||
</template>
|
||||
199
apps/app/src/components/events/EditEventDialog.vue
Normal file
199
apps/app/src/components/events/EditEventDialog.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useUpdateEvent } from '@/composables/api/useEvents'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import type { EventStatus, EventType } from '@/types/event'
|
||||
|
||||
const props = defineProps<{
|
||||
event: EventType
|
||||
orgId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
const eventIdRef = computed(() => props.event.id)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
slug: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
timezone: '',
|
||||
status: '' as EventStatus,
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
|
||||
const { mutate: updateEvent, isPending } = useUpdateEvent(orgIdRef, eventIdRef)
|
||||
|
||||
const timezoneOptions = [
|
||||
{ title: 'Europe/Amsterdam', value: 'Europe/Amsterdam' },
|
||||
{ title: 'Europe/London', value: 'Europe/London' },
|
||||
{ title: 'Europe/Paris', value: 'Europe/Paris' },
|
||||
{ title: 'UTC', value: 'UTC' },
|
||||
]
|
||||
|
||||
const statusOptions: { title: string; value: EventStatus }[] = [
|
||||
{ title: 'Draft', value: 'draft' },
|
||||
{ title: 'Published', value: 'published' },
|
||||
{ title: 'Registration Open', value: 'registration_open' },
|
||||
{ title: 'Build-up', value: 'buildup' },
|
||||
{ title: 'Show Day', value: 'showday' },
|
||||
{ title: 'Tear-down', value: 'teardown' },
|
||||
{ title: 'Closed', value: 'closed' },
|
||||
]
|
||||
|
||||
const endDateRule = (v: string) => {
|
||||
if (!v) return 'Einddatum is verplicht'
|
||||
if (form.value.start_date && v < form.value.start_date) {
|
||||
return 'Einddatum moet op of na startdatum liggen'
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
watch(() => props.event, (ev) => {
|
||||
form.value = {
|
||||
name: ev.name,
|
||||
slug: ev.slug,
|
||||
start_date: ev.start_date,
|
||||
end_date: ev.end_date,
|
||||
timezone: ev.timezone,
|
||||
status: ev.status,
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
updateEvent(form.value, {
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = Object.fromEntries(
|
||||
Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
|
||||
)
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { name: data.message }
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
>
|
||||
<VCard title="Evenement bewerken">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.slug"
|
||||
label="Slug"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.slug"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.start_date"
|
||||
label="Startdatum"
|
||||
type="date"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.start_date"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.end_date"
|
||||
label="Einddatum"
|
||||
type="date"
|
||||
:rules="[requiredValidator, endDateRule]"
|
||||
:error-messages="errors.end_date"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="form.timezone"
|
||||
label="Tijdzone"
|
||||
:items="timezoneOptions"
|
||||
:error-messages="errors.timezone"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="form.status"
|
||||
label="Status"
|
||||
:items="statusOptions"
|
||||
:error-messages="errors.status"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Evenement bijgewerkt
|
||||
</VSnackbar>
|
||||
</template>
|
||||
64
apps/app/src/components/layout/OrganisationSwitcher.vue
Normal file
64
apps/app/src/components/layout/OrganisationSwitcher.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const hasMultipleOrgs = computed(() => authStore.organisations.length > 1)
|
||||
const currentOrgName = computed(() => authStore.currentOrganisation?.name ?? 'Geen organisatie')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="organisation-switcher mx-4 mb-2">
|
||||
<!-- Single org: just show the name -->
|
||||
<div
|
||||
v-if="!hasMultipleOrgs"
|
||||
class="d-flex align-center gap-x-2 pa-2"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-building"
|
||||
size="20"
|
||||
color="primary"
|
||||
/>
|
||||
<span class="text-body-2 font-weight-medium text-truncate">
|
||||
{{ currentOrgName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Multiple orgs: dropdown -->
|
||||
<VBtn
|
||||
v-else
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
block
|
||||
class="text-none justify-start"
|
||||
prepend-icon="tabler-building"
|
||||
>
|
||||
<span class="text-truncate">{{ currentOrgName }}</span>
|
||||
|
||||
<VMenu
|
||||
activator="parent"
|
||||
width="250"
|
||||
location="bottom start"
|
||||
>
|
||||
<VList density="compact">
|
||||
<VListItem
|
||||
v-for="org in authStore.organisations"
|
||||
:key="org.id"
|
||||
:active="org.id === authStore.currentOrganisation?.id"
|
||||
@click="authStore.setActiveOrganisation(org.id)"
|
||||
>
|
||||
<VListItemTitle>{{ org.name }}</VListItemTitle>
|
||||
<template #append>
|
||||
<VChip
|
||||
size="x-small"
|
||||
variant="text"
|
||||
>
|
||||
{{ org.role }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useUpdateOrganisation } from '@/composables/api/useOrganisations'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import type { Organisation } from '@/types/organisation'
|
||||
|
||||
const props = defineProps<{
|
||||
organisation: Organisation
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const name = ref('')
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
|
||||
const { mutate: updateOrganisation, isPending } = useUpdateOrganisation()
|
||||
|
||||
watch(() => props.organisation, (org) => {
|
||||
name.value = org.name
|
||||
}, { immediate: true })
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
updateOrganisation(
|
||||
{ id: props.organisation.id, name: name.value },
|
||||
{
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = { name: data.errors.name?.[0] ?? '' }
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { name: data.message }
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="450"
|
||||
>
|
||||
<VCard title="Naam bewerken">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="name"
|
||||
label="Organisatienaam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Naam bijgewerkt
|
||||
</VSnackbar>
|
||||
</template>
|
||||
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 }
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { themeConfig } from '@themeConfig'
|
||||
import Footer from '@/layouts/components/Footer.vue'
|
||||
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
|
||||
import UserProfile from '@/layouts/components/UserProfile.vue'
|
||||
import OrganisationSwitcher from '@/components/layout/OrganisationSwitcher.vue'
|
||||
import NavBarI18n from '@core/components/I18n.vue'
|
||||
|
||||
// @layouts plugin
|
||||
@@ -14,6 +15,12 @@ import { VerticalNavLayout } from '@layouts'
|
||||
|
||||
<template>
|
||||
<VerticalNavLayout :nav-items="navItems">
|
||||
<!-- 👉 Organisation switcher -->
|
||||
<template #before-vertical-nav-items>
|
||||
<OrganisationSwitcher />
|
||||
<div class="vertical-nav-items-shadow" />
|
||||
</template>
|
||||
|
||||
<!-- 👉 navbar -->
|
||||
<template #navbar="{ toggleVerticalOverlayNavActive }">
|
||||
<div class="d-flex h-100 align-center">
|
||||
|
||||
@@ -1,41 +1,7 @@
|
||||
<template>
|
||||
<div class="h-100 d-flex align-center justify-md-space-between justify-center">
|
||||
<!-- 👉 Footer: left content -->
|
||||
<span class="d-flex align-center text-medium-emphasis">
|
||||
©
|
||||
{{ new Date().getFullYear() }}
|
||||
Made With
|
||||
<VIcon
|
||||
icon="tabler-heart-filled"
|
||||
color="error"
|
||||
size="1.25rem"
|
||||
class="mx-1"
|
||||
/>
|
||||
By <a
|
||||
href="https://pixinvent.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary ms-1"
|
||||
>Pixinvent</a>
|
||||
</span>
|
||||
<!-- 👉 Footer: right content -->
|
||||
<span class="d-md-flex gap-x-4 text-primary d-none">
|
||||
<a
|
||||
href="https://themeforest.net/licenses/standard"
|
||||
target="noopener noreferrer"
|
||||
>License</a>
|
||||
<a
|
||||
href="https://1.envato.market/pixinvent_portfolio"
|
||||
target="noopener noreferrer"
|
||||
>More Themes</a>
|
||||
<a
|
||||
href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
|
||||
target="noopener noreferrer"
|
||||
>Documentation</a>
|
||||
<a
|
||||
href="https://pixinvent.ticksy.com/"
|
||||
target="noopener noreferrer"
|
||||
>Support</a>
|
||||
<div class="h-100 d-flex align-center justify-center">
|
||||
<span class="text-medium-emphasis">
|
||||
© {{ new Date().getFullYear() }} Crewli
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,9 +2,21 @@
|
||||
import Shepherd from 'shepherd.js'
|
||||
import { withQuery } from 'ufo'
|
||||
import type { RouteLocationRaw } from 'vue-router'
|
||||
import type { SearchResults } from '@db/app-bar-search/types'
|
||||
import AppBarSearch from '@core/components/AppBarSearch.vue'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
/** App bar API search group (replaces Vuexy @db mock types). */
|
||||
interface AppBarSearchResultChild {
|
||||
title: string
|
||||
icon: string
|
||||
url: RouteLocationRaw
|
||||
}
|
||||
|
||||
interface SearchResults {
|
||||
title: string
|
||||
children: AppBarSearchResultChild[]
|
||||
}
|
||||
|
||||
interface Suggestion {
|
||||
icon: string
|
||||
title: string
|
||||
@@ -117,7 +129,6 @@ const redirectToSuggestedPage = (selected: Suggestion) => {
|
||||
closeSearchBar()
|
||||
}
|
||||
|
||||
const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/AppBarSearch.vue'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -144,7 +155,7 @@ const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/App
|
||||
</div>
|
||||
|
||||
<!-- 👉 App Bar Search -->
|
||||
<LazyAppBarSearch
|
||||
<AppBarSearch
|
||||
v-model:is-dialog-visible="isAppSearchBarVisible"
|
||||
:search-results="searchResult"
|
||||
:is-loading="isLoading"
|
||||
@@ -238,7 +249,7 @@ const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/App
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</template>
|
||||
</LazyAppBarSearch>
|
||||
</AppBarSearch>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import { useLogout } from '@/composables/api/useAuth'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const { mutate: logout, isPending: isLoggingOut } = useLogout()
|
||||
|
||||
function handleLogout() {
|
||||
logout(undefined, {
|
||||
onSettled: () => {
|
||||
router.replace('/login')
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -48,9 +62,9 @@ import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-semibold">
|
||||
John Doe
|
||||
{{ authStore.user?.name ?? 'User' }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>Admin</VListItemSubtitle>
|
||||
<VListItemSubtitle>{{ authStore.currentOrganisation?.role ?? '' }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VDivider class="my-2" />
|
||||
@@ -81,37 +95,14 @@ import avatar1 from '@images/avatars/avatar-1.png'
|
||||
<VListItemTitle>Settings</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 Pricing -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="tabler-currency-dollar"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Pricing</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- 👉 FAQ -->
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
icon="tabler-help"
|
||||
size="22"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>FAQ</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<!-- Divider -->
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- 👉 Logout -->
|
||||
<VListItem to="/login">
|
||||
<VListItem
|
||||
:disabled="isLoggingOut"
|
||||
@click="handleLogout"
|
||||
>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
class="me-2"
|
||||
|
||||
@@ -1,31 +1,29 @@
|
||||
import axios from 'axios'
|
||||
import { parse } from 'cookie-es'
|
||||
import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
const apiClient: AxiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
function getAccessToken(): string | null {
|
||||
if (typeof document === 'undefined') return null
|
||||
const cookies = parse(document.cookie)
|
||||
return cookies.accessToken ?? null
|
||||
}
|
||||
|
||||
apiClient.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
const token = getAccessToken()
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
const authStore = useAuthStore()
|
||||
|
||||
if (authStore.token) {
|
||||
config.headers.Authorization = `Bearer ${authStore.token}`
|
||||
}
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
console.log(`🚀 ${config.method?.toUpperCase()} ${config.url}`, config.data)
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
error => Promise.reject(error),
|
||||
@@ -36,20 +34,24 @@ apiClient.interceptors.response.use(
|
||||
if (import.meta.env.DEV) {
|
||||
console.log(`✅ ${response.status} ${response.config.url}`, response.data)
|
||||
}
|
||||
|
||||
return response
|
||||
},
|
||||
error => {
|
||||
if (import.meta.env.DEV) {
|
||||
console.error(`❌ ${error.response?.status} ${error.config?.url}`, error.response?.data)
|
||||
}
|
||||
|
||||
if (error.response?.status === 401) {
|
||||
document.cookie = 'accessToken=; path=/; max-age=0'
|
||||
document.cookie = 'userData=; path=/; max-age=0'
|
||||
document.cookie = 'userAbilityRules=; path=/; max-age=0'
|
||||
const authStore = useAuthStore()
|
||||
|
||||
authStore.logout()
|
||||
|
||||
if (typeof window !== 'undefined' && window.location.pathname !== '/login') {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
@@ -1,7 +1,17 @@
|
||||
export default [
|
||||
{
|
||||
title: 'Home',
|
||||
to: { name: 'root' },
|
||||
title: 'Dashboard',
|
||||
to: { name: 'dashboard' },
|
||||
icon: { icon: 'tabler-smart-home' },
|
||||
},
|
||||
{
|
||||
title: 'Events',
|
||||
to: { name: 'events' },
|
||||
icon: { icon: 'tabler-calendar-event' },
|
||||
},
|
||||
{
|
||||
title: 'Organisaties',
|
||||
to: { name: 'organisations' },
|
||||
icon: { icon: 'tabler-building' },
|
||||
},
|
||||
]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default [
|
||||
{
|
||||
title: "Home",
|
||||
to: { name: "root" },
|
||||
title: "Dashboard",
|
||||
to: { name: "dashboard" },
|
||||
icon: { icon: "tabler-smart-home" },
|
||||
},
|
||||
{
|
||||
@@ -9,4 +9,12 @@ export default [
|
||||
to: { name: "events" },
|
||||
icon: { icon: "tabler-calendar-event" },
|
||||
},
|
||||
{
|
||||
heading: "Beheer",
|
||||
},
|
||||
{
|
||||
title: "Mijn Organisatie",
|
||||
to: { name: "organisation" },
|
||||
icon: { icon: "tabler-building" },
|
||||
},
|
||||
];
|
||||
|
||||
61
apps/app/src/pages/dashboard/index.vue
Normal file
61
apps/app/src/pages/dashboard/index.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const stats = [
|
||||
{ title: 'Evenementen', value: 0, icon: 'tabler-calendar-event', color: 'primary' },
|
||||
{ title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
|
||||
{ title: 'Shifts', value: 0, icon: 'tabler-clock', color: 'warning' },
|
||||
{ title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VCard class="mb-6">
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Welkom, {{ authStore.user?.name ?? 'gebruiker' }}! 👋
|
||||
</h4>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ authStore.currentOrganisation?.name ?? 'Geen organisatie geselecteerd' }}
|
||||
</p>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="stat in stats"
|
||||
:key="stat.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
:color="stat.color"
|
||||
variant="tonal"
|
||||
size="44"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="stat.icon"
|
||||
size="28"
|
||||
/>
|
||||
</VAvatar>
|
||||
<div>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ stat.title }}
|
||||
</p>
|
||||
<h4 class="text-h4">
|
||||
{{ stat.value }}
|
||||
</h4>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,99 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import { useEvents } from '@/composables/useEvents'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useEventDetail } from '@/composables/api/useEvents'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import EditEventDialog from '@/components/events/EditEventDialog.vue'
|
||||
import type { EventStatus } from '@/types/event'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const { currentEvent, fetchEvent, isLoading } = useEvents()
|
||||
const authStore = useAuthStore()
|
||||
const orgStore = useOrganisationStore()
|
||||
|
||||
const eventId = computed(() => route.params.id as string)
|
||||
const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
|
||||
const eventId = computed(() => String((route.params as { id: string }).id))
|
||||
|
||||
watch(() => eventId.value, async () => {
|
||||
if (eventId.value) {
|
||||
await fetchEvent(eventId.value)
|
||||
}
|
||||
const { data: event, isLoading, isError, refetch } = useEventDetail(orgId, eventId)
|
||||
|
||||
const isEditDialogOpen = ref(false)
|
||||
const activeTab = ref('details')
|
||||
|
||||
// Set active event in store
|
||||
watch(eventId, (id) => {
|
||||
if (id) orgStore.setActiveEvent(id)
|
||||
}, { immediate: true })
|
||||
|
||||
function getStatusColor(status: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
draft: 'secondary',
|
||||
published: 'info',
|
||||
registration_open: 'success',
|
||||
buildup: 'warning',
|
||||
showday: 'primary',
|
||||
teardown: 'warning',
|
||||
closed: 'secondary',
|
||||
}
|
||||
return colors[status] || 'secondary'
|
||||
const statusColor: Record<EventStatus, string> = {
|
||||
draft: 'default',
|
||||
published: 'info',
|
||||
registration_open: 'cyan',
|
||||
buildup: 'warning',
|
||||
showday: 'success',
|
||||
teardown: 'warning',
|
||||
closed: 'error',
|
||||
}
|
||||
|
||||
function formatStatusLabel(status: string): string {
|
||||
return status.replaceAll('_', ' ')
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
|
||||
const tiles = [
|
||||
{ title: 'Secties & Shifts', value: 0, icon: 'tabler-layout-grid', color: 'primary' },
|
||||
{ title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
|
||||
{ title: 'Artiesten', value: 0, icon: 'tabler-music', color: 'warning' },
|
||||
{ title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VCard v-if="currentEvent">
|
||||
<VCardTitle class="d-flex align-center gap-2">
|
||||
<RouterLink
|
||||
:to="{ name: 'events' }"
|
||||
class="text-decoration-none"
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="card"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon evenement niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="refetch()"
|
||||
>
|
||||
<VIcon icon="tabler-arrow-left" />
|
||||
</RouterLink>
|
||||
<span class="text-h5">{{ currentEvent.name }}</span>
|
||||
<VChip
|
||||
:color="getStatusColor(currentEvent.status)"
|
||||
size="small"
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<template v-else-if="event">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VBtn
|
||||
icon="tabler-arrow-left"
|
||||
variant="text"
|
||||
:to="{ name: 'events' }"
|
||||
/>
|
||||
<h4 class="text-h4">
|
||||
{{ event.name }}
|
||||
</h4>
|
||||
<VChip
|
||||
:color="statusColor[event.status]"
|
||||
size="small"
|
||||
>
|
||||
{{ event.status }}
|
||||
</VChip>
|
||||
<span class="text-body-1 text-disabled">
|
||||
{{ formatDate(event.start_date) }} – {{ formatDate(event.end_date) }}
|
||||
</span>
|
||||
</div>
|
||||
<VBtn
|
||||
prepend-icon="tabler-edit"
|
||||
@click="isEditDialogOpen = true"
|
||||
>
|
||||
{{ formatStatusLabel(currentEvent.status) }}
|
||||
</VChip>
|
||||
</VCardTitle>
|
||||
Bewerken
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<div class="mb-4">
|
||||
<div class="text-body-2 text-medium-emphasis mb-1">
|
||||
Dates
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
{{ new Date(currentEvent.start_date).toLocaleDateString() }}
|
||||
–
|
||||
{{ new Date(currentEvent.end_date).toLocaleDateString() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-body-2 text-medium-emphasis mb-1">
|
||||
Timezone
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
{{ currentEvent.timezone }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="currentEvent.organisation"
|
||||
class="mb-4"
|
||||
<!-- Stat tiles -->
|
||||
<VRow class="mb-6">
|
||||
<VCol
|
||||
v-for="tile in tiles"
|
||||
:key="tile.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<div class="text-body-2 text-medium-emphasis mb-1">
|
||||
Organisation
|
||||
</div>
|
||||
<div class="text-body-1">
|
||||
{{ currentEvent.organisation.name }}
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
:color="tile.color"
|
||||
variant="tonal"
|
||||
size="44"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="tile.icon"
|
||||
size="28"
|
||||
/>
|
||||
</VAvatar>
|
||||
<div>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ tile.title }}
|
||||
</p>
|
||||
<h4 class="text-h4">
|
||||
{{ tile.value }}
|
||||
</h4>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VCard v-else-if="isLoading">
|
||||
<VCardText class="text-center py-12">
|
||||
<VProgressCircular
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<!-- Tabs -->
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
class="mb-6"
|
||||
>
|
||||
<VTab value="details">
|
||||
Details
|
||||
</VTab>
|
||||
<VTab value="settings">
|
||||
Instellingen
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VTabsWindow v-model="activeTab">
|
||||
<!-- Tab: Details -->
|
||||
<VTabsWindowItem value="details">
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Slug
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ event.slug }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Tijdzone
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ event.timezone }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Organisatie
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ authStore.currentOrganisation?.name ?? '–' }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Aangemaakt op
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ formatDate(event.created_at) }}
|
||||
</p>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VTabsWindowItem>
|
||||
|
||||
<!-- Tab: Instellingen -->
|
||||
<VTabsWindowItem value="settings">
|
||||
<VCard>
|
||||
<VCardText class="text-center pa-8">
|
||||
<VIcon
|
||||
icon="tabler-settings"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled">
|
||||
Komt in een volgende fase
|
||||
</p>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VTabsWindowItem>
|
||||
</VTabsWindow>
|
||||
|
||||
<EditEventDialog
|
||||
v-model="isEditDialogOpen"
|
||||
:event="event"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,158 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { useEvents } from '@/composables/useEvents'
|
||||
import { useEventList } from '@/composables/api/useEvents'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import CreateEventDialog from '@/components/events/CreateEventDialog.vue'
|
||||
import type { EventStatus, EventType } from '@/types/event'
|
||||
|
||||
const { events, pagination, organisationId, isLoading, error, fetchEvents } = useEvents()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const page = ref(1)
|
||||
const itemsPerPage = ref(10)
|
||||
const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
|
||||
|
||||
watch([page, itemsPerPage, organisationId], () => {
|
||||
if (!organisationId.value) {
|
||||
return
|
||||
}
|
||||
fetchEvents({
|
||||
page: page.value,
|
||||
per_page: itemsPerPage.value,
|
||||
})
|
||||
}, { immediate: true })
|
||||
const { data: events, isLoading, isError, refetch } = useEventList(orgId)
|
||||
|
||||
function getStatusColor(status: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
draft: 'secondary',
|
||||
published: 'info',
|
||||
registration_open: 'success',
|
||||
buildup: 'warning',
|
||||
showday: 'primary',
|
||||
teardown: 'warning',
|
||||
closed: 'secondary',
|
||||
}
|
||||
return colors[status] || 'secondary'
|
||||
const isCreateDialogOpen = ref(false)
|
||||
|
||||
const headers = [
|
||||
{ title: 'Naam', key: 'name' },
|
||||
{ title: 'Status', key: 'status' },
|
||||
{ title: 'Startdatum', key: 'start_date' },
|
||||
{ title: 'Einddatum', key: 'end_date' },
|
||||
{ title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
|
||||
]
|
||||
|
||||
const statusColor: Record<EventStatus, string> = {
|
||||
draft: 'default',
|
||||
published: 'info',
|
||||
registration_open: 'cyan',
|
||||
buildup: 'warning',
|
||||
showday: 'success',
|
||||
teardown: 'warning',
|
||||
closed: 'error',
|
||||
}
|
||||
|
||||
function formatStatusLabel(status: string): string {
|
||||
return status.replaceAll('_', ' ')
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
|
||||
function navigateToDetail(_event: Event, row: { item: EventType }) {
|
||||
router.push({ name: 'events-id', params: { id: row.item.id } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- No org selected -->
|
||||
<VAlert
|
||||
v-if="!organisationId"
|
||||
v-if="!orgId"
|
||||
type="warning"
|
||||
class="mb-4"
|
||||
>
|
||||
You need to belong to an organisation to see events. Ask an administrator to invite you.
|
||||
Selecteer eerst een organisatie.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
:to="{ name: 'organisation' }"
|
||||
>
|
||||
Naar organisatie
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<VCard>
|
||||
<VCardTitle>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Events
|
||||
<template v-else>
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<h4 class="text-h4">
|
||||
Evenementen
|
||||
</h4>
|
||||
<p class="text-body-2 text-medium-emphasis">
|
||||
Events for your organisation
|
||||
</p>
|
||||
</VCardTitle>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="d-flex justify-center align-center py-12"
|
||||
>
|
||||
<VProgressCircular
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
<VBtn
|
||||
prepend-icon="tabler-plus"
|
||||
@click="isCreateDialogOpen = true"
|
||||
>
|
||||
Nieuw evenement
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="table"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="error"
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="ma-4"
|
||||
class="mb-4"
|
||||
>
|
||||
{{ error.message }}
|
||||
Kon evenementen niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="refetch()"
|
||||
>
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<div
|
||||
v-else-if="events.length > 0"
|
||||
class="pa-4"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="event in events"
|
||||
:key="event.id"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard>
|
||||
<VCardTitle>
|
||||
<RouterLink
|
||||
:to="{ name: 'events-view-id', params: { id: event.id } }"
|
||||
class="text-decoration-none text-high-emphasis"
|
||||
>
|
||||
{{ event.name }}
|
||||
</RouterLink>
|
||||
</VCardTitle>
|
||||
|
||||
<VCardText>
|
||||
<div class="mb-2">
|
||||
<VChip
|
||||
:color="getStatusColor(event.status)"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ formatStatusLabel(event.status) }}
|
||||
</VChip>
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
{{ new Date(event.start_date).toLocaleDateString() }}
|
||||
–
|
||||
{{ new Date(event.end_date).toLocaleDateString() }}
|
||||
</div>
|
||||
<div class="text-body-2 text-medium-emphasis">
|
||||
{{ event.timezone }}
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn
|
||||
:to="{ name: 'events-view-id', params: { id: event.id } }"
|
||||
variant="text"
|
||||
>
|
||||
View details
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<div
|
||||
v-if="pagination && pagination.last_page > 1"
|
||||
class="d-flex justify-center mt-4"
|
||||
>
|
||||
<VPagination
|
||||
v-model="page"
|
||||
:length="pagination.last_page"
|
||||
:total-visible="7"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VCardText
|
||||
v-else
|
||||
class="text-center py-12"
|
||||
<!-- Empty -->
|
||||
<VCard
|
||||
v-else-if="!events?.length"
|
||||
class="text-center pa-8"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-calendar-off"
|
||||
size="64"
|
||||
class="text-medium-emphasis mb-4"
|
||||
icon="tabler-calendar-event"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-h6 text-medium-emphasis">
|
||||
No events yet
|
||||
<p class="text-body-1 text-disabled">
|
||||
Nog geen evenementen
|
||||
</p>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCard>
|
||||
|
||||
<!-- Data table -->
|
||||
<VCard v-else>
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="events"
|
||||
item-value="id"
|
||||
hover
|
||||
@click:row="navigateToDetail"
|
||||
>
|
||||
<template #item.status="{ item }">
|
||||
<VChip
|
||||
:color="statusColor[item.status]"
|
||||
size="small"
|
||||
>
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #item.start_date="{ item }">
|
||||
{{ formatDate(item.start_date) }}
|
||||
</template>
|
||||
|
||||
<template #item.end_date="{ item }">
|
||||
{{ formatDate(item.end_date) }}
|
||||
</template>
|
||||
|
||||
<template #item.actions="{ item }">
|
||||
<VBtn
|
||||
icon="tabler-eye"
|
||||
variant="text"
|
||||
size="small"
|
||||
:to="{ name: 'events-id', params: { id: item.id } }"
|
||||
@click.stop
|
||||
/>
|
||||
</template>
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
|
||||
<CreateEventDialog
|
||||
v-model="isCreateDialogOpen"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,25 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<VCard
|
||||
class="mb-6"
|
||||
title="Kick start your project 🚀"
|
||||
>
|
||||
<VCardText>All the best for your new project.</VCardText>
|
||||
<VCardText>
|
||||
Please make sure to read our <a
|
||||
href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-decoration-none"
|
||||
>
|
||||
Template Documentation
|
||||
</a> to understand where to go from here and how to use our template.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
<VCard title="Want to integrate JWT? 🔒">
|
||||
<VCardText>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</VCardText>
|
||||
<VCardText>Please read our JWT Documentation to get more out of JWT authentication.</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
const router = useRouter()
|
||||
router.replace({ name: 'dashboard' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
@@ -10,8 +10,9 @@ import authV2MaskDark from '@images/pages/misc-mask-dark.png'
|
||||
import authV2MaskLight from '@images/pages/misc-mask-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import { useLogin } from '@/composables/api/useAuth'
|
||||
import { emailValidator, requiredValidator } from '@core/utils/validators'
|
||||
import type { LoginCredentials } from '@/types/auth'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
@@ -23,17 +24,18 @@ definePage({
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const form = ref({
|
||||
const form = ref<LoginCredentials & { remember: boolean }>({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
const { mutate: login, isPending } = useLogin()
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(
|
||||
authV2LoginIllustrationLight,
|
||||
authV2LoginIllustrationDark,
|
||||
@@ -43,62 +45,35 @@ const authThemeImg = useGenerateImageVariant(
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
|
||||
async function handleLogin() {
|
||||
function handleLogin() {
|
||||
errors.value = {}
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const { data } = await apiClient.post('/auth/login', {
|
||||
email: form.value.email,
|
||||
password: form.value.password,
|
||||
})
|
||||
login(
|
||||
{ email: form.value.email, password: form.value.password },
|
||||
{
|
||||
onSuccess: () => {
|
||||
const redirectTo = route.query.to ? String(route.query.to) : '/dashboard'
|
||||
|
||||
if (data.success && data.data) {
|
||||
// Store token in cookie (axios interceptor reads from accessToken cookie)
|
||||
document.cookie = `accessToken=${data.data.token}; path=/`
|
||||
|
||||
// Store user data in cookie if needed
|
||||
if (data.data.user) {
|
||||
document.cookie = `userData=${JSON.stringify(data.data.user)}; path=/`
|
||||
}
|
||||
|
||||
// Redirect to home or the 'to' query parameter
|
||||
await nextTick(() => {
|
||||
const redirectTo = route.query.to ? String(route.query.to) : '/'
|
||||
router.replace(redirectTo)
|
||||
})
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Login error:', err)
|
||||
|
||||
// Handle API errors
|
||||
if (err.response?.data) {
|
||||
const errorData = err.response.data
|
||||
|
||||
if (errorData.errors) {
|
||||
// Validation errors
|
||||
errors.value = {
|
||||
email: errorData.errors.email?.[0],
|
||||
password: errorData.errors.password?.[0],
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const errorData = err.response?.data
|
||||
|
||||
if (errorData?.errors) {
|
||||
errors.value = {
|
||||
email: errorData.errors.email?.[0] ?? '',
|
||||
password: errorData.errors.password?.[0] ?? '',
|
||||
}
|
||||
}
|
||||
} else if (errorData.message) {
|
||||
// General error message
|
||||
errors.value = {
|
||||
email: errorData.message,
|
||||
else if (errorData?.message) {
|
||||
errors.value = { email: errorData.message }
|
||||
}
|
||||
} else {
|
||||
errors.value = {
|
||||
email: 'Invalid email or password',
|
||||
else {
|
||||
errors.value = { email: 'An error occurred. Please try again.' }
|
||||
}
|
||||
}
|
||||
} else {
|
||||
errors.value = {
|
||||
email: 'An error occurred. Please try again.',
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
@@ -218,7 +193,7 @@ function onSubmit() {
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
:loading="isLoading"
|
||||
:loading="isPending"
|
||||
>
|
||||
Login
|
||||
</VBtn>
|
||||
|
||||
132
apps/app/src/pages/organisation/index.vue
Normal file
132
apps/app/src/pages/organisation/index.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
import { useMyOrganisation } from '@/composables/api/useOrganisations'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
|
||||
import type { Organisation } from '@/types/organisation'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const { data: organisation, isLoading, isError, refetch } = useMyOrganisation()
|
||||
|
||||
const isEditDialogOpen = ref(false)
|
||||
|
||||
const isOrgAdmin = computed(() => {
|
||||
const role = authStore.currentOrganisation?.role
|
||||
return role === 'org_admin' || authStore.isSuperAdmin
|
||||
})
|
||||
|
||||
const statusColor: Record<Organisation['billing_status'], string> = {
|
||||
trial: 'info',
|
||||
active: 'success',
|
||||
suspended: 'warning',
|
||||
cancelled: 'error',
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString('nl-NL', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="card"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon organisatie niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="refetch()"
|
||||
>
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<template v-else-if="organisation">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<h4 class="text-h4">
|
||||
{{ organisation.name }}
|
||||
</h4>
|
||||
<VChip
|
||||
:color="statusColor[organisation.billing_status]"
|
||||
size="small"
|
||||
>
|
||||
{{ organisation.billing_status }}
|
||||
</VChip>
|
||||
</div>
|
||||
<VBtn
|
||||
v-if="isOrgAdmin"
|
||||
prepend-icon="tabler-edit"
|
||||
@click="isEditDialogOpen = true"
|
||||
>
|
||||
Naam bewerken
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Info card -->
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Slug
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ organisation.slug }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Aangemaakt op
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ formatDate(organisation.created_at) }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Status
|
||||
</h6>
|
||||
<VChip
|
||||
:color="statusColor[organisation.billing_status]"
|
||||
size="small"
|
||||
>
|
||||
{{ organisation.billing_status }}
|
||||
</VChip>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<EditOrganisationDialog
|
||||
v-model="isEditDialogOpen"
|
||||
:organisation="organisation"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
19
apps/app/src/plugins/1.router/guards.ts
Normal file
19
apps/app/src/plugins/1.router/guards.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import type { Router } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
export function setupGuards(router: Router) {
|
||||
router.beforeEach((to) => {
|
||||
const authStore = useAuthStore()
|
||||
const isPublic = to.meta.public === true
|
||||
|
||||
// Guest-only pages (login): redirect to home if already authenticated
|
||||
if (isPublic && authStore.isAuthenticated) {
|
||||
return { name: 'dashboard' }
|
||||
}
|
||||
|
||||
// Protected pages: redirect to login if not authenticated
|
||||
if (!isPublic && !authStore.isAuthenticated) {
|
||||
return { path: '/login', query: { to: to.fullPath } }
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import type { App } from 'vue'
|
||||
import type { RouteRecordRaw } from 'vue-router/auto'
|
||||
|
||||
import { createRouter, createWebHistory } from 'vue-router/auto'
|
||||
import { setupGuards } from './guards'
|
||||
|
||||
function recursiveLayouts(route: RouteRecordRaw): RouteRecordRaw {
|
||||
if (route.children) {
|
||||
@@ -29,6 +30,8 @@ const router = createRouter({
|
||||
],
|
||||
})
|
||||
|
||||
setupGuards(router)
|
||||
|
||||
export { router }
|
||||
|
||||
export default function (app: App) {
|
||||
|
||||
81
apps/app/src/stores/useAuthStore.ts
Normal file
81
apps/app/src/stores/useAuthStore.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import type { MeResponse, Organisation, User } from '@/types/auth'
|
||||
|
||||
const TOKEN_KEY = 'crewli_token'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref<string | null>(localStorage.getItem(TOKEN_KEY))
|
||||
const user = ref<User | null>(null)
|
||||
const organisations = ref<Organisation[]>([])
|
||||
const appRoles = ref<string[]>([])
|
||||
const permissions = ref<string[]>([])
|
||||
|
||||
const isAuthenticated = computed(() => !!token.value)
|
||||
const isSuperAdmin = computed(() => appRoles.value?.includes('super_admin') ?? false)
|
||||
|
||||
const currentOrganisation = computed(() => {
|
||||
const orgStore = useOrganisationStore()
|
||||
return organisations.value.find(o => o.id === orgStore.activeOrganisationId)
|
||||
?? organisations.value[0]
|
||||
?? null
|
||||
})
|
||||
|
||||
function setToken(newToken: string) {
|
||||
token.value = newToken
|
||||
localStorage.setItem(TOKEN_KEY, newToken)
|
||||
}
|
||||
|
||||
function setUser(me: MeResponse) {
|
||||
user.value = {
|
||||
id: me.id,
|
||||
name: me.name,
|
||||
email: me.email,
|
||||
timezone: me.timezone,
|
||||
locale: me.locale,
|
||||
avatar: me.avatar,
|
||||
}
|
||||
organisations.value = me.organisations
|
||||
appRoles.value = me.app_roles
|
||||
permissions.value = me.permissions
|
||||
|
||||
// Auto-select first organisation if none is active
|
||||
const orgStore = useOrganisationStore()
|
||||
if (!orgStore.activeOrganisationId && me.organisations.length > 0) {
|
||||
orgStore.setActiveOrganisation(me.organisations[0].id)
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveOrganisation(id: string) {
|
||||
const orgStore = useOrganisationStore()
|
||||
orgStore.setActiveOrganisation(id)
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = null
|
||||
user.value = null
|
||||
organisations.value = []
|
||||
appRoles.value = []
|
||||
permissions.value = []
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
|
||||
const orgStore = useOrganisationStore()
|
||||
orgStore.clear()
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
user,
|
||||
organisations,
|
||||
appRoles,
|
||||
permissions,
|
||||
isAuthenticated,
|
||||
isSuperAdmin,
|
||||
currentOrganisation,
|
||||
setToken,
|
||||
setUser,
|
||||
setActiveOrganisation,
|
||||
logout,
|
||||
}
|
||||
})
|
||||
35
apps/app/src/stores/useOrganisationStore.ts
Normal file
35
apps/app/src/stores/useOrganisationStore.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const ACTIVE_ORG_KEY = 'crewli_active_org'
|
||||
const ACTIVE_EVENT_KEY = 'crewli_active_event'
|
||||
|
||||
export const useOrganisationStore = defineStore('organisation', () => {
|
||||
const activeOrganisationId = ref<string | null>(localStorage.getItem(ACTIVE_ORG_KEY))
|
||||
const activeEventId = ref<string | null>(localStorage.getItem(ACTIVE_EVENT_KEY))
|
||||
|
||||
function setActiveOrganisation(id: string) {
|
||||
activeOrganisationId.value = id
|
||||
localStorage.setItem(ACTIVE_ORG_KEY, id)
|
||||
}
|
||||
|
||||
function setActiveEvent(id: string) {
|
||||
activeEventId.value = id
|
||||
localStorage.setItem(ACTIVE_EVENT_KEY, id)
|
||||
}
|
||||
|
||||
function clear() {
|
||||
activeOrganisationId.value = null
|
||||
activeEventId.value = null
|
||||
localStorage.removeItem(ACTIVE_ORG_KEY)
|
||||
localStorage.removeItem(ACTIVE_EVENT_KEY)
|
||||
}
|
||||
|
||||
return {
|
||||
activeOrganisationId,
|
||||
activeEventId,
|
||||
setActiveOrganisation,
|
||||
setActiveEvent,
|
||||
clear,
|
||||
}
|
||||
})
|
||||
3
apps/app/src/styles/settings.scss
Normal file
3
apps/app/src/styles/settings.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
// Vuetify variable entry (vite-plugin-vuetify `styles.configFile`).
|
||||
// Re-exports Vuexy overrides from the standard assets location.
|
||||
@forward "../assets/styles/variables/vuetify";
|
||||
47
apps/app/src/types/auth.ts
Normal file
47
apps/app/src/types/auth.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
export interface User {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
timezone: string
|
||||
locale: string
|
||||
avatar: string | null
|
||||
}
|
||||
|
||||
export interface Organisation {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
role: string
|
||||
}
|
||||
|
||||
export interface MeResponse {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
timezone: string
|
||||
locale: string
|
||||
avatar: string | null
|
||||
organisations: Organisation[]
|
||||
app_roles: string[]
|
||||
permissions: string[]
|
||||
}
|
||||
|
||||
export interface LoginCredentials {
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
success: boolean
|
||||
data: {
|
||||
user: MeResponse
|
||||
token: string
|
||||
}
|
||||
message: string
|
||||
}
|
||||
|
||||
export interface ApiErrorResponse {
|
||||
success: false
|
||||
message: string
|
||||
errors?: Record<string, string[]>
|
||||
}
|
||||
32
apps/app/src/types/event.ts
Normal file
32
apps/app/src/types/event.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export type EventStatus =
|
||||
| 'draft'
|
||||
| 'published'
|
||||
| 'registration_open'
|
||||
| 'buildup'
|
||||
| 'showday'
|
||||
| 'teardown'
|
||||
| 'closed'
|
||||
|
||||
export interface EventType {
|
||||
id: string
|
||||
organisation_id: string
|
||||
name: string
|
||||
slug: string
|
||||
status: EventStatus
|
||||
start_date: string
|
||||
end_date: string
|
||||
timezone: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface CreateEventPayload {
|
||||
name: string
|
||||
slug: string
|
||||
start_date: string
|
||||
end_date: string
|
||||
timezone: string
|
||||
}
|
||||
|
||||
export interface UpdateEventPayload extends Partial<CreateEventPayload> {
|
||||
status?: EventStatus
|
||||
}
|
||||
22
apps/app/src/types/organisation.ts
Normal file
22
apps/app/src/types/organisation.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
export interface Organisation {
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
billing_status: 'trial' | 'active' | 'suspended' | 'cancelled'
|
||||
settings: Record<string, unknown> | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface OrganisationMember {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
role: string
|
||||
}
|
||||
|
||||
export interface UpdateOrganisationPayload {
|
||||
name?: string
|
||||
slug?: string
|
||||
billing_status?: Organisation['billing_status']
|
||||
settings?: Record<string, unknown>
|
||||
}
|
||||
Reference in New Issue
Block a user