Docker buildout

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>