refactor (Import Album): Prefill discogs toggle as slider

frontend/src/components/modals/ImportAlbum.vue

@@ -308,16 +308,20 @@
 				<button class="button is-primary" @click="editSongs()">
 					Edit songs
 				</button>
-				<button
-					:class="{
-						button: true,
-						'is-success': prefillDiscogs,
-						'is-danger': !prefillDiscogs
-					}"
-					@click="togglePrefillDiscogs()"
-				>
-					Prefill Discogs
-				</button>
+				<p class="is-expanded checkbox-control">
+					<label class="switch">
+						<input
+							type="checkbox"
+							id="prefill-discogs"
+							v-model="localPrefillDiscogs"
+						/>
+						<span class="slider round"></span>
+					</label>
+
+					<label for="prefill-discogs">
+						<p>Prefill Discogs</p>
+					</label>
+				</p>
 			</template>
 		</modal>
 	</div>
@@ -371,6 +375,17 @@ export default {
 				);
 			}
 		},
+		localPrefillDiscogs: {
+			get() {
+				return this.$store.state.modals.importAlbum.prefillDiscogs;
+			},
+			set(prefillDiscogs) {
+				this.$store.commit(
+					"modals/importAlbum/updatePrefillDiscogs",
+					prefillDiscogs
+				);
+			}
+		},
 		...mapState("modals/importAlbum", {
 			discogsTab: state => state.discogsTab,
 			discogsAlbum: state => state.discogsAlbum,

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

@@ -25,7 +25,8 @@ export default {
 		updateEditingSongs: ({ commit }, editingSongs) =>
 			commit("updateEditingSongs", editingSongs),
 		resetPlaylistSongs: ({ commit }) => commit("resetPlaylistSongs"),
-		togglePrefillDiscogs: ({ commit }) => commit("togglePrefillDiscogs"),
+		updatePrefillDiscogs: ({ commit }, updatedPrefill) =>
+			commit("updatePrefillDiscogs", updatedPrefill),
 		updatePlaylistSong: ({ commit }, updatedSong) =>
 			commit("updatePlaylistSong", updatedSong)
 	},
@@ -62,8 +63,8 @@ export default {
 				JSON.stringify(state.originalPlaylistSongs)
 			);
 		},
-		togglePrefillDiscogs(state) {
-			state.prefillDiscogs = !state.prefillDiscogs;
+		updatePrefillDiscogs(state, updatedPrefill) {
+			state.prefillDiscogs = updatedPrefill;
 		},
 		updatePlaylistSong(state, updatedSong) {
 			state.playlistSongs.forEach((song, index) => {