95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<script setup>
|
|
|
|
import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
|
|
|
|
const toast = useToast()
|
|
const dataStore = useDataStore()
|
|
const modal = useModal()
|
|
const profileStore = useProfileStore()
|
|
const router = useRouter()
|
|
const props = defineProps({
|
|
documentData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
openShowModal: {
|
|
type: Boolean,
|
|
required: false,
|
|
},
|
|
returnEmit: {
|
|
type: Boolean
|
|
}
|
|
|
|
})
|
|
|
|
let {documentData, returnEmit } = props;
|
|
|
|
|
|
const showFile = (file) => {
|
|
console.log(file)
|
|
modal.open(DocumentDisplayModal,{
|
|
documentData: file
|
|
})
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :id="`docDisplay-${documentData.id}`" class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : showFile(documentData)">
|
|
<iframe
|
|
:src="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
|
|
class="previewEmbed"
|
|
v-if="documentData.path.toLowerCase().includes('pdf')"
|
|
loading="lazy"
|
|
/>
|
|
<img
|
|
v-else
|
|
alt=""
|
|
:src="documentData.url"
|
|
/>
|
|
<!-- TODO: Remove Scrollbar -->
|
|
<UTooltip class="w-full" :text="documentData.path.split('/')[documentData.path.split('/').length -1]">
|
|
<p class="truncate my-3">{{documentData.path.split("/")[documentData.path.split("/").length -1]}}</p>
|
|
</UTooltip>
|
|
|
|
<InputGroup class="mt-3 flex-wrap">
|
|
<UBadge
|
|
v-for="tag in documentData.filetags"
|
|
|
|
><span class="text-nowrap">{{ tag.name }}</span></UBadge>
|
|
</InputGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.documentListItem {
|
|
display: block;
|
|
width: 15vw;
|
|
aspect-ratio: 1 / 1.414;
|
|
padding: 1em;
|
|
margin: 0.7em;
|
|
border-radius: 15px;
|
|
transition: box-shadow 0.2s ease; /* für smooth hover */
|
|
}
|
|
|
|
.documentListItem:hover {
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* sanfter Shadow beim Hover */
|
|
}
|
|
|
|
.previewEmbed {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1.414;
|
|
overflow: hidden !important;
|
|
pointer-events: none !important;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.previewEmbed::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
</style> |