pridane infinity scroll pre Archiv

webapp/src/assets/css/style.css

@@ -361,6 +361,7 @@ button:focus-visible,
 #archive {
 	margin: 0 auto;
 	padding: 20px;
+	min-height: 110vh;
 }
 #archive .reports {
 	/* border: 1px red solid; */
@@ -396,6 +397,10 @@ button:focus-visible,
 	background-color: var(--color-bg0);
 	flex: 0 1 auto;
 }
+#archive .loadmore {
+	text-align: center;
+	padding: 10px;
+}
 @media (max-width: 900px) {
 	#archive .report-row {
 		flex-wrap: wrap;

webapp/src/views/Archive.vue

@@ -2,10 +2,15 @@
 	<FullScreenLoader v-if="loading" />
 
 	<div id="archive">
-		<h1>Archív</h1>
+		<h1>Archív vyriesenych BUG reportov</h1>
 
 		<div class="reports">
-			<div class="report-row" v-for="report in reports" :key="report.report_id" @click="$router.push('/report/' + report.report_id)">
+			<div
+				class="report-row"
+				v-for="report in reports"
+				:key="report.report_id"
+				@click="$router.push('/report/' + report.report_id)"
+			>
 				<div class="report-id">
 					<font-awesome-icon :icon="['fas', 'hashtag']" />
 					{{ report.report_id }}
@@ -15,27 +20,59 @@
 				<div class="group">{{ report.report_group }}</div>
 			</div>
 		</div>
+
+		<div class="loadmore">
+			<button v-if="!loadedAll" @click="loadMoreReports"><font-awesome-icon :icon="['fas', 'arrow-down']" /> Nacitat dalsie</button>
+			<div v-else><font-awesome-icon :icon="['fas', 'check']" /> Vsetky archivovane reporty su zobrazene</div>
+		</div>
+
 	</div>
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, onBeforeUnmount, ref } from "vue";
 import { backend } from "../backend";
 import FullScreenLoader from "../components/FullScreenLoader.vue";
 
 const reports = ref([]);
 const loading = ref(false);
+const page = ref(0);
+const loadedAll = ref(false);
 
-onMounted(async () => {
-	loadReports();
-});
-
-function loadReports() {
+function loadMoreReports() {
 	loading.value = true;
-	backend.getArchived(0).then((data) => {
-		console.log(data);
-		reports.value = data;
+	backend.getArchived(page.value).then((data) => {
+		// console.log(data);
+		if (data.length == 0) {
+			loadedAll.value = true;
+		} else {
+			reports.value.push(...data);
+		}
+		page.value++;
 		loading.value = false;
 	});
 }
+
+let _in_scroll_handler = false;
+function handleScroll() {
+	if (_in_scroll_handler || loading.value || loadedAll.value) return;
+	_in_scroll_handler = true;
+	const scrollY = window.scrollY;
+	const windowHeight = window.innerHeight;
+	const documentHeight = document.documentElement.scrollHeight;
+	if (scrollY + windowHeight >= documentHeight - 100) {
+		loadMoreReports();
+	}
+	_in_scroll_handler = false;
+}
+
+onMounted(() => {
+	loadMoreReports();
+	window.addEventListener("scroll", handleScroll);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('scroll', handleScroll)
+});
+
 </script>