artin/API-Explorer-II
1
0
Fork 0
mirror of https://github.com/OpenBankProject/API-Explorer-II.git synced 2026-02-06 10:47:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: search nav and content

Browse Source
This commit is contained in:
ma-silva 2023-04-03 23:44:41 +08:00
parent 4f193576eb
commit ba3ec32c44
17 changed files with 237 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components.d.ts vendored
View File

@ -9,14 +9,12 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
Body: typeof import('./src/components/Body.vue')['default']
Content: typeof import('./src/components/Content.vue')['default']
ElAside: typeof import('element-plus/es')['ElAside']
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@ -25,33 +23,13 @@ declare module '@vue/runtime-core' {
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElLink: typeof import('element-plus/es')['ElLink']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElText: typeof import('element-plus/es')['ElText']
Header: typeof import('./src/components/Header.vue')['default']
HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
Menu: typeof import('./src/components/Menu.vue')['default']
Preview: typeof import('./src/components/Preview.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SearchNav: typeof import('./src/components/SearchNav.vue')['default']
TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
}
}

2
package.json
View File

@ -4,7 +4,7 @@
"private": true,
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"build": "run-p build-only",
"preview": "vite preview",
"test:unit": "vitest",
"build-only": "vite build",

1
src/App.vue
View File

@ -10,7 +10,6 @@ import HeaderNav from './components/HeaderNav.vue'
<HeaderNav />
</el-header>
<RouterView />
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>

39
src/assets/element-plus-override.css
View File

@ -1,20 +1,51 @@
.el-main {
--el-main-padding: padding 0px !important;
}
.el-collapse-item__header {
border-bottom: none !important;
height: 30px !important;
font-family: 'Roboto' !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.el-collapse-item__wrap {
border-bottom: none !important;
}
.el-main {
--el-main-padding: padding 0px !important;
}
.el-collapse-item__header {
background-color: transparent !important;
white-space: nowrap !important;
}
.el-collapse {
margin-top: 5px;
margin-right: -8px;
max-height: 900px;
min-height: 800px;
overflow-y: auto !important;
border-top: none !important;
border-bottom: none !important;
--el-collapse-content-bg-color: transparent !important;
}
.el-collapse-item__content {
overflow-x: auto !important;
white-space: nowrap !important;
line-height: 30px !important;
padding-bottom: 0px !important;
}
.el-tabs--right {
display: inline-block !important;
}
.el-dropdown-link {
margin-top: -4px;
font-family: Roboto;
}
.el-dropdown-menu__item {
font-family: Roboto;
}

47
src/assets/header.css
View File

@ -1,47 +0,0 @@
nav {
text-align: right;
display: table-cell;
vertical-align: middle;
}
.logo {
display: table-cell;
vertical-align: middle;
transform: translateY(-50%);
top: 50%;
}
.header {
position: relative;
display: table;
}
.header::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--el-border-color-light);
z-index: var(--el-index-normal);
}
.router-link {
padding: 9px;
color: #39455f;
font-family: 'Roboto';
font-size: 14px;
text-decoration: none;
border-radius: 8px;
}
.router-link:hover {
background-color: #eef0f4;
}
.logo {
height: 40px;
position: absolute;
cursor: pointer;
}

3
src/assets/main.css
View File

@ -1,7 +1,4 @@
@import './base.css';
@import './header.css';
@import './search-nav.css';
@import './preview.css';
@import './element-plus-override.css';
main {

4
src/assets/preview.css
View File

@ -1,4 +0,0 @@
.preview {
color: white;
background-color: #151d30;
}

5
src/assets/search-nav.css
View File

@ -1,5 +0,0 @@
.search-nav {
background-color: #f8f9fb;
padding: 10px;
border-right: solid 1px var(--el-menu-border-color);
}

20
src/components/Content.vue
View File

@ -1,8 +1,24 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, inject, onBeforeMount } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import { getDescription } from '../obp/resource-docs'
const description = ref('')
const docs = inject('OBP-ResourceDocs')
onBeforeMount(() => {
const route = useRoute()
description.value = getDescription(docs, route.params.id)
})
onBeforeRouteUpdate((to) => {
description.value = getDescription(docs, to.params.id)
})
</script>
<template>
<main>
Content
Description:
{{ $route.params.id }}
<div v-html="description"></div>
</main>
</template>

