39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import NotificationList from "@/components/notifications/NotificationList.vue";
|
|
import { useNotificationsStore } from "@/stores/notifications";
|
|
import { ref } from "vue";
|
|
|
|
const notificationsStore = useNotificationsStore();
|
|
|
|
const numNotificationsToShow = ref(7);
|
|
|
|
async function loadAdditionalNotifications() {
|
|
numNotificationsToShow.value *= 2;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gray-200">
|
|
<div class="container-large px-8 py-8">
|
|
<header class="mb-6">
|
|
<h1>{{ $t("general.notification_other") }}</h1>
|
|
</header>
|
|
<main>
|
|
<div class="bg-white px-4 py-4">
|
|
<NotificationList :num-notifications-to-show="numNotificationsToShow" />
|
|
<button
|
|
v-if="notificationsStore.allCount > numNotificationsToShow"
|
|
class="mt-4 underline"
|
|
data-cy="load-more-notifications"
|
|
@click="loadAdditionalNotifications()"
|
|
>
|
|
{{ $t("notifications.load_more") }}
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|