style(import): simplifier et harmoniser l'interface d'import de bibliothèque #18
@@ -1,228 +1,150 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
|
||||||
<div class="flex items-start space-x-4">
|
|
||||||
<!-- File Icon and Info -->
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
|
||||||
<svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- File Details -->
|
<!-- En-tête : icône, nom, statut, actions -->
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex items-center gap-3">
|
||||||
<div class="flex items-center justify-between">
|
<div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center shrink-0">
|
||||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 truncate">
|
<DocumentIcon class="w-5 h-5 text-gray-500 dark:text-gray-400" />
|
||||||
{{ file.filename }}
|
</div>
|
||||||
</h3>
|
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
<!-- Status Badge -->
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</p>
|
||||||
<div class="flex-shrink-0 ml-4">
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||||
<StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
|
{{ file.getFormattedSize() }} · {{ file.getFileExtension().toUpperCase() }}
|
||||||
</div>
|
<span v-if="file.isAnalyzed() && file.getExtractedChapterNumber()" class="ml-2 text-blue-600 dark:text-blue-400">
|
||||||
</div>
|
Ch. {{ file.getExtractedChapterNumber() }}
|
||||||
|
</span>
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
<span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-purple-600 dark:text-purple-400">
|
||||||
{{ file.getFormattedSize() }} • {{ file.getFileExtension().toUpperCase() }}
|
Vol. {{ file.getExtractedVolumeNumber() }}
|
||||||
</p>
|
</span>
|
||||||
|
</p>
|
||||||
<!-- Extracted Info -->
|
</div>
|
||||||
<div v-if="file.isAnalyzed()" class="mt-2 flex gap-3 text-sm">
|
|
||||||
<span v-if="file.getExtractedChapterNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
|
<div class="flex items-center gap-2 shrink-0">
|
||||||
Chapitre {{ file.getExtractedChapterNumber() }}
|
<StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
|
||||||
</span>
|
|
||||||
<span v-if="file.getExtractedVolumeNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
|
<button
|
||||||
Volume {{ file.getExtractedVolumeNumber() }}
|
v-if="file.isReadyForImport()"
|
||||||
</span>
|
@click="$emit('import-file')"
|
||||||
</div>
|
:disabled="isImporting"
|
||||||
|
class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-xs font-medium rounded-md transition-colors"
|
||||||
<!-- Error Display -->
|
>
|
||||||
<div v-if="file.hasError()" class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
|
<ArrowUpTrayIcon class="w-3.5 h-3.5" />
|
||||||
<div class="flex">
|
Importer
|
||||||
<svg class="flex-shrink-0 h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
</button>
|
||||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
||||||
</svg>
|
<button
|
||||||
<div class="ml-3">
|
v-if="file.hasError()"
|
||||||
<h3 class="text-sm font-medium text-red-800 dark:text-red-300">Erreur</h3>
|
@click="$emit('retry-file')"
|
||||||
<div class="mt-2 text-sm text-red-700 dark:text-red-400">{{ file.errorMessage }}</div>
|
class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-md transition-colors"
|
||||||
|
>
|
||||||
|
Réessayer
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="$emit('remove-file')"
|
||||||
|
class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors rounded"
|
||||||
|
title="Supprimer"
|
||||||
|
>
|
||||||
|
<XMarkIcon class="w-4 h-4" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Manga Selection -->
|
<!-- Message d'erreur -->
|
||||||
|
<div v-if="file.hasError()" class="mt-3 flex items-start gap-2 text-xs text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-md px-3 py-2">
|
||||||
|
<ExclamationCircleIcon class="w-4 h-4 shrink-0 mt-0.5" />
|
||||||
|
{{ file.errorMessage }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Aucun manga trouvé -->
|
||||||
|
<div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-3 flex items-start gap-2 text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 rounded-md px-3 py-2">
|
||||||
|
<ExclamationTriangleIcon class="w-4 h-4 shrink-0 mt-0.5" />
|
||||||
|
Aucun manga correspondant trouvé. Vérifiez le nom du fichier.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sélection du manga -->
|
||||||
<div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
|
<div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
|
||||||
<div>
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
{{ file.getMatches().length }} correspondance(s)
|
||||||
Sélectionner un manga ({{ file.getMatches().length }} correspondance(s) trouvée(s))
|
</p>
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Matches Grid -->
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
<MangaMatchCard
|
||||||
<MangaMatchCard
|
v-for="match in sortedMatches"
|
||||||
v-for="match in sortedMatches"
|
:key="match.id"
|
||||||
:key="match.id"
|
:match="match"
|
||||||
:match="match"
|
:is-selected="file.selectedManga?.id === match.id"
|
||||||
:is-selected="file.selectedManga?.id === match.id"
|
@select-match="handleMangaSelection"
|
||||||
@select-match="handleMangaSelection"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Selected Manga Preview -->
|
|
||||||
<div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
|
|
||||||
<img
|
|
||||||
v-if="file.selectedManga.thumbnailUrl"
|
|
||||||
:src="file.selectedManga.thumbnailUrl"
|
|
||||||
:alt="file.selectedManga.title"
|
|
||||||
class="w-12 h-16 object-cover rounded"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-medium text-gray-900 dark:text-gray-100">{{ file.selectedManga.title }}</p>
|
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400">{{ file.selectedManga.slug }}</p>
|
|
||||||
<p class="text-xs text-blue-600 dark:text-blue-400 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Chapter/Volume Number Inputs -->
|
|
||||||
<div v-if="file.selectedManga" class="grid grid-cols-2 gap-3">
|
|
||||||
<!-- Chapter Number -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Numéro de chapitre
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
step="0.5"
|
|
||||||
:value="file.selectedChapterNumber ?? ''"
|
|
||||||
@input="handleChapterNumberInput"
|
|
||||||
:disabled="file.selectedVolumeNumber !== null"
|
|
||||||
class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
|
|
||||||
placeholder="Ex: 1, 1.5, 2..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Volume Number -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
||||||
Numéro de volume
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
step="0.5"
|
|
||||||
:value="file.selectedVolumeNumber ?? ''"
|
|
||||||
@input="handleVolumeNumberInput"
|
|
||||||
:disabled="file.selectedChapterNumber !== null"
|
|
||||||
class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
|
|
||||||
placeholder="Ex: 1, 1.5, 2..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- No Matches Message -->
|
<!-- Numéros de chapitre / volume (une fois un manga sélectionné) -->
|
||||||
<div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
|
<div v-if="file.selectedManga" class="mt-3 grid grid-cols-2 gap-3">
|
||||||
<div class="flex">
|
<div>
|
||||||
<svg class="flex-shrink-0 h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Chapitre</label>
|
||||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
<input
|
||||||
</svg>
|
type="number"
|
||||||
<div class="ml-3">
|
step="0.5"
|
||||||
<h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">Aucun manga trouvé</h3>
|
:value="file.selectedChapterNumber ?? ''"
|
||||||
<div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
|
@input="handleChapterNumberInput"
|
||||||
Aucun manga ne correspond à ce fichier. Vérifiez le nom du fichier.
|
:disabled="file.selectedVolumeNumber !== null"
|
||||||
</div>
|
class="w-full text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
|
||||||
|
placeholder="Ex: 1, 1.5..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Volume</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.5"
|
||||||
|
:value="file.selectedVolumeNumber ?? ''"
|
||||||
|
@input="handleVolumeNumberInput"
|
||||||
|
:disabled="file.selectedChapterNumber !== null"
|
||||||
|
class="w-full text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
|
||||||
|
placeholder="Ex: 1, 1.5..."
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Actions -->
|
|
||||||
<div class="mt-6 flex justify-between items-center border-t dark:border-gray-700 pt-4">
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<!-- Import Button -->
|
|
||||||
<button
|
|
||||||
v-if="file.isReadyForImport()"
|
|
||||||
@click="$emit('import-file')"
|
|
||||||
:disabled="isImporting"
|
|
||||||
class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"
|
|
||||||
>
|
|
||||||
<svg v-if="isImporting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
||||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
||||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
||||||
</svg>
|
|
||||||
{{ isImporting ? 'Import en cours...' : 'Importer' }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Retry Button -->
|
|
||||||
<button
|
|
||||||
v-if="file.hasError()"
|
|
||||||
@click="$emit('retry-file')"
|
|
||||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
|
|
||||||
>
|
|
||||||
Réessayer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Remove Button -->
|
|
||||||
<button
|
|
||||||
@click="$emit('remove-file')"
|
|
||||||
class="text-red-600 hover:text-red-700 text-sm font-medium"
|
|
||||||
>
|
|
||||||
Supprimer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ArrowUpTrayIcon, DocumentIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import MangaMatchCard from './MangaMatchCard.vue';
|
import MangaMatchCard from './MangaMatchCard.vue';
|
||||||
import StatusBadge from './StatusBadge.vue';
|
import StatusBadge from './StatusBadge.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
file: {
|
file: { type: Object, required: true },
|
||||||
type: Object,
|
isAnalyzing: { type: Boolean, default: false },
|
||||||
required: true
|
isImporting: { type: Boolean, default: false },
|
||||||
},
|
|
||||||
isAnalyzing: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
isImporting: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
'manga-selected',
|
'manga-selected',
|
||||||
'chapter-number-selected',
|
'chapter-number-selected',
|
||||||
'volume-number-selected',
|
'volume-number-selected',
|
||||||
'import-file',
|
'import-file',
|
||||||
'retry-file',
|
'retry-file',
|
||||||
'remove-file'
|
'remove-file',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Computed property to get sorted matches
|
const sortedMatches = computed(() =>
|
||||||
const sortedMatches = computed(() => {
|
[...props.file.getMatches()].sort((a, b) => b.matchScore - a.matchScore)
|
||||||
const matches = props.file.getMatches();
|
);
|
||||||
return matches.sort((a, b) => b.matchScore - a.matchScore);
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleMangaSelection = (selectedManga) => {
|
const handleMangaSelection = (manga) => emit('manga-selected', manga);
|
||||||
emit('manga-selected', selectedManga);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChapterNumberInput = (event) => {
|
const handleChapterNumberInput = (event) => {
|
||||||
const value = event.target.value;
|
const value = event.target.value;
|
||||||
const chapterNumber = value ? parseFloat(value) : null;
|
emit('chapter-number-selected', value ? parseFloat(value) : null);
|
||||||
emit('chapter-number-selected', chapterNumber);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleVolumeNumberInput = (event) => {
|
const handleVolumeNumberInput = (event) => {
|
||||||
const value = event.target.value;
|
const value = event.target.value;
|
||||||
const volumeNumber = value ? parseFloat(value) : null;
|
emit('volume-number-selected', value ? parseFloat(value) : null);
|
||||||
emit('volume-number-selected', volumeNumber);
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,116 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md"
|
class="border rounded-lg p-2.5 cursor-pointer transition-all duration-150"
|
||||||
:class="{
|
:class="isSelected
|
||||||
'border-blue-500 bg-blue-50 dark:bg-blue-900/20': isSelected,
|
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||||
'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-500': !isSelected
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'"
|
||||||
}"
|
@click="$emit('select-match', match)"
|
||||||
@click="$emit('select-match', match)"
|
>
|
||||||
>
|
<div class="flex gap-2.5">
|
||||||
<!-- Match Header with Score -->
|
<!-- Couverture -->
|
||||||
<div class="flex items-center justify-between mb-3">
|
<img
|
||||||
<div class="flex items-center space-x-2">
|
v-if="match.thumbnailUrl"
|
||||||
<div
|
:src="match.thumbnailUrl"
|
||||||
class="w-3 h-3 rounded-full"
|
:alt="match.title"
|
||||||
:class="{
|
class="w-12 h-16 object-cover rounded shrink-0"
|
||||||
'bg-blue-500': isSelected,
|
/>
|
||||||
'bg-gray-300': !isSelected
|
<div
|
||||||
}"
|
v-else
|
||||||
></div>
|
class="w-12 h-16 bg-gray-100 dark:bg-gray-700 rounded shrink-0 flex items-center justify-center"
|
||||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Score: {{ match.matchScore }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="isSelected" class="text-blue-600">
|
|
||||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Manga Thumbnail -->
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<img
|
|
||||||
v-if="match.thumbnailUrl"
|
|
||||||
:src="match.thumbnailUrl"
|
|
||||||
:alt="match.title"
|
|
||||||
class="w-16 h-20 object-cover rounded border"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded border dark:border-gray-600 flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Manga Info -->
|
|
||||||
<div class="flex-1 min-w-0">
|
|
||||||
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" :title="match.title">
|
|
||||||
{{ match.title }}
|
|
||||||
</h4>
|
|
||||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate" :title="match.slug">
|
|
||||||
{{ match.slug }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Alternative Slugs -->
|
|
||||||
<div v-if="match.alternativeSlugs && match.alternativeSlugs.length > 0" class="mt-2">
|
|
||||||
<p class="text-xs text-gray-400 dark:text-gray-500">Autres titres:</p>
|
|
||||||
<div class="flex flex-wrap gap-1 mt-1">
|
|
||||||
<span
|
|
||||||
v-for="altSlug in match.alternativeSlugs.slice(0, 2)"
|
|
||||||
:key="altSlug"
|
|
||||||
class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded"
|
|
||||||
>
|
>
|
||||||
{{ altSlug }}
|
<PhotoIcon class="w-6 h-6 text-gray-400" />
|
||||||
</span>
|
</div>
|
||||||
<span
|
|
||||||
v-if="match.alternativeSlugs.length > 2"
|
|
||||||
class="text-xs text-gray-400 dark:text-gray-500"
|
|
||||||
>
|
|
||||||
+{{ match.alternativeSlugs.length - 2 }} autres
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Score Bar -->
|
<!-- Infos -->
|
||||||
<div class="mt-3">
|
<div class="flex-1 min-w-0 flex flex-col justify-between py-0.5">
|
||||||
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
|
<p class="text-xs font-medium text-gray-900 dark:text-gray-100 line-clamp-3 leading-snug" :title="match.title">
|
||||||
<span>Correspondance</span>
|
{{ match.title }}
|
||||||
<span>{{ match.matchScore }}%</span>
|
</p>
|
||||||
</div>
|
<div class="flex items-center justify-between mt-1">
|
||||||
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
<span class="text-xs text-gray-400 dark:text-gray-500">{{ match.matchScore }}%</span>
|
||||||
<div
|
<CheckCircleIcon v-if="isSelected" class="w-4 h-4 text-blue-500 shrink-0" />
|
||||||
class="h-2 rounded-full transition-all duration-300"
|
</div>
|
||||||
:class="{
|
</div>
|
||||||
'bg-blue-500': isSelected,
|
</div>
|
||||||
'bg-gray-400': !isSelected
|
|
||||||
}"
|
|
||||||
:style="{ width: match.matchScore + '%' }"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { CheckCircleIcon, PhotoIcon } from '@heroicons/vue/24/outline';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
match: {
|
match: { type: Object, required: true },
|
||||||
type: Object,
|
isSelected: { type: Boolean, default: false },
|
||||||
required: true
|
|
||||||
},
|
|
||||||
isSelected: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['select-match']);
|
const emit = defineEmits(['select-match']);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,115 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8">
|
<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
|
||||||
<!-- Header -->
|
<Toolbar v-if="store.hasFiles && !store.allFilesProcessed" :config="toolbarConfig" />
|
||||||
<div class="mb-8">
|
|
||||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Import de Bibliothèque</h1>
|
|
||||||
<p class="text-gray-600 dark:text-gray-400">
|
|
||||||
Importez vos fichiers CBZ/CBR dans votre bibliothèque Mangarr
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Progress Bar (if files are being processed) -->
|
<div class="overflow-y-auto flex-1">
|
||||||
<div v-if="store.hasFiles && !store.allFilesProcessed" class="mb-8">
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
|
|
||||||
<div class="flex items-center justify-between mb-2">
|
|
||||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Progression</span>
|
|
||||||
<span class="text-sm text-gray-500 dark:text-gray-400">{{ store.progressPercentage }}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
class="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
|
||||||
:style="{ width: store.progressPercentage + '%' }"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
|
|
||||||
<span>{{ store.importedCount }} importés</span>
|
|
||||||
<span>{{ store.errorCount }} erreurs</span>
|
|
||||||
<span>{{ store.totalFiles }} total</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- File Upload Zone -->
|
<!-- Zone de dépôt -->
|
||||||
<div v-if="!store.hasFiles || store.allFilesProcessed" class="mb-8">
|
<FileUpload
|
||||||
<FileUpload
|
v-if="!store.hasFiles"
|
||||||
label="Importer des fichiers CBZ/CBR"
|
label="Importer des fichiers CBZ/CBR"
|
||||||
accept=".cbz,.cbr"
|
accept=".cbz,.cbr"
|
||||||
:multiple="true"
|
:multiple="true"
|
||||||
description="Formats CBZ ou CBR uniquement"
|
description="Formats CBZ ou CBR uniquement"
|
||||||
@files-selected="handleFilesSelected"
|
@files-selected="store.addFiles($event)"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Files List -->
|
|
||||||
<div v-if="store.hasFiles" class="space-y-6">
|
|
||||||
<!-- Action Buttons -->
|
|
||||||
<div class="flex flex-wrap gap-4 mb-6">
|
|
||||||
<button
|
|
||||||
v-if="store.hasReadyFiles"
|
|
||||||
@click="importAllFiles"
|
|
||||||
:disabled="store.isLoading"
|
|
||||||
class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md font-medium"
|
|
||||||
>
|
|
||||||
<LoadingSpinner v-if="store.isLoading" class="w-4 h-4 mr-2" />
|
|
||||||
Importer tous les fichiers prêts ({{ store.readyCount }})
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
v-if="store.analyzedFiles.length > 0"
|
|
||||||
@click="autoSelectMatches"
|
|
||||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium"
|
|
||||||
>
|
|
||||||
Sélection automatique
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
@click="clearAllFiles"
|
|
||||||
class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium"
|
|
||||||
>
|
|
||||||
Effacer tout
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Files Grid -->
|
|
||||||
<div class="grid gap-6">
|
|
||||||
<FileImportCard
|
|
||||||
v-for="file in store.files"
|
|
||||||
:key="file.id"
|
|
||||||
:file="file"
|
|
||||||
:is-analyzing="store.analyzingFiles.has(file.id)"
|
|
||||||
:is-importing="store.importingFiles.has(file.id)"
|
|
||||||
@manga-selected="(manga) => store.setFileManga(file.id, manga)"
|
|
||||||
@chapter-number-selected="(chapterNumber) => store.setFileChapterNumber(file.id, chapterNumber)"
|
|
||||||
@volume-number-selected="(volumeNumber) => store.setFileVolumeNumber(file.id, volumeNumber)"
|
|
||||||
@import-file="() => importSingleFile(file.id)"
|
|
||||||
@retry-file="() => retryFile(file.id)"
|
|
||||||
@remove-file="() => store.removeFile(file.id)"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- Barre de progression -->
|
||||||
|
<div v-if="store.hasFiles && !store.allFilesProcessed" class="flex items-center gap-3">
|
||||||
|
<div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||||||
|
<div
|
||||||
|
class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
|
||||||
|
:style="{ width: store.progressPercentage + '%' }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 dark:text-gray-400 shrink-0">
|
||||||
|
{{ store.importedCount }}/{{ store.totalFiles }}
|
||||||
|
<span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Liste des fichiers -->
|
||||||
|
<div v-if="store.hasFiles && !store.allFilesProcessed" class="space-y-4">
|
||||||
|
<FileImportCard
|
||||||
|
v-for="file in store.files"
|
||||||
|
:key="file.id"
|
||||||
|
:file="file"
|
||||||
|
:is-analyzing="store.analyzingFiles.has(file.id)"
|
||||||
|
:is-importing="store.importingFiles.has(file.id)"
|
||||||
|
@manga-selected="(manga) => store.setFileManga(file.id, manga)"
|
||||||
|
@chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
|
||||||
|
@volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
|
||||||
|
@import-file="() => importSingleFile(file.id)"
|
||||||
|
@retry-file="() => retryFile(file.id)"
|
||||||
|
@remove-file="() => store.removeFile(file.id)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Résultats -->
|
||||||
|
<ImportResults v-if="store.allFilesProcessed" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Results Summary (when all files are processed) -->
|
|
||||||
<div v-if="store.allFilesProcessed" class="mt-8">
|
|
||||||
<ImportResults />
|
|
||||||
</div>
|
|
||||||
</div></div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onUnmounted } from 'vue';
|
import { ArrowUpTrayIcon, SparklesIcon, TrashIcon } from '@heroicons/vue/24/outline';
|
||||||
|
import { computed, onUnmounted } from 'vue';
|
||||||
import FileUpload from '../../../../shared/components/ui/FileUpload.vue';
|
import FileUpload from '../../../../shared/components/ui/FileUpload.vue';
|
||||||
import LoadingSpinner from '../../../../shared/components/ui/LoadingSpinner.vue';
|
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
|
||||||
import { useNewImportStore } from '../../application/store/newImportStore';
|
import { useNewImportStore } from '../../application/store/newImportStore';
|
||||||
import FileImportCard from '../components/FileImportCard.vue';
|
import FileImportCard from '../components/FileImportCard.vue';
|
||||||
import ImportResults from '../components/ImportResults.vue';
|
import ImportResults from '../components/ImportResults.vue';
|
||||||
|
|
||||||
const store = useNewImportStore();
|
const store = useNewImportStore();
|
||||||
|
|
||||||
// === EVENT HANDLERS ===
|
const toolbarConfig = computed(() => ({
|
||||||
|
leftSection: [],
|
||||||
const handleFilesSelected = (files) => {
|
rightSection: [
|
||||||
store.addFiles(files);
|
...(store.analyzedFiles.length > 0 ? [{
|
||||||
};
|
type: 'button',
|
||||||
|
icon: SparklesIcon,
|
||||||
|
label: 'Sélection auto',
|
||||||
|
onClick: () => store.autoSelectBestMatches(),
|
||||||
|
}] : []),
|
||||||
|
...(store.hasReadyFiles ? [{
|
||||||
|
type: 'button',
|
||||||
|
icon: ArrowUpTrayIcon,
|
||||||
|
label: `Importer (${store.readyCount})`,
|
||||||
|
onClick: importAllFiles,
|
||||||
|
disabled: store.isLoading,
|
||||||
|
}] : []),
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
icon: TrashIcon,
|
||||||
|
label: 'Effacer',
|
||||||
|
onClick: () => store.clearFiles(),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}));
|
||||||
|
|
||||||
const importAllFiles = async () => {
|
const importAllFiles = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -135,19 +114,6 @@ const retryFile = async (fileId) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const autoSelectMatches = () => {
|
|
||||||
store.autoSelectBestMatches();
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearAllFiles = () => {
|
|
||||||
if (confirm('Êtes-vous sûr de vouloir effacer tous les fichiers ?')) {
|
|
||||||
store.clearFiles();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// === LIFECYCLE ===
|
|
||||||
|
|
||||||
// Reset state when component unmounts
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
store.resetGlobalState();
|
store.resetGlobalState();
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user