62
src/components/HeaderNav.vue
View File

@ -21,6 +21,66 @@ import { ArrowDown } from '@element-plus/icons-vue'
<arrow-down />
</el-icon>
</span>
<RouterLink class="router-link" to="/login">Login</RouterLink>
<RouterLink class="login-button router-link" to="/login">Login</RouterLink>
</nav>
</template>
<style>
nav {
text-align: right;
display: table-cell;
vertical-align: middle;
}
.logo {
display: table-cell;
vertical-align: middle;
transform: translateY(-50%);
top: 50%;
}
.header {
position: relative;
display: table;
}
.header::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--el-border-color-light);
z-index: var(--el-index-normal);
}
.router-link {
padding: 9px;
color: #39455f;
font-family: 'Roboto';
font-size: 14px;
text-decoration: none;
border-radius: 8px;
}
.router-link:hover {
background-color: #eef0f4;
}
.logo {
height: 40px;
position: absolute;
cursor: pointer;
}
.login-button {
margin: 5px;
color: #ffffff;
background-color: #32b9ce;
}
.login-button:hover {
color: #39455f;
}
</style>

22
src/components/Menu.vue
View File

@ -1,8 +1,26 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
</script>
<template>
<el-row>
<el-col :span="12" class="menu-left">Menu left</el-col>
<el-col :span="12" class="menu-right">Menu right</el-col>
<el-col :span="12" class="menu-right">
Menu right &nbsp;&nbsp;&nbsp;&nbsp;
<el-dropdown class="menu-right">
<span class="el-dropdown-link">
EN
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>EN</el-dropdown-item>
<el-dropdown-item disabled>SP</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</template>

59
src/components/SearchNav.vue
View File

@ -1,34 +1,65 @@
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { reactive, ref, onBeforeMount, inject } from 'vue'
import { Search } from '@element-plus/icons-vue'
//import { getResourceDocs } from "../obp/client"
const activeNames = ref(['2'])
const groups = ref({})
const sortedKeys = ref([])
const form = reactive({
search: ''
})
//const resourceDocs = (async ()=>{
// console.log(await getResourceDocs());
//})()
onBeforeMount(() => {
groups.value = inject('OBP-GroupedResourceDocs')!
sortedKeys.value = Object.keys(groups.value).sort()
})
</script>
<template>
<el-form :model="form" label-width="120px">
<el-input v-model="form.search" class="w-50 m-1" placeholder="Search" :prefix-icon="Search" />
</el-form>
<el-collapse v-model="activeNames">
<el-collapse v-model="sortedKeys">
<el-collapse-item title="My Collections" name="1"> </el-collapse-item>
<el-collapse-item title="API" name="2">
<el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
<div class="el-tabs--right">
<div class="el-tabs__nav-wrap is-right">
<div v-for="i in 4" :key="i">
<RouterLink :to="{ name: 'api', params: { id: 'API Item ' + i } }">{{
'API Item ' + i
}}</RouterLink>
</div>
<div v-for="item in groups[key]" :key="item" class="api-router-tab">
<RouterLink
class="api-router-link"
:to="{ name: 'api', params: { id: item.operation_id } }"
>{{ item.summary }}</RouterLink
>
</div>
</div>
</el-collapse-item>
</el-collapse>
</template>
<style>
.search-nav {
background-color: #f8f9fb;
padding: 8px;
border-right: solid 1px var(--el-menu-border-color);
}
.api-router-link {
width: 100%;
margin-left: 15px;
font-family: 'Roboto' !important;
text-decoration: none;
color: #39455f;
display: inline-block;
}
.api-router-tab {
border-left: 2px solid var(--el-menu-border-color);
}
.api-router-tab:hover {
border-left: 2px solid #52b165;
/*cursor: pointer;*/
}
.api-router-tab:hover .api-router-link {
color: #52b165;
}
</style>

