init

frontend/src/pages/server/channel/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia'; // Import crucial
 import {useMessageStore} from '@/stores/message';
@@ -11,15 +11,15 @@ const messageStore = useMessageStore();
 const {messages, loading} = storeToRefs(messageStore);
 
 const newMessage = ref('');
+const channelId = computed(() => route.params.channelId as string);
 
 const sendMessage = async () => {
   if (!newMessage.value.trim()) return;
 
   const content = newMessage.value;
-  const channelId = route.params.id as string;
 
   try {
-    await messageStore.sendMessage(channelId, content);
+    await messageStore.sendMessage(channelId.value, content);
     newMessage.value = ''; // On vide le champ après succès
   } catch (e) {
     // Gérer l'erreur (ex: notification toast)
@@ -27,9 +27,8 @@ const sendMessage = async () => {
 };
 
 onMounted(() => {
-  const channelId = route.params.id as string;
   if (channelId) {
-    messageStore.fetchMessages(channelId);
+    messageStore.fetchMessages(channelId.value);
   }
 });
 </script>
@@ -48,14 +47,14 @@ onMounted(() => {
         >
           <template v-slot:prepend>
             <v-avatar color="grey-lighten-2" size="40">
-              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>
-              <v-icon v-else icon="mdi-account"></v-icon>
+              <!--              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>-->
+              <v-icon icon="mdi-account"></v-icon>
             </v-avatar>
           </template>
 
           <v-list-item-title class="d-flex align-center">
-            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user.name }}</span>
-            <span class="text-caption text-grey">{{ msg.timestamp }}</span>
+            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user_id }}</span>
+            <span class="text-caption text-grey">{{ msg.created_at }}</span>
           </v-list-item-title>
 
           <v-list-item-subtitle class="text-body-1 text-high-emphasis opacity-100">