refactor: implemented EditSongs properly on admin/songs page

frontend/src/components/modals/EditSongs.vue

@@ -111,7 +111,7 @@
 				</footer>
 			</div>
 		</template>
-		<template #footer-actions="slotProps">
+		<template #footer-actions>
 			<div>
 				<button class="button is-primary" @click="editNextSong()">
 					Next
@@ -141,14 +141,6 @@ export default {
 	props: {},
 	data() {
 		return {
-			songIds: [
-				"58c8513977eadd0bfc3afced",
-				"58c8513977eadd0bfc3afcf3",
-				"58c8513977eadd0bfc3afd0c",
-				"58c8513977eadd0bfc3afd19",
-				"61a208911a62abe1765ed027",
-				"61a63326e32fe2f3c76fad61"
-			],
 			items: [],
 			currentSong: {},
 			closed: false
@@ -160,6 +152,9 @@ export default {
 				item => item.song._id === this.currentSong._id
 			);
 		},
+		...mapState("modals/editSongs", {
+			songIds: state => state.songIds
+		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})

frontend/src/pages/Admin/tabs/Songs.vue

@@ -275,7 +275,7 @@
 		</div>
 		<import-album v-if="modals.importAlbum" />
 		<edit-song v-if="modals.editSong" song-type="songs" :key="song._id" />
-		<edit-songs />
+		<edit-songs v-if="modals.editSongs" />
 		<report v-if="modals.report" />
 		<request-song v-if="modals.requestSong" />
 		<bulk-actions v-if="modals.bulkActions" :type="bulkActionsType" />
@@ -680,12 +680,9 @@ export default {
 			this.openModal("editSong");
 		},
 		editMany(selectedRows) {
-			if (selectedRows.length === 1) {
-				this.editSong(selectedRows[0]._id);
-				this.openModal("editSong");
-			} else {
-				new Toast("Bulk editing not yet implemented.");
-			}
+			const songIds = selectedRows.map(row => row._id);
+			this.editSongs(songIds);
+			this.openModal("editSongs");
 		},
 		verifyOne(songId) {
 			this.socket.dispatch("songs.verify", songId, res => {
@@ -791,6 +788,7 @@ export default {
 			};
 		},
 		...mapActions("modals/editSong", ["editSong"]),
+		...mapActions("modals/editSongs", ["editSongs"]),
 		...mapActions("modals/confirm", ["updateConfirmMessage"]),
 		...mapActions("modalVisibility", ["openModal"])
 	}

frontend/src/store/index.js

@@ -10,6 +10,7 @@ import station from "./modules/station";
 import admin from "./modules/admin";
 
 import editSongModal from "./modules/modals/editSong";
+import editSongsModal from "./modules/modals/editSongs";
 import importAlbumModal from "./modules/modals/importAlbum";
 import editPlaylistModal from "./modules/modals/editPlaylist";
 import manageStationModal from "./modules/modals/manageStation";
@@ -31,6 +32,7 @@ export default createStore({
 			namespaced: true,
 			modules: {
 				editSong: editSongModal,
+				editSongs: editSongsModal,
 				importAlbum: importAlbumModal,
 				editPlaylist: editPlaylistModal,
 				manageStation: manageStationModal,

frontend/src/store/modules/modalVisibility.js

@@ -16,6 +16,7 @@ const state = {
 		editNews: false,
 		editUser: false,
 		editSong: false,
+		editSongs: false,
 		importAlbum: false,
 		viewReport: false,
 		viewPunishment: false,

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

@@ -0,0 +1,17 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		songIds: []
+	},
+	getters: {},
+	actions: {
+		editSongs: ({ commit }, songIds) => commit("editSongs", songIds)
+	},
+	mutations: {
+		editSongs(state, songIds) {
+			state.songIds = songIds;
+		}
+	}
+};