Lesstime/frontend/modules/project-management/components/TaskDocumentShareLinker.vue

<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 '~/modules/integration/services/dto/share'
import { useShareService } from '~/modules/integration/services/share'
import { useTaskDocumentService } from '~/modules/project-management/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>