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

<script setup lang="ts">
import { defineProps, inject, PropType, Ref, ref } from "vue";
import { Message } from "@/store/models/model";
import API from "@/services/imapAPI";
import store from "@/store/store";
import { isSeenFc, hasFlag } from "@/utils/flagsUtils";
import SvgLoader from "@/components/utils/SvgLoader.vue";

const props = defineProps({
    msg: Object as PropType<Message>,
});

const room: any = inject("room");

const seenLoading = ref(false);
const flaggedLoading = ref(false);
const deletionLoading = ref(false);

const setReadFlag = () => setFlag("\\Seen", seenLoading);
const setFlaggedFlag = () => setFlag("\\Flagged", flaggedLoading);

const setFlag = (flag: string, loadingState: Ref<boolean>) => {
    if (loadingState.value) return;
    if (!room?.value || !props.msg) return;
    loadingState.value = true;

    let apiCall = hasFlag(props.msg?.flags, flag) ? API.removeFlag : API.addFlag;
    apiCall({
        mailboxId: room.value?.mailboxId,
        messageId: props.msg?.id,
        flag: flag,
    })
        .then(() => {
            if (hasFlag(props.msg?.flags, flag)) {
                store.commit("removeFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
            } else {
                store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
            }
            loadingState.value = false;
        })
        .catch((err) => {
            console.log(err);
            loadingState.value = false;
        });
};

const deleteEverywhere = () => {
    if (deletionLoading.value) return;
    if (!room?.value || !props.msg) return;
    deletionLoading.value = true;
    API.deleteEverywhere({ mailboxId: room.value?.mailboxId, messageId: props.msg?.id })
        .then((res) => {
            // delete even if we delete the room after because the transition between room is not clean (todo)
            store.commit("removeMsg", { roomId: room.value?.id, messageId: props.msg?.id });
            if (res.data?.deleteRoom) {
                store.commit("removeRoom", { roomId: room.value?.id });
            }
            deletionLoading.value = false;
        })
        .catch((err) => {
            console.log(err);
            deletionLoading.value = false;
        });
};

const deleteRemoteOnly = () => {
    if (deletionLoading.value) return;
    if (!room?.value || !props.msg) return;
    deletionLoading.value = true;
    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" });
            }
            deletionLoading.value = false;
        })
        .catch((err) => {
            console.log(err);
            deletionLoading.value = false;
        });
};
</script>

<template>
    <div id="main">
        <div class="icons">
            <span @click="setReadFlag()">
                <SvgLoader
                    v-if="isSeenFc(props.msg?.flags)"
                    svg="mail-check-line"
                    classes="selectable"
                    v-tooltip="'Mark unread'"
                    :loading="seenLoading"
                />
                <SvgLoader
                    v-if="!isSeenFc(props.msg?.flags)"
                    svg="mail-unread-line"
                    classes="selectable"
                    v-tooltip="'Mark as read'"
                    :loading="seenLoading"
                />
            </span>
            <span @click="setFlaggedFlag()">
                <SvgLoader
                    svg="flag-line"
                    :loading="flaggedLoading"
                    :classes="(hasFlag(props.msg?.flags, '\\Flagged') ? 'warn' : '') + ',selectable'"
                    v-tooltip="hasFlag(props.msg?.flags, '\\Flagged') ? 'Unflag' : 'Flag'"
                />
            </span>
            <SvgLoader svg="reply-line" classes="selectable" />
            <span @click="deleteRemoteOnly()">
                <SvgLoader
                    svg="delete-bin-4-line"
                    :loading="deletionLoading"
                    classes="danger,selectable"
                    v-tooltip="'Delete from remote'"
                />
            </span>
            <span @click="deleteEverywhere()">
                <SvgLoader
                    svg="delete-bin-6-line"
                    :loading="deletionLoading"
                    classes="danger,selectable"
                    v-tooltip="'Delete everywhere'"
                />
            </span>
            <SvgLoader svg="share-forward-line" classes="selectable" />
            <SvgLoader svg="reply-all-line" classes="selectable" />
            <div>{{ props.msg?.flags }}</div>
        </div>
        <!-- <div>see source</div> -->
    </div>
</template>

<style lang="scss" scoped>
#main {
    text-align: center;
}

.icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
</style>