From 6ad08403090105ec2e73fb18c41ba0f40bf51983 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 9 Aug 2024 15:50:36 -0400
Subject: [PATCH] Added Goback Button for ContentPage

---
 src/views/contents/ContentPage.vue | 45 ++++++++++++++++--------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/views/contents/ContentPage.vue b/src/views/contents/ContentPage.vue
index 26ac269..0523fcd 100644
--- a/src/views/contents/ContentPage.vue
+++ b/src/views/contents/ContentPage.vue
@@ -1,15 +1,21 @@
 <template>
-  <div class="flex h-screen">
+  <div class="flex h-[calc(100vh-120px)]">
+    <!-- Section Carousel (gauche) -->
+    <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
+      <!-- Bouton "X" positionné dans le coin supérieur gauche -->
+      <div class="absolute top-8 left-0">
+        <v-btn @click="goBack" variant="plain"
+               class="rounded-full bg-gray-800 text-white w-12 h-12 flex items-center justify-center">
+          <v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
+        </v-btn>
+      </div>
 
-    <!-- Carousel section (left) -->
-    <div class="flex-1 flex items-center justify-center bg-neutral-500">
       <v-carousel
           v-if="data?.urls && data.urls.length > 0"
           hide-delimiters
           :show-arrows="data.urls.length > 1"
           :show-indicators="data.urls.length > 1"
           class="w-full h-full flex items-center justify-center"
-          
       >
         <v-carousel-item
             v-for="url in data.urls"
@@ -21,39 +27,32 @@
       </v-carousel>
     </div>
 
-    <!-- Content details section (right) -->
-    <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto h-full">
-
-      <!-- Content details -->
+    <!-- Section Détails (droite) -->
+    <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto max-h-screen">
+      <!-- Détails du contenu -->
       <div class="border-b-2 p-6 font-sans space-y-2">
-        <div v-if="data && data.uri">
-          Uri: {{ data?.uri }}
+        <!-- Accéder à createdByName -->
+        <div v-if="data && data.createdByName">
+          Créé par: {{ data.createdByName }}
         </div>
         <div v-if="data && data.title" class="font-semibold">
-          Title: {{ data?.title }}
+          Titre: {{ data.title }}
         </div>
         <div v-if="data && data.description">
-          Description: {{ data?.description }}
-        </div>
-        <div v-if="data && data.createdAt">
-          Date: {{ data?.createdAt }}
-        </div>
-        <div v-if="data && data.createdBy">
-          Creator: {{ data?.createdBy }}
+          Description: {{ data.description }}
         </div>
       </div>
 
-      <!-- Comments Section -->
+      <!-- Section Commentaires -->
       <div class="border-b-2 p-6">
         <h2 class="font-sans font-semibold">Commentaires</h2>
         <MessageList :content-id="contentId"></MessageList>
       </div>
 
-      <!-- Post a new message -->
+      <!-- Poster un nouveau message -->
       <div class="border-b-2 p-6">
         <PostMessage :content-id="contentId"></PostMessage>
       </div>
-
     </div>
   </div>
 </template>
@@ -85,6 +84,10 @@ const fetchContentData = async (contentId) => {
   }
 };
 
+function goBack() {
+  window.history.go(-1);
+}
+
 onMounted(() => {
   fetchContentData(contentId.value);
 });