Added lint and format scripts
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
// eslint-disable-next-line
|
||||
defineProps(["errorMessage"]);
|
||||
</script>
|
||||
<template>
|
||||
<p v-if="errorMessage">Error: {{ errorMessage }}</p>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
9
src/components/ErrorMessage.vue
Normal file
9
src/components/ErrorMessage.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user