BC-4938 - Add school specific Terms of Use (Nutzungsordnung) for new school admin page

jest.config.js

@@ -44,7 +44,6 @@ module.exports = {
 		"!<rootDir>/src/pages/NewsCreate.page.vue",
 		"!<rootDir>/src/pages/NewsEdit.page.vue",
 		"!<rootDir>/src/pages/ProxyError.page.vue",
-		"!<rootDir>/src/pages/TermsOfUse.vue",
 	],
 
 	// maxWorkers: 2, // limited for not taking all workers within of a single github action

src/components/administration/AdminMigrationSection.unit.ts

@@ -1,7 +1,11 @@
 import AdminMigrationSection from "@/components/administration/AdminMigrationSection.vue";
 import EnvConfigModule from "@/store/env-config";
 import SchoolsModule from "@/store/schools";
-import { ENV_CONFIG_MODULE_KEY, I18N_KEY } from "@/utils/inject";
+import {
+	ENV_CONFIG_MODULE_KEY,
+	I18N_KEY,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { Wrapper, mount, shallowMount } from "@vue/test-utils";
@@ -39,7 +43,7 @@ describe("AdminMigrationSection", () => {
 			}),
 			provide: {
 				[I18N_KEY.valueOf()]: i18nMock,
-				schoolsModule,
+				[SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule,
 				[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModule,
 			},
 		});

src/components/administration/AdminMigrationSection.vue

@@ -169,23 +169,25 @@
 
 <script lang="ts">
 import { MigrationBody } from "@/serverApi/v3";
-import SchoolsModule from "@/store/schools";
 import { OauthMigration, School } from "@/store/types/schools";
-import { ENV_CONFIG_MODULE_KEY, I18N_KEY, injectStrict } from "@/utils/inject";
+import {
+	ENV_CONFIG_MODULE_KEY,
+	injectStrict,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
 import dayjs from "dayjs";
 import {
 	computed,
 	ComputedRef,
 	defineComponent,
-	inject,
 	onMounted,
 	ref,
 	Ref,
 	watch,
 } from "vue";
-import VueI18n from "vue-i18n";
 import MigrationWarningCard from "./MigrationWarningCard.vue";
 import { RenderHTML } from "@feature-render-html";
+import { useI18n } from "@/composables/i18n.composable";
 
 export default defineComponent({
 	name: "AdminMigrationSection",
@@ -194,22 +196,14 @@ export default defineComponent({
 		RenderHTML,
 	},
 	setup() {
-		const i18n = injectStrict(I18N_KEY);
+		const { t } = useI18n();
 		const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
-		const schoolsModule: SchoolsModule | undefined =
-			inject<SchoolsModule>("schoolsModule");
-		if (!schoolsModule || !i18n) {
-			throw new Error("Injection of dependencies failed");
-		}
+		const schoolsModule = injectStrict(SCHOOLS_MODULE_KEY);
 
 		onMounted(async () => {
 			await schoolsModule.fetchSchoolOAuthMigration();
 		});
 
-		// TODO: https://ticketsystem.dbildungscloud.de/browse/BC-443
-		const t = (key: string, values?: VueI18n.Values): string =>
-			i18n.tc(key, 0, values);
-
 		const oauthMigration: ComputedRef<OauthMigration> = computed(
 			() => schoolsModule.getOauthMigration
 		);

src/components/icons/material/index.ts

@@ -61,6 +61,8 @@ import {
 	mdiTune,
 	mdiUndo,
 	mdiViewGridOutline,
+	mdiTrayArrowDown,
+	mdiFileReplaceOutline,
 } from "@mdi/js";
 
 const materialIcons = {
@@ -126,6 +128,8 @@ const materialIcons = {
 	mdiTune,
 	mdiUndo,
 	mdiViewGridOutline,
+	mdiTrayArrowDown,
+	mdiFileReplaceOutline,
 };
 
 export default materialIcons;

src/components/legacy/TheFooter.unit.js

@@ -1,4 +1,4 @@
-import { envConfigModule, filePathsModule } from "@/store";
+import { envConfigModule } from "@/store";
 import EnvConfigModule from "@/store/env-config";
 import FilePathsModule from "@/store/filePaths";
 import setupStores from "@@/tests/test-utils/setupStores";
@@ -16,21 +16,6 @@ describe("@/components/legacy/TheFooter.vue", () => {
 		name: "test",
 	};
 
-	it("Terms of use link is set correctly", () => {
-		filePathsModule.setSpecificFiles("https://dummy-url.org/");
-		const wrapper = shallowMount(TheFooter, {
-			...createComponentMocks({
-				mocks: {
-					$theme,
-				},
-				i18n: true,
-			}),
-		});
-		expect(wrapper.vm.links[1].href).toStrictEqual(
-			"https://dummy-url.org/Willkommensordner/Datenschutz/Nutzungsordnung_Schueler-innen.pdf"
-		);
-	});
-
 	it.skip("Link to accessibility statement is set correctly", () => {
 		// accessibility statement is now part of the theme-specific TheFooter.vue implementation
 	});

src/components/legacy/TheFooter.vue

@@ -5,9 +5,9 @@
 			<template v-for="(link, index) in links">
 				<span v-if="index !== 0" :key="index"> - </span>
 				<template v-if="!link.innerlinks">
-					<base-link :key="link.text" class="footer-link" v-bind="link">
-						{{ link.text }}
-					</base-link>
+					<base-link :key="link.text" class="footer-link" v-bind="link">{{
+						link.text
+					}}</base-link>
 				</template>
 				<template v-else>
 					<span :key="link.text">{{ link.text }}: </span>
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { authModule, envConfigModule, filePathsModule } from "@/store";
+import { authModule, envConfigModule } from "@/store";
 
 export default {
 	computed: {
@@ -58,13 +58,13 @@ export default {
 					text: this.$t("components.legacy.footer.imprint"),
 				},
 				{
-					href: filePathsModule.getSpecificFiles.termsOfUseSchool,
+					href: "/termsofuse",
 					text: this.$t("components.legacy.footer.terms"),
 					target: "_blank",
 					rel: "noopener",
 				},
 				{
-					to: "/datenschutz",
+					to: "/privacypolicy",
 					text: this.$t("components.legacy.footer.privacy_policy"),
 					target: "_blank",
 					rel: "noopener",

src/components/organisms/administration/SchoolPolicy.unit.ts

@@ -7,8 +7,14 @@ import { shallowMount, Wrapper } from "@vue/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { mockSchool } from "@@/tests/test-utils/mockObjects";
 import { ConsentVersion } from "@/store/types/consent-version";
-import { I18N_KEY } from "@/utils/inject";
+import {
+	AUTH_MODULE_KEY,
+	I18N_KEY,
+	PRIVACY_POLICY_MODULE_KEY,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
 import Vue from "vue";
+import { i18nMock } from "@@/tests/test-utils";
 
 describe("SchoolPolicy", () => {
 	let authModule: jest.Mocked<AuthModule>;
@@ -67,10 +73,10 @@ describe("SchoolPolicy", () => {
 				i18n: true,
 			}),
 			provide: {
-				[I18N_KEY as symbol]: { t: (key: string) => key },
-				authModule,
-				schoolsModule,
-				privacyPolicyModule,
+				[I18N_KEY.valueOf()]: i18nMock,
+				[PRIVACY_POLICY_MODULE_KEY.valueOf()]: privacyPolicyModule,
+				[AUTH_MODULE_KEY.valueOf()]: authModule,
+				[SCHOOLS_MODULE_KEY.valueOf()]: schoolsModule,
 			},
 		});
 

src/components/organisms/administration/SchoolPolicy.vue

@@ -23,7 +23,7 @@
 			/>
 			<v-list-item v-else two-line dense class="mb-6" data-testid="policy-item">
 				<v-list-item-icon>
-					<v-icon>{{ pdfIcon }}</v-icon>
+					<v-icon>$file_pdf_outline</v-icon>
 				</v-list-item-icon>
 				<v-list-item-content>
 					<v-list-item-title class="text-body-1 black--text mb-2">
@@ -34,7 +34,7 @@
 							{{
 								t("pages.administration.school.index.schoolPolicy.uploadedOn", {
 									date: dayjs(privacyPolicy.publishedAt).format(
-										"DD.MM.YYYY HH:mm"
+										t("format.dateTime")
 									),
 								})
 							}}
@@ -60,9 +60,7 @@
 							t('pages.administration.school.index.schoolPolicy.edit')
 						"
 					>
-						<v-icon>
-							{{ mdiPencilOutline }}
-						</v-icon>
+						<v-icon>$mdiPencilOutline</v-icon>
 					</v-btn>
 				</v-list-item-action>
 				<v-list-item-action
@@ -77,9 +75,7 @@
 							t('pages.administration.school.index.schoolPolicy.download')
 						"
 					>
-						<v-icon>
-							{{ mdiTrayArrowDown }}
-						</v-icon>
+						<v-icon>$mdiTrayArrowDown</v-icon>
 					</v-btn>
 				</v-list-item-action>
 			</v-list-item>
@@ -96,49 +92,28 @@
 <script lang="ts">
 import SchoolPolicyFormDialog from "@/components/organisms/administration/SchoolPolicyFormDialog.vue";
 import dayjs from "dayjs";
-import { mdiPencilOutline, mdiTrayArrowDown } from "@mdi/js";
-import {
-	computed,
-	ComputedRef,
-	defineComponent,
-	inject,
-	ref,
-	Ref,
-	watch,
-} from "vue";
-import AuthModule from "@/store/auth";
-import SchoolsModule from "@/store/schools";
-import PrivacyPolicyModule from "@/store/privacy-policy";
-import { I18N_KEY, injectStrict } from "@/utils/inject";
-import VueI18n from "vue-i18n";
+import { computed, ComputedRef, defineComponent, ref, Ref, watch } from "vue";
 import { School } from "@/store/types/schools";
 import { ConsentVersion } from "@/store/types/consent-version";
 import { BusinessError } from "@/store/types/commons";
+import { useI18n } from "@/composables/i18n.composable";
+import {
+	AUTH_MODULE_KEY,
+	PRIVACY_POLICY_MODULE_KEY,
+	injectStrict,
+	SCHOOLS_MODULE_KEY,
+} from "@/utils/inject";
 
 export default defineComponent({
 	name: "SchoolPolicy",
 	components: {
 		SchoolPolicyFormDialog,
 	},
 	setup() {
-		const authModule: AuthModule | undefined = inject<AuthModule>("authModule");
-		const schoolsModule: SchoolsModule | undefined =
-			inject<SchoolsModule>("schoolsModule");
-		const privacyPolicyModule: PrivacyPolicyModule | undefined =
-			inject<PrivacyPolicyModule>("privacyPolicyModule");
-		const i18n = injectStrict(I18N_KEY);
-
-		if (!authModule || !schoolsModule || !privacyPolicyModule || !i18n) {
-			throw new Error("Injection of dependencies failed");
-		}
-
-		const t = (key: string, values?: VueI18n.Values | undefined): string => {
-			const translateResult = i18n.t(key, values);
-			if (typeof translateResult === "string") {
-				return translateResult;
-			}
-			return "unknown translation-key:" + key;
-		};
+		const { t } = useI18n();
+		const authModule = injectStrict(AUTH_MODULE_KEY);
+		const privacyPolicyModule = injectStrict(PRIVACY_POLICY_MODULE_KEY);
+		const schoolsModule = injectStrict(SCHOOLS_MODULE_KEY);
 
 		const isSchoolPolicyFormDialogOpen: Ref<boolean> = ref(false);
 
@@ -163,7 +138,6 @@ export default defineComponent({
 		const error: ComputedRef<BusinessError> = computed(
 			() => privacyPolicyModule.getBusinessError
 		);
-		const pdfIcon = "$file_pdf_outline";
 
 		const downloadFile = () => {
 			const link = document.createElement("a");
@@ -185,9 +159,6 @@ export default defineComponent({
 			privacyPolicy,
 			status,
 			error,
-			mdiPencilOutline,
-			mdiTrayArrowDown,
-			pdfIcon,
 			downloadFile,
 			dayjs,
 			closeDialog,