Add pagination to NotificationsView

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
       <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>
+          <Button :outline="showAll ? true : undefined" @click="onSetShowAll(false)">Unread</Button>
+          <Button :outline="showAll ? undefined : true" @click="onSetShowAll(true)">All</Button>
         </ButtonGroup>
         <Button secondary @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
       </div>
@@ -106,6 +132,10 @@ onMounted(async () => {
         </div>
       </div>
     </div>
+
+    <div style="text-align: center; padding-bottom: 20px;">
+      <Button @click="onLoadMore()" plain secondary v-if="hasMore" :disabled="busy" :loading="busy">Load more</Button>
+    </div>
   </div>
 </template>
 
@@ -127,7 +157,7 @@ onMounted(async () => {
   display: flex;
   gap: 10px;
   flex-direction: column;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
 }
 
 .notification-item {