🔨 Add counter to message viewer

This commit is contained in:
SebClem 2022-10-26 12:06:29 +02:00
parent 11493aa6f5
commit 2aa5331036
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
5 changed files with 39 additions and 17 deletions

View File

@ -1,11 +1,9 @@
<template>
<v-app>
<navbar-component></navbar-component>
<v-main>
<message-bar></message-bar>
<webdav-settings-menu></webdav-settings-menu>
</v-main>
<message-bar></message-bar>
<webdav-settings-menu></webdav-settings-menu>
<v-main> </v-main>
</v-app>
</template>

View File

@ -67,11 +67,14 @@
<script setup lang="ts">
import { getMessages } from "@/services/messageService";
import { MessageType, type Message } from "@/types/messages";
import { useMessageStore } from "@/stores/message";
import { MessageType } from "@/types/messages";
import { DateTime } from "luxon";
import { storeToRefs } from "pinia";
import { onBeforeUnmount, ref } from "vue";
const messages = ref<Message[]>([]);
const messagesStore = useMessageStore();
const { messages } = storeToRefs(messagesStore);
const interval = setInterval(refreshMessages, 1000);

View File

@ -9,8 +9,10 @@
</div>
</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon id="message-btn">
<v-icon>mdi-bell</v-icon>
<v-btn icon id="message-btn" >
<v-badge color="error" :content="countUnreadMessages">
<v-icon :class="{ shake: haveUnreadMessages }">mdi-bell</v-icon>
</v-badge>
</v-btn>
<v-menu width="210px">
<template v-slot:activator="{ props }">
@ -36,9 +38,13 @@
<script setup lang="ts">
import { useDialogStatusStore } from "@/stores/dialogStatus";
import { useMessageStore } from "@/stores/message";
import { storeToRefs } from "pinia";
import logoUrl from "../assets/logo.svg";
const dialogStatusStore = useDialogStatusStore();
const messagesStore = useMessageStore();
const { haveUnreadMessages, countUnreadMessages } = storeToRefs(messagesStore);
</script>
<style scoped>
.shake {

View File

@ -1,8 +0,0 @@
import { ref } from "vue";
import { defineStore } from "pinia";
import type { Message } from "@/types/messages";
export const useMessageStore = defineStore("message", () => {
const messages = ref<Message[]>([]);
return { messages };
});

View File

@ -0,0 +1,23 @@
import { computed, ref } from "vue";
import { defineStore } from "pinia";
import type { Message } from "@/types/messages";
export const useMessageStore = defineStore("message", () => {
const messages = ref<Message[]>([]);
const countUnreadMessages = computed(() => {
return messages.value.filter((value) => !value.viewed).length;
});
const haveUnreadMessages = computed(() => {
let unread = false;
for (const mess of messages.value) {
if (!mess.viewed) {
unread = true;
break;
}
}
return unread;
});
return { messages, countUnreadMessages, haveUnreadMessages };
});