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

remoterepos: improve visualization using a panel

This commit is contained in:
Simone Gotti 2019-05-13 16:25:43 +02:00
parent 01a4aba4fa
commit df161a788a
2 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/createproject.vue
View File

@ -8,9 +8,10 @@
</div> </div>
<h4 class="title is-4">Available remote repositories</h4> <h4 class="title is-4">Available remote repositories</h4>
<div v-for="remoteSource in remoteSources" v-bind:key="remoteSource.id"> <div v-for="remoteSource in remoteSources" v-bind:key="remoteSource.id">
<h5 class="title is-5">Remote source: {{remoteSource.name}}</h5>
<remoterepos <remoterepos
:remotesource="remoteSource.id" class="remoterepos"
:remotesource="remoteSource"
:selected="selectedRemoteSource && selectedRemoteSource.id == remoteSource.id"
v-on:reposelected="repoSelected(remoteSource, $event)" v-on:reposelected="repoSelected(remoteSource, $event)"
/> />
</div> </div>
@ -105,5 +106,9 @@ export default {
font-weight: bold; font-weight: bold;
} }
} }
.remoterepos {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style> </style>

32
src/components/remoterepos.vue
View File

@ -1,18 +1,21 @@
<template> <template>
<div> <div>
<div v-if="remoterepos.length > 0"> <div v-if="remoterepos.length > 0">
<div <nav class="panel">
class="item-list" <p class="panel-heading">
repositories from
<strong>{{ remotesource.name }}</strong>
</p>
<label
class="panel-block"
v-for="(repo, index) in remoterepos" v-for="(repo, index) in remoterepos"
v-bind:key="repo.id" v-bind:key="repo.id"
@click="select(index)" @click="select(index)"
> >
<span class="icon has-text-success"> <input type="radio" :checked="selectedrepo == index && selected">
<i v-if="selectedrepo == index" class="mdi mdi-radiobox-marked"></i> {{repo.path}}
<i v-else class="mdi mdi-radiobox-blank"></i> </label>
</span> </nav>
<span class="name">{{repo.path}}</span>
</div>
</div> </div>
<div v-else class="item-list">No remote repositories</div> <div v-else class="item-list">No remote repositories</div>
</div> </div>
@ -25,7 +28,8 @@ export default {
components: {}, components: {},
name: "remoterepos", name: "remoterepos",
props: { props: {
remotesource: String remotesource: Object,
selected: Boolean
}, },
data() { data() {
return { return {
@ -38,12 +42,12 @@ export default {
this.selectedrepo = index; this.selectedrepo = index;
this.$emit("reposelected", this.remoterepos[index].path); this.$emit("reposelected", this.remoterepos[index].path);
}, },
async fetchRemoteRepos(remotesource) { async fetchRemoteRepos(remotesourceid) {
this.remoterepos = await userRemoteRepos(remotesource); this.remoterepos = await userRemoteRepos(remotesourceid);
} }
}, },
created: function() { created: function() {
this.fetchRemoteRepos(this.remotesource); this.fetchRemoteRepos(this.remotesource.id);
} }
}; };
</script> </script>
@ -63,4 +67,8 @@ export default {
font-weight: bold; font-weight: bold;
} }
} }
.panel-block input[type="radio"] {
margin-right: 0.75em;
}
</style> </style>