feat(EditPlaylist): added tabs for songs, playlists and settings

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

frontend/src/components/modals/EditPlaylist/Tabs/Youtube.vue → frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -1,45 +1,5 @@
 <template>
 	<div class="youtube-tab section">
-		<h4 class="section-title">Import from YouTube</h4>
-
-		<p class="section-description">
-			Import a playlist or song by searching or using a link from YouTube.
-		</p>
-
-		<hr class="section-horizontal-rule" />
-
-		<label class="label">
-			Search for a playlist from YouTube
-		</label>
-		<div class="control is-grouped input-with-button">
-			<p class="control is-expanded">
-				<input
-					class="input"
-					type="text"
-					placeholder="Enter YouTube Playlist URL here..."
-					v-model="search.playlist.query"
-					@keyup.enter="importPlaylist()"
-				/>
-			</p>
-			<p class="control has-addons">
-				<span class="select" id="playlist-import-type">
-					<select v-model="search.playlist.isImportingOnlyMusic">
-						<option :value="false">Import all</option>
-						<option :value="true">
-							Import only music
-						</option>
-					</select>
-				</span>
-				<a
-					class="button is-info"
-					@click.prevent="importPlaylist()"
-					href="#"
-					><i class="material-icons icon-with-button">publish</i
-					>Import</a
-				>
-			</p>
-		</div>
-
 		<label class="label">
 			Search for a song from YouTube
 		</label>
@@ -108,8 +68,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters /* , mapActions */ } from "vuex";
-import Toast from "toasters";
+import { mapState, mapGetters } from "vuex";
 
 import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
@@ -151,82 +110,29 @@ export default {
 				})
 			);
 		}
-	},
-	mounted() {},
-	methods: {
-		importPlaylist() {
-			let isImportingPlaylist = true;
-
-			// import query is blank
-			if (!this.search.playlist.query)
-				return new Toast("Please enter a YouTube playlist URL.");
-
-			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
-			const splitQuery = regex.exec(this.search.playlist.query);
-
-			if (!splitQuery) {
-				return new Toast({
-					content: "Please enter a valid YouTube playlist URL.",
-					timeout: 4000
-				});
-			}
-
-			// don't give starting import message instantly in case of instant error
-			setTimeout(() => {
-				if (isImportingPlaylist) {
-					new Toast(
-						"Starting to import your playlist. This can take some time to do."
-					);
-				}
-			}, 750);
-
-			return this.socket.dispatch(
-				"playlists.addSetToPlaylist",
-				this.search.playlist.query,
-				this.playlist._id,
-				this.search.playlist.isImportingOnlyMusic,
-				res => {
-					new Toast({ content: res.message, timeout: 20000 });
-					if (res.status === "success") {
-						isImportingPlaylist = false;
-						if (this.search.playlist.isImportingOnlyMusic) {
-							new Toast({
-								content: `${res.data.stats.songsInPlaylistTotal} of the ${res.data.stats.videosInPlaylistTotal} videos in the playlist were songs.`,
-								timeout: 20000
-							});
-						}
-					}
-				}
-			);
-		}
-		// ...mapActions("modals/editSong", ["selectDiscogsInfo"])
 	}
 };
 </script>
 
 <style lang="scss" scoped>
 .youtube-tab {
-	#import-from-youtube-section {
-		#playlist-import-type select {
-			border-radius: 0;
-		}
-
-		#song-query-results {
-			padding: 10px;
-			margin-top: 10px;
-			border: 1px solid var(--light-grey-3);
-			border-radius: 3px;
-			max-width: 565px;
-
-			.search-query-item:not(:last-of-type) {
-				margin-bottom: 10px;
-			}
+	#song-query-results {
+		padding: 10px;
+		margin-top: 10px;
+		border: 1px solid var(--light-grey-3);
+		border-radius: 3px;
+		max-width: 565px;
+		max-height: 500px;
+		overflow: auto;
+
+		.search-query-item:not(:last-of-type) {
+			margin-bottom: 10px;
 		}
+	}
 
-		.load-more-button {
-			width: 100%;
-			margin-top: 10px;
-		}
+	.load-more-button {
+		width: 100%;
+		margin-top: 10px;
 	}
 }
 

