diff options
| -rw-r--r-- | packages/client/src/components/RepositoryHeader.vue | 22 | ||||
| -rw-r--r-- | packages/client/src/components/RepositoryNavbar.vue | 17 | ||||
| -rw-r--r-- | packages/client/src/router/index.js | 5 | ||||
| -rw-r--r-- | packages/client/src/views/Repository.vue | 25 | ||||
| -rw-r--r-- | packages/client/src/views/RepositoryAbout.vue | 58 |
5 files changed, 107 insertions, 20 deletions
diff --git a/packages/client/src/components/RepositoryHeader.vue b/packages/client/src/components/RepositoryHeader.vue index 9f37df4..50a1db9 100644 --- a/packages/client/src/components/RepositoryHeader.vue +++ b/packages/client/src/components/RepositoryHeader.vue @@ -12,33 +12,21 @@ <script> import BaseBackButton from "@/components/BaseBackButton"; -import { ref } from "vue"; export default { name: "RepositoryHeader", props: { - repository: { + name: { + type: String, + required: true + }, + description: { type: String, required: true } }, components: { BaseBackButton - }, - setup(props) { - const name = ref(""); - const description = ref(""); - - const fetchProjects = async() => { - const repository_data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${props.repository}`)).json(); - name.value = repository_data.data.name; - description.value = repository_data.data.description; - }; - - return { name, description, fetchProjects }; - }, - created() { - this.fetchProjects(); } }; </script> diff --git a/packages/client/src/components/RepositoryNavbar.vue b/packages/client/src/components/RepositoryNavbar.vue index c69762f..f709976 100644 --- a/packages/client/src/components/RepositoryNavbar.vue +++ b/packages/client/src/components/RepositoryNavbar.vue @@ -6,7 +6,7 @@ <div class="collapse navbar-collapse"> <ul class="navbar-nav align-items-center flex-fill"> <li - v-for="(item, index) in ['log', 'refs', 'tree']" :key="index" + v-for="(item, index) in nav_items" :key="index" class="nav-item"> <router-link class="nav-link fs-4" :class="{ active: activePage === item }" @@ -38,10 +38,25 @@ export default { activePage: { type: String, required: true + }, + hasReadme: { + type: Boolean, + required: true } }, components: { RepositoryCloneDropdown + }, + data() { + return { + nav_items: [ "log", "refs", "tree" ] + }; + }, + watch: { + hasReadme() { + console.log("HEEEJ"); + this.nav_items = [ "about" ].concat(this.nav_items); + } } }; </script> diff --git a/packages/client/src/router/index.js b/packages/client/src/router/index.js index 69cd036..a6db1e1 100644 --- a/packages/client/src/router/index.js +++ b/packages/client/src/router/index.js @@ -14,6 +14,11 @@ const routes = [ props: route => ({ repository: route.params.repo }), children: [ { + path: "about", + name: "Repository About", + component: () => import("../views/RepositoryAbout") + }, + { path: "log", name: "Repository Log", component: () => import("../views/RepositoryLog") 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> |