Added Frontend

frontend/components/DocumentDisplay.vue

@@ -0,0 +1,95 @@
+<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>