From 02640da2b0503566f81f69c29043a29d94dedb48 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 9 Aug 2024 01:22:18 -0400
Subject: [PATCH] Ui Added Like dislike and comments icons. I Hide the
 comments.

---
 src/views/contents/ContentCard.vue | 124 ++++++++++++++++++++++-------
 1 file changed, 96 insertions(+), 28 deletions(-)

diff --git a/src/views/contents/ContentCard.vue b/src/views/contents/ContentCard.vue
index cf2715e..4bb10ea 100644
--- a/src/views/contents/ContentCard.vue
+++ b/src/views/contents/ContentCard.vue
@@ -1,37 +1,53 @@
 <template>
   <div class="shadow-md rounded-2xl bg-gray-50 border custom-border">
     <div>
-      
       <v-card-title>
-        <div class="flex flex-row">
-        <div>
-          <img
-              :src="props.content.createdByPortraitUrl"
-              alt="Profile Image"
-              class="rounded-full"
-              width="32px"
-              height="32px">
-        </div>
-          
-          <div class="capitalize px-2">
-          {{ props.content.createdByName }}
+        <div class="flex flex-row justify-between items-center">
+          <div class="flex items-center">
+            <img
+                :src="props.content.createdByPortraitUrl"
+                alt="Profile Image"
+                class="rounded-full"
+                width="32px"
+                height="32px">
+            <div class="capitalize px-2">
+              {{ props.content.createdByName }}
+            </div>
+            <span class="text-subtitle-2 mt-1">
+              {{ time_ago(props.content.createdAt) }}
+            </span>
           </div>
-        <span class="text-subtitle-2 mt-1">
-          {{ time_ago(props.content.createdAt) }}
-        </span>
-       
+
+          <v-menu>
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="editContent">
+                <v-list-item-title>Modifier le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="deleteContent">
+                <v-list-item-title>Effacer le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportContent">
+                <v-list-item-title>Reporter le contenu</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </div>
         <div class="uppercase">
-        {{ props.content.title }}
+          {{ props.content.title }}
         </div>
         <div>
           {{ props.content.description }}
         </div>
-        
       </v-card-title>
-      
 
-      <v-carousel v-if="hasUrls" hide-delimiter-background show-arrows="hover">
+      <router-link :to="'content/' + props?.content?.id">
+      </router-link>
+      <v-carousel hide-delimiters v-if="hasUrls" :show-arrows="props.content.urls.length > 1" :show-indicators="props.content.urls.length > 1">
         <v-carousel-item
             v-for="url in props.content.urls"
             :key="url"
@@ -43,12 +59,29 @@
     </div>
 
     <div class="px-4">
-      <div>
+      <div class="flex justify-around py-2">
+        <v-btn variant="plain" icon @click="likeContent">
+          <v-icon>mdi-thumb-up-outline</v-icon>
+        </v-btn>
+        <v-btn variant="plain" icon @click="dislikeContent">
+          <v-icon>mdi-thumb-down-outline</v-icon>
+        </v-btn>
+        <v-btn
+            :class="{'comment-active': hasComments}"
+            variant="plain"
+            icon
+            @click="toggleComments"
+        >
+          <v-icon>mdi-comment-outline</v-icon>
+        </v-btn>
+      </div>
+   
+      <div :class="{'hidden': !commentsVisible}">
         <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
         <message-list :subject-id="props.content.id" :messages="messages"></message-list>
       </div>
 
-      <div class="py-2">
+      <div  class="py-2">
         <post-message :subject-id="props.content.id" @message-posted="addMessage"></post-message>
       </div>
     </div>
@@ -56,8 +89,8 @@
 </template>
 
 <script setup>
-import {computed, reactive} from 'vue';
-import {time_ago} from "@/internal_time_ago.js";
+import { computed, ref, onMounted } from 'vue';
+import { time_ago } from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
 import YoutubePlayer from './YoutubePlayer.vue';
@@ -71,11 +104,26 @@ const props = defineProps({
 });
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
+const commentsVisible = ref(false);
+const messages = ref([]); 
 
-const messages = reactive([]);
+// Propriété calculée pour vérifier s'il y a des commentaires
+const hasComments = computed(() => messages.value.length > 0);
 
 function addMessage(newMessage) {
-  messages.unshift(newMessage);
+  messages.value.unshift(newMessage);
+}
+
+function toggleComments() {
+  commentsVisible.value = !commentsVisible.value;
+}
+
+function likeContent() {
+  console.log('Content liked');
+}
+
+function dislikeContent() {
+  console.log('Content disliked');
 }
 
 function getComponent(url) {
@@ -85,6 +133,18 @@ function getComponent(url) {
     return ImageViewer;
   }
 }
+
+function editContent() {
+  console.log('Modifier le contenu');
+}
+
+function deleteContent() {
+  console.log('Effacer le contenu');
+}
+
+function reportContent() {
+  console.log('Reporter le contenu');
+}
 </script>
 
 <style>
@@ -102,6 +162,14 @@ function getComponent(url) {
 }
 
 .custom-border {
-  border-color: #EAEBEC; 
+  border-color: #EAEBEC;
+}
+
+.hidden {
+  display: none;
+}
+
+.comment-active-v-icon {
+  color: #DB1AAA;
 }
 </style>