fix: Reverted dynamic import changes and package update

frontend/package-lock.json

@@ -50,7 +50,7 @@
         "jsdom": "^20.0.0",
         "less": "^4.1.3",
         "prettier": "^2.7.1",
-        "vite-plugin-dynamic-import": "^1.2.2",
+        "vite-plugin-dynamic-import": "^1.1.1",
         "vitest": "^0.23.4",
         "vue-eslint-parser": "^9.1.0",
         "vue-tsc": "^0.40.13"
@@ -5798,10 +5798,13 @@
       }
     },
     "node_modules/vite-plugin-dynamic-import": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.2.2.tgz",
-      "integrity": "sha512-50m5Whh9ZLzJouIcHhSzlcrieXx3YUiWAel4twcaNvZIlV9AbRud8e1qAunzpHZKTKPwujhkZps3O6XwebRGLg==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.1.1.tgz",
+      "integrity": "sha512-ZAt0ppn9LI3jsa4m4I8H25DKHQb/rqD9MQFrnxyY1j4maUb4FmczVPzlP2khk2i7ns2/fPdfHurAMUEWBBXHpg==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.11"
+      }
     },
     "node_modules/vitest": {
       "version": "0.23.4",
@@ -10353,10 +10356,13 @@
       }
     },
     "vite-plugin-dynamic-import": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.2.2.tgz",
-      "integrity": "sha512-50m5Whh9ZLzJouIcHhSzlcrieXx3YUiWAel4twcaNvZIlV9AbRud8e1qAunzpHZKTKPwujhkZps3O6XwebRGLg==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.1.1.tgz",
+      "integrity": "sha512-ZAt0ppn9LI3jsa4m4I8H25DKHQb/rqD9MQFrnxyY1j4maUb4FmczVPzlP2khk2i7ns2/fPdfHurAMUEWBBXHpg==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.11"
+      }
     },
     "vitest": {
       "version": "0.23.4",

frontend/package.json

@@ -36,7 +36,7 @@
     "jsdom": "^20.0.0",
     "less": "^4.1.3",
     "prettier": "^2.7.1",
-    "vite-plugin-dynamic-import": "^1.2.2",
+    "vite-plugin-dynamic-import": "^1.1.1",
     "vitest": "^0.23.4",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^0.40.13"

frontend/src/components/ModalManager.vue

@@ -1,42 +1,32 @@
 <script setup lang="ts">
-import { defineAsyncComponent, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { storeToRefs } from "pinia";
-import { useModalsStore } from "@/stores/modals";
+import { useModalsStore, useModalComponents } from "@/stores/modals";
 
 const modalsStore = useModalsStore();
 const { modals, activeModals } = storeToRefs(modalsStore);
 
-const useModalComponents = (map: { [key: string]: string }) => {
-	const modalComponents: { [key: string]: string } = {};
-	Object.entries(map).forEach(([mapKey, mapValue]) => {
-		modalComponents[mapKey] = defineAsyncComponent(
-			() => import(`./modals/${mapValue}.vue`)
-		);
-	});
-	return modalComponents;
-};
-
 const modalComponents = shallowRef(
-	useModalComponents({
-		editUser: "EditUser",
-		login: "Login",
-		register: "Register",
-		whatIsNew: "WhatIsNew",
-		createStation: "CreateStation",
-		editNews: "EditNews",
-		manageStation: "ManageStation/index",
-		editPlaylist: "EditPlaylist/index",
-		createPlaylist: "CreatePlaylist",
-		report: "Report",
-		viewReport: "ViewReport",
-		bulkActions: "BulkActions",
-		viewApiRequest: "ViewApiRequest",
-		viewPunishment: "ViewPunishment",
-		removeAccount: "RemoveAccount",
-		importAlbum: "ImportAlbum",
-		confirm: "Confirm",
-		editSong: "EditSong/index",
-		viewYoutubeVideo: "ViewYoutubeVideo"
+	useModalComponents("components/modals", {
+		editUser: "EditUser.vue",
+		login: "Login.vue",
+		register: "Register.vue",
+		whatIsNew: "WhatIsNew.vue",
+		createStation: "CreateStation.vue",
+		editNews: "EditNews.vue",
+		manageStation: "ManageStation/index.vue",
+		editPlaylist: "EditPlaylist/index.vue",
+		createPlaylist: "CreatePlaylist.vue",
+		report: "Report.vue",
+		viewReport: "ViewReport.vue",
+		bulkActions: "BulkActions.vue",
+		viewApiRequest: "ViewApiRequest.vue",
+		viewPunishment: "ViewPunishment.vue",
+		removeAccount: "RemoveAccount.vue",
+		importAlbum: "ImportAlbum.vue",
+		confirm: "Confirm.vue",
+		editSong: "EditSong/index.vue",
+		viewYoutubeVideo: "ViewYoutubeVideo.vue"
 	})
 );
 </script>

frontend/src/stores/modals.ts

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from "vue";
 import { defineStore } from "pinia";
 import utils from "@/utils";
 
@@ -160,3 +161,16 @@ export const useModalsStore = defineStore("modals", {
 		}
 	}
 });
+
+export const useModalComponents = (
+	baseDirectory: string,
+	map: { [key: string]: string }
+) => {
+	const modalComponents = <{ [key: string]: string }>{};
+	Object.entries(map).forEach(([mapKey, mapValue]) => {
+		modalComponents[mapKey] = defineAsyncComponent(
+			() => import(`@/${baseDirectory}/${mapValue}`)
+		);
+	});
+	return modalComponents;
+};