a
/
agola-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

projects: add loading indicators

This commit is contained in:
Simone Gotti 2019-09-05 09:59:12 +02:00
parent 43640ec9a0
commit 89798ae4b1
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/projects.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div> <div>
<h4 class="text-xl my-3">Projects</h4> <h4 class="text-xl my-3">Projects</h4>
<ul v-if="projects.length > 0"> <div v-if="fetchProjectsLoading" class="ml-6 flex w-48">
<div v-bind:class="{ 'spinner': fetchProjectsLoading }"></div>
</div>
<ul v-else-if="projects.length > 0">
<li class="mb-2 border rounded-l" v-for="project in projects" v-bind:key="project.id"> <li class="mb-2 border rounded-l" v-for="project in projects" v-bind:key="project.id">
<div class="pl-4 py-4 flex items-center"> <div class="pl-4 py-4 flex items-center">
<router-link class="item" :to="projectLink(ownertype, ownername, ref(project.name))"> <router-link class="item" :to="projectLink(ownertype, ownername, ref(project.name))">
@ -12,10 +15,13 @@
</ul> </ul>
<div v-else class="font-bold">No projects</div> <div v-else class="font-bold">No projects</div>
<hr class="my-6 border-t"> <hr class="my-6 border-t" />
<h4 class="text-xl my-3">Project Groups</h4> <h4 class="text-xl my-3">Project Groups</h4>
<ul v-if="projectgroups.length > 0"> <div v-if="fetchProjectGroupsLoading" class="ml-6 flex w-48">
<div v-bind:class="{ 'spinner': fetchProjectGroupsLoading }"></div>
</div>
<ul v-else-if="projectgroups.length > 0">
<li <li
class="mb-2 border rounded-l" class="mb-2 border rounded-l"
v-for="projectgroup in projectgroups" v-for="projectgroup in projectgroups"
@ -53,6 +59,9 @@ export default {
}, },
data() { data() {
return { return {
fetchProjectGroupsLoading: false,
fetchProjectsLoading: false,
projects: [], projects: [],
projectgroups: [], projectgroups: [],
polling: null polling: null
@ -65,6 +74,18 @@ export default {
} }
}, },
methods: { methods: {
startFetchProjectsLoading() {
this.fetchProjectsLoading = true;
},
stopFetchProjectsLoading() {
this.fetchProjectsLoading = false;
},
startFetchProjectGroupsLoading() {
this.fetchProjectGroupsLoading = true;
},
stopFetchProjectGroupsLoading() {
this.fetchProjectGroupsLoading = false;
},
ref(name) { ref(name) {
let ref = []; let ref = [];
if (this.projectgroupref) { if (this.projectgroupref) {
@ -79,9 +100,11 @@ export default {
projectgroupref.push(...this.projectgroupref); projectgroupref.push(...this.projectgroupref);
} }
this.startFetchProjectsLoading();
let { data, error } = await fetchProjectGroupProjects( let { data, error } = await fetchProjectGroupProjects(
projectgroupref.join("/") projectgroupref.join("/")
); );
this.stopFetchProjectsLoading();
if (error) { if (error) {
this.$store.dispatch("setError", error); this.$store.dispatch("setError", error);
return; return;
@ -93,9 +116,11 @@ export default {
if (this.projectgroupref) { if (this.projectgroupref) {
projectgroupref.push(...this.projectgroupref); projectgroupref.push(...this.projectgroupref);
} }
this.startFetchProjectGroupsLoading();
let { data, error } = await fetchProjectGroupSubgroups( let { data, error } = await fetchProjectGroupSubgroups(
projectgroupref.join("/") projectgroupref.join("/")
); );
this.stopFetchProjectGroupsLoading();
if (error) { if (error) {
this.$store.dispatch("setError", error); this.$store.dispatch("setError", error);
return; return;