qr code dependency change

package.json

@@ -37,12 +37,12 @@
 		"dayjs": "^1.11.10",
 		"focus-trap": "^7.6.5",
 		"katex": "^0.16.21",
-		"kjua": "^0.10.0",
 		"lodash-es": "^4.17.21",
 		"maska": "^2.1.10",
 		"mobile-drag-drop": "^3.0.0-rc.0",
 		"object-hash": "^3.0.0",
 		"pinia": "^3.0.2",
+		"qrcode.vue": "^3.6.0",
 		"socket.io-client": "^4.8.1",
 		"sortablejs": "^1.15.6",
 		"sortablejs-vue3": "^1.2.11",

src/locales/de.ts

@@ -1146,6 +1146,7 @@ export default {
 		"Die Migration kann nicht gestartet werden, da das Ziel-Login-System und das derzeitige Login-System Ihrer Schule identisch sind!",
 	"pages.administration.migration.moin_schule_system_not_found": "Das moin.schule-System kann nicht gefunden werden!",
 	"pages.administration.or": "oder",
+	"pages.administration.printQr.printPageTitle": "Zum Registrieren bitte den QR Code scannen.",
 	"pages.administration.printQr.emptyUser": "Dieser Nutzer wurde bereits registriert",
 	"pages.administration.printQr.error":
 		"Die Registrierungslinks konnten auf Grund eines Problems nicht generiert werden",

src/locales/en.ts

@@ -1136,6 +1136,7 @@ export default {
 		"The migration cannot start because the target login system and your school's current login system are the same!",
 	"pages.administration.migration.moin_schule_system_not_found": "Cannot find moin.schule system!",
 	"pages.administration.or": "or",
+	"pages.administration.printQr.printPageTitle": "Please scan the QR code to register.",
 	"pages.administration.printQr.emptyUser": "The selected user(s) have already been registered",
 	"pages.administration.printQr.error": "The registration links could not be generated",
 	"pages.administration.remove.error": "Failed to delete users",

src/locales/es.ts

@@ -1156,6 +1156,7 @@ export default {
 		"¡La migración no puede comenzar porque el sistema de inicio de sesión de destino y el sistema de inicio de sesión actual de su escuela son el mismo!",
 	"pages.administration.migration.moin_schule_system_not_found": "¡No puedo encontrar el sistema moin.schule!",
 	"pages.administration.or": "o",
+	"pages.administration.printQr.printPageTitle": "Por favor, escanea el código QR para registrarte.",
 	"pages.administration.printQr.emptyUser": "L{'@'}s usuari{'@'}s seleccionad{'@'}s ya han sido registrad{'@'}s",
 	"pages.administration.printQr.error": "No se han podido generar los enlaces de registro",
 	"pages.administration.remove.error": "Error al eliminar usuarios",

src/locales/uk.ts

@@ -1144,6 +1144,7 @@ export default {
 		"Неможливо розпочати міграцію, оскільки цільова система входу та поточна система входу у вашій школі збігаються!",
 	"pages.administration.migration.moin_schule_system_not_found": "Не вдається знайти систему moin.schule!",
 	"pages.administration.or": "або",
+	"pages.administration.printQr.printPageTitle": "Будь ласка, відскануйте QR-код для реєстрації.",
 	"pages.administration.printQr.emptyUser": "Вибраний користувач(-і) вже зареєстрований(-і)",
 	"pages.administration.printQr.error": "Не вдалося згенерувати посилання для реєстрації",
 	"pages.administration.remove.error": "Не вдалося видалити користувачів",

src/modules/ui/layout/topbar/PageShare.unit.ts

@@ -1,54 +1,32 @@
 import PageShare from "./PageShare.vue";
 import { createTestingI18n, createTestingVuetify } from "@@/tests/test-utils/setup";
-import { createMock } from "@golevelup/ts-vitest";
 import { mount } from "@vue/test-utils";
+import { beforeAll, vi } from "vitest";
 
 describe("@ui-layout/PageShare", () => {
-	const setup = (attrs = {}) => {
-		const windowMock = createMock<Window>({
-			document: {
-				write: vi.fn().mockImplementation(() => "<img></img>"),
-			},
-			print: vi.fn(),
-			close: vi.fn(),
-		});
-
-		Object.defineProperty(window, "open", {
-			configurable: true,
-			value: vi.fn().mockReturnValue(windowMock),
+	beforeAll(() => {
+		Object.defineProperty(window, "location", {
+			value: { href: "url" },
+			writable: true,
 		});
+	});
 
+	const setup = () => {
 		const wrapper = mount(PageShare, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 			},
-			props: {
-				url: "url",
-			},
-			...attrs,
 		});
 
-		return { wrapper, windowMock };
+		return { wrapper };
 	};
 
 	describe("with available languages", () => {
 		it("should render qr code ", () => {
 			const { wrapper } = setup();
-
 			expect(wrapper.findComponent({ name: "QRCode" }).exists()).toBe(true);
 		});
 
-		it("should open print menu with QR-Code", async () => {
-			const { wrapper, windowMock } = setup();
-			const printButton = wrapper.findComponent("[data-testid=qr-code-print]");
-			await printButton.trigger("click");
-
-			expect(window.open).toHaveBeenCalled();
-			expect(windowMock.document.write).toHaveBeenCalled();
-			expect(windowMock.print).toHaveBeenCalled();
-			expect(windowMock.close).toHaveBeenCalled();
-		});
-
 		it("should copy link to clipboard", async () => {
 			Object.defineProperty(navigator, "clipboard", {
 				value: {

src/modules/ui/layout/topbar/PageShare.vue

@@ -3,7 +3,8 @@
 		<div class="pb-2">
 			{{ $t("global.topbar.MenuQrCode.qrHintText") }}
 		</div>
-		<QRCode ref="qrCode" :url="url" />
+
+		<QRCode :url />
 		<div>
 			<VBtn
 				variant="outlined"
@@ -22,29 +23,16 @@
 </template>
 
 <script setup lang="ts">
+import { printQrCodes } from "@/utils/qr-code.utils";
 import { mdiContentCopy, mdiPrinter } from "@icons/material";
 import { QRCode } from "@ui-qr-code";
-import { ComponentPublicInstance, ref } from "vue";
-
-const props = defineProps({
-	url: {
-		type: String,
-		default: window.location.href,
-	},
-});
-const qrCode = ref<ComponentPublicInstance<HTMLDivElement>>();
 
+const url = window.location.href;
 const openPrintMenu = () => {
-	const win = window.open();
-
-	if (qrCode.value) {
-		win?.document.write(qrCode.value.$el.innerHTML);
-		win?.print();
-		win?.close();
-	}
+	printQrCodes([{ url, title: document.title }]);
 };
 
-const onCopy = () => navigator.clipboard.writeText(props.url);
+const onCopy = () => navigator.clipboard.writeText(url);
 </script>
 
 <style scoped>

src/modules/ui/qr-code/QRCode.vue

@@ -1,33 +1,16 @@
 <template>
-	<div ref="QRCode" class="qrcode pt-2 pb-4" />
+	<QrcodeSvg class="pt-2 pb-4 qrcode" :value="url" />
 </template>
 
 <script setup lang="ts">
-// @ts-expect-error not a typescript package
-// TODO - replace with package that supports ts (e.g. qrcode-vue, vue-qrcode,..)
-import kjua from "kjua";
-import { onMounted, ref } from "vue";
+import { QrcodeSvg } from "qrcode.vue";
 
-const props = defineProps({
+defineProps({
 	url: {
 		type: String,
 		default: window.location.href,
 	},
 });
-
-const QRCode = ref();
-
-const createQrCode = () => {
-	const image = kjua({ text: props.url, render: "image" });
-
-	image.alt = props.url;
-	const qrbox = QRCode.value;
-	qrbox.append(image);
-};
-
-onMounted(() => {
-	createQrCode();
-});
 </script>
 
 <style lang="scss" scoped>