verint.com/ca_vue_apps
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added km: for using KM content

Browse Source
This commit is contained in:
Peter Morton 2024-01-12 18:18:06 -06:00
parent b37f7cef92
commit 18cfbd264b
5 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -16,6 +16,8 @@ Displays Telephony Context Information. This route has been designed to be used
Parameters prefixed with 'tps:' will fetch values from the Tenant Properties Service.
Paremeters prefixed with 'km:' will use Knowledge Management using the {contentID}(migratableReference)/{lang}. For example, integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US.
| name | description |
| -------------------- | ---------------------------------------------------------- |
| ani | Automatic Number Identification |

5
src/@types/HydraCollection.ts
View File

@ -7,3 +7,8 @@ export interface VCFGProperty {
"vcfg:name": string;
"vcfg:value": string;
}
export interface ArticleContent {
"vkm:name": string;
"vkm:articleBody": string;
}

28
src/helpers/index.ts
View File

@ -1,6 +1,6 @@
import type { ChannelAutomationAPI } from "../@types/ChannelAutomationAPI";
import type { TenantProperty } from "../@types/TenantProperty";
import type { HydraCollection } from "../@types/HydraCollection";
import type { HydraCollection, ArticleContent } from "../@types/HydraCollection";
import { jwtDecode } from "jwt-decode";
import type { VueCookies } from "vue-cookies";
import { inject } from "vue";
@ -119,3 +119,29 @@ export async function getTenantProperty(
throw error;
});
}
export async function getKMContent(
contentID?: string,
): Promise<string | undefined> {
const channelAutomationAPI = await getChannnelAutomationAPI();
if (!channelAutomationAPI) {
throw new Error("no channel automation api details");
}
const headers = {
Authorization: `OIDC_id_token ${channelAutomationAPI.authentication}`,
"Accept": "application/ld+json",
};
// TO-DO do something about lang parameter
const url = `${channelAutomationAPI.host}/km-content-service/${channelAutomationAPI.tenant}/content/vkm:AuthoredContent/${contentID}`;
return await axios
.get(url, { headers })
.then((response: { data: ArticleContent }) => {
return response.data["vkm:articleBody"];
})
.catch((error) => {
console.error("getTenantProperty: channelAutomationAPI.fetch");
console.error(error);
throw error;
});
}

2
src/views/HomePage.vue
View File

@ -7,7 +7,7 @@
</li>
<li>
<router-link
to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&transferSummary=summary&integrationCardTitle=tps:demo.integrationcard.title&integrationCardDoc=tps:demo.integrationcard.doc&_sessionIdentifier=bc93f1fc"
to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&transferSummary=summary&integrationCardTitle=tps:demo.integrationcard.title&integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US&_sessionIdentifier=bc93f1fc"
>
Telephony Context
</router-link>

40
src/views/TelephonyContext.vue
View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getTenantProperty } from "../helpers/index";
import { getTenantProperty, getKMContent } from "../helpers/index";
import VerticalLabelValue from "../components/VerticalLabelValue.vue";
import ErrorMessage from "../components/ErrorMessage.vue";
import IntegrationCard from "../components/IntegrationCard.vue";
@ -46,6 +46,12 @@ function setValueFromTPS(reference: { value: string }, param: string) {
.catch((error: Error) => {
errorMessage.value = error.message;
});
} else if (param.startsWith("km:")) {
getKMContent(param.substring(3, param.length)).then((content) => {
if(content) reference.value = content;
}).catch((error: Error) => {
errorMessage.value = error.message;
});
} else {
reference.value = param;
}
@ -65,15 +71,9 @@ function fetchData() {
<div>
<div class="customerAccount customer-detail-container" width="100%">
<div class="customer-profile-fields vertical-layout">
<div
class="column-layout"
style="width: 100%; max-width: 100%; height: 100%"
>
<div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
<div class="row1 column-layout-row">
<div
class="blockOuterSpacingRight col1 column-layout-cell"
style="width: 25%"
>
<div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
<h3>Telephony Data</h3>
<VerticalLabelValue label="Channel" :value="channel" />
<VerticalLabelValue label="Type" :value="type" />
@ -82,24 +82,12 @@ function fetchData() {
<VerticalLabelValue label="ANI" :value="ani" />
<VerticalLabelValue label="DNIS" :value="dnis" />
</div>
<div
class="blockOuterSpacingRight col2 column-layout-cell"
style="width: 25%"
>
<DaVinciView
:summary="transferSummaryValue"
:authenticated="authenticated == 'true'"
:crs-score="Number(crsScore)"
/>
<div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
<DaVinciView :summary="transferSummaryValue" :authenticated="authenticated == 'true'"
:crs-score="Number(crsScore)" />
</div>
<div
class="blockOuterSpacingRight col3 column-layout-cell"
style="width: 50%"
>
<IntegrationCard
:title="integrationCardTitleValue"
:doc="integrationCardDocValue"
/>
<div class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%">
<IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" />
</div>
</div>
</div>