diff options
Diffstat (limited to 'packages/client/src/views')
| -rw-r--r-- | packages/client/src/views/Repository.vue | 25 | ||||
| -rw-r--r-- | packages/client/src/views/RepositoryAbout.vue | 58 |
2 files changed, 81 insertions, 2 deletions
diff --git a/packages/client/src/views/Repository.vue b/packages/client/src/views/Repository.vue index 93c3f82..bbadb16 100644 --- a/packages/client/src/views/Repository.vue +++ b/packages/client/src/views/Repository.vue @@ -1,7 +1,9 @@ <template> <div class="container-fluid px-0 d-flex"> - <RepositoryHeader :repository="$router.currentRoute._rawValue.params.repo" /> - <RepositoryNavbar :repository="$router.currentRoute._rawValue.params.repo" :active-page="$router.currentRoute._rawValue.path.split('/')[2]" /> + <RepositoryHeader :name="name" :description="description" /> + <RepositoryNavbar + :repository="$router.currentRoute._rawValue.params.repo" :active-page="$router.currentRoute._rawValue.path.split('/')[2]" + :has-readme="has_readme" /> <router-view /> </div> </template> @@ -9,12 +11,31 @@ <script> import RepositoryHeader from "@/components/RepositoryHeader"; import RepositoryNavbar from "@/components/RepositoryNavbar"; +import { ref } from "vue"; export default { name: "Repository", components: { RepositoryHeader, RepositoryNavbar + }, + setup(props) { + const name = ref(""); + const description = ref(""); + const has_readme = ref(null); + + const fetchProjects = async(repository) => { + console.log(repository); + const repository_data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${repository}`)).json(); + name.value = repository_data.data.name; + description.value = repository_data.data.description; + has_readme.value = repository_data.data.has_readme; + }; + + return { name, description, has_readme, fetchProjects }; + }, + created() { + this.fetchProjects(this.$router.currentRoute._rawValue.params.repo); } }; </script> diff --git a/packages/client/src/views/RepositoryAbout.vue b/packages/client/src/views/RepositoryAbout.vue new file mode 100644 index 0000000..4b4d700 --- /dev/null +++ b/packages/client/src/views/RepositoryAbout.vue @@ -0,0 +1,58 @@ +<template> + <div class="row mx-0"> + <div class="col ms-4 ps-4 ps-sm-5 mt-3 fs-5 vld-parent"> + <RepositoryTreeBlob + :repository="$router.currentRoute._rawValue.params.repo" path="README.md" + :content="readme" v-if="readme" /> + <BaseErrorMessage :fetch-failed="fetch_failed" /> + <Loading + :active="is_loading" :height="24" + :width="24" color="#ffffff" + :opacity="0" :is-full-page="false" /> + </div> + </div> +</template> + +<script> +import RepositoryTreeBlob from "@/components/RepositoryTreeBlob"; +import Loading from "vue-loading-overlay"; +import BaseErrorMessage from "@/components/BaseErrorMessage"; +import { ref } from "vue"; +import fetchData from "@/util/fetch"; + +export default { + name: "RepositoryAbout", + components: { + RepositoryTreeBlob, + Loading, + BaseErrorMessage + }, + setup(props) { + const readme = ref(null); + const is_loading = ref(true); + const fetch_failed = ref(null); + + const fetchReadme = async(repository) => { + const readme_data = await fetchData(`repos/${repository}/tree?path=README.md`, fetch_failed, is_loading, "tree"); + + if(readme_data) { + readme.value = readme_data.content; + } + }; + + return { + readme, + is_loading, + fetch_failed, + fetchReadme + }; + }, + created() { + this.fetchReadme(this.$router.currentRoute._rawValue.params.repo); + } +}; +</script> + +<style lang="scss"> +@import "~vue-loading-overlay/dist/vue-loading.css"; +</style> |