Added components for each contact element

client/src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
-import ThreadSummary from './components/ThreadSummary.vue'
 import ContactTable from './components/ContactTable.vue'
+import ContactsSummary from './components/ContactsSummary.vue';
 
 const titleClass = ref('title')
 
@@ -30,12 +30,11 @@ async function fetchData() {
 
 
     <input :value="text" @input="onInput" placeholder="Enter threadId here">
-    <button @click="fetchData">Fetch next todo</button>
+    <button @click="fetchData">Fetch Contacts</button>
 
-    <ThreadSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
+    <ContactsSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
     <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
     
-    <!-- <span>{{ contactData }}</span> -->
   </div>
 </template>
 <style>

client/src/components/ContactTable.vue

@@ -1,4 +1,11 @@
 <script setup>
+import HandledBy from './HandledBy.vue'
+import EmailInteraction from './EmailInteraction.vue'
+import DateTime from './DateTime.vue'
+import OutcomeList from './OutcomeList.vue'
+import CustomerList from './CustomerList.vue'
+import NotesList from './NotesList.vue'
+
 // eslint-disable-next-line
 defineProps(["tableData"]);
 </script>
@@ -22,15 +29,17 @@ defineProps(["tableData"]);
         <tbody>
             <tr v-for="td in tableData" :key="td">
                 <td>{{ td.node.systemId }}</td>
-                <td>{{ td.node.startTime }}</td>
-                <td>{{ td.node.endTime }}</td>
+                <td><DateTime :date="td.node.startTime"/></td>
+                <td><DateTime :date="td.node.endTime"/></td>
                 <td>{{ td.node.direction }}</td>
-                <td>{{ td.node.handledBy }}</td>
+                <td><HandledBy :handledBy="td.node.handledBy"/></td>
                 <td>{{ td.node.activeDuration }}</td>
-                <td>{{ td.node.notes }}</td>
-                <td>{{ td.node.interaction }}</td>
-                <td>{{ td.node.outcome }}</td>
-                <td>{{ td.node.customer }}</td>
+                <td><NotesList :notes="td.node.notes"/></td>
+                <td>
+                    <EmailInteraction v-if="td.node.interaction.__typename === 'Email'" :email="td.node.interaction" />
+                </td>
+                <td><OutcomeList :outcomes="td.node.outcome"/></td>
+                <td><CustomerList :customers="td.node.customer"/></td>
             </tr>
         </tbody>
     </table>

client/src/components/ContactsSummary.vue

@@ -0,0 +1,22 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["results"]);
+</script>
+
+<template>
+    <div class="horizonal center link list">
+        <div class="item">Contacts Found: {{ results.totalCount }}</div>
+        <div class="item">Total Handle Time: {{ results.totalHTDays }}</div>
+        <div class="item">Active Handle Time: {{ results.activeHTDays }}</div>
+        <div class="item">Total Active Time: {{ results.totalATHours }}</div>
+    </div>
+</template>
+<style>
+.summary {
+    display: flex;
+}
+.item {
+    width: 100%;
+    color: var(--color-text);
+}
+</style>

client/src/components/CustomerList.vue

@@ -0,0 +1,8 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["customers"]);
+
+</script>
+<template>
+    <span v-for="customer in customers.edges" :key="customer.node.ref">{{ customer.node.firstName }} {{ customer.node.lastName }} ({{ customer.node.ref }})</span>
+</template>

client/src/components/DateTime.vue

@@ -0,0 +1,12 @@
+<script setup>
+// eslint-disable-next-line
+const props = defineProps(["date"]);
+
+const dateValue = new Date(props.date)
+const date = dateValue.toLocaleDateString()
+const time = dateValue.toLocaleTimeString()
+
+</script>
+<template>
+    <p>{{ date }} {{ time }}</p>
+</template>

client/src/components/EmailInteraction.vue

@@ -0,0 +1,9 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["email"]);
+</script>
+<template>
+    <p>To: <span v-for="address in email.toAddresses" :key="address">{{ address }} </span> </p>
+    <p>From:{{ email.fromAddress }}</p>
+    <p>Subject:{{ email.subject }}</p>
+</template>

client/src/components/HandledBy.vue

@@ -0,0 +1,7 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["handledBy"]);
+</script>
+<template>
+    <p>{{ handledBy.username }}</p>
+</template>

client/src/components/NotesList.vue

@@ -0,0 +1,9 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["notes"]);
+</script>
+<template>
+    <div  v-if="notes">
+    <span  v-for="note in notes.edges" :key="note">{{ note.node.text }}</span>
+</div>  
+</template>

client/src/components/OutcomeList.vue

@@ -0,0 +1,8 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["outcomes"]);
+
+</script>
+<template>
+    <span v-for="outcome in outcomes.edges" :key="outcome">{{ outcome.node.text }} </span>
+</template>

client/src/components/ThreadSummary.vue

@@ -1,11 +0,0 @@
-<script setup>
-// eslint-disable-next-line
-defineProps(["results"]);
-</script>
-
-<template>
-    <h4>Contacts Found: {{ results.totalCount }}</h4>
-    <h4>Total Handle Time: {{ results.totalHTDays }}</h4>
-    <h4>Active Handle Time: {{ results.activeHTDays }}</h4>
-    <h4>Total Active Time: {{ results.totalATHours }}</h4>
-</template>

server/routes/threadTracker.js

@@ -70,6 +70,7 @@ router.get("/", (req, res) => {
                   }
               }
           interaction {
+              systemId
               locale
               __typename
               ... on Email {
@@ -79,6 +80,7 @@ router.get("/", (req, res) => {
                   receivedDate
                   subject
                   fromAddress
+                  toAddresses
                   ccAddresses
                   bccAddresses
                   detectedLanguage