Re-added scrolling to load song sets on admin/songs pages

frontend/src/pages/Admin/index.vue

@@ -3,6 +3,18 @@
 		<main-header />
 		<div class="tabs is-centered">
 			<ul>
+				<li
+					:class="{ 'is-active': currentTab == 'hiddensongs' }"
+					@click="showTab('hiddensongs')"
+				>
+					<router-link
+						class="tab hiddensongs"
+						to="/admin/hiddensongs"
+					>
+						<i class="material-icons">music_note</i>
+						<span>&nbsp;Hidden Songs</span>
+					</router-link>
+				</li>
 				<li
 					:class="{ 'is-active': currentTab == 'unverifiedsongs' }"
 					@click="showTab('unverifiedsongs')"
@@ -23,22 +35,10 @@
 						class="tab verifiedsongs"
 						to="/admin/verifiedsongs"
 					>
-						<i class="material-icons">music_note</i>
+						<i class="material-icons">check_circle</i>
 						<span>&nbsp;Verified Songs</span>
 					</router-link>
 				</li>
-				<li
-					:class="{ 'is-active': currentTab == 'hiddensongs' }"
-					@click="showTab('hiddensongs')"
-				>
-					<router-link
-						class="tab hiddensongs"
-						to="/admin/hiddensongs"
-					>
-						<i class="material-icons">music_note</i>
-						<span>&nbsp;Hidden Songs</span>
-					</router-link>
-				</li>
 				<li
 					:class="{ 'is-active': currentTab == 'stations' }"
 					@click="showTab('stations')"
@@ -237,13 +237,13 @@ export default {
 		border-color: var(--teal);
 	}
 	.verifiedsongs {
-		color: var(--teal);
-		border-color: var(--teal);
-	}
-	.hiddensongs {
 		color: var(--primary-color);
 		border-color: var(--primary-color);
 	}
+	.hiddensongs {
+		color: var(--grey);
+		border-color: var(--grey);
+	}
 	.stations {
 		color: var(--purple);
 		border-color: var(--purple);

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div @scroll="handleScroll">
+	<div>
 		<metadata title="Admin | Hidden songs" />
 		<div class="container">
 			<p>
@@ -238,6 +238,12 @@ export default {
 		if (this.socket.readyState === 1) this.init();
 		ws.onConnect(() => this.init());
 	},
+	created() {
+		window.addEventListener("scroll", this.handleScroll);
+	},
+	destroyed() {
+		window.removeEventListener("scroll", this.handleScroll);
+	},
 	methods: {
 		edit(song) {
 			// const newSong = {};
@@ -273,6 +279,13 @@ export default {
 				}
 			);
 		},
+		handleScroll() {
+			const scrollPosition = document.body.clientHeight + window.scrollY;
+			const bottomPosition = document.body.scrollHeight;
+			if (this.loadAllSongs) return false;
+			if (scrollPosition + 400 >= bottomPosition) this.getSet();
+			return this.maxPosition === this.position;
+		},
 		selectPrevious(event) {
 			if (event.srcElement.previousElementSibling)
 				event.srcElement.previousElementSibling.focus();

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div @scroll="handleScroll">
+	<div>
 		<metadata title="Admin | Unverified songs" />
 		<div class="container">
 			<p>
@@ -246,6 +246,12 @@ export default {
 		if (this.socket.readyState === 1) this.init();
 		ws.onConnect(() => this.init());
 	},
+	created() {
+		window.addEventListener("scroll", this.handleScroll);
+	},
+	destroyed() {
+		window.removeEventListener("scroll", this.handleScroll);
+	},
 	methods: {
 		edit(song) {
 			// const newSong = {};
@@ -293,6 +299,13 @@ export default {
 				}
 			);
 		},
+		handleScroll() {
+			const scrollPosition = document.body.clientHeight + window.scrollY;
+			const bottomPosition = document.body.scrollHeight;
+			if (this.loadAllSongs) return false;
+			if (scrollPosition + 400 >= bottomPosition) this.getSet();
+			return this.maxPosition === this.position;
+		},
 		selectPrevious(event) {
 			if (event.srcElement.previousElementSibling)
 				event.srcElement.previousElementSibling.focus();

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<metadata title="Admin | Songs" />
-		<div class="container" @scroll="handleScroll">
+		<div class="container">
 			<p>
 				<span>Sets loaded: {{ setsLoaded }} / {{ maxSets }}</span>
 				<br />
@@ -344,6 +344,12 @@ export default {
 			);
 		}
 	},
+	created() {
+		window.addEventListener("scroll", this.handleScroll);
+	},
+	destroyed() {
+		window.removeEventListener("scroll", this.handleScroll);
+	},
 	methods: {
 		edit(song) {
 			// this.editSong({ song, type: "songs" });
@@ -381,6 +387,13 @@ export default {
 				}
 			);
 		},
+		handleScroll() {
+			const scrollPosition = document.body.clientHeight + window.scrollY;
+			const bottomPosition = document.body.scrollHeight;
+			if (this.loadAllSongs) return false;
+			if (scrollPosition + 400 >= bottomPosition) this.getSet();
+			return this.maxPosition === this.position;
+		},
 		toggleArtistSelected(artist) {
 			if (this.artistFilterSelected.indexOf(artist) === -1)
 				this.artistFilterSelected.push(artist);