diff options
Diffstat (limited to 'packages/client/src/views/Home.vue')
| -rw-r--r-- | packages/client/src/views/Home.vue | 29 |
1 files changed, 23 insertions, 6 deletions
diff --git a/packages/client/src/views/Home.vue b/packages/client/src/views/Home.vue index 305d42b..397a3a1 100644 --- a/packages/client/src/views/Home.vue +++ b/packages/client/src/views/Home.vue @@ -3,8 +3,8 @@ <HomeHeader /> <HomeProjectsHeader /> <div class="row mx-0"> - <div class="col ms-4"> - <ul id="repos"> + <div class="col ms-4 vld-parent"> + <ul id="repos" v-if="projects"> <li v-for="(project, project_name, index) in projects" :key="index"> <div v-if="(search !== null && project_name.includes(search)) || search == null"> <span class="fs-3"> @@ -17,6 +17,11 @@ </div> </li> </ul> + <BaseErrorMessage :fetch-failed="fetch_failed" /> + <Loading + :active="is_loading" :height="24" + :width="24" color="#ffffff" + :opacity="0" :is-full-page="false" /> </div> </div> </div> @@ -25,26 +30,33 @@ <script> import HomeHeader from "@/components/HomeHeader"; import HomeProjectsHeader from "@/components/HomeProjectsHeader"; +import Loading from "vue-loading-overlay"; +import BaseErrorMessage from "@/components/BaseErrorMessage"; +import fetchData from "@/util/fetch"; import { ref } from "vue"; export default { name: "Home", components: { HomeHeader, - HomeProjectsHeader + HomeProjectsHeader, + Loading, + BaseErrorMessage }, setup() { const projects = ref({}); const search = ref(""); + const is_loading = ref(true); + const fetch_failed = ref(null); const fetchProjects = async() => { - const projects_data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos`)).json(); - projects.value = projects_data.data; + const projects_data = await fetchData("repos", fetch_failed, is_loading, "projects"); + projects.value = projects_data; }; search.value = (new URLSearchParams(window.location.search)).get("q"); - return { projects, search, fetchProjects }; + return { projects, search, is_loading, fetch_failed, fetchProjects }; }, mount() { this.fetchProjects(); @@ -58,6 +70,7 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; @import "../scss/bootstrap"; +@import "~vue-loading-overlay/dist/vue-loading.css"; #repos { margin-top: 25px; @@ -81,4 +94,8 @@ ul { flex-flow: column; height: 100vh; } + +.row { + height: 100%; +} </style> |