optimize mail flow

src/Frontend/src/components/MailFlow.vue

@@ -1,33 +1,43 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useQuasar } from 'quasar'
 
 import { ReceivedHeaderParts } from 'src/models/ReceivedHeaderParts'
-import { computed } from 'vue'
 
 interface Props {
   receivedHeaders: ReceivedHeaderParts[]
 }
 
-const maxItemsPerRow = 6
+const $q = useQuasar()
+
+const props = defineProps<Props>()
+
 const boxWidth = 110
 const boxHeight = 40
 const paddingRight = 5
 const paddingBottom = 5
 
-const props = defineProps<Props>()
+const maxItemsPerRow = computed(() => {
+  return $q.screen.gt.sm ? 6 : 2
+})
 
 const requiredRows = computed(() => {
-  return Math.ceil(props.receivedHeaders.length / maxItemsPerRow)
+  return Math.ceil(props.receivedHeaders.length / maxItemsPerRow.value)
+})
+
+const svgWidth = computed(() => {
+  return maxItemsPerRow.value * (boxWidth + paddingRight)
 })
 
 const svgHeight = computed(() => {
   return requiredRows.value * (boxHeight + paddingBottom)
 })
 
 function svgReceiveTranslate (index: number) : string {
-  const factor = Math.floor(index / maxItemsPerRow)
+  const factor = Math.floor(index / maxItemsPerRow.value)
 
   const y = factor * (boxHeight + paddingBottom)
-  const x = (index % maxItemsPerRow) * (boxWidth + paddingRight)
+  const x = (index % maxItemsPerRow.value) * (boxWidth + paddingRight)
 
   return `translate(${x}, ${y})`
 }
@@ -42,7 +52,7 @@ function svgReceiveTranslate (index: number) : string {
     :height="svgHeight"
     version="1.1"
     style="width:100%;height:100%;"
-    :viewBox="`0 0 700 ${svgHeight}`"
+    :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
   >
     <g
       v-for="(received, index) in receivedHeaders"

src/Frontend/src/components/MailFlowTable.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { QTableProps } from 'quasar'
+
+import { ReceivedHeaderParts } from 'src/models/ReceivedHeaderParts'
+
+interface Props {
+  receivedHeaders: ReceivedHeaderParts[]
+}
+
+defineProps<Props>()
+
+const columns : QTableProps['columns'] = [
+  {
+    name: 'dateTime',
+    align: 'left',
+    label: 'Time',
+    field: 'dateTime',
+    sortable: false
+  },
+  {
+    name: 'fromDomain',
+    align: 'left',
+    label: 'From Domain',
+    field: 'fromDomain',
+    sortable: false
+  },
+  {
+    name: 'fromIpAddress',
+    align: 'left',
+    label: 'From IpAddress',
+    field: 'fromIpAddress',
+    sortable: false
+  },
+  {
+    name: 'byDomain',
+    align: 'left',
+    label: 'By Domain',
+    field: 'byDomain',
+    sortable: false
+  },
+  {
+    name: 'byIpAddress',
+    align: 'left',
+    label: 'By IpAddress',
+    field: 'byIpAddress',
+    sortable: false
+  },
+  {
+    name: 'with',
+    align: 'left',
+    label: 'With',
+    field: 'with',
+    sortable: false
+  },
+  {
+    name: 'id',
+    align: 'left',
+    label: 'Id',
+    field: 'id',
+    sortable: false
+  },
+  {
+    name: 'for',
+    align: 'left',
+    label: 'For',
+    field: 'for',
+    sortable: false
+  }
+]
+
+</script>
+
+<template>
+  <q-table
+    flat
+
+    bordered
+    :rows="receivedHeaders"
+    :columns="columns"
+    :rows-per-page-options="[0]"
+
+    no-paginate
+  >
+    <template #body-cell-dateTime="props">
+      <q-td>
+        {{ props.row.dateTime.toISOString() }}
+      </q-td>
+    </template>
+  </q-table>
+</template>

src/Frontend/src/pages/IndexPage.vue

@@ -7,6 +7,7 @@ import { ReceivedHeaderParts } from 'src/models/ReceivedHeaderParts'
 import { mailHelper } from 'src/helpers/mailHelper'
 
 import MailFlow from 'src/components/MailFlow.vue'
+import MailFlowTable from 'src/components/MailFlowTable.vue'
 
 const MailHeaders = {
   From: 'From',
@@ -53,7 +54,12 @@ const mailHeaderParts = computed(() => {
     return undefined
   }
 
-  return mailHelper.splitMailHeader(mailHeader.value)
+  try {
+    return mailHelper.splitMailHeader(mailHeader.value)
+  } catch (error) {
+    console.error(error)
+    return undefined
+  }
 })
 
 const returnPathHeaders = computed(() => {
@@ -375,6 +381,7 @@ const otherHeaders = computed(() => {
         class="q-mt-sm"
       >
         <MailFlow :received-headers="receivedHeaders" />
+        <MailFlowTable :received-headers="receivedHeaders" />
 
         <!-- <div>
           <div