verint.com/eo-services-client
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed filtering option

Browse Source
This commit is contained in:
Peter Morton 2023-08-07 20:54:02 -05:00
parent c5d5b29e36
commit a2f8c3221d
7 changed files with 161 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
headers.js
View File

@ -1,6 +1,6 @@
// /etc/nginx/headers.js // /etc/nginx/headers.js
function headers_json(r) { function headers_json(r) {
return JSON.stringify(r.headersIn) return JSON.stringify(r.headersIn);
} }
export default {headers_json}; export default { headers_json };

17
src/App.vue
View File

@ -5,13 +5,11 @@ export default {
</script> </script>
<template> <template>
<div class="flex-container"> <div class="flex-container">
<router-view class="view sidebar" name="SideBarView"></router-view>
<router-view class="view sidebar" name="SideBarView"></router-view>
<div class="flex-child"> <div class="flex-child">
<router-view class="view main-content"></router-view> <router-view class="view main-content"></router-view>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -35,12 +33,13 @@ body {
height: 100%; height: 100%;
} }
.flex-child { // .flex-child {
flex: 1; // flex: 1;
height: 100%; // height: 100%;
border: 2px solid yellow; // border: 2px solid yellow;
} // }
// .flex-child:first-child { // .flex-child:first-child {
// margin-right: 20px; // margin-right: 20px;
// } </style> // }
</style>

21
src/router/index.js
View File

@ -7,45 +7,52 @@ import SearchByReferenceView from "../views/SearchByReferenceView.vue";
import InteractionsFlowView from "../views/InteractionsFlowView.vue"; import InteractionsFlowView from "../views/InteractionsFlowView.vue";
import CustomerAccountView from "../views/CustomerAccountView.vue"; import CustomerAccountView from "../views/CustomerAccountView.vue";
const routes = [ const routes = [
{ {
path: "/", path: "/",
name: "home", name: "home",
components: { default: HomeView, SideBarView: SideBarView }, components: { default: HomeView, SideBarView: SideBarView },
props: { default: false, SideBarView: true } props: { default: false, SideBarView: true },
}, },
{ {
path: "/about", path: "/about",
name: "about", name: "about",
components: { default: AboutView, SideBarView: SideBarView }, components: { default: AboutView, SideBarView: SideBarView },
props: { default: false, SideBarView: true } props: { default: false, SideBarView: true },
}, },
{ {
path: "/referenceId", path: "/referenceId",
name: "referenceId", name: "referenceId",
components: { default: SearchByReferenceView, SideBarView: SideBarView }, components: { default: SearchByReferenceView, SideBarView: SideBarView },
props: { default: route => ({ sessionIdentifier: route.query._sessionIdentifier }) } props: {
default: (route) => ({
sessionIdentifier: route.query._sessionIdentifier,
}),
},
}, },
{ {
path: "/interactionsFlow", path: "/interactionsFlow",
name: "interactionsFlow", name: "interactionsFlow",
components: { default: InteractionsFlowView, SideBarView: SideBarView }, components: { default: InteractionsFlowView, SideBarView: SideBarView },
props: { default: route => ({ sessionIdentifier: route.query._sessionIdentifier }) } props: {
default: (route) => ({
sessionIdentifier: route.query._sessionIdentifier,
}),
},
}, },
{ {
path: "/customerAccount/:accountNumber", path: "/customerAccount/:accountNumber",
name: "customerAccount", name: "customerAccount",
component: CustomerAccountView, component: CustomerAccountView,
components: { default: CustomerAccountView, SideBarView: SideBarView }, components: { default: CustomerAccountView, SideBarView: SideBarView },
props: { default: true, SideBarView: true } props: { default: true, SideBarView: true },
}, },
{ {
path: "/debug", path: "/debug",
name: "debug", name: "debug",
component: DebugFrameView, component: DebugFrameView,
components: { default: DebugFrameView }, components: { default: DebugFrameView },
props: { default: true } props: { default: true },
}, },
]; ];

29
src/views/DebugFrameView.vue
View File

@ -3,21 +3,20 @@ import { useCookies } from "vue3-cookies";
const { cookies } = useCookies(); const { cookies } = useCookies();
export default { export default {
name: "DebugFrameView", name: "DebugFrameView",
data() { data() {
return {
return { route: JSON.stringify(this.$route, null, 2),
route : JSON.stringify(this.$route, null, 2), cookies: JSON.stringify(cookies.keys(), null, 2),
cookies : JSON.stringify(cookies.keys(), null, 2), };
} },
} };
}
</script> </script>
<template> <template>
<h1>Adaptive Frame Debug</h1> <h1>Adaptive Frame Debug</h1>
<h2>Route information</h2> <h2>Route information</h2>
<div>{{ route }}</div> <div>{{ route }}</div>
<h2>Cookie information</h2> <h2>Cookie information</h2>
<div>{{ cookies }}</div> <div>{{ cookies }}</div>
</template> </template>

