feat(EditSong): added YouTube tab

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -0,0 +1,125 @@
+<template>
+	<div class="youtube-tab">
+		<label class="label">
+			Search for a song from YouTube
+		</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					placeholder="Enter your YouTube query here..."
+					v-model="search.songs.query"
+					autofocus
+					@keyup.enter="searchForSongs()"
+				/>
+			</p>
+			<p class="control">
+				<a
+					class="button is-info"
+					@click.prevent="searchForSongs()"
+					href="#"
+					><i class="material-icons icon-with-button">search</i
+					>Search</a
+				>
+			</p>
+		</div>
+
+		<div v-if="search.songs.results.length > 0" id="song-query-results">
+			<search-query-item
+				v-for="result in search.songs.results"
+				:key="result.id"
+				:result="result"
+			>
+				<template #actions>
+					<i
+						class="material-icons icon-selected"
+						v-if="result.id === song.youtubeId"
+						key="selected"
+						>radio_button_checked
+					</i>
+					<i
+						class="material-icons icon-not-selected"
+						v-else
+						@click.prevent="updateYoutubeId(result.id)"
+						key="not-selected"
+						>radio_button_unchecked
+					</i>
+				</template>
+			</search-query-item>
+
+			<a
+				class="button is-primary load-more-button"
+				@click.prevent="loadMoreSongs()"
+				href="#"
+			>
+				Load more...
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters, mapState, mapActions } from "vuex";
+
+import SearchYoutube from "@/mixins/SearchYoutube.vue";
+
+import SearchQueryItem from "../../../SearchQueryItem.vue";
+
+export default {
+	components: { SearchQueryItem },
+	mixins: [SearchYoutube],
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editSong", {
+			song: state => state.song
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	mounted() {},
+	methods: {
+		...mapActions("modals/editSong", ["updateYoutubeId"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.night-mode {
+}
+
+.youtube-tab {
+	height: calc(100% - 32px);
+
+	#song-query-results {
+		height: calc(100% - 74px);
+		overflow: auto;
+
+		.search-query-item {
+			/deep/ .thumbnail-and-info {
+				width: calc(100% - 29px);
+			}
+
+			.icon-selected {
+				color: var(--green) !important;
+			}
+
+			.icon-not-selected {
+				color: var(--grey) !important;
+			}
+		}
+
+		.search-query-item:not(:last-of-type) {
+			margin-bottom: 10px;
+		}
+
+		.load-more-button {
+			width: 100%;
+			margin-top: 10px;
+		}
+	}
+}
+</style>

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

@@ -325,9 +325,18 @@
 							>
 								Reports ({{ reports.length }})
 							</button>
+							<button
+								class="button is-default"
+								:class="{ selected: tab === 'youtube' }"
+								ref="youtube-tab"
+								@click="showTab('youtube')"
+							>
+								YouTube
+							</button>
 						</div>
 						<discogs class="tab" v-show="tab === 'discogs'" />
 						<reports class="tab" v-show="tab === 'reports'" />
+						<youtube class="tab" v-show="tab === 'youtube'" />
 					</div>
 				</div>
 			</template>
@@ -445,9 +454,18 @@ import SaveButton from "../../SaveButton.vue";
 
 import Discogs from "./Tabs/Discogs.vue";
 import Reports from "./Tabs/Reports.vue";
+import Youtube from "./Tabs/Youtube.vue";
 
 export default {
-	components: { Modal, FloatingBox, SaveButton, Confirm, Discogs, Reports },
+	components: {
+		Modal,
+		FloatingBox,
+		SaveButton,
+		Confirm,
+		Discogs,
+		Reports,
+		Youtube
+	},
 	props: {
 		youtubeId: { type: String, default: null },
 		songId: { type: String, default: null },

frontend/src/store/modules/modals/editSong.js

@@ -35,7 +35,10 @@ export default {
 		updateReports: ({ commit }, reports) =>
 			commit("updateReports", reports),
 		resolveReport: ({ commit }, reportId) =>
-			commit("resolveReport", reportId)
+			commit("resolveReport", reportId),
+		updateYoutubeId: ({ commit }, youtubeId) => {
+			commit("updateYoutubeId", youtubeId);
+		}
 	},
 	mutations: {
 		showTab(state, tab) {
@@ -86,6 +89,9 @@ export default {
 			state.reports = state.reports.filter(
 				report => report._id !== reportId
 			);
+		},
+		updateYoutubeId(state, youtubeId) {
+			state.song.youtubeId = youtubeId;
 		}
 	}
 };