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>

40
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">
v-for="(repo, index) in remoterepos" repositories from
v-bind:key="repo.id" <strong>{{ remotesource.name }}</strong>
@click="select(index)" </p>
> <label
<span class="icon has-text-success"> class="panel-block"
<i v-if="selectedrepo == index" class="mdi mdi-radiobox-marked"></i> v-for="(repo, index) in remoterepos"
<i v-else class="mdi mdi-radiobox-blank"></i> v-bind:key="repo.id"
</span> @click="select(index)"
<span class="name">{{repo.path}}</span> >
</div> <input type="radio" :checked="selectedrepo == index && selected">
{{repo.path}}
</label>
</nav>
</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>