fix: prevented buttons in pages that use the TabQueryHandler from modifying query in URL

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/modals/EditPlaylist/index.vue

@@ -55,7 +55,7 @@
 								<p class="control">
 									<a
 										class="button is-info"
-										@click="renamePlaylist()"
+										@click.prevent="renamePlaylist()"
 										href="#"
 										>Rename</a
 									>
@@ -77,7 +77,7 @@
 								<p class="control">
 									<a
 										class="button is-info"
-										@click="updatePrivacy()"
+										@click.prevent="updatePrivacy()"
 										href="#"
 										>Update Privacy</a
 									>
@@ -130,7 +130,7 @@
 								</span>
 								<a
 									class="button is-info"
-									@click="importPlaylist()"
+									@click.prevent="importPlaylist()"
 									href="#"
 									><i class="material-icons icon-with-button"
 										>publish</i
@@ -156,7 +156,7 @@
 							<p class="control">
 								<a
 									class="button is-info"
-									@click="searchForSongs()"
+									@click.prevent="searchForSongs()"
 									href="#"
 									><i class="material-icons icon-with-button"
 										>search</i
@@ -191,7 +191,7 @@
 										<a
 											class="button is-dark"
 											v-else
-											@click="
+											@click.prevent="
 												addSongToPlaylist(
 													result.id,
 													index
@@ -535,6 +535,13 @@ export default {
 		importPlaylist() {
 			let isImportingPlaylist = true;
 
+			// import query is blank
+			if (!this.importQuery)
+				return new Toast({
+					content: "Please enter a YouTube playlist URL.",
+					timeout: 4000
+				});
+
 			// don't give starting import message instantly in case of instant error
 			setTimeout(() => {
 				if (isImportingPlaylist) {
@@ -546,7 +553,7 @@ export default {
 				}
 			}, 750);
 
-			this.socket.emit(
+			return this.socket.emit(
 				"playlists.addSetToPlaylist",
 				this.importQuery,
 				this.playlist._id,
@@ -752,6 +759,12 @@ export default {
 		}
 	}
 
+	.nothing-here-text {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	.section {
 		// padding: 5px !important;
 		padding: 0 !important;

frontend/src/pages/Profile.vue

@@ -126,7 +126,10 @@
 								</p>
 							</div>
 							<div class="universal-item-actions">
-								<a href="#" @click="hideActivity(activity._id)">
+								<a
+									href="#"
+									@click.prevent="hideActivity(activity._id)"
+								>
 									<i class="material-icons hide-icon"
 										>visibility_off</i
 									>

frontend/src/pages/Station/AddSongToQueue.vue

@@ -25,7 +25,7 @@
 					<p class="control">
 						<a
 							class="button is-info"
-							@click="submitQuery()"
+							@click.prevent="submitQuery()"
 							href="#"
 							><i class="material-icons icon-with-button"
 								>search</i
@@ -61,7 +61,9 @@
 								<a
 									class="button is-dark"
 									v-else
-									@click="addSongToQueue(result.id, index)"
+									@click.prevent="
+										addSongToQueue(result.id, index)
+									"
 									href="#"
 									key="add-to-queue"
 								>
@@ -112,7 +114,7 @@
 							</span>
 							<a
 								class="button is-info"
-								@click="importPlaylist()"
+								@click.prevent="importPlaylist()"
 								href="#"
 								><i class="material-icons icon-with-button"
 									>publish</i
@@ -152,7 +154,7 @@
 										<a
 											class="button is-danger"
 											href="#"
-											@click="
+											@click.prevent="
 												togglePlaylistSelection(
 													playlist._id
 												)
@@ -169,7 +171,7 @@
 										</a>
 										<a
 											class="button is-success"
-											@click="
+											@click.prevent="
 												togglePlaylistSelection(
 													playlist._id
 												)
@@ -317,7 +319,7 @@ export default {
 
 			if (!this.querySearch)
 				return new Toast({
-					content: "Please input a search query or a YouTube link",
+					content: "Please input a search query or a YouTube link.",
 					timeout: 4000
 				});
 
@@ -398,6 +400,16 @@ export default {
 	#playlists {
 		font-size: 18px;
 
+		.playlist {
+			.button {
+				width: 150px;
+			}
+
+			i {
+				color: #fff;
+			}
+		}
+
 		.playlist:not(:last-of-type) {
 			margin-bottom: 10px;
 		}