diff --git a/dashboard/src/models/NotificationsModel.js b/dashboard/src/models/NotificationsModel.js index 47b8c573e..e643c0790 100644 --- a/dashboard/src/models/NotificationsModel.js +++ b/dashboard/src/models/NotificationsModel.js @@ -6,10 +6,11 @@ function create() { const accessToken = localStorage.token; return { - async list(acknowledged = null) { + async list(acknowledged = null, page = 1) { const query = { access_token: accessToken, - per_page: 10000 + page, + per_page: 100 }; if (acknowledged !== null) query.acknowledged = !!acknowledged; diff --git a/dashboard/src/views/NotificationsView.vue b/dashboard/src/views/NotificationsView.vue index 2b0eca78f..1a1ef444f 100644 --- a/dashboard/src/views/NotificationsView.vue +++ b/dashboard/src/views/NotificationsView.vue @@ -14,11 +14,18 @@ const notifications = ref([]); const notificationsAllBusy = ref(false); const refreshNotifications = inject('refreshNotifications'); const showAll = ref(false); +const hasMore = ref(true); + +let page = 1; + +// keep in-sync with NotificationsModel.js +const PAGE_SIZE = 100; async function refresh() { const [error, result] = await notificationsModel.list(showAll.value ? null : false); if (error) return console.error(error); + hasMore.value = result.length >= PAGE_SIZE; notifications.value = result; } @@ -69,6 +76,25 @@ async function onMarkAllNotificationRead() { notificationsAllBusy.value = false; } +function onSetShowAll(value) { + showAll.value = value; + hasMore.value = true; + page = 1; + refresh(); +} + +async function onLoadMore() { + busy.value = true; + + const [error, result] = await notificationsModel.list(showAll.value ? null : false, page++); + if (error) return console.error(error); + + hasMore.value = result.length >= PAGE_SIZE; + notifications.value = notifications.value.concat(result); + + busy.value = false; +} + onMounted(async () => { await refresh(); @@ -84,8 +110,8 @@ onMounted(async () => { Notifications
@@ -106,6 +132,10 @@ onMounted(async () => { + +