refactor(Confirm): migrated confirm modal to new modal system

frontend/src/App.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="upper-container">
-		<modal-manager />
 		<banned v-if="banned" />
 		<div v-else class="upper-container">
 			<router-view
@@ -10,6 +9,7 @@
 			/>
 		</div>
 		<falling-snow v-if="christmas" />
+		<modal-manager />
 	</div>
 </template>
 

frontend/src/components/ModalManager.vue

@@ -32,7 +32,8 @@ export default {
 			bulkActions: "BulkActions.vue",
 			viewPunishment: "ViewPunishment.vue",
 			removeAccount: "RemoveAccount.vue",
-			importAlbum: "ImportAlbum.vue"
+			importAlbum: "ImportAlbum.vue",
+			confirm: "Confirm.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/Confirm.vue

@@ -17,35 +17,30 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapActions } from "vuex";
+
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 export default {
-	emits: ["confirmed"],
-	data() {
-		return {
-			modalName: ""
-		};
+	props: {
+		modalUuid: { type: String, default: "" }
 	},
 	computed: {
-		...mapState("modalVisibility", {
-			currentlyActive: state => state.currentlyActive
-		}),
-		...mapState("modals/confirm", {
+		...mapModalState("modals/confirm/MODAL_UUID", {
 			message: state => state.message
 		})
 	},
-	mounted() {
-		// eslint-disable-next-line
-		this.modalName = this.currentlyActive[0];
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "confirm", this.modalUuid]);
 	},
 	methods: {
 		confirmAction() {
-			this.updateConfirmMessage("");
-			this.$emit("confirmed");
-			this.closeModal(this.modalName);
+			this.confirm();
+			this.closeCurrentModal();
 		},
-		...mapActions("modals/confirm", ["updateConfirmMessage"]),
-		...mapActions("modalVisibility", ["closeModal"])
+		...mapModalActions("modals/confirm/MODAL_UUID", ["confirm"]),
+		...mapActions("modalVisibility", ["closeCurrentModal"])
 	}
 };
 </script>

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

@@ -631,13 +631,11 @@
 				</span>
 			</template>
 		</floating-box>
-		<confirm v-if="modals.editSongConfirm" @confirmed="handleConfirmed()" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapActions } from "vuex";
-import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 
 import aw from "@/aw";
