From 13f6bc73ab0e9fd43e49adf92f56b364bdadbba9 Mon Sep 17 00:00:00 2001
From: Jet Li <jetli@freeleaps.com>
Date: Sun, 4 Aug 2024 17:23:49 -0700
Subject: [PATCH] Adding prefix showing who sent the last message

---
 frontend/src/pages/user/messages/Home.vue | 53 +++++++++--------------
 1 file changed, 20 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/user/messages/Home.vue b/frontend/src/pages/user/messages/Home.vue
index 23da73e..e622c50 100644
--- a/frontend/src/pages/user/messages/Home.vue
+++ b/frontend/src/pages/user/messages/Home.vue
@@ -3,15 +3,9 @@
     <div class="message-hub-conainter">
       <template v-if="!receiver_id">
         <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
-          <div
-            v-for="(conversation, index) in conversations"
-            :key="index"
-            class="conversation-container"
-            :class="{
-              selected: selConversation?.id === conversation?.id
-            }"
-            @click="selectConversation(conversation)"
-          >
+          <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
+            selected: selConversation?.id === conversation?.id
+          }" @click="selectConversation(conversation)">
             <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
             <div class="conversation-summary-container">
               <div class="conversation-summary-header-container">
@@ -23,39 +17,27 @@
                 }}</span>
               </div>
               <div class="conversation-summary-highlight-container">
-                {{ conversation.last_message?.message_body }}
+                {{ getSenderName(conversation.last_message) }} {{ conversation.last_message?.message_body }}
               </div>
             </div>
           </div>
         </div>
-        <div
-          v-if="!conversations || conversations.length == 0"
-          class="conversation-list-empty-container"
-        >
+        <div v-if="!conversations || conversations.length == 0" class="conversation-list-empty-container">
           {{ $t('Empty conversation') }}
         </div>
       </template>
       <div class="message-panel-container">
         <div v-if="messages && messages.length > 0" class="message-thread-container">
-          <div
-            v-for="(item, index) in messages"
-            :key="index"
-            class="message-item-container"
-            :class="item.sender_id == userIdentityNote ? 'me' : ''"
-          >
+          <div v-for="(item, index) in messages" :key="index" class="message-item-container"
+            :class="item.sender_id == userIdentityNote ? 'me' : ''">
             <div class="message-item-header-container">
-              <img
-                class="message-item-sender-portrait"
-                alt="user portrait"
-                src="@/assets/profile.png"
-              />
+              <img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
               <span class="message-item-sender-fullname">
                 {{ item.sender_firstname }}
                 {{ item.sender_lastname }}
               </span>
               <span class="message-item-create-time">
-                {{ getDateFromFulltimeString(item.create_time) }}</span
-              >
+                {{ getDateFromFulltimeString(item.create_time) }}</span>
             </div>
             <div class="message-item-message-body">{{ item.message_body }}</div>
           </div>
@@ -65,12 +47,8 @@
         </div>
         <div class="message-writing-panel-container">
           <svg-icon icon="msg-enter" class-name="writing-message-enter" />
-          <input
-            class="writing-message-input"
-            type="text"
-            v-model="writtenMessage"
-            @keypress.enter="sendMessage(selConversation?.id)"
-          />
+          <input class="writing-message-input" type="text" v-model="writtenMessage"
+            @keypress.enter="sendMessage(selConversation?.id)" />
         </div>
       </div>
     </div>
@@ -187,6 +165,15 @@ export default {
     getDateFromFulltimeString(fulltime) {
       // FromJsonToHMDateString
       return DateUtils.FromJsonToDatetimeString(fulltime)
+    },
+    // TODO: Further improve, naive version of showing who sent last message
+    getSenderName(message) {
+      if (message != null) {
+        if (message.sender_id == this.mnx_getUserIdentity()) {
+          return "You:"
+        }
+      }
+      return ''
     }
   }
 }