matthieu
e4fc34b90f
Backend: - Add MCP Serializer to centralize entity-to-array conversion (~300 lines deduped) - Fix race condition in task/ticket number generation (SELECT FOR UPDATE + transaction) - Add unique constraint on task (project_id, number) with migration - Fix MIME type validation: use server-detected finfo instead of client-supplied type - Add allowlist of permitted MIME types for uploads - Fix TaskDocumentDownloadController: allow ROLE_CLIENT access, add priority:1 - Fix notification sent even when ticket status unchanged - Remove redundant exception constructors - Simplify services (BookStackApi double fetch, TokenEncryptor, GiteaApi) - Consolidate duplicate checks in processors Frontend: - Fix useApi isHandlingUnauthorized scope (module-level to prevent double 401 redirect) - Fix client-tickets toast key copy-paste bug - Merge duplicated tasks service methods (getByProject + getByProjectArchived) - Extract shared uploadWithRelation helper in task-documents service - Extract formatFileSize utility from duplicated component code - Extract status transition logic into useClientTicketHelpers composable - Remove dead code (unused router, handleLogout, empty script blocks) - Merge duplicate watchers and onMounted calls - Normalize arrow functions to function declarations per convention Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
120 lines
4.3 KiB
Vue
120 lines
4.3 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="fade" appear>
|
|
<div
|
|
v-if="document"
|
|
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80"
|
|
@click.self="$emit('close')"
|
|
@keydown.escape="$emit('close')"
|
|
@keydown.left="$emit('prev')"
|
|
@keydown.right="$emit('next')"
|
|
tabindex="0"
|
|
ref="overlayRef"
|
|
>
|
|
<!-- Close button -->
|
|
<button
|
|
class="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
|
|
@click="$emit('close')"
|
|
>
|
|
<Icon name="heroicons:x-mark" class="h-6 w-6" />
|
|
</button>
|
|
|
|
<!-- Navigation arrows -->
|
|
<button
|
|
v-if="hasPrev"
|
|
class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
|
|
@click="$emit('prev')"
|
|
>
|
|
<Icon name="heroicons:chevron-left" class="h-6 w-6" />
|
|
</button>
|
|
<button
|
|
v-if="hasNext"
|
|
class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
|
|
@click="$emit('next')"
|
|
>
|
|
<Icon name="heroicons:chevron-right" class="h-6 w-6" />
|
|
</button>
|
|
|
|
<!-- Content -->
|
|
<div class="flex max-h-[90vh] max-w-[90vw] flex-col items-center">
|
|
<!-- Image preview -->
|
|
<img
|
|
v-if="isImage"
|
|
:src="downloadUrl"
|
|
:alt="document.originalName"
|
|
class="max-h-[85vh] max-w-[90vw] object-contain"
|
|
/>
|
|
|
|
<!-- PDF preview -->
|
|
<iframe
|
|
v-else-if="isPdf"
|
|
:src="downloadUrl"
|
|
class="h-[85vh] w-[80vw] rounded-lg bg-white"
|
|
/>
|
|
|
|
<!-- Generic file -->
|
|
<div v-else class="flex flex-col items-center gap-4 rounded-xl bg-white p-10">
|
|
<Icon name="heroicons:document" class="h-16 w-16 text-neutral-400" />
|
|
<p class="max-w-xs truncate text-lg font-medium text-neutral-700">{{ document.originalName }}</p>
|
|
<p class="text-sm text-neutral-400">{{ formatFileSize(document.size) }}</p>
|
|
<a
|
|
:href="downloadUrl"
|
|
download
|
|
class="mt-2 rounded-lg bg-blue-600 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700"
|
|
>
|
|
{{ $t('taskDocuments.download') }}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- File name footer -->
|
|
<p class="mt-3 text-sm text-white/70">{{ document.originalName }}</p>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TaskDocument } from '~/services/dto/task-document'
|
|
import { useTaskDocumentService } from '~/services/task-documents'
|
|
import { formatFileSize } from '~/utils/format'
|
|
|
|
const props = defineProps<{
|
|
document: TaskDocument | null
|
|
hasPrev: boolean
|
|
hasNext: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
close: []
|
|
prev: []
|
|
next: []
|
|
}>()
|
|
|
|
const overlayRef = ref<HTMLElement | null>(null)
|
|
|
|
const { getDownloadUrl } = useTaskDocumentService()
|
|
|
|
const downloadUrl = computed(() => props.document ? getDownloadUrl(props.document.id) : '')
|
|
const isImage = computed(() => props.document?.mimeType.startsWith('image/') ?? false)
|
|
const isPdf = computed(() => props.document?.mimeType === 'application/pdf')
|
|
|
|
// Focus overlay for keyboard events
|
|
watch(() => props.document, (doc) => {
|
|
if (doc) {
|
|
nextTick(() => overlayRef.value?.focus())
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|