Skip to content

Commit 2cbc481

Browse files
simonredfernsimonredfern
committed
Feature: Adding Help page (gets data from glossary Item)
1 parent 7905adb commit 2cbc481

File tree

7 files changed

+325
-22
lines changed

7 files changed

+325
-22
lines changed

‎src/components/HeaderNav.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,15 @@ const getCurrentPath = () => {
134134
<RouterLink class="router-link" id="header-nav-glossary" to="/glossary">{{
135135
$t('header.glossary')
136136
}}</RouterLink>
137+
<RouterLink class="router-link" id="header-nav-help" to="/help">{{
138+
$t('header.help')
139+
}}</RouterLink>
137140
<a v-if="showObpApiManagerButton && hasObpApiManagerHost" v-bind:href="obpApiManagerHost" class="router-link" id="header-nav-api-manager">
138141
{{ $t('header.api_manager') }}
139142
</a>
140-
<el-dropdown
141-
class="menu-right router-link"
142-
id="header-nav-more"
143+
<el-dropdown
144+
class="menu-right router-link"
145+
id="header-nav-more"
143146
@command="handleMore"
144147
trigger="hover"
145148
placement="bottom-end"

‎src/language/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"api_explorer": "API Explorer",
55
"api_manager": "API Manager",
66
"glossary": "Glossary",
7+
"help": "Help",
78
"more": "More",
89
"spaces": "Spaces",
910
"login": "Log on",

‎src/language/es.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"api_explorer": "Explorador de API",
55
"api_manager": "Administrador de API",
66
"glossary": "Glosario",
7+
"help": "Ayuda",
78
"more": "Mas",
89
"spaces": "Espacio",
910
"login": "Iniciar sesión",

‎src/language/ro.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
2-
"header": {
3-
"portal_home": "Portal Acasă",
4-
"api_explorer": "Explorator API",
5-
"api_manager": "Administrator API",
6-
"glossary": "Glosar",
7-
"more": "Mai mult",
8-
"spaces": "Spații",
9-
"login": "Autentificare",
10-
"logoff": "Deconectare"
11-
},
12-
"preview": {
13-
"required_roles": "ROLURI NECESARE",
14-
"validations": "VALIDĂRI",
15-
"possible_errors": "POSIBILE ERORI",
16-
"connector_methods": "METODE DE CONECTOR"
17-
}
2+
"header": {
3+
"portal_home": "Portal Acasă",
4+
"api_explorer": "Explorator API",
5+
"api_manager": "Administrator API",
6+
"glossary": "Glosar",
7+
"help": "Ajutor",
8+
"more": "Mai mult",
9+
"spaces": "Spații",
10+
"login": "Autentificare",
11+
"logoff": "Deconectare"
12+
},
13+
"preview": {
14+
"required_roles": "ROLURI NECESARE",
15+
"validations": "VALIDĂRI",
16+
"possible_errors": "POSIBILE ERORI",
17+
"connector_methods": "METODE DE CONECTOR"
1818
}
19-
19+
}

‎src/obp/glossary.ts‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,47 @@ export async function getOBPGlossary(): Promise<any> {
3333
const logMessage = `Loading glossary { version: ${OBP_API_VERSION} }`
3434
console.log(logMessage)
3535
updateLoadingInfoMessage(logMessage)
36-
return await get(`obp/${OBP_API_VERSION}/api/glossary`)
36+
const glossary = await get(`obp/${OBP_API_VERSION}/api/glossary`)
37+
38+
// Check if the API call failed
39+
if (glossary && glossary.error) {
40+
console.error('Failed to load glossary:', glossary.error)
41+
return glossary
42+
}
43+
44+
if (glossary && glossary.glossary_items) {
45+
const itemCount = glossary.glossary_items.length
46+
console.log(`✓ Loaded ${itemCount} glossary items`)
47+
48+
// Log specific items of interest
49+
const helpItem = glossary.glossary_items.find(
50+
(item: any) => item.title === 'API-Explorer-II-Help'
51+
)
52+
if (helpItem) {
53+
console.log('✓ Found glossary item: API-Explorer-II-Help')
54+
} else {
55+
console.warn(
56+
'⚠ Glossary item not found: API-Explorer-II-Help (Help page will show error message)'
57+
)
58+
}
59+
} else {
60+
console.warn('⚠ Glossary response does not contain glossary_items array')
61+
}
62+
63+
return glossary
64+
}
65+
66+
// Get a specific glossary item by title
67+
export function getGlossaryItemByTitle(glossary: any, title: string): any | null {
68+
if (!glossary || !glossary.glossary_items) {
69+
console.warn(`Cannot retrieve glossary item "${title}": glossary data is not available`)
70+
return null
71+
}
72+
const item = glossary.glossary_items.find((item: any) => item.title === title)
73+
if (item) {
74+
console.log(`Retrieved glossary item: ${title}`)
75+
} else {
76+
console.warn(`Glossary item not found: ${title}`)
77+
}
78+
return item || null
3779
}

