Changed Rendering of IncomingInvoice when not in editing

pages/incomingInvoices/[mode]/[[id]].vue

@@ -132,7 +132,7 @@ const setState = async (newState) => {
   } else if(mode.value === 'edit') {
     await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
   }
-  await router.push("/receipts")
+  await router.push("/incomingInvoices")
 }
 
 
@@ -155,13 +155,18 @@ setupPage()
       >
         Speichern
       </UButton>
-      <UButton
-          :disabled="itemInfo.state !== 'Entwurf'"
-          @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
-          v-if="mode !== 'edit'"
+      <UTooltip
+        text="Bearbeiten ist nur im Entwurfsstatus möglich"
       >
-        Bearbeiten
-      </UButton>
+        <UButton
+            :disabled="itemInfo.state !== 'Entwurf'"
+            @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
+            v-if="mode !== 'edit'"
+        >
+          Bearbeiten
+        </UButton>
+      </UTooltip>
+
       <UButton
           @click="setState('Entwurf')"
           v-if="itemInfo.state !== 'Entwurf'"
@@ -211,12 +216,23 @@ setupPage()
     <div class="w-2/5 mx-5">
 
       <div v-if="mode === 'show'">
-        {{itemInfo}}
+
+        <div class="truncate mb-5">
+          <p>Status: {{itemInfo.state}}</p>
+          <p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
+          <p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
+          <p>Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor}`">{{dataStore.getVendorById(itemInfo.vendor).name}}</nuxt-link></p>
+          <p>Bezahlt: {{itemInfo.paid}}</p>
+          <p>Beschreibung: {{itemInfo.description}}</p>
+
+<!--     TODO: Buchungszeilen darstellen     -->
+        </div>
 
         <HistoryDisplay
             type="incomingInvoice"
             v-if="itemInfo"
             :element-id="itemInfo.id"
+            :render-headline="true"
         />
       </div>