refactor(frontend) : redesign TaskGitSection with tabs and collapsible commits, add scrollable modal
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
@@ -1,147 +1,231 @@
|
||||
<template>
|
||||
<div class="mt-5 rounded-lg border border-neutral-200 bg-neutral-50 p-4">
|
||||
<h3 class="text-sm font-bold text-neutral-900">{{ $t('gitea.branch.title') }}</h3>
|
||||
<div class="mt-5 rounded-lg border border-neutral-200 bg-neutral-50">
|
||||
<!-- Header with tabs -->
|
||||
<div class="flex items-center justify-between border-b border-neutral-200 bg-neutral-100/60 px-4 py-2">
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-3 py-1.5 text-xs font-semibold transition-colors"
|
||||
:class="activeTab === 'branches'
|
||||
? 'bg-white text-neutral-900 shadow-sm ring-1 ring-neutral-200'
|
||||
: 'text-neutral-500 hover:text-neutral-700'"
|
||||
@click="activeTab = 'branches'"
|
||||
>
|
||||
<Icon name="mdi:source-branch" size="14" class="mr-1 inline-block align-[-2px]" />
|
||||
{{ $t('gitea.branch.title') }}
|
||||
<span
|
||||
v-if="branches.length"
|
||||
class="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-neutral-200 px-1 text-[10px] font-bold text-neutral-600"
|
||||
>{{ branches.length }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-3 py-1.5 text-xs font-semibold transition-colors"
|
||||
:class="activeTab === 'prs'
|
||||
? 'bg-white text-neutral-900 shadow-sm ring-1 ring-neutral-200'
|
||||
: 'text-neutral-500 hover:text-neutral-700'"
|
||||
@click="activeTab = 'prs'"
|
||||
>
|
||||
<Icon name="mdi:source-pull" size="14" class="mr-1 inline-block align-[-2px]" />
|
||||
{{ $t('gitea.pr.title') }}
|
||||
<span
|
||||
v-if="pullRequests.length"
|
||||
class="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold"
|
||||
:class="hasOpenPr ? 'bg-green-100 text-green-700' : 'bg-neutral-200 text-neutral-600'"
|
||||
>{{ pullRequests.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<p v-if="error" class="mt-2 text-sm text-red-500">{{ $t('gitea.error') }}</p>
|
||||
|
||||
<!-- Create branch form -->
|
||||
<div v-if="!showCreateForm" class="mt-3 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-secondary-500"
|
||||
@click="showCreateForm = true"
|
||||
>
|
||||
{{ $t('gitea.branch.create') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-neutral-300 px-3 py-1.5 text-xs font-semibold text-neutral-600 hover:bg-neutral-100"
|
||||
@click="handleCopy"
|
||||
>
|
||||
{{ $t('gitea.branch.copy') }}
|
||||
</button>
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
v-if="activeTab === 'branches'"
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-neutral-200/60 hover:text-neutral-700"
|
||||
:title="$t('gitea.branch.copy')"
|
||||
@click="handleCopy"
|
||||
>
|
||||
<Icon name="mdi:content-copy" size="14" />
|
||||
</button>
|
||||
<button
|
||||
v-if="activeTab === 'branches'"
|
||||
type="button"
|
||||
class="rounded-md bg-primary-500 px-2.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-secondary-500"
|
||||
@click="showCreateForm = !showCreateForm"
|
||||
>
|
||||
<Icon name="mdi:plus" size="14" class="mr-0.5 inline-block align-[-2px]" />
|
||||
{{ $t('gitea.branch.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCreateForm" class="mt-3 space-y-3 rounded-md border border-neutral-200 bg-white p-3">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<MalioSelect
|
||||
v-model="branchForm.type"
|
||||
:options="typeOptions"
|
||||
:label="$t('gitea.branch.type')"
|
||||
min-width="w-full"
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="branchForm.baseBranch"
|
||||
:label="$t('gitea.branch.baseBranch')"
|
||||
input-class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">{{ $t('gitea.branch.preview') }}</p>
|
||||
<code class="mt-1 block rounded bg-neutral-100 px-2 py-1 text-xs text-neutral-800">
|
||||
<!-- Error state -->
|
||||
<div v-if="error" class="px-4 py-3">
|
||||
<p class="text-xs text-red-500">{{ $t('gitea.error') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Create branch form (inline) -->
|
||||
<Transition name="slide-down">
|
||||
<div v-if="showCreateForm && activeTab === 'branches'" class="relative z-20 border-b border-neutral-200 bg-white px-4 py-3">
|
||||
<div class="grid grid-cols-[1fr_1fr_auto] items-end gap-3">
|
||||
<MalioSelect
|
||||
v-model="branchForm.type"
|
||||
:options="typeOptions"
|
||||
:label="$t('gitea.branch.type')"
|
||||
min-width="w-full"
|
||||
/>
|
||||
<MalioInputText
|
||||
v-model="branchForm.baseBranch"
|
||||
:label="$t('gitea.branch.baseBranch')"
|
||||
input-class="w-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="mb-[2px] rounded-md bg-primary-500 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-secondary-500 disabled:opacity-50"
|
||||
:disabled="isCreating"
|
||||
@click="handleCreate"
|
||||
>
|
||||
{{ isCreating ? '...' : $t('gitea.branch.create') }}
|
||||
</button>
|
||||
</div>
|
||||
<code class="mt-2 block rounded bg-neutral-50 px-2 py-1 text-[11px] text-neutral-500">
|
||||
{{ branchPreview }}
|
||||
</code>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
|
||||
:disabled="isCreating"
|
||||
@click="handleCreate"
|
||||
>
|
||||
{{ $t('gitea.branch.create') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-neutral-300 px-3 py-1.5 text-xs font-semibold text-neutral-600 hover:bg-neutral-100"
|
||||
@click="showCreateForm = false"
|
||||
>
|
||||
{{ $t('common.cancel') }}
|
||||
</button>
|
||||
</Transition>
|
||||
|
||||
<!-- Content area with scroll -->
|
||||
<div class="max-h-64 overflow-y-auto overscroll-contain">
|
||||
<!-- Loading -->
|
||||
<div v-if="(activeTab === 'branches' && isLoading) || (activeTab === 'prs' && isLoadingPrs)" class="flex items-center justify-center py-8">
|
||||
<Icon name="mdi:loading" size="20" class="animate-spin text-neutral-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="mt-3 text-xs text-neutral-400">{{ $t('common.loading') }}</div>
|
||||
|
||||
<!-- Branches list -->
|
||||
<div v-if="!isLoading && branches.length" class="mt-4 space-y-3">
|
||||
<div v-for="branch in branches" :key="branch.name" class="rounded-md border border-neutral-200 bg-white p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:source-branch" size="16" class="text-primary-500" />
|
||||
<a
|
||||
:href="branchUrl(branch.name)"
|
||||
target="_blank"
|
||||
class="text-sm font-medium text-primary-500 hover:underline"
|
||||
>
|
||||
{{ branch.name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Commits -->
|
||||
<div v-if="branch.commits.length" class="ml-6 mt-2 space-y-1">
|
||||
<p class="text-xs font-semibold text-neutral-500">{{ $t('gitea.branch.commits') }}</p>
|
||||
<!-- BRANCHES TAB -->
|
||||
<template v-if="activeTab === 'branches' && !isLoading">
|
||||
<div v-if="branches.length" class="divide-y divide-neutral-100">
|
||||
<div
|
||||
v-for="commit in branch.commits.slice(0, 5)"
|
||||
:key="commit.sha"
|
||||
class="flex items-baseline gap-2 text-xs"
|
||||
v-for="branch in branches"
|
||||
:key="branch.name"
|
||||
class="group"
|
||||
>
|
||||
<code class="text-primary-500">{{ commit.sha }}</code>
|
||||
<span class="truncate text-neutral-700">{{ commitFirstLine(commit.message) }}</span>
|
||||
<span class="whitespace-nowrap text-neutral-400">{{ commit.author }}</span>
|
||||
<!-- Branch header (clickable to expand) -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-white"
|
||||
@click="toggleBranch(branch.name)"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:chevron-right"
|
||||
size="14"
|
||||
class="shrink-0 text-neutral-400 transition-transform"
|
||||
:class="{ 'rotate-90': expandedBranches.has(branch.name) }"
|
||||
/>
|
||||
<Icon name="mdi:source-branch" size="14" class="shrink-0 text-primary-500" />
|
||||
<span class="min-w-0 truncate text-xs font-medium text-primary-600">
|
||||
{{ branch.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="branch.commits.length"
|
||||
class="ml-auto shrink-0 rounded bg-neutral-200/60 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500"
|
||||
>
|
||||
{{ branch.commits.length }} commit{{ branch.commits.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
<a
|
||||
:href="branchUrl(branch.name)"
|
||||
target="_blank"
|
||||
class="shrink-0 text-neutral-400 opacity-0 transition-opacity hover:text-primary-500 group-hover:opacity-100"
|
||||
@click.stop
|
||||
>
|
||||
<Icon name="mdi:open-in-new" size="12" />
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<!-- Commits (collapsible) -->
|
||||
<Transition name="expand">
|
||||
<div v-if="expandedBranches.has(branch.name) && branch.commits.length" class="border-t border-neutral-100 bg-white">
|
||||
<div
|
||||
v-for="(commit, idx) in branch.commits.slice(0, 10)"
|
||||
:key="commit.sha"
|
||||
class="flex items-center gap-2 px-4 py-1.5"
|
||||
:class="idx !== Math.min(branch.commits.length, 10) - 1 ? 'border-b border-neutral-50' : ''"
|
||||
>
|
||||
<span class="shrink-0 pl-5 font-mono text-[10px] text-primary-400">{{ commit.sha.slice(0, 7) }}</span>
|
||||
<span class="min-w-0 truncate text-[11px] text-neutral-700">{{ commitFirstLine(commit.message) }}</span>
|
||||
<span class="ml-auto shrink-0 text-[10px] text-neutral-400">{{ commit.author }}</span>
|
||||
<span class="shrink-0 text-[10px] text-neutral-300">{{ formatDate(commit.date) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="branch.commits.length > 10"
|
||||
class="border-t border-neutral-50 px-4 py-1.5 text-center text-[10px] text-neutral-400"
|
||||
>
|
||||
+{{ branch.commits.length - 10 }} commits
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="!isLoading && !branches.length && !error" class="mt-3 text-xs text-neutral-400">
|
||||
{{ $t('gitea.branch.noBranches') }}
|
||||
</p>
|
||||
<p v-else-if="!error" class="py-6 text-center text-xs text-neutral-400">
|
||||
{{ $t('gitea.branch.noBranches') }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<!-- Pull Requests -->
|
||||
<div v-if="!isLoadingPrs && pullRequests.length" class="mt-4">
|
||||
<h4 class="text-xs font-bold text-neutral-700">{{ $t('gitea.pr.title') }}</h4>
|
||||
<div class="mt-2 space-y-2">
|
||||
<div v-for="pr in pullRequests" :key="pr.number" class="rounded-md border border-neutral-200 bg-white p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- PULL REQUESTS TAB -->
|
||||
<template v-if="activeTab === 'prs' && !isLoadingPrs">
|
||||
<div v-if="pullRequests.length" class="divide-y divide-neutral-100">
|
||||
<div
|
||||
v-for="pr in pullRequests"
|
||||
:key="pr.number"
|
||||
class="group flex items-start gap-3 px-4 py-3 transition-colors hover:bg-white"
|
||||
>
|
||||
<!-- Status pill -->
|
||||
<span
|
||||
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
|
||||
class="mt-0.5 shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white"
|
||||
:class="prStatusClass(pr)"
|
||||
>
|
||||
{{ prStatusLabel(pr) }}
|
||||
</span>
|
||||
<a
|
||||
:href="pr.url"
|
||||
target="_blank"
|
||||
class="text-sm font-medium text-primary-500 hover:underline"
|
||||
>
|
||||
#{{ pr.number }} {{ pr.title }}
|
||||
</a>
|
||||
<span class="text-xs text-neutral-400">{{ pr.author }}</span>
|
||||
</div>
|
||||
|
||||
<!-- CI statuses -->
|
||||
<div v-if="pr.ciStatuses.length" class="ml-6 mt-2 flex flex-wrap gap-2">
|
||||
<a
|
||||
v-for="ci in pr.ciStatuses"
|
||||
:key="ci.context"
|
||||
:href="ci.target_url"
|
||||
target="_blank"
|
||||
class="flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
|
||||
:class="ciStatusClass(ci.status)"
|
||||
>
|
||||
<Icon :name="ciStatusIcon(ci.status)" size="12" />
|
||||
{{ ci.context }}
|
||||
</a>
|
||||
<!-- PR content -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<a
|
||||
:href="pr.url"
|
||||
target="_blank"
|
||||
class="text-xs font-medium text-neutral-800 hover:text-primary-500 hover:underline"
|
||||
>
|
||||
<span class="text-neutral-400">#{{ pr.number }}</span>
|
||||
{{ pr.title }}
|
||||
</a>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<span class="text-[10px] text-neutral-400">{{ pr.author }}</span>
|
||||
<span v-if="pr.headBranch" class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-500">
|
||||
{{ pr.headBranch }}
|
||||
</span>
|
||||
<!-- CI statuses -->
|
||||
<template v-if="pr.ciStatuses.length">
|
||||
<a
|
||||
v-for="ci in pr.ciStatuses"
|
||||
:key="ci.context"
|
||||
:href="ci.target_url"
|
||||
target="_blank"
|
||||
class="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium transition-opacity hover:opacity-80"
|
||||
:class="ciStatusClass(ci.status)"
|
||||
>
|
||||
<Icon :name="ciStatusIcon(ci.status)" size="10" />
|
||||
{{ ci.context }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="!isLoadingPrs && !pullRequests.length && branches.length && !error" class="mt-3 text-xs text-neutral-400">
|
||||
{{ $t('gitea.pr.noPrs') }}
|
||||
</p>
|
||||
<p v-else-if="branches.length && !error" class="py-6 text-center text-xs text-neutral-400">
|
||||
{{ $t('gitea.pr.noPrs') }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -158,6 +242,7 @@ const props = defineProps<{
|
||||
|
||||
const { listBranches, createBranch, listPullRequests, getBranchName } = useGiteaService()
|
||||
|
||||
const activeTab = ref<'branches' | 'prs'>('branches')
|
||||
const branches = ref<GiteaBranch[]>([])
|
||||
const pullRequests = ref<GiteaPullRequest[]>([])
|
||||
const isLoading = ref(true)
|
||||
@@ -165,6 +250,7 @@ const isLoadingPrs = ref(true)
|
||||
const isCreating = ref(false)
|
||||
const error = ref(false)
|
||||
const showCreateForm = ref(false)
|
||||
const expandedBranches = ref(new Set<string>())
|
||||
|
||||
const branchForm = reactive({
|
||||
type: 'feature',
|
||||
@@ -179,6 +265,8 @@ const typeOptions = [
|
||||
{ label: t('gitea.branch.types.chore'), value: 'chore' },
|
||||
]
|
||||
|
||||
const hasOpenPr = computed(() => pullRequests.value.some(pr => pr.state === 'open' && !pr.merged))
|
||||
|
||||
const branchPreview = computed(() => {
|
||||
if (!props.task.project?.code || !props.task.number) return ''
|
||||
const slug = props.task.title
|
||||
@@ -191,6 +279,14 @@ const branchPreview = computed(() => {
|
||||
return `${branchForm.type}/${props.task.project.code}-${props.task.number}-${slug}`
|
||||
})
|
||||
|
||||
function toggleBranch(name: string) {
|
||||
if (expandedBranches.value.has(name)) {
|
||||
expandedBranches.value.delete(name)
|
||||
} else {
|
||||
expandedBranches.value.add(name)
|
||||
}
|
||||
}
|
||||
|
||||
function branchUrl(name: string): string {
|
||||
const project = props.task.project
|
||||
if (!project?.giteaOwner || !project?.giteaRepo) return '#'
|
||||
@@ -201,6 +297,18 @@ function commitFirstLine(message: string): string {
|
||||
return message.split('\n')[0]
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const d = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - d.getTime()
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (diffDays === 0) return "aujourd'hui"
|
||||
if (diffDays === 1) return 'hier'
|
||||
if (diffDays < 7) return `il y a ${diffDays}j`
|
||||
return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
|
||||
function prStatusClass(pr: GiteaPullRequest): string {
|
||||
if (pr.merged) return 'bg-purple-500'
|
||||
if (pr.state === 'open') return 'bg-green-500'
|
||||
@@ -234,6 +342,10 @@ async function loadData() {
|
||||
|
||||
try {
|
||||
branches.value = await listBranches(props.task.id)
|
||||
// Auto-expand first branch
|
||||
if (branches.value.length === 1) {
|
||||
expandedBranches.value.add(branches.value[0].name)
|
||||
}
|
||||
} catch {
|
||||
error.value = true
|
||||
} finally {
|
||||
@@ -278,3 +390,36 @@ onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-down-enter-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.slide-down-leave-active {
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.slide-down-enter-from,
|
||||
.slide-down-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.expand-enter-from,
|
||||
.expand-leave-to {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.expand-enter-to,
|
||||
.expand-leave-from {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="relative z-10 w-full max-w-2xl overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
|
||||
class="relative z-10 flex w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
|
||||
style="max-height: min(90vh, 900px)"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="border-b border-neutral-100 bg-neutral-50/80 px-8 py-5">
|
||||
@@ -37,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<form @submit.prevent="handleSubmit" class="px-8 py-6">
|
||||
<form @submit.prevent="handleSubmit" class="overflow-y-auto px-8 py-6">
|
||||
<!-- Title -->
|
||||
<MalioInputText
|
||||
v-model="form.title"
|
||||
|
||||
Reference in New Issue
Block a user