jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add unread/showall filter for notifications

Browse Source
This commit is contained in:
Johannes Zellner
2026-01-23 13:57:12 +01:00
parent a6286bb67e
commit c4f8f318af
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/NotificationsView.vue
+26 -27
View File
@@ -3,7 +3,7 @@
import { marked } from 'marked';
import { eachLimit } from 'async';
import { ref, onMounted, inject } from 'vue';
import { Button } from '@cloudron/pankow';
import { Button, ButtonGroup } from '@cloudron/pankow';
import { prettyDate } from '@cloudron/pankow/utils';
import NotificationsModel from '../models/NotificationsModel.js';
@@ -13,9 +13,10 @@ const busy = ref(true);
const notifications = ref([]);
const notificationsAllBusy = ref(false);
const refreshNotifications = inject('refreshNotifications');
const showAll = ref(true);
async function refresh() {
const [error, result] = await notificationsModel.list();
const [error, result] = await notificationsModel.list(showAll.value ? null : false);
if (error) return console.error(error);
notifications.value = result;
@@ -71,31 +72,40 @@ onMounted(async () => {
<!-- <h1 class="view-header">{{ $t('notifications.title') }}</h1> -->
<h1 class="notification-list-header">
Notifications
<Button secondary @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
<div class="header-action-bar">
<ButtonGroup>
<Button :outline="showAll ? true : undefined" @click="showAll = false; refresh()">Unread</Button>
<Button :outline="showAll ? undefined : true" @click="showAll = true; refresh()">All</Button>
</ButtonGroup>
<Button secondary @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
</div>
</h1>
<div class="notification-list">
<TransitionGroup name="fade">
<div v-for="notification in notifications" :key="notification.id" class="notification-item" :class="{ new: !notification.acknowledged, active: notification.active }">
<div class="notification-item-title" @click="onToggleActive(notification)">
<div>
{{ notification.title }}
<div class="notification-item-date">{{ prettyDate(notification.creationTime) }}</div>
</div>
<Button v-if="notification.acknowledged" plain secondary tool :loading="notification.busy && !notificationsAllBusy" :disabled="notification.busy" @click.stop="onMarkNotificationUnread(notification)">Unread</Button>
<Button v-else plain primary tool :loading="notification.busy && !notificationsAllBusy" :disabled="notification.busy" @click.stop="onMarkNotificationRead(notification)">Dismiss</Button>
</div>
<div class="notification-item-message">
<div style="cursor: auto; overflow: auto;" v-html="marked.parse(notification.message)"></div>
<div v-for="notification in notifications" :key="notification.id" class="notification-item" :class="{ new: !notification.acknowledged, active: notification.active }">
<div class="notification-item-title" @click="onToggleActive(notification)">
<div>
{{ notification.title }}
<div class="notification-item-date">{{ prettyDate(notification.creationTime) }}</div>
</div>
<Button v-if="notification.acknowledged" plain secondary tool :disabled="notification.busy" @click.stop="onMarkNotificationUnread(notification)">Unread</Button>
<Button v-else plain primary tool :disabled="notification.busy" @click.stop="onMarkNotificationRead(notification)">Dismiss</Button>
</div>
</TransitionGroup>
<div class="notification-item-message">
<div style="cursor: auto; overflow: auto;" v-html="marked.parse(notification.message)"></div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.header-action-bar {
display: flex;
gap: 5px;
}
.notification-list-header {
display: flex;
flex-direction: row;
@@ -124,11 +134,6 @@ onMounted(async () => {
background-color: var(--pankow-color-background-hover);
}
.notification-item.active {
z-index: 500;
position: relative;
}
.notification-item-title {
font-size: 14px;
padding: 10px;
@@ -155,10 +160,4 @@ onMounted(async () => {
display: block;
}
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>