@@ -662,10 +660,7 @@ export default {
 		Discogs,
 		Reports,
 		Youtube,
-		MusareSongs,
-		Confirm: defineAsyncComponent(() =>
-			import("@/components/modals/Confirm.vue")
-		)
+		MusareSongs
 	},
 	props: {
 		// songId: { type: String, default: null },
@@ -701,11 +696,6 @@ export default {
 			activityWatchVideoDataInterval: null,
 			activityWatchVideoLastStatus: "",
 			activityWatchVideoLastStartDuration: "",
-			confirm: {
-				message: "",
-				action: "",
-				params: null
-			},
 			recommendedGenres: [
 				"Blues",
 				"Country",
@@ -1769,22 +1759,22 @@ export default {
 				new Toast(res.message);
 			});
 		},
-		confirmAction(confirm) {
-			this.confirm = confirm;
-			this.updateConfirmMessage(confirm.message);
-			this.openModal("editSongConfirm");
+		confirmAction({ message, action, params }) {
+			this.openModal({
+				modal: "confirm",
+				data: {
+					message,
+					action,
+					params,
+					onCompleted: this.handleConfirmed
+				}
+			});
 		},
-		handleConfirmed() {
-			const { action, params } = this.confirm;
+		handleConfirmed({ action, params }) {
 			if (typeof this[action] === "function") {
 				if (params) this[action](params);
 				else this[action]();
 			}
-			this.confirm = {
-				message: "",
-				action: "",
-				params: null
-			};
 		},
 		onCloseModal() {
 			const songStringified = JSON.stringify({
@@ -1833,7 +1823,6 @@ export default {
 			"updateReports",
 			"setPlaybackRate"
 		]),
-		...mapActions("modals/confirm", ["updateConfirmMessage"]),
 		...mapActions("modalVisibility", ["closeModal", "openModal"])
 	}
 };

frontend/src/components/modals/EditSongs.vue

@@ -164,10 +164,6 @@
 				></div>
 			</template>
 		</edit-song>
-		<confirm
-			v-if="modals.editSongsConfirm"
-			@confirmed="handleConfirmed()"
-		/>
 	</div>
 </template>
 
@@ -184,9 +180,6 @@ export default {
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
-		Confirm: defineAsyncComponent(() =>
-			import("@/components/modals/Confirm.vue")
-		),
 		SongItem
 	},
 	props: {},
@@ -195,12 +188,7 @@ export default {
 			items: [],
 			currentSong: {},
 			flagFilter: false,
-			sidebarMobileActive: false,
-			confirm: {
-				message: "",
-				action: "",
-				params: null
-			}
+			sidebarMobileActive: false
 		};
 	},
 	computed: {
@@ -375,22 +363,22 @@ export default {
 		toggleMobileSidebar() {
 			this.sidebarMobileActive = !this.sidebarMobileActive;
 		},
-		confirmAction(confirm) {
-			this.confirm = confirm;
-			this.updateConfirmMessage(confirm.message);
-			this.openModal("editSongsConfirm");
+		confirmAction({ message, action, params }) {
+			this.openModal({
+				modal: "confirm",
+				data: {
+					message,
+					action,
+					params,
+					onCompleted: this.handleConfirmed
+				}
+			});
 		},
-		handleConfirmed() {
-			const { action, params } = this.confirm;
+		handleConfirmed({ action, params }) {
 			if (typeof this[action] === "function") {
 				if (params) this[action](params);
 				else this[action]();
 			}
-			this.confirm = {
-				message: "",
-				action: "",
-				params: null
-			};
 		},
 		onClose() {
 			const doneItems = this.items.filter(
@@ -418,7 +406,6 @@ export default {
 		closeThisModal() {
 			this.closeModal("editSongs");
 		},
-		...mapActions("modals/confirm", ["updateConfirmMessage"]),
 		...mapActions("modalVisibility", ["openModal", "closeModal"]),
 		...mapActions("modals/editSong", ["editSong"]),
 		...mapActions("modals/editSongs", ["resetSongs"])

frontend/src/pages/Admin/Songs.vue

@@ -258,7 +258,6 @@
 		</div>
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<edit-songs v-if="modals.editSongs" />
-		<confirm v-if="modals.confirm" @confirmed="handleConfirmed()" />
 	</div>
 </template>
 
@@ -279,9 +278,6 @@ export default {
 		EditSongs: defineAsyncComponent(() =>
 			import("@/components/modals/EditSongs.vue")
 		),
-		Confirm: defineAsyncComponent(() =>
-			import("@/components/modals/Confirm.vue")
-		),
 		AdvancedTable,
 		RunJobDropdown
 	},
@@ -604,12 +600,7 @@ export default {
 					name: "Recalculate all song ratings",
 					socket: "songs.recalculateAllRatings"
 				}
-			],
-			confirm: {
-				message: "",
-				action: "",
-				params: null
-			}
+			]
 		};
 	},
 	computed: {
@@ -751,22 +742,22 @@ export default {
 			const minute = `${date.getMinutes()}`.padStart(2, 0);
 			return `${year}-${month}-${day} ${hour}:${minute}`;
 		},
-		confirmAction(confirm) {
-			this.confirm = confirm;
-			this.updateConfirmMessage(confirm.message);
-			this.openModal("confirm");
+		confirmAction({ message, action, params }) {
+			this.openModal({
+				modal: "confirm",
+				data: {
+					message,
+					action,
+					params,
+					onCompleted: this.handleConfirmed
+				}
+			});
 		},
-		handleConfirmed() {
-			const { action, params } = this.confirm;
+		handleConfirmed({ action, params }) {
 			if (typeof this[action] === "function") {
 				if (params) this[action](params);
 				else this[action]();
 			}
-			this.confirm = {
-				message: "",
-				action: "",
-				params: null
-			};
 		},
 		...mapActions("modals/editSong", ["editSong"]),
 		...mapActions("modals/editSongs", ["editSongs"]),

frontend/src/store/index.js

@@ -11,7 +11,6 @@ import admin from "./modules/admin";
 
 import editSongModal from "./modules/modals/editSong";
 import editSongsModal from "./modules/modals/editSongs";
-import confirmModal from "./modules/modals/confirm";
 
 const emptyModule = {
 	namespaced: true
@@ -41,7 +40,7 @@ export default createStore({
 				viewPunishment: emptyModule,
 				report: emptyModule,
 				viewReport: emptyModule,
-				confirm: confirmModal,
+				confirm: emptyModule,
 				bulkActions: emptyModule
 			}
 		}

frontend/src/store/modules/modalVisibility.js

@@ -13,14 +13,12 @@ import viewReport from "./modals/viewReport";
 import bulkActions from "./modals/bulkActions";
 import viewPunishment from "./modals/viewPunishment";
 import importAlbum from "./modals/importAlbum";
+import confirm from "./modals/confirm";
 
 const state = {
 	modals: {
 		editSong: false,
-		editSongs: false,
-		confirm: false,
-		editSongConfirm: false,
-		editSongsConfirm: false
+		editSongs: false
 	},
 	currentlyActive: [],
 	new: {
@@ -41,7 +39,8 @@ const modalModules = {
 	viewReport,
 	bulkActions,
 	viewPunishment,
-	importAlbum
+	importAlbum,
+	confirm
 };
 
 const migratedModules = {
@@ -62,9 +61,7 @@ const migratedModules = {
 	importAlbum: true,
 	viewReport: true,
 	viewPunishment: true,
-	confirm: false,
-	editSongConfirm: false,
-	editSongsConfirm: false,
+	confirm: true,
 	bulkActions: true
 };
 

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

@@ -3,16 +3,27 @@
 export default {
 	namespaced: true,
 	state: {
-		message: ""
+		message: "",
+		onCompleted: null,
+		action: null,
+		params: null
 	},
 	getters: {},
 	actions: {
-		updateConfirmMessage: ({ commit }, message) =>
-			commit("updateConfirmMessage", message)
+		init: ({ commit }, data) => commit("init", data),
+		confirm: ({ state }) => {
+			state.onCompleted({
+				action: state.action,
+				params: state.params
+			});
+		}
 	},
 	mutations: {
-		updateConfirmMessage(state, message) {
+		init(state, { message, onCompleted, action, params }) {
 			state.message = message;
+			state.onCompleted = onCompleted;
+			state.action = action;
+			state.params = params;
 		}
 	}
 };