109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div v-for="installation in options.installations" :key="installation.id">
|
|
<details class="cursor-pointer">
|
|
<summary
|
|
class="flex w-full select-none items-center space-x-2 rounded px-2 py-3 text-base hover:bg-gray-50"
|
|
>
|
|
<img
|
|
class="h-6 w-6 rounded bg-blue-100 object-cover"
|
|
:src="installation.image"
|
|
:alt="`${installation.login} image`"
|
|
/>
|
|
<span>
|
|
{{ installation.login }}
|
|
</span>
|
|
</summary>
|
|
<div class="mb-4 ml-4">
|
|
<button
|
|
class="w-full rounded-md border-2 px-3 py-2 text-base text-gray-900 focus:outline-none"
|
|
:class="
|
|
selectedRepo === repo
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-transparent hover:bg-gray-50'
|
|
"
|
|
v-for="repo in installation.repos"
|
|
:key="repo.id"
|
|
@click="selectRepo(repo, installation)"
|
|
>
|
|
<div class="flex w-full items-center">
|
|
<FeatherIcon
|
|
:name="repo.private ? 'lock' : 'book'"
|
|
class="mr-2 h-4 w-4"
|
|
/>
|
|
<span class="text-lg font-medium">
|
|
{{ repo.name }}
|
|
</span>
|
|
<button
|
|
class="ml-auto"
|
|
v-if="selectedRepo === repo"
|
|
@click.stop="selectRepo(null, null)"
|
|
>
|
|
<FeatherIcon name="x" class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div v-show="selectedRepo === repo">
|
|
<Dropdown class="ml-6 mt-2 text-left" :options="branchOptions">
|
|
<template v-slot="{ open }">
|
|
<Button
|
|
type="white"
|
|
:loading="repositoryResource.loading"
|
|
loadingText="Loading branches..."
|
|
icon-right="chevron-down"
|
|
>
|
|
{{ selectedBranch || 'Select branch' }}
|
|
</Button>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</button>
|
|
<p class="mt-4 text-sm text-gray-700">
|
|
Don't see your repository here?
|
|
<Link :href="installation.url" class="font-medium">
|
|
Add from GitHub
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'NewAppRepositories',
|
|
emits: [
|
|
'update:selectRepo',
|
|
'update:selectedBranch',
|
|
'update:selectedInstallation'
|
|
],
|
|
props: [
|
|
'options',
|
|
'repositoryResource',
|
|
'selectedRepo',
|
|
'selectedInstallation',
|
|
'selectedBranch'
|
|
],
|
|
methods: {
|
|
selectRepo(repo, installation) {
|
|
if (repo === this.selectedRepo) return;
|
|
this.$emit('update:selectedRepo', repo);
|
|
this.$emit('update:selectedInstallation', installation);
|
|
this.$emit('update:selectedBranch', null);
|
|
}
|
|
},
|
|
computed: {
|
|
branchOptions() {
|
|
if (this.repositoryResource.loading || !this.repositoryResource.data) {
|
|
return [];
|
|
}
|
|
return (this.repositoryResource.data.branches || []).map(d => {
|
|
return {
|
|
label: d.name,
|
|
onClick: () => this.$emit('update:selectedBranch', d.name)
|
|
};
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|