EW-694 adding separate state module for cc import

src/components/molecules/CommonCartridgeImportModal.vue

@@ -1,10 +1,10 @@
 <template>
 	<v-dialog
 		ref="commonCartridgeImportDialog"
-		:value="isOpen"
-		:max-width="maxWidth"
-		@click:outside="$emit('dialog-closed', false)"
-		@keydown.esc="$emit('dialog-closed', false)"
+		:v-model="commonCartridgeImportModule.isOpen"
+		:max-width="props.maxWidth"
+		@click:outside="commonCartridgeImportModule.closeImportModal()"
+		@keydown.esc="commonCartridgeImportModule.closeImportModal()"
 		data-testid="common-cartridge-import-dialog"
 	>
 		<v-card :ripple="false">
@@ -45,87 +45,31 @@
 	</v-dialog>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
-import {
-	LOADING_STATE_MODULE_KEY,
-	NOTIFIER_MODULE_KEY,
-	ROOMS_MODULE_KEY,
-	injectStrict,
-} from "@/utils/inject";
+<script setup lang="ts">
+import { computed, defineProps, defineModel, withDefaults } from "vue";
+import { commonCartridgeImportModule } from "@/store";
 import { mdiTrayArrowUp } from "@mdi/js";
-import { useI18n } from "vue-i18n";
 
-export default defineComponent({
-	name: "CommonCartridgeImportModal",
-	model: {
-		prop: "isOpen",
-		event: "dialog-closed",
-	},
-	props: {
-		isOpen: {
-			type: Boolean,
-			required: true,
-		},
-		maxWidth: {
-			type: Number,
-			default: 480,
-		},
-	},
-	emits: {
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		"dialog-closed": (value: boolean): boolean => true,
-	},
-	setup: (_, { emit }) => {
-		const i18n = useI18n();
-		const loadingStateModule = injectStrict(LOADING_STATE_MODULE_KEY);
-		const notifierModule = injectStrict(NOTIFIER_MODULE_KEY);
-		const roomsModule = injectStrict(ROOMS_MODULE_KEY);
-		const file = ref<File | undefined>(undefined);
-		const importButtonDisabled = computed(() => {
-			return !file.value;
-		});
-
-		function cancel(): void {
-			emit("dialog-closed", false);
-			file.value = undefined;
-		}
-
-		async function confirm(): Promise<void> {
-			if (!file.value) {
-				return;
-			}
-
-			loadingStateModule.open({
-				text: i18n.t("pages.rooms.ccImportCourse.loading").toString(),
-			});
-			await roomsModule.uploadCourse(file.value);
-			await roomsModule.fetchAllElements();
-			emit("dialog-closed", false);
-			loadingStateModule.close();
-
-			const [newCourse] = roomsModule.getAllElements;
+const props = withDefaults(
+	defineProps<{
+		maxWidth: number;
+	}>(),
+	{
+		maxWidth: 480,
+	}
+);
+const file = defineModel<File>();
+const importButtonDisabled = computed(() => {
+	return !file.value;
+});
 
-			notifierModule.show({
-				status: roomsModule.getAlertData.status,
-				text: i18n
-					.t(roomsModule.getAlertData.text as string, { name: newCourse.title })
-					.toString(),
-				autoClose: roomsModule.getAlertData.autoClose,
-				timeout: roomsModule.getAlertData.timeout,
-			});
-			file.value = undefined;
-		}
+function cancel(): void {
+	commonCartridgeImportModule.closeImportModal();
+}
 
-		return {
-			file,
-			importButtonDisabled,
-			mdiTrayArrowUp,
-			cancel,
-			confirm,
-		};
-	},
-});
+async function confirm(): Promise<void> {
+	await commonCartridgeImportModule.importCommonCartridgeFile(file.value);
+}
 </script>
 
 <style lang="scss" scoped>

src/components/templates/DefaultWireframe.vue

@@ -32,7 +32,7 @@
 									:icon="action.icon"
 									:href="action.href"
 									:to="action.to"
-									@click="action.customEvent"
+									@click="$emit('onFabItemClick', action.customEvent)"
 									>{{ action.label }}</speed-dial-menu-action
 								>
 							</template>
