load message in front

front/src/store/models/Room.js

@@ -0,0 +1,13 @@
+export default class Room {
+    constructor(id, user, userId, roomName, mailboxId) {
+        this.id = id;
+        this.user = user;
+        this.userId = userId;
+        this.roomName = roomName;
+        this.mailboxId = mailboxId;
+
+        this.messages = [];
+        this.messagesFetched = false;
+        this.threads = [];
+    }
+}

front/src/store/store.js

@@ -1,42 +1,19 @@
 import API from "@/services/imapAPI";
 import { createStore } from "vuex";
+import Room from "./models/Room";
 
 const store = createStore({
     state() {
         return {
             rooms: [
-                {
-                    id: 0,
-                    user: "clemnce",
-                    userId: 0,
-                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-                    mailboxId: 1,
-                },
-                {
-                    id: 1,
-                    user: "juliette",
-                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-                    mailboxId: 1,
-                },
-                {
-                    id: 2,
-                    user: "jean",
-                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-                    mailboxId: 2,
-                },
-                {
-                    id: 3,
-                    user: "luc",
-                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-                    mailboxId: 2,
-                },
-            ],
-            messages: [
-
+                new Room(1, "clemence", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
+                new Room(2, "laurance", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 2),
+                new Room(3, "mathilde", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
             ],
+            messages: [],
             mailboxes: [],
             activeMailbox: 0,
-            activeRoom: 0
+            activeRoom: 0,
         };
     },
     mutations: {
@@ -48,16 +25,18 @@ const store = createStore({
             const mailbox = state.mailboxes.find((mailbox) => mailbox.id == payload);
             // todo fetched mailbox all
             if (mailbox?.fetched == false) {
-                API.getRooms(payload).then((res) => {
-                    // todo add if not exist
-                    mailbox.fetched = true;
-                    res.data.forEach((room) => {
-                        room.fetched = false;
-                        state.rooms.push(room);
+                API.getRooms(payload)
+                    .then((res) => {
+                        // todo add if not exist
+                        console.log(res.data)
+                        mailbox.fetched = true;
+                        res.data.forEach((room) => {
+                            state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
+                        });
+                    })
+                    .catch((err) => {
+                        console.log(err);
                     });
-                }).catch((err) => {
-                    console.log(err)
-                });
             }
         },
         setActiveRoom(state, payload) {
@@ -66,24 +45,35 @@ const store = createStore({
             // fetch messages for this room if not already fetched
             const room = state.rooms.find((room) => room.id == payload);
             if (!room || room?.fetched == false) {
-                console.log("add messages")
-                API.getMessages(payload).then((res) => {
-                    // todo add if not exist
-                    room.fetched = true;
-                    res.data.forEach((msg) => {
-                        state.messages.push(msg);
+                console.log("add messages");
+                API.getMessages(payload)
+                    .then((res) => {
+                        // todo add if not exist
+                        room.fetched = true;
+                        res.data.forEach((msg) => {
+                            state.messages.push(msg);
+                        });
+                    })
+                    .catch((err) => {
+                        console.log(err);
                     });
-                }).catch((err) => {
-                    console.log(err)
-                });
             }
         },
         addMailboxes(state, payload) {
+            console.log(payload)
             payload.forEach((mailbox) => {
                 mailbox.fetched = false;
                 state.mailboxes.push(mailbox);
             });
         },
+        addMessages(state, payload) {
+            const room = state.rooms.find((room) => room.id == payload.roomId);
+            payload.messages.forEach((message) => {
+                room.messages.push(message);
+            });
+            room.messagesFetched = true;
+            console.log(room.messages)
+        },
     },
     getters: {
         rooms: (state) => () => {
@@ -91,16 +81,16 @@ const store = createStore({
             return state.rooms.filter((room) => room.mailboxId == state.activeMailbox);
         },
         messages: (state) => (roomId) => {
-            const room = state.rooms.find((room) => room.id === roomId);
-            if (room?.fetched === false) {
-                console.log("ok")
+            const room = state.rooms.find((room) => room.id == roomId);
+            if (!room.messagesFetched) {
+                console.log("fetched Messages")
+                store.dispatch("fetchMessages", { roomId: room.id });
             }
-            return [1, 2];
-        }
+            return room.messages;
+        },
     },
     actions: {
-        async fetchMailboxes(context) {
-            console.log("add mailboxes");
+        fetchMailboxes: async (context) => {
             API.getMailboxes()
                 .then((res) => {
                     context.commit("addMailboxes", res.data);
@@ -109,8 +99,15 @@ const store = createStore({
                     console.log(err);
                 });
         },
-        async fetchMessages(context) {
-            console.log(context)
+        fetchMessages: async (context, data) => {
+            API.getMessages(data.roomId)
+                .then((res) => {
+                    console.log(res.data)
+                    context.commit("addMessages", { messages: res.data, roomId: data.roomId });
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
         },
     },
 });

front/src/views/room/Header.vue

@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 #main {
-    background-color: blue;
+    border-bottom: 1px solid #505050;
     width: 100%;
     height: 51px;
 }

front/src/views/room/Message.vue

@@ -1,30 +1,72 @@
 <script setup>
-const data = {
-    html: "<div dir=\"ltr\">new content<br><div><br><div class=\"gmail_quote\"><div dir=\"ltr\" class=\"gmail_attr\">---------- Forwarded message ---------<br>De : <b class=\"gmail_sendername\" dir=\"auto\">Ulysse Carlier</b> <span dir=\"auto\">&lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;</span><br>Date: ven. 10 mars 2023 à 14:52<br>Subject: message to transfer<br>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;<br></div><br><br><div dir=\"ltr\">content to transfer<br></div>\n</div></div></div>\n",
-    text: "new content\n\n---------- Forwarded message ---------\nDe : Ulysse Carlier <carlierulysse@gmail.com>\nDate: ven. 10 mars 2023 à 14:52\nSubject: message to transfer\nTo: Hugueprime M <hugueprime@gmail.com>\n\n\ncontent to transfer\n",
-    textAsHtml: "<p>new content</p><p>---------- Forwarded message ---------<br/>De : Ulysse Carlier &lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;<br/>Date: ven. 10 mars 2023 &agrave; 14:52<br/>Subject: message to transfer<br/>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;</p><p>content to transfer</p>",
-    subject: "Fwd: message to transfer",
-    references: "<CAAGJdR0i=4w1i2Nb9=zx5bCPqkR+2eUCs=_qbXTSzugZu4EXFQ@mail.gmail.com>",
-    date: "2023-03-10T13:52:21.000Z",
-}
+import { defineProps } from "vue";
+
+const props = defineProps({ data: Object });
+console.log(props.data.date);
+const date = new Date(props.data.date);
+console.log(date);
 </script>
-        <!-- to if to is more than me
+<!-- to if to is more than me
         cc -->
-        <!-- object (channel only)
+<!-- object (channel only)
         content
         attachments -->
 <template>
     <div class="message">
-        <!-- <div v-html="data.html"></div> -->
-        <!-- <div v-html="data.text"></div> -->
-        <div></div>
-        <div v-html="data.textAsHtml"></div>
+        <div id="context">
+            <div class="left" id="profile">Carrefour@emailing .carrefor.fr "carrefour"</div>
+            <div class="middle">{{ props.data.subject }}</div>
+            <div class="right" id="date">
+                {{
+                    date.toLocaleString("en-GB", {
+                        weekday: "short",
+                        year: "numeric",
+                        month: "2-digit",
+                        day: "2-digit",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        timezone: "UTC+1",
+                    })
+                }}
+            </div>
+        </div>
+        <div id="content">
+            <div v-html="props.data.content"></div>
+        </div>
     </div>
 </template>
 
 <style scoped>
 .message {
-    width: 100%;
+    width: auto;
     border: white 1px solid;
+    padding: 10px;
+    margin: 5px;
+}
+
+#context {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#content {
+    overflow: auto;
+    max-height: 300px;
+    width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
+}
+
+.left,
+.right {
+    display: flex;
+    align-items: center;
+}
+
+.middle {
+    margin: 0 10px;
+    flex: 1;
+    align-self: center;
+    display: contents;
 }
 </style>

front/src/views/room/RoomView.vue

@@ -14,7 +14,8 @@ onBeforeMount(async () => {
     console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
     let room = store.state.rooms.find((room) => room.id === id);
     if (!room || room?.fetched === false) {
-        await store.dispatch("fetchMessages");
+        // todo
+        // await store.dispatch("fetchMessages", );
     }
     store.commit("setActiveRoom", id);
 });
@@ -28,20 +29,49 @@ onBeforeRouteUpdate(async (to, from) => {
 </script>
 
 <template>
-    <div>
+    <div id="main">
         <Header></Header>
-        <div>
-            <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
-            <b>{{ id }}</b>
-            {{ messages.length }}
+        <div id="RoomViewBody">
+            <div class="content">
+                <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
+                <b>{{ id }}</b>
+                {{ messages.length }}
+            </div>
+            <div id="composer">COMPOSER</div>
         </div>
     </div>
 </template>
 
 <style scoped>
-div {
+#main {
     background-color: #1d1d23;
     color: white;
     width: 100%;
 }
+
+#RoomViewBody {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#composer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding-top: 10px;
+
+    /* todo composer */
+    height: 35px;
+    background-color: red;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    margin-bottom: 100px;
+}
+
+
 </style>