fix #141

fix #142

frontend/components/DocumentUploadModal.vue

@@ -1,23 +1,22 @@
 <script setup>
-// Falls useDropZone nicht auto-importiert wird:
-// import { useDropZone } from '@vueuse/core'
-
 const props = defineProps({
   fileData: {
     type: Object,
-    default: {
+    default: () => ({
       type: null
-    }
+    })
   }
 })
 
 const emit = defineEmits(["uploadFinished"])
 
 const modal = useModal()
-// const profileStore = useProfileStore() // Wird im Snippet nicht genutzt, aber ich lasse es drin
 
 const uploadInProgress = ref(false)
 const availableFiletypes = ref([])
+const localFileData = reactive({
+  ...props.fileData
+})
 
 // 1. State für die Dateien und die Dropzone Referenz
 const selectedFiles = ref([])
@@ -58,10 +57,8 @@ const uploadFiles = async () => {
 
   uploadInProgress.value = true;
 
-  let fileData = props.fileData
-  delete fileData.typeEnabled
+  const { typeEnabled, ...fileData } = localFileData
 
-  // 4. Hier nutzen wir nun selectedFiles.value statt document.getElementById
   await useFiles().uploadFiles(fileData, selectedFiles.value, [], true)
 
   uploadInProgress.value = false;
@@ -80,12 +77,11 @@ const fileNames = computed(() => {
   <UModal>
     <template #content>
       <div ref="dropZoneRef" class="relative h-full flex flex-col">
-
         <div
             v-if="isOverDropZone"
-            class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
+            class="absolute inset-0 z-50 flex items-center justify-center rounded-lg border-2 border-dashed border-primary-500 bg-primary-500/10 backdrop-blur-sm transition-all"
         >
-          <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+          <span class="rounded bg-white/80 px-4 py-2 text-xl font-bold text-primary-600 shadow-sm">
             Dateien hier ablegen
           </span>
         </div>
@@ -130,16 +126,17 @@ const fileNames = computed(() => {
               class="mt-3"
           >
             <USelectMenu
-                option-attribute="name"
-                value-attribute="id"
-                searchable
-                searchable-placeholder="Suchen..."
-                :options="availableFiletypes"
-                v-model="props.fileData.type"
-                :disabled="!props.fileData.typeEnabled"
+                :items="availableFiletypes"
+                v-model="localFileData.type"
+                value-key="id"
+                label-key="name"
+                :search-input="{ placeholder: 'Suchen...' }"
+                :filter-fields="['name']"
+                :disabled="!localFileData.typeEnabled"
+                class="w-full"
             >
-              <template #label>
-                <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+              <template #default>
+                <span v-if="availableFiletypes.find(x => x.id === localFileData.type)">{{ availableFiletypes.find(x => x.id === localFileData.type).name }}</span>
                 <span v-else>Kein Typ ausgewählt</span>
               </template>
             </USelectMenu>
@@ -159,5 +156,4 @@ const fileNames = computed(() => {
 </template>
 
 <style scoped>
-/* Optional: Animationen für das Overlay */
 </style>