feat: #77 Adjust the display formatting

iris-connect · May 11, 2021 · d7002ef · d7002ef
1 parent db90ea3
commit d7002ef
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 17 deletions.
diff --git a/iris-client-fe/src/assets/scss/base/_global.scss b/iris-client-fe/src/assets/scss/base/_global.scss
@@ -2,29 +2,37 @@
   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;
   }
 }
+.new_line_configuration {
+  td {
+    white-space: pre;
+  }
+}
diff --git a/...-client-fe/src/views/event-tracking-form/components/event-tracking-form-location-info.vue b/...-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,11 @@ const EventTrackingFormLocationInfoProps = Vue.extend({
 
 @Component
 export default class EventTrackingFormLocationInfo extends EventTrackingFormLocationInfoProps {
-  get locationName(): string {
-    return this.location?.contact?.officialName ?? "";
+  get locationName(): Array<string> {
+    return [
+      this.location?.name ?? "",
+      "(" + this.location?.contact?.officialName + ")" ?? "",
+      ].filter((v) => v);
   }
   get locationContact(): Array<string> {
     const contact: LocationContact = this.location?.contact;

diff --git a/iris-client-fe/src/views/event-tracking-form/components/location-select-dialog.vue b/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 style="white-space: 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,19 @@ 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;
       return {
-        name: name || "-",
+        name: name + " \n(" + contact.officialName + ")" || "-",
         address: getFormattedAddress(contact.address) || "-",
         representative: contact.representative || "-",
         email: contact.email || "-",

diff --git a/iris-client-fe/src/views/event-tracking-list/event-tracking-list.view.vue b/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 style="white-space: pre-wrap;"> {{item.address}} </span>
+          </template>
           <template v-slot:[itemStatusSlotName]="{ item }">
             <v-chip :color="getStatusColor(item.status)" dark>
               {{ getStatusName(item.status) }}
@@ -99,7 +102,7 @@ function getFormattedAddress(
     if (data.locationInformation) {
       const contact = data.locationInformation.contact;
       if (contact) {
-      return `${data.locationInformation.name} (${data.locationInformation.contact.officialName}), ${contact.address.street}, ${contact.address.zip} ${contact.address.city}`;
+      return `${data.locationInformation.name} \n(${data.locationInformation.contact.officialName}) \n${contact.address.street} \n${contact.address.zip} ${contact.address.city}`;
       }
       return data.locationInformation.name;
     }
@@ -207,6 +210,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 +234,4 @@ export default class EventTrackingListView extends Vue {
     return StatusMessages.getMessage(status);
   }
 }
-</script>
+</script>