feat(ImportPlaylist): Added toggle to edit songs after import

frontend/src/components/modals/ImportPlaylist.vue

@@ -39,11 +39,27 @@
 				</div>
 			</div>
 		</template>
+		<template #footer>
+			<p class="is-expanded checkbox-control">
+				<label class="switch">
+					<input
+						type="checkbox"
+						id="edit-imported-songs"
+						v-model="localEditSongs"
+					/>
+					<span class="slider round"></span>
+				</label>
+
+				<label for="edit-imported-songs">
+					<p>Edit Songs</p>
+				</label>
+			</p>
+		</template>
 	</modal>
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
@@ -55,6 +71,18 @@ export default {
 	components: { Modal },
 	mixins: [SearchYoutube],
 	computed: {
+		localEditSongs: {
+			get() {
+				return this.$store.state.modals.importPlaylist
+					.editImportedSongs;
+			},
+			set(editImportedSongs) {
+				this.$store.commit(
+					"modals/importPlaylist/updateEditImportedSongs",
+					editImportedSongs
+				);
+			}
+		},
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
 			station: state => state.station.station
@@ -98,13 +126,31 @@ export default {
 				res => {
 					isImportingPlaylist = false;
 
+					if (
+						this.localEditSongs &&
+						res.status === "success" &&
+						res.songs &&
+						res.songs.length > 0
+					) {
+						this.editSongs(
+							res.songs.map(song => ({
+								...song,
+								songId: song._id
+							}))
+						);
+						this.openModal("editSongs");
+					}
+
+					this.closeModal("importPlaylist");
 					return new Toast({
 						content: res.message,
 						timeout: 20000
 					});
 				}
 			);
-		}
+		},
+		...mapActions("modals/editSongs", ["editSongs"]),
+		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };
 </script>

frontend/src/store/index.js

@@ -12,6 +12,7 @@ import admin from "./modules/admin";
 import editSongModal from "./modules/modals/editSong";
 import editSongsModal from "./modules/modals/editSongs";
 import importAlbumModal from "./modules/modals/importAlbum";
+import importPlaylistModal from "./modules/modals/importPlaylist";
 import editPlaylistModal from "./modules/modals/editPlaylist";
 import manageStationModal from "./modules/modals/manageStation";
 import editUserModal from "./modules/modals/editUser";
@@ -34,6 +35,7 @@ export default createStore({
 				editSong: editSongModal,
 				editSongs: editSongsModal,
 				importAlbum: importAlbumModal,
+				importPlaylist: importPlaylistModal,
 				editPlaylist: editPlaylistModal,
 				manageStation: manageStationModal,
 				editUser: editUserModal,

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

@@ -0,0 +1,18 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		editImportedSongs: false
+	},
+	getters: {},
+	actions: {
+		updateEditImportedSongs: ({ commit }, editImportedSongs) =>
+			commit("updateEditImportedSongs", editImportedSongs)
+	},
+	mutations: {
+		updateEditImportedSongs(state, editImportedSongs) {
+			state.editImportedSongs = editImportedSongs;
+		}
+	}
+};