From a2f8c3221d0c979d218c904766d2a076d5548e11 Mon Sep 17 00:00:00 2001 From: "Peter.Morton" Date: Mon, 7 Aug 2023 20:54:02 -0500 Subject: [PATCH] removed filtering option --- headers.js | 8 +- src/App.vue | 17 ++- src/router/index.js | 21 ++-- src/views/DebugFrameView.vue | 29 +++-- src/views/InteractionsFlowView.vue | 36 ++++--- src/views/SearchByReferenceView.vue | 24 +++-- src/views/SideBarView.vue | 158 ++++++++++++++-------------- 7 files changed, 161 insertions(+), 132 deletions(-) diff --git a/headers.js b/headers.js index 9b01933..7a57c46 100644 --- a/headers.js +++ b/headers.js @@ -1,6 +1,6 @@ // /etc/nginx/headers.js function headers_json(r) { - return JSON.stringify(r.headersIn) - } - - export default {headers_json}; \ No newline at end of file + return JSON.stringify(r.headersIn); +} + +export default { headers_json }; diff --git a/src/App.vue b/src/App.vue index 3850d83..e437dab 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,13 +5,11 @@ export default { +// } + diff --git a/src/router/index.js b/src/router/index.js index 3162c7b..6b12651 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,45 +7,52 @@ import SearchByReferenceView from "../views/SearchByReferenceView.vue"; import InteractionsFlowView from "../views/InteractionsFlowView.vue"; import CustomerAccountView from "../views/CustomerAccountView.vue"; - const routes = [ { path: "/", name: "home", components: { default: HomeView, SideBarView: SideBarView }, - props: { default: false, SideBarView: true } + props: { default: false, SideBarView: true }, }, { path: "/about", name: "about", components: { default: AboutView, SideBarView: SideBarView }, - props: { default: false, SideBarView: true } + props: { default: false, SideBarView: true }, }, { path: "/referenceId", name: "referenceId", components: { default: SearchByReferenceView, SideBarView: SideBarView }, - props: { default: route => ({ sessionIdentifier: route.query._sessionIdentifier }) } + props: { + default: (route) => ({ + sessionIdentifier: route.query._sessionIdentifier, + }), + }, }, { path: "/interactionsFlow", name: "interactionsFlow", components: { default: InteractionsFlowView, SideBarView: SideBarView }, - props: { default: route => ({ sessionIdentifier: route.query._sessionIdentifier }) } + props: { + default: (route) => ({ + sessionIdentifier: route.query._sessionIdentifier, + }), + }, }, { path: "/customerAccount/:accountNumber", name: "customerAccount", component: CustomerAccountView, components: { default: CustomerAccountView, SideBarView: SideBarView }, - props: { default: true, SideBarView: true } + props: { default: true, SideBarView: true }, }, { path: "/debug", name: "debug", component: DebugFrameView, components: { default: DebugFrameView }, - props: { default: true } + props: { default: true }, }, ]; diff --git a/src/views/DebugFrameView.vue b/src/views/DebugFrameView.vue index 5a6fb7c..ed38092 100644 --- a/src/views/DebugFrameView.vue +++ b/src/views/DebugFrameView.vue @@ -3,21 +3,20 @@ import { useCookies } from "vue3-cookies"; const { cookies } = useCookies(); export default { - name: "DebugFrameView", + name: "DebugFrameView", - data() { - - return { - route : JSON.stringify(this.$route, null, 2), - cookies : JSON.stringify(cookies.keys(), null, 2), - } - } -} + data() { + return { + route: JSON.stringify(this.$route, null, 2), + cookies: JSON.stringify(cookies.keys(), null, 2), + }; + }, +}; \ No newline at end of file +

Adaptive Frame Debug

+

Route information

+
{{ route }}
+

Cookie information

+
{{ cookies }}
+ diff --git a/src/views/InteractionsFlowView.vue b/src/views/InteractionsFlowView.vue index 262cf48..666b134 100644 --- a/src/views/InteractionsFlowView.vue +++ b/src/views/InteractionsFlowView.vue @@ -9,10 +9,16 @@ import ErrorMessage from "../components/ErrorMessage.vue"; const props = defineProps({ 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 alignOptions = ["Left", "Center", "Right", "Justify"]; @@ -35,11 +41,13 @@ function fetchData() { } else if (props.username.length > 0) { authKey = props.username; } 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) { 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}`, { credentials: "include", // fetch won't send cookies unless you set credentials @@ -96,9 +104,9 @@ function generateSankey(data) { .nodeId((d) => d.name) .nodeAlign( align[ - `sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice( - 1 - )}` + `sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice( + 1 + )}` ] ) // d3.sankeyLeft, etc. .nodeWidth(15) @@ -170,10 +178,10 @@ function generateSankey(data) { linkColor === "source-target" ? (d) => `url(#${d.uid})` : linkColor === "source" - ? (d) => color(d.source.category) - : linkColor === "target" - ? (d) => color(d.target.category) - : linkColor + ? (d) => color(d.source.category) + : linkColor === "target" + ? (d) => color(d.target.category) + : linkColor ) .attr("stroke-width", (d) => Math.max(1, d.width)); @@ -201,16 +209,16 @@ function generateSankey(data) { - +

Results

No Contacts Found
- + diff --git a/src/views/SideBarView.vue b/src/views/SideBarView.vue index d048e2a..c415f09 100644 --- a/src/views/SideBarView.vue +++ b/src/views/SideBarView.vue @@ -5,91 +5,95 @@ import "vue-sidebar-menu/dist/vue-sidebar-menu.css"; import { h, markRaw } from "vue"; const separator = { - template: '
', -} + template: '
', +}; const faIcon = (props) => { - return { - element: markRaw({ - render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]), - }), - }; + return { + element: markRaw({ + render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]), + }), + }; }; export default { - name: "SideBarView", - components: { - SidebarMenu, - }, + name: "SideBarView", + components: { + SidebarMenu, + }, - // props: { - // sidebar: { - // type: Boolean, - // required: false - // } - // }, - data() { - return { - menu: [ - { - header: "Services", - 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; - } + // props: { + // sidebar: { + // type: Boolean, + // required: false + // } + // }, + data() { + return { + menu: [ + { + header: "Services", + 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; + } }, -} + }, +}; - \ No newline at end of file +