grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix svg errors on display and add flagged

Browse Source
This commit is contained in:
grimhilt
2023-04-26 17:40:07 +02:00
parent dd8f9210a9
commit 6e8e3bf1f4
4 changed files with 91 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
front/src/components/structure/message/Options.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { defineProps, inject, PropType, ref } from "vue";
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 } from "@/utils/flagsUtils";
import { isSeenFc, hasFlag } from "@/utils/flagsUtils";
import SvgLoader from "@/components/utils/SvgLoader.vue";
const props = defineProps({
@@ -11,65 +11,88 @@ const props = defineProps({
});
const room: any = inject("room");
const readLoading = ref(false);
const setFlag = (flag: string) => {
if (readLoading.value) return;
readLoading.value = true;
const seenLoading = ref(false);
const flaggedLoading = 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;
let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
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((res) => {
if (isSeenFc(props.msg?.flags)) {
.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 });
}
readLoading.value = false;
loadingState.value = false;
})
.catch((err) => {
console.log(err);
readLoading.value = false;
loadingState.value = false;
});
};
</script>
<template>
<div id="main">
<span @click="setFlag('\\Seen')">
<SvgLoader
v-if="isSeenFc(props.msg?.flags)"
svg="mail-check-line"
class="option"
v-tooltip="'Mark unread'"
:loading="readLoading"
/>
<SvgLoader
v-if="!isSeenFc(props.msg?.flags)"
svg="mail-unread-line"
class="option"
v-tooltip="'Mark as read'"
:loading="readLoading"
/>
</span>
<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" class="option" />
<span @click="setReadFlag()">
<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>
<span @click="setFlaggedFlag()">
<SvgLoader svg="flag-line" class="option" :loading="flaggedLoading" />
<!--
<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'" />
<SvgLoader svg="share-forward-line" class="option" />
<SvgLoader svg="reply-all-line" class="option" />
</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>
</template>