Added lint and format scripts

This commit is contained in:
2023-06-27 13:59:29 -05:00
parent 689554d78a
commit 794fb59842
28 changed files with 2993 additions and 742 deletions

View File

@@ -1,47 +1,50 @@
<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'
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)
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>
<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 :handled-by="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>

View File

@@ -4,65 +4,67 @@ defineProps(["summary"]);
</script>
<template>
<div v-if="summary" class="stats">
<div class="item">
<div class="measure">{{ summary.totalCount }}</div>
<div class="label">Contacts Found</div>
</div>
<div class="item">
<div class="measure">{{ summary.totalInboundCount }}</div>
<div class="label">INBOUND Contacts Found</div>
</div>
<div class="item">
<div class="measure">{{ summary.totalHTHours.toFixed(2) }}</div>
<div class="label">Total Handle Time (hours)</div>
</div>
<div class="item">
<div class="measure">{{ summary.activeHTMinutes.toFixed(2) }}</div>
<div class="label">Active Handle Time (minutes)</div>
</div>
<div class="item">
<div class="measure">{{ (summary.totalInboundActiveSeconds / 60).toFixed(2) }}</div>
<div class="label">Total [INBOUND] Active Time (minutes)</div>
</div>
<div v-if="summary" class="stats">
<div class="item">
<div class="measure">{{ summary.totalCount }}</div>
<div class="label">Contacts Found</div>
</div>
<div class="item">
<div class="measure">{{ summary.totalInboundCount }}</div>
<div class="label">INBOUND Contacts Found</div>
</div>
<div class="item">
<div class="measure">{{ summary.totalHTHours.toFixed(2) }}</div>
<div class="label">Total Handle Time (hours)</div>
</div>
<div class="item">
<div class="measure">{{ summary.activeHTMinutes.toFixed(2) }}</div>
<div class="label">Active Handle Time (minutes)</div>
</div>
<div class="item">
<div class="measure">
{{ (summary.totalInboundActiveSeconds / 60).toFixed(2) }}
</div>
<div class="label">Total [INBOUND] Active Time (minutes)</div>
</div>
</div>
</template>
<style>
.stats {
display: flex;
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;
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;
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;
width: 100%;
font-family: "DejaVu Sans", Ariel, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
padding: 5px;
}
</style>

View File

@@ -1,11 +1,20 @@
<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>
<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>

View File

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

View File

@@ -3,14 +3,19 @@
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>
<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;
margin: 0;
}
</style>
</style>

View File

@@ -1,12 +0,0 @@
<script setup>
// eslint-disable-next-line
defineProps(["errorMessage"]);
</script>
<template>
<p v-if="errorMessage">Error: {{ errorMessage }}</p>
</template>
<style>
</style>

View File

@@ -0,0 +1,9 @@
<script setup>
// eslint-disable-next-line
defineProps(["message"]);
</script>
<template>
<p v-if="message">Error: {{ message }}</p>
</template>
<style></style>

View File

@@ -3,6 +3,6 @@
defineProps(["handledBy"]);
</script>
<template>
<p v-if="handledBy">{{ handledBy.username }}</p>
<p v-else>unknown</p>
</template>
<p v-if="handledBy">{{ handledBy.username }}</p>
<p v-else>unknown</p>
</template>

View File

@@ -3,7 +3,7 @@
defineProps(["notes"]);
</script>
<template>
<div v-if="notes">
<span v-for="note in notes.edges" :key="note">{{ note.node.text }}</span>
</div>
</template>
<div v-if="notes">
<span v-for="note in notes.edges" :key="note">{{ note.node.text }}</span>
</div>
</template>

View File

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