mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-29 21:31:02 +00:00
Code Issues Projects Releases Wiki Activity

Add loading spinner and no pull request text (#3113)

Browse source
This commit is contained in:
Lukas 2024-01-03 19:39:45 +01:00 committed by GitHub
parent 1742fb2b97
commit f8a4d72381
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/assets/locales/en.json
View file

@ -15,6 +15,7 @@
"unknown_error": "An unknown error occurred",
"documentation_for": "Documentation for \"{topic}\"",
"pipeline_feed": "Pipeline feed",
"empty_list": "No {entity} found!",
"not_found": {
"not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
"back_home": "Back to home"

2
web/src/components/atomic/Icon.vue
View file

@ -51,6 +51,7 @@
<i-teenyicons-refresh-outline v-else-if="name === 'refresh'" class="h-6 w-6" />
<i-ic-baseline-play-arrow v-else-if="name === 'play'" class="h-6 w-6" />
<i-ic-baseline-pause v-else-if="name === 'pause'" class="h-6 w-6" />
<i-svg-spinners-180-ring-with-bg v-else-if="name === 'spinner'" class="h-6 w-6" />
<div v-else-if="name === 'blank'" class="h-6 w-6" />
</template>
@ -105,6 +106,7 @@ export type IconNames =
| 'pause'
| 'warning'
| 'attention'
| 'spinner'
| 'error';
defineProps<{

9
web/src/views/repo/RepoBranches.vue
View file

@ -1,5 +1,6 @@
<template>
<div v-if="branches" class="space-y-4">
<div class="space-y-4">
<template v-if="branches.length > 0">
<ListItem
v-for="branch in branchesWithDefaultBranchFirst"
:key="branch"
@ -9,6 +10,10 @@
{{ branch }}
<Badge v-if="branch === repo?.default_branch" :label="$t('default')" class="ml-auto" />
</ListItem>
</template>
<div v-else-if="loading" class="flex justify-center text-wp-text-100">
<Icon name="spinner" />
</div>
</div>
</template>
@ -36,7 +41,7 @@ async function loadBranches(page: number): Promise<string[]> {
return apiClient.getRepoBranches(repo.value.id, page);
}
const { resetPage, data: branches } = usePagination(loadBranches);
const { resetPage, data: branches, loading } = usePagination(loadBranches);
const branchesWithDefaultBranchFirst = computed(() =>
branches.value.toSorted((a, b) => {

14
web/src/views/repo/RepoPullRequests.vue
View file

@ -1,5 +1,6 @@
<template>
<div v-if="pullRequests" class="space-y-4">
<div class="space-y-4">
<template v-if="pullRequests.length > 0">
<ListItem
v-for="pullRequest in pullRequests"
:key="pullRequest.index"
@ -12,13 +13,22 @@
pullRequest.title
}}</span>
</ListItem>
</template>
<div v-else-if="loading" class="flex justify-center text-wp-text-100">
<Icon name="spinner" />
</div>
<Panel v-else class="flex justify-center">
{{ $t('empty_list', { entity: $t('repo.pull_requests') }) }}
</Panel>
</div>
</template>
<script lang="ts" setup>
import { inject, Ref, watch } from 'vue';
import Icon from '~/components/atomic/Icon.vue';
import ListItem from '~/components/atomic/ListItem.vue';
import Panel from '~/components/layout/Panel.vue';
import useApiClient from '~/compositions/useApiClient';
import { usePagination } from '~/compositions/usePaginate';
import { PullRequest, Repo } from '~/lib/api/types';
@ -41,7 +51,7 @@ async function loadPullRequests(page: number): Promise<PullRequest[]> {
return apiClient.getRepoPullRequests(repo.value.id, page);
}
const { resetPage, data: pullRequests } = usePagination(loadPullRequests);
const { resetPage, data: pullRequests, loading } = usePagination(loadPullRequests);
watch(repo, resetPage);
</script>