Add color to comments when there are messages.

src/views/messages/MessageList.vue

@@ -1,22 +1,17 @@
 <template>
-
-  <v-infinite-scroll :items="messages"
-                     :onLoad="load"
-                     mode="manual"
-                     class="justify-items-center">
-
+  <v-infinite-scroll
+      :items="messages"
+      :onLoad="load"
+      mode="manual"
+      class="justify-items-center"
+  >
     <template v-for="(message, index) in messages" :key="index">
-      <message :message="message"
-               class="border-b"
-      ></message>
+      <message :message="message" class="border-b"></message>
     </template>
 
     <template v-slot:load-more="{ props }">
-      <v-btn
-          size="small"
-          variant="outlined"
-          v-bind="props"
-      >Voir plus de commentaires
+      <v-btn size="small" variant="outlined" v-bind="props">
+        Voir plus de commentaires
       </v-btn>
     </template>
 
@@ -27,72 +22,71 @@
     <template v-slot:error>
       <v-alert type="error">{{ errorMessage }}</v-alert>
     </template>
-
   </v-infinite-scroll>
-
 </template>
 
 <script setup>
-
+import { ref, onBeforeMount } from 'vue';
+import { useClient } from '@/plugins/api.js';
 import Message from "@/views/messages/Message.vue";
 
-import {useClient} from '@/plugins/api.js';
-import {onBeforeMount, ref} from 'vue';
-
+const emit = defineEmits(['messages-found']);
 const props = defineProps({
   subjectId: {
     type: String,
-    required: true
+    required: true,
   },
   messages: {
-    default: []
-  }
+    type: Array,
+    default: () => [],
+  },
 });
 
-const errorMessage = ref()
-let last_id = null
+const errorMessage = ref(null);
+let last_id = null;
 const client = useClient();
 const messages = ref(props.messages);
 
 onBeforeMount(async () => {
-  if (props.subjectId == null) return
+  if (props.subjectId == null) return;
   await load({
     page_size: 2,
-    done: function (status) {
-    }
-  })
-})
+    done: function (status) {},
+  });
+});
 
-async function load({done, page_size}) {
-  if (props.subjectId == null) return
-  if (page_size === undefined) page_size = 10
+async function load({ done, page_size = 10 }) {
+  if (props.subjectId == null) return;
 
   try {
-    let uri = `/api/messages/${props.subjectId}?page_size=${page_size}`
-    if (last_id !== null) uri = uri + `&last_id=${last_id}`
-    
-    const response = await client.get(uri)
+    let uri = `/api/messages/${props.subjectId}?page_size=${page_size}`;
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`;
+
+    const response = await client.get(uri);
 
     if (response.status >= 200 && response.status < 300) {
-
-      const messageCount = response.data.messages.length
+      const messageCount = response.data.messages.length;
 
       if (messageCount > 0) {
-        messages.value.push(...response.data.messages)
-        const [last_content] = response.data.messages.slice(-1)
-        last_id = last_content.id
+        messages.value.push(...response.data.messages);
+        const [last_content] = response.data.messages.slice(-1);
+        last_id = last_content.id;
+    
+        if (messageCount > 0) {
+          emit('messages-found', true);
+        }
       }
 
-      if (messageCount < page_size)
-        done('empty')
-      else
-        done('ok')
+      if (messageCount < page_size) {
+        done('empty');
+      } else {
+        done('ok');
+      }
     }
   } catch (error) {
-    console.error("Failed to fetch posts", error);
-    errorMessage.value = error
-    done('error')
+    console.error("Failed to fetch messages", error);
+    errorMessage.value = error.message || "Failed to fetch messages";
+    done('error');
   }
 }
-
-</script>
+</script>