BC-5424 - persistent storage for tldraw (#3002)

* add tldraw error handling

src/components/error-handling/ErrorContent.vue

@@ -6,7 +6,12 @@
 			fill="var(--v-primary-base)"
 			data-testid="img-permission"
 		/>
-
+		<not-found-svg
+			v-else-if="isNotFoundError"
+			:svg-width="$vuetify.breakpoint.xs ? 200 : undefined"
+			fill="var(--v-primary-base)"
+			data-testid="img-notfound"
+		/>
 		<img
 			v-else
 			:alt="errorText"
@@ -24,14 +29,15 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import PermissionErrorSvg from "@/assets/img/PermissionErrorSvg.vue";
+import NotFoundSvg from "@/assets/img/NotFoundSvg.vue";
 import { HttpStatusCode } from "@/store/types/http-status-code.enum";
 import { useTitle } from "@vueuse/core";
 import { useI18n } from "@/composables/i18n.composable";
 import { buildPageTitle } from "@/utils/pageTitle";
 
 export default defineComponent({
 	name: "ErrorContent",
-	components: { PermissionErrorSvg },
+	components: { PermissionErrorSvg, NotFoundSvg },
 	props: {
 		errorText: String,
 		statusCode: {
@@ -54,8 +60,13 @@ export default defineComponent({
 			permissionErrorStatusCodes.includes(props.statusCode)
 		);
 
+		const isNotFoundError = computed(
+			() => props.statusCode === HttpStatusCode.NotFound
+		);
+
 		return {
 			isPermissionError,
+			isNotFoundError,
 		};
 	},
 });

src/locales/de.json

@@ -1098,5 +1098,11 @@
 	"page-class-members.title.info": "importiert aus einem externen System",
 	"page-class-members.systemInfoText": "Daten der Klasse werden mit {systemName} synchronisiert. Die Klassenliste kann vorübergehend veraltet sein, bis sie mit dem neusten Stand in {systemName} abgeglichen wird. Die Daten werden nach jeder Anmeldung eines Klassenmitglieds in der Niedersächsischen Bildungscloud aktualisiert.",
 	"page-class-members.classMembersInfoBox.title": "Schüler:innen sind noch nicht in der Niedersächsischen Bildungscloud?",
-	"page-class-members.classMembersInfoBox.text": "<p>Eine Einverständniserklärung bei der Registrierung von Schüler:innen muss <b>nicht</b> eingeholt werden. Die Nutzung der Niedersächsischen Bildungscloud ist im niedersächsischen Schulgesetz (§ 31 Abs. 5 NSchG) geregelt.<br><br>Falls die Schule die Daten der Nutzenden über ein externes System bezieht bzw. übermittelt bekommt, sind keine weiteren Schritte in der Cloud notwendig. Die Registrierung erfolgt über das externe System.<br><br>Anderenfalls können über den Verwaltungsbereich der Cloud Einladungen zur Registrierung per Link versendet werden:<br><ul><li>Versand von Registrierungslinks an die hinterlegten E-Mail-Adressen (auch direkt beim Importieren/Anlegen möglich)</li><li>Registrierungslinks als QR-Druckbogen drucken, ausschneiden und QR-Zettel an Schüler:innen verteilen</li><li>Einen oder mehrere Nutzer:innen auswählen, z.B. alle Schüler:innen einer Klasse, und dann die gewünschte Aktion durchführen</li><li>Alternativ möglich: Wechseln in den Bearbeiten-Modus des Nutzerprofils und den individuellen Registrierungslink direkt abrufen, um ihn händisch zu versenden</li></ul></p>"
+	"page-class-members.classMembersInfoBox.text": "<p>Eine Einverständniserklärung bei der Registrierung von Schüler:innen muss <b>nicht</b> eingeholt werden. Die Nutzung der Niedersächsischen Bildungscloud ist im niedersächsischen Schulgesetz (§ 31 Abs. 5 NSchG) geregelt.<br><br>Falls die Schule die Daten der Nutzenden über ein externes System bezieht bzw. übermittelt bekommt, sind keine weiteren Schritte in der Cloud notwendig. Die Registrierung erfolgt über das externe System.<br><br>Anderenfalls können über den Verwaltungsbereich der Cloud Einladungen zur Registrierung per Link versendet werden:<br><ul><li>Versand von Registrierungslinks an die hinterlegten E-Mail-Adressen (auch direkt beim Importieren/Anlegen möglich)</li><li>Registrierungslinks als QR-Druckbogen drucken, ausschneiden und QR-Zettel an Schüler:innen verteilen</li><li>Einen oder mehrere Nutzer:innen auswählen, z.B. alle Schüler:innen einer Klasse, und dann die gewünschte Aktion durchführen</li><li>Alternativ möglich: Wechseln in den Bearbeiten-Modus des Nutzerprofils und den individuellen Registrierungslink direkt abrufen, um ihn händisch zu versenden</li></ul></p>",
+	"tldraw.error.403": "Tldraw ist deaktiviert",
+	"tldraw.error.500": "Beim Einrichten von tldraw ist ein Fehler aufgetreten",
+	"tldraw.error.ws.4400": "Der Raumname fehlt in den URL-Parametern",
+	"tldraw.error.ws.4401": "Du hast keine Berechtigung für dieses Tldraw-Board",
+	"tldraw.error.ws.4404": "Tldraw-Board mit diesem Namen wurde nicht gefunden",
+	"tldraw.error.ws.4500": "Bei der Tldraw-Websocket-Verbindung ist ein Fehler aufgetreten"
 }

src/locales/en.json

@@ -1097,5 +1097,11 @@
 	"page-class-members.title.info": "imported from an external system",
 	"page-class-members.systemInfoText": "Class data is synchronized with {systemName}. The class list may be temporarily out of date until it is updated with the latest version in {systemName}. The data is updated every time a class member registers in the Niedersächsischen Bildungscloud.",
 	"page-class-members.classMembersInfoBox.title": "Students are not yet in the Niedersächsischen Bildungscloud?",
-	"page-class-members.classMembersInfoBox.text": "<p>A declaration of consent does <b>not</b> need to be obtained when registering students. The use of the Niedersächsischen Bildungscloud is regulated in the Lower Saxony Schools Act (Section 31 Para. 5 NSchG).<br><br>If the school obtains or receives the user's data via an external system, no further steps are necessary in the cloud. Registration takes place via the external system.<br><br>Otherwise, invitations to register can be sent via link via the administration area of the cloud:<br><ul><li>Sending registration links to the stored email addresses (also possible to create directly when importing)</li><li>Print registration links as QR print sheets, cut them out and distribute QR slips to students</li><li>Select one or more users, e.g. all students in a class , and then carry out the desired action</li><li>Alternatively possible: Switch to edit mode of the user profile and retrieve the individual registration link directly in order to send it manually</li></ul></p>"
+	"page-class-members.classMembersInfoBox.text": "<p>A declaration of consent does <b>not</b> need to be obtained when registering students. The use of the Niedersächsischen Bildungscloud is regulated in the Lower Saxony Schools Act (Section 31 Para. 5 NSchG).<br><br>If the school obtains or receives the user's data via an external system, no further steps are necessary in the cloud. Registration takes place via the external system.<br><br>Otherwise, invitations to register can be sent via link via the administration area of the cloud:<br><ul><li>Sending registration links to the stored email addresses (also possible to create directly when importing)</li><li>Print registration links as QR print sheets, cut them out and distribute QR slips to students</li><li>Select one or more users, e.g. all students in a class , and then carry out the desired action</li><li>Alternatively possible: Switch to edit mode of the user profile and retrieve the individual registration link directly in order to send it manually</li></ul></p>",
+	"tldraw.error.403": "Tldraw is disabled",
+	"tldraw.error.500": "An error occured while setting up tldraw",
+	"tldraw.error.ws.4400": "Room name is missing in URL params",
+	"tldraw.error.ws.4401": "You do not have permission to this tldraw board",
+	"tldraw.error.ws.4404": "Tldraw board with this name was not found",
+	"tldraw.error.ws.4500": "An error occured within tldraw websocket connection"
 }

src/locales/es.json

@@ -1093,5 +1093,11 @@
 	"pages.h5p.api.success.save": "El contenido se ha guardado correctamente.",
 	"page-class-members.systemInfoText": "Los datos de la clase se sincronizan con {systemName}. La lista de clases puede estar temporalmente desactualizada hasta que se actualice con la última versión en {systemName}. Los datos se actualizan cada vez que un miembro del grupo se registra en Niedersächsischen Bildungscloud.",
 	"page-class-members.classMembersInfoBox.title": "¿Los estudiantes aún no están en la Niedersächsischen Bildungscloud?",
-	"page-class-members.classMembersInfoBox.text": "<p><b>No</b> es necesario obtener una declaración de consentimiento al registrar estudiantes. El uso de Niedersächsischen Bildungscloud está regulado por la Ley de escuelas de Baja Sajonia (artículo 31, párrafo 5 de la NSchG).<br><br>Si la escuela obtiene o recibe los datos del usuario a través de un sistema externo, no es necesario realizar ningún otro paso en el proceso nube. El registro se realiza a través del sistema externo.<br><br>De lo contrario, las invitaciones para registrarse se pueden enviar mediante un enlace a través del área de administración de la nube:<br><ul><li>Envío de enlaces de registro a las direcciones de correo electrónico almacenadas (También es posible crear directamente al importar)</li><li>Imprima enlaces de registro como hojas de impresión QR, recórtelas y distribuya recibos QR a los estudiantes<li><li>Seleccione uno o más usuarios, p.e. todos los estudiantes de una clase y luego llevar a cabo la acción deseada</li><li>Alternativamente posible: cambiar al modo de edición del perfil de usuario y recuperar el enlace de registro individual directamente para enviarlo manualmente</li></ul></p>"
+	"page-class-members.classMembersInfoBox.text": "<p><b>No</b> es necesario obtener una declaración de consentimiento al registrar estudiantes. El uso de Niedersächsischen Bildungscloud está regulado por la Ley de escuelas de Baja Sajonia (artículo 31, párrafo 5 de la NSchG).<br><br>Si la escuela obtiene o recibe los datos del usuario a través de un sistema externo, no es necesario realizar ningún otro paso en el proceso nube. El registro se realiza a través del sistema externo.<br><br>De lo contrario, las invitaciones para registrarse se pueden enviar mediante un enlace a través del área de administración de la nube:<br><ul><li>Envío de enlaces de registro a las direcciones de correo electrónico almacenadas (También es posible crear directamente al importar)</li><li>Imprima enlaces de registro como hojas de impresión QR, recórtelas y distribuya recibos QR a los estudiantes<li><li>Seleccione uno o más usuarios, p.e. todos los estudiantes de una clase y luego llevar a cabo la acción deseada</li><li>Alternativamente posible: cambiar al modo de edición del perfil de usuario y recuperar el enlace de registro individual directamente para enviarlo manualmente</li></ul></p>",
+	"tldraw.error.403": "Tldraw está desactivado",
+	"tldraw.error.500": "Se ha producido un error al configurar tldraw",
+	"tldraw.error.ws.4400": "Falta el nombre de la sala en los parámetros de la URL",
+	"tldraw.error.ws.4401": "Usted no tiene permiso para este tablero tldraw",
+	"tldraw.error.ws.4404": "No se ha encontrado el tablero Tldraw con este nombre",
+	"tldraw.error.ws.4500": "Se ha producido un error en la conexión tldraw websocket"
 }

