fix: improve kanban board filtering (#919)
- Render only the selected status column when status chips are active - Add status color treatments and default assignee normalization - Reuse profile avatars for Kanban card assignee tags - Cover status filtering, default assignee labels, and avatar rendering
This commit is contained in:
Zhicheng Han
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
|
||||
import { NModal, NForm, NFormItem, NInput, NSelect, NButton, useMessage } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useKanbanStore } from '@/stores/hermes/kanban'
|
||||
import { withDefaultAssignee } from '@/utils/hermes/kanban-assignees'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
@@ -26,10 +27,8 @@ const priorityOptions = computed(() => [
|
||||
])
|
||||
|
||||
const assigneeOptions = computed(() => {
|
||||
return kanbanStore.assignees.map(a => {
|
||||
const total = Object.values(a.counts || {}).reduce((s, c) => s + c, 0)
|
||||
return { label: `${a.name} · ${t('kanban.stats.tasks')}: ${total}`, value: a.name }
|
||||
})
|
||||
return withDefaultAssignee(kanbanStore.assignees, kanbanStore.stats?.by_assignee || {})
|
||||
.map(a => ({ label: a.name, value: a.name }))
|
||||
})
|
||||
|
||||
async function handleSubmit() {
|
||||
|
||||
@@ -2,10 +2,13 @@
|
||||
import { computed } from 'vue'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import ProfileAvatar from '@/components/hermes/profiles/ProfileAvatar.vue'
|
||||
import type { KanbanTask } from '@/api/hermes/kanban'
|
||||
import type { ProfileAvatar as ProfileAvatarData } from '@/api/hermes/profiles'
|
||||
|
||||
const props = defineProps<{
|
||||
task: KanbanTask
|
||||
assigneeAvatar?: ProfileAvatarData | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -34,12 +37,21 @@ const priorityText = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kanban-task-card" @click="emit('click', task.id)">
|
||||
<div class="kanban-task-card" :class="`status-${task.status}`" @click="emit('click', task.id)">
|
||||
<div class="card-title">{{ task.title }}</div>
|
||||
<div class="card-meta">
|
||||
<NTooltip v-if="task.assignee" trigger="hover">
|
||||
<template #trigger>
|
||||
<span class="meta-tag assignee-tag">{{ task.assignee }}</span>
|
||||
<span class="meta-tag assignee-tag">
|
||||
<ProfileAvatar
|
||||
class="assignee-profile-avatar"
|
||||
:name="task.assignee"
|
||||
:avatar="assigneeAvatar"
|
||||
:size="18"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>{{ task.assignee }}</span>
|
||||
</span>
|
||||
</template>
|
||||
{{ t('kanban.card.assigneeTooltip') }}
|
||||
</NTooltip>
|
||||
@@ -54,15 +66,25 @@ const priorityText = computed(() => {
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.kanban-task-card {
|
||||
--kanban-card-status-color: #64748b;
|
||||
background-color: $bg-card;
|
||||
border: 1px solid $border-color;
|
||||
border-left: 3px solid var(--kanban-card-status-color);
|
||||
border-radius: $radius-md;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color $transition-fast, box-shadow $transition-fast;
|
||||
|
||||
&.status-triage { --kanban-card-status-color: #94a3b8; }
|
||||
&.status-todo { --kanban-card-status-color: #38bdf8; }
|
||||
&.status-ready { --kanban-card-status-color: #f59e0b; }
|
||||
&.status-running { --kanban-card-status-color: #8b5cf6; }
|
||||
&.status-blocked { --kanban-card-status-color: #ef4444; }
|
||||
&.status-done { --kanban-card-status-color: #22c55e; }
|
||||
&.status-archived { --kanban-card-status-color: #64748b; }
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--accent-primary-rgb), 0.3);
|
||||
border-color: var(--kanban-card-status-color);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
@@ -91,8 +113,16 @@ const priorityText = computed(() => {
|
||||
}
|
||||
|
||||
.assignee-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: rgba(var(--accent-primary-rgb), 0.1);
|
||||
color: $accent-primary;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.assignee-profile-avatar {
|
||||
box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.28);
|
||||
}
|
||||
|
||||
.priority-tag {
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
|
||||
import { request } from '@/api/client'
|
||||
import { getTask } from '@/api/hermes/kanban'
|
||||
import { useKanbanStore } from '@/stores/hermes/kanban'
|
||||
import { withDefaultAssignee } from '@/utils/hermes/kanban-assignees'
|
||||
import HistoryMessageList from '@/components/hermes/chat/HistoryMessageList.vue'
|
||||
import type { Session, Message } from '@/stores/hermes/chat'
|
||||
import type { KanbanTaskDetail } from '@/api/hermes/kanban'
|
||||
@@ -106,10 +107,8 @@ const historySession = computed<Session | null>(() => {
|
||||
})
|
||||
|
||||
const assigneeOptions = computed(() => {
|
||||
return kanbanStore.assignees.map(a => {
|
||||
const total = Object.values(a.counts || {}).reduce((s, c) => s + c, 0)
|
||||
return { label: `${a.name} · ${t('kanban.stats.tasks')}: ${total}`, value: a.name }
|
||||
})
|
||||
return withDefaultAssignee(kanbanStore.assignees, kanbanStore.stats?.by_assignee || {})
|
||||
.map(a => ({ label: a.name, value: a.name }))
|
||||
})
|
||||
|
||||
watch(() => [props.taskId, kanbanStore.selectedBoard] as const, async ([id, board]) => {
|
||||
@@ -482,19 +481,14 @@ async function handleAssign() {
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
|
||||
&.running {
|
||||
background: rgba(var(--accent-primary-rgb), 0.12);
|
||||
color: $accent-primary;
|
||||
&.triage {
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: rgba(var(--success-rgb), 0.12);
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.blocked {
|
||||
background: rgba(var(--error-rgb), 0.12);
|
||||
color: $error;
|
||||
&.todo {
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
&.ready {
|
||||
@@ -502,9 +496,24 @@ async function handleAssign() {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.triage, &.archived {
|
||||
background: rgba(128, 128, 128, 0.12);
|
||||
color: $text-muted;
|
||||
&.running {
|
||||
background: rgba(var(--accent-primary-rgb), 0.12);
|
||||
color: $accent-primary;
|
||||
}
|
||||
|
||||
&.blocked {
|
||||
background: rgba(var(--error-rgb), 0.12);
|
||||
color: $error;
|
||||
}
|
||||
|
||||
&.done {
|
||||
background: rgba(var(--success-rgb), 0.12);
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.archived {
|
||||
background: rgba(100, 116, 139, 0.14);
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
export const DEFAULT_KANBAN_ASSIGNEE = 'default'
|
||||
|
||||
export interface KanbanAssigneeSummary {
|
||||
name: string
|
||||
counts?: Record<string, number> | null
|
||||
}
|
||||
|
||||
export function assigneeTaskTotal(assignee: KanbanAssigneeSummary): number {
|
||||
return Object.values(assignee.counts || {}).reduce((sum, count) => sum + count, 0)
|
||||
}
|
||||
|
||||
export function withDefaultAssignee<T extends KanbanAssigneeSummary>(
|
||||
assignees: T[],
|
||||
byAssignee: Record<string, number> = {},
|
||||
): KanbanAssigneeSummary[] {
|
||||
const defaultCount = byAssignee[DEFAULT_KANBAN_ASSIGNEE] || 0
|
||||
const hasDefault = assignees.some(assignee => assignee.name === DEFAULT_KANBAN_ASSIGNEE)
|
||||
const normalized = assignees.map(assignee => {
|
||||
if (assignee.name !== DEFAULT_KANBAN_ASSIGNEE || assignee.counts) return assignee
|
||||
return { ...assignee, counts: { total: defaultCount } }
|
||||
})
|
||||
if (hasDefault) return normalized
|
||||
return [
|
||||
{ name: DEFAULT_KANBAN_ASSIGNEE, counts: { total: defaultCount } },
|
||||
...normalized,
|
||||
]
|
||||
}
|
||||
@@ -7,13 +7,17 @@ import KanbanTaskCard from '@/components/hermes/kanban/KanbanTaskCard.vue'
|
||||
import KanbanTaskDrawer from '@/components/hermes/kanban/KanbanTaskDrawer.vue'
|
||||
import KanbanCreateForm from '@/components/hermes/kanban/KanbanCreateForm.vue'
|
||||
import { DEFAULT_KANBAN_BOARD, useKanbanStore } from '@/stores/hermes/kanban'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { withDefaultAssignee } from '@/utils/hermes/kanban-assignees'
|
||||
import type { KanbanTaskStatus } from '@/api/hermes/kanban'
|
||||
import type { ProfileAvatar } from '@/api/hermes/profiles'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const kanbanStore = useKanbanStore()
|
||||
const profilesStore = useProfilesStore()
|
||||
|
||||
const showCreateForm = ref(false)
|
||||
const showCreateBoardForm = ref(false)
|
||||
@@ -25,6 +29,7 @@ const refreshTimer = ref<ReturnType<typeof setInterval> | null>(null)
|
||||
const routeReady = ref(false)
|
||||
|
||||
const boardStatuses: KanbanTaskStatus[] = ['triage', 'todo', 'ready', 'running', 'blocked', 'done', 'archived']
|
||||
const expandedStatusNames = ref<string[]>([...boardStatuses])
|
||||
|
||||
function firstQueryString(value: unknown): string | null {
|
||||
if (Array.isArray(value)) return typeof value[0] === 'string' ? value[0] : null
|
||||
@@ -82,6 +87,17 @@ const tasksByStatus = computed(() => {
|
||||
return grouped
|
||||
})
|
||||
|
||||
const visibleBoardStatuses = computed(() => {
|
||||
const status = kanbanStore.filterStatus as KanbanTaskStatus | null
|
||||
return status && boardStatuses.includes(status) ? [status] : boardStatuses
|
||||
})
|
||||
|
||||
const visibleAssignees = computed(() => withDefaultAssignee(kanbanStore.assignees, kanbanStore.stats?.by_assignee || {}))
|
||||
|
||||
const profileAvatarByName = computed<Record<string, ProfileAvatar | null>>(() => {
|
||||
return Object.fromEntries(profilesStore.profiles.map(profile => [profile.name, profile.avatar || null]))
|
||||
})
|
||||
|
||||
const statusFilterOptions = computed(() => [
|
||||
{ label: t('kanban.allStatuses'), value: '' },
|
||||
...boardStatuses.map(s => ({ label: t(`kanban.columns.${s}`, s), value: s })),
|
||||
@@ -89,10 +105,7 @@ const statusFilterOptions = computed(() => [
|
||||
|
||||
const assigneeFilterOptions = computed(() => [
|
||||
{ label: t('kanban.allAssignees'), value: '' },
|
||||
...kanbanStore.assignees.map(a => {
|
||||
const total = Object.values(a.counts || {}).reduce((s, c) => s + c, 0)
|
||||
return { label: `${t('kanban.detail.assignee')}: ${a.name} · ${taskCountLabel(total)}`, value: a.name }
|
||||
}),
|
||||
...visibleAssignees.value.map(a => ({ label: a.name, value: a.name })),
|
||||
])
|
||||
|
||||
const filterStatusValue = computed({
|
||||
@@ -110,8 +123,16 @@ watch(() => route.query.board, async () => {
|
||||
await applyBoardSelection(routeBoard(), false)
|
||||
})
|
||||
|
||||
watch(visibleBoardStatuses, statuses => {
|
||||
expandedStatusNames.value = [...statuses]
|
||||
}, { immediate: true })
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([kanbanStore.fetchBoards(), kanbanStore.fetchCapabilities()])
|
||||
await Promise.all([
|
||||
kanbanStore.fetchBoards(),
|
||||
kanbanStore.fetchCapabilities(),
|
||||
profilesStore.profiles.length === 0 ? profilesStore.fetchProfiles() : Promise.resolve(),
|
||||
])
|
||||
await applyBoardSelection(routeBoard(), true, true)
|
||||
kanbanStore.startEventStream()
|
||||
routeReady.value = true
|
||||
@@ -143,6 +164,12 @@ async function handleApplyFilter() {
|
||||
await kanbanStore.fetchTasks()
|
||||
}
|
||||
|
||||
async function handleStatusChipClick(status: KanbanTaskStatus | null) {
|
||||
kanbanStore.setFilter('status', status)
|
||||
expandedStatusNames.value = status ? [status] : [...boardStatuses]
|
||||
await kanbanStore.fetchTasks()
|
||||
}
|
||||
|
||||
async function handleTaskCreated() {
|
||||
await Promise.all([kanbanStore.fetchTasks(), kanbanStore.fetchStats(), kanbanStore.fetchBoards()])
|
||||
}
|
||||
@@ -236,31 +263,53 @@ async function handleArchiveSelectedBoard() {
|
||||
|
||||
<!-- Stats bar -->
|
||||
<div v-if="kanbanStore.stats" class="stats-bar">
|
||||
<div v-for="status in boardStatuses" :key="status" class="stat-chip" :class="status">
|
||||
<button
|
||||
v-for="status in boardStatuses"
|
||||
:key="status"
|
||||
type="button"
|
||||
class="stat-chip"
|
||||
:class="[status, { active: kanbanStore.filterStatus === status }]"
|
||||
:aria-pressed="kanbanStore.filterStatus === status"
|
||||
@click="handleStatusChipClick(status)"
|
||||
>
|
||||
<span class="stat-count">{{ kanbanStore.stats.by_status[status] || 0 }}</span>
|
||||
<span class="stat-label">{{ t(`kanban.columns.${status}`, status) }}</span>
|
||||
</div>
|
||||
<div class="stat-chip total">
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="stat-chip total"
|
||||
:class="{ active: !kanbanStore.filterStatus }"
|
||||
:aria-pressed="!kanbanStore.filterStatus"
|
||||
@click="handleStatusChipClick(null)"
|
||||
>
|
||||
<span class="stat-count">{{ kanbanStore.stats.total }}</span>
|
||||
<span class="stat-label">{{ t('kanban.stats.total') }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Board -->
|
||||
<NSpin :show="kanbanStore.loading && kanbanStore.tasks.length === 0">
|
||||
<div class="kanban-board">
|
||||
<NCollapse>
|
||||
<NCollapse v-model:expanded-names="expandedStatusNames">
|
||||
<NCollapseItem
|
||||
v-for="status in boardStatuses"
|
||||
v-for="status in visibleBoardStatuses"
|
||||
:key="status"
|
||||
:title="`${t(`kanban.columns.${status}`, status)} (${tasksByStatus[status].length})`"
|
||||
:name="status"
|
||||
:class="['kanban-column', `status-${status}`]"
|
||||
>
|
||||
<div class="task-list">
|
||||
<template #header>
|
||||
<span class="column-header" :class="`status-${status}`">
|
||||
<span class="status-dot" aria-hidden="true" />
|
||||
<span>{{ t(`kanban.columns.${status}`, status) }} ({{ tasksByStatus[status].length }})</span>
|
||||
</span>
|
||||
</template>
|
||||
<div class="task-list" :class="`status-${status}`">
|
||||
<KanbanTaskCard
|
||||
v-for="task in tasksByStatus[status]"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
:assignee-avatar="task.assignee ? profileAvatarByName[task.assignee] || null : null"
|
||||
@click="handleTaskClick(task.id)"
|
||||
/>
|
||||
<div v-if="tasksByStatus[status].length === 0" class="column-empty">
|
||||
@@ -332,6 +381,28 @@ async function handleArchiveSelectedBoard() {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-chip,
|
||||
.column-header,
|
||||
.task-list {
|
||||
--kanban-status-color: #64748b;
|
||||
|
||||
&.triage,
|
||||
&.status-triage { --kanban-status-color: #94a3b8; }
|
||||
&.todo,
|
||||
&.status-todo { --kanban-status-color: #38bdf8; }
|
||||
&.ready,
|
||||
&.status-ready { --kanban-status-color: #f59e0b; }
|
||||
&.running,
|
||||
&.status-running { --kanban-status-color: #8b5cf6; }
|
||||
&.blocked,
|
||||
&.status-blocked { --kanban-status-color: #ef4444; }
|
||||
&.done,
|
||||
&.status-done { --kanban-status-color: #22c55e; }
|
||||
&.archived,
|
||||
&.status-archived { --kanban-status-color: #64748b; }
|
||||
&.total { --kanban-status-color: #e2e8f0; }
|
||||
}
|
||||
|
||||
.stat-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -340,13 +411,28 @@ async function handleArchiveSelectedBoard() {
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
border: 1px solid $border-light;
|
||||
border-left: 3px solid var(--kanban-status-color);
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
&.triage, &.todo, &.ready { border-left: 3px solid $text-muted; }
|
||||
&.running { border-left: 3px solid $accent-primary; }
|
||||
&.blocked { border-left: 3px solid $error; }
|
||||
&.done { border-left: 3px solid $success; }
|
||||
&.archived { border-left: 3px solid $border-color; }
|
||||
&.total { border-left: 3px solid $text-primary; }
|
||||
&:hover,
|
||||
&.active {
|
||||
border-color: var(--kanban-status-color);
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.08);
|
||||
}
|
||||
|
||||
&.active .stat-label,
|
||||
&.active .stat-count {
|
||||
color: var(--kanban-status-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--kanban-status-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-count {
|
||||
@@ -365,10 +451,29 @@ async function handleArchiveSelectedBoard() {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--kanban-status-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--kanban-status-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanban-status-color) 18%, transparent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border-left: 2px solid var(--kanban-status-color);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.column-empty {
|
||||
|
||||
Reference in New Issue
Block a user