mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-23 00:46:30 +00:00
Code Issues Projects Releases Wiki Activity

Add loading spinner to repo list (#3310)

Browse source
This commit is contained in:
Lukas 2024-02-01 08:40:01 +01:00 committed by GitHub
parent 450a437cb6
commit a801f8cbc3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
web/src/views/RepoAdd.vue
View file

@ -5,23 +5,28 @@
</template>
<div class="space-y-4">
<ListItem
v-for="repo in searchedRepos"
:key="repo.id"
class="items-center"
:to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
>
<span class="text-wp-text-100">{{ repo.full_name }}</span>
<span v-if="repo.active" class="ml-auto text-wp-text-alt-100">{{ $t('repo.enable.enabled') }}</span>
<div v-else class="ml-auto flex items-center">
<Badge v-if="repo.id" class="<md:hidden mr-2" :label="$t('repo.enable.disabled')" />
<Button
:text="$t('repo.enable.enable')"
:is-loading="isActivatingRepo && repoToActivate?.forge_remote_id === repo.forge_remote_id"
@click="activateRepo(repo)"
/>
</div>
</ListItem>
<template v-if="repos !== undefined && repos.length > 0">
<ListItem
v-for="repo in searchedRepos"
:key="repo.id"
class="items-center"
:to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
>
<span class="text-wp-text-100">{{ repo.full_name }}</span>
<span v-if="repo.active" class="ml-auto text-wp-text-alt-100">{{ $t('repo.enable.enabled') }}</span>
<div v-else class="ml-auto flex items-center">
<Badge v-if="repo.id" class="<md:hidden mr-2" :label="$t('repo.enable.disabled')" />
<Button
:text="$t('repo.enable.enable')"
:is-loading="isActivatingRepo && repoToActivate?.forge_remote_id === repo.forge_remote_id"
@click="activateRepo(repo)"
/>
</div>
</ListItem>
</template>
<div v-else-if="loading" class="flex justify-center text-wp-text-100">
<Icon name="spinner" />
</div>
</div>
</Scaffold>
</template>
@ -49,11 +54,14 @@ const repos = ref<Repo[]>();
const repoToActivate = ref<Repo>();
const search = ref('');
const i18n = useI18n();
const loading = ref(false);
const { searchedRepos } = useRepoSearch(repos, search);
onMounted(async () => {
loading.value = true;
repos.value = await apiClient.getRepoList({ all: true });
loading.value = false;
});
const { doSubmit: activateRepo, isLoading: isActivatingRepo } = useAsyncAction(async (repo: Repo) => {