Added E-Mail Sending

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

@@ -136,33 +136,65 @@ setupPage()
     v-model="openTab"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
-
-
-          <div class="text-wrap mt-3">
-            <p v-if="itemInfo.customer">Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
-            <p v-if="itemInfo.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor.id}`">{{itemInfo.vendor ? itemInfo.vendor.name : ""}}</nuxt-link></p>
-
-
-            <p>E-Mail: {{itemInfo.email}}</p>
-            <p>Mobil: {{itemInfo.phoneMobile}}</p>
-            <p>Festnetz: {{itemInfo.phoneHome}}</p>
-            <p>Rolle: {{itemInfo.role}}</p>
-            <p>Geburtstag: {{itemInfo.birthday ? dayjs(itemInfo.birthday).format("DD.MM.YYYY") : ""}}</p>
-            <p>Notizen:<br> {{itemInfo.notes}}</p>
-          </div>
-
+      <div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/email/new?to=${itemInfo.email}`)"
+                  icon="i-heroicons-envelope"
+                  :disabled="!itemInfo.email"
+              >
+                E-Mail
+              </UButton>
+            </Toolbar>
+            <table class="w-full">
+              <tr>
+                <td>Kunde: </td>
+                <td><nuxt-link v-if="itemInfo.customer" :to="`/customers/show/${itemInfo.customer?.id}`">{{itemInfo?.customer?.name}}</nuxt-link></td>
+              </tr>
+              <tr>
+                <td>Lieferant: </td>
+                <td><nuxt-link v-if="itemInfo.vendor" :to="`/customers/show/${itemInfo.vendor?.id}`">{{itemInfo?.vendor?.name}}</nuxt-link></td>
+              </tr>
+              <tr>
+                <td>E-Mail:</td>
+                <td>{{itemInfo.email}}</td>
+              </tr>
+              <tr>
+                <td>Mobil:</td>
+                <td>{{itemInfo.phoneMobile}}</td>
+              </tr>
+              <tr>
+                <td>Festnetz:</td>
+                <td>{{itemInfo.phoneHome}}</td>
+              </tr>
+              <tr>
+                <td>Rolle:</td>
+                <td>{{itemInfo.role}}</td>
+              </tr>
+              <tr>
+                <td>Geburtstag:</td>
+                <td>{{itemInfo.birthday ? dayjs(itemInfo.birthday).format("DD.MM.YYYY") : ""}}</td>
+              </tr>
+              <tr>
+                <td>Notizen:</td>
+                <td>{{itemInfo.notes}}</td>
+              </tr>
 
+            </table>
+          </UCard>
         </div>
-        <div v-else-if="item.label === 'Logbuch'">
-          <HistoryDisplay
-              type="contact"
-              v-if="itemInfo"
-              :element-id="itemInfo.id"
-          />
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
+                type="contact"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
+            />
+          </UCard>
         </div>
-      </UCard>
+      </div>
     </template>
   </UTabs>
   <UForm
@@ -289,5 +321,10 @@ setupPage()
 </template>
 
 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>