"officialName" und "Name" einer Location korrekt anzeigen

iris-client-fe/src/assets/scss/base/_global.scss

@@ -2,29 +2,32 @@
   color: rgba(0, 0, 0, 0.87) !important;
 }
 
-a:active, .v-btn--active, a:hover{
+a:active,
+.v-btn--active,
+a:hover {
   outline-width: 0;
   text-decoration: underline #46ff9f 3px;
   text-underline-offset: 3px;
 }
 
-.theme--light.v-btn--active:hover::before, .theme--light.v-btn--active::before {
+.theme--light.v-btn--active:hover::before,
+.theme--light.v-btn--active::before {
   opacity: 0;
 }
 
-.v-data-table{
-  thead{
-    tr{
+.v-data-table {
+  thead {
+    tr {
       height: initial;
     }
   }
-  tr{
+  tr {
     height: initial;
     /*height: 100px; TODO: Fix this shit. It applies to all data-tables globally.*/
   }
 }
-.twolineTable{
-  tr{
+.twolineTable {
+  tr {
     height: 100px;
   }
 }

iris-client-fe/src/server/data/dummy-locations.ts

@@ -13,14 +13,14 @@ export const dummyLocations: LocationInformation[] = [
       },
       email: "pizza-muster@example.com",
       phone: "06973928393",
-      officialName: "Pizzeria Mio Muster",
+      officialName: "Pizzeria Mio Muster GmbH",
       ownerEmail: "legal-pizza-muster@exmaple.com",
       representative: "Luigi Calzone",
     },
   },
   {
     id: "id-brauwirt-keller",
-    name: "Brauwirt-Keller",
+    name: "Brauwirt-Keller Pub",
     providerId: "recover-app",
     contact: {
       address: {
@@ -37,7 +37,7 @@ export const dummyLocations: LocationInformation[] = [
   },
   {
     id: "id-bowling-bahn",
-    name: "Bowling World Musterstadt",
+    name: "Bowling World",
     providerId: "recover-app",
     contact: {
       address: {

iris-client-fe/src/views/event-tracking-details/components/event-tracking-details-location-info.vue

@@ -48,10 +48,17 @@ export default class EventTrackingDetailsLocationInfo extends EventTrackingDetai
   }
   get locationAddress(): Array<string> {
     const address: LocationAddress = this.location?.contact?.address;
+    var officalName;
+    if(this.location?.contact?.officialName) {
+      officalName = "(" + this.location?.contact?.officialName + ")";
+    } else {
+      officalName = "";
+    }
     return [
-      this.location?.contact?.officialName ?? "",
+      this.location?.name ?? "",
+      officalName,
       address?.street ?? "",
-      [address?.zip ?? "", address?.city ?? ""].join(" ").trim(),
+      [address?.zip ?? "", address?.city ?? ""].join(" ").trim(),      
     ].filter((v) => v);
   }
   get locationInfo(): Array<Array<string | Array<string>>> {

iris-client-fe/src/views/event-tracking-form/components/event-tracking-form-location-info.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
-    <p>
-      <strong>{{ locationName }}</strong>
-    </p>
     <v-row>
+      <v-col>
+        <strong
+          class="d-block"
+          v-for="(item, index) in locationName"
+          :key="index"
+        >
+          {{ item }}
+        </strong>
+      </v-col>
       <v-col>
         <span
           class="d-block"
@@ -41,8 +47,17 @@ const EventTrackingFormLocationInfoProps = Vue.extend({
 
 @Component
 export default class EventTrackingFormLocationInfo extends EventTrackingFormLocationInfoProps {
-  get locationName(): string {
-    return this.location?.contact?.officialName ?? "";
+  get locationName(): Array<string> {
+    var officalName;
+    if(this.location?.contact?.officialName) {
+      officalName = "(" + this.location?.contact?.officialName + ")";
+    } else {
+      officalName = "";
+    }
+    return [
+      this.location?.name ?? "",
+      officalName,
+      ].filter((v) => v);
   }
   get locationContact(): Array<string> {
     const contact: LocationContact = this.location?.contact;

iris-client-fe/src/views/event-tracking-form/components/location-select-dialog.vue

@@ -31,7 +31,10 @@
           :items-per-page="5"
           class="twolineTable"
         >
-          <template v-slot:item.actions="{ item }">
+          <template v-slot:[itemNameSlotName]="{ item }">
+            <span class="text-pre-wrap"> {{item.name}} </span>
+          </template>
+          <template v-slot:[itemActionsSlotName]="{ item }">
             <v-btn color="primary" @click="handleSelect(item)"> Wählen </v-btn>
           </template>
         </v-data-table>
@@ -99,11 +102,24 @@ export default class EventTrackingFormLocationSelect extends EventTrackingFormLo
     this.$emit("input", value);
   }
 
+  get itemNameSlotName(): string {
+    return "item.name";
+  }
+
+  get itemActionsSlotName(): string {
+    return "item.actions";
+  }
+
   get locationRows(): LocationInformationTableRow[] {
     return (this.locations || []).map((location) => {
       const { name, contact } = location;
+      var combinedName = name;
+      if(contact.officialName) {
+        combinedName += "\n(" + contact.officialName + ")";
+      }
+
       return {
-        name: name || "-",
+        name: combinedName || "-",
         address: getFormattedAddress(contact.address) || "-",
         representative: contact.representative || "-",
         email: contact.email || "-",

iris-client-fe/src/views/event-tracking-list/event-tracking-list.view.vue

@@ -59,6 +59,9 @@
           class="elevation-1 mt-5 twolineTable"
           :search="tableData.search"
         >
+          <template v-slot:[itemAddressSlotName]="{ item }">
+            <span class="text-pre-wrap"> {{item.address}} </span>
+          </template>
           <template v-slot:[itemStatusSlotName]="{ item }">
             <v-chip :color="getStatusColor(item.status)" dark>
               {{ getStatusName(item.status) }}
@@ -99,8 +102,13 @@ function getFormattedAddress(
     if (data.locationInformation) {
       const contact = data.locationInformation.contact;
       if (contact) {
-        return `${data.locationInformation.name}, ${contact.address.street}, ${contact.address.zip} ${contact.address.city}`;
+        var name = `${data.locationInformation.name}`;        
+        if(contact.officialName) {
+          name = name + `\n(${contact.officialName})`;
+        }
+        return name + `\n${contact.address.street} \n${contact.address.zip} ${contact.address.city}`;
       }
+
       return data.locationInformation.name;
     }
     return "-";
@@ -207,6 +215,9 @@ export default class EventTrackingListView extends Vue {
   get itemActionSlotName(): string {
     return "item.actions";
   }
+  get itemAddressSlotName(): string {
+    return "item.address";
+  }
 
   on(): void {
     console.log("NOT IMPLEMENTED");
@@ -228,4 +239,4 @@ export default class EventTrackingListView extends Vue {
     return StatusMessages.getMessage(status);
   }
 }
-</script>
+</script>