Added playlist search results to manage station modal

backend/logic/actions/playlists.js

@@ -230,8 +230,7 @@ export default {
 		async.waterfall(
 			[
 				next => {
-					if (!query || typeof query !== "string") next("Invalid query.");
-					else if (query.length < 3) next("Invalid query.");
+					if ((!query && query !== "") || typeof query !== "string") next("Invalid query.");
 					else next();
 				},
 
@@ -241,6 +240,7 @@ export default {
 						includeUser: true,
 						includeGenre: true,
 						includeOwn: true,
+						includeSongs: true,
 						userId: session.userId
 					})
 						.then(response => {
@@ -274,13 +274,17 @@ export default {
 		async.waterfall(
 			[
 				next => {
-					if (!query || typeof query !== "string") next("Invalid query.");
-					else if (query.length < 3) next("Invalid query.");
+					if ((!query && query !== "") || typeof query !== "string") next("Invalid query.");
 					else next();
 				},
 
 				next => {
-					PlaylistsModule.runJob("SEARCH", { query, includeGenre: true, includePrivate: true })
+					PlaylistsModule.runJob("SEARCH", {
+						query,
+						includeGenre: true,
+						includePrivate: true,
+						includeSongs: true
+					})
 						.then(response => {
 							next(null, response.playlists);
 						})

frontend/src/components/PlaylistItem.vue

@@ -12,6 +12,16 @@
 				>
 			</p>
 			<p class="item-description">
+				<span v-if="showOwner"
+					><a v-if="playlist.createdBy === 'Musare'" title="Musare"
+						>Musare</a
+					><user-id-to-username
+						v-else
+						:user-id="playlist.createdBy"
+						:link="true"
+					/>
+					•</span
+				>
 				{{ totalLength(playlist) }} •
 				{{ playlist.songs.length }}
 				{{ playlist.songs.length === 1 ? "song" : "songs" }}
@@ -24,11 +34,14 @@
 </template>
 
 <script>
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import utils from "../../js/utils";
 
 export default {
+	components: { UserIdToUsername },
 	props: {
-		playlist: { type: Object, default: () => {} }
+		playlist: { type: Object, default: () => {} },
+		showOwner: { type: Boolean, default: false }
 	},
 	data() {
 		return {

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -28,9 +28,10 @@
 			<div class="tab" v-show="tab === 'current'">
 				<div v-if="includedPlaylists.length > 0">
 					<playlist-item
-						:playlist="playlist"
 						v-for="(playlist, index) in includedPlaylists"
 						:key="'key-' + index"
+						:playlist="playlist"
+						:show-owner="true"
 					>
 						<div class="icons-group" slot="actions">
 							<confirm
@@ -80,19 +81,83 @@
 							class="input"
 							type="text"
 							placeholder="Enter your playlist query here..."
-							v-model="playlistQuery"
+							v-model="search.query"
 							@keyup.enter="searchForPlaylists()"
 						/>
 					</p>
 					<p class="control">
-						<a class="button is-info" href="#"
+						<a class="button is-info" @click="searchForPlaylists()"
 							><i class="material-icons icon-with-button"
 								>search</i
 							>Search</a
 						>
 					</p>
 				</div>
-				Searching genre and public user playlists has yet to be added.
+				<div v-if="search.results.length > 0">
+					<playlist-item
+						v-for="(playlist, index) in search.results"
+						:key="'searchKey-' + index"
+						:playlist="playlist"
+						:show-owner="true"
+					>
+						<div class="icons-group" slot="actions">
+							<confirm
+								v-if="
+									(isOwnerOrAdmin() ||
+										(station.type === 'community' &&
+											station.partyMode)) &&
+										isSelected(playlist._id)
+								"
+								@confirm="deselectPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="
+									(isOwnerOrAdmin() ||
+										(station.type === 'community' &&
+											station.partyMode)) &&
+										!isSelected(playlist._id)
+								"
+								@click="selectPlaylist(playlist._id)"
+								class="material-icons play-icon"
+								:content="
+									station.partyMode
+										? 'Request songs from this playlist'
+										: 'Play songs from this playlist'
+								"
+								v-tippy
+								>play_arrow</i
+							>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
+						</div>
+					</playlist-item>
+				</div>
 			</div>
 			<div
 				v-if="station.type === 'community'"
@@ -207,7 +272,10 @@ export default {
 	data() {
 		return {
 			tab: "current",
-			playlistQuery: ""
+			search: {
+				query: "",
+				results: []
+			}
 		};
 	},
 	computed: {
@@ -389,8 +457,8 @@ export default {
 			return selected;
 		},
 		searchForPlaylists() {
-			const query = this.playlistQuery;
-
+			const { query } = this.search;
+			console.log(111, query);
 			const action =
 				this.station.type === "official"
 					? "playlists.searchOfficial"
@@ -398,8 +466,11 @@ export default {
 
 			this.socket.dispatch(action, query, res => {
 				if (res.status === "success") {
-					console.log(res);
-				} else if (res.status === "error") new Toast(res.message);
+					this.search.results = res.data.playlists;
+				} else if (res.status === "error") {
+					this.search.results = [];
+					new Toast(res.message);
+				}
 			});
 		},
 		...mapActions("station", ["updatePrivatePlaylistQueueSelected"]),