indigo
/
LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modify Shot Data Table Functions

This commit is contained in:
indigo 2026-03-05 22:12:02 +08:00
parent c8c4c99a6e
commit 1f229bff6c
26 changed files with 212 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/routers/projects.py
View File

@ -367,7 +367,8 @@ async def list_project_members(
joined_at=member.joined_at,
user_email=member.user.email,
user_first_name=member.user.first_name,
user_last_name=member.user.last_name
user_last_name=member.user.last_name,
user_avatar_url=member.user.avatar_url
)
result.append(member_data)

18
backend/routers/tasks.py
View File

@ -455,7 +455,8 @@ async def create_task(
"shot_name": db_task.shot.name if db_task.shot else None,
"asset_name": db_task.asset.name if db_task.asset else None,
"assigned_user_name": f"{db_task.assigned_user.first_name} {db_task.assigned_user.last_name}" if db_task.assigned_user else None,
"assigned_user_email": db_task.assigned_user.email if db_task.assigned_user else None
"assigned_user_email": db_task.assigned_user.email if db_task.assigned_user else None,
"assigned_user_avatar_url": db_task.assigned_user.avatar_url if db_task.assigned_user else None
}
return TaskResponse(**task_data)
@ -744,7 +745,8 @@ async def get_task(
"shot_name": task.shot.name if task.shot else None,
"asset_name": task.asset.name if task.asset else None,
"assigned_user_name": f"{task.assigned_user.first_name} {task.assigned_user.last_name}" if task.assigned_user else None,
"assigned_user_email": task.assigned_user.email if task.assigned_user else None
"assigned_user_email": task.assigned_user.email if task.assigned_user else None,
"assigned_user_avatar_url": task.assigned_user.avatar_url if task.assigned_user else None
}
return TaskResponse(**task_data)
@ -862,7 +864,8 @@ async def update_task(
"shot_name": task.shot.name if task.shot else None,
"asset_name": task.asset.name if task.asset else None,
"assigned_user_name": f"{task.assigned_user.first_name} {task.assigned_user.last_name}" if task.assigned_user else None,
"assigned_user_email": task.assigned_user.email if task.assigned_user else None
"assigned_user_email": task.assigned_user.email if task.assigned_user else None,
"assigned_user_avatar_url": task.assigned_user.avatar_url if task.assigned_user else None
}
return TaskResponse(**task_data)
@ -951,7 +954,8 @@ async def update_task_status(
"shot_name": task.shot.name if task.shot else None,
"asset_name": task.asset.name if task.asset else None,
"assigned_user_name": f"{task.assigned_user.first_name} {task.assigned_user.last_name}" if task.assigned_user else None,
"assigned_user_email": task.assigned_user.email if task.assigned_user else None
"assigned_user_email": task.assigned_user.email if task.assigned_user else None,
"assigned_user_avatar_url": task.assigned_user.avatar_url if task.assigned_user else None
}
return TaskResponse(**task_data)
@ -1049,7 +1053,8 @@ async def assign_task(
"shot_name": task.shot.name if task.shot else None,
"asset_name": task.asset.name if task.asset else None,
"assigned_user_name": f"{task.assigned_user.first_name} {task.assigned_user.last_name}" if task.assigned_user else None,
"assigned_user_email": task.assigned_user.email if task.assigned_user else None
"assigned_user_email": task.assigned_user.email if task.assigned_user else None,
"assigned_user_avatar_url": task.assigned_user.avatar_url if task.assigned_user else None
}
return TaskResponse(**task_data)
@ -1130,6 +1135,7 @@ async def get_task_notes(
"user_first_name": note.user.first_name,
"user_last_name": note.user.last_name,
"user_email": note.user.email,
"user_avatar_url": note.user.avatar_url,
"child_notes": []
}
@ -1208,6 +1214,7 @@ async def create_task_note(
"user_first_name": db_note.user.first_name,
"user_last_name": db_note.user.last_name,
"user_email": db_note.user.email,
"user_avatar_url": db_note.user.avatar_url,
"child_notes": []
}
@ -1256,6 +1263,7 @@ async def update_task_note(
"user_first_name": note.user.first_name,
"user_last_name": note.user.last_name,
"user_email": note.user.email,
"user_avatar_url": note.user.avatar_url,
"child_notes": []
}