src/locales/uk.json

@@ -1123,5 +1123,11 @@
 	"pages.h5p.api.success.save": "Вміст успішно збережено.",
 	"page-class-members.systemInfoText": "Дані класу синхронізуються з {systemName}. Список класів може бути тимчасово застарілим, поки його не буде оновлено останньою версією в {systemName}. Дані оновлюються кожного разу, коли учасник класу реєструється в Niedersächsischen Bildungscloud.",
 	"page-class-members.classMembersInfoBox.title": "Студенти ще не в Niedersächsischen Bildungscloud?",
-	"page-class-members.classMembersInfoBox.text": "<p>Заява про згоду <b>не</b> потрібна під час реєстрації студентів. Використання Niedersächsischen Bildungscloud регулюється Законом про школи Нижньої Саксонії (розділ 31, параграф 5 NSchG).<br><br>Якщо школа отримує або отримує дані користувача через зовнішню систему, жодних подальших дій у хмара. Реєстрація відбувається через зовнішню систему.<br><br>Інакше запрошення до реєстрації можна надіслати за посиланням через область адміністрування хмари:<br><ul><li>Надіслати посилання на реєстрацію на збережені адреси електронної пошти (також можна створювати безпосередньо під час імпорту)</li><li>Друкуйте реєстраційні посилання як QR-аркуші для друку, вирізайте їх і роздавайте QR-бланки студентам</li><li>Виберіть одного або кількох користувачів, напр. усіх студентів у класі, а потім виконайте потрібну дію</li><li>Як альтернатива: перейдіть у режим редагування профілю користувача та отримайте індивідуальне реєстраційне посилання безпосередньо, щоб надіслати його вручну</li></ul></p>"
+	"page-class-members.classMembersInfoBox.text": "<p>Заява про згоду <b>не</b> потрібна під час реєстрації студентів. Використання Niedersächsischen Bildungscloud регулюється Законом про школи Нижньої Саксонії (розділ 31, параграф 5 NSchG).<br><br>Якщо школа отримує або отримує дані користувача через зовнішню систему, жодних подальших дій у хмара. Реєстрація відбувається через зовнішню систему.<br><br>Інакше запрошення до реєстрації можна надіслати за посиланням через область адміністрування хмари:<br><ul><li>Надіслати посилання на реєстрацію на збережені адреси електронної пошти (також можна створювати безпосередньо під час імпорту)</li><li>Друкуйте реєстраційні посилання як QR-аркуші для друку, вирізайте їх і роздавайте QR-бланки студентам</li><li>Виберіть одного або кількох користувачів, напр. усіх студентів у класі, а потім виконайте потрібну дію</li><li>Як альтернатива: перейдіть у режим редагування профілю користувача та отримайте індивідуальне реєстраційне посилання безпосередньо, щоб надіслати його вручну</li></ul></p>",
+	"tldraw.error.403": "Tldraw вимкнено",
+	"tldraw.error.500": "Виникла помилка під час налаштування tldraw",
+	"tldraw.error.ws.4400": "Назва кімнати відсутня в параметрах URL-адреси",
+	"tldraw.error.ws.4401": "Ви не маєте дозволу на цю дошку tldraw",
+	"tldraw.error.ws.4404": "Дошки Tldraw з такою назвою не знайдено",
+	"tldraw.error.ws.4500": "Виникла помилка під час з'єднання з веб-сокетом tldraw"
 }

