display mail in iframe, add design for thread and unseen

front/package.json

@@ -12,6 +12,7 @@
     "@vueuse/core": "^9.13.0",
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
+    "dompurify": "^3.0.1",
     "vue": "^3.2.13",
     "vue-router": "^4.1.6",
     "vuex": "^4.0.2"

front/src/components/Badge.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="wrapper">
+        <slot class="badge" name="body">
+            0
+        </slot>
+    </div>
+</template>
+
+<style scoped>
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #4d5970;
+    height: 1.6rem;
+    width: 1.6rem;
+    min-width: 1.6rem;
+    min-height: 1.6rem;
+    border-radius: 1.6rem;
+}
+
+.badge {
+    color: #fff;
+    font-size: 1.1rem;
+    line-height: 1.4rem;
+}
+
+</style>

front/src/store/models/Room.js

@@ -1,13 +1,23 @@
 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;
+    constructor(room, thread) {
+        this.id = room.id;
+        this.user = room.user;
+        this.userId = room.userId;
+        this.roomName = room.roomName;
+        this.mailboxId = room.mailboxId;
+        this.unseen = room.unseen;
 
         this.messages = [];
         this.messagesFetched = false;
-        this.threads = [];
+        
+        if (!thread) {
+            this.threads = [
+                new Room({id:12, user: this.user, roomName: "thread 1", mailbboxId:this.mailboxId}, true),
+                new Room({id:12, user: this.user, roomName: "thread 1", mailbboxId:this.mailboxId}, true),
+                new Room({id:12, user: this.user, roomName: "thread 1", mailbboxId:this.mailboxId}, true),
+            ];
+        } else {
+            this.threads = [];
+        }
     }
 }

front/src/store/store.js

