From 5c08f88944af7296e1cef0bc4920918f764817da Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 20 Dec 2023 11:09:10 +0100
Subject: [PATCH] add pagination component

---
 web/src/components/layout/Pagination.vue | 46 ++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 web/src/components/layout/Pagination.vue

diff --git a/web/src/components/layout/Pagination.vue b/web/src/components/layout/Pagination.vue
new file mode 100644
index 000000000..3715b9bff
--- /dev/null
+++ b/web/src/components/layout/Pagination.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div v-if="loading">loading ...</div>
+    <div v-else>
+      <slot :data="data" />
+    </div>
+
+    <Button v-if="hasMore" :is-loading="loading" text="Load more" class="mx-auto mt-4" @click="nextPage" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick } from 'vue';
+
+import Button from '~/components/atomic/Button.vue';
+
+import { usePagination } from '~/compositions/usePaginate';
+
+const props = defineProps<{
+  loadData: () => Promise<unknown[] | null>;
+}>();
+
+const {
+  loading,
+  data,
+  nextPage: _nextPage,
+  hasMore,
+} = usePagination(props.loadData, () => true, {
+  name: 'secrets',
+  each: ['repo', 'org', 'global'],
+});
+
+function scrollDown() {
+  window.scrollTo({
+    top: document.body.scrollHeight,
+    behavior: 'smooth',
+  });
+}
+
+function nextPage() {
+  _nextPage();
+  nextTick(() => {
+    setTimeout(scrollDown, 100);
+  });
+}
+</script>