From b05bd98f63238caabb19213b8cb3bc42ee23fe47 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Thu, 16 Oct 2025 15:44:01 +0200
Subject: [PATCH] feat: affichage des cartes lors de l'analyse

---
 .../components/FileImportCard.vue             |  48 ++++----
 .../components/MangaMatchCard.vue             | 112 ++++++++++++++++++
 2 files changed, 137 insertions(+), 23 deletions(-)
 create mode 100644 assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue

diff --git a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
index 3d6290f..ec1c2ba 100644
--- a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
@@ -53,27 +53,24 @@
         <!-- Manga Selection -->
         <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-2">
-              Sélectionner un manga
+            <label class="block text-sm font-medium text-gray-700 mb-3">
+              Sélectionner un manga ({{ file.getMatches().length }} correspondance(s) trouvée(s))
             </label>
-            <select
-              :value="file.selectedManga?.id || ''"
-              @change="handleMangaSelection"
-              class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
-            >
-              <option value="">-- Choisir un manga --</option>
-              <option
-                v-for="manga in file.getMatches()"
-                :key="manga.id"
-                :value="manga.id"
-              >
-                {{ manga.title }} (Score: {{ manga.matchScore }})
-              </option>
-            </select>
+
+            <!-- Matches Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              <MangaMatchCard
+                v-for="match in sortedMatches"
+                :key="match.id"
+                :match="match"
+                :is-selected="file.selectedManga?.id === match.id"
+                @select-match="handleMangaSelection"
+              />
+            </div>
           </div>
 
           <!-- Selected Manga Preview -->
-          <div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-gray-50 rounded-md">
+          <div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
             <img
               v-if="file.selectedManga.thumbnailUrl"
               :src="file.selectedManga.thumbnailUrl"
@@ -83,6 +80,7 @@
             <div class="flex-1">
               <p class="font-medium text-gray-900">{{ file.selectedManga.title }}</p>
               <p class="text-sm text-gray-500">{{ file.selectedManga.slug }}</p>
+              <p class="text-xs text-blue-600 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
             </div>
           </div>
 
@@ -178,6 +176,8 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import MangaMatchCard from './MangaMatchCard.vue';
 import StatusBadge from './StatusBadge.vue';
 
 const props = defineProps({
@@ -204,12 +204,14 @@ const emit = defineEmits([
   'remove-file'
 ]);
 
-const handleMangaSelection = (event) => {
-  const mangaId = event.target.value;
-  if (mangaId) {
-    const selectedManga = props.file.getMatches().find(m => m.id === mangaId);
-    emit('manga-selected', selectedManga);
-  }
+// Computed property to get sorted matches
+const sortedMatches = computed(() => {
+  const matches = props.file.getMatches();
+  return matches.sort((a, b) => b.matchScore - a.matchScore);
+});
+
+const handleMangaSelection = (selectedManga) => {
+  emit('manga-selected', selectedManga);
 };
 
 const handleChapterNumberInput = (event) => {
diff --git a/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
new file mode 100644
index 0000000..6a72b0f
--- /dev/null
+++ b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md"
+    :class="{
+      'border-blue-500 bg-blue-50': isSelected,
+      'border-gray-200 hover:border-gray-300': !isSelected
+    }"
+    @click="$emit('select-match', match)"
+  >
+    <!-- Match Header with Score -->
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center space-x-2">
+        <div
+          class="w-3 h-3 rounded-full"
+          :class="{
+            'bg-blue-500': isSelected,
+            'bg-gray-300': !isSelected
+          }"
+        ></div>
+        <span class="text-sm font-medium text-gray-700">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 rounded border flex items-center justify-center"
+        >
+          <svg class="w-8 h-8 text-gray-400" 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 truncate" :title="match.title">
+          {{ match.title }}
+        </h4>
+        <p class="text-xs text-gray-500 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">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 text-gray-600 px-2 py-1 rounded"
+            >
+              {{ altSlug }}
+            </span>
+            <span
+              v-if="match.alternativeSlugs.length > 2"
+              class="text-xs text-gray-400"
+            >
+              +{{ match.alternativeSlugs.length - 2 }} autres
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Score Bar -->
+    <div class="mt-3">
+      <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
+        <span>Correspondance</span>
+        <span>{{ match.matchScore }}%</span>
+      </div>
+      <div class="w-full bg-gray-200 rounded-full h-2">
+        <div
+          class="h-2 rounded-full transition-all duration-300"
+          :class="{
+            'bg-blue-500': isSelected,
+            'bg-gray-400': !isSelected
+          }"
+          :style="{ width: match.matchScore + '%' }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  match: {
+    type: Object,
+    required: true
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['select-match']);
+</script>