154 lines
3.7 KiB
Vue
154 lines
3.7 KiB
Vue
<template>
|
|
<div class="backup-list-card card-glow">
|
|
<div class="card-header">
|
|
<h2 class="card-title">{{ title }}</h2>
|
|
</div>
|
|
|
|
<div v-if="!folder" class="empty-state">
|
|
<IconifyIcon icon="mdi:folder-open-outline" class="text-3xl text-m-muted/40" />
|
|
<p class="mt-2 font-mono text-xs text-m-muted/50">
|
|
Selectionnez un dossier
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-if="loading" class="file-list">
|
|
<div
|
|
v-for="n in 6"
|
|
:key="`backup-skeleton-${n}`"
|
|
class="file-row animate-shimmer"
|
|
>
|
|
<TextSkeleton custom-class="h-4 w-48" />
|
|
<CircleSkeleton custom-class="h-5 w-5 rounded" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="backups.length === 0" class="empty-state">
|
|
<IconifyIcon icon="mdi:file-hidden" class="text-3xl text-m-muted/40" />
|
|
<p class="mt-2 font-mono text-xs text-m-muted/50">
|
|
Aucun backup trouve
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else class="file-list">
|
|
<button
|
|
v-for="file in backups"
|
|
:key="file"
|
|
class="file-row"
|
|
@click="downloadBackup(file)"
|
|
>
|
|
<div class="flex min-w-0 items-center gap-2.5">
|
|
<IconifyIcon icon="mdi:file-document-outline" class="text-base text-m-accent flex-shrink-0" />
|
|
<span class="truncate font-mono text-xs text-m-text">
|
|
{{ file }}
|
|
</span>
|
|
</div>
|
|
<IconifyIcon
|
|
icon="mdi:download"
|
|
class="text-base text-m-muted flex-shrink-0 transition-colors duration-200"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {Icon as IconifyIcon} from "@iconify/vue"
|
|
import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
|
|
import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
|
|
|
|
const props = defineProps<{
|
|
folder: string | null
|
|
}>()
|
|
|
|
const backups = ref<string[]>([])
|
|
const loading = ref(false)
|
|
const title = computed(() => {
|
|
if (!props.folder) return "Fichiers"
|
|
return `Backup — ${props.folder.toUpperCase()}`
|
|
})
|
|
|
|
const downloadBackup = (file: string) => {
|
|
if (!props.folder) return
|
|
const url = `/api/download?folder=${encodeURIComponent(props.folder)}&file=${encodeURIComponent(file)}`
|
|
window.location.href = url
|
|
}
|
|
|
|
watch(() => props.folder, async (folder) => {
|
|
if (!folder) {
|
|
loading.value = false
|
|
backups.value = []
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const data = await $fetch<string[]>(`/api/backups?folder=${encodeURIComponent(folder)}`)
|
|
backups.value = data
|
|
} catch (error) {
|
|
console.error("Erreur récupération backups:", error)
|
|
backups.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.backup-list-card {
|
|
background: rgb(var(--m-secondary));
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: rgb(var(--m-text));
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2.5rem 1rem;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
max-height: calc((2.875rem * 5) + (0.375rem * 4));
|
|
overflow-y: auto;
|
|
padding-right: 0.25rem;
|
|
}
|
|
|
|
.file-row {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.625rem 0.875rem;
|
|
border-radius: 8px;
|
|
background: rgb(var(--m-tertiary));
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.file-row:hover {
|
|
border-color: rgb(var(--m-accent) / 0.15);
|
|
background: rgb(var(--m-accent) / 0.06);
|
|
}
|
|
|
|
.file-row:hover .text-m-muted {
|
|
color: rgb(var(--m-accent));
|
|
}
|
|
</style>
|