src/pages/Error.page.vue

@@ -47,11 +47,16 @@ export default defineComponent({
 		)[0] as PerformanceNavigationTiming;
 
 		const getError = () => {
-			if (performanceNavigation.type === "reload") {
-				const [statusCode, translationKey] = storage.getMultiple([
-					"applicationErrorStatusCode",
-					"applicationErrorTranslationKey",
-				]);
+			const [statusCode, translationKey, isTldrawError] = storage.getMultiple([
+				"applicationErrorStatusCode",
+				"applicationErrorTranslationKey",
+				"applicationErrorTldraw",
+			]);
+
+			if (
+				performanceNavigation.type === "reload" ||
+				(performanceNavigation.type === "navigate" && isTldrawError)
+			) {
 				return {
 					statusCode: Number(statusCode),
 					translationKey,
@@ -60,13 +65,16 @@ export default defineComponent({
 
 			storage.remove("applicationErrorStatusCode");
 			storage.remove("applicationErrorTranslationKey");
+			storage.remove("applicationErrorTldraw");
+
 			return {
 				statusCode: Number(applicationErrorModule.getStatusCode),
 				translationKey: applicationErrorModule.getTranslationKey,
 			};
 		};
 
 		addEventListener("pagehide", (event) => {
+			storage.remove("applicationErrorTldraw");
 			if (event.persisted) return;
 
 			if (applicationErrorModule.getStatusCode) {