1
backend/schemas/project.py
View File

@ -211,6 +211,7 @@ class ProjectMemberResponse(ProjectMemberBase):
user_email: str
user_first_name: str
user_last_name: str
user_avatar_url: Optional[str] = None
class Config:
from_attributes = True

3
backend/schemas/task.py
View File

@ -57,6 +57,7 @@ class TaskResponse(TaskBase):
asset_name: Optional[str] = None
assigned_user_name: Optional[str] = None
assigned_user_email: Optional[str] = None
assigned_user_avatar_url: Optional[str] = None
class Config:
from_attributes = True
@ -78,6 +79,7 @@ class TaskListResponse(BaseModel):
asset_name: Optional[str] = None
assigned_user_id: Optional[int] = None
assigned_user_name: Optional[str] = None
assigned_user_avatar_url: Optional[str] = None
created_at: datetime
updated_at: datetime
@ -110,6 +112,7 @@ class ProductionNoteResponse(ProductionNoteBase):
user_first_name: str
user_last_name: str
user_email: str
user_avatar_url: Optional[str] = None
# Child notes for threading
child_notes: Optional[List['ProductionNoteResponse']] = None

15
frontend/src/components/activity/ActivityFeed.vue
View File

@ -48,11 +48,11 @@
<Avatar class="h-8 w-8">
<AvatarImage
v-if="activity.user.avatar_url"
:src="getAvatarUrl(activity.user.avatar_url, activity.user.id)"
:src="getAvatarUrl(activity.user.avatar_url, activity.user.first_name, activity.user.last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${activity.user.first_name} ${activity.user.last_name}`"
:src="getInitialsAvatarUrl(activity.user.first_name, activity.user.last_name)"
/>
<AvatarFallback>
{{ getInitials(activity.user) }}
@ -275,12 +275,7 @@ function navigateToProject(projectId: number) {
router.push(`/projects/${projectId}`)
}
function getAvatarUrl(url: string | null | undefined, userId?: number): string {
if (!url) return ''
// If it's already a full URL, return it
if (url.startsWith('http')) return url
// Use direct static file serving
const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl } = useAvatarUrl()
</script>

2
frontend/src/components/asset/AssetDeleteConfirmDialog.vue
View File

@ -93,7 +93,7 @@
>
<div class="flex-1">
<div class="font-medium text-sm">{{ user.name }}</div>
<div class="text-xs text-muted-foreground">{{ user.email }} • {{ user.role }}</div>
<div class="text-xs text-muted-foreground">{{ user.email }} ??{{ user.role }}</div>
</div>
<div class="text-xs text-muted-foreground text-right">
<div v-if="user.task_count > 0">{{ user.task_count }} task{{ user.task_count === 1 ? '' : 's' }}</div>

15
frontend/src/components/layout/AppHeader.vue
View File

@ -34,11 +34,11 @@
<Avatar class="h-10 w-10">
<AvatarImage
v-if="user?.avatar_url"
:src="getAvatarUrl(user.avatar_url)"
:src="getAvatarUrl(user.avatar_url, user.first_name, user.last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${user?.first_name} ${user?.last_name}`"
:src="getInitialsAvatarUrl(user.first_name, user.last_name)"
/>
<AvatarFallback>{{ userInitials }}</AvatarFallback>
</Avatar>
@ -116,14 +116,9 @@ const userInitials = computed(() => {
return `${user.value.first_name.charAt(0)}${user.value.last_name.charAt(0)}`.toUpperCase()
})
const getAvatarUrl = (url: string | null | undefined) => {
if (!url) return ''
// If it's already a full URL, return it
if (url.startsWith('http')) return url
// Use direct static file serving
const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl } = useAvatarUrl()
// Generate breadcrumbs based on current route with enhanced context
const breadcrumbs = ref<BreadcrumbData[]>([])

