add thread in api and front

back/db/api.ts

@@ -30,24 +30,24 @@ export async function getAccounts() {
 export async function getRooms(mailboxId) {
     const query = `
         SELECT 
-            app_room.room_id AS id,
-            app_room.room_name AS roomName,
+            room.room_id AS id,
+            room.room_name AS roomName,
             address.email AS user,
-            app_room.owner_id AS userId,
-            app_room.notSeen,
-            app_room.room_type AS roomType,
-            mailbox_message.mailbox_id AS mailboxId
-            FROM app_room 
-            INNER JOIN message
-            INNER JOIN mailbox_message
-            INNER JOIN address
+            room.owner_id AS userId,
+            room.notSeen,
+            room.room_type AS roomType,
+            mailbox_message.mailbox_id AS mailboxId,
+            app_thread.parent_id
+        FROM app_room room
+        INNER JOIN message ON message.message_id = room.message_id
+        INNER JOIN mailbox_message ON mailbox_message.message_id = message.message_id
+        INNER JOIN address ON address.address_id = room.owner_id
+        LEFT JOIN app_thread ON room.room_id = app_thread.room_id
+
         WHERE 
-            message.message_id = app_room.message_id AND
-            mailbox_message.mailbox_id = ? AND 
-            mailbox_message.message_id = message.message_id AND
-            address.address_id = app_room.owner_id
-        ORDER BY app_room.lastUpdate DESC
-        `;
+            mailbox_message.mailbox_id = ? 
+        ORDER BY room.lastUpdate DESC
+    `;
     const values = [mailboxId];
     return await execQueryAsync(query, values);
 }

back/mails/saveMessage.ts

@@ -145,6 +145,8 @@ export default class RegisterMessageInApp {
             await this.incrementNotSeen(roomId);
             if (isThread) {
                 await getThreadInfoOnId(roomId).then(async (res) => {
+                    let root_id = res[0].root_id;
+                    if (root_id == undefined) root_id = res[0].room_id;
                     await this.incrementNotSeen(res[0].root_id);
                 });
             }

front/src/store/models/model.ts

@@ -26,7 +26,7 @@ export interface Room {
     unseen: number;
     messages: Message[];
     messageLoading: LoadingState;
-    threads: object[];
+    threadIds: number[];
 }
 
 export interface Account {

front/src/store/store.ts

@@ -11,7 +11,8 @@ interface RoomFromBack {
     mailboxId: number;
     user: string;
     userId: number;
-    // unseen: number;
+    unseen: number;
+    parent_id?: number;
     // todo thread
 }
 
@@ -20,6 +21,8 @@ interface AccountFromBack {
     email: string;
 }
 
+const buffer: RoomFromBack[] = [];
+
 function createRoom(options: RoomFromBack): Room {
     return {
         id: options.id,
@@ -31,7 +34,7 @@ function createRoom(options: RoomFromBack): Room {
         unseen: 0,
         messages: [],
         messageLoading: LoadingState.notLoaded,
-        threads: [],
+        threadIds: [],
     };
 }
 
@@ -48,7 +51,7 @@ export interface State {
 
 const store = createStore<State>({
     state: {
-        rooms: [createRoom({ id: 12, userId: 1, user: "user", roomName: "room name", mailboxId: 2, roomType: 1 })],
+        rooms: [], //createRoom({ id: 12, userId: 1, user: "user", roomName: "room name", mailboxId: 2, roomType: 1 })
         accounts: [{ id: 0, email: "All", fetched: false }],
         addresses: [],
         activeAccount: 0,
@@ -84,8 +87,21 @@ const store = createStore<State>({
         addRooms(state, payload) {
             // todo add if not exist
             payload.rooms.forEach((room: RoomFromBack) => {
+                if (room.roomType == RoomType.THREAD) {
+                    buffer.push(room);
+                }
                 state.rooms.push(createRoom(room));
             });
+
+            buffer.forEach((thread) => {
+                const parentRoom = state.rooms.find((room) => room.id == thread.parent_id); // todo debug parent_id to root_id
+                if (parentRoom) {
+                    parentRoom.threadIds.push(thread.id);
+                    console.log(parentRoom);
+                } else {
+                    console.log("yep...");
+                }
+            });
         },
         addMessages(state, payload) {
             // todo add if not exist
@@ -105,7 +121,9 @@ const store = createStore<State>({
     getters: {
         rooms: (state) => (): Room[] => {
             if (state.activeAccount === 0) return state.rooms;
-            return state.rooms.filter((room) => room.mailboxId == state.activeAccount);
+            return state.rooms.filter(
+                (room) => room.mailboxId == state.activeAccount && room.roomType != RoomType.THREAD,
+            );
         },
         room:
             (state) =>

front/src/views/room/Message.vue

@@ -105,6 +105,7 @@ iframe {
     overflow-y: auto;
     max-height: 300px;
     width: 100%;
+    padding: 2px 10px;
     max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);
 }

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

@@ -14,9 +14,10 @@ const props = defineProps({
         userId: Number,
         notSeen: Number,
         mailboxId: Number,
-        threads: [Object],
+        threadIds: [Number],
     },
 });
+console.log(props.data.threadIds);
 
 const router = useRouter();
 </script>
@@ -37,7 +38,7 @@ const router = useRouter();
                 ><template v-slot:body>{{ props.data.unseen }}</template>
             </Badge>
         </div>
-        <ThreadList :threads="props.data.threads" />
+        <ThreadList :threadIds="props.data.threadIds" />
     </div>
 </template>
 

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

@@ -1,15 +1,23 @@
 <script setup>
+import store from "@/store/store";
 import { defineProps } from "vue";
+import { useRouter } from "vue-router";
 
 const props = defineProps({
-    thread: Object,
+    threadId: Number,
 });
+const room = store.getters.room(props.threadId);
 console.log(props.thread);
+const router = useRouter();
 </script>
 
 <template>
-    <div class="room">
-        {{ props.thread.roomName }}
+    <div
+        @click="router.push(`/${props.threadId}`)"
+        v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
+        class="room"
+    >
+        {{ room.roomName }}
     </div>
 </template>
 

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

@@ -1,12 +1,12 @@
 <script setup>
 import Thread from "./Thread.vue";
 import { defineProps } from "vue";
-const props = defineProps({ threads: [Object] });
+const props = defineProps({ threadIds: [Number] });
 </script>
 
 <template>
     <div>
-        <Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
+        <Thread v-for="(threadId, index) in props.threadIds" :key="index" :threadId="threadId" />
     </div>
 </template>