Added searching functionality for admin songs and queue songs tabs

frontend/components/Admin/QueueSongs.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class='container'>
+		<input type='text' class='input' v-model='searchQuery' placeholder='Search for Songs'>
+		<br /><br />
 		<table class='table is-striped'>
 			<thead>
 				<tr>
@@ -13,7 +15,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for='(index, song) in songs' track-by='$index'>
+				<tr v-for='(index, song) in filteredSongs' track-by='$index'>
 					<td>
 						<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
 					</td>
@@ -46,6 +48,7 @@
 		components: { EditSong },
 		data() {
 			return {
+				searchQuery: '',
 				songs: [],
 				isEditActive: false,
 				editing: {
@@ -60,6 +63,11 @@
 				timeout: 0
 			}
 		},
+		computed: {
+			filteredSongs: function () {
+				return this.$eval('songs | filterBy searchQuery');
+			}
+		},
 		methods: {
 			settings: function (type) {
 				let _this = this;

frontend/components/Admin/Songs.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class='container'>
+		<input type='text' class='input' v-model='searchQuery' placeholder='Search for Songs'>
+		<br /><br />
 		<table class='table is-striped'>
 			<thead>
 				<tr>
@@ -13,7 +15,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for='(index, song) in songs' track-by='$index'>
+				<tr v-for='(index, song) in filteredSongs' track-by='$index'>
 					<td>
 						<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
 					</td>
@@ -58,6 +60,11 @@
 				}
 			}
 		},
+		computed: {
+			filteredSongs: function () {
+				return this.$eval('songs | filterBy searchQuery');
+			}
+		},
 		methods: {
 			settings: function (type) {
 				let _this = this;