frontend/src/components/modals/EditPlaylist/Tabs/ImportPlaylists.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="youtube-tab section">
+		<label class="label">
+			Search for a playlist from YouTube
+		</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					placeholder="Enter YouTube Playlist URL here..."
+					v-model="search.playlist.query"
+					@keyup.enter="importPlaylist()"
+				/>
+			</p>
+			<p class="control has-addons">
+				<span class="select" id="playlist-import-type">
+					<select v-model="search.playlist.isImportingOnlyMusic">
+						<option :value="false">Import all</option>
+						<option :value="true">
+							Import only music
+						</option>
+					</select>
+				</span>
+				<a
+					class="button is-info"
+					@click.prevent="importPlaylist()"
+					href="#"
+					><i class="material-icons icon-with-button">publish</i
+					>Import</a
+				>
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import Toast from "toasters";
+
+import SearchYoutube from "@/mixins/SearchYoutube.vue";
+
+export default {
+	mixins: [SearchYoutube],
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editPlaylist", {
+			playlist: state => state.playlist
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	methods: {
+		importPlaylist() {
+			let isImportingPlaylist = true;
+
+			// import query is blank
+			if (!this.search.playlist.query)
+				return new Toast("Please enter a YouTube playlist URL.");
+
+			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
+			const splitQuery = regex.exec(this.search.playlist.query);
+
+			if (!splitQuery) {
+				return new Toast({
+					content: "Please enter a valid YouTube playlist URL.",
+					timeout: 4000
+				});
+			}
+
+			// don't give starting import message instantly in case of instant error
+			setTimeout(() => {
+				if (isImportingPlaylist) {
+					new Toast(
+						"Starting to import your playlist. This can take some time to do."
+					);
+				}
+			}, 750);
+
+			return this.socket.dispatch(
+				"playlists.addSetToPlaylist",
+				this.search.playlist.query,
+				this.playlist._id,
+				this.search.playlist.isImportingOnlyMusic,
+				res => {
+					new Toast({ content: res.message, timeout: 20000 });
+					if (res.status === "success") {
+						isImportingPlaylist = false;
+						if (this.search.playlist.isImportingOnlyMusic) {
+							new Toast({
+								content: `${res.data.stats.songsInPlaylistTotal} of the ${res.data.stats.videosInPlaylistTotal} videos in the playlist were songs.`,
+								timeout: 20000
+							});
+						}
+					}
+				}
+			);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+#playlist-import-type select {
+	border-radius: 0;
+}
+
+@media screen and (max-width: 1300px) {
+	.youtube-tab #song-query-results,
+	.section {
+		max-width: 100% !important;
+	}
+}
+</style>

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

@@ -36,12 +36,23 @@
 							</button>
 							<button
 								class="button is-default"
-								:class="{ selected: tab === 'youtube' }"
-								ref="youtube-tab"
-								@click="showTab('youtube')"
+								:class="{ selected: tab === 'add-songs' }"
+								ref="add-songs-tab"
+								@click="showTab('add-songs')"
 								v-if="isEditable()"
 							>
-								YouTube
+								Add Songs
+							</button>
+							<button
+								class="button is-default"
+								:class="{
+									selected: tab === 'import-playlists'
+								}"
+								ref="import-playlists-tab"
+								@click="showTab('import-playlists')"
+								v-if="isEditable()"
+							>
+								Import Playlists
 							</button>
 						</div>
 						<settings
@@ -53,18 +64,17 @@
 									(playlist.type === 'genre' && isAdmin())
 							"
 						/>
-						<youtube
+						<add-songs
+							class="tab"
+							v-show="tab === 'add-songs'"
+							v-if="isEditable()"
+						/>
+						<import-playlists
 							class="tab"
-							v-show="tab === 'youtube'"
+							v-show="tab === 'import-playlists'"
 							v-if="isEditable()"
 						/>
 					</div>
-
-					<!--
-
-				<div
-					id="import-from-youtube-section"
-					 -->
 				</div>
 
 				<div id="second-column">
@@ -247,12 +257,21 @@ import Modal from "../../Modal.vue";
 import SongItem from "../../SongItem.vue";
 
 import Settings from "./Tabs/Settings.vue";
-import Youtube from "./Tabs/Youtube.vue";
+import AddSongs from "./Tabs/AddSongs.vue";
+import ImportPlaylists from "./Tabs/ImportPlaylists.vue";
 
 import utils from "../../../../js/utils";
 
 export default {
-	components: { Modal, draggable, Confirm, SongItem, Settings, Youtube },
+	components: {
+		Modal,
+		draggable,
+		Confirm,
+		SongItem,
+		Settings,
+		AddSongs,
+		ImportPlaylists
+	},
 	data() {
 		return {
 			utils,
@@ -601,7 +620,8 @@ export default {
 	.edit-playlist-modal .edit-playlist-modal-inner-container {
 		height: auto !important;
 
-		/deep/ .section {
+		/deep/ .section,
+		#tab-selection {
 			max-width: 100% !important;
 		}
 	}
@@ -612,8 +632,9 @@ export default {
 
 	#tab-selection {
 		display: flex;
-		overflow-x: auto;
+		// overflow-x: auto;
 		margin: 24px 10px 0 10px;
+		max-width: 600px;
 
 		.button {
 			border-radius: 5px 5px 0 0;
@@ -722,6 +743,12 @@ export default {
 		height: 100%;
 		overflow-y: auto;
 		flex-grow: 1;
+
+		#rearrange-songs-section {
+			.scrollable-list:not(:last-of-type) {
+				margin-bottom: 10px;
+			}
+		}
 	}
 }
 </style>