add members in message modal

front/src/components/modals/MessageViewModal.vue

@@ -1,17 +1,42 @@
 <script setup lang="ts">
-import { Message } from "@/store/models/model";
-import { ref, watch, defineProps, PropType } from "vue";
+import { Address, Message, Room } from "@/store/models/model";
+import { ref, Ref, watch, defineProps, PropType } from "vue";
 import Content from "../structure/message/Content.vue";
 import Modal from "./Modal.vue";
+import MemberList from "@/views/room/MemberList.vue";
+import { removeDuplicates } from "@/utils/array";
 
-const props = defineProps({ messageId: { type: Number, require: true }, message: Object as PropType<Message> });
+const props = defineProps({
+    messageId: { type: Number, require: true },
+    message: Object as PropType<Message>,
+    room: Object as PropType<Room>,
+});
 
 const messageId = ref(-1);
+const fromA = ref<Address[]>([]);
+const toA = ref<Address[]>([]);
+const ccA = ref<Address[]>([]);
+
+const getAddr = (ids: string | undefined, addrs: Address[] | undefined, res: Ref<Address[]>) => {
+    res.value = [];
+    if (!ids || !addrs) return;
+    let idsClean = removeDuplicates(ids.split(","));
+    idsClean.forEach((id) => {
+        let addr = addrs.find((member) => member.id === parseInt(id));
+        if (addr) {
+            res.value.push(addr);
+        }
+    });
+};
+
 watch(
     () => props.messageId,
     (newMessageId: number | undefined) => {
         if (!newMessageId) return;
         messageId.value = newMessageId;
+        getAddr(props.message?.fromA, props.room?.members, fromA);
+        getAddr(props.message?.toA, props.room?.members, toA);
+        getAddr(props.message?.ccA, props.room?.members, ccA);
     },
 );
 </script>
@@ -20,6 +45,9 @@ watch(
     <div class="main">
         <Modal v-if="messageId != -1" @close-modal="() => $emit('close')">
             <template v-slot:body>
+                <MemberList type="from" :members="fromA" />
+                <MemberList type="to" :members="toA" />
+                <MemberList v-if="ccA.length > 0" type="cc" :members="ccA" />
                 <div>{{ props.message?.subject ?? "No Object" }}</div>
                 <Content type="large" :content="props.message?.content" class="content" />
             </template>

front/src/views/room/RoomView.vue

@@ -72,7 +72,12 @@ provide("room", room);
             />
         </div>
         <Composer v-if="shouldDisplayComposer() || true" />
-        <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
+        <MessageViewModal
+            :room="room"
+            :message="message"
+            :messageId="messageIdView"
+            @close="() => openMessageView(-1)"
+        />
         <!-- todo -->
         <!-- <ConfirmationModal /> -->
     </div>