mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
feat: Refactor documentation view. (#921)
* feat: Refactor documentation view. * update tags. * add copy clipboard * fix empty values
This commit is contained in:
Edwin Betancourt
GitHub
parent
79e9e6659b
commit
27ed05e538
270
src/views/documentation/RepositoryDocumentation.vue
Normal file
270
src/views/documentation/RepositoryDocumentation.vue
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<el-card v-if="isLoadedRepository" class="box-card">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<div style="float: left; display: inline-flex; margin-top: 2%;">
|
||||||
|
<span>
|
||||||
|
<b> {{ repositoryData.title }} </b>
|
||||||
|
</span>
|
||||||
|
<el-tooltip class="item" effect="dark" :content="$t('documentation.goRepository')" placement="top-start">
|
||||||
|
<a target="_blank" :href="repositoryData.href" style="margin-left: 5px;">
|
||||||
|
<svg-icon icon-class="link" />
|
||||||
|
</a>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<el-tooltip class="item" effect="dark" :content="$t('documentation.seeDocumentation')" placement="top-start">
|
||||||
|
<a target="_blank" :href="repositoryData.document" style="margin-left: 5px;">
|
||||||
|
<svg-icon icon-class="education" />
|
||||||
|
</a>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="float: right;display: inline-flex;">
|
||||||
|
<el-popover
|
||||||
|
placement="right"
|
||||||
|
width="350"
|
||||||
|
trigger="click"
|
||||||
|
style="float: right"
|
||||||
|
>
|
||||||
|
<el-tabs v-model="tabSelected">
|
||||||
|
<el-tab-pane label="HTTPS" name="https">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<el-input
|
||||||
|
v-model="repositoryData.clone"
|
||||||
|
:disabled="true"
|
||||||
|
/>
|
||||||
|
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(repositoryData.clone)" />
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="SSH" name="ssh">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<el-input
|
||||||
|
v-model="repositoryData.sshUrl"
|
||||||
|
:disabled="true"
|
||||||
|
/>
|
||||||
|
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(repositoryData.sshUrl)" />
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
<el-button plain style="width: -webkit-fill-available;">
|
||||||
|
<a target="_blank" :href="repositoryData.downloadZip">
|
||||||
|
<svg-icon icon-class="zip" />
|
||||||
|
{{ $t('documentation.downloadZip') }}
|
||||||
|
</a>
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button slot="reference" icon="el-icon-download" type="success" size="mini" plain>
|
||||||
|
{{ $t('documentation.code') }}
|
||||||
|
</el-button>
|
||||||
|
</el-popover>
|
||||||
|
|
||||||
|
<el-button type="primary" size="mini" plain style="margin: 0px; padding-right: 3px;">
|
||||||
|
<a target="_blank" :href="repositoryData.href + '/branches'">
|
||||||
|
<svg-icon icon-class="tree-table" />
|
||||||
|
{{ $t('documentation.branches') }}
|
||||||
|
</a>
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" size="mini" plain style="margin: 0px; padding-right: 3px;">
|
||||||
|
<a target="_blank" :href="repositoryData.href + '/issues'">
|
||||||
|
<i class="el-icon-warning el-icon--right" />
|
||||||
|
{{ $t('documentation.issues') }}
|
||||||
|
</a>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!isEmptyValue(repositoryData)" style="display: inline-flex; width: 100%;">
|
||||||
|
<img width="100" height="100" :src="repositoryData.avatar" style="margin-left: 20%;">
|
||||||
|
<p style="font-size: 30px; padding-top: 1%; color: #008fd3;">
|
||||||
|
{{ repositoryData.title }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p align="center">
|
||||||
|
<repository-tags :repository="repository" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!isEmptyValue(repositoryData)"
|
||||||
|
id="markdown"
|
||||||
|
v-markdown="repositoryData.description"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-collapse accordion>
|
||||||
|
<el-collapse-item name="1">
|
||||||
|
<template slot="title" style="font-size: 16px;">
|
||||||
|
<span style="font-size: 16px; font-weight: revert;">
|
||||||
|
<b> {{ $t('documentation.releases') }} </b>
|
||||||
|
</span>
|
||||||
|
<a target="_blank" :href="repositoryData.href + '/releases'" style="font-size: 16px; font-weight: revert; padding-left: 1%">
|
||||||
|
<svg-icon icon-class="link" />
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-collapse
|
||||||
|
v-if="isLoadedReleases"
|
||||||
|
v-model="releaseOpened"
|
||||||
|
accordion
|
||||||
|
>
|
||||||
|
<el-collapse-item
|
||||||
|
v-for="(releases, key) in releasesList"
|
||||||
|
:key="key"
|
||||||
|
:name="key"
|
||||||
|
>
|
||||||
|
<template slot="title">
|
||||||
|
<svg v-if="key !== stopper" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16" style="margin-right: 2%;">
|
||||||
|
<path fill-rule="evenodd" :d="icon" />
|
||||||
|
</svg>
|
||||||
|
<b> {{ releases.title }} </b>
|
||||||
|
</template>
|
||||||
|
<el-button type="text" style="float: right;">
|
||||||
|
<a target="_blank" :href="releases.download">
|
||||||
|
{{ releases.titleDownload }}
|
||||||
|
<i class="el-icon-download" />
|
||||||
|
</a>
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<div v-if="!isEmptyValue(releases)" id="markdown" v-markdown="releases.body" />
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { defineComponent, computed, ref } from '@vue/composition-api'
|
||||||
|
|
||||||
|
import { config } from '@/utils/ADempiere/config'
|
||||||
|
import RepositoryTags from './RepositoryTags'
|
||||||
|
import { fetchReleasesList, fetchReadme } from '@/api/documentation/documentation'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Repository-Documentation',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
RepositoryTags
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
repository: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props, { root }) {
|
||||||
|
const isLoadedRepository = ref(false)
|
||||||
|
const isLoadedReleases = ref(false)
|
||||||
|
const repositoryData = ref({})
|
||||||
|
const releasesList = ref([])
|
||||||
|
const releaseNotes = ref({})
|
||||||
|
const tabSelected = ref('https')
|
||||||
|
const releaseOpened = ref([])
|
||||||
|
const icon = 'M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z'
|
||||||
|
|
||||||
|
const stopper = computed(() => {
|
||||||
|
return releasesList.value.length - 1
|
||||||
|
})
|
||||||
|
|
||||||
|
// fallback Copy Text To Clip board
|
||||||
|
const fallbackCopyTextToClipboard = (text) => {
|
||||||
|
const textArea = document.createElement('textarea')
|
||||||
|
textArea.value = text
|
||||||
|
document.body.appendChild(textArea)
|
||||||
|
textArea.focus()
|
||||||
|
textArea.select()
|
||||||
|
try {
|
||||||
|
if (document.execCommand('copy')) {
|
||||||
|
clipboardMessage(root.$t('notifications.copySuccessful'))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
clipboardMessage(root.$t('notifications.copyUnsuccessful'))
|
||||||
|
}
|
||||||
|
document.body.removeChild(textArea)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Notification Message when Copying TextNotification Message when Copying Text
|
||||||
|
const clipboardMessage = (message) => {
|
||||||
|
root.$message({
|
||||||
|
message,
|
||||||
|
type: 'success',
|
||||||
|
showClose: true,
|
||||||
|
duration: 1500
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Repository
|
||||||
|
fetchReadme({
|
||||||
|
repository: props.repository
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
repositoryData.value = {
|
||||||
|
title: response.name,
|
||||||
|
document: response.homepage,
|
||||||
|
href: response.html_url,
|
||||||
|
description: response.description,
|
||||||
|
avatar: response.organization.avatar_url,
|
||||||
|
clone: root.isEmptyValue(response.clone_url) ? '' : String(response.clone_url),
|
||||||
|
sshUrl: root.isEmptyValue(response.ssh_url) ? '' : String(response.ssh_url),
|
||||||
|
branches: response.branches_url,
|
||||||
|
downloadZip: response.html_url + '/archive/refs/heads/' + response.default_branch + '.zip'
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoadedRepository.value = true
|
||||||
|
})
|
||||||
|
|
||||||
|
// Releases
|
||||||
|
fetchReleasesList({
|
||||||
|
repository: '/' + props.repository
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (response) {
|
||||||
|
response.forEach(release => {
|
||||||
|
let download
|
||||||
|
let titleDownload
|
||||||
|
if (!root.isEmptyValue(release.assets)) {
|
||||||
|
download = release.assets[0].browser_download_url
|
||||||
|
titleDownload = release.assets[0].name
|
||||||
|
}
|
||||||
|
releasesList.value.push({
|
||||||
|
title: release.name,
|
||||||
|
href: release.html_url,
|
||||||
|
author: release.author.login,
|
||||||
|
body: root.isEmptyValue(release.body) ? '' : String(release.body),
|
||||||
|
created_at: release.created_at,
|
||||||
|
download,
|
||||||
|
titleDownload
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const { releaseNo } = config.repository
|
||||||
|
if (!root.isEmptyValue(releaseNo) && !root.isEmptyValue(releasesList.value)) {
|
||||||
|
releaseNotes.value = releasesList.value.find(release => {
|
||||||
|
return release.title === releaseNo
|
||||||
|
})
|
||||||
|
if (root.isEmptyValue(releaseNotes.value)) {
|
||||||
|
releaseNotes.value = releasesList.value[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoadedReleases.value = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
icon,
|
||||||
|
tabSelected,
|
||||||
|
releaseOpened,
|
||||||
|
isLoadedRepository,
|
||||||
|
isLoadedReleases,
|
||||||
|
repositoryData,
|
||||||
|
releasesList,
|
||||||
|
// computed
|
||||||
|
stopper,
|
||||||
|
// methods
|
||||||
|
fallbackCopyTextToClipboard
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -6,10 +6,10 @@
|
|||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/adempiere/adempiere-vue" rel="nofollow">
|
<a :href="'https://github.com/adempiere/' + repository + '/releases'">
|
||||||
<img src="https://travis-ci.org/adempiere/adempiere=vue.svg?branch=develop" alt="Build Status">
|
<img :src="'https://img.shields.io/github/release/adempiere/' + repository + '.svg'" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/adempiere/adempiere-vue/blob/master/LICENSE">
|
<a :href="'https://github.com/adempiere/' + repository + '/blob/master/LICENSE'">
|
||||||
<img src="https://img.shields.io/badge/license-GNU/GPL%20(v3)-blue" alt="license">
|
<img src="https://img.shields.io/badge/license-GNU/GPL%20(v3)-blue" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://gitter.im/adempiere/adempiere-vue">
|
<a href="https://gitter.im/adempiere/adempiere-vue">
|
||||||
@ -17,8 +17,16 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Tags'
|
name: 'RepositoryTags',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
repository: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -3,580 +3,62 @@
|
|||||||
<el-row :gutter="24">
|
<el-row :gutter="24">
|
||||||
<!-- ADempiere Vue -->
|
<!-- ADempiere Vue -->
|
||||||
<el-col :span="defaultSize" :style="style">
|
<el-col :span="defaultSize" :style="style">
|
||||||
<el-card class="box-card">
|
<repository-documentation
|
||||||
<div slot="header" class="clearfix">
|
repository="adempiere-vue"
|
||||||
<div style="float: left;display: inline-flex;margin-top: 2%;">
|
/>
|
||||||
<span>
|
|
||||||
<b> {{ RepositoryADVue.title }} </b>
|
|
||||||
</span>
|
|
||||||
<el-tooltip class="item" effect="dark" :content="$t('documentation.goRepository')" placement="top-start">
|
|
||||||
<a target="_blank" :href="RepositoryADVue.href" style="margin-left: 5px;">
|
|
||||||
<svg-icon icon-class="link" />
|
|
||||||
</a>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" :content="$t('documentation.seeDocumentation')" placement="top-start">
|
|
||||||
<a target="_blank" :href="RepositoryADVue.document" style="margin-left: 5px;">
|
|
||||||
<svg-icon icon-class="education" />
|
|
||||||
</a>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div style="float: right;display: inline-flex;">
|
|
||||||
<el-popover
|
|
||||||
placement="right"
|
|
||||||
width="350"
|
|
||||||
trigger="click"
|
|
||||||
style="float: right"
|
|
||||||
>
|
|
||||||
<el-tabs v-model="activeName">
|
|
||||||
<el-tab-pane label="HTTPS" name="HTTPS">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<el-input
|
|
||||||
v-model="RepositoryADVue.clone"
|
|
||||||
:disabled="true"
|
|
||||||
/>
|
|
||||||
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(RepositoryProxyApi.clone)" />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="SSH" name="SSH">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<el-input
|
|
||||||
v-model="RepositoryADVue.sshUrl"
|
|
||||||
:disabled="true"
|
|
||||||
/>
|
|
||||||
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(RepositoryProxyApi.sshUrl)" />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<el-button plain style="width: -webkit-fill-available;">
|
|
||||||
<a target="_blank" :href="RepositoryADVue.downloadZip">
|
|
||||||
<svg-icon icon-class="zip" /> {{ $t('documentation.downloadZip') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<el-button slot="reference" icon="el-icon-download" type="success" size="mini" plain>
|
|
||||||
{{ $t('documentation.code') }}
|
|
||||||
</el-button>homepage
|
|
||||||
</el-popover>
|
|
||||||
<el-button type="primary" size="mini" plain style="margin: 0px;padding-right: 3px;">
|
|
||||||
<a target="_blank" :href="RepositoryADVue.href + '/branches'">
|
|
||||||
<svg-icon icon-class="tree-table" /> {{ $t('documentation.branches') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="warning" size="mini" plain style="margin: 0px;padding-right: 3px;">
|
|
||||||
<a target="_blank" :href="RepositoryADVue.href + '/issues'">
|
|
||||||
<i class="el-icon-warning el-icon--right" /> {{ $t('documentation.issues') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isEmptyValue(RepositoryADVue)" style="display: inline-flex;width: 100%;">
|
|
||||||
<img width="100" height="100" :src="RepositoryADVue.avatar" style="margin-left: 20%;">
|
|
||||||
<p style="font-size: 30px;padding-top: 1%;color: #008fd3;"> {{ RepositoryADVue.title }} </p>
|
|
||||||
</div>
|
|
||||||
<p align="center">
|
|
||||||
<tags />
|
|
||||||
</p>
|
|
||||||
<div v-if="!isEmptyValue(RepositoryADVue)" id="markdown" v-markdown="RepositoryADVue.description" />
|
|
||||||
<el-collapse accordion>
|
|
||||||
<el-collapse-item name="1">
|
|
||||||
<template slot="title" style="font-size: 16px;">
|
|
||||||
<span style="font-size: 16px;font-weight: revert;">
|
|
||||||
<b> {{ releasesLabel }} </b>
|
|
||||||
</span>
|
|
||||||
<a target="_blank" :href="RepositoryADVue.href + '/releases'" style="font-size: 16px;font-weight: revert;padding-left: 1%">
|
|
||||||
<svg-icon icon-class="link" />
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
<el-collapse
|
|
||||||
v-model="activeListReleases"
|
|
||||||
accordion
|
|
||||||
>
|
|
||||||
<el-collapse-item
|
|
||||||
v-for="(releases, key) in releasesListADVue"
|
|
||||||
:key="key"
|
|
||||||
:name="key"
|
|
||||||
>
|
|
||||||
<template slot="title">
|
|
||||||
<svg v-if="key !== stopper" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16" style="margin-right: 2%;">
|
|
||||||
<path fill-rule="evenodd" :d="icon" />
|
|
||||||
</svg>
|
|
||||||
<b>
|
|
||||||
{{
|
|
||||||
releases.title
|
|
||||||
}}
|
|
||||||
</b>
|
|
||||||
</template>
|
|
||||||
<el-button type="text" style="float: right;">
|
|
||||||
<a target="_blank" :href="releases.download">
|
|
||||||
{{ releases.titleDownload }} <i class="el-icon-download" />
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<div v-if="!isEmptyValue(releases)" id="markdown" v-markdown="releases.body" />
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- ADempiere Proxy -->
|
<!-- ADempiere Proxy -->
|
||||||
<el-col :span="defaultSize" :style="style">
|
<el-col :span="defaultSize" :style="style">
|
||||||
<el-card class="box-card">
|
<repository-documentation
|
||||||
<div slot="header" class="clearfix">
|
repository="proxy-adempiere-api"
|
||||||
<div style="float: left;display: inline-flex;margin-top: 2%;">
|
/>
|
||||||
<span>
|
|
||||||
<b> {{ RepositoryProxyApi.title }} </b>
|
|
||||||
</span>
|
|
||||||
<el-tooltip class="item" effect="dark" :content="$t('documentation.goRepository')" placement="top-start">
|
|
||||||
<a target="_blank" :href="RepositoryProxyApi.href" style="margin-left: 5px;">
|
|
||||||
<svg-icon icon-class="link" />
|
|
||||||
</a>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip class="item" effect="dark" :content="$t('documentation.seeDocumentation')" placement="top-start">
|
|
||||||
<a target="_blank" :href="RepositoryProxyApi.document" style="margin-left: 5px;">
|
|
||||||
<svg-icon icon-class="education" />
|
|
||||||
</a>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div style="float: right;display: inline-flex;">
|
|
||||||
<el-popover
|
|
||||||
placement="right"
|
|
||||||
width="350"
|
|
||||||
trigger="click"
|
|
||||||
style="float: right"
|
|
||||||
>
|
|
||||||
<el-tabs v-model="activeName">
|
|
||||||
<el-tab-pane label="HTTPS" name="HTTPS">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<el-input
|
|
||||||
v-model="RepositoryProxyApi.clone"
|
|
||||||
:disabled="true"
|
|
||||||
/>
|
|
||||||
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(RepositoryProxyApi.clone)" />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="SSH" name="SSH">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<el-input
|
|
||||||
v-model="RepositoryProxyApi.sshUrl"
|
|
||||||
:disabled="true"
|
|
||||||
/>
|
|
||||||
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(RepositoryProxyApi.sshUrl)" />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<el-button plain style="width: -webkit-fill-available;">
|
|
||||||
<a target="_blank" :href="RepositoryProxyApi.downloadZip">
|
|
||||||
<svg-icon icon-class="zip" /> {{ $t('documentation.downloadZip') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<el-button slot="reference" icon="el-icon-download" type="success" size="mini" plain>{{ $t('documentation.code') }}</el-button>
|
|
||||||
</el-popover>
|
|
||||||
<el-button type="primary" size="mini" plain>
|
|
||||||
<a target="_blank" :href="RepositoryProxyApi.href + '/branches'">
|
|
||||||
<svg-icon icon-class="tree-table" /> {{ $t('documentation.branches') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="warning" size="mini" plain style="margin: 0px;padding-right: 3px;">
|
|
||||||
<a target="_blank" :href="RepositoryProxyApi.href + '/issues'">
|
|
||||||
<i class="el-icon-warning el-icon--right" /> {{ $t('documentation.issues') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isEmptyValue(RepositoryProxyApi)" style="display: inline-flex;width: 100%;">
|
|
||||||
<img width="100" height="100" :src="RepositoryProxyApi.avatar" style="margin-left: 20%;">
|
|
||||||
<p style="font-size: 30px;padding-top: 1%;color: #008fd3;"> {{ RepositoryProxyApi.title }} </p>
|
|
||||||
</div>
|
|
||||||
<p align="center">
|
|
||||||
<tags />
|
|
||||||
</p>
|
|
||||||
<div v-if="!isEmptyValue(RepositoryProxyApi)" id="markdown" v-markdown="RepositoryProxyApi.description" />
|
|
||||||
<el-collapse accordion>
|
|
||||||
<el-collapse-item name="1">
|
|
||||||
<template slot="title" style="font-size: 16px;">
|
|
||||||
<span style="font-size: 16px;font-weight: revert;">
|
|
||||||
<b> {{ releasesLabel }} </b>
|
|
||||||
</span>
|
|
||||||
<a target="_blank" :href="RepositoryProxyApi.href + '/releases'" style="font-size: 16px;font-weight: revert;padding-left: 1%">
|
|
||||||
<svg-icon icon-class="link" />
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
<el-collapse
|
|
||||||
v-model="activeListReleases"
|
|
||||||
accordion
|
|
||||||
>
|
|
||||||
<el-collapse-item
|
|
||||||
v-for="(releases, key) in releasesListProxyApi"
|
|
||||||
:key="key"
|
|
||||||
:name="key"
|
|
||||||
>
|
|
||||||
<template slot="title">
|
|
||||||
<svg v-if="key !== stopper" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16" style="margin-right: 2%;">
|
|
||||||
<path fill-rule="evenodd" :d="icon" />
|
|
||||||
</svg>
|
|
||||||
<b>
|
|
||||||
{{
|
|
||||||
releases.title
|
|
||||||
}}
|
|
||||||
</b>
|
|
||||||
</template>
|
|
||||||
<el-button type="text" style="float: right;">
|
|
||||||
<a target="_blank" :href="releases.download">
|
|
||||||
{{ releases.titleDownload }} <i class="el-icon-download" />
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<div v-if="!isEmptyValue(releases)" id="markdown" v-markdown="releases.body" />
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- ADempiere gRPC -->
|
<!-- ADempiere gRPC -->
|
||||||
<el-col :span="defaultSize" :style="style">
|
<el-col :span="defaultSize" :style="style">
|
||||||
<el-card class="box-card">
|
<repository-documentation
|
||||||
<div slot="header" class="clearfix">
|
repository="adempiere-gRPC-Server"
|
||||||
<div style="float: left;display: inline-flex;margin-top: 2%;">
|
/>
|
||||||
<span>
|
|
||||||
<b> {{ RepositorygRPC.title }} </b>
|
|
||||||
</span>
|
|
||||||
<a target="_blank" :href="RepositorygRPC.href" style="margin-left: 5px;">
|
|
||||||
<svg-icon icon-class="link" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div style="float: right;display: inline-flex;">
|
|
||||||
<el-popover
|
|
||||||
placement="right"
|
|
||||||
width="350"
|
|
||||||
trigger="click"
|
|
||||||
style="float: right"
|
|
||||||
>
|
|
||||||
<el-tabs v-model="activeName">
|
|
||||||
<el-tab-pane label="HTTPS" name="HTTPS">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<el-input
|
|
||||||
v-model="RepositorygRPC.clone"
|
|
||||||
:disabled="true"
|
|
||||||
/>
|
|
||||||
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(RepositoryProxyApi.clone)" />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="SSH" name="SSH">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<el-input
|
|
||||||
v-model="RepositorygRPC.sshUrl"
|
|
||||||
:disabled="true"
|
|
||||||
/>
|
|
||||||
<el-button icon="el-icon-copy-document" @click="fallbackCopyTextToClipboard(RepositoryProxyApi.sshUrl)" />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<el-button plain style="width: -webkit-fill-available;">
|
|
||||||
<a target="_blank" :href="RepositorygRPC.downloadZip" style="width: -webkit-fill-available; display: table;">
|
|
||||||
<svg-icon icon-class="zip" /> {{ $t('documentation.downloadZip') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<el-button slot="reference" icon="el-icon-download" type="success" size="mini" plain>{{ $t('documentation.code') }}</el-button>
|
|
||||||
</el-popover>
|
|
||||||
<el-button type="primary" size="mini" plain>
|
|
||||||
<a target="_blank" :href="RepositorygRPC.href + '/branches'">
|
|
||||||
<svg-icon icon-class="tree-table" /> {{ $t('documentation.branches') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="warning" size="mini" plain style="margin: 0px;padding-right: 3px;">
|
|
||||||
<a target="_blank" :href="RepositorygRPC.href + '/issues'">
|
|
||||||
<i class="el-icon-warning el-icon--right" /> {{ $t('documentation.issues') }}
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div v-if="!isEmptyValue(RepositorygRPC)" style="display: inline-flex;width: 100%;">
|
|
||||||
<img width="100" height="100" :src="RepositorygRPC.avatar" style="margin-left: 20%;">
|
|
||||||
<p style="font-size: 30px;padding-top: 1%;color: #008fd3;"> {{ RepositorygRPC.title }} </p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<tags />
|
|
||||||
</p>
|
|
||||||
<div v-if="!isEmptyValue(RepositorygRPC)" id="markdown" v-markdown="RepositorygRPC.description" />
|
|
||||||
<el-collapse accordion>
|
|
||||||
<el-collapse-item name="1">
|
|
||||||
<template slot="title" style="font-size: 16px;">
|
|
||||||
<span style="font-size: 16px;font-weight: revert;">
|
|
||||||
<b> {{ releasesLabel }} </b>
|
|
||||||
</span>
|
|
||||||
<a target="_blank" :href="RepositorygRPC.href + '/releases'" style="font-size: 16px;font-weight: revert;padding-left: 1%">
|
|
||||||
<svg-icon icon-class="link" />
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
<el-collapse
|
|
||||||
v-model="activeListReleases"
|
|
||||||
accordion
|
|
||||||
>
|
|
||||||
<el-collapse-item
|
|
||||||
v-for="(releases, key) in releasesListgRPC"
|
|
||||||
:key="key"
|
|
||||||
:name="key"
|
|
||||||
>
|
|
||||||
<template slot="title">
|
|
||||||
<svg v-if="key !== stopper" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16" style="margin-right: 2%;">
|
|
||||||
<path fill-rule="evenodd" :d="icon" />
|
|
||||||
</svg>
|
|
||||||
<b>
|
|
||||||
{{
|
|
||||||
releases.title
|
|
||||||
}}
|
|
||||||
</b>
|
|
||||||
</template>
|
|
||||||
<el-button type="text" style="float: right;">
|
|
||||||
<a target="_blank" :href="releases.download">
|
|
||||||
{{ releases.titleDownload }} <i class="el-icon-download" />
|
|
||||||
</a>
|
|
||||||
</el-button>
|
|
||||||
<div v-if="!isEmptyValue(releases.body)" id="markdown" v-markdown="releases.body" />
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { fetchReleasesList, fetchReadme } from '@/api/documentation/documentation'
|
import { defineComponent, computed } from '@vue/composition-api'
|
||||||
import { config } from '@/utils/ADempiere/config'
|
|
||||||
import tags from './tags'
|
|
||||||
|
|
||||||
export default {
|
import RepositoryDocumentation from './RepositoryDocumentation'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
name: 'Documentation',
|
name: 'Documentation',
|
||||||
components: { tags },
|
|
||||||
data() {
|
components: {
|
||||||
return {
|
RepositoryDocumentation
|
||||||
releasesList: [],
|
|
||||||
activeNames: ['1'],
|
|
||||||
activeName: 'HTTPS',
|
|
||||||
icon: 'M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z',
|
|
||||||
releaseNotes: {
|
|
||||||
body: ''
|
|
||||||
},
|
|
||||||
releasesLabel: this.$t('documentation.releases'),
|
|
||||||
proxyDocument: {},
|
|
||||||
RepositoryADVue: {},
|
|
||||||
RepositoryProxyApi: {},
|
|
||||||
RepositorygRPC: {},
|
|
||||||
RepositoryADVueSite: {},
|
|
||||||
releasesListADVue: [],
|
|
||||||
releasesListProxyApi: [],
|
|
||||||
releasesListgRPC: []
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
isMobile() {
|
setup(props, { root }) {
|
||||||
return this.$store.state.app.device === 'mobile'
|
const isMobile = computed(() => {
|
||||||
},
|
return root.$store.state.app.device === 'mobile'
|
||||||
defaultSize() {
|
})
|
||||||
if (this.isMobile) {
|
|
||||||
|
const defaultSize = computed(() => {
|
||||||
|
if (isMobile.value) {
|
||||||
return 24
|
return 24
|
||||||
}
|
}
|
||||||
return 8
|
return 8
|
||||||
},
|
})
|
||||||
style() {
|
|
||||||
return 'margin-top: 2%;padding: 0.5%;'
|
const style = computed(() => {
|
||||||
},
|
return 'margin-top: 2%; padding: 0.5%;'
|
||||||
stopper() {
|
})
|
||||||
return this.releasesListADVue.length - 1
|
|
||||||
},
|
return {
|
||||||
activeListReleases() {
|
defaultSize,
|
||||||
const active = this.releasesListADVue.findIndex(releases => this.releaseNotes.title === releases.title)
|
style
|
||||||
if (this.isEmptyValue(active)) {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
return active
|
|
||||||
},
|
|
||||||
linkReleases() {
|
|
||||||
return this.RepositoryADVue.href + '/releases'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.loadReleasesList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// ADempiere Vue
|
|
||||||
fetchRepositoryADVue() {
|
|
||||||
// Repository
|
|
||||||
fetchReadme({
|
|
||||||
repository: 'adempiere-vue'
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
this.RepositoryADVue = {
|
|
||||||
title: response.name,
|
|
||||||
document: response.homepage,
|
|
||||||
href: response.html_url,
|
|
||||||
description: response.description,
|
|
||||||
avatar: response.organization.avatar_url,
|
|
||||||
clone: response.clone_url,
|
|
||||||
sshUrl: response.ssh_url,
|
|
||||||
branches: response.branches_url,
|
|
||||||
downloadZip: response.html_url + '/archive/refs/heads/' + response.default_branch + '.zip'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// Releases
|
|
||||||
fetchReleasesList({
|
|
||||||
repository: '/adempiere-vue'
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
if (response) {
|
|
||||||
response.forEach(release => {
|
|
||||||
this.releasesListADVue.push({
|
|
||||||
title: release.name,
|
|
||||||
href: release.html_url,
|
|
||||||
author: release.author.login,
|
|
||||||
body: release.body,
|
|
||||||
created_at: release.created_at,
|
|
||||||
download: release.assets[0].browser_download_url,
|
|
||||||
titleDownload: release.assets[0].name
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (config.repository.releaseNo !== undefined && this.releasesListADVue.length > 0) {
|
|
||||||
this.releaseNotes = this.releasesListADVue.find(release => {
|
|
||||||
return release.title === config.repository.releaseNo
|
|
||||||
})
|
|
||||||
if (!this.releaseNotes) {
|
|
||||||
this.releaseNotes = this.releasesListADVue[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// Proxy Adempiere Api
|
|
||||||
fetchRepositoryProxy() {
|
|
||||||
// Repository
|
|
||||||
fetchReadme({
|
|
||||||
repository: 'proxy-adempiere-api'
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
this.RepositoryProxyApi = {
|
|
||||||
title: response.name,
|
|
||||||
document: response.homepage,
|
|
||||||
href: response.html_url,
|
|
||||||
description: response.description,
|
|
||||||
avatar: response.organization.avatar_url,
|
|
||||||
clone: response.clone_url,
|
|
||||||
sshUrl: response.ssh_url,
|
|
||||||
branches: response.branches_url,
|
|
||||||
downloadZip: response.html_url + '/archive/refs/heads/' + response.default_branch + '.zip'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// Releases
|
|
||||||
fetchReleasesList({
|
|
||||||
repository: '/proxy-adempiere-api'
|
|
||||||
})
|
|
||||||
.then(release => {
|
|
||||||
if (release) {
|
|
||||||
release.forEach(release => {
|
|
||||||
this.releasesListProxyApi.push({
|
|
||||||
title: release.name,
|
|
||||||
href: release.html_url,
|
|
||||||
author: release.author.login,
|
|
||||||
body: release.body,
|
|
||||||
created_at: release.created_at,
|
|
||||||
download: this.isEmptyValue(release.assets) ? release.assets : release.assets[0].browser_download_url,
|
|
||||||
titleDownload: this.isEmptyValue(release.assets) ? release.name : release.assets[0].name
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (config.repository.releaseNo !== undefined && this.releasesListProxyApi.length > 0) {
|
|
||||||
this.releaseNotes = this.releasesListProxyApi.find(release => {
|
|
||||||
return release.title === config.repository.releaseNo
|
|
||||||
})
|
|
||||||
if (!this.releaseNotes) {
|
|
||||||
this.releaseNotes = this.releasesListProxyApi[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// Adempiere gRPC Server
|
|
||||||
fetchRepositoryGRPC() {
|
|
||||||
// Repository
|
|
||||||
fetchReadme({
|
|
||||||
repository: 'adempiere-gRPC-Server'
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
this.RepositorygRPC = {
|
|
||||||
title: response.name,
|
|
||||||
href: response.html_url,
|
|
||||||
description: response.description,
|
|
||||||
avatar: response.organization.avatar_url,
|
|
||||||
clone: response.clone_url,
|
|
||||||
sshUrl: response.ssh_url,
|
|
||||||
branches: response.branches_url,
|
|
||||||
downloadZip: response.html_url + '/archive/refs/heads/' + response.default_branch + '.zip'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// Releases
|
|
||||||
fetchReleasesList({
|
|
||||||
repository: '/adempiere-gRPC-Server'
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
if (response) {
|
|
||||||
response.forEach(release => {
|
|
||||||
this.releasesListgRPC.push({
|
|
||||||
title: this.isEmptyValue(release.name) ? release.tag_name : release.name,
|
|
||||||
href: release.html_url,
|
|
||||||
author: release.author.login,
|
|
||||||
body: release.body,
|
|
||||||
created_at: release.created_at,
|
|
||||||
download: release.assets[0].browser_download_url,
|
|
||||||
titleDownload: release.assets[0].name
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (config.repository.releaseNo !== undefined && this.releasesListgRPC.length > 0) {
|
|
||||||
this.releaseNotes = this.releasesListgRPC.find(release => {
|
|
||||||
return release.title === config.repository.releaseNo
|
|
||||||
})
|
|
||||||
if (!this.releaseNotes) {
|
|
||||||
this.releaseNotes = this.releasesListgRPC[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// load Repository
|
|
||||||
loadReleasesList() {
|
|
||||||
this.fetchRepositoryADVue()
|
|
||||||
this.fetchRepositoryProxy()
|
|
||||||
this.fetchRepositoryGRPC()
|
|
||||||
},
|
|
||||||
// fallback Copy Text To Clip board
|
|
||||||
fallbackCopyTextToClipboard(text) {
|
|
||||||
const textArea = document.createElement('textarea')
|
|
||||||
textArea.value = text
|
|
||||||
document.body.appendChild(textArea)
|
|
||||||
textArea.focus()
|
|
||||||
textArea.select()
|
|
||||||
try {
|
|
||||||
if (document.execCommand('copy')) {
|
|
||||||
this.clipboardMessage(this.$t('notifications.copySuccessful'))
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
this.clipboardMessage(this.$t('notifications.copyUnsuccessful'))
|
|
||||||
}
|
|
||||||
document.body.removeChild(textArea)
|
|
||||||
},
|
|
||||||
// Notification Message when Copying TextNotification Message when Copying Text
|
|
||||||
clipboardMessage(message) {
|
|
||||||
this.$message({
|
|
||||||
message: message,
|
|
||||||
type: 'success',
|
|
||||||
showClose: true,
|
|
||||||
duration: 1500
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user