Changed Listing in Spaces Index

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

@@ -43,7 +43,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = async () => {
   if(mode.value === "show" ){
-    itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name)")
+    itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name), contact(id,fullName)")
   } else if (mode.value === "edit"){
     itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*")
   }
@@ -125,10 +125,91 @@ setupPage()
           <div class="w-1/2 mr-5">
             <UCard>
               <div class="text-wrap">
-                <p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
+                <table class="mb-3">
-                Eigene Felder: {{itemInfo.ownFields}}<br>
+                  <tr>
-                Beschreibung:<br>
+                    <td>Name:</td>
-                {{itemInfo.description}}<br>
+                    <td>{{itemInfo.name}}</td>
+                  </tr>
+                  <tr>
+                    <td>Aktiv:</td>
+                    <td>
+                      <span v-if="itemInfo.active" class="text-primary-500">Ja</span>
+                      <span v-else class="text-rose-600">Nein</span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Kundennummer:</td>
+                    <td><nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></td>
+                  </tr>
+                  <tr>
+                    <td>Ansprechpartner:</td>
+                    <td><nuxt-link :to="`/contacts/show/${itemInfo.contact.id}`">{{itemInfo.contact ? itemInfo.contact.fullName : ""}}</nuxt-link></td>
+                  </tr>
+                  <tr>
+                    <td>Wiederkehrend:</td>
+                    <td>{{itemInfo.recurring ? "Ja" : "Nein"}}</td>
+                  </tr>
+                  <tr>
+                    <td>Startdatum:</td>
+                    <td>{{dayjs(itemInfo.startDate).format("DD.MM.YYYY")}}</td>
+                  </tr>
+                  <tr>
+                    <td>Enddatum:</td>
+                    <td>{{dayjs(itemInfo.endDate).format("DD.MM.YYYY")}}</td>
+                  </tr>
+                  <tr>
+                    <td>Unterschrieben am:</td>
+                    <td>{{dayjs(itemInfo.signDate).format("DD.MM.YYYY")}}</td>
+                  </tr>
+                  <tr>
+                    <td>Laufzeit:</td>
+                    <td>{{itemInfo.duration}}</td>
+                  </tr>
+                  <tr>
+                    <td>Rechnungsversand:</td>
+                    <td>{{itemInfo.invoiceDispatch}}</td>
+                  </tr>
+                  <tr>
+                    <td>Zahlart:</td>
+                    <td>{{itemInfo.paymentType}}</td>
+                  </tr>
+                  <tr v-if="itemInfo.paymentType === 'Einzug'">
+                    <td>SEPA Mandatsreferenz:</td>
+                    <td>{{itemInfo.sepaRef}}</td>
+                  </tr>
+                  <tr v-if="itemInfo.paymentType === 'Einzug'">
+                    <td>SEPA Unterschrieben am:</td>
+                    <td>{{dayjs(itemInfo.sepaDate).format("DD.MM.YYYY")}}</td>
+                  </tr>
+                  <tr>
+                    <td>Bank:</td>
+                    <td>{{itemInfo.bankingName}}</td>
+                  </tr>
+                  <tr>
+                    <td>BIC:</td>
+                    <td>{{itemInfo.bankingBIC}}</td>
+                  </tr>
+                  <tr>
+                    <td>IBAN:</td>
+                    <td>{{itemInfo.bankingIban}}</td>
+                  </tr>
+                  <tr>
+                    <td>Kontoinhaber:</td>
+                    <td>{{itemInfo.bankingOwner}}</td>
+                  </tr>
+                  <tr>
+                    <td>Beschreibung:</td>
+                    <td>{{itemInfo.notes}}</td>
+                  </tr>
+                  <tr>
+                    <td colspan="2"><span class="font-bold">Eigene Felder:</span></td>
+                  </tr>
+                  <tr v-for="fieldKey in Object.keys(itemInfo.ownFields)">
+                    <td>{{dataStore.ownTenant.ownFields.contracts.find(i => i.key === fieldKey).label}}</td>
+                    <td>{{itemInfo.ownFields[fieldKey]}}</td>
+                  </tr>
+                </table>
+
               </div>
             </UCard>
           </div>
@@ -434,5 +515,8 @@ setupPage()
 </template>
 
 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+}
 </style>