@@ -6,7 +6,7 @@ import Account from "./models/Account";
 const store = createStore({
     state() {
         return {
-            rooms: [],
+            rooms: [new Room({id:12, user: "user", roomName: "room name", mailbboxId:2})],
             messages: [],
             accounts: [new Account(0, "ALL")],
             activeAccount: 0,
@@ -21,23 +21,8 @@ const store = createStore({
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
-            // todo call actions
-            // 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);
-                        });
-                    })
-                    .catch((err) => {
-                        console.log(err);
-                    });
-            }
+            store.dispatch("fetchMessages", { roomId: payload, room: room });
         },
         addAccounts(state, payload) {
             payload.forEach((account) => {
@@ -47,11 +32,13 @@ const store = createStore({
         addRooms(state, payload) {
             // todo add if not exist
             payload.rooms.forEach((room) => {
-                state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
+                state.rooms.push(new Room(room));
             });
         },
         addMessages(state, payload) {
+            // todo add if not exist
             const room = state.rooms.find((room) => room.id == payload.roomId);
+            if (!room) return;
             payload.messages.forEach((message) => {
                 room.messages.push(message);
             });
@@ -65,6 +52,7 @@ const store = createStore({
         },
         messages: (state) => (roomId) => {
             const room = state.rooms.find((room) => room.id == roomId);
+            if (!room) return [];
             if (!room.messagesFetched) {
                 store.dispatch("fetchMessages", { roomId: room.id });
             }
@@ -94,15 +82,15 @@ const store = createStore({
             }
         },
         fetchMessages: async (context, data) => {
-            console.log(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);
-                });
+            if (!data.room || data.room?.fetched == false) {
+                API.getMessages(data.roomId)
+                    .then((res) => {
+                        context.commit("addMessages", { messages: res.data, roomId: data.roomId });
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
         },
     },
 });

front/src/utils/string.js

@@ -0,0 +1,5 @@
+export function decodeEmojis(text) {
+    const regex = /\\u{([^}]+)}/g;
+    const decodedText = text.replace(regex, (_, hex) => String.fromCodePoint(parseInt(hex, 16)));
+    return decodedText;
+}

front/src/views/room/Message.vue

@@ -1,8 +1,35 @@
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, onMounted, ref } from "vue";
+import { decodeEmojis } from "../../utils/string";
+import DOMPurify from 'dompurify';
 
 const props = defineProps({ data: Object });
 const date = new Date(props.data.date);
+
+const iframe = ref(null);
+
+onMounted(() => {
+    const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
+    const html = DOMPurify.sanitize(props.data.content);
+    doc.open();
+    // todo dompurify
+    // background vs color
+    doc.write(`
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Document</title>
+        </head>
+        <body style="margin: 0;">
+            ${html}
+        </body>
+        </html>
+    `);
+    doc.close();
+});
 </script>
 <!-- to if to is more than me
         cc -->
@@ -13,7 +40,7 @@ const date = new Date(props.data.date);
     <div class="message">
         <div id="context">
             <div class="left" id="profile">Carrefour@emailing .carrefor.fr "carrefour"</div>
-            <div class="middle">{{ props.data.subject }}</div>
+            <div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
             <div class="right" id="date">
                 {{
                     date.toLocaleString("en-GB", {
@@ -28,9 +55,7 @@ const date = new Date(props.data.date);
                 }}
             </div>
         </div>
-        <div id="content">
-            <div v-html="props.data.content"></div>
-        </div>
+        <iframe ref="iframe"></iframe>
     </div>
 </template>
 
@@ -46,25 +71,22 @@ const date = new Date(props.data.date);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
 }
 
-#content {
-    overflow: auto;
+iframe {
+    overflow-y: auto;
     max-height: 300px;
-    width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    width: 100%;
+    max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
 }
 
 .left,
 .right {
-    display: flex;
-    align-items: center;
+    white-space: nowrap;
 }
 
 .middle {
     margin: 0 10px;
-    flex: 1;
-    align-self: center;
-    display: contents;
+    text-align: center;
 }
 </style>

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

@@ -1,9 +1,11 @@
 <script setup>
-import { useRouter } from "vue-router"
-import { defineProps } from 'vue'
-import BaseAvatar from '../../avatars/BaseAvatar.vue'
-import ThreadList from './threads/ThreadList.vue'
+import { useRouter } from "vue-router";
+import { defineProps } from "vue";
+import BaseAvatar from "../../avatars/BaseAvatar.vue";
+import Badge from "../../../components/Badge.vue";
+import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
+import { decodeEmojis } from "@/utils/string";
 
 const props = defineProps({
     data: {
@@ -12,40 +14,50 @@ const props = defineProps({
         user: String,
         userId: Number,
         notSeen: Number,
-        mailboxId: Number
-    }
-})
+        mailboxId: Number,
+        threads: [Object],
+    },
+});
 
 const router = useRouter();
-
 </script>
 
 <template>
     <div>
-        <div class="room" @click="router.push(`/${props.data.id}`)" v-bind:class = " store.state.activeRoom == props.data.id ? 'selected' : ''">
-            <BaseAvatar url="vue.png"/>
+        <div
+            class="room"
+            @click="router.push(`/${props.data.id}`)"
+            v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
+        >
+            <BaseAvatar url="vue.png" />
             <div id="content">
                 <div id="sender">{{ props.data.user }}</div>
-                <div id="object">{{ props.data.roomName }}</div>
+                <div id="object">{{ decodeEmojis(props.data.roomName) }}</div>
             </div>
+            <Badge class="badge" v-if="props.data.unseen > 0"
+                ><template v-slot:body>{{ props.data.unseen }}</template>
+            </Badge>
         </div>
-        <ThreadList />
+        <ThreadList :threads="props.data.threads" />
     </div>
 </template>
 
 <style scoped>
+.badge {
+    margin: auto 7px auto 1px;
+}
 .room {
     box-sizing: border-box;
     contain: content;
     display: flex;
-    margin-bottom: 4px;
     margin: 4px;
     padding: 4px;
     cursor: pointer;
 }
 
-.room:hover, .selected {
-    background-color: #41474f;;
+.room:hover,
+.selected {
+    background-color: #41474f;
     border-radius: 8px;
 }
 
@@ -78,5 +90,4 @@ const router = useRouter();
     overflow: hidden;
     width: 100%;
 }
-
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="test">
       <Room v-for="(room, index) in rooms()" :key="index" :data="room" />
     </div>
 </template>
@@ -23,10 +23,11 @@ export default {
 </script>
 
 <style scoped>
-div {
+.test {
   display: flex;
   flex-direction: column;
   background-color: #24242B;
+  overflow: auto;
 }
 
 </style>

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

@@ -0,0 +1,38 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+    thread: Object
+})
+console.log(props.thread)
+
+</script>
+
+<template>
+    <div class="room">
+        {{props.thread.roomName}} 
+    </div>
+</template>
+
+<style scoped>
+.room {
+    box-sizing: border-box;
+    contain: content;
+    display: flex;
+    margin: -4px 4px 1px 4px;
+    padding: 4px;
+    cursor: pointer;
+    color: #a9b2bc;
+}
+
+.room:hover, .selected {
+    background-color: #41474f;;
+    border-radius: 8px;
+}
+
+.room::before {
+    content: "|";
+    margin: 0 10px;
+    color: white;
+}
+</style>

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

@@ -1,17 +1,16 @@
+<script setup>
+import Thread from './Thread.vue';
+import { defineProps } from 'vue'
+const props = defineProps({ threads: [Object] });
+console.log(props.threads)
+</script>
+
 <template>
     <div>
+      <Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
     </div>
 </template>
 
-<script>
-
-export default {
-  name: 'ThreadList',
-  props: {
-  },
- 
-}
-</script>
 
 <style scoped>
 </style>

front/yarn.lock

@@ -2821,6 +2821,11 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.1.tgz#a0933f38931b3238934dd632043b727e53004289"
+  integrity sha512-60tsgvPKwItxZZdfLmamp0MTcecCta3avOhsLgPZ0qcWt96OasFfhkeIRbJ6br5i0fQawT1/RBGB5L58/Jpwuw==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz"