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