github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2026-04-15 01:41:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework repo items layout

Browse Source
This commit is contained in:
Robert Kaussow
2024-11-18 00:25:05 +01:00
parent 9f2749aef4
commit 139d1820ca
4 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/src/components/repo/RepoItems.vue
View File

@@ -3,36 +3,51 @@
<div
class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
>
<div class="grid grid-cols-[1.5rem,auto,1fr] gap-2 items-center">
<PipelineStatusIcon v-if="pipeline" :status="pipeline.status" />
<Icon v-else name="new" class="text-wp-text-100" />
<span class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</span>
<span class="ml-auto">
<div class="grid grid-cols-[auto,1fr] gap-y-2 items-center">
<div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
<div class="ml-auto">
<Badge
v-if="repo.visibility === RepoVisibility.Public"
:label="$t('repo.settings.general.visibility.public.public')"
/>
</span>
</div>
<div class="col-start-2 col-span-2 text-wp-text-100">
<div v-if="pipeline" class="flex gap-1 items-center">
<span :title="pipelineEventTitle">
<Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
<Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
<Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
<Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
<Icon v-else-if="pipeline.event === 'cron'" name="push" />
<Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
<Icon v-else name="push" />
</span>
<div class="col-span-2 text-wp-text-100">
<div v-if="pipeline" class="flex gap-x-1 items-center">
<PipelineStatusIcon v-if="pipeline" :status="pipeline.status" />
<Icon v-else name="new" class="text-wp-text-100" />
<span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
<span class="ml-auto hidden sm:inline-block flex-shrink-0">{{ since }}</span>
</div>
<div v-else class="flex gap-2">
<div v-else class="flex gap-x-2">
<span>{{ $t('repo.pipeline.no_pipelines') }}</span>
</div>
</div>
<div class="col-span-2 text-wp-text-100 text-sm min-h-5 mt-2">
<div v-if="pipeline" class="flex gap-x-4 items-center">
<div class="flex items-center gap-x-1">
<span :title="pipelineEventTitle">
<Icon v-if="pipeline.event === 'pull_request'" name="pull-request" size="22" />
<Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" size="22" />
<Icon v-else-if="pipeline.event === 'deployment'" name="deployment" size="22" />
<Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" size="22" />
<Icon v-else-if="pipeline.event === 'cron'" name="push" size="22" />
<Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" size="22" />
<Icon v-else name="push" size="22" />
</span>
<span class="truncate">{{ prettyRef }}</span>
</div>
<div class="hidden sm:flex gap-x-1 items-center">
<Icon name="commit" size="22" />
<span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
</div>
<div class="flex flex-shrink-0 gap-x-1 items-center ml-auto">
<Icon name="since" size="22" />
<span>{{ since }}</span>
</div>
</div>
</div>
</div>
</div>
</router-link>
@@ -54,8 +69,8 @@ const props = defineProps<{
}>();
const repo = props.repo;
const pipeline = toRef(repo.last_pipeline);
const { since, shortMessage } = usePipeline(pipeline);
const pipeline = toRef(repo.last_pipeline_item);
const { since, shortMessage, prettyRef } = usePipeline(pipeline);
const { t } = useI18n();

4
web/src/compositions/useRepos.ts
View File

@@ -16,8 +16,8 @@ export default function useRepos() {
function sortReposByLastActivity(repos: Repo[]): Repo[] {
return repos.sort((a, b) => {
const aLastActivity = a.last_pipeline?.created || 0;
const bLastActivity = b.last_pipeline?.created || 0;
const aLastActivity = a.last_pipeline_item?.created || 0;
const bLastActivity = b.last_pipeline_item?.created || 0;
return bLastActivity - aLastActivity;
});

4
web/src/lib/api/types/repo.ts
View File

@@ -67,7 +67,9 @@ export interface Repo {
visibility: RepoVisibility;
last_pipeline: Pipeline;
last_pipeline: number;
last_pipeline_item: Pipeline;
require_approval: RepoRequireApproval;

2
web/src/store/repos.ts
View File

@@ -35,7 +35,7 @@ export const useRepoStore = defineStore('repos', () => {
await Promise.all(
_ownedRepos.map(async (repo) => {
const latestPipeline = await apiClient.getPipelineList(repo.id, { page: 1, perPage: 1 });
repo.last_pipeline = latestPipeline[0];
repo.last_pipeline_item = latestPipeline[0];
repos.set(repo.id, repo);
}),
);