36
src/views/InteractionsFlowView.vue
View File

@ -9,10 +9,16 @@ import ErrorMessage from "../components/ErrorMessage.vue";
const props = defineProps({ const props = defineProps({
username: { type: String, default: "" }, username: { type: String, default: "" },
sessionIdentifier: { type: String, default: "" } sessionIdentifier: { type: String, default: "" },
}); });
const filterOptions = ["Channel", "SubChannel", "Queue", "Outcome"]; const filterOptions = [
"Direction",
"Channel",
"SubChannel",
"Queue",
"Outcome",
];
const multiSelected = ref(filterOptions); const multiSelected = ref(filterOptions);
const alignOptions = ["Left", "Center", "Right", "Justify"]; const alignOptions = ["Left", "Center", "Right", "Justify"];
@ -35,11 +41,13 @@ function fetchData() {
} else if (props.username.length > 0) { } else if (props.username.length > 0) {
authKey = props.username; authKey = props.username;
} else { } else {
errorMessage.value = "_sessionIdentifier or username must be passed as query params." errorMessage.value =
"_sessionIdentifier or username must be passed as query params.";
} }
if (authKey) { if (authKey) {
fetch( fetch(
`${import.meta.env.VITE_EO_SERVICES_URL}/api/interactions-flow?filter=${multiSelected.value `${import.meta.env.VITE_EO_SERVICES_URL}/api/interactions-flow?filter=${
multiSelected.value
}&authKey=${authKey}`, }&authKey=${authKey}`,
{ {
credentials: "include", // fetch won't send cookies unless you set credentials credentials: "include", // fetch won't send cookies unless you set credentials
@ -96,9 +104,9 @@ function generateSankey(data) {
.nodeId((d) => d.name) .nodeId((d) => d.name)
.nodeAlign( .nodeAlign(
align[ align[
`sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice( `sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice(
1 1
)}` )}`
] ]
) // d3.sankeyLeft, etc. ) // d3.sankeyLeft, etc.
.nodeWidth(15) .nodeWidth(15)
@ -170,10 +178,10 @@ function generateSankey(data) {
linkColor === "source-target" linkColor === "source-target"
? (d) => `url(#${d.uid})` ? (d) => `url(#${d.uid})`
: linkColor === "source" : linkColor === "source"
? (d) => color(d.source.category) ? (d) => color(d.source.category)
: linkColor === "target" : linkColor === "target"
? (d) => color(d.target.category) ? (d) => color(d.target.category)
: linkColor : linkColor
) )
.attr("stroke-width", (d) => Math.max(1, d.width)); .attr("stroke-width", (d) => Math.max(1, d.width));
@ -201,16 +209,16 @@ function generateSankey(data) {
<option v-for="item in alignOptions" :key="item">{{ item }}</option> <option v-for="item in alignOptions" :key="item">{{ item }}</option>
</select> </select>
<select v-model="multiSelected" multiple style="width: 200px; height: 90px"> <!-- <select v-model="multiSelected" multiple style="width: 200px; height: 90px">
<option disabled value="">Please select nodes</option> <option disabled value="">Please select nodes</option>
<option v-for="item in filterOptions" :key="item">{{ item }}</option> <option v-for="item in filterOptions" :key="item">{{ item }}</option>
</select> </select> -->
<button @click="fetchData">Search Contacts</button> <button @click="fetchData">Search Contacts</button>
</div> </div>
<div id="chart"></div> <div id="chart"></div>
<ErrorMessage v-if="errorMessage" :message="errorMessage" /> <ErrorMessage v-if="errorMessage" :message="errorMessage" />
</template> </template>
<style scoped> <style scoped>
svg { svg {

24
src/views/SearchByReferenceView.vue
View File

@ -7,7 +7,7 @@ import ErrorMessage from "../components/ErrorMessage.vue";
const props = defineProps({ const props = defineProps({
username: { type: String, default: "" }, username: { type: String, default: "" },
sessionIdentifier: { type: String, default: "" } sessionIdentifier: { type: String, default: "" },
}); });
const referenceId = ref(""); const referenceId = ref("");
@ -30,12 +30,16 @@ function fetchData() {
} else if (props.username.length > 0) { } else if (props.username.length > 0) {
authKey = props.username; authKey = props.username;
} else { } else {
errorMessage.value = "_sessionIdentifier or username must be passed as query params." errorMessage.value =
"_sessionIdentifier or username must be passed as query params.";
} }
if (authKey) { if (authKey) {
fetch( fetch(
`${import.meta.env.VITE_EO_SERVICES_URL `${
}/api/unified-data-gateway?referenceId=${referenceId.value}&authKey=${authKey}`, import.meta.env.VITE_EO_SERVICES_URL
}/api/unified-data-gateway?referenceId=${
referenceId.value
}&authKey=${authKey}`,
{ {
credentials: "include", // fetch won't send cookies unless you set credentials credentials: "include", // fetch won't send cookies unless you set credentials
} }
@ -63,14 +67,22 @@ function fetchData() {
<h2>Search Criteria</h2> <h2>Search Criteria</h2>
<div> <div>
<label for="referenceId">Reference ID: </label> <label for="referenceId">Reference ID: </label>
<input id="referenceId" :value="referenceId" placeholder="enter Reference ID here" @input="onInput" /> <input
id="referenceId"
:value="referenceId"
placeholder="enter Reference ID here"
@input="onInput"
/>
<button @click="fetchData">Search Contacts</button> <button @click="fetchData">Search Contacts</button>
</div> </div>
<h2>Results</h2> <h2>Results</h2>
<ContactsSummary v-if="contactData" :summary="contactData.data.summary" /> <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
<div v-else>No Contacts Found</div> <div v-else>No Contacts Found</div>
<ContactTable v-if="contactData" :table-data="contactData.data.findContactsCompletedBetween.edges" /> <ContactTable
v-if="contactData"
:table-data="contactData.data.findContactsCompletedBetween.edges"
/>
<ErrorMessage v-if="errorMessage" :message="errorMessage" /> <ErrorMessage v-if="errorMessage" :message="errorMessage" />
</div> </div>
</template> </template>

158
src/views/SideBarView.vue
View File

@ -5,91 +5,95 @@ import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
import { h, markRaw } from "vue"; import { h, markRaw } from "vue";
const separator = { const separator = {
template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">', template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
} };
const faIcon = (props) => { const faIcon = (props) => {
return { return {
element: markRaw({ element: markRaw({
render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]), render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]),
}), }),
}; };
}; };
export default { export default {
name: "SideBarView", name: "SideBarView",
components: { components: {
SidebarMenu, SidebarMenu,
}, },
// props: { // props: {
// sidebar: { // sidebar: {
// type: Boolean, // type: Boolean,
// required: false // required: false
// } // }
// }, // },
data() { data() {
return { return {
menu: [ menu: [
{ {
header: "Services", header: "Services",
hiddenOnCollapse: true, hiddenOnCollapse: true,
},
{
href: "/",
title: "Home",
icon: faIcon({ icon: "fa-solid fa-house" }),
},
{
href: "/about",
title: "About",
icon: faIcon({ icon: "fa-solid fa-question" }),
},
{
component: markRaw(separator),
},
{
href: "/referenceId",
title: "Contacts Lookup",
icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
},
{
href: "/interactionsFlow",
title: "Interactions Flow",
icon: faIcon({ icon: "fa-solid fa-route" }),
},
{
href: "/customerAccount/12345",
title: "Customer Account Example",
icon: faIcon({ icon: "fa-solid fa-id-card" }),
},
],
collapsed: false,
};
},
mounted() {
this.onResize();
window.addEventListener("resize", this.onResize);
console.log()
},
methods: {
onResize() {
if (window.innerWidth <= 767) {
this.isOnMobile = true;
this.collapsed = true;
} else {
this.isOnMobile = false;
this.collapsed = false;
}
}, },
{
href: "/",
title: "Home",
icon: faIcon({ icon: "fa-solid fa-house" }),
},
{
href: "/about",
title: "About",
icon: faIcon({ icon: "fa-solid fa-question" }),
},
{
component: markRaw(separator),
},
{
href: "/referenceId",
title: "Contacts Lookup",
icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
},
{
href: "/interactionsFlow",
title: "Interactions Flow",
icon: faIcon({ icon: "fa-solid fa-route" }),
},
{
href: "/customerAccount/12345",
title: "Customer Account Example",
icon: faIcon({ icon: "fa-solid fa-id-card" }),
},
],
collapsed: false,
};
},
mounted() {
this.onResize();
window.addEventListener("resize", this.onResize);
console.log();
},
methods: {
onResize() {
if (window.innerWidth <= 767) {
this.isOnMobile = true;
this.collapsed = true;
} else {
this.isOnMobile = false;
this.collapsed = false;
}
}, },
} },
};
</script> </script>
<template> <template>
<div v-if="this.$route.query.sidebar" id="sidebar"> <div v-if="$route.query.sidebar" id="sidebar">
<sidebar-menu v-model:collapsed="collapsed" :menu="menu" :show-one-child="true" :relative="true"/> <sidebar-menu
</div> v-model:collapsed="collapsed"
:menu="menu"
:show-one-child="true"
:relative="true"
/>
</div>
</template> </template>
<style> <style></style>
</style>