Docker buildout

src/App.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from 'vue'
+import ContactTable from './components/ContactTable.vue'
+import ContactsSummary from './components/ContactsSummary.vue';
+
+const threadId = ref('')
+const contactData = ref(null)
+
+function onInput(e) {
+  threadId.value = e.target.value
+}
+
+async function fetchData() {
+  console.log('fetchingData');
+  contactData.value = null
+  const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/thread-tracker?threadId=${ threadId.value }`, {
+      credentials: "include" // fetch won't send cookies unless you set credentials
+    })
+    contactData.value = await res.json()
+    console.log(contactData.value)
+}
+
+</script>
+<template>
+  <div id="app">
+    <header>
+      <h1>Message Tracking Time</h1>
+    </header>
+
+    <div>
+      <label for="threadId">Reference ID: </label>
+      <input id="threadId" :value="threadId" @input="onInput" placeholder="enter Reference ID here" />
+    </div>
+    
+    <div><button @click="fetchData">Fetch Contacts</button></div>
+
+    <ContactsSummary v-if="contactData" :results="contactData.data.findContactsCompletedBetween" />
+    <div v-else>No Contacts Found</div>
+    <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
+    
+  </div>
+</template>
+<style scoped></style>
+

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/ContactTable.vue

@@ -0,0 +1,47 @@
+<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
+const props = defineProps(["tableData"]);
+console.log(props.tableData)
+</script>
+
+<template>
+    <table>
+        <thead>
+            <tr>
+                <th>Contact ID</th>
+                <th>Start Time</th>
+                <th>End Time</th>
+                <th>Direction</th>
+                <th>Handled By</th>
+                <th>Active Duration (s)</th>
+                <th>Notes</th>
+                <th>Interaction</th>
+                <th>Outcome</th>
+                <th>Customer</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="td in tableData" :key="td">
+                <td>{{ td.node.systemId }}</td>
+                <td><DateTime :date="td.node.startTime"/></td>
+                <td><DateTime :date="td.node.endTime"/></td>
+                <td>{{ td.node.direction }}</td>
+                <td><HandledBy :handledBy="td.node.handledBy"/></td>
+                <td>{{ td.node.activeDuration }}</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>
+</template>

src/components/ContactsSummary.vue

@@ -0,0 +1,62 @@
+<script setup>
+// eslint-disable-next-line
+defineProps(["results"]);
+</script>
+
+<template>
+    <div class="stats">
+        <div class="item">
+            <div class="measure">{{ results.totalCount }}</div>
+            <div class="label">Contacts Found</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ results.totalHTDays }}</div>
+            <div class="label">Total Handle Time (days)</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ results.activeHTDays }}</div>
+            <div class="label">Active Handle Time (days)</div>
+        </div>
+
+        <div class="item">
+            <div class="measure">{{ results.totalATHours }}</div>
+            <div class="label">Total Active Time (days)</div>
+        </div>
+    </div>
+</template>
+<style>
+.stats {
+    display: flex;
+}
+.item {
+    width: 100%;
+    border: 2px solid rgb(57, 145, 201);
+    border-radius: 4px;
+    background-color: #f7f9fc;
+    font-weight: bold;
+    white-space: normal;
+    margin: 5px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.measure {
+    width: 100%;
+    color: rgb(57,145,201);
+    font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif;
+    text-align: center;
+    font-size: 16px;
+    padding: 5px;
+}
+
+.label {
+    width: 100%;
+    font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif;
+    font-size: 11px;
+    text-align: center;
+    padding: 5px;
+}
+</style>

src/components/CustomerList.vue

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

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>

src/components/EmailInteraction.vue

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

src/components/HandledBy.vue

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

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>

src/components/OutcomeList.vue

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

src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.css

@@ -0,0 +1,87 @@
+h1 {
+    font-size: 18px;
+    line-height: 19px;
+    overflow: hidden;
+    padding: 6px 0 12px 0;
+    min-height: 23px;
+    vertical-align: middle;
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    border-bottom: 1px solid #c7c7c7;
+}
+
+h3 {
+    border-bottom: 1px solid rgb(199, 199, 199);
+    display: block;
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 23px;
+    min-height: 23px;
+    overflow: hidden;
+}
+
+body {
+    font: 12px/18px "OpenSans", Ariel, sans-serif;
+}
+
+p {
+    color: rgb(51, 51, 51);
+    display: block;
+    font: normal normal normal normal 12px/18px OpenSans, Arial, sans-serif;
+    font-variant: normal;
+    text-align: left;
+    visibility: visible;
+    white-space: normal;
+}
+
+table {
+    border-collapse: collapse;
+    font: normal normal normal normal 12px/18px OpenSans, Arial, sans-serif;
+    width: 100%;
+}
+
+th {
+    background: rgb(238, 238, 238) none repeat-x scroll 0px 0px / auto padding-box border-box;
+    border-right: 2px solid rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(255, 255, 255);
+    padding: 3px 6px 2px;
+    text-align: left;
+    vertical-align: bottom;
+}
+
+td {
+    margin: 0px;
+    padding: 0px;
+    text-align: left;
+}
+
+tr {
+    border-bottom: 1px solid rgb(199, 199, 199);
+    padding: 4px 0px 3px;
+}
+
+button {
+    margin-left: 5px;
+    color: #333333;
+    background-color: #ccc;
+    background-image: none;
+    border: 2px solid transparent;
+    height: 24px;
+    line-height: 22px;
+    white-space: nowrap;
+    width: auto;
+    min-width: 0px;
+    font-size: 12px;
+    padding: 0 6px !important;
+    margin: 0;
+    font-family: "OpenSans", Arial, sans-serif;
+    text-align: center;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    box-shadow: 0 0 0 1px transparent inset;
+    writing-mode: horizontal-tb !important;
+    appearance: auto;
+    text-rendering: auto;
+    align-items: flex-start;
+}