‎src/router/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727

2828
import { createRouter, createWebHistory } from 'vue-router'
2929
import GlossaryView from '../views/GlossaryView.vue'
30+
import HelpView from '../views/HelpView.vue'
3031
import MessageDocsView from '../views/MessageDocsView.vue'
3132
import BodyView from '../views/BodyView.vue'
3233
import Content from '../components/Content.vue'
@@ -58,10 +59,15 @@ export default async function router(): Promise<any> {
5859
name: 'glossary',
5960
component: isServerActive ? GlossaryView : InternalServerErrorView
6061
},
62+
{
63+
path: '/help',
64+
name: 'help',
65+
component: isServerActive ? HelpView : InternalServerErrorView
66+
},
6167
{
6268
path: '/message-docs/:id',
6369
name: 'message-docs',
64-
component: isServerActive ? MessageDocsView : InternalServerErrorView,
70+
component: isServerActive ? MessageDocsView : InternalServerErrorView
6571
},
6672
{
6773
path: '/operationid',

‎src/views/HelpView.vue‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!--
2+
- Open Bank Project - API Explorer II
3+
- Copyright (C) 2023-2024, TESOBE GmbH
4+
-
5+
- This program is free software: you can redistribute it and/or modify
6+
- it under the terms of the GNU Affero General Public License as published by
7+
- the Free Software Foundation, either version 3 of the License, or
8+
- (at your option) any later version.
9+
-
10+
- This program is distributed in the hope that it will be useful,
11+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
- GNU Affero General Public License for more details.
14+
-
15+
- You should have received a copy of the GNU Affero General Public License
16+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
-
18+
- Email: contact@tesobe.com
19+
- TESOBE GmbH
20+
- Osloerstrasse 16/17
21+
- Berlin 13359, Germany
22+
-
23+
- This product includes software developed at
24+
- TESOBE (http://www.tesobe.com/)
25+
-
26+
-->
27+
28+
<script setup lang="ts">
29+
import { ref, onBeforeMount, inject, computed } from 'vue'
30+
import { obpGlossaryKey } from '@/obp/keys'
31+
import { getGlossaryItemByTitle } from '@/obp/glossary'
32+
33+
const glossary = ref(inject(obpGlossaryKey)!)
34+
const helpContent = ref<any>(null)
35+
const notFound = ref(false)
36+
37+
onBeforeMount(() => {
38+
const helpItem = getGlossaryItemByTitle(glossary.value, 'API-Explorer-II-Help')
39+
if (helpItem) {
40+
helpContent.value = helpItem
41+
} else {
42+
notFound.value = true
43+
}
44+
})
45+
46+
const hasContent = computed(() => helpContent.value !== null)
47+
</script>
48+
49+
<template>
50+
<el-container class="help-container">
51+
<el-main class="help-content">
52+
<el-scrollbar>
53+
<el-backtop :right="100" :bottom="100" />
54+
<div v-if="hasContent">
55+
<h1 class="help-title">{{ helpContent.title }}</h1>
56+
<div v-html="helpContent.description.html" class="content"></div>
57+
</div>
58+
<div v-else-if="notFound" class="not-found">
59+
<h1>Help Content Not Available</h1>
60+
<p>
61+
The help content for API Explorer II could not be found. Please ensure that a glossary
62+
item with the title "API-Explorer-II-Help" exists in the system.
63+
</p>
64+
</div>
65+
</el-scrollbar>
66+
</el-main>
67+
</el-container>
68+
</template>
69+
70+
<style scoped>
71+
.help-container {
72+
height: calc(100vh - 60px);
73+
}
74+
75+
.help-content {
76+
color: #39455f;
77+
font-family: 'Roboto';
78+
padding: 0;
79+
}
80+
81+
.help-content :deep(.el-scrollbar__wrap) {
82+
overflow-x: hidden;
83+
}
84+
85+
.help-content :deep(.el-scrollbar__view) {
86+
padding: 40px 60px;
87+
word-wrap: break-word;
88+
overflow-wrap: break-word;
89+
max-width: 100%;
90+
box-sizing: border-box;
91+
}
92+
93+
.help-title {
94+
font-size: 32px;
95+
font-weight: 700;
96+
margin-bottom: 20px;
97+
color: #39455f;
98+
word-wrap: break-word;
99+
overflow-wrap: break-word;
100+
}
101+
102+
.content {
103+
font-size: 14px;
104+
line-height: 1.6;
105+
word-wrap: break-word;
106+
overflow-wrap: break-word;
107+
max-width: 100%;
108+
}
109+
110+
.content :deep(*) {
111+
max-width: 100%;
112+
word-wrap: break-word;
113+
overflow-wrap: break-word;
114+
}
115+
116+
.content :deep(h1),
117+
.content :deep(h2),
118+
.content :deep(h3),
119+
.content :deep(h4),
120+
.content :deep(h5),
121+
.content :deep(h6) {
122+
font-family: 'Roboto';
123+
font-weight: 700;
124+
margin-top: 24px;
125+
margin-bottom: 16px;
126+
color: #39455f;
127+
}
128+
129+
.content :deep(h1) {
130+
font-size: 28px;
131+
}
132+
133+
.content :deep(h2) {
134+
font-size: 24px;
135+
}
136+
137+
.content :deep(h3) {
138+
font-size: 20px;
139+
}
140+
141+
.content :deep(p) {
142+
margin-bottom: 16px;
143+
}
144+
145+
.content :deep(ul),
146+
.content :deep(ol) {
147+
margin-bottom: 16px;
148+
padding-left: 24px;
149+
}
150+
151+
.content :deep(li) {
152+
margin-bottom: 8px;
153+
}
154+
155+
.content :deep(img) {
156+
max-width: 100%;
157+
height: auto;
158+
display: block;
159+
margin: 16px 0;
160+
}
161+
162+
.content :deep(table) {
163+
max-width: 100%;
164+
table-layout: auto;
165+
word-wrap: break-word;
166+
border-collapse: collapse;
167+
margin: 16px 0;
168+
}
169+
170+
.content :deep(table th),
171+
.content :deep(table td) {
172+
border: 1px solid #dcdfe6;
173+
padding: 8px 12px;
174+
}
175+
176+
.content :deep(table th) {
177+
background-color: #f5f7fa;
178+
font-weight: 700;
179+
}
180+
181+
.content :deep(pre) {
182+
max-width: 100%;
183+
overflow-x: auto;
184+
white-space: pre-wrap;
185+
word-wrap: break-word;
186+
background-color: #f5f7fa;
187+
padding: 16px;
188+
border-radius: 4px;
189+
margin: 16px 0;
190+
}
191+
192+
.content :deep(code) {
193+
word-wrap: break-word;
194+
overflow-wrap: break-word;
195+
background-color: #f5f7fa;
196+
padding: 2px 6px;
197+
border-radius: 3px;
198+
font-family: 'Courier New', monospace;
199+
font-size: 13px;
200+
}
201+
202+
.content :deep(pre code) {
203+
background-color: transparent;
204+
padding: 0;
205+
}
206+
207+
.content :deep(strong) {
208+
font-family: 'Roboto';
209+
font-weight: 700;
210+
}
211+
212+
.content :deep(a) {
213+
text-decoration: underline;
214+
font-family: 'Roboto';
215+
font-size: 14px;
216+
color: #409eff;
217+
border-radius: 3px;
218+
padding: 1px;
219+
}
220+
221+
.content :deep(a):hover {
222+
background-color: #ecf5ff;
223+
color: #66b1ff;
224+
}
225+
226+
.content :deep(blockquote) {
227+
border-left: 4px solid #dcdfe6;
228+
padding-left: 16px;
229+
margin: 16px 0;
230+
color: #606266;
231+
font-style: italic;
232+
}
233+
234+
.not-found {
235+
text-align: center;
236+
padding: 40px 20px;
237+
}
238+
239+
.not-found h1 {
240+
font-size: 24px;
241+
color: #f56c6c;
242+
margin-bottom: 16px;
243+
}
244+
245+
.not-found p {
246+
font-size: 14px;
247+
color: #909399;
248+
line-height: 1.6;
249+
}
250+
</style>

0 commit comments

Comments
 (0)