From 77f05b287cc59bac9b94ad2154d5a67369154926 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Sun, 30 Mar 2025 17:18:37 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20du=20composant=20MangaList=20po?=
 =?UTF-8?q?ur=20afficher=20les=20mangas=20en=20mode=20liste=20et=20mise=20?=
 =?UTF-8?q?=C3=A0=20jour=20de=20HomePage=20pour=20int=C3=A9grer=20ce=20nou?=
 =?UTF-8?q?veau=20mode=20de=20vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presentation/components/MangaList.vue     | 67 +++++++++++++++++++
 .../manga/presentation/pages/HomePage.vue     | 12 ++--
 2 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 assets/vue/app/domain/manga/presentation/components/MangaList.vue

diff --git a/assets/vue/app/domain/manga/presentation/components/MangaList.vue b/assets/vue/app/domain/manga/presentation/components/MangaList.vue
new file mode 100644
index 0000000..bbcb8c5
--- /dev/null
+++ b/assets/vue/app/domain/manga/presentation/components/MangaList.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="space-y-4">
+        <div
+            v-for="manga in mangas"
+            :key="manga.id"
+            class="flex bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg p-4 space-x-4">
+            <!-- Cover Image -->
+            <div class="flex-shrink-0">
+                <img :src="manga.imageUrl || '/placeholder-cover.png'" alt="" class="h-48 w-32 object-cover rounded" />
+                <!-- TODO: Add placeholder image -->
+            </div>
+
+            <!-- Manga Info -->
+            <div class="flex-1 min-w-0">
+                <h3 class="text-lg leading-7 font-medium text-gray-900 dark:text-gray-100 truncate">{{
+                    manga.title
+                }}</h3>
+                <p v-if="manga.publicationYear" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{
+                    manga.publicationYear
+                }}</p>
+                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2 line-clamp-3">
+                    {{ manga.description }}
+                </p>
+                <p v-if="manga.createdAt" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
+                    Added: {{ formatDate(manga.createdAt) }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { defineProps } from 'vue';
+
+    const props = defineProps({
+        mangas: {
+            type: Array,
+            required: true
+        }
+    });
+
+    console.log(props.mangas);
+
+    const formatDate = dateString => {
+        if (!dateString) return '';
+        const options = { year: 'numeric', month: 'long', day: 'numeric' };
+        try {
+            return new Date(dateString).toLocaleDateString(undefined, options);
+        } catch (e) {
+            console.error('Error formatting date:', e);
+            return dateString; // Return original string if formatting fails
+        }
+    };
+</script>
+
+<style scoped>
+    /* Pour s'assurer que line-clamp fonctionne */
+    @supports (-webkit-line-clamp: 3) {
+        .line-clamp-3 {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+</style>
diff --git a/assets/vue/app/domain/manga/presentation/pages/HomePage.vue b/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
index 247fbb6..ad5cf6a 100644
--- a/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/HomePage.vue
@@ -2,7 +2,8 @@
     <div>
         <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
         <div class="container mx-auto px-4">
-            <MangaGrid :mangas="collection?.items || []" />
+            <MangaGrid v-if="viewMode === 'grid'" :mangas="collection?.items || []" />
+            <MangaList v-else-if="viewMode === 'list'" :mangas="collection?.items || []" />
             <div
                 v-if="isBackgroundLoading"
                 class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
@@ -13,11 +14,12 @@
 </template>
 
 <script setup>
-    import { onMounted } from 'vue';
+    import { onMounted, ref } from 'vue';
     import { useRouter } from 'vue-router';
     import { storeToRefs } from 'pinia';
     import { useMangaStore } from '../../application/store/mangaStore';
     import MangaGrid from '../components/MangaGrid.vue';
+    import MangaList from '../components/MangaList.vue';
     import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
     import {
         ArrowPathIcon,
@@ -38,6 +40,8 @@
         isBackgroundLoadingCollection: isBackgroundLoading
     } = storeToRefs(mangaStore);
 
+    const viewMode = ref('grid');
+
     onMounted(() => {
         mangaStore.loadCollection();
     });
@@ -60,8 +64,8 @@
                 type: 'dropdown',
                 label: 'View',
                 items: [
-                    { label: 'List', onClick: () => {} },
-                    { label: 'Grid', onClick: () => {} }
+                    { label: 'List', onClick: () => (viewMode.value = 'list') },
+                    { label: 'Grid', onClick: () => (viewMode.value = 'grid') }
                 ]
             },
             {