show members in a room

back/db/api.ts

@@ -100,13 +100,16 @@ export async function getMessages(roomId) {
 
 export async function getMembers(roomId) {
     const query = `
-        SELECT 
+        SELECT
             address.address_id AS id,
             address.address_name AS name,
-            address.email AS email
+            address.email AS email,
-        FROM app_room_member
+            field_name.field_name as type
-        INNER JOIN address ON address.address_id = app_room_member.member_id
+        FROM app_room
-        WHERE app_room_member.room_id = ?
+        INNER JOIN address_field ON address_field.message_id = app_room.message_id
+        INNER JOIN address ON address.address_id = address_field.address_id
+        INNER JOIN field_name ON field_name.field_id = address_field.field_id
+        WHERE app_room.room_id = ?;
     `;
     const values = [roomId];
     return await execQueryAsync(query, values);

back/db/structureV2.sql

@@ -153,6 +153,7 @@ CREATE TABLE app_room_message (
 );
 
 -- 14
+-- todo needed ?
 CREATE TABLE app_room_member (
   room_id        INT NOT NULL,
   member_id       INT NOT NULL,

front/src/store/models/model.ts

@@ -43,4 +43,5 @@ export interface Address {
     id: number;
     name: string | null;
     email: string;
+    type: string;
 }

front/src/store/store.ts

@@ -64,13 +64,8 @@ const store = createStore<State>({
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
-            console.log("set active")
             // todo load room on load page
-            // let room;
-            console.log(payload)
-            console.log(state.rooms)
             const room = state.rooms.find((room) => room.id == payload);
-            console.log(room)
             if (!room) return;
             store.dispatch("fetchMessages", { roomId: payload, room: room });
         },

front/src/views/room/Header.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import Badge from "@/components/Badge.vue";
-import { RoomType } from "@/store/models/model";
+import { RoomType, Address } from "@/store/models/model";
+import MemberList from "./MemberList.vue";
 
 const props = defineProps({ id: Number, room: Object });
 
 const roomTitle = () => {
-    const type =  props.room?.roomType;
+    const type = props.room?.roomType;
     if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
-        return  props.room?.user;
+        return props.room?.user;
     }
-    return  props.room?.roomName;
+    return props.room?.roomName;
 };
+
+const to = () => props.room?.members.filter((member: Address) => member.type == "to");
+const cc = () => props.room?.members.filter((member: Address) => member.type == "cc");
 </script>
 
 <template>
@@ -23,20 +27,30 @@ const roomTitle = () => {
             </div>
             <div class="action">action: threads message important</div>
         </div>
+        <div class="members" v-if="room?.roomType != RoomType.DM">
+            <MemberList v-if="to()?.length > 0" type="to" :members="to()" />
+            <MemberList v-if="cc()?.length > 0" type="cc" :members="cc()" />
+        </div>
     </div>
 </template>
 
 <style scoped>
+.main {
+    border-bottom: 1px solid #505050;
+}
 .context {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
     border-bottom: 1px solid #505050;
+    align-items: center;
     width: 100%;
     height: 35px;
 }
 
+.members {
+}
+
 .infos {
     margin-left: 15px;
 }

front/src/views/room/MemberList.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import { Address } from "@/store/models/model";
 import { defineProps } from "vue";
 
 const props = defineProps({ type: String, members: Object });
-
+let emails = "";
+props.members?.forEach((member: Address) => {
+    emails += member.email + "; ";
+});
 </script>
 
 <template>
     <div class="main">
-        
+        {{ props.type }}:
+        {{ emails }}
     </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

front/src/views/room/Message.vue

@@ -3,7 +3,6 @@ import { defineProps, onMounted, ref, watch } from "vue";
 import { decodeEmojis } from "../../utils/string";
 import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
-import store from "@/store/store";
 
 const props = defineProps({
     data: {
@@ -12,7 +11,7 @@ const props = defineProps({
         content: String,
         date: String,
     },
-    members: Array
+    members: Array,
 });
 const iframe = ref(null);
 

front/src/views/sidebar/rooms/Room.vue

@@ -2,7 +2,7 @@
 import { useRouter } from "vue-router";
 import { defineProps } from "vue";
 import BaseAvatar from "../../avatars/BaseAvatar.vue";
-import Badge from "../../../components/Badge.vue";
+import Badge from "@/components/Badge.vue";
 import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
 

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -2,6 +2,7 @@
 import store from "@/store/store";
 import { defineProps } from "vue";
 import { useRouter } from "vue-router";
+import Badge from "@/components/Badge.vue";
 
 const props = defineProps({
     threadId: Number,