From 7e0e27c2b60860e5e471eac0ba38cc110f846f04 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Fri, 7 Apr 2023 00:50:59 +0200
Subject: [PATCH] show members in a room

---
 back/db/api.ts                                | 13 ++++++----
 back/db/structureV2.sql                       |  1 +
 front/src/store/models/model.ts               |  1 +
 front/src/store/store.ts                      |  5 ----
 front/src/views/room/Header.vue               | 24 +++++++++++++++----
 front/src/views/room/MemberList.vue           | 12 ++++++----
 front/src/views/room/Message.vue              |  3 +--
 front/src/views/sidebar/rooms/Room.vue        |  2 +-
 .../views/sidebar/rooms/threads/Thread.vue    |  1 +
 9 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/back/db/api.ts b/back/db/api.ts
index 31ea219..4940f41 100644
--- a/back/db/api.ts
+++ b/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
-        FROM app_room_member
-        INNER JOIN address ON address.address_id = app_room_member.member_id
-        WHERE app_room_member.room_id = ?
+            address.email AS email,
+            field_name.field_name as type
+        FROM app_room
+        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);
diff --git a/back/db/structureV2.sql b/back/db/structureV2.sql
index ce49f64..e87342c 100644
--- a/back/db/structureV2.sql
+++ b/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,
diff --git a/front/src/store/models/model.ts b/front/src/store/models/model.ts
index b05a1ae..eb3dfae 100644
--- a/front/src/store/models/model.ts
+++ b/front/src/store/models/model.ts
@@ -43,4 +43,5 @@ export interface Address {
     id: number;
     name: string | null;
     email: string;
+    type: string;
 }
diff --git a/front/src/store/store.ts b/front/src/store/store.ts
index 8223272..3e6c54b 100644
--- a/front/src/store/store.ts
+++ b/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 });
         },
diff --git a/front/src/views/room/Header.vue b/front/src/views/room/Header.vue
index 60f88a1..4540cbf 100644
--- a/front/src/views/room/Header.vue
+++ b/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;
 }
diff --git a/front/src/views/room/MemberList.vue b/front/src/views/room/MemberList.vue
index bbe8d2f..0df9c32 100644
--- a/front/src/views/room/MemberList.vue
+++ b/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>
+<style scoped></style>
diff --git a/front/src/views/room/Message.vue b/front/src/views/room/Message.vue
index 6c08d97..bf12438 100644
--- a/front/src/views/room/Message.vue
+++ b/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);
 
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index a33ce0c..cad338f 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/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";
 
diff --git a/front/src/views/sidebar/rooms/threads/Thread.vue b/front/src/views/sidebar/rooms/threads/Thread.vue
index 59b5b83..cc9c659 100644
--- a/front/src/views/sidebar/rooms/threads/Thread.vue
+++ b/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,