Fix the appearance of comments

src/models/myUserModel.js

@@ -7,6 +7,7 @@ export default class MyUserModel
 {
     id = "";
     creatorAlias = "";
+    alias = null;
     firstName = "";
     lastName = "";
     userName = "";

src/models/storedDataUrlsModel.js

@@ -1,8 +1,8 @@
 export default class StoredDataUrlsModel
 {
-    bannerPictureUrl = "";
+    bannerPictureUrl = null;
-    profilePictureUrl = "";
+    profilePictureUrl = null;
-    websiteIconUrl = "";
+    websiteIconUrl = null;
 
     static createFromApiResult(apiResult){
         return Object.assign(new StoredDataUrlsModel(), apiResult)

src/views/contents/ContentCard.vue

@@ -79,10 +79,7 @@ const props = defineProps({
 const messages = reactive([]);
 
 function addMessage(newMessage) {
-  console.table(newMessage, 'test')
-  console.table(messages)
   messages.unshift(newMessage)
-  console.table(messages)
 }
 
 </script>

src/views/main/Header.vue

@@ -58,9 +58,8 @@
                  {{ currentUser.userName }}
                  </span>
               <img
-                  :src="currentUser.storedDataUrls.profilePictureUrl"
+                  :src="currentUser.storedDataUrls.profilePictureUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
                   alt="Profile Image"
-                  @error="handleProfilePictureError"
                   class="ml-2 rounded-full" style="width: 32px; height: 32px;">
             </v-btn>
           </template>
@@ -120,11 +119,6 @@ const searchQuery = ref("");
 const showSearch = ref(false);
 let currentUser = reactive(MyUserModel.getDefaultUser());
 const userStore = useUserStore();
-const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-
-const handleProfilePictureError = (event) => {
-  event.target.src = backupProfilePictureUrl;
-}
 
 const toggleSidebar = () => {
   eventBus.value.toggleSidebar();

src/views/messages/Message.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-column">
     <div class="flex flex-row p-1 items-center">
       <div class="px-2 content-center">
-        <img :src="message.portrait"
+        <img :src="message.profileImageUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
              alt="Profile Image"
              class="rounded-full"
              width="32px"
@@ -11,9 +11,21 @@
 
       <div class="p-2 flex-1">
         <div class="flex justify-between items-center">
+
           <div>
-            <span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
+             
-            <span class="text-sm font-sans text-gray-700">{{ time_ago(message.createdAt) }}</span>
+            <span class="font-semibold font-sans mr-2">
+              {{ message.createdByName }}
+            </span>
+
+            <v-tooltip :text="new Date(message.createdAt).toLocaleString()">
+              <template v-slot:activator="{ props }">
+                <span v-bind="props" class="text-sm-caption text-gray-700">
+                  {{ time_ago(message.createdAt) }}
+                </span>
+              </template>
+            </v-tooltip>
+
           </div>
           <v-menu>
             <template v-slot:activator="{ props }">

src/views/messages/MessageList.vue

@@ -6,11 +6,9 @@
                      class="bg-gray-300 rounded-md justify-items-center">
 
     <template v-for="(message, index) in messages" :key="index">
-      <Message
+      <message :message="message"
-          :message="message"
+               class="m-2 p-2 rounded-md bg-gray-100"
-          class="m-2 p-2 rounded-md bg-gray-100"
+      ></message>
-      >
-      </Message>
     </template>
 
     <template v-slot:load-more="{ props }">
@@ -79,11 +77,11 @@ async function load({done, page_size}) {
 
     if (response.status >= 200 && response.status < 300) {
 
-      const messageCount = response.data.length
+      const messageCount = response.data.messages.length
 
       if (messageCount > 0) {
-        messages.value.push(...response.data)
+        messages.value.push(...response.data.messages)
-        const [last_content] = response.data.slice(-1)
+        const [last_content] = response.data.messages.slice(-1)
         last_id = last_content.id
       }
 

src/views/messages/PostMessage.vue

@@ -5,7 +5,8 @@
     <div class="flex flex-row">
 
       <div class="mx-2 content-center">
-        <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+                
+        <img :src="profileUrl"
              alt="Profile Image"
              class="rounded-full"
              width="32px"
@@ -46,11 +47,12 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['message-posted']);
+const emit = defineEmits(['message-posted'])
 
-const client = useClient();
+const client = useClient()
-const value = ref("");
+const value = ref("")
-const user = useUserStore();
+const user = useUserStore()
+const profileUrl = ref(user.getCurrentUser().storedDataUrls.profilePictureUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png')
 
 const publish = async () => {
 
@@ -62,15 +64,21 @@ const publish = async () => {
           "subjectId": props.subjectId,
           "message": value.value
         })
+    
+    const currentUser = user.getCurrentUser()
     emit('message-posted',
         {
           "id": messageId,
           "subjectId": props.subjectId,
-          "createdBy": user.getCurrentUser().id,
+          "createdBy": currentUser.id,
+          "createdByName": currentUser.alias ?? `${currentUser.firstName} ${currentUser.lastName}`,
+          "createdByPortraitUrl": currentUser.storedDataUrls.profilePictureUrl,
           "createdAt": new Date(Date.now()).toISOString(),
           "value": value.value,
           parentId: null,
         })
+    
+    value.value = ''
   } catch (error) {
     console.error(`post api/message : ${error}`)
   }