feat: make NotificationList component 'stupid'
This commit is contained in:
parent
0f940e9183
commit
e2ae7005fc
|
@ -27,14 +27,18 @@
|
|||
<div class="navbar-end">
|
||||
<update/>
|
||||
<NavbarTriggerButton
|
||||
@click="openQuickActions"
|
||||
@click="baseStore.setQuickActionsActive(true)"
|
||||
v-shortcut="'Control+k'"
|
||||
:pressed="quickActionsActive"
|
||||
:pressed="baseStore.quickActionsActive"
|
||||
:title="$t('keyboardShortcuts.quickSearch')"
|
||||
>
|
||||
<icon icon="search"/>
|
||||
</NavbarTriggerButton>
|
||||
<notifications/>
|
||||
<NotificationList
|
||||
:notifications="notifications"
|
||||
:hasUnreadNotifications="hasUnreadNotifications"
|
||||
@mark-notification-as-read="markNotificationAsRead"
|
||||
/>
|
||||
<div class="user">
|
||||
<dropdown class="is-right" ref="usernameDropdown">
|
||||
<template #trigger="{toggleOpen}">
|
||||
|
@ -99,7 +103,7 @@ import Update from '@/components/home/update.vue'
|
|||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
||||
import Dropdown from '@/components/misc/dropdown.vue'
|
||||
import DropdownItem from '@/components/misc/dropdown-item.vue'
|
||||
import Notifications from '@/components/notifications/notifications.vue'
|
||||
import NotificationList from '@/components/notifications/NotificationList.vue'
|
||||
import Logo from '@/components/home/Logo.vue'
|
||||
import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
@ -110,6 +114,7 @@ import {getListTitle} from '@/helpers/getListTitle'
|
|||
import {useBaseStore} from '@/stores/base'
|
||||
import {useConfigStore} from '@/stores/config'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
import {useNotificationStore} from '@/stores/notifications'
|
||||
|
||||
const baseStore = useBaseStore()
|
||||
const currentList = computed(() => baseStore.currentList)
|
||||
|
@ -135,11 +140,15 @@ onMounted(async () => {
|
|||
listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
|
||||
})
|
||||
|
||||
const quickActionsActive = computed(() => baseStore.quickActionsActive)
|
||||
const {
|
||||
notifications,
|
||||
hasUnreadNotifications,
|
||||
|
||||
function openQuickActions() {
|
||||
baseStore.setQuickActionsActive(true)
|
||||
}
|
||||
markNotificationAsRead,
|
||||
startNotificationPulling,
|
||||
} = useNotificationStore()
|
||||
|
||||
startNotificationPulling()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
:key="n.id"
|
||||
class="notification-item"
|
||||
:notification="n"
|
||||
@markNotificationAsRead="markNotificationAsRead(n)"
|
||||
@markNotificationAsRead="emit('markNotificationAsRead', n)"
|
||||
/>
|
||||
<p class="nothing" v-if="notifications.length === 0">
|
||||
{{ $t('notification.none') }}<br/>
|
||||
|
@ -34,12 +34,22 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import {onClickOutside, tryOnUnmounted} from '@vueuse/core'
|
||||
import {onClickOutside} from '@vueuse/core'
|
||||
|
||||
import type {INotification} from '@/modelTypes/INotification'
|
||||
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
|
||||
import NotificationItem from '@/components/notifications/NotificationItem.vue'
|
||||
import {useNotificationStore} from '@/stores/notifications'
|
||||
|
||||
defineProps<{
|
||||
notifications: INotification[],
|
||||
hasUnreadNotifications: boolean,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'markNotificationAsRead', notification: INotification): void
|
||||
}>()
|
||||
|
||||
const modalIsOpen = ref(false)
|
||||
const popup = ref(null)
|
||||
|
@ -59,17 +69,6 @@ onClickOutside(
|
|||
},
|
||||
{ignore: [toggleButton]},
|
||||
)
|
||||
|
||||
const {
|
||||
notifications,
|
||||
hasUnreadNotifications,
|
||||
|
||||
startNotificationPulling,
|
||||
markNotificationAsRead,
|
||||
} = useNotificationStore()
|
||||
|
||||
const stopNotificationPulling = startNotificationPulling()
|
||||
tryOnUnmounted(stopNotificationPulling)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
|
@ -1,7 +1,9 @@
|
|||
import {acceptHMRUpdate, defineStore} from 'pinia'
|
||||
import {computed, ref} from 'vue'
|
||||
import {tryOnUnmounted} from '@vueuse/core'
|
||||
|
||||
import type {INotification} from '@/modelTypes/INotification'
|
||||
import NotificationService from '@/services/notification'
|
||||
import {acceptHMRUpdate, defineStore} from 'pinia'
|
||||
import {findIndexById} from '@/helpers/utils'
|
||||
|
||||
const NOTIFICATIONS_PULL_INTERVAL = 10000
|
||||
|
@ -22,7 +24,7 @@ export const useNotificationStore = defineStore('notification', () => {
|
|||
const notificationService = new NotificationService()
|
||||
|
||||
async function loadNotifications() {
|
||||
allNotifications.value = await notificationService.getAll()
|
||||
allNotifications.value = await notificationService.getAll() as INotification[]
|
||||
}
|
||||
|
||||
function startNotificationPulling() {
|
||||
|
@ -35,7 +37,7 @@ export const useNotificationStore = defineStore('notification', () => {
|
|||
clearInterval(interval)
|
||||
}
|
||||
|
||||
async function markNotificationAsRead(notificationItem: INotification) {
|
||||
async function markNotificationAsRead(notificationItem: INotification): Promise<INotification | undefined> {
|
||||
const index = findIndexById(allNotifications.value, notificationItem.id)
|
||||
if (index === -1) {
|
||||
return
|
||||
|
@ -49,6 +51,8 @@ export const useNotificationStore = defineStore('notification', () => {
|
|||
await notificationService.update(allNotifications.value[index])
|
||||
}
|
||||
|
||||
tryOnUnmounted(stopNotificationPulling)
|
||||
|
||||
return {
|
||||
notifications,
|
||||
unreadNotifications,
|
||||
|
|
Reference in New Issue
Block a user