Merge branch 'development' into feature/request-gliederung-access

Author: danielswiatek

apps/frontend/src/components/BasicInputs/BasicSelect.vue

@@ -6,6 +6,7 @@ import useValidationModel from '../../composables/useValidationModel'
 
 import BasicValidationFeedback from './components/BasicValidationFeedback.vue'
 import { type BasicInputDefaultProps } from './defaultProps'
+import cn from '@/helpers/cn'
 
 export interface Option {
   label: string
@@ -47,10 +48,17 @@ const { model, errorMessage } = useValidationModel(props, emit)
       as="div"
       :name="id || name || label"
       :multiple="props.multiple"
+      :disabled="disabled"
     >
       <ListboxButton class="input-style !flex flex-row items-center gap-x-2 justify-between">
-        <span class="text-start">
-          {{ options.find((option) => option.value === modelValue)?.label || placeholder || 'Bitte wählen...' }}
+        <span :class="cn('text-start', { 'text-gray-500': disabled })">
+          {{
+            (multiple && Array.isArray(model)
+              ? model.map((value) => options.find((option) => option.value === value)?.label).join(', ')
+              : options.find((option) => option.value === model)?.label) ||
+            placeholder ||
+            'Bitte wählen...'
+          }}
         </span>
         <ChevronDownIcon class="h-5 text-gray-500 self-end" />
       </ListboxButton>
@@ -74,13 +82,13 @@ const { model, errorMessage } = useValidationModel(props, emit)
                 :class="[
                   active ? 'bg-primary-600 text-white' : 'text-gray-900',
                   selected ? 'bg-primary-200' : '',
-                  'relative cursor-default select-none px-3 py-2',
+                  'relative cursor-default select-none px-3 py-2 group',
                   'flex flex-row gap-x-4 items-center',
                 ]"
               >
                 <CheckIcon
                   class="h-4"
-                  :class="selected ? 'text-primary-600' : 'invisible'"
+                  :class="selected ? 'text-primary-600 group-hover:text-white' : 'invisible'"
                 />
                 <div class="flex flex-col">
                   <span>{{ option.label }}</span>

apps/frontend/src/components/BasicInputs/BasicTypeahead.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
       /** Flag, die gesetzt werden kann, wenn die query nicht async ist. Debounce wird geskipped */
       sync?: InstanceType<typeof Typeahead>['sync']
       /** Ob ein Ergebnis von der Query ausgewählt werden muss oder ob auch ein Freitext erlaubt ist */
+      disabled?: InstanceType<typeof Typeahead>['disabled']
       strict?: InstanceType<typeof Typeahead>['strict']
       immediate?: InstanceType<typeof Typeahead>['immediate']
       debounceTime?: InstanceType<typeof Typeahead>['debounceTime']
@@ -55,6 +56,7 @@ const { model, errorMessage } = useValidationModel(props, emit)
         :name="name"
         :debounce-time="debounceTime"
         :strict="strict"
+        :disabled="disabled"
       >
         <template #default="slotData">
           <slot v-bind="slotData" />

apps/frontend/src/components/forms/unterveranstaltung/FormUnterveranstaltungGeneral.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { apiClient } from '@/api'
 import BasicDatepicker from '@/components/BasicInputs/BasicDatepicker.vue'
@@ -11,18 +11,21 @@ import BasicSelect from '@/components/BasicInputs/BasicSelect.vue'
 import BasicTypeahead from '@/components/BasicInputs/BasicTypeahead.vue'
 import Button from '@/components/UIComponents/Button.vue'
 import { loggedInAccount } from '@/composables/useAuthentication'
-import router from '@/router'
 import type { RouterInput } from '@codeanker/api'
 import { UnterveranstaltungTypeMapping, getEnumOptions } from '@codeanker/api'
 import { ValidateForm } from '@codeanker/validation'
+import { useRoute, useRouter } from 'vue-router'
 
 const props = defineProps<{
   unterveranstaltung?: any
-  veranstaltungId?: any
+  veranstaltungId?: string
   mode: 'create' | 'update'
   onUpdate?: () => void
 }>()
 
+const router = useRouter()
+const route = useRoute()
+
 const unterveranstaltungId = props.unterveranstaltung?.id
 const gliederung = ref(props.unterveranstaltung?.gliederung)
 
