Admin QueueSongs loads 15 per page, and allows pages to be switched between, Admin Songs loads in 15 songs at a time

backend/logic/actions/queueSongs.js

@@ -43,9 +43,22 @@ module.exports = {
 			if (err) {
 				logger.error("QUEUE_INDEX", `Indexing queuesongs failed. "${err.message}"`);
 				return cb({status: 'failure', message: 'Something went wrong.'});
+			} else {
+				module.exports.getSet(session, 1, result => {
+					logger.success("QUEUE_INDEX", `Indexing queuesongs successful.`);
+					return cb({
+						songs: result,
+						maxLength: songs.length
+					});
+				});
 			}
-			logger.success("QUEUE_INDEX", `Indexing queuesongs successful.`);
-			return cb(songs);
+		});
+	}),
+
+	getSet: hooks.adminRequired((session, set, cb) => {
+		db.models.queueSong.find({}).limit(50 * set).exec((err, songs) => {
+			if (err) throw err;
+			cb(songs.splice(Math.max(songs.length - 50, 0)));
 		});
 	}),
 

backend/logic/actions/songs.js

@@ -62,15 +62,22 @@ cache.sub('song.undislike', (data) => {
 
 module.exports = {
 
-	index: hooks.adminRequired((session, cb) => {
+	length: hooks.adminRequired((session, cb) => {
 		db.models.song.find({}, (err, songs) => {
-			if (err) throw err;
-			cb(songs);
+			if (err) console.error(err);
+			cb(songs.length);
+		})
+	}),
+
+	getSet: hooks.adminRequired((session, set, cb) => {
+		db.models.song.find({}).limit(15 * set).exec((err, songs) => {
+			if (err) console.error(err);
+			cb(songs.splice(Math.max(songs.length - 15, 0)));
 		});
 	}),
 
 	update: hooks.adminRequired((session, songId, song, cb) => {
-		db.models.song.update({ _id: songId }, song, { upsert: true }, (err, updatedSong) => {
+		db.models.song.update({ _id: songId }, song, { upsert: true }, err => {
 			if (err) console.error(err);
 			songs.updateSong(songId, (err, song) => {
 				if (err) console.error(err);

frontend/components/Admin/QueueSongs.vue

@@ -35,6 +35,10 @@
 			</tbody>
 		</table>
 	</div>
+	<nav class="pagination">
+		<a class="button" href='#' @click='getSet(position - 1)' v-if='position > 1'><i class="material-icons">navigate_before</i></a>
+		<a class="button" href='#' @click='getSet(position + 1)' v-if='maxPosition > position'><i class="material-icons">navigate_next</i></a>
+	</nav>
 	<edit-song v-show='modals.editSong'></edit-song>
 </template>
 
@@ -48,6 +52,8 @@
 		components: { EditSong },
 		data() {
 			return {
+				position: 1,
+				maxPosition: 1,
 				searchQuery: '',
 				songs: [],
 				modals: { editSong: false }
@@ -62,6 +68,13 @@
 			toggleModal: function () {
 				this.modals.editSong = !this.modals.editSong;
 			},
+			getSet: function (position) {
+				let _this = this;
+				this.socket.emit('queueSongs.getSet', position, data => {
+					_this.songs = data;
+					this.position = position;
+				});
+			},
 			edit: function (song, index) {
 				this.$broadcast('editSong', song, index, 'queueSongs');
 			},
@@ -78,7 +91,8 @@
 			init: function() {
 				let _this = this;
 				_this.socket.emit('queueSongs.index', data => {
-					_this.songs = data;
+					_this.songs = data.songs;
+					_this.maxPosition = Math.round(data.maxLength / 50);
 				});
 				_this.socket.emit('apis.joinAdminRoom', 'queue', data => {});
 			}

frontend/components/Admin/Songs.vue

@@ -47,7 +47,10 @@
 		components: { EditSong },
 		data() {
 			return {
+				position: 1,
+				maxPosition: 1,
 				songs: [],
+				searchQuery: '',
 				modals: { editSong: false },
 				editing: {
 					index: 0,
@@ -72,18 +75,29 @@
 			edit: function (song, index) {
 				this.$broadcast('editSong', song, index, 'songs');
 			},
-			remove: function (id, index) {
+			remove: function (id) {
 				this.socket.emit('songs.remove', id, res => {
 					if (res.status == 'success') Toast.methods.addToast(res.message, 4000);
 					else Toast.methods.addToast(res.message, 8000);
 				});
 			},
-			init: function() {
+			getSet: function () {
 				let _this = this;
-				_this.socket.emit('songs.index', data => {
-					_this.songs = data;
+				_this.socket.emit('songs.getSet', _this.position, data => {
+					data.forEach(song => {
+						_this.songs.push(song);
+					});
+					_this.position = _this.position + 1;
+					if (_this.maxPosition > _this.position - 1) _this.getSet();
+				});
+			},
+			init: function () {
+				let _this = this;
+				_this.socket.emit('songs.length', length => {
+					_this.maxPosition = Math.round(length / 15);
+					_this.getSet();
 				});
-				_this.socket.emit('apis.joinAdminRoom', 'songs', data => {});
+				_this.socket.emit('apis.joinAdminRoom', 'songs', () => {});
 			}
 		},
 		ready: function () {