Files
FEDEO/spaces/components/DocumentUpload.vue
2024-02-01 21:00:59 +01:00

103 lines
2.1 KiB
Vue

<script setup >
const props = defineProps({
type: {
type: String
},
elementId: {
type: String
}
})
const {type, elementId} = props
const dataStore = useDataStore()
const tags = dataStore.getDocumentTags
const uploadModalOpen = ref(false)
const uploadInProgress = ref(false)
const fileUploadFormData = ref({
tags: ["Dokument"],
project: null
})
const openModal = () => {
console.log("Oepn")
uploadModalOpen.value = true
}
const uploadFiles = async () => {
uploadInProgress.value = true;
let fileData = fileUploadFormData.value
fileData[type] = elementId
await dataStore.uploadFiles(fileData, document.getElementById("fileUploadInput").files)
uploadModalOpen.value = false;
uploadInProgress.value = false;
}
</script>
<template>
<UModal
v-model="uploadModalOpen"
>
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Datei hochladen
</h3>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="uploadModalOpen = false"
:disabled="uploadInProgress"
/>
</div>
</template>
<UFormGroup
label="Datei:"
>
<UInput
type="file"
id="fileUploadInput"
/>
</UFormGroup>
<UFormGroup
label="Tags:"
class="mt-3"
>
<USelectMenu
multiple
searchable
searchable-placeholder="Suchen..."
:options="tags"
v-model="fileUploadFormData.tags"
/>
</UFormGroup>
<template #footer>
<UButton
@click="uploadFiles"
:loading="uploadInProgress"
>Hochladen</UButton>
</template>
</UCard>
</UModal>
<UButton
@click="openModal"
>
Hochladen
</UButton>
</template>
<style scoped>
</style>