Merge branch 'odiffey-owen-editsong-search' into polishing

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

@@ -0,0 +1,98 @@
+<template>
+	<div class="musare-songs-tab">
+		<label class="label"> Search for a song on Musare </label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					placeholder="Enter your song query here..."
+					v-model="musareSearch.query"
+					@keyup.enter="searchForMusareSongs(1)"
+				/>
+			</p>
+			<p class="control">
+				<a class="button is-info" @click="searchForMusareSongs(1)"
+					><i class="material-icons icon-with-button">search</i
+					>Search</a
+				>
+			</p>
+		</div>
+		<div v-if="musareSearch.results.length > 0">
+			<song-item
+				v-for="song in musareSearch.results"
+				:key="song._id"
+				:song="song"
+				:disabled-actions="['addToPlaylist', 'edit']"
+			/>
+			<button
+				v-if="resultsLeftCount > 0"
+				class="button is-primary load-more-button"
+				@click="searchForMusareSongs(musareSearch.page + 1)"
+			>
+				Load {{ nextPageResultsCount }} more results
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+import SearchMusare from "@/mixins/SearchMusare.vue";
+
+import SongItem from "@/components/SongItem.vue";
+
+export default {
+	components: {
+		SongItem
+	},
+	mixins: [SearchMusare],
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editSong", {
+			song: state => state.song
+		})
+	},
+	mounted() {
+		this.musareSearch.query = this.song.title;
+		this.searchForMusareSongs(1);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.musare-songs-tab {
+	height: calc(100% - 32px);
+
+	#song-query-results {
+		height: calc(100% - 74px);
+		overflow: auto;
+
+		.search-query-item {
+			/deep/ .thumbnail-and-info {
+				width: calc(100% - 57px);
+			}
+
+			.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

@@ -413,10 +413,22 @@
 							>
 								YouTube
 							</button>
+							<button
+								class="button is-default"
+								:class="{ selected: tab === 'musare-songs' }"
+								ref="musare-songs-tab"
+								@click="showTab('musare-songs')"
+							>
+								Songs
+							</button>
 						</div>
 						<discogs class="tab" v-show="tab === 'discogs'" />
 						<reports class="tab" v-show="tab === 'reports'" />
 						<youtube class="tab" v-show="tab === 'youtube'" />
+						<musare-songs
+							class="tab"
+							v-show="tab === 'musare-songs'"
+						/>
 					</div>
 				</div>
 			</template>
@@ -539,6 +551,7 @@ import SaveButton from "../../SaveButton.vue";
 import Discogs from "./Tabs/Discogs.vue";
 import Reports from "./Tabs/Reports.vue";
 import Youtube from "./Tabs/Youtube.vue";
+import MusareSongs from "./Tabs/Songs.vue";
 
 export default {
 	components: {
@@ -548,7 +561,8 @@ export default {
 		Confirm,
 		Discogs,
 		Reports,
-		Youtube
+		Youtube,
+		MusareSongs
 	},
 	props: {
 		youtubeId: { type: String, default: null },