18
src/main.ts
View File

@ -3,13 +3,21 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { getOBPResourceDocs, getGroupedResourceDocs } from './obp/resource-docs'
import 'element-plus/dist/index.css'
import './assets/main.css'
;(async () => {
const app = createApp(App)
const app = createApp(App)
const docs = await getOBPResourceDocs()
const groupedDocs = await getGroupedResourceDocs(docs)
app.provide('OBP-ResourceDocs', docs)
app.provide('OBP-GroupedResourceDocs', groupedDocs)
app.use(createPinia())
app.use(router)
app.use(createPinia())
app.use(router)
app.mount('#app')
app.mount('#app')
})()

0
src/obp/api-collection.ts
View File

20
src/obp/client.ts
View File

@ -1,20 +0,0 @@
import { Version, API, get } from 'obp-typescript/src/api/client'
import type { APIClientConfig, DirectLoginAuthentication } from 'obp-typescript/src/api/client'
import { Any, GetAny } from 'obp-typescript/src/api/any'
const directLogin: DirectLoginAuthentication = {
username: process.env.OBP_USERNAME,
password: process.env.OBP_PASSWORD,
consumerKey: process.env.OBP_CONSUMER_KEY
}
const clientConfig: APIClientConfig = {
baseUri: 'https://obp-apisandbox.joinfincubator.com',
version: Version.v510,
authentication: directLogin
}
// Get Resource Docs
export async function getResourceDocs(): Promise<any> {
return await get<API.Any>(clientConfig, Any)(GetAny)('/resource-docs/v5.1.0/obp?tags=Account')
}

34
src/obp/resource-docs.ts Normal file
View File

@ -0,0 +1,34 @@
import { Version, API, get } from 'obp-typescript/src/api/client'
import type { APIClientConfig, DirectLoginAuthentication } from 'obp-typescript/src/api/client'
import { Any, GetAny } from 'obp-typescript/src/api/any'
const VERSION = 'v5.1.0'
const directLogin: DirectLoginAuthentication = {
username: process.env.OBP_USERNAME,
password: process.env.OBP_PASSWORD,
consumerKey: process.env.OBP_CONSUMER_KEY
}
const clientConfig: APIClientConfig = {
baseUri: 'https://apisandbox.openbankproject.com',
version: Version.v510,
authentication: directLogin
}
// Get Resource Docs
export async function getOBPResourceDocs(): Promise<any> {
return await get<API.Any>(clientConfig, Any)(GetAny)(`/resource-docs/${VERSION}/obp`)
}
export async function getGroupedResourceDocs(docs: any): Promise<any> {
return docs.resource_docs.reduce((values, doc) => {
doc.tags.forEach((tag) => {
;(values[tag] = values[tag] || []).push(doc)
})
return values
}, {})
}
export function getDescription(docs: any, operation_id: string): any {
return docs.resource_docs.filter((doc) => doc.operation_id === operation_id)[0].description
}

12
src/views/BodyView.vue
View File

@ -5,7 +5,7 @@ import Menu from '../components/Menu.vue'
<template>
<el-container>
<el-aside class="search-nav" width="15%">
<el-aside class="search-nav" width="20%">
<!--Left-->
<SearchNav />
</el-aside>
@ -16,7 +16,7 @@ import Menu from '../components/Menu.vue'
</el-header>
<el-container>
<el-aside width="50%">
Middle
Center
<RouterView name="body" />
</el-aside>
<el-aside class="preview" width="50%">
@ -25,7 +25,15 @@ import Menu from '../components/Menu.vue'
<RouterView class="preview" name="preview" />
</el-aside>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</el-main>
</el-container>
</template>
<style>
.preview {
color: white;
background-color: #151d30;
}
</style>