qr code dependency change (#3930)

BC-10523 - Refactor QRCode printing to get rid of canvas dependency

Author: luejoh

package-lock.json

@@ -33,16 +33,15 @@
 		"@vueuse/core": "^13.3.0",
 		"@vueuse/integrations": "^13.3.0",
 		"axios": "^1.12.2",
-		"canvas": "^3.1.0",
 		"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",
@@ -98,8 +97,7 @@
 	"overrides": {
 		"@openapitools/openapi-generator-cli": {
 			"axios": "$axios"
-		},
-		"canvas": "^3.1.0"
+		}
 	},
 	"engines": {
 		"node": "22",

package.json

@@ -1146,6 +1146,8 @@ 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.printPageTabTitle": "QR-Codes teilen",
+	"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/de.ts

@@ -1136,6 +1136,8 @@ 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.printPageTabTitle": "Share QR-Codes",
+	"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/en.ts

@@ -1156,6 +1156,8 @@ 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.printPageTabTitle": "Compartir códigos QR",
+	"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/es.ts

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

src/locales/uk.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/mixins/print.js

@@ -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"
@@ -24,27 +25,14 @@
 <script setup lang="ts">
 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>>();
+import { printQrCodes } from "@util-browser";
 
+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([{ qrContent: url, title: document.title }]);
 };
 
-const onCopy = () => navigator.clipboard.writeText(props.url);
+const onCopy = () => navigator.clipboard.writeText(url);
 </script>
 
 <style scoped>