deletion of messages (failing on server)

front/src/components/structure/message/Composer.vue

@@ -296,6 +296,7 @@ function sendMessage() {
     border-radius: 10px;
     padding: 0 10px;
     overflow: auto;
+    min-height: 150px;
 }
 
 .bubble-menu,

front/src/components/structure/message/Options.vue

@@ -42,6 +42,30 @@ const setFlag = (flag: string, loadingState: Ref<boolean>) => {
             loadingState.value = false;
         });
 };
+
+const deleteEverywhere = () => {
+    if (!room?.value || !props.msg) return;
+    API.deleteEverywhere({ mailboxId: room.value?.mailboxId, messageId: props.msg?.id })
+        .then((res) => {
+            store.commit("removeMsg", { roomId: room.value?.id, messageId: props.msg?.id });
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+};
+
+const deleteRemoteOnly = () => {
+    if (!room?.value || !props.msg) return;
+    API.deleteRemoteOnly({ mailboxId: room.value?.mailboxId, messageId: props.msg?.id })
+        .then((res) => {
+            if (!hasFlag(props.msg?.flags, "\\Deleted")) {
+                store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: "\\Deleted" });
+            }
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+};
 </script>
 
 <template>
@@ -71,25 +95,14 @@ const setFlag = (flag: string, loadingState: Ref<boolean>) => {
                     :classes="hasFlag(props.msg?.flags, '\\Flagged') ? 'warn' : ''"
                     v-tooltip="hasFlag(props.msg?.flags, '\\Flagged') ? 'Unflag' : 'Flag'"
                 />
-                <!-- 
-                <SvgLoader
-                    v-if="isSeenFc(props.msg?.flags)"
-                    svg="mail-check-line"
-                    class="option"
-                    v-tooltip="'Mark unread'"
-                    :loading="seenLoading"
-                />
-                <SvgLoader
-                    v-if="!isSeenFc(props.msg?.flags)"
-                    svg="mail-unread-line"
-                    class="option"
-                    v-tooltip="'Mark as read'"
-                    :loading="seenLoading"
-                /> -->
             </span>
             <SvgLoader svg="reply-line" class="option" />
-            <SvgLoader svg="delete-bin-4-line" class="option" classes="danger" v-tooltip="'Delete from server'" />
-            <SvgLoader svg="delete-bin-6-line" class="option" classes="danger" v-tooltip="'Delete everywhere'" />
+            <span @click="deleteRemoteOnly()">
+                <SvgLoader svg="delete-bin-4-line" class="option" classes="danger" v-tooltip="'Delete from remote'" />
+            </span>
+            <span @click="deleteEverywhere()">
+                <SvgLoader svg="delete-bin-6-line" class="option" classes="danger" v-tooltip="'Delete everywhere'" />
+            </span>
             <SvgLoader svg="share-forward-line" class="option" />
             <SvgLoader svg="reply-all-line" class="option" />
         </div>

front/src/services/imapAPI.ts

@@ -25,4 +25,10 @@ export default {
     reponseEmail(data: { user: string; roomId: number; text: string; html: string }) {
         return API().post(`/room/response`, data);
     },
+    deleteRemoteOnly(data: { mailboxId: number; messageId: number }) {
+        return API().post(`/message/deleteRemote`, data);
+    },
+    deleteEverywhere(data: { mailboxId: number; messageId: number }) {
+        return API().post(`/message/delete`, data);
+    },
 };

front/src/store/store.ts

@@ -170,6 +170,13 @@ const store = createStore<State>({
                 updateSeen(state, payload.roomId, payload.flag, false);
             }
         },
+        removeMsg(state, payload) {
+            const msgs = msgOnRoomId(state, payload.roomId);
+            const msgIndex = msgs?.messages.findIndex((msg) => msg.id == payload.messageId) ?? -1;
+            if (msgs && msgIndex != -1) {
+                msgs.messages.splice(msgIndex, 1);
+            }
+        },
     },
     getters: {
         rooms: (state) => (): Room[] => {

front/src/utils/array.ts

@@ -1,5 +1,5 @@
-export function removeDuplicates(array: number[]) {
-    const unique: number[] = [];
+export function removeDuplicates(array: any[]) {
+    const unique: any[] = [];
     for (let i = 0; i < array.length; i++) {
         if (!unique.includes(array[i])) {
             unique.push(array[i]);