feat(documents) : bouton reload explorateur + liaison d'un fichier du partage SMB à un ticket
This commit is contained in:
Matthieu
@@ -28,7 +28,15 @@
|
||||
<!-- File info -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-xs font-medium text-neutral-700">{{ doc.originalName }}</p>
|
||||
<p class="text-xs text-neutral-400">{{ formatFileSize(doc.size) }}</p>
|
||||
<p class="flex items-center gap-1 text-xs text-neutral-400">
|
||||
<Icon
|
||||
v-if="doc.sharePath"
|
||||
name="heroicons:link"
|
||||
class="h-3 w-3 shrink-0 text-primary-400"
|
||||
:title="$t('taskDocuments.shareLinkBadge')"
|
||||
/>
|
||||
{{ formatFileSize(doc.size) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Delete button -->
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<Teleport v-if="modelValue" to="body">
|
||||
<Transition name="modal" appear>
|
||||
<div class="fixed inset-0 z-[70] flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black/30" @click.stop="close" />
|
||||
<div class="relative z-10 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg bg-white shadow-xl">
|
||||
<!-- En-tête -->
|
||||
<div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4">
|
||||
<h3 class="text-lg font-bold text-neutral-900">{{ $t('taskDocuments.linkShareTitle') }}</h3>
|
||||
<MalioButtonIcon
|
||||
icon="heroicons:x-mark"
|
||||
:aria-label="$t('common.cancel')"
|
||||
variant="ghost"
|
||||
icon-size="20"
|
||||
button-class="text-neutral-400 hover:text-neutral-700"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Fil d'Ariane -->
|
||||
<nav class="flex flex-wrap items-center gap-1 border-b border-neutral-100 px-6 py-2 text-sm text-neutral-500">
|
||||
<button class="hover:text-primary-500" @click="openPath('')">{{ $t('sharedFiles.root') }}</button>
|
||||
<template v-for="crumb in breadcrumb" :key="crumb.path">
|
||||
<span>/</span>
|
||||
<button class="hover:text-primary-500" @click="openPath(crumb.path)">{{ crumb.name }}</button>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div class="min-h-[12rem] flex-1 overflow-auto px-2 py-2">
|
||||
<div v-if="loading" class="flex justify-center py-12">
|
||||
<Icon name="heroicons:arrow-path" class="h-6 w-6 animate-spin text-neutral-400" />
|
||||
</div>
|
||||
<p v-else-if="error" class="px-4 py-12 text-center text-sm text-red-600">{{ error }}</p>
|
||||
<p v-else-if="entries.length === 0" class="px-4 py-12 text-center text-sm text-neutral-400">{{ $t('sharedFiles.empty') }}</p>
|
||||
<ul v-else class="text-sm">
|
||||
<li
|
||||
v-for="entry in entries"
|
||||
:key="entry.path"
|
||||
class="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-neutral-50"
|
||||
:class="{ 'opacity-60': linking }"
|
||||
@click="onEntryClick(entry)"
|
||||
>
|
||||
<Icon :name="entry.isDir ? 'mdi:folder-outline' : iconForMime(entry.mimeType)" class="h-5 w-5 shrink-0 text-neutral-400" />
|
||||
<span class="flex-1 truncate">{{ entry.name }}</span>
|
||||
<span class="shrink-0 text-xs text-neutral-400">{{ entry.isDir ? '' : formatFileSize(entry.size) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="border-t border-neutral-100 px-6 py-3 text-xs text-neutral-400">{{ $t('taskDocuments.linkShareHint') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Breadcrumb, FileEntry } from '~/services/dto/share'
|
||||
import { useShareService } from '~/services/share'
|
||||
import { useTaskDocumentService } from '~/services/task-documents'
|
||||
import { formatFileSize } from '~/utils/format'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
taskId: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'linked'): void
|
||||
}>()
|
||||
|
||||
const { browse } = useShareService()
|
||||
const { linkShare } = useTaskDocumentService()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
const currentPath = ref('')
|
||||
const breadcrumb = ref<Breadcrumb[]>([])
|
||||
const entries = ref<FileEntry[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const linking = ref(false)
|
||||
|
||||
async function load(path: string) {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const result = await browse(path)
|
||||
currentPath.value = result.path
|
||||
breadcrumb.value = result.breadcrumb
|
||||
entries.value = result.entries
|
||||
} catch (e: unknown) {
|
||||
error.value = (e as Error)?.message ?? t('sharedFiles.previewError')
|
||||
entries.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openPath(path: string) {
|
||||
load(path)
|
||||
}
|
||||
|
||||
async function onEntryClick(entry: FileEntry) {
|
||||
if (linking.value) return
|
||||
if (entry.isDir) {
|
||||
load(entry.path)
|
||||
return
|
||||
}
|
||||
|
||||
linking.value = true
|
||||
try {
|
||||
await linkShare(props.taskId, entry.path)
|
||||
toast.success({ title: '', message: t('taskDocuments.linkShareSuccess') })
|
||||
emit('linked')
|
||||
close()
|
||||
} catch {
|
||||
toast.error({ title: 'Erreur', message: t('taskDocuments.linkShareError') })
|
||||
} finally {
|
||||
linking.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function iconForMime(mime: string): string {
|
||||
if (mime.startsWith('image/')) return 'mdi:file-image-outline'
|
||||
if (mime === 'application/pdf') return 'mdi:file-pdf-box'
|
||||
if (mime.includes('wordprocessingml') || mime === 'application/msword') return 'mdi:file-word-outline'
|
||||
if (mime.includes('spreadsheetml') || mime === 'application/vnd.ms-excel') return 'mdi:file-excel-outline'
|
||||
if (mime.startsWith('text/')) return 'mdi:file-document-outline'
|
||||
return 'mdi:file-outline'
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (open) => {
|
||||
if (open) {
|
||||
entries.value = []
|
||||
load('')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -184,6 +184,20 @@
|
||||
:task-id="task.id"
|
||||
@uploaded="handleDocumentUploaded"
|
||||
/>
|
||||
<div v-if="isEditing && task && isAdmin && shareEnabled" class="mt-2">
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
:label="$t('taskDocuments.linkShareButton')"
|
||||
button-class="w-auto px-3"
|
||||
@click="showShareLinker = true"
|
||||
/>
|
||||
</div>
|
||||
<TaskDocumentShareLinker
|
||||
v-if="isEditing && task && isAdmin"
|
||||
v-model="showShareLinker"
|
||||
:task-id="task.id"
|
||||
@linked="handleDocumentUploaded"
|
||||
/>
|
||||
<TaskDocumentList
|
||||
v-if="isEditing && task"
|
||||
:documents="localDocuments"
|
||||
@@ -869,6 +883,11 @@ function formatMailDate(iso: string | null): string {
|
||||
const localDocuments = ref<TaskDocument[]>([])
|
||||
const previewDoc = ref<TaskDocument | null>(null)
|
||||
|
||||
// Lien vers un fichier du partage SMB (en plus de l'upload classique)
|
||||
const { enabled: shareEnabled, ensureLoaded: ensureShareStatus } = useShareStatus()
|
||||
const showShareLinker = ref(false)
|
||||
ensureShareStatus()
|
||||
|
||||
// Sync documents from task prop when modal opens or task changes
|
||||
watch(() => props.task?.documents, (docs) => {
|
||||
localDocuments.value = docs ? [...docs] : []
|
||||
|
||||
@@ -128,7 +128,13 @@
|
||||
"download": "Télécharger",
|
||||
"copy": "Copier",
|
||||
"copied": "Contenu copié !",
|
||||
"maxSizeError": "Le fichier dépasse la taille maximale de 50 Mo."
|
||||
"maxSizeError": "Le fichier dépasse la taille maximale de 50 Mo.",
|
||||
"linkShareButton": "Lier depuis le partage",
|
||||
"linkShareTitle": "Lier un fichier du partage",
|
||||
"linkShareHint": "Cliquez sur un dossier pour naviguer, sur un fichier pour le lier au ticket.",
|
||||
"linkShareSuccess": "Fichier du partage lié au ticket.",
|
||||
"linkShareError": "Impossible de lier ce fichier (type non autorisé ou introuvable).",
|
||||
"shareLinkBadge": "Lien vers le partage"
|
||||
},
|
||||
"tasks": {
|
||||
"created": "Ticket créé avec succès.",
|
||||
@@ -434,6 +440,7 @@
|
||||
"empty": "Ce dossier est vide.",
|
||||
"filterPlaceholder": "Filtrer ce dossier…",
|
||||
"download": "Télécharger",
|
||||
"reload": "Recharger",
|
||||
"previewError": "Aperçu impossible. Téléchargez le fichier pour l'ouvrir.",
|
||||
"colName": "Nom",
|
||||
"colSize": "Taille",
|
||||
|
||||
@@ -11,12 +11,23 @@
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<!-- Filtre local -->
|
||||
<div class="mt-4 max-w-sm">
|
||||
<MalioInputText
|
||||
v-model="filter"
|
||||
:placeholder="$t('sharedFiles.filterPlaceholder')"
|
||||
input-class="w-full"
|
||||
<!-- Filtre local + rechargement -->
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<div class="max-w-sm flex-1">
|
||||
<MalioInputText
|
||||
v-model="filter"
|
||||
:placeholder="$t('sharedFiles.filterPlaceholder')"
|
||||
input-class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<MalioButtonIcon
|
||||
icon="heroicons:arrow-path"
|
||||
:aria-label="$t('sharedFiles.reload')"
|
||||
variant="ghost"
|
||||
icon-size="20"
|
||||
:disabled="loading"
|
||||
button-class="text-neutral-500 hover:text-primary-500"
|
||||
@click="reload"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -113,6 +124,10 @@ function openPath(path: string) {
|
||||
load(path)
|
||||
}
|
||||
|
||||
function reload() {
|
||||
load(currentPath.value)
|
||||
}
|
||||
|
||||
function onEntryClick(entry: FileEntry) {
|
||||
if (entry.isDir) {
|
||||
openPath(entry.path)
|
||||
|
||||
@@ -5,7 +5,8 @@ export type TaskDocument = {
|
||||
id: number
|
||||
task: string
|
||||
originalName: string
|
||||
fileName: string
|
||||
fileName?: string | null
|
||||
sharePath?: string | null
|
||||
mimeType: string
|
||||
size: number
|
||||
createdAt: string
|
||||
|
||||
@@ -31,6 +31,15 @@ export function useTaskDocumentService() {
|
||||
return uploadWithRelation('task', `/api/tasks/${taskId}`, file)
|
||||
}
|
||||
|
||||
async function linkShare(taskId: number, sharePath: string): Promise<TaskDocument> {
|
||||
return $fetch<TaskDocument>(`${baseURL}/task_documents`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ task: `/api/tasks/${taskId}`, sharePath }),
|
||||
credentials: 'include',
|
||||
})
|
||||
}
|
||||
|
||||
async function remove(id: number): Promise<void> {
|
||||
await api.delete(`/task_documents/${id}`, {}, {
|
||||
toastSuccessKey: 'taskDocuments.deleted',
|
||||
@@ -48,5 +57,5 @@ export function useTaskDocumentService() {
|
||||
})
|
||||
}
|
||||
|
||||
return { getByTask, upload, remove, getDownloadUrl, getContent }
|
||||
return { getByTask, upload, linkShare, remove, getDownloadUrl, getContent }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user