@@ -96,6 +96,9 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	emits: {
+		onFabItemClick: (event: string) => (event ? true : false),
+	},
 	computed: {
 		showBorder(): boolean {
 			return !!(this.headline || this.$slots.header);

src/components/templates/RoomWrapper.vue

@@ -4,6 +4,7 @@
 		headline=""
 		:full-width="true"
 		:fab-items="fabItems"
+		@onFabItemClick="fabItemClickHandler"
 	>
 		<template #header>
 			<slot name="header" />
@@ -28,15 +29,17 @@
 		<template v-else>
 			<slot name="page-content" />
 		</template>
-		<common-cartridge-import-modal
-			v-model="ccImportDialog.isOpen"
-			class="upload-modal"
-		/>
+		<common-cartridge-import-modal :max-width="480" class="upload-modal" />
 	</default-wireframe>
 </template>
 
-<script>
-import { authModule, envConfigModule, roomsModule } from "@/store";
+<script lang="ts">
+import {
+	authModule,
+	commonCartridgeImportModule,
+	envConfigModule,
+	roomsModule,
+} from "@/store";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import vCustomEmptyState from "@/components/molecules/vCustomEmptyState.vue";
 import CommonCartridgeImportModal from "@/components/molecules/CommonCartridgeImportModal.vue";
@@ -59,13 +62,6 @@ export default defineComponent({
 			required: false,
 		},
 	},
-	data() {
-		return {
-			ccImportDialog: {
-				isOpen: false,
-			},
-		};
-	},
 	computed: {
 		fabItems() {
 			if (
@@ -92,10 +88,7 @@ export default defineComponent({
 								icon: mdiImport,
 								dataTestid: "fab_button_import_course",
 								ariaLabel: this.$t("pages.rooms.fab.import.course"),
-								customEvent: {
-									name: "fabButtonEvent",
-									value: "import",
-								},
+								customEvent: "import",
 							},
 						],
 					};
@@ -122,9 +115,9 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		fabClick(event) {
+		fabItemClickHandler(event: string) {
 			if (event === "import") {
-				this.$data.ccImportDialog.isOpen = true;
+				commonCartridgeImportModule.openImportModal();
 			}
 		},
 	},

src/main.ts

@@ -4,6 +4,7 @@ import {
 	applicationErrorModule,
 	authModule,
 	autoLogoutModule,
+	commonCartridgeImportModule,
 	contentModule,
 	contextExternalToolsModule,
 	copyModule,
@@ -52,6 +53,7 @@ import { initializeAxios } from "./utils/api";
 import {
 	APPLICATION_ERROR_KEY,
 	AUTH_MODULE_KEY,
+	COMMON_CARTRIDGE_IMPORT_MODULE,
 	CONTENT_MODULE_KEY,
 	CONTEXT_EXTERNAL_TOOLS_MODULE_KEY,
 	ENV_CONFIG_MODULE_KEY,
@@ -175,6 +177,10 @@ app.use(VueDOMPurifyHTML, {
 	app.provide(VIDEO_CONFERENCE_MODULE_KEY.valueOf(), videoConferenceModule);
 	app.provide(LOADING_STATE_MODULE_KEY.valueOf(), loadingStateModule);
 	app.provide(ROOMS_MODULE_KEY.valueOf(), roomsModule);
+	app.provide(
+		COMMON_CARTRIDGE_IMPORT_MODULE.valueOf(),
+		commonCartridgeImportModule
+	);
 	app.provide(THEME_KEY.valueOf(), themeConfig);
 
 	app.mount("#app");

src/store/common-cartridge-import.ts

@@ -0,0 +1,62 @@
+import { CoursesApiFactory, CoursesApiInterface } from "@/serverApi/v3";
+import { $axios } from "@/utils/api";
+import { notifierModule, loadingStateModule } from "@/store";
+// import { useI18n } from "vue-i18n";
+import { Action, Module, Mutation, VuexModule } from "vuex-module-decorators";
+
+@Module({
+	name: "commonCartridgeImportModule",
+	namespaced: true,
+	stateFactory: true,
+})
+export default class CommonCartridgeImportModule extends VuexModule {
+	// private readonly i18n = useI18n();
+	private _isOpen = false;
+
+	get isOpen(): boolean {
+		return this._isOpen;
+	}
+
+	private get coursesApi(): CoursesApiInterface {
+		return CoursesApiFactory(undefined, "/v3", $axios);
+	}
+
+	@Mutation
+	public openImportModal(): void {
+		this._isOpen = true;
+	}
+
+	@Mutation
+	public closeImportModal(): void {
+		this._isOpen = false;
+	}
+
+	@Action
+	async importCommonCartridgeFile(file: File | undefined): Promise<void> {
+		if (!file) {
+			return;
+		}
+
+		try {
+			loadingStateModule.open({
+				// text: this.i18n.t("pages.rooms.ccImportCourse.loading").toString(),
+				text: "pages.rooms.ccImportCourse.loading",
+			});
+			await this.coursesApi.courseControllerImportCourse(file);
+			notifierModule.show({
+				status: "success",
+				text: "pages.rooms.ccImportCourse.success",
+				autoClose: true,
+			});
+		} catch (error) {
+			notifierModule.show({
+				status: "error",
+				text: "pages.rooms.ccImportCourse.error",
+				autoClose: true,
+			});
+		} finally {
+			this.closeImportModal();
+			loadingStateModule.close();
+		}
+	}
+}

src/store/store-accessor.ts

@@ -32,6 +32,7 @@ import TasksModule from "@/store/tasks";
 import TermsOfUseModule from "@/store/terms-of-use";
 import UserLoginMigrationModule from "@/store/user-login-migrations";
 import VideoConferenceModule from "@/store/video-conference";
+import CommonCartridgeImportModule from "@/store/common-cartridge-import";
 import { Store } from "vuex";
 import { getModule } from "vuex-module-decorators";
 
@@ -65,6 +66,7 @@ export let systemsModule: SystemsModule;
 export let tasksModule: TasksModule;
 export let userLoginMigrationModule: UserLoginMigrationModule;
 export let videoConferenceModule: VideoConferenceModule;
+export let commonCartridgeImportModule: CommonCartridgeImportModule;
 
 // initializer plugin: sets up state/getters/mutations/actions for each store
 export function initializeStores(store: Store<any>): void {
@@ -95,6 +97,7 @@ export function initializeStores(store: Store<any>): void {
 	tasksModule = getModule(TasksModule, store);
 	userLoginMigrationModule = getModule(UserLoginMigrationModule, store);
 	videoConferenceModule = getModule(VideoConferenceModule, store);
+	commonCartridgeImportModule = getModule(CommonCartridgeImportModule, store);
 }
 
 // for use in 'modules' store init (see store/index.ts), so each module
@@ -128,4 +131,5 @@ export const modules = {
 	tasksModule: TasksModule,
 	userLoginMigrationModule: UserLoginMigrationModule,
 	videoConferenceModule: VideoConferenceModule,
+	commonCartridgeImportModule: CommonCartridgeImportModule,
 };

src/utils/inject/injection-keys.ts

@@ -17,6 +17,7 @@ import SystemsModule from "@/store/systems";
 import TermsOfUseModule from "@/store/terms-of-use";
 import UserLoginMigrationModule from "@/store/user-login-migrations";
 import VideoConferenceModule from "@/store/video-conference";
+import CommonCartridgeImportModule from "@/store/common-cartridge-import";
 import { InjectionKey } from "vue";
 
 export const ENV_CONFIG_MODULE_KEY: InjectionKey<EnvConfigModule> =
@@ -54,5 +55,7 @@ export const LOADING_STATE_MODULE_KEY: InjectionKey<LoadingStateModule> =
 export const NEWS_MODULE_KEY: InjectionKey<NewsModule> = Symbol("newsModule");
 export const CONTENT_MODULE_KEY: InjectionKey<ContentModule> =
 	Symbol("contentModule");
+export const COMMON_CARTRIDGE_IMPORT_MODULE: InjectionKey<CommonCartridgeImportModule> =
+	Symbol("commonCartridgeImportModule");
 
 export const THEME_KEY: InjectionKey<{ name: string }> = Symbol("theme");