Restructured IncomingInvoices

Added Aspect Ration to DocumentDisplay.vue

components/DocumentDisplay.vue

@@ -12,11 +12,14 @@ const props = defineProps({
   openShowModal: {
     type: Boolean,
     required: false,
+  },
+  returnEmit: {
+    type: Boolean
   }
 
 })
 
-let {documentData, openShowModal:openShowModalProp } = props;
+let {documentData, openShowModal:openShowModalProp, returnEmit } = props;
 const tags = dataStore.getDocumentTags
 const openShowModal = ref(false)
 
@@ -128,7 +131,7 @@ const updateDocumentAssignment = async () => {
 </script>
 
 <template>
-  <div class="documentListItem" @click="openDocument">
+  <div class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : openDocument">
     <object
         :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
         class="previewEmbed"
@@ -155,7 +158,6 @@ const updateDocumentAssignment = async () => {
         v-model="documentData.selected"
         class="ml-2"
     />-->
-    <br>
 <!--    <UBadge
       v-if="documentData.vendorInvoice"
     >{{dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
@@ -183,8 +185,8 @@ const updateDocumentAssignment = async () => {
 
       <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
         <object
-            class="h-full w-full"
-            :data="documentData.url"
+            class="bigPreview"
+            :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
             type="application/pdf"
             v-if="!documentData.tags.includes('Bild')"
         />
@@ -323,7 +325,7 @@ const updateDocumentAssignment = async () => {
 .documentListItem {
   display:block;
   width: 15vw;
-  height: 33vh;
+  aspect-ratio: 1 / 1.414;
   padding:1em;
   margin: 0.7em;
   border: 1px solid lightgrey;
@@ -337,7 +339,7 @@ const updateDocumentAssignment = async () => {
 
 .previewEmbed {
   width: 100%;
-  height: 100%;
+  aspect-ratio: 1 / 1.414;
   overflow: hidden !important;
   pointer-events: none !important;
   -ms-overflow-style: none;  /* IE and Edge */
@@ -348,4 +350,9 @@ const updateDocumentAssignment = async () => {
   display: none;
 }
 
+.bigPreview {
+  width: 100%;
+  aspect-ratio: 1/ 1.414;
+}
+
 </style>

components/DocumentList.vue

@@ -3,12 +3,14 @@ const props = defineProps({
   documents: {
     type: Array,
     required:true
+  },
+  returnDocumentId: {
+    type: Boolean,
   }
 })
 const dataStore = useDataStore()
 
 
-
 </script>
 
 <template>
@@ -17,6 +19,8 @@ const dataStore = useDataStore()
         v-for="item in documents"
         :document-data="item"
         :key="item.id"
+        @clicked="(info) => $emit('selectDocument', info)"
+        :return-emit="returnDocumentId"
     />
   </div>
 </template>