@@ -51,7 +54,7 @@ const {
 } = useAsyncState(
   async () => {
     if (loggedInAccount.value?.role === 'ADMIN') {
-      unterveranstaltungCopy.value.gliederungId = gliederung.value.id
+      unterveranstaltungCopy.value.gliederungId = gliederung.value?.id
       await apiClient.unterveranstaltung.verwaltungCreate.mutate({
         data: unterveranstaltungCopy.value as unknown as RouterInput['unterveranstaltung']['verwaltungCreate']['data'],
       })
@@ -152,6 +155,12 @@ const disableddates = computed(() => {
   }
   return obj
 })
+
+onMounted(() => {
+  if (props.mode === 'create') {
+    unterveranstaltungCopy.value.veranstaltungId = route.params.veranstaltungId as string
+  }
+})
 </script>
 
 <template>
@@ -171,6 +180,7 @@ const disableddates = computed(() => {
           label="Veranstaltung"
           placeholder="Veranstaltungsort"
           :options="veranstaltungen.map((veranstaltung) => ({ label: veranstaltung.name, value: veranstaltung.id }))"
+          :disabled="route.params.veranstaltungId !== undefined"
         />
       </div>
       <template v-if="mode === 'create' && loggedInAccount?.role === 'ADMIN'">

apps/frontend/src/views/Anmeldung/components/PublicAusschreibungDaten.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import InfoList from '@/components/UIComponents/InfoList.vue'
 import { injectUnterveranstaltung } from '@/layouts/AnmeldungLayout.vue'
+import { formatCurrency } from '@codeanker/helpers'
 import { formatDate } from '@vueuse/core'
 import { computed } from 'vue'
 
@@ -28,7 +29,7 @@ const keyInfos = computed<KeyInfo[]>(() => {
     },
     { title: 'Meldeschluss', value: formatDate(unterveranstaltung.value.meldeschluss, 'DD.MM.YYYY') },
     { title: 'Veranstaltungsort', value: unterveranstaltung.value.veranstaltung.ort?.name ?? '' },
-    { title: 'Teilnahmebeitrag', value: unterveranstaltung.value.teilnahmegebuehr + '€' },
+    { title: 'Teilnahmebeitrag', value: formatCurrency(unterveranstaltung.value.teilnahmegebuehr) },
     { title: 'Zielgruppe', value: unterveranstaltung.value.veranstaltung.zielgruppe ?? '' },
   ]
 })

apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue

@@ -33,16 +33,13 @@ import InfoList from '@/components/UIComponents/InfoList.vue'
 import Tabs from '@/components/UIComponents/Tabs.vue'
 import { loggedInAccount } from '@/composables/useAuthentication'
 import { useRouteTitle } from '@/composables/useRouteTitle'
-import { formatDateWith } from '@codeanker/helpers'
+import { formatCurrency, formatDateWith } from '@codeanker/helpers'
 import FAQList from '../FAQs/FAQList.vue'
 
 const route = useRoute()
 const { setTitle } = useRouteTitle()
 
-const {
-  state: unterveranstaltung,
-  execute: refreshUnterveranstaltung,
-} = useAsyncState(async () => {
+const { state: unterveranstaltung, execute: refreshUnterveranstaltung } = useAsyncState(async () => {
   let result
   if (loggedInAccount.value?.role === 'ADMIN') {
     result = await apiClient.unterveranstaltung.verwaltungGet.query({
@@ -94,7 +91,7 @@ const keyInfos = computed<KeyInfo[]>(() => {
         value: `${formatDateWith(unterveranstaltung.value.meldebeginn, keyInfoDateFormat)} - ${formatDateWith(unterveranstaltung.value.meldeschluss, keyInfoDateFormat)}`,
       },
       { title: 'Veranstaltungsort', value: unterveranstaltung.value.veranstaltung.ort?.name ?? '' },
-      { title: 'Teilnahmebeitrag', value: unterveranstaltung.value.teilnahmegebuehr + '€' },
+      { title: 'Teilnahmebeitrag', value: formatCurrency(unterveranstaltung.value.teilnahmegebuehr) },
       { title: 'max. Teilnahmezahl', value: unterveranstaltung.value.maxTeilnehmende + '' },
       { title: 'Zielgruppe', value: unterveranstaltung.value.veranstaltung.zielgruppe ?? '' },
     ]

apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungEdit.vue

@@ -7,6 +7,7 @@ import FormUnterveranstaltungGeneral from '@/components/forms/unterveranstaltung
 import { loggedInAccount } from '@/composables/useAuthentication'
 
 const route = useRoute()
+
 const { state: unterveranstaltung, execute: fetchUnterveranstaltung } = useAsyncState(async () => {
   const unterveranstaltungId = route.params.unterveranstaltungId as string
   if (loggedInAccount.value?.role === 'ADMIN') {

apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue

@@ -25,7 +25,7 @@ import Tabs from '@/components/UIComponents/Tabs.vue'
 import VeranstaltungCard from '@/components/UIComponents/VeranstaltungCard.vue'
 import UnterveranstaltungenTable from '@/components/data/UnterveranstaltungenTable.vue'
 import { useRouteTitle } from '@/composables/useRouteTitle'
-import { formatDateWith } from '@codeanker/helpers'
+import { formatCurrency, formatDateWith } from '@codeanker/helpers'
 import { PlusIcon } from '@heroicons/vue/24/solid'
 import ProgramList from '../Program/ProgramList.vue'
 import AnmeldeLinkTable from '@/components/data/AnmeldeLinkTable.vue'
@@ -66,7 +66,7 @@ const keyInfos = computed<KeyInfo[]>(() => {
         value: `${formatDateWith(veranstaltung.value.meldebeginn, keyInfoDateFormat)} - ${formatDateWith(veranstaltung.value.meldeschluss, keyInfoDateFormat)}`,
       },
       { title: 'Veranstaltungsort', value: veranstaltung.value.ort?.name ?? '' },
-      { title: 'Teilnahmebeitrag', value: veranstaltung.value.teilnahmegebuehr + '€' },
+      { title: 'Teilnahmebeitrag', value: formatCurrency(veranstaltung.value.teilnahmegebuehr) },
       { title: 'Zielgruppe', value: veranstaltung.value.zielgruppe ?? '' },
     ]
   } else {
@@ -301,7 +301,7 @@ function copyProgramLink() {
         </div>
         <RouterLink
           class="text-primary-500 flex items-center"
-          :to="{ name: 'UnterveranstaltungCreate' }"
+          :to="{ name: 'UnterveranstaltungCreate', params: { veranstaltungId: veranstaltung?.id?.toString() } }"
         >
           <PlusIcon class="h-5 w-5 mr-1" />
           <span>Ausschreibung erstellen</span>