Made some improvements to the Kris ManageStation modal, and a few other improvements

frontend/src/App.vue

@@ -2,7 +2,11 @@
 	<div class="upper-container">
 		<banned v-if="banned" />
 		<div v-else class="upper-container">
-			<router-view :key="$route.fullPath" class="main-container" />
+			<router-view
+				:key="$route.fullPath"
+				class="main-container"
+				:class="{ 'main-container-modal-active': aModalIsOpen }"
+			/>
 			<what-is-new v-show="modals.whatIsNew" />
 			<login-modal v-if="modals.login" />
 			<register-modal v-if="modals.register" />
@@ -47,7 +51,10 @@ export default {
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
-		})
+		}),
+		aModalIsOpen() {
+			return Object.keys(this.currentlyActive).length > 0;
+		}
 	},
 	watch: {
 		socketConnected(connected) {
@@ -324,6 +331,11 @@ textarea {
 	}
 }
 
+.main-container.main-container-modal-active {
+	height: 100% !important;
+	overflow: hidden;
+}
+
 a {
 	color: var(--primary-color);
 	text-decoration: none;

frontend/src/components/PlaylistItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="playlist-item universal-item">
-		<slot name="left-icon" />
-		<div class="left-part">
+		<slot name="item-icon" />
+		<div class="item-title-description">
 			<p class="item-title">
 				{{ playlist.displayName }}
 				<i
@@ -23,9 +23,9 @@
 					/>
 					•</span
 				>
-				{{ totalLength(playlist) }} •
-				{{ playlist.songs.length }}
-				{{ playlist.songs.length === 1 ? "song" : "songs" }}
+				<span :title="playlistLength">
+					{{ playlistLength }}
+				</span>
 			</p>
 		</div>
 		<div class="universal-item-actions">
@@ -49,6 +49,13 @@ export default {
 			utils
 		};
 	},
+	computed: {
+		playlistLength() {
+			return `${this.totalLength(this.playlist)} • ${
+				this.playlist.songs.length
+			} ${this.playlist.songs.length === 1 ? "song" : "songs"}`;
+		}
+	},
 	methods: {
 		totalLength(playlist) {
 			let length = 0;
@@ -76,28 +83,31 @@ export default {
 .playlist-item {
 	width: 100%;
 	height: 72px;
+	column-gap: 7.5px;
 
-	.item-title {
-		color: var(--dark-grey-2);
-		font-size: 20px;
-		line-height: 23px;
-		margin-bottom: 0;
-		display: flex;
-		align-items: center;
+	.item-title-description {
+		flex: 1;
+		overflow: hidden;
 
-		.private-playlist-icon {
-			color: var(--dark-pink);
-			font-size: 18px;
-			margin-left: 5px;
-		}
-	}
+		.item-title {
+			color: var(--dark-grey-2);
+			font-size: 20px;
+			line-height: 23px;
+			margin-bottom: 0;
+			display: flex;
+			align-items: center;
 
-	.left-part {
-		flex: 1;
-		padding: 12px;
+			.private-playlist-icon {
+				color: var(--dark-pink);
+				font-size: 18px;
+				margin-left: 5px;
+			}
+		}
 	}
 
 	.universal-item-actions {
+		margin-left: none;
+
 		div {
 			display: flex;
 			align-items: center;
@@ -108,10 +118,6 @@ export default {
 				width: 100%;
 				font-size: 17px;
 				height: 36px;
-
-				&:not(:last-of-type) {
-					margin-right: 5px;
-				}
 			}
 		}
 	}

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

@@ -4,6 +4,7 @@
 			<div class="tab-selection">
 				<button
 					class="button is-default"
+					ref="search-tab"
 					:class="{ selected: tab === 'search' }"
 					@click="showTab('search')"
 				>
@@ -20,6 +21,7 @@
 				</button>
 				<button
 					class="button is-default"
+					ref="party-tab"
 					:class="{ selected: tab === 'party' }"
 					v-if="isPartyMode()"
 					@click="showTab('party')"
@@ -28,6 +30,7 @@
 				</button>
 				<button
 					class="button is-default"
+					ref="included-tab"
 					:class="{ selected: tab === 'included' }"
 					v-if="isPlaylistMode()"
 					@click="showTab('included')"
@@ -36,6 +39,7 @@
 				</button>
 				<button
 					class="button is-default"
+					ref="excluded-tab"
 					:class="{ selected: tab === 'excluded' }"
 					@click="showTab('excluded')"
 				>
@@ -71,7 +75,7 @@
 					>
 						<i
 							class="material-icons"
-							slot="left-icon"
+							slot="item-icon"
 							v-if="
 								isAllowedToParty() && isSelected(playlist._id)
 							"
@@ -82,7 +86,7 @@
 						</i>
 						<i
 							class="material-icons"
-							slot="left-icon"
+							slot="item-icon"
 							v-else-if="
 								isOwnerOrAdmin() &&
 									isPlaylistMode() &&
@@ -95,7 +99,7 @@
 						</i>
 						<i
 							class="material-icons excluded-icon"
-							slot="left-icon"
+							slot="item-icon"
 							v-else-if="
 								isOwnerOrAdmin() && isExcluded(playlist._id)
 							"
@@ -106,7 +110,7 @@
 						</i>
 						<i
 							class="material-icons"
-							slot="left-icon"
+							slot="item-icon"
 							v-else
 							:content="
 								isPartyMode()
@@ -270,7 +274,7 @@
 						>
 							<i
 								class="material-icons"
-								slot="left-icon"
+								slot="item-icon"
 								v-if="
 									isAllowedToParty() &&
 										isSelected(playlist._id)
@@ -282,7 +286,7 @@
 							</i>
 							<i
 								class="material-icons"
-								slot="left-icon"
+								slot="item-icon"
 								v-else-if="
 									isOwnerOrAdmin() &&
 										isPlaylistMode() &&
@@ -295,7 +299,7 @@
 							</i>
 							<i
 								class="material-icons excluded-icon"
-								slot="left-icon"
+								slot="item-icon"
 								v-else-if="
 									isOwnerOrAdmin() && isExcluded(playlist._id)
 								"
@@ -306,7 +310,7 @@
 							</i>
 							<i
 								class="material-icons"
-								slot="left-icon"
+								slot="item-icon"
 								v-else
 								:content="
 									isPartyMode()
@@ -437,7 +441,7 @@
 					>
 						<i
 							class="material-icons"
-							slot="left-icon"
+							slot="item-icon"
 							content="This playlist is currently selected"
 							v-tippy
 						>
@@ -508,7 +512,7 @@
 					>
 						<i
 							class="material-icons"
-							slot="left-icon"
+							slot="item-icon"
 							content="This playlist is currently included"
 							v-tippy
 						>
@@ -578,7 +582,7 @@
 					>
 						<i
 							class="material-icons excluded-icon"
-							slot="left-icon"
+							slot="item-icon"
 							content="This playlist is currently excluded"
 							v-tippy
 						>
@@ -664,6 +668,7 @@ export default {
 			partyPlaylists: state => state.station.partyPlaylists
 		}),
 		...mapState("modals/manageStation", {
+			parentTab: state => state.tab,
 			originalStation: state => state.originalStation,
 			station: state => state.station,
 			includedPlaylists: state => state.includedPlaylists,
@@ -674,6 +679,18 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
+	watch: {
+		// eslint-disable-next-line func-names
+		parentTab(value) {
+			if (value === "playlists") {
+				if (this.tab === "included" && this.isPartyMode()) {
+					this.showTab("party");
+				} else if (this.tab === "party" && this.isPlaylistMode()) {
+					this.showTab("included");
+				}
+			}
+		}
+	},
 	mounted() {
 		if (this.station.type === "community" && this.station.partyMode)
 			this.showTab("search");

frontend/src/components/modals/ManageStationKris/Tabs/Songs.vue

@@ -5,25 +5,18 @@
 				<button
 					class="button is-default"
 					:class="{ selected: tab === 'search' }"
-					v-if="
-						station.type === 'community' &&
-							station.partyMode &&
-							(isOwnerOrAdmin() || !station.locked)
-					"
+					v-if="isAllowedToParty()"
 					@click="showTab('search')"
 				>
 					Search
 				</button>
 				<button
 					class="button is-default"
-					:class="{ selected: tab === 'stationPlaylist' }"
-					v-if="
-						isOwnerOrAdmin() &&
-							!(station.type === 'community' && station.partyMode)
-					"
-					@click="showTab('stationPlaylist')"
+					:class="{ selected: tab === 'included' }"
+					v-if="isOwnerOrAdmin() && isPlaylistMode()"
+					@click="showTab('included')"
 				>
-					Station playlist
+					Included
 				</button>
 				<button
 					class="button is-default"
@@ -169,14 +162,14 @@
 			</div>
 			<div
 				class="tab"
-				v-show="tab === 'stationPlaylist'"
+				v-show="tab === 'included'"
 				v-if="
 					isOwnerOrAdmin() &&
 						!(station.type === 'community' && station.partyMode)
 				"
 			>
 				<div v-if="stationPlaylist.songs.length > 0">
-					<div id="playlist-info-section" class="section">
+					<div id="playlist-info-section">
 						<h5>Song Count: {{ stationPlaylist.songs.length }}</h5>
 						<h5>Duration: {{ totalLength(stationPlaylist) }}</h5>
 					</div>
@@ -270,6 +263,7 @@ export default {
 			role: state => state.user.auth.role
 		}),
 		...mapState("modals/manageStation", {
+			parentTab: state => state.tab,
 			station: state => state.station,
 			originalStation: state => state.originalStation,
 			excludedPlaylists: state => state.excludedPlaylists,
@@ -279,19 +273,28 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	mounted() {
-		if (
-			this.isOwnerOrAdmin() &&
-			!(this.station.type === "community" && this.station.partyMode)
-		)
-			this.showTab("stationPlaylist");
+	watch: {
+		// eslint-disable-next-line func-names
+		parentTab(value) {
+			if (value === "songs") {
+				if (this.tab === "search" && this.isPlaylistMode()) {
+					this.showTab("included");
+				} else if (this.tab === "included" && this.isPartyMode()) {
+					this.showTab("search");
+				}
+			}
+		}
 	},
 	methods: {
 		showTab(tab) {
 			this.tab = tab;
 		},
 		isOwner() {
-			return this.loggedIn && this.userId === this.station.owner;
+			return (
+				this.loggedIn &&
+				this.station &&
+				this.userId === this.station.owner
+			);
 		},
 		isAdmin() {
 			return this.loggedIn && this.role === "admin";
@@ -299,6 +302,24 @@ export default {
 		isOwnerOrAdmin() {
 			return this.isOwner() || this.isAdmin();
 		},
+		isPartyMode() {
+			return (
+				this.station &&
+				this.station.type === "community" &&
+				this.station.partyMode
+			);
+		},
+		isAllowedToParty() {
+			return (
+				this.station &&
+				this.isPartyMode() &&
+				(!this.station.locked || this.isOwnerOrAdmin()) &&
+				this.loggedIn
+			);
+		},
+		isPlaylistMode() {
+			return this.station && !this.isPartyMode();
+		},
 		totalLength(playlist) {
 			let length = 0;
 			playlist.songs.forEach(song => {

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

@@ -689,6 +689,7 @@ export default {
 .manage-station-modal.modal .modal-card-body .custom-modal-body {
 	display: flex;
 	flex-wrap: wrap;
+	height: 100%;
 
 	.section {
 		display: flex;