23
frontend/src/components/project/ProjectMemberManagement.vue
View File

@ -43,11 +43,11 @@
<Avatar class="h-8 w-8">
<AvatarImage
v-if="member.user_id"
:src="getAvatarUrl(member.user_id)"
:src="getAvatarUrl(member.avatar_url, member.user_first_name, member.user_last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${member.user_first_name} ${member.user_last_name}`"
:src="`https://ui-avatars.com/api/?name=${member.user_first_name} ${member.user_last_name}`"
/>
<AvatarFallback>{{ getUserInitials(member) }}</AvatarFallback>
</Avatar>
@ -378,22 +378,9 @@ const getUserInitials = (member: ProjectMember) => {
return `${member.user_first_name.charAt(0)}${member.user_last_name.charAt(0)}`.toUpperCase()
}
const getAvatarUrl = (userIdOrUrl: string | number | null | undefined) => {
if (!userIdOrUrl) return ''
// If it's a number, we don't have the avatar URL, so we can't display avatars
if (typeof userIdOrUrl === 'number') {
return ''
}
// If it's already a full URL, return it
if (userIdOrUrl.startsWith('http')) return userIdOrUrl
// Check if it looks like a user ID (numeric string)
if (/^\d+$/.test(userIdOrUrl)) {
return ''
}
// Use direct static file serving for avatar URLs
const cleanUrl = userIdOrUrl.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl, getInitialsAvatarUrl } = useAvatarUrl()
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('en-US', {

102
frontend/src/components/shot/EditableTaskStatus.vue
View File

@ -39,24 +39,50 @@
<Button
variant="ghost"
size="sm"
class="h-6 w-6 p-0 hover:bg-accent relative z-10"
class="h-6 w-6 p-0 hover:bg-accent relative"
:disabled="isUpdating"
@click="ensureMembersLoaded"
@click.stop="ensureMembersLoaded"
>
<Avatar class="h-4 w-4" v-if="assignedUser">
<AvatarImage :src="getAvatarUrl(assignedUser.user_id)" />
<AvatarImage :src="getAvatarUrl(assignedUser?.user_avatar_url, assignedUser?.user_first_name, assignedUser?.user_last_name)" />
<AvatarFallback class="text-[8px]">{{ getUserInitials(assignedUser) }}</AvatarFallback>
</Avatar>
<User class="h-3 w-3" v-else />
</Button>
</PopoverTrigger>
<PopoverContent class="w-64 p-2 z-50" align="start" side="bottom" :side-offset="4">
<PopoverContent class="w-64 p-2" align="start" side="bottom" :side-offset="4">
<div class="space-y-2">
<div class="px-2 py-1.5 text-sm font-semibold">Assign Task</div>
<!-- Debug info -->
<div class="px-2 py-1 text-xs text-muted-foreground">
Project ID: {{ projectId }}, Members: {{ projectMembers.length }}
<!-- Current Assignment Display with X button -->
<div v-if="assignedUser" class="px-2 py-2 bg-muted rounded-md flex items-center gap-2">
<Avatar class="h-8 w-8">
<AvatarImage :src="getAvatarUrl(assignedUser?.user_avatar_url, assignedUser?.user_first_name, assignedUser?.user_last_name)" />
<AvatarFallback class="text-[8px]">{{ getUserInitials(assignedUser) }}</AvatarFallback>
</Avatar>
<div class="flex flex-col flex-1 min-w-0">
<span class="text-xs font-medium truncate">{{ assignedUser.user_first_name }} {{ assignedUser.user_last_name }}</span>
<span class="text-[10px] text-muted-foreground">Current</span>
</div>
<Button
variant="ghost"
size="sm"
class="h-6 w-6 p-0 hover:bg-destructive hover:text-destructive-foreground"
@click.stop="handleAssignUser(null)"
:disabled="isAssigning"
>
<X class="h-3 w-3" />
</Button>
</div>
<!-- Search Input -->
<div class="relative">
<Search class="absolute left-2 top-1/2 transform -translate-y-1/2 h-3 w-3 text-muted-foreground" />
<Input
v-model="searchQuery"
placeholder="Search members..."
class="pl-7 h-8 text-xs"
/>
</div>
<!-- Loading state -->
@ -80,37 +106,30 @@
<!-- Content when members are loaded -->
<template v-else>
<!-- Unassign option -->
<Button
variant="ghost"
size="sm"
class="w-full justify-start"
@click="handleAssignUser(null)"
:disabled="isAssigning"
>
<UserX class="h-4 w-4 mr-2" />
Unassign
</Button>
<!-- Project members list -->
<div class="max-h-48 overflow-y-auto">
<div class="max-h-64 overflow-y-auto">
<div v-if="filteredProjectMembers.length === 0" class="py-2 text-xs text-muted-foreground text-center">
No matching members found
</div>
<Button
v-for="member in projectMembers"
v-else
v-for="member in filteredProjectMembers"
:key="member.user_id"
variant="ghost"
size="sm"
class="w-full justify-start"
class="w-full justify-start h-10"
@click="handleAssignUser(member.user_id)"
:disabled="isAssigning"
>
<Avatar class="h-4 w-4 mr-2">
<AvatarImage :src="getAvatarUrl(member.user_id)" />
<Avatar class="h-8 w-8 mr-2">
<AvatarImage :src="getAvatarUrl(member.user_avatar_url, member.user_first_name, member.user_last_name)" />
<AvatarFallback class="text-[8px]">{{ getUserInitials(member) }}</AvatarFallback>
</Avatar>
<div class="flex flex-col items-start">
<span class="text-sm">{{ member.user_first_name }} {{ member.user_last_name }}</span>
<span class="text-xs text-muted-foreground" v-if="member.department_role">{{ formatDepartmentRole(member.department_role) }}</span>
<div class="flex flex-col items-start flex-1 min-w-0">
<span class="text-xs truncate">{{ member.user_first_name }} {{ member.user_last_name }}</span>
<span class="text-[10px] text-muted-foreground" v-if="member.department_role">{{ formatDepartmentRole(member.department_role) }}</span>
</div>
<Check v-if="assignedUserId === member.user_id" class="h-4 w-4 text-green-500 ml-1" />
</Button>
</div>
</template>
@ -144,8 +163,9 @@ import {
PopoverTrigger,
} from '@/components/ui/popover'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { User, UserX } from 'lucide-vue-next'
import { User, UserX, Search, Check, X } from 'lucide-vue-next'
import TaskStatusBadge from '@/components/task/TaskStatusBadge.vue'
import { TaskStatus } from '@/services/shot'
import { taskService } from '@/services/task'
@ -183,6 +203,20 @@ const isUpdating = ref(false)
const isAssigning = ref(false)
const isLoadingMembers = ref(false)
const projectMembers = ref<ProjectMember[]>([])
const searchQuery = ref('')
// Filtered project members based on search query
const filteredProjectMembers = computed(() => {
if (!searchQuery.value.trim()) {
return projectMembers.value
}
const query = searchQuery.value.toLowerCase().trim()
return projectMembers.value.filter(member => {
const fullName = `${member.user_first_name || ''} ${member.user_last_name || ''}`.toLowerCase()
const departmentRole = member.department_role?.toLowerCase() || ''
return fullName.includes(query) || departmentRole.includes(query)
})
})
// Get loading state from store
const isLoadingStatuses = computed(() => taskStatusesStore.isLoading(props.projectId))
@ -257,10 +291,9 @@ const getUserInitials = (member: ProjectMember): string => {
return (first + last).toUpperCase()
}
// Get avatar URL
const getAvatarUrl = (userId: number): string => {
return `https://api.dicebear.com/7.x/initials/svg?seed=${userId}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl, getInitialsAvatarUrl } = useAvatarUrl()
// Fetch custom statuses for the project using store
const fetchStatuses = async () => {
@ -353,7 +386,10 @@ const handleAssignUser = async (userId: number | null) => {
emit('assignment-updated', props.shotId, props.taskType, userId)
}
// Note: Popover will close naturally when clicking outside or on assignment
// Close popover by simulating click outside after assignment
setTimeout(() => {
document.querySelector('[data-state="open"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
}, 100)
} catch (error) {
console.error('Failed to assign task:', error)
} finally {

25
frontend/src/components/shot/ShotColumnVisibilityControl.vue
View File

@ -46,17 +46,6 @@
<span>Episode</span>
</div>
</SelectItem>
<SelectItem value="frameRange" @click="toggleColumn('frameRange')">
<div class="flex items-center gap-2">
<input
type="checkbox"
:checked="isColumnVisible('frameRange')"
@change="handleCheckboxChange('frameRange', $event)"
class="rounded border-gray-300"
/>
<span>Frame Range</span>
</div>
</SelectItem>
<SelectItem value="status" @click="toggleColumn('status')">
<div class="flex items-center gap-2">
<input
@ -88,20 +77,6 @@
</div>
</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Other Columns</SelectLabel>
<SelectItem value="description" @click="toggleColumn('description')">
<div class="flex items-center gap-2">
<input
type="checkbox"
:checked="isColumnVisible('description')"
@change="handleCheckboxChange('description', $event)"
class="rounded border-gray-300"
/>
<span>Description</span>
</div>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>

2
frontend/src/components/shot/ShotTableToolbar.vue
View File

@ -305,10 +305,8 @@ const allColumns = computed(() => [
{ id: 'thumbnail', label: 'Thumbnail', type: 'default' },
{ id: 'name', label: 'Shot Name', type: 'default' },
{ id: 'episode', label: 'Episode', type: 'default' },
{ id: 'frameRange', label: 'Frame Range', type: 'default' },
{ id: 'frames', label: 'Frames', type: 'default' },
{ id: 'status', label: 'Status', type: 'default' },
{ id: 'description', label: 'Description', type: 'default' },
...props.allTaskTypes.map(taskType => ({
id: taskType,
label: taskType.charAt(0).toUpperCase() + taskType.slice(1),

14
frontend/src/components/shot/columns.ts
View File

@ -74,8 +74,8 @@ export const createShotColumns = (
id: 'thumbnail',
header: 'Thumbnail',
cell: () => {
return h('div', { class: 'w-20 h-11 bg-muted flex items-center justify-center' }, [
h(Camera, { class: 'h-6 w-6 text-muted-foreground' }),
return h('div', { class: 'w-20 h-11 bg-gray-500/20 flex items-center justify-center' }, [
h(Camera, { class: 'h-6 w-6 text-muted-foreground text-gray-900' }),
])
},
enableSorting: false,
@ -121,16 +121,6 @@ export const createShotColumns = (
return h(Badge, { variant: 'outline', class: 'text-xs' }, () => episodeName)
},
},
// Frame Range column (not sortable)
{
id: 'frameRange',
header: 'Frame Range',
cell: ({ row }) => {
const shot = row.original
return h('span', { class: 'text-sm' }, `${shot.frame_start}-${shot.frame_end}`)
},
enableSorting: false,
},
// Frames column (frame count)
{
id: 'frames',

5
frontend/src/components/task/AttachmentCard.vue
View File

@ -64,7 +64,7 @@
<div class="flex items-center gap-2 text-xs text-muted-foreground">
<Avatar class="h-4 w-4">
<AvatarImage
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${attachment.user_first_name} ${attachment.user_last_name}`"
:src="getInitialsAvatarUrl(attachment.user_first_name, attachment.user_last_name)"
/>
<AvatarFallback class="text-[8px]">{{ getUserInitials(attachment.user_first_name, attachment.user_last_name) }}</AvatarFallback>
</Avatar>
@ -84,6 +84,9 @@ import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import type { TaskAttachment } from '@/services/task'
import { apiClient } from '@/services/api'
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getInitialsAvatarUrl } = useAvatarUrl()
const props = defineProps<{
attachment: TaskAttachment

12
frontend/src/components/task/NoteItem.vue
View File

@ -6,11 +6,11 @@
<Avatar class="h-8 w-8">
<AvatarImage
v-if="note.user_id"
:src="getAvatarUrl(note.user_id)"
:src="getAvatarUrl(note.user_avatar_url, note.user_first_name, note.user_last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${note.user_first_name} ${note.user_last_name}`"
:src="`https://ui-avatars.com/api/?name=${note.user_first_name} ${note.user_last_name}`"
/>
<AvatarFallback>
{{ getInitials(note.user_first_name, note.user_last_name) }}
@ -194,9 +194,7 @@ async function handleDelete() {
}
}
function getAvatarUrl(userId: number | null | undefined) {
// For NoteItem, we don't have the avatar URL, so we can't display avatars
// This would require updating the backend API to include avatar URLs in note responses
return ''
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl, getInitialsAvatarUrl } = useAvatarUrl()
</script>

2
frontend/src/components/task/SubmissionCard.vue
View File

@ -45,7 +45,7 @@
<div class="flex items-center gap-2">
<Avatar class="h-5 w-5">
<AvatarImage
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${submission.user_first_name} ${submission.user_last_name}`"
:src="`https://ui-avatars.com/api/?name=${submission.user_first_name} ${submission.user_last_name}`"
/>
<AvatarFallback class="text-[10px]">{{ getUserInitials(submission.user_first_name, submission.user_last_name) }}</AvatarFallback>
</Avatar>

13
frontend/src/components/task/TaskDetailPanel.vue
View File

@ -136,7 +136,7 @@
<div v-if="task.assigned_user_name" class="mt-1 flex items-center gap-2">
<Avatar class="h-6 w-6">
<AvatarImage
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${task.assigned_user_name}`"
:src="`getInitialsAvatarUrl(task.assigned_user_name)`"
/>
<AvatarFallback class="text-xs">{{ getAssignedUserInitials(task.assigned_user_name) }}</AvatarFallback>
</Avatar>
@ -228,7 +228,7 @@
<div class="flex items-center gap-3 w-full">
<Avatar class="h-8 w-8">
<AvatarImage
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${member.user_first_name} ${member.user_last_name}`"
:src="`https://ui-avatars.com/api/?name=${member.user_first_name} ${member.user_last_name}`"
/>
<AvatarFallback>{{ getUserInitials(member) }}</AvatarFallback>
</Avatar>
@ -478,12 +478,9 @@ function getUserInitials(member: ProjectMember): string {
return `${member.user_first_name.charAt(0)}${member.user_last_name.charAt(0)}`.toUpperCase()
}
function getAvatarUrl(url: string | null | undefined) {
if (!url) return ''
if (url.startsWith('http')) return url
const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `http://localhost:8000/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl } = useAvatarUrl()
function getAssignedUserInitials(name: string) {
const parts = name.split(' ')

27
frontend/src/components/task/TaskList.vue
View File

@ -105,11 +105,11 @@
<Avatar class="h-5 w-5">
<AvatarImage
v-if="task.assigned_user_id"
:src="getAvatarUrl(task.assigned_user_id)"
:src="getAvatarUrl(task.assigned_user_avatar_url, task.assigned_user_first_name, task.assigned_user_last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${task.assigned_user_name}`"
:src="`getInitialsAvatarUrl(task.assigned_user_name)`"
/>
<AvatarFallback class="text-[10px]">{{ getAssignedUserInitials(task.assigned_user_name) }}</AvatarFallback>
</Avatar>
@ -268,11 +268,11 @@
<Avatar class="h-6 w-6">
<AvatarImage
v-if="member.user_id"
:src="getAvatarUrl(member.user_id)"
:src="getAvatarUrl(member.user_avatar_url, member.user_first_name, member.user_last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${member.user_first_name} ${member.user_last_name}`"
:src="`https://ui-avatars.com/api/?name=${member.user_first_name} ${member.user_last_name}`"
/>
<AvatarFallback class="text-xs">{{ member.user_first_name.charAt(0) }}{{ member.user_last_name.charAt(0) }}</AvatarFallback>
</Avatar>
@ -581,22 +581,9 @@ function clearFilters() {
sortBy.value = 'deadline'
}
function getAvatarUrl(userIdOrUrl: string | number | null | undefined) {
if (!userIdOrUrl) return ''
// If it's a number, we don't have the avatar URL, so we can't display avatars
if (typeof userIdOrUrl === 'number') {
return ''
}
// If it's already a full URL, return it
if (userIdOrUrl.startsWith('http')) return userIdOrUrl
// Check if it looks like a user ID (numeric string)
if (/^\d+$/.test(userIdOrUrl)) {
return ''
}
// Use direct static file serving for avatar URLs
const cleanUrl = userIdOrUrl.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl, getInitialsAvatarUrl } = useAvatarUrl()
function getAssignedUserInitials(name: string) {
const parts = name.split(' ')

2
frontend/src/components/ui/table/TableCell.vue
View File

@ -11,7 +11,7 @@ const props = defineProps<{
<td
:class="
cn(
'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
'pl-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
props.class,
)
"

12
frontend/src/components/user/AvatarUpload.vue
View File

@ -7,7 +7,7 @@
>
<img
v-if="currentAvatarUrl"
:src="getAvatarUrl(currentAvatarUrl)"
:src="getAvatarUrl(currentAvatarUrl, firstName, lastName)"
alt="Avatar"
class="w-full h-full object-cover"
/>
@ -90,6 +90,7 @@ import { Upload, X, Loader2, Camera } from 'lucide-vue-next'
import { useToast } from '@/components/ui/toast/use-toast'
import { userService } from '@/services/user'
import { useAuthStore } from '@/stores/auth'
import { useAvatarUrl } from '@/composables/useAvatarUrl'
interface Props {
@ -118,14 +119,7 @@ const initials = computed(() => {
return (first + last).toUpperCase() || '?'
})
const getAvatarUrl = (url: string | null | undefined) => {
if (!url) return ''
// If it's already a full URL, return it
if (url.startsWith('http')) return url
// Use direct static file serving
const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
const { getAvatarUrl } = useAvatarUrl()
const triggerFileInput = () => {
fileInput.value?.click()

5
frontend/src/components/user/UserApprovalCard.vue
View File

@ -4,7 +4,7 @@
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<Avatar class="h-10 w-10">
<AvatarImage :src="`https://api.dicebear.com/7.x/initials/svg?seed=${user.first_name} ${user.last_name}`" />
<AvatarImage :src="getInitialsAvatarUrl(user.first_name, user.last_name)" />
<AvatarFallback>{{ userInitials }}</AvatarFallback>
</Avatar>
<div>
@ -53,6 +53,9 @@ import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Check, X } from 'lucide-vue-next'
import type { User } from '@/types/auth'
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getInitialsAvatarUrl } = useAvatarUrl()
interface Props {
user: User

5
frontend/src/components/user/UserDeleteConfirmDialog.vue
View File

@ -12,7 +12,7 @@
<div v-if="user" class="flex items-center space-x-3 p-3 bg-muted rounded-md">
<Avatar class="h-10 w-10">
<AvatarImage
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${user.first_name} ${user.last_name}`"
:src="getInitialsAvatarUrl(user.first_name, user.last_name)"
/>
<AvatarFallback>{{ getUserInitials(user) }}</AvatarFallback>
</Avatar>
@ -90,6 +90,9 @@
</template>
<script setup lang="ts">
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getInitialsAvatarUrl } = useAvatarUrl()
import { ref, computed, watch } from 'vue'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

15
frontend/src/components/user/UserManagementTable.vue
View File

@ -93,11 +93,11 @@
<Avatar class="h-8 w-8">
<AvatarImage
v-if="user.avatar_url"
:src="getAvatarUrl(user.avatar_url, user.id)"
:src="getAvatarUrl(user.avatar_url, user.first_name, user.last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${user.first_name} ${user.last_name}`"
:src="getInitialsAvatarUrl(user.first_name, user.last_name)"
/>
<AvatarFallback>{{ getUserInitials(user) }}</AvatarFallback>
</Avatar>
@ -343,14 +343,9 @@ const getUserInitials = (user: User) => {
return `${user.first_name.charAt(0)}${user.last_name.charAt(0)}`.toUpperCase();
};
const getAvatarUrl = (url: string | null | undefined, userId?: number) => {
if (!url) return ''
// If it's already a full URL, return it
if (url.startsWith('http')) return url
// Use direct static file serving
const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl, getInitialsAvatarUrl } = useAvatarUrl()
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString("en-US", {

59
frontend/src/composables/useAvatarUrl.ts Normal file
View File

@ -0,0 +1,59 @@
/**
* Unified avatar URL composable
* Provides consistent avatar handling across all components
*/
/**
* Get avatar URL with fallback to initials
* @param avatarUrl - The avatar URL from backend (can be full URL, relative path, or null/undefined)
* @param firstName - User's first name for fallback
* @param lastName - User's last name for fallback
* @returns Full avatar URL or initials fallback URL
*/
export function useAvatarUrl() {
const getAvatarUrl = (
avatarUrl: string | null | undefined,
firstName?: string,
lastName?: string
): string => {
// Handle null/undefined avatar URL
if (!avatarUrl) {
// Return initials fallback with name
const name = [firstName, lastName].filter(Boolean).join(' ') || 'default'
return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random&color=fff`
}
// If it's already a full URL (http/https), return as-is
if (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) {
return avatarUrl
}
// Handle relative paths (e.g., "backend/avatars/..." or "avatars/...")
const cleanUrl = avatarUrl.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
/**
* Get initials avatar URL for fallback display
* @param firstName - User's first name
* @param lastName - User's last name
* @returns Initials avatar URL
*/
const getInitialsAvatarUrl = (
firstName?: string,
lastName?: string
): string => {
// Use name combination
const name = [firstName, lastName].filter(Boolean).join(' ').trim()
if (name) {
return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random&color=fff`
}
// Ultimate fallback
return 'https://ui-avatars.com/api/?name=User&background=random&color=fff'
}
return {
getAvatarUrl,
getInitialsAvatarUrl
}
}

1
frontend/src/services/project.ts
View File

@ -31,6 +31,7 @@ export interface ProjectMember {
user_email: string
user_first_name: string
user_last_name: string
user_avatar_url?: string | null
}
export interface ProjectCreate {

2
frontend/src/services/task.ts
View File

@ -23,6 +23,7 @@ export interface Task {
assigned_user_id?: number
assigned_user_name?: string
assigned_user_email?: string
assigned_user_avatar_url?: string | null
created_at: string
updated_at: string
}
@ -65,6 +66,7 @@ export interface ProductionNote {
user_first_name: string
user_last_name: string
user_email: string
user_avatar_url?: string | null
child_notes?: ProductionNote[]
}

15
frontend/src/views/ProfileView.vue
View File

@ -35,11 +35,11 @@
<Avatar class="h-24 w-24">
<AvatarImage
v-if="user?.avatar_url"
:src="getAvatarUrl(user.avatar_url)"
:src="getAvatarUrl(user.avatar_url, user.first_name, user.last_name)"
/>
<AvatarImage
v-else
:src="`https://api.dicebear.com/7.x/initials/svg?seed=${user?.first_name} ${user?.last_name}`"
:src="getInitialsAvatarUrl(user?.first_name, user?.last_name)"
/>
<AvatarFallback class="text-2xl">{{ userInitials }}</AvatarFallback>
</Avatar>
@ -650,14 +650,9 @@ const showSuccessMessage = (message: string) => {
}, 3000)
}
const getAvatarUrl = (url: string | null | undefined) => {
if (!url) return ''
// If it's already a full URL, return it
if (url.startsWith('http')) return url
// Use direct static file serving
const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
return `/${cleanUrl}`
}
import { useAvatarUrl } from '@/composables/useAvatarUrl'
const { getAvatarUrl, getInitialsAvatarUrl } = useAvatarUrl()
const triggerAvatarUpload = () => {
avatarFileInput.value?.click()