feat(ManageStation): Added featured playlists frontend

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

@@ -48,6 +48,188 @@
 				</button>
 			</div>
 			<div class="tab" v-show="tab === 'search'">
+				<div v-if="featuredPlaylists.length > 0">
+					<label class="label"> Featured playlists </label>
+					<playlist-item
+						v-for="featuredPlaylist in featuredPlaylists"
+						:key="`searchKey-${featuredPlaylist._id}`"
+						:playlist="featuredPlaylist"
+						:show-owner="true"
+					>
+						<template #item-icon>
+							<i
+								class="material-icons"
+								v-if="
+									isAllowedToParty() &&
+									isSelected(featuredPlaylist._id)
+								"
+								content="This playlist is currently selected"
+								v-tippy
+							>
+								radio
+							</i>
+							<i
+								class="material-icons"
+								v-else-if="
+									isOwnerOrAdmin() &&
+									isPlaylistMode() &&
+									isIncluded(featuredPlaylist._id)
+								"
+								content="This playlist is currently included"
+								v-tippy
+							>
+								play_arrow
+							</i>
+							<i
+								class="material-icons excluded-icon"
+								v-else-if="
+									isOwnerOrAdmin() &&
+									isExcluded(featuredPlaylist._id)
+								"
+								content="This playlist is currently excluded"
+								v-tippy
+							>
+								block
+							</i>
+							<i
+								class="material-icons"
+								v-else
+								:content="
+									isPartyMode()
+										? 'This playlist is currently not selected or excluded'
+										: 'This playlist is currently not included or excluded'
+								"
+								v-tippy
+							>
+								play_disabled
+							</i>
+						</template>
+
+						<template #actions>
+							<i
+								v-if="isExcluded(featuredPlaylist._id)"
+								class="material-icons stop-icon"
+								content="This playlist is blacklisted in this station"
+								v-tippy="{ theme: 'info' }"
+								>play_disabled</i
+							>
+							<confirm
+								v-if="
+									isPartyMode() &&
+									isSelected(featuredPlaylist._id)
+								"
+								@confirm="
+									deselectPartyPlaylist(featuredPlaylist._id)
+								"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+									isPlaylistMode() &&
+									isIncluded(featuredPlaylist._id)
+								"
+								@confirm="
+									removeIncludedPlaylist(featuredPlaylist._id)
+								"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="
+									isPartyMode() &&
+									!isSelected(featuredPlaylist._id) &&
+									!isExcluded(featuredPlaylist._id)
+								"
+								@click="selectPartyPlaylist(featuredPlaylist)"
+								class="material-icons play-icon"
+								content="Request songs from this playlist"
+								v-tippy
+								>play_arrow</i
+							>
+							<i
+								v-if="
+									isOwnerOrAdmin() &&
+									isPlaylistMode() &&
+									!isIncluded(featuredPlaylist._id) &&
+									!isExcluded(featuredPlaylist._id)
+								"
+								@click="includePlaylist(featuredPlaylist)"
+								class="material-icons play-icon"
+								:content="'Play songs from this playlist'"
+								v-tippy
+								>play_arrow</i
+							>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+									!isExcluded(featuredPlaylist._id)
+								"
+								@confirm="
+									blacklistPlaylist(featuredPlaylist._id)
+								"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
+									v-tippy
+									>block</i
+								>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+									isExcluded(featuredPlaylist._id)
+								"
+								@confirm="
+									removeExcludedPlaylist(featuredPlaylist._id)
+								"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop blacklisting songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="featuredPlaylist.createdBy === myUserId"
+								@click="showPlaylist(featuredPlaylist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									featuredPlaylist.createdBy !== myUserId &&
+									(featuredPlaylist.privacy === 'public' ||
+										isAdmin())
+								"
+								@click="showPlaylist(featuredPlaylist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
+						</template>
+					</playlist-item>
+					<br />
+				</div>
 				<label class="label"> Search for a public playlist </label>
 				<div class="control is-grouped input-with-button">
 					<p class="control is-expanded">
@@ -665,6 +847,10 @@ export default {
 		nextPageResultsCount() {
 			return Math.min(this.search.pageSize, this.resultsLeftCount);
 		},
+		featuredPlaylists() {
+			if (this.search.results) return this.search.results.slice(0, 3); // TEMP
+			return [];
+		},
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
 			role: state => state.user.auth.role,