84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { defineProps, inject, PropType } from "vue";
|
|
import { Message } from "@/store/models/model";
|
|
import API from "@/services/imapAPI";
|
|
import store from "@/store/store";
|
|
import { isSeenFc } from "@/utils/flagsUtils";
|
|
import SvgLoader from "@/components/utils/SvgLoader.vue";
|
|
|
|
const props = defineProps({
|
|
msg: Object as PropType<Message>,
|
|
});
|
|
|
|
const room: any = inject("room");
|
|
|
|
const setFlag = (flag: string) => {
|
|
// todo loading
|
|
if (!room?.value || !props.msg) return;
|
|
let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
|
|
apiCall({
|
|
mailboxId: room.value?.mailboxId,
|
|
messageId: props.msg?.id,
|
|
flag: flag,
|
|
})
|
|
.then((res) => {
|
|
if (isSeenFc(props.msg?.flags)) {
|
|
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 });
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<div id="main">
|
|
<div class="button" @click="setFlag('\\Seen')">
|
|
{{ isSeenFc(props.msg?.flags) ? "Mark as not read" : "Mark as read" }}
|
|
</div>
|
|
<div>flag favorite</div>
|
|
<div>reply</div>
|
|
<div>delete from all</div>
|
|
<div>delete from remote</div>
|
|
<div>transfer</div>
|
|
<div>see source</div>
|
|
<div>{{ props.msg?.flags }}</div>
|
|
<div class="icons">
|
|
<SvgLoader svg="flag-line" />
|
|
<SvgLoader svg="reply-line" />
|
|
<SvgLoader svg="delete-bin-4-line" />
|
|
<SvgLoader svg="delete-bin-6-line" />
|
|
<SvgLoader svg="share-forward-line" />
|
|
<SvgLoader svg="reply-all-line" />
|
|
<SvgLoader svg="mail-check-line" />
|
|
<SvgLoader svg="mail-unread-line" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#main {
|
|
text-align: center;
|
|
}
|
|
|
|
.icons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.button {
|
|
border: solid 1px;
|
|
border-radius: 6px;
|
|
display: initial;
|
|
padding: 1px 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: var(--selected);
|
|
}
|
|
</style>
|