-
-
-
-
+ | - Name - | -- Typ - | -- Quelle - | -- Erforderlich? - | -- Positionen - | -
|---|---|---|---|---|
|
- {{ field.name }}
-
- {{ field.description }}
-
- |
-
- {{ getFieldTypeHuman(field) }}
- |
- - Veranstaltung - Ausschreibung - | -
- |
-
- {{ formatPositions(field) }}
- |
-
-
-
-
-
-
-
-
-
-
-
- Es wurden keine benutzerdefinierten Felder angelegt.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ title }}
-
-
-
-
-
-
-
diff --git a/apps/frontend/src/components/FilesListAndUpload.vue b/apps/frontend/src/components/FilesListAndUpload.vue
index 476d33fe..612cea83 100644
--- a/apps/frontend/src/components/FilesListAndUpload.vue
+++ b/apps/frontend/src/components/FilesListAndUpload.vue
@@ -17,25 +17,25 @@ type Document = {
name: string
fileId: string
added: boolean
- id?: number
+ id?: string
mimetype: string | null
createdAt?: Date
}
type UpdateDocument = {
name: string
- id: number
+ id: string
}
type EntityType = 'unterveranstaltung'
const props = defineProps<{
- entityId: number
+ entityId: string
entityType: EntityType
}>()
const documents = ref
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ noDataMessage ?? 'Keine Daten vorhanden.' }} -
-
-
-
-
-
-
-
-
-
- {{
- veranstaltung.name
- }}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/apps/frontend/src/components/LoadingBar.vue b/apps/frontend/src/components/LoadingBar.vue
new file mode 100644
index 00000000..32ffdddd
--- /dev/null
+++ b/apps/frontend/src/components/LoadingBar.vue
@@ -0,0 +1,13 @@
+
+
+
+
-
-
-
- {{ veranstaltungTitle(selectedVeranstaltung) }}
-
-
-
-
+
+
+
diff --git a/apps/frontend/src/components/Modal/IscRedirectModal.vue b/apps/frontend/src/components/Modal/IscRedirectModal.vue
deleted file mode 100644
index 3ba1b4cf..00000000
--- a/apps/frontend/src/components/Modal/IscRedirectModal.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
-
- -
-
- - -
-
-
- - Registrierung erfolgreich -
-Du hast Dich erfolgreich registriert. Wir haben dir eine E-Mail mit einem Bestätigungslink geschickt.
-
+
+
+
+
+
+ |
+
+
+ |
+
+
|---|
|
+ |
+
+
|
+ Keine Ergebnisse … + |
+
|
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/frontend/src/components/Table/Filter.vue b/apps/frontend/src/components/Table/Filter.vue
new file mode 100644
index 00000000..be7ff0f5
--- /dev/null
+++ b/apps/frontend/src/components/Table/Filter.vue
@@ -0,0 +1,107 @@
+
+
+
+
+ Seite {{ table.getState().pagination.pageIndex + 1 }} von {{ table.getPageCount() }}
+ Insgesamt {{ query.data.value.total }} Ergebnisse
+
+ Der Anmeldelink wurde erfolgreich erstellt.
-Bitte kopieren den Link. Du kannst den Link kein weiteres Mal anschauen.
-
diff --git a/apps/frontend/src/components/UIComponents/AvatarEditModal.vue b/apps/frontend/src/components/UIComponents/AvatarEditModal.vue
index cf5909b7..6e33f2a9 100644
--- a/apps/frontend/src/components/UIComponents/AvatarEditModal.vue
+++ b/apps/frontend/src/components/UIComponents/AvatarEditModal.vue
@@ -10,12 +10,11 @@ import { apiClient } from '@/api'
import { handleUpload } from '@/helpers/handleUpload'
const props = defineProps<{
- personId: number
+ personId: string
showRemove?: boolean
}>()
const emit = defineEmits<{
- triggerRefresh: []
deleted: []
uploaded: [photoId: string]
}>()
@@ -31,7 +30,6 @@ const open = () => {
const close = () => {
if (modal.value) {
modal.value.hide()
- emit('triggerRefresh')
}
}
diff --git a/apps/frontend/src/components/UIComponents/UserLogo.vue b/apps/frontend/src/components/UIComponents/UserLogo.vue
index c5a62acc..2dd46cc5 100644
--- a/apps/frontend/src/components/UIComponents/UserLogo.vue
+++ b/apps/frontend/src/components/UIComponents/UserLogo.vue
@@ -2,13 +2,13 @@
import { apiClient } from '@/api'
import { PencilSquareIcon } from '@heroicons/vue/24/outline'
import { useAsyncState } from '@vueuse/core'
-import { computed, ref, watch, withDefaults } from 'vue'
+import { computed, ref, watch } from 'vue'
import AvatarEditModal from './AvatarEditModal.vue'
import Loading from './Loading.vue'
const props = withDefaults(
defineProps<{
- personId?: number
+ personId?: string
photoId?: string | null
name?: any
firstname?: string
@@ -29,12 +29,6 @@ const props = withDefaults(
}
)
-const emit = defineEmits<{
- triggerRefresh: []
-}>()
-
-const photoId = ref(props.photoId)
-
const getName = computed(() => {
let name
if (props.name) {
@@ -57,9 +51,9 @@ const {
execute: loadPhotoUrl,
} = useAsyncState(
async () => {
- if (photoId.value) {
+ if (props.photoId) {
return await apiClient.file.fileGetUrl.query({
- id: photoId.value,
+ id: props.photoId,
personId: props.personId,
})
}
@@ -70,12 +64,6 @@ const {
}
)
-const updated = (id?: string) => {
- if (id) photoId.value = id
- loadPhotoUrl()
- emit('triggerRefresh')
-}
-
watch(
() => props.photoId,
() => {
@@ -142,7 +130,5 @@ const openAvatarEditModal = () => {
ref="refAvatarEditModal"
:person-id="props.personId"
:show-remove="!!photoUrl"
- @trigger-refresh="updated"
- @uploaded="(id) => updated(id)"
/>
diff --git a/apps/frontend/src/components/UIComponents/VeranstaltungCard.vue b/apps/frontend/src/components/UIComponents/VeranstaltungCard.vue
index 2faaa60f..5ceb4893 100644
--- a/apps/frontend/src/components/UIComponents/VeranstaltungCard.vue
+++ b/apps/frontend/src/components/UIComponents/VeranstaltungCard.vue
@@ -9,23 +9,18 @@ import Button from './Button.vue'
import type { RouterOutput } from '@codeanker/api'
import { formatDateWith } from '@codeanker/helpers'
-const { veranstaltung } = defineProps()
-
-type Veranstaltung = Awaited<
- RouterOutput['veranstaltung']['verwaltungList'] | RouterOutput['veranstaltung']['gliederungList']
->[number]
+type Veranstaltung = RouterOutput['veranstaltung']['list'][number]
interface Props {
veranstaltung: Veranstaltung
hasUnterveranstaltungen?: number
}
-const totalAnmeldungen = computed(() =>
- veranstaltung.unterveranstaltungen.map((u) => u._count.Anmeldung).reduce((a, b) => a + b, 0)
-)
+const { veranstaltung } = defineProps()
+
const keyInfoDateFormat = 'dddd, DD. MMMM YYYY'
-const percent = computed(() => (totalAnmeldungen.value / veranstaltung.maxTeilnehmende) * 100)
+const percent = computed(() => (veranstaltung.anzahlAnmeldungen / veranstaltung.maxTeilnehmende) * 100)
@@ -43,7 +38,7 @@ const percent = computed(() => (totalAnmeldungen.value / veranstaltung.maxTeilne
- {{ totalAnmeldungen }} / + {{ veranstaltung.anzahlAnmeldungen }} / {{ veranstaltung.maxTeilnehmende }} Plätze belegt
diff --git a/apps/frontend/src/components/UIComponents/components/Tab.vue b/apps/frontend/src/components/UIComponents/components/Tab.vue index 8014450c..801cb34a 100644 --- a/apps/frontend/src/components/UIComponents/components/Tab.vue +++ b/apps/frontend/src/components/UIComponents/components/Tab.vue @@ -9,7 +9,7 @@ defineProps<{
-
-
diff --git a/apps/frontend/src/components/data/AnmeldeLinkTable.vue b/apps/frontend/src/components/data/AnmeldeLinkTable.vue
index 9abb9a33..fa5f80aa 100644
--- a/apps/frontend/src/components/data/AnmeldeLinkTable.vue
+++ b/apps/frontend/src/components/data/AnmeldeLinkTable.vue
@@ -1,155 +1,114 @@
-
-
+
-
{{ currentAnmeldung?.unterveranstaltung.beschreibung }}
-import { getAccountStatusColor } from '@/helpers/getAccountStatusColors'
-import type { RouterInput, RouterOutput } from '@codeanker/api'
-import type { TGridColumn } from '@codeanker/datagrid'
-import { dayjs } from '@codeanker/helpers'
-import { useRouter } from 'vue-router'
-import DataGridDoubleLineCell from '../DataGridDoubleLineCell.vue'
-import GenericDataGrid, {
- type FetchCountFunction,
- type FetchPageFunction,
- type GenericGridProps,
-} from '../GenericDataGrid.vue'
-import Badge from '../UIComponents/Badge.vue'
import { apiClient } from '@/api'
-import { defineAsyncComponent } from 'vue'
+import { useRouteTitle } from '@/composables/useRouteTitle'
+import type { RouterOutput } from '@codeanker/api'
+import { keepPreviousData, useQuery } from '@tanstack/vue-query'
+import { createColumnHelper } from '@tanstack/vue-table'
+import { h } from 'vue'
+import { useRouter } from 'vue-router'
+import type { Query } from '../Table/DataTable.vue'
+import initialData from '../Table/initialData'
+import UserLogo from '../UIComponents/UserLogo.vue'
+import DataTable from '../Table/DataTable.vue'
+import { dayjs } from '@codeanker/helpers'
-export type TData = RouterOutput['person']['list'][number]
-export type TFilter = RouterInput['person']['list']['filter']
-export type TOrderBy = RouterInput['person']['list']['orderBy']
-export type GridProps = GenericGridProps
+type Person = RouterOutput['person']['list']['data'][number]
-export type FetchPersonCountFunction = FetchCountFunction
-export type FetchPersonPageFunction = FetchPageFunction
+const { setTitle } = useRouteTitle()
+setTitle('Personen')
const router = useRouter()
-const columns: TGridColumn[] = [
- {
- field: 'photoId',
- title: ' ',
- size: '78px',
- cell: defineAsyncComponent(() => import('@/components/UIComponents/UserLogo.vue')),
- cellProps: (formattedValue, row) => {
- return {
- firstname: row.content.firstname,
- lastname: row.content.lastname,
- photoId: row.content.photoId,
+const column = createColumnHelper()
+const columns = [
+ column.accessor('photoId', {
+ size: 10,
+ header: 'Foto',
+ cell({ getValue, row }) {
+ const id = getValue()
+ return h(UserLogo, {
+ firstname: row.original.firstname,
+ lastname: row.original.lastname,
+ photoId: id,
cssClasses: 'h-10 w-10',
- }
+ })
},
- },
- {
- field: 'firstname',
- title: 'Name',
- sortable: true,
- format: (_, row) => `${row.firstname} ${row.lastname}`,
- },
- {
- field: 'birthday',
- title: 'Alter',
- preset: 'date',
- cell: DataGridDoubleLineCell,
- cellProps: (formattedValue, row) => {
- return {
- title: `${dayjs().diff(row.content.birthday, 'year')} Jahre`,
- message: formattedValue.value,
- }
+ }),
+ column.accessor('id', {
+ id: 'name',
+ header: 'Name',
+ enableColumnFilter: true,
+ cell({ row }) {
+ return `${row.original.firstname} ${row.original.lastname}`
},
- sortable: true,
- },
- {
- field: 'gliederung.name',
- title: 'Gliederung',
- sortable: true,
- },
- {
- field: 'account.activatedAt',
- title: 'Account',
- cell: Badge,
- preset: 'date',
- cellProps: (formattedValue, row) => {
- return {
- color: getAccountStatusColor(row.content.account?.status),
- title: formattedValue.value,
- text: row.content.account?.status,
- }
+ }),
+ column.accessor('birthday', {
+ header: 'Alter',
+ enableColumnFilter: true,
+ enableSorting: true,
+ sortDescFirst: true,
+ invertSorting: true,
+ cell({ getValue }) {
+ const value = getValue()
+ return dayjs().diff(value, 'year') + ' Jahre'
},
- },
+ meta: {
+ filter: {
+ label: 'Geburtstag',
+ type: 'date-range',
+ },
+ },
+ }),
+ column.accessor('gliederung.name', {
+ header: 'Gliederung',
+ enableColumnFilter: true,
+ // meta: {
+ // filter: {
+ // type: 'select',
+ // options: async () => {
+ // const values = await apiClient.gliederung.publicList.query({
+ // filter: {},
+ // pagination: {
+ // take: 1000,
+ // skip: 0,
+ // },
+ // orderBy: [['name', 'asc']],
+ // })
+ // return values.map((v) => ({ value: v.id, label: v.name }))
+ // },
+ // },
+ // },
+ }),
+ column.accessor('_count.anmeldungen', {
+ header: 'Anmeldungen',
+ enableSorting: true,
+ cell({ getValue }) {
+ return getValue() ?? 0
+ },
+ }),
]
-const fetchPage: FetchPersonPageFunction = (pagination, filter, orderBy) =>
- apiClient.person.list.query({
- filter: filter,
- orderBy: orderBy,
- pagination: pagination,
+const query: Query = (pagination, filter, orderBy) =>
+ useQuery({
+ queryKey: ['person', pagination, filter, orderBy],
+ queryFn: () =>
+ apiClient.person.list.query({
+ pagination: {
+ pageIndex: pagination.value.pageIndex,
+ pageSize: pagination.value.pageSize,
+ },
+ filter: filter.value.reduce((prev, curr) => {
+ return {
+ ...prev,
+ [curr.id]: curr.value,
+ }
+ }, {}),
+ orderBy: orderBy.value,
+ }),
+ initialData,
+ placeholderData: keepPreviousData,
})
-const fetchCount: FetchPersonCountFunction = (filter) =>
- apiClient.person.count.query({
- filter: filter,
- })
+function onClick(person: Person) {
+ router.push({ name: 'Verwaltung Persondetails', params: { personId: person.id } })
+}
-
{{ anmeldung.unterveranstaltung.veranstaltung.name }}
k === field)?.[1] ?? undefined
- if (value === undefined && defaultValue !== undefined) {
- await router.replace({ query: { ...route.query, [`orderBy_${field}`]: '' } })
- } else {
- if (value === defaultValue) await router.replace({ query: { ...route.query, [`orderBy_${field}`]: undefined } })
- else await router.replace({ query: { ...route.query, [`orderBy_${field}`]: value } })
- }
- }
-
- async function reset() {
- for (const [key] of routeQueryOrderByList.value) {
- await router.replace({ query: { ...route.query, [`orderBy_${key as string}`]: undefined } })
- }
- }
-
- return {
- orderBy,
- setOrderBy,
- reset,
- }
-}
diff --git a/apps/frontend/src/composables/useVeranstaltung.ts b/apps/frontend/src/composables/useVeranstaltung.ts
index f6a57d08..ff322fe3 100644
--- a/apps/frontend/src/composables/useVeranstaltung.ts
+++ b/apps/frontend/src/composables/useVeranstaltung.ts
@@ -21,7 +21,7 @@ export function useVeranstaltung() {
execute,
isLoading,
} = useAsyncState(async () => {
- return apiClient.veranstaltung.verwaltungGet.query({ id: parseInt(route.params.veranstaltungId as string) })
+ return apiClient.veranstaltung.verwaltungGet.query({ id: route.params.veranstaltungId as string })
}, null)
return {
veranstaltung,
diff --git a/apps/frontend/src/helpers/handleUpload.ts b/apps/frontend/src/helpers/handleUpload.ts
index b8f20125..c9e71354 100644
--- a/apps/frontend/src/helpers/handleUpload.ts
+++ b/apps/frontend/src/helpers/handleUpload.ts
@@ -46,7 +46,7 @@ async function uploadFile(file: File, dbFile: dbFile): Promise {
formData.append('file', file)
if (dbFile.provider === 'LOCAL') {
- const response = await fetch(`/api/upload/file/LOCAL/${dbFile.id}`, {
+ const response = await fetch(`/api/file/upload/LOCAL/${dbFile.id}`, {
method: 'POST',
body: formData,
})
diff --git a/apps/frontend/src/layouts/AnmeldungLayout.vue b/apps/frontend/src/layouts/AnmeldungLayout.vue
index 91606e3f..587b57c1 100644
--- a/apps/frontend/src/layouts/AnmeldungLayout.vue
+++ b/apps/frontend/src/layouts/AnmeldungLayout.vue
@@ -11,7 +11,7 @@ import { computed, inject, provide, ref, type Ref } from 'vue'
const route = useRoute()
const unterveranstaltungId = computed(() => {
- return parseInt(route.params.unterveranstaltungId as string)
+ return route.params.unterveranstaltungId as string
})
const { state: unterveranstaltung } = useAsyncState(async () => {
diff --git a/apps/frontend/src/main.ts b/apps/frontend/src/main.ts
index 12012725..8ceaca61 100644
--- a/apps/frontend/src/main.ts
+++ b/apps/frontend/src/main.ts
@@ -1,11 +1,12 @@
-import { createApp } from 'vue'
+import './assets/main.scss'
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
import router from './router'
-import './assets/main.scss'
import PrimeVue from 'primevue/config'
-createApp(App).use(router).use(PrimeVue).mount('#app')
+createApp(App).use(router).use(PrimeVue).use(VueQueryPlugin).mount('#app')
// Set Document Title relate to the Hostname
document.title = window.location.hostname
diff --git a/apps/frontend/src/types.d.ts b/apps/frontend/src/types.d.ts
index d398e480..c69f5d4d 100644
--- a/apps/frontend/src/types.d.ts
+++ b/apps/frontend/src/types.d.ts
@@ -1,4 +1,7 @@
+import '@tanstack/vue-table'
import type { RouteLocationNormalizedLoadedGeneric, RouteLocationRaw } from 'vue-router'
+import type { Option } from './components/BasicInputs/BasicSelect.vue'
+import type { MaybeRef } from 'vue'
type Breadcrumb = {
text: string
@@ -13,3 +16,36 @@ declare module 'vue-router' {
breadcrumbs?: BreadcrumbDefinition[]
}
}
+
+declare module '@tanstack/vue-table' {
+ type ColumnFilters =
+ | {
+ type: 'select' | 'multi-select'
+ options: Option[] | (() => Promise)
+ }
+ | {
+ type: 'text'
+ }
+ | {
+ type: 'date'
+ }
+ | {
+ type: 'date-range'
+ }
+ | {
+ type: 'number'
+ }
+
+ interface ColumnMeta {
+ class?: {
+ header?: string
+ body?: string
+ footer?: string
+ }
+
+ hidden?: MaybeRef
+ filter?: {
+ label?: string
+ } & ColumnFilters
+ }
+}
diff --git a/apps/frontend/src/views/Anmeldung/AnmeldungFormGeneral.vue b/apps/frontend/src/views/Anmeldung/AnmeldungFormGeneral.vue
index e9ade97b..8a984957 100644
--- a/apps/frontend/src/views/Anmeldung/AnmeldungFormGeneral.vue
+++ b/apps/frontend/src/views/Anmeldung/AnmeldungFormGeneral.vue
@@ -84,7 +84,7 @@ const {
comment: anmeldung.comment,
},
customFieldValues: Object.entries(customFieldValues.value).map((entry) => ({
- fieldId: parseInt(entry[0]),
+ fieldId: entry[0],
value: entry[1],
})),
})
diff --git a/apps/frontend/src/views/Anmeldung/FotoUpload.vue b/apps/frontend/src/views/Anmeldung/FotoUpload.vue
index 70dba903..9f9073b0 100644
--- a/apps/frontend/src/views/Anmeldung/FotoUpload.vue
+++ b/apps/frontend/src/views/Anmeldung/FotoUpload.vue
@@ -26,7 +26,7 @@ const { state, execute, error } = useAsyncState(
() =>
apiClient.anmeldung.accessTokenValidate.query({
unterveranstaltungId: unterveranstaltung.value.id,
- anmeldungId: parseInt(anmeldungId),
+ anmeldungId,
accessToken,
}),
undefined,
@@ -64,12 +64,12 @@ async function upload(toUploadFile: File) {
try {
const res = await handlePublicPhotoUpload(toUploadFile, {
unterveranstaltungId: unterveranstaltung.value.id,
- anmeldungId: parseInt(anmeldungId),
+ anmeldungId,
accessToken,
})
await apiClient.anmeldung.anmeldungFotoUpload.mutate({
unterveranstaltungId: unterveranstaltung.value.id,
- anmeldungId: parseInt(anmeldungId),
+ anmeldungId,
accessToken,
fileId: res.id,
})
diff --git a/apps/frontend/src/views/Dashboard/Dashboard.vue b/apps/frontend/src/views/Dashboard/Dashboard.vue
index 7fd26b09..819d347c 100644
--- a/apps/frontend/src/views/Dashboard/Dashboard.vue
+++ b/apps/frontend/src/views/Dashboard/Dashboard.vue
@@ -1,16 +1,13 @@
@@ -18,8 +15,12 @@ setTitle('Aktuelle Veranstaltungen')
diff --git a/apps/frontend/src/views/Development/components/DataGridComponent.vue b/apps/frontend/src/views/Development/components/DataGridComponent.vue
deleted file mode 100644
index 47824039..00000000
--- a/apps/frontend/src/views/Development/components/DataGridComponent.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-
-
-
- ()
diff --git a/apps/frontend/src/views/Login/Login.vue b/apps/frontend/src/views/Login/Login.vue
index bb9f2b0c..ba523aeb 100644
--- a/apps/frontend/src/views/Login/Login.vue
+++ b/apps/frontend/src/views/Login/Login.vue
@@ -20,13 +20,13 @@ const email = ref('')
const password = ref('')
// read "jwt" from url hashbang
-if (location.hash) {
- const hash = location.hash.substr(1)
- const hashParams = new URLSearchParams(hash)
+if (location.search) {
+ const hashParams = new URLSearchParams(location.search)
const jwt = hashParams.get('jwt')
if (jwt) {
localStorage.setItem('jwt', jwt)
- location.hash = ''
+ location.search = ''
+ router.push({ name: 'Dashboard' })
}
const error = hashParams.get('error')
if (error) {
@@ -54,8 +54,7 @@ const formatLoginError = computed(() => {
const version = `${import.meta.env.VITE_APP_VERSION || 'unknown'}-${import.meta.env.VITE_APP_COMMIT_HASH || 'unknown'}`
-const origin = `${location.href}/api`
-const oauthHref = `/api/connect/dlrg?mode=login&origin=${encodeURIComponent(origin)}`
+const oauthHref = `/api/oidc/dlrg/login`
diff --git a/apps/frontend/src/views/Login/PasswordReset.vue b/apps/frontend/src/views/Login/PasswordReset.vue
index 447eac31..413abb12 100644
--- a/apps/frontend/src/views/Login/PasswordReset.vue
+++ b/apps/frontend/src/views/Login/PasswordReset.vue
@@ -1,54 +1,34 @@
@@ -76,38 +56,18 @@ const showSet = computed(() => {
-
-
-
+
{
+
+
-
-
+
diff --git a/apps/frontend/src/views/Login/PasswordResetRequest.vue b/apps/frontend/src/views/Login/PasswordResetRequest.vue
new file mode 100644
index 00000000..e5009640
--- /dev/null
+++ b/apps/frontend/src/views/Login/PasswordResetRequest.vue
@@ -0,0 +1,92 @@
+
+
+
+
-
diff --git a/apps/frontend/src/views/Dashboard/Gliederung.vue b/apps/frontend/src/views/Dashboard/Gliederung.vue
deleted file mode 100644
index c1767e64..00000000
--- a/apps/frontend/src/views/Dashboard/Gliederung.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-
-
-
-
Nicht schlimm, hier kannst Du es zurücksetzen
-
+
Der Token ist leider ungültig.
++ Wenn du glaubst, dass es sich dabei um einen Fehler handelt, kannst du einfach einen neuen Link anfordern. +
+ +
-
- Wir haben Dir einen Link zum Zurücksetzen an deine E-Mail gesendet.
- Wir haben dein Passwort geändert.
-
+ Wir haben dein Passwort geändert.
+
+
+
+
diff --git a/apps/frontend/src/views/Login/routes.ts b/apps/frontend/src/views/Login/routes.ts
index 40e92b85..aa4319b4 100644
--- a/apps/frontend/src/views/Login/routes.ts
+++ b/apps/frontend/src/views/Login/routes.ts
@@ -17,20 +17,18 @@ const routesAuth: Route[] = [
{
name: 'PasswortReset',
path: 'password-reset',
+ component: () => import('./PasswordResetRequest.vue'),
+ meta: {
+ public: true,
+ },
+ },
+ {
+ name: 'PasswortResetToken',
+ path: 'password-reset/:token',
component: () => import('./PasswordReset.vue'),
meta: {
public: true,
},
- children: [
- {
- name: 'PasswortResetToken',
- path: ':token',
- component: () => import('./PasswordReset.vue'),
- meta: {
- public: true,
- },
- },
- ],
},
],
},
diff --git a/apps/frontend/src/views/Registrierung/GliederungRegistrierung.vue b/apps/frontend/src/views/Registrierung/GliederungRegistrierung.vue
deleted file mode 100644
index d2118838..00000000
--- a/apps/frontend/src/views/Registrierung/GliederungRegistrierung.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Website Logo]()
+
+
+
+ Passwort vergessen
+Nicht schlimm, hier kannst Du es zurücksetzen
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/apps/frontend/src/views/Registrierung/GliederungRegistrierungCallback.vue b/apps/frontend/src/views/Registrierung/GliederungRegistrierungCallback.vue
deleted file mode 100644
index e7bd4271..00000000
--- a/apps/frontend/src/views/Registrierung/GliederungRegistrierungCallback.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
- ![Brahmsee Logo]()
-
-
-
- Registrierung als Gliederung
-- Bitte beachte, dass diese Art der Registrierung nur für die Verantwortlichen einer Gliederung vorgesehen ist. -
-Wie möchtest Du dich registrieren?
-
-
-
-
-
- - Registrierung erfolgreich -
-Du hast Dich erfolgreich registriert. Wir haben dir eine E-Mail mit einem Bestätigungslink geschickt.
-
-
-
diff --git a/apps/frontend/src/views/Registrierung/Registrierung.vue b/apps/frontend/src/views/Registrierung/Registrierung.vue
index a0fa72c1..8f051566 100644
--- a/apps/frontend/src/views/Registrierung/Registrierung.vue
+++ b/apps/frontend/src/views/Registrierung/Registrierung.vue
@@ -1,14 +1,73 @@
-
-
-
-
-
- {{ error }}
-
- Du kannst das Fenster schließen.
-
-
+
diff --git a/apps/frontend/src/views/Verwaltung/Persons/PersonDetail.vue b/apps/frontend/src/views/Verwaltung/Persons/PersonDetail.vue
index 984620a6..40949b73 100644
--- a/apps/frontend/src/views/Verwaltung/Persons/PersonDetail.vue
+++ b/apps/frontend/src/views/Verwaltung/Persons/PersonDetail.vue
@@ -28,7 +28,7 @@ const {
isLoading: isLoading,
} = useAsyncState(async () => {
const personId = route.params.personId as string
- const result = await apiClient.person.get.query({ id: parseInt(personId) })
+ const result = await apiClient.person.get.query({ id: personId })
setTitle(`Person: ${result.firstname} ${result.lastname}`)
return result
}, null)
diff --git a/apps/frontend/src/views/Verwaltung/Persons/PersonList.vue b/apps/frontend/src/views/Verwaltung/Persons/PersonList.vue
index 08543fd4..e9343c96 100644
--- a/apps/frontend/src/views/Verwaltung/Persons/PersonList.vue
+++ b/apps/frontend/src/views/Verwaltung/Persons/PersonList.vue
@@ -4,8 +4,8 @@ import { PlusIcon } from '@heroicons/vue/24/outline'
-
+
+ [number]
-type TFilter = RouterInput['ort']['list']['filter']
-type TOrderBy = RouterInput['ort']['list']['orderBy']
+type Ort = RouterOutput['ort']['table']['data'][number]
+type Address = Ort['address']
-const columns: TGridColumn[] = [
- {
- field: 'id',
- title: 'Id',
- sortable: true,
- },
- {
- field: 'name',
- title: 'Name',
- filter: { component: BasicInput, key: 'name' },
- sortable: true,
- },
- {
- field: 'address',
- format: (address) => `${address.street} ${address.streetNumber}, ${address.zip} ${address.city}`,
- title: 'Adresse',
- filter: { component: BasicInput, key: 'city' },
- sortable: true,
- },
+const column = createColumnHelper()
+const columns = [
+ column.accessor('name', {
+ header: 'Name',
+ enableColumnFilter: true,
+ enableSorting: true,
+ }),
+ column.accessor('address', {
+ header: 'Adresse',
+ cell({ getValue }) {
+ const value = getValue()
+ return value ? `${value.street} ${value.streetNumber}, ${value.zip} ${value.city}` : 'Keine Adresse angegeben'
+ },
+ }),
]
-async function fetchPage(
- pagination: {
- take: number
- skip: number
- },
- filter: TFilter,
- orderBy: TOrderBy
-): Promise {
- return apiClient.ort.list.query({
- filter: filter,
- orderBy: orderBy,
- pagination: pagination,
- })
-}
-async function fetchCount(filter: TFilter): Promise {
- return apiClient.ort.count.query({
- filter: filter,
+const query: Query = (pagination, filter, orderBy) =>
+ useQuery({
+ queryKey: ['ort', pagination, filter, orderBy],
+ queryFn: () =>
+ apiClient.ort.table.query({
+ pagination: {
+ pageIndex: pagination.value.pageIndex,
+ pageSize: pagination.value.pageSize,
+ },
+ filter: filter.value.reduce((prev, curr) => {
+ return {
+ ...prev,
+ [curr.id]: curr.value,
+ }
+ }, {}),
+ orderBy: orderBy.value,
+ }),
+ initialData,
+ placeholderData: keepPreviousData,
})
+
+const router = useRouter()
+
+function onClick(ort: Ort) {
+ router.push({ name: 'Verwaltung Ortdetails', params: { ortId: ort.id } })
}
@@ -71,22 +73,12 @@ async function fetchCount(filter: TFilter): Promise {
Ort erstellen
- Registrierung
-Wie möchtest Du dich registrieren?
+Registriere dich mit deiner E-Mail Adresse und einem Passwort
-
+
+
+ +
+
+
+
+ +
+
+ + +
+
Die Registrierung war erfolgreich.
++ Bitte prüfe dein E-Mail Postfach und bestätige deinen Account. Ohne Aktivierung kannst du den Account nicht + verwenden. +
+
-
-
-
diff --git a/apps/frontend/src/views/Registrierung/routes.ts b/apps/frontend/src/views/Registrierung/routes.ts
index 5b0aa0e2..767c8f4e 100644
--- a/apps/frontend/src/views/Registrierung/routes.ts
+++ b/apps/frontend/src/views/Registrierung/routes.ts
@@ -14,30 +14,6 @@ const routesRegistrierung: Route[] = [
public: true,
},
},
- {
- name: 'GliederungRegistrierung',
- path: 'gliederung',
- component: () => import('./GliederungRegistrierung.vue'),
- meta: {
- public: true,
- },
- },
- {
- name: 'TeilnehmerRegistrierung',
- path: 'teilnehmer',
- component: () => import('./TeilnehmerRegistrierung.vue'),
- meta: {
- public: true,
- },
- },
- {
- name: 'GliederungRegistrierungCallback',
- path: 'gliederung/callback',
- component: () => import('./GliederungRegistrierungCallback.vue'),
- meta: {
- public: true,
- },
- },
{
name: 'Email bestätigen',
path: 'confirm/:activationToken',
diff --git a/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungCreate.vue b/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungCreate.vue
index 89c4760f..00666b61 100644
--- a/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungCreate.vue
+++ b/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungCreate.vue
@@ -2,9 +2,10 @@
import { computed } from 'vue'
import CustomFieldsFormCreate from '@/components/CustomFields/CustomFieldsFormCreate.vue'
-import { paramInt } from '@/helpers/params'
+import { useRoute } from 'vue-router'
-const unterveranstaltungId = computed(() => paramInt('unterveranstaltungId'))
+const route = useRoute()
+const unterveranstaltungId = computed(() => route.params.unterveranstaltungId as string)
diff --git a/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungEdit.vue b/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungEdit.vue
index e7496734..86fbca7f 100644
--- a/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungEdit.vue
+++ b/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungEdit.vue
@@ -2,10 +2,11 @@
import { computed } from 'vue'
import CustomFieldsFormEdit from '@/components/CustomFields/CustomFieldsFormEdit.vue'
-import { paramInt } from '@/helpers/params'
+import { useRoute } from 'vue-router'
-const unterveranstaltungId = computed(() => paramInt('unterveranstaltungId'))
-const fieldId = computed(() => paramInt('fieldId'))
+const route = useRoute()
+const unterveranstaltungId = computed(() => route.params.unterveranstaltungId as string)
+const fieldId = computed(() => route.params.fieldId as string)
diff --git a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue
index 3bcce28f..f985d383 100644
--- a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue
+++ b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue
@@ -43,11 +43,11 @@ const { state: unterveranstaltung } = useAsyncState(async () => {
let result
if (loggedInAccount.value?.role === 'ADMIN') {
result = await apiClient.unterveranstaltung.verwaltungGet.query({
- id: parseInt(route.params.unterveranstaltungId as string),
+ id: route.params.unterveranstaltungId as string,
})
} else {
result = await apiClient.unterveranstaltung.gliederungGet.query({
- id: parseInt(route.params.unterveranstaltungId as string),
+ id: route.params.unterveranstaltungId as string,
})
}
setTitle(`Ausschreibung für ${result.veranstaltung.name} (${result.gliederung.name})`)
@@ -58,7 +58,7 @@ const { state: countAnmeldungen } = useAsyncState(async () => {
return apiClient.anmeldung.count.query({
filter: {
type: 'unterveranstaltung',
- unterveranstaltungId: parseInt(route.params.unterveranstaltungId as string),
+ unterveranstaltungId: route.params.unterveranstaltungId as string,
},
})
}, undefined)
diff --git a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungEdit.vue b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungEdit.vue
index 8e018f1e..45f7ee11 100644
--- a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungEdit.vue
+++ b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungEdit.vue
@@ -11,11 +11,11 @@ const { state: unterveranstaltung, execute: fetchUnterveranstaltung } = useAsync
const unterveranstaltungId = route.params.unterveranstaltungId as string
if (loggedInAccount.value?.role === 'ADMIN') {
return apiClient.unterveranstaltung.verwaltungGet.query({
- id: parseInt(unterveranstaltungId),
+ id: unterveranstaltungId,
})
} else {
return apiClient.unterveranstaltung.gliederungGet.query({
- id: parseInt(unterveranstaltungId),
+ id: unterveranstaltungId,
})
}
}, null)
diff --git a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungList.vue b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungList.vue
index 2435a0bd..639da85f 100644
--- a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungList.vue
+++ b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungList.vue
@@ -1,7 +1,7 @@
-
-
-
-
-
-
-
-
-
- ![Brahmsee Logo]()
-
-
-
- Registrierung als Teilnehmer
-Wie möchtest Du dich registrieren?
-
-
-
-
diff --git a/apps/frontend/src/views/Verwaltung/Orte/OrtDetail.vue b/apps/frontend/src/views/Verwaltung/Orte/OrtDetail.vue
index 25a302db..31f21f00 100644
--- a/apps/frontend/src/views/Verwaltung/Orte/OrtDetail.vue
+++ b/apps/frontend/src/views/Verwaltung/Orte/OrtDetail.vue
@@ -11,7 +11,7 @@ const { setTitle } = useRouteTitle()
const route = useRoute()
const { state: ort, execute: fetchOrt } = useAsyncState(async () => {
const ortId = route.params.ortId as string
- const result = await apiClient.ort.verwaltungGet.query({ id: parseInt(ortId) })
+ const result = await apiClient.ort.verwaltungGet.query({ id: ortId })
setTitle('Ort: ' + result.name)
return result
}, null)
diff --git a/apps/frontend/src/views/Verwaltung/Orte/OrtList.vue b/apps/frontend/src/views/Verwaltung/Orte/OrtList.vue
index f6d857d9..98311552 100644
--- a/apps/frontend/src/views/Verwaltung/Orte/OrtList.vue
+++ b/apps/frontend/src/views/Verwaltung/Orte/OrtList.vue
@@ -2,60 +2,62 @@
import { PlusIcon } from '@heroicons/vue/24/outline'
import { apiClient } from '@/api'
-import BasicInput from '@/components/BasicInputs/BasicInput.vue'
-import GenericDataGrid from '@/components/GenericDataGrid.vue'
+import type { Query } from '@/components/Table/DataTable.vue'
+import DataTable from '@/components/Table/DataTable.vue'
+import initialData from '@/components/Table/initialData'
import { useRouteTitle } from '@/composables/useRouteTitle'
-import router from '@/router'
-import { type RouterInput, type RouterOutput } from '@codeanker/api'
-import { type TGridColumn } from '@codeanker/datagrid'
+import { type RouterOutput } from '@codeanker/api'
+import { keepPreviousData, useQuery } from '@tanstack/vue-query'
+import { createColumnHelper } from '@tanstack/vue-table'
+import { useRouter } from 'vue-router'
const { setTitle } = useRouteTitle()
setTitle('Orte')
-/// Typen von den Daten, Filter und Sortierung
-type TData = Awaited
-
-
-
-
-
-
+ [number]
-type TFilter = RouterInput['gliederung']['list']['filter']
-type TOrderBy = RouterInput['gliederung']['list']['orderBy']
+const router = useRouter()
-const columns: TGridColumn[] = [
- {
- field: 'edv',
- title: 'EDV',
- filter: { component: BasicInput, key: 'name' },
- sortable: true,
- },
- {
- field: 'name',
- title: 'Gliederung',
- filter: { component: BasicInput, key: 'name' },
- sortable: true,
- },
-]
+type Gliederung = RouterOutput['gliederung']['list']['data'][number]
-/// useGrid und useFeathersGrid composable zum fetchen
-async function fetchPage(
- pagination: {
- take: number
- skip: number
- },
- filter: TFilter,
+const column = createColumnHelper()
+const columns = [
+ column.accessor('name', {
+ header: 'Name',
+ enableColumnFilter: true,
+ enableSorting: true,
+ }),
+ column.accessor('edv', {
+ header: 'EDV Nummer',
+ enableColumnFilter: true,
+ enableSorting: true,
+ }),
+]
- orderBy: TOrderBy
-): Promise {
- return apiClient.gliederung.list.query({
- filter: filter,
- orderBy: orderBy,
- pagination: pagination,
+const query: Query = (pagination, filter, orderBy) =>
+ useQuery({
+ queryKey: ['gliederung', pagination, filter, orderBy],
+ queryFn: () =>
+ apiClient.gliederung.list.query({
+ pagination: {
+ pageIndex: pagination.value.pageIndex,
+ pageSize: pagination.value.pageSize,
+ },
+ filter: filter.value.reduce((prev, curr) => {
+ return {
+ ...prev,
+ [curr.id]: curr.value,
+ }
+ }, {}),
+ orderBy: orderBy.value,
+ }),
+ initialData,
+ placeholderData: keepPreviousData,
})
-}
-async function fetchCount(filter: TFilter): Promise {
- return apiClient.gliederung.count.query({
- filter: filter,
+
+function onClick(gliederung: Gliederung) {
+ router.push({
+ name: 'Verwaltung Gliederungsdetails',
+ params: {
+ gliederungId: gliederung.id,
+ },
})
}
@@ -67,25 +75,12 @@ async function fetchCount(filter: TFilter): Promise {
Gliederung erstellen
-
-
-
-
-
-
- - Hier findest Du alle Personen die sich zu Veranstaltungen angemeldet haben. -
-
-
-
-
-
-
- - Hier findest Du alle Personen sich registriert haben und noch bestätigt werden müssen. -
-
+
+
+
+
+
+ Tipp: Hier findest Du alle Personen die sich zu Veranstaltungen angemeldet haben.
In der Verwaltung werden Aktivitäten aufgezeichnet, z.B. wenn Accounts erstellt oder gelöscht werden.
-
-
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
Hier findest Du alle Personen die sich zu Veranstaltungen angemeldet haben.
+
+ parseInt(id),
-})
+const veranstaltungId = useRouteParams('veranstaltungId')
// const anotherOne = ref(false)
@@ -31,10 +29,6 @@ const initialData = {
const data = ref(initialData)
async function submit() {
- if (isNaN(veranstaltungId.value)) {
- return
- }
-
await apiClient.program.create.mutate({
veranstaltungId: veranstaltungId.value,
...data.value,
diff --git a/apps/frontend/src/views/Verwaltung/Program/ProgramList.vue b/apps/frontend/src/views/Verwaltung/Program/ProgramList.vue
index 73680e9b..4810a607 100644
--- a/apps/frontend/src/views/Verwaltung/Program/ProgramList.vue
+++ b/apps/frontend/src/views/Verwaltung/Program/ProgramList.vue
@@ -9,7 +9,7 @@ import { computed } from 'vue'
type ProgrammPunkte = RouterOutput['program']['list']
const props = defineProps<{
- veranstaltungId: number
+ veranstaltungId: string
programm?: ProgrammPunkte
}>()
@@ -62,7 +62,7 @@ function toggleHighlight(name: string) {
v-for="(list, timestamp) in programmGroups"
:key="timestamp"
>
-
+
paramInt('veranstaltungId'))
+const route = useRoute()
+const veranstaltungId = computed(() => route.params.veranstaltungId as string)
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungEdit.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungEdit.vue
index ce86a206..23eb5316 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungEdit.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungEdit.vue
@@ -2,10 +2,11 @@
import { computed } from 'vue'
import CustomFieldsFormEdit from '@/components/CustomFields/CustomFieldsFormEdit.vue'
-import { paramInt } from '@/helpers/params'
+import { useRoute } from 'vue-router'
-const veranstaltungId = computed(() => paramInt('veranstaltungId'))
-const fieldId = computed(() => paramInt('fieldId'))
+const route = useRoute()
+const veranstaltungId = computed(() => route.params.veranstaltungId as string)
+const fieldId = computed(() => route.params.fieldId as string)
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue
index dfbdb5a0..e7ea5a5b 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue
@@ -23,7 +23,7 @@ import Tab from '@/components/UIComponents/components/Tab.vue'
import InfoList from '@/components/UIComponents/InfoList.vue'
import Tabs from '@/components/UIComponents/Tabs.vue'
import VeranstaltungCard from '@/components/UIComponents/VeranstaltungCard.vue'
-import UnterveranstaltungenTable from '@/components/UnterveranstaltungenTable.vue'
+import UnterveranstaltungenTable from '@/components/data/UnterveranstaltungenTable.vue'
import { useRouteTitle } from '@/composables/useRouteTitle'
import { formatDateWith } from '@codeanker/helpers'
import { PlusIcon } from '@heroicons/vue/24/solid'
@@ -36,7 +36,7 @@ const route = useRoute()
const { state: veranstaltung } = useAsyncState(async () => {
const result = await apiClient.veranstaltung.verwaltungGet.query({
- id: parseInt(route.params.veranstaltungId as string),
+ id: route.params.veranstaltungId as string,
})
setTitle(`Veranstaltung: ${result.name}`)
return result
@@ -129,14 +129,16 @@ const files: ExportedFileType[] = [
]
const publicProgramLink = computed(() => {
- if (veranstaltung.value) {
- return `https://${veranstaltung.value.hostname?.hostname}/veranstaltung/${veranstaltung.value.publicReadToken}`
+ if (!veranstaltung.value || !veranstaltung.value.publicReadToken) {
+ return null
}
- return ''
+ return `https://${veranstaltung.value.hostname?.hostname}/veranstaltung/${veranstaltung.value.publicReadToken}`
})
function copyProgramLink() {
- navigator.clipboard.writeText(publicProgramLink.value)
+ if (publicProgramLink.value) {
+ navigator.clipboard.writeText(publicProgramLink.value)
+ }
}
@@ -245,7 +247,10 @@ function copyProgramLink() {
-
Tipp: Hier findest Du alle Personen die sich zu Veranstaltungen angemeldet haben.
+
[number]
-type TFilter = RouterInput['veranstaltung']['verwaltungList']['filter']
-type TOrderBy = RouterInput['veranstaltung']['verwaltungList']['orderBy']
+type Veranstaltung = RouterOutput['veranstaltung']['table']['data'][number]
-const columns: TGridColumn[] = [
- {
- field: 'id',
- title: 'Id',
- sortable: true,
- },
- {
- field: 'name',
- title: 'Name',
- sortable: true,
- },
- {
- field: 'beginn',
- title: 'Zeitraum',
- format: (value, row) => {
- const beginn = formatDate(value)
- const ende = formatDate(row.ende)
- return `${beginn} - ${ende}`
+const keyInfoDateFormat = 'dddd, DD. MMMM YYYY'
+const column = createColumnHelper()
+const columns = [
+ column.accessor('name', {
+ header: 'Name',
+ enableColumnFilter: true,
+ enableSorting: true,
+ }),
+ column.display({
+ id: 'zeitraum',
+ header: 'Zeitraum',
+ enableColumnFilter: true,
+ cell({ row }) {
+ return `${formatDateWith(row.original.beginn, keyInfoDateFormat)} - ${formatDateWith(row.original.ende, keyInfoDateFormat)}`
+ },
+ meta: {
+ filter: {
+ type: 'date-range',
+ },
+ },
+ }),
+ column.accessor('meldeschluss', {
+ header: 'Meldeschluss',
+ enableColumnFilter: true,
+ cell({ getValue }) {
+ const value = getValue()
+ const isMeldeschlussErreicht = dayjs().isAfter(value)
+ return h(
+ 'span',
+ isMeldeschlussErreicht
+ ? {
+ class: 'text-red-500',
+ }
+ : null,
+ formatDateWith(value, keyInfoDateFormat)
+ )
+ },
+ meta: {
+ filter: {
+ type: 'date-range',
+ },
},
- sortable: true,
- },
- {
- field: 'meldeschluss',
- title: 'Meldeschluss',
- preset: 'date',
- sortable: true,
- },
- {
- field: 'teilnahmegebuehr',
- title: 'Gebühr',
- size: '120px',
- sortable: true,
- format: (value) => formatCurrency(value),
- },
- {
- field: 'maxTeilnehmende',
- title: 'Anm. / Max',
- size: '150px',
- format: (value, row) => `${row.anzahlAnmeldungen} / ${value}`,
- },
+ }),
+ column.accessor('teilnahmegebuehr', {
+ header: 'Gebühr',
+ enableColumnFilter: false,
+ enableSorting: true,
+ cell: ({ getValue }) => formatCurrency(getValue()),
+ }),
+ column.accessor('maxTeilnehmende', {
+ header: 'Anm. / Max',
+ cell: ({ row }) => `${row.original.anzahlAnmeldungen} / ${row.original.maxTeilnehmende}`,
+ enableColumnFilter: false,
+ }),
]
-async function fetchPage(
- pagination: {
- take: number
- skip: number
- },
- filter: TFilter,
- orderBy: TOrderBy
-): Promise {
- return apiClient.veranstaltung.verwaltungList.query({
- filter: filter,
- orderBy: orderBy,
- pagination: pagination,
+const query: Query = (pagination, filter, orderBy) =>
+ useQuery({
+ queryKey: ['veranstaltung', pagination, filter, orderBy],
+ queryFn: () =>
+ apiClient.veranstaltung.table.query({
+ pagination: {
+ pageIndex: pagination.value.pageIndex,
+ pageSize: pagination.value.pageSize,
+ },
+ filter: filter.value.reduce((prev, curr) => {
+ return {
+ ...prev,
+ [curr.id]: curr.value,
+ }
+ }, {}),
+ orderBy: orderBy.value,
+ }),
+ initialData,
+ placeholderData: keepPreviousData,
})
-}
-async function fetchCount(filter: TFilter): Promise {
- return apiClient.veranstaltung.verwaltungCount.query({
- filter: filter,
- })
+function onClick(veranstaltung: Veranstaltung) {
+ router.push({ name: 'Verwaltung Veranstaltungsdetails', params: { veranstaltungId: veranstaltung.id } })
}
@@ -101,22 +115,12 @@ async function fetchCount(filter: TFilter): Promise {
Veranstaltung erstellen
-
Die Programmpunkte sind öffentlich verfügbar
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungEdit.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungEdit.vue
index 6077e6d5..e53a73cb 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungEdit.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungEdit.vue
@@ -7,7 +7,7 @@ import FormVeranstaltungGeneral from '@/components/forms/veranstaltung/FormVeran
const route = useRoute()
const { state: veranstaltung, execute: fetchVeranstaltung } = useAsyncState(async () => {
- return apiClient.veranstaltung.verwaltungGet.query({ id: parseInt(route.params.veranstaltungId as string) })
+ return apiClient.veranstaltung.verwaltungGet.query({ id: route.params.veranstaltungId as string })
}, null)
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
index 7cf8e0ab..a0448609 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungList.vue
@@ -2,88 +2,102 @@
import { PlusIcon } from '@heroicons/vue/24/outline'
import { apiClient } from '@/api'
-import GenericDataGrid from '@/components/GenericDataGrid.vue'
+import DataTable, { type Query } from '@/components/Table/DataTable.vue'
+import initialData from '@/components/Table/initialData'
import { useRouteTitle } from '@/composables/useRouteTitle'
-import router from '@/router'
-import { type RouterInput, type RouterOutput } from '@codeanker/api'
-import { type TGridColumn } from '@codeanker/datagrid'
-import { formatCurrency } from '@codeanker/helpers'
+import { type RouterOutput } from '@codeanker/api'
+import { keepPreviousData, useQuery } from '@tanstack/vue-query'
+import { createColumnHelper } from '@tanstack/vue-table'
+import { dayjs, formatCurrency, formatDateWith } from '@codeanker/helpers'
+import { useRouter } from 'vue-router'
+import { h } from 'vue'
+
+const router = useRouter()
const { setTitle } = useRouteTitle()
setTitle('Veranstaltungen')
-function formatDate(indate) {
- const date = new Date(indate)
- const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' }
- return date.toLocaleDateString('de-DE', options)
-}
-
-/// Typen von den Daten, Filter und Sortierung
-type TData = Awaited
-
+
+
-
-