BC-9862 - Create collabora documents on column board

src/locales/de.ts

@@ -508,6 +508,8 @@ export default {
 	"components.cardElement.fileElement.emptyAlt": "Hier ist ein Bild mit folgendem Namen",
 	"components.cardElement.fileElement.pdfAlt": "Vorschaubild für ",
 	"components.cardElement.fileElement.collaboraFile": "Dokument",
+	"components.cardElement.fileElement.collaboraFile.types": "Dokumententyp",
+	"components.cardElement.fileElement.collaboraFile.untitled": "Unbenanntes Dokument",
 	"components.cardElement.fileElement.previewError": "Laden der Vorschau fehlgeschlagen.",
 	"components.cardElement.fileElement.reloadStatus": "Status aktualisieren",
 	"components.cardElement.fileElement.videoFormatError":
@@ -547,6 +549,7 @@ export default {
 	"components.editor.fonts.colors.indigo": "Indigo",
 	"components.editor.fonts.colors.darkPurple": "Dunkelviolett",
 	"components.editor.fonts.colors.pink": "Rosa",
+	"components.elementTypeSelection.messageError": "Element Nachricht ist nicht valide.",
 	"components.elementTypeSelection.dialog.title": "Element hinzufügen",
 	"components.elementTypeSelection.elements.externalToolElement.subtitle": "Externe Tools",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "Datei",
@@ -557,6 +560,10 @@ export default {
 	"components.elementTypeSelection.elements.textElement.subtitle": "Text",
 	"components.elementTypeSelection.elements.videoConferenceElement.subtitle": "Videokonferenz",
 	"components.elementTypeSelection.elements.h5pElement.subtitle": "Interaktives Lernelement",
+	"components.elementTypeSelection.elements.collabora.subtitle": "Dokument erstellen",
+	"components.elementTypeSelection.elements.collabora.option.text": ".docx (Text)",
+	"components.elementTypeSelection.elements.collabora.option.spreadsheet": ".xlsx (Tabelle)",
+	"components.elementTypeSelection.elements.collabora.option.presentation": ".pptx (Präsentation)",
 	"components.externalTools.status.deactivated": "Deaktiviert",
 	"components.externalTools.status.incomplete": "Unvollständig",
 	"components.externalTools.status.latest": "Aktuell",

src/locales/en.ts

@@ -500,6 +500,8 @@ export default {
 	"components.cardElement.fileElement.emptyAlt": "Here is an image with the following name",
 	"components.cardElement.fileElement.pdfAlt": "Preview image for ",
 	"components.cardElement.fileElement.collaboraFile": "Document",
+	"components.cardElement.fileElement.collaboraFile.types": "Document type",
+	"components.cardElement.fileElement.collaboraFile.untitled": "Untitled document",
 	"components.cardElement.fileElement.previewError": "Failed to load the preview.",
 	"components.cardElement.fileElement.reloadStatus": "Update status",
 	"components.cardElement.fileElement.videoFormatError":
@@ -539,6 +541,7 @@ export default {
 	"components.editor.fonts.colors.indigo": "Indigo",
 	"components.editor.fonts.colors.darkPurple": "Dark Purple",
 	"components.editor.fonts.colors.pink": "Pink",
+	"components.elementTypeSelection.messageError": "Element message is not valid.",
 	"components.elementTypeSelection.dialog.title": "Add element",
 	"components.elementTypeSelection.elements.externalToolElement.subtitle": "External tools",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "File",
@@ -550,6 +553,10 @@ export default {
 	"components.elementTypeSelection.elements.textElement.subtitle": "Text",
 	"components.elementTypeSelection.elements.videoConferenceElement.subtitle": "Video conference",
 	"components.elementTypeSelection.elements.h5pElement.subtitle": "Interactive learning element",
+	"components.elementTypeSelection.elements.collabora.subtitle": "Create document",
+	"components.elementTypeSelection.elements.collabora.option.text": ".docx (text)",
+	"components.elementTypeSelection.elements.collabora.option.spreadsheet": ".xlsx (spreadsheet)",
+	"components.elementTypeSelection.elements.collabora.option.presentation": ".pptx (presentation)",
 	"components.externalTools.status.deactivated": "Deactivated",
 	"components.externalTools.status.incomplete": "Configuration incomplete",
 	"components.externalTools.status.latest": "Latest",

src/locales/es.ts

@@ -509,6 +509,8 @@ export default {
 	"components.cardElement.fileElement.emptyAlt": "Aquí tenéis una imagen con el siguiente nombre",
 	"components.cardElement.fileElement.pdfAlt": "Imagen de vista previa para ",
 	"components.cardElement.fileElement.collaboraFile": "Archivo",
+	"components.cardElement.fileElement.collaboraFile.types": "Tipo de documento",
+	"components.cardElement.fileElement.collaboraFile.untitled": "Documento sin título",
 	"components.cardElement.fileElement.previewError": "No se ha podido cargar la vista previa.",
 	"components.cardElement.fileElement.reloadStatus": "Estado de actualización",
 	"components.cardElement.fileElement.videoFormatError":
@@ -548,6 +550,7 @@ export default {
 	"components.editor.fonts.colors.indigo": "Índigo",
 	"components.editor.fonts.colors.darkPurple": "Púrpura Oscuro",
 	"components.editor.fonts.colors.pink": "Rosa",
+	"components.elementTypeSelection.messageError": "El mensaje del elemento no es válido.",
 	"components.elementTypeSelection.dialog.title": "Añadir elemento",
 	"components.elementTypeSelection.elements.externalToolElement.subtitle": "Herramientas externas",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "Archivo",
@@ -559,6 +562,10 @@ export default {
 	"components.elementTypeSelection.elements.textElement.subtitle": "Texto",
 	"components.elementTypeSelection.elements.videoConferenceElement.subtitle": "Videoconferencia",
 	"components.elementTypeSelection.elements.h5pElement.subtitle": "Elemento de aprendizaje interactivo",
+	"components.elementTypeSelection.elements.collabora.subtitle": "Crear documento",
+	"components.elementTypeSelection.elements.collabora.option.text": ".docx (Texto)",
+	"components.elementTypeSelection.elements.collabora.option.spreadsheet": ".xlsx (Hoja de cálculo)",
+	"components.elementTypeSelection.elements.collabora.option.presentation": ".pptx (Presentación)",
 	"components.externalTools.status.deactivated": "Desactivado",
 	"components.externalTools.status.incomplete": "Configuración incompleta",
 	"components.externalTools.status.latest": "Actual",

src/locales/uk.ts

@@ -503,6 +503,8 @@ export default {
 	"components.cardElement.fileElement.emptyAlt": "Ось зображення з такою назвою",
 	"components.cardElement.fileElement.pdfAlt": "попередній перегляд зображення для ",
 	"components.cardElement.fileElement.collaboraFile": "Документ",
+	"components.cardElement.fileElement.collaboraFile.types": "Тип документа",
+	"components.cardElement.fileElement.collaboraFile.untitled": "Без назви документ",
 	"components.cardElement.fileElement.previewError": "Не вдалося завантажити попередній перегляд.",
 	"components.cardElement.fileElement.reloadStatus": "Статус оновлення",
 	"components.cardElement.fileElement.videoFormatError":
@@ -542,6 +544,7 @@ export default {
 	"components.editor.fonts.colors.indigo": "Індиго",
 	"components.editor.fonts.colors.darkPurple": "Темно-фіолетовий",
 	"components.editor.fonts.colors.pink": "Рожевий",
+	"components.elementTypeSelection.messageError": "Повідомлення елемента недійсне.",
 	"components.elementTypeSelection.dialog.title": "Додати елемент",
 	"components.elementTypeSelection.elements.externalToolElement.subtitle": "Зовнішні інструменти",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "Файл",
@@ -553,6 +556,10 @@ export default {
 	"components.elementTypeSelection.elements.textElement.subtitle": "Текст",
 	"components.elementTypeSelection.elements.videoConferenceElement.subtitle": "Відеоконференція",
 	"components.elementTypeSelection.elements.h5pElement.subtitle": "Інтерактивний елемент навчання",
+	"components.elementTypeSelection.elements.collabora.subtitle": "Створити документ",
+	"components.elementTypeSelection.elements.collabora.option.text": ".docx (Документ)",
+	"components.elementTypeSelection.elements.collabora.option.spreadsheet": ".xlsx (Таблиця)",
+	"components.elementTypeSelection.elements.collabora.option.presentation": ".pptx (Презентація)",
 	"components.externalTools.status.deactivated": "Деактивовано",
 	"components.externalTools.status.incomplete": "Конфігурація не завершена",
 	"components.externalTools.status.latest": "Останній",

src/modules/data/board/cardActions/cardSocketApi.composable.ts

@@ -14,12 +14,17 @@ import {
 } from "./cardActionPayload.types";
 import * as CardActions from "./cardActions";
 import { handle, on, PermittedStoreActions } from "@/types/board/ActionFactory";
+import { AnyContentElement } from "@/types/board/ContentElement";
+import { AnyContentElementSchema } from "@/types/board/ContentElement.schema";
+import { notifyError } from "@data-app";
 import { useDebounceFn } from "@vueuse/core";
 import { chunk } from "lodash-es";
 import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
 
 export const useCardSocketApi = () => {
 	const cardStore = useCardStore();
+	const { t } = useI18n();
 
 	const WAIT_AFTER_LAST_CALL_IN_MS = 30;
 	const MAX_WAIT_BEFORE_FIRST_CALL_IN_MS = 200;
@@ -72,7 +77,7 @@ export const useCardSocketApi = () => {
 		);
 	};
 
-	const { emitOnSocket, disconnectSocket } = useSocketConnection(dispatch);
+	const { emitOnSocket, disconnectSocket, emitWithAck } = useSocketConnection(dispatch);
 
 	const disconnectSocketRequest = () => {
 		disconnectSocket();
@@ -93,8 +98,15 @@ export const useCardSocketApi = () => {
 		{ maxWait: MAX_WAIT_BEFORE_FIRST_CALL_IN_MS }
 	);
 
-	const createElementRequest = async (payload: CreateElementRequestPayload) => {
-		emitOnSocket("create-element-request", payload);
+	const createElementRequest = async (payload: CreateElementRequestPayload): Promise<AnyContentElement | undefined> => {
+		const response = (await emitWithAck("create-element-request", payload)) as unknown;
+
+		try {
+			const anyContentElement = AnyContentElementSchema.parse(response);
+			return anyContentElement;
+		} catch {
+			notifyError(t("components.elementTypeSelection.messageError"));
+		}
 	};
 
 	const deleteElementRequest = async (payload: DeleteElementRequestPayload) => {

src/modules/data/board/cardActions/cardSocketApi.composable.unit.ts

@@ -336,7 +336,7 @@ describe("useCardSocketApi", () => {
 
 			createElementRequest(payload);
 
-			expect(socketMock.emitOnSocket).toHaveBeenCalledWith("create-element-request", payload);
+			expect(socketMock.emitWithAck).toHaveBeenCalledWith("create-element-request", payload);
 		});
 	});
 

src/modules/data/file/FileStorageApi.composable.ts

@@ -58,14 +58,19 @@ export const useFileStorageApi = () => {
 		}
 	};
 
-	const uploadFromUrl = async (imageUrl: string, parentId: string, parentType: FileRecordParent): Promise<void> => {
+	const uploadFromUrl = async (
+		imageUrl: string,
+		parentId: string,
+		parentType: FileRecordParent,
+		fileName?: string
+	): Promise<void> => {
 		try {
 			const { pathname } = new URL(imageUrl);
-			const fileName = pathname.substring(pathname.lastIndexOf("/") + 1);
+			fileName = fileName ?? pathname.substring(pathname.lastIndexOf("/") + 1);
 			const schoolId = useAppStore().school?.id as string;
 			const fileUrlParams: FileUrlParams = {
 				url: imageUrl,
-				fileName,
+				fileName: fileName === "" ? "file" : fileName,
 				headers: { "User-Agent": "Embed Request User Agent" },
 			};
 			const response = await fileApi.uploadFromUrl(

src/modules/feature/board-file-element/upload/FileUpload.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import FilePicker from "./file-picker/FilePicker.vue";
 import { ContentElementBar } from "@ui-board";
-import { useSharedLastCreatedElement } from "@util-board";
+import { useSharedFileSelect, useSharedLastCreatedElement } from "@util-board";
 import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
 
 export default defineComponent({
@@ -34,6 +34,7 @@ export default defineComponent({
 		const fileWasPicked = ref(false);
 
 		const { lastCreatedElementId, resetLastCreatedElementId } = useSharedLastCreatedElement();
+		const { isFileSelectOnMountEnabled } = useSharedFileSelect();
 
 		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
 			if (fileWasPicked.value || props.isUploading) {
@@ -46,10 +47,11 @@ export default defineComponent({
 
 		onMounted(() => {
 			window.addEventListener("beforeunload", handleBeforeUnload);
-			if (lastCreatedElementId.value === props.elementId) {
-				isFilePickerOpen.value = true;
-				resetLastCreatedElementId();
+			if (lastCreatedElementId.value !== props.elementId) {
+				return;
 			}
+			isFilePickerOpen.value = isFileSelectOnMountEnabled.value;
+			resetLastCreatedElementId();
 		});
 
 		onBeforeUnmount(() => {

src/modules/feature/board/board/Board.vue

@@ -86,6 +86,7 @@
 				</div>
 				<ConfirmationDialog />
 				<AddElementDialog />
+				<AddCollaboraFileDialog />
 				<LightBox />
 				<CopyResultModal
 					:is-open="isCopyModalOpen"
@@ -112,6 +113,7 @@
 </template>
 
 <script setup lang="ts">
+import AddCollaboraFileDialog from "../shared/AddCollaboraFileDialog.vue";
 import AddElementDialog from "../shared/AddElementDialog.vue";
 import { useBodyScrolling } from "../shared/BodyScrolling.composable";
 import EditSettingsDialog from "../shared/EditSettingsDialog.vue";