show flags on front

back/db/api.ts

@@ -52,7 +52,7 @@ export async function getRooms(mailboxId) {
     return await execQueryAsync(query, values);
 }
 
-export async function getMessages(roomId) {
+export async function getMessages(roomId: number) {
     // todo attachements name
     const query = `
         SELECT 
@@ -62,7 +62,8 @@ export async function getMessages(roomId) {
             GROUP_CONCAT(ccT.address_id) AS ccA,
             subjectT.value AS subject,
             content.text AS content,
-            message.idate AS date
+            message.idate AS date,
+            GROUP_CONCAT(flagT.flag_name) AS flags
         FROM app_room_message msg
 
         ${queryFromId} fromT ON msg.message_id = fromT.message_id
@@ -88,6 +89,9 @@ export async function getMessages(roomId) {
                 bodypart.bodypart_id = header_field.bodypart_id
         ) content ON msg.message_id = content.message_id
 
+        LEFT JOIN flag ON flag.message_id = msg.message_id
+        LEFT JOIN flag_name flagT ON flagT.flag_id = flag.flag_id
+
         INNER JOIN message ON message.message_id = msg.message_id
 
         WHERE msg.room_id = ?

back/db/structureV2.sql

@@ -164,7 +164,7 @@ CREATE TABLE app_room_member (
 
 -- 15
 create table flag_name (
-  flag_id          INT NOT NULL,
+  flag_id          INT AUTO_INCREMENT,
   flag_name        VARCHAR(255) NOT NULL,
   PRIMARY KEY (flag_id),
   UNIQUE KEY (flag_name)

back/db/utils/addressQueries.ts

@@ -2,9 +2,8 @@ const queryAddress = (type: string): string => `
     LEFT JOIN (
         SELECT address_field.address_id, address_field.message_id
         FROM address_field 
-        INNER JOIN field_name 
+        INNER JOIN field_name ON field_name.field_id = address_field.field_id
         WHERE 
-            field_name.field_id = address_field.field_id AND
             field_name.field_name = '${type}'
     )
 `;

back/server.ts

@@ -14,6 +14,7 @@ app.use(cors());
 app.listen(process.env.PORT || 5500);
 
 import mailRouter from "./routes/mail";
+import logger from "./system/Logger";
 app.use("/api/mail", mailRouter);
 
 const imapSync = new ImapSync();

front/src/components/User.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { defineProps, PropType } from "vue";
 import { Address } from "@/store/models/model";
-import Badge from "./Badge.vue";
 
 const props = defineProps({ address: Object as PropType<Address> });
 const value = props.address?.name ? props.address?.name : props.address?.email;

front/src/store/models/model.ts

@@ -13,6 +13,7 @@ export interface Message {
     subject: string;
     content: string;
     date: string;
+    flags: string;
 }
 
 export enum LoadingState {

front/src/store/store.ts

@@ -1,7 +1,7 @@
 import API from "@/services/imapAPI";
 import { decodeEmojis } from "@/utils/string";
 import { AxiosError, AxiosResponse } from "axios";
-import { createStore, Store } from "vuex";
+import { createStore } from "vuex";
 import { Room, Account, Address, RoomType, Message, LoadingState } from "./models/model";
 
 interface RoomFromBack {

front/src/views/room/Message.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch, PropType, Prop } from "vue";
+import { defineProps, onMounted, ref, watch, PropType } from "vue";
 import { decodeEmojis } from "../../utils/string";
 import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
@@ -9,6 +9,7 @@ const props = defineProps({
     msg: Object as PropType<Message>,
     members: Array as PropType<Address[]>,
 });
+console.log(props.msg);
 const iframe = ref<HTMLIFrameElement>();
 
 // todo dompurify
@@ -62,6 +63,21 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
     });
     return res;
 };
+
+const classes = (): string => {
+    const flags = props.msg?.flags?.split(",");
+
+    // not flags implies no seen flag
+    if (!flags) return "msg-notSeen";
+
+    // Important takes the priority on Seen flag
+    if (flags.includes("\\Important")) {
+        return "msg-important";
+    } else if (!flags.includes("\\Seen")) {
+        return "msg-notSeen";
+    }
+    return "msg-basic";
+};
 </script>
 <!-- to if to is more than me
         cc -->
@@ -89,7 +105,7 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
                 }}
             </div>
         </div>
-        <div class="content">
+        <div class="content" :class="[classes()]">
             <iframe ref="iframe"></iframe>
             <div class="options">options</div>
         </div>
@@ -126,8 +142,18 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
     display: flex;
     padding-top: 6px;
     flex-direction: row;
-    /* background-color: #ec7a4342;
-    background-color: #353c6261; */
+}
+
+.msg-important {
+    background-color: #ec7a4342;
+}
+
+.msg-notSeen {
+    background-color: #222b5b61;
+}
+
+.msg-basic {
+    background-color: var(--tertiary-background);
 }
 
 iframe {
@@ -135,7 +161,7 @@ iframe {
     max-height: 300px;
     flex-basis: 100%;
     border: none;
-    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    max-width: 640px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);
 }
 

front/src/views/room/RoomView.vue

@@ -37,7 +37,7 @@ const shouldDisplayComposer = () => {
                 <Message
                     v-for="(message, index) in room?.messages"
                     :key="index"
-                    :data="message"
+                    :msg="message"
                     :members="room?.members"
                 />
             </div>

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

@@ -1,23 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { useRouter } from "vue-router";
-import { defineProps } from "vue";
+import { defineProps, PropType } 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 { Room } from "@/store/models/model";
 
 const props = defineProps({
-    data: {
-        id: Number,
-        roomName: String,
-        user: String,
-        userId: Number,
-        notSeen: Number,
-        mailboxId: Number,
-        threadIds: Array,
-    },
+    room: Object as PropType<Room>,
 });
-// console.log(props.data.threadIds);
+// console.log(props.room?.threadIds);
 
 const router = useRouter();
 </script>
@@ -26,18 +19,17 @@ const router = useRouter();
     <div>
         <div
             class="room"
-            @click="router.push(`/${props.data.id}`)"
-            v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
+            @click="router.push(`/${props.room?.id}`)"
+            v-bind:class="store.state.activeRoom == props.room?.id ? 'selected' : ''"
         >
             <BaseAvatar url="vue.png" />
             <div class="content">
-                <div class="sender">{{ props.data.user }}</div>
-                <div class="object">{{ props.data.roomName }}</div>
+                <div class="sender">{{ props.room?.user }}</div>
+                <div class="object">{{ props.room?.roomName }}</div>
             </div>
-            {{ props.data.unseen }}
-            <Badge class="badge" v-if="props.data.notSeen > 0" :value="props.data.notSeen" type="badge-number" />
+            <Badge class="badge" v-if="props.room?.notSeen ?? 0 > 0" :value="props.room?.notSeen" type="badge-number" />
         </div>
-        <ThreadList :threadIds="props.data.threadIds" />
+        <ThreadList :threadIds="props.room?.threadIds" />
     </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
     <div class="content">
-        <Room v-for="(room, index) in rooms()" :key="index" :data="room" />
+        <Room v-for="(room, index) in rooms()" :key="index" :room="room" />
     </div>
 </template>