Various fixes and improvements to ImportAlbum

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

@@ -364,7 +364,7 @@ export default {
 		}
 
 		.bottom-container-field:last-of-type {
-			margin-bottom: 0;
+			margin-bottom: 8px;
 		}
 	}
 

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

@@ -347,6 +347,13 @@
 				>
 					Save, verify and close
 				</button>
+				<button
+					class="button is-danger"
+					@click="stopEditingSongs()"
+					v-if="modals.importAlbum && editingSongs"
+				>
+					Stop editing songs
+				</button>
 				<div class="right">
 					<button
 						v-if="song.status !== 'verified'"
@@ -515,6 +522,9 @@ export default {
 			originalSong: state => state.originalSong,
 			reports: state => state.reports
 		}),
+		...mapState("modals/importAlbum", {
+			editingSongs: state => state.editingSongs
+		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
 		}),
@@ -963,6 +973,10 @@ export default {
 		});
 	},
 	methods: {
+		stopEditingSongs() {
+			this.updateEditingSongs(false);
+			this.closeModal("editSong");
+		},
 		importAlbum(result) {
 			this.selectDiscogsAlbum(result);
 			this.openModal("importAlbum");
@@ -1399,7 +1413,10 @@ export default {
 		// 		new Toast(res.message);
 		// 	});
 		// },
-		...mapActions("modals/importAlbum", ["selectDiscogsAlbum"]),
+		...mapActions("modals/importAlbum", [
+			"selectDiscogsAlbum",
+			"updateEditingSongs"
+		]),
 		...mapActions({
 			showTab(dispatch, payload) {
 				this.$refs[`${payload}-tab`].scrollIntoView();

frontend/src/components/modals/ImportAlbum.vue

@@ -3,54 +3,6 @@
 		<modal title="Import Album" class="import-album-modal">
 			<div slot="body" class="import-album-modal-body">
 				<div class="search-discogs-album">
-					<div
-						class="selected-discogs-info"
-						v-if="!discogsAlbum || !discogsAlbum.album"
-					>
-						<p class="selected-discogs-info-none">None</p>
-					</div>
-					<div
-						class="selected-discogs-info"
-						v-if="discogsAlbum && discogsAlbum.album"
-					>
-						<div class="top-container">
-							<img :src="discogsAlbum.album.albumArt" />
-							<div class="right-container">
-								<p class="album-title">
-									{{ discogsAlbum.album.title }}
-								</p>
-								<div class="bottom-row">
-									<p class="type-year">
-										<span>{{
-											discogsAlbum.album.type
-										}}</span>
-										•
-										<span>{{
-											discogsAlbum.album.year
-										}}</span>
-									</p>
-								</div>
-							</div>
-						</div>
-						<div class="bottom-container">
-							<p class="bottom-container-field">
-								Artists:
-								<span>{{
-									discogsAlbum.album.artists.join(", ")
-								}}</span>
-							</p>
-							<p class="bottom-container-field">
-								Genres:
-								<span>{{
-									discogsAlbum.album.genres.join(", ")
-								}}</span>
-							</p>
-							<p class="bottom-container-field">
-								Data quality:
-								<span>{{ discogsAlbum.dataQuality }}</span>
-							</p>
-						</div>
-					</div>
 					<p class="control is-expanded">
 						<label class="label">Search query</label>
 						<input
@@ -339,7 +291,6 @@ export default {
 			isImportingPlaylist: false,
 			trackSongs: [],
 			songsToEdit: [],
-			editingSongs: false,
 			currentEditSongIndex: 0,
 			search: {
 				playlist: {
@@ -368,7 +319,8 @@ export default {
 			}
 		},
 		...mapState("modals/importAlbum", {
-			discogsAlbum: state => state.discogsAlbum
+			discogsAlbum: state => state.discogsAlbum,
+			editingSongs: state => state.editingSongs
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
@@ -379,8 +331,8 @@ export default {
 	},
 	watch: {
 		/* eslint-disable */
-		"modals.editSong": function(test) {
-			if (!test) this.editNextSong();
+		"modals.editSong": function(value) {
+			if (!value) this.editNextSong();
 		}
 		/* eslint-enable */
 	},
@@ -390,6 +342,7 @@ export default {
 	},
 	methods: {
 		editSongs() {
+			this.updateEditingSongs(true);
 			this.songsToEdit = [];
 			this.trackSongs.forEach((songs, index) => {
 				songs.forEach(song => {
@@ -410,12 +363,14 @@ export default {
 			this.editNextSong();
 		},
 		editNextSong() {
-			this.editSong({
-				_id: this.songsToEdit[this.currentEditSongIndex].songId,
-				discogs: this.songsToEdit[this.currentEditSongIndex].discogs
-			});
-			this.currentEditSongIndex += 1;
-			this.openModal("editSong");
+			if (this.editingSongs) {
+				this.editSong({
+					_id: this.songsToEdit[this.currentEditSongIndex].songId,
+					discogs: this.songsToEdit[this.currentEditSongIndex].discogs
+				});
+				this.currentEditSongIndex += 1;
+				this.openModal("editSong");
+			}
 		},
 		log(evt) {
 			window.console.log(evt);
@@ -484,7 +439,8 @@ export default {
 					if (
 						playlistSong.title
 							.toLowerCase()
-							.indexOf(track.title.toLowerCase()) !== -1
+							.trim()
+							.indexOf(track.title.toLowerCase().trim()) !== -1
 					) {
 						playlistSongs.splice(
 							playlistSongs.indexOf(playlistSong),
@@ -497,6 +453,10 @@ export default {
 
 			this.updatePlaylistSongs(playlistSongs);
 		},
+		resetTrackSongs() {
+			this.resetPlaylistSongs();
+			this.trackSongs = this.discogsAlbum.tracks.map(() => []);
+		},
 		selectAlbum(result) {
 			this.selectDiscogsAlbum(result);
 			this.clearDiscogsResults();
@@ -600,7 +560,9 @@ export default {
 			"toggleDiscogsAlbum",
 			"setPlaylistSongs",
 			"updatePlaylistSongs",
-			"selectDiscogsAlbum"
+			"selectDiscogsAlbum",
+			"updateEditingSongs",
+			"resetPlaylistSongs"
 		]),
 		...mapActions("modals/editSong", ["editSong"]),
 		...mapActions("modalVisibility", ["closeModal", "openModal"])
@@ -624,6 +586,10 @@ export default {
 		}
 
 		.modal-card-foot {
+			.button {
+				margin: 0;
+			}
+
 			div div {
 				margin-right: 5px;
 			}
@@ -726,23 +692,7 @@ export default {
 			}
 
 			.bottom-container-field:last-of-type {
-				margin-bottom: 0;
-			}
-		}
-
-		.selected-discogs-info {
-			background-color: var(--white);
-			border: 1px solid var(--purple);
-			border-radius: 5px;
-			margin-bottom: 16px;
-
-			.selected-discogs-info-none {
-				font-size: 18px;
-				text-align: center;
-			}
-
-			.bottom-row > p {
-				flex: 1;
+				margin-bottom: 8px;
 			}
 		}
 
@@ -777,7 +727,6 @@ export default {
 				margin-top: -1px;
 				line-height: 16px;
 				display: flex;
-				cursor: pointer;
 
 				span {
 					font-weight: 600;
@@ -793,11 +742,6 @@ export default {
 					flex: 1;
 				}
 			}
-
-			.track:hover,
-			.track:focus {
-				background-color: var(--light-grey);
-			}
 		}
 
 		.discogs-load-more {

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

@@ -15,7 +15,8 @@ export default {
 			// tracks: []
 		},
 		originalPlaylistSongs: [],
-		playlistSongs: []
+		playlistSongs: [],
+		editingSongs: false
 	},
 	getters: {},
 	actions: {
@@ -27,7 +28,10 @@ export default {
 		setPlaylistSongs: ({ commit }, playlistSongs) =>
 			commit("setPlaylistSongs", playlistSongs),
 		updatePlaylistSongs: ({ commit }, playlistSongs) =>
-			commit("updatePlaylistSongs", playlistSongs)
+			commit("updatePlaylistSongs", playlistSongs),
+		updateEditingSongs: ({ commit }, editingSongs) =>
+			commit("updateEditingSongs", editingSongs),
+		resetPlaylistSongs: ({ commit }) => commit("resetPlaylistSongs")
 	},
 	mutations: {
 		selectDiscogsAlbum(state, discogsAlbum) {
@@ -49,6 +53,14 @@ export default {
 		},
 		updatePlaylistSongs(state, playlistSongs) {
 			state.playlistSongs = JSON.parse(JSON.stringify(playlistSongs));
+		},
+		updateEditingSongs(state, editingSongs) {
+			state.editingSongs = editingSongs;
+		},
+		resetPlaylistSongs(state) {
+			state.playlistSongs = JSON.parse(
+				JSON.stringify(state.originalPlaylistSongs)
+			);
 		}
 	}
 };