BC-11042 - Refactor collabora file dialog

src/locales/de.ts

@@ -539,8 +539,6 @@ 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":
@@ -592,9 +590,6 @@ export default {
 	"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",
@@ -2012,6 +2007,12 @@ export default {
 	"feature.media-shelf.layout.list": "Zeilen",
 	"feature.media-shelf.layout.grid": "Raster",
 	"feature.collabora.iframeTitle": "Office-Dokument Editor",
+	"feature.collabora.add-collabora-file-dialog.title": "Dokument erstellen",
+	"feature.collabora.add-collabora-file-dialog.doc-types": "Dokumententyp",
+	"feature.collabora.add-collabora-file-dialog.untitled-file": "Unbenanntes Dokument",
+	"feature.collabora.add-collabora-file-dialog.option.text": ".docx (Text)",
+	"feature.collabora.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Tabelle)",
+	"feature.collabora.add-collabora-file-dialog.option.presentation": ".pptx (Präsentation)",
 	"pages.folder.emptyState": "Aktuell gibt es hier noch keine Dateien",
 	"pages.folder.fab.title": "Datei hinzufügen",
 	"pages.folder.untitled": "Unbenannter Ordner",
@@ -2032,10 +2033,4 @@ export default {
 	"pages.folder.rename-file-dialog.validation.invalid-characters": "Der Dateiname enthält ungültige Zeichen.",
 	"pages.folder.fab.upload-file": "Datei hochladen",
 	"pages.folder.fab.create-document": "Dokument erstellen",
-	"pages.folder.add-collabora-file-dialog.title": "Dokument erstellen",
-	"pages.folder.add-collabora-file-dialog.doc-types": "Dokumententyp",
-	"pages.folder.add-collabora-file-dialog.untitled-file": "Unbenanntes Dokument",
-	"pages.folder.add-collabora-file-dialog.option.text": ".docx (Text)",
-	"pages.folder.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Tabelle)",
-	"pages.folder.add-collabora-file-dialog.option.presentation": ".pptx (Präsentation)",
 };

src/locales/en.ts

@@ -525,8 +525,6 @@ 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":
@@ -579,9 +577,6 @@ export default {
 	"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",
@@ -1977,6 +1972,12 @@ export default {
 	"feature.media-shelf.layout.list": "Lines",
 	"feature.media-shelf.layout.grid": "Grid",
 	"feature.collabora.iframeTitle": "Office document editor",
+	"feature.collabora.add-collabora-file-dialog.title": "Create document",
+	"feature.collabora.add-collabora-file-dialog.doc-types": "Document type",
+	"feature.collabora.add-collabora-file-dialog.untitled-file": "Untitled document",
+	"feature.collabora.add-collabora-file-dialog.option.text": ".docx (Text)",
+	"feature.collabora.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Spreadsheet)",
+	"feature.collabora.add-collabora-file-dialog.option.presentation": ".pptx (Presentation)",
 	"pages.folder.emptyState": "There are currently no files here",
 	"pages.folder.fab.title": "Add file",
 	"pages.folder.untitled": "Untitled folder",
@@ -1997,10 +1998,4 @@ export default {
 	"pages.folder.rename-file-dialog.validation.invalid-characters": "The file name contains invalid characters.",
 	"pages.folder.fab.upload-file": "Upload file",
 	"pages.folder.fab.create-document": "Create document",
-	"pages.folder.add-collabora-file-dialog.title": "Create document",
-	"pages.folder.add-collabora-file-dialog.doc-types": "Document type",
-	"pages.folder.add-collabora-file-dialog.untitled-file": "Untitled document",
-	"pages.folder.add-collabora-file-dialog.option.text": ".docx (Text)",
-	"pages.folder.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Spreadsheet)",
-	"pages.folder.add-collabora-file-dialog.option.presentation": ".pptx (Presentation)",
 };

src/locales/es.ts

@@ -534,8 +534,6 @@ 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":
@@ -588,9 +586,6 @@ export default {
 	"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",
@@ -2027,6 +2022,12 @@ export default {
 	"feature.media-shelf.layout.list": "Líneas",
 	"feature.media-shelf.layout.grid": "Red",
 	"feature.collabora.iframeTitle": "Editor de documentos de Office",
+	"feature.collabora.add-collabora-file-dialog.title": "Crear documento",
+	"feature.collabora.add-collabora-file-dialog.doc-types": "Tipo de documento",
+	"feature.collabora.add-collabora-file-dialog.untitled-file": "Documento sin título",
+	"feature.collabora.add-collabora-file-dialog.option.text": ".docx (Texto)",
+	"feature.collabora.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Hoja de cálculo)",
+	"feature.collabora.add-collabora-file-dialog.option.presentation": ".pptx (Presentación)",
 	"pages.folder.emptyState": "Actualmente no hay archivos aquí",
 	"pages.folder.fab.title": "Añadir archivo",
 	"pages.folder.untitled": "Carpeta sin título",
@@ -2048,10 +2049,4 @@ export default {
 		"El nombre del archivo contiene caracteres no válidos.",
 	"pages.folder.fab.upload-file": "Subir archivo",
 	"pages.folder.fab.create-document": "Crear documento",
-	"pages.folder.add-collabora-file-dialog.title": "Crear documento",
-	"pages.folder.add-collabora-file-dialog.doc-types": "Tipo de documento",
-	"pages.folder.add-collabora-file-dialog.untitled-file": "Documento sin título",
-	"pages.folder.add-collabora-file-dialog.option.text": ".docx (Texto)",
-	"pages.folder.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Hoja de cálculo)",
-	"pages.folder.add-collabora-file-dialog.option.presentation": ".pptx (Presentación)",
 };

src/locales/uk.ts

@@ -534,8 +534,6 @@ 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":
@@ -588,9 +586,6 @@ export default {
 	"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": "Останній",
@@ -1996,6 +1991,12 @@ export default {
 	"feature.media-shelf.layout.list": "лінії",
 	"feature.media-shelf.layout.grid": "сітка",
 	"feature.collabora.iframeTitle": "Редактор документів Office",
+	"feature.collabora.add-collabora-file-dialog.title": "Створити документ",
+	"feature.collabora.add-collabora-file-dialog.doc-types": "Тип документа",
+	"feature.collabora.add-collabora-file-dialog.untitled-file": "Без назви документ",
+	"feature.collabora.add-collabora-file-dialog.option.text": ".docx (Документ)",
+	"feature.collabora.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Таблиця)",
+	"feature.collabora.add-collabora-file-dialog.option.presentation": ".pptx (Презентація)",
 	"pages.folder.emptyState": "Наразі тут немає файлів",
 	"pages.folder.fab.title": "Додати файл",
 	"pages.folder.untitled": "Папка без назви",
@@ -2016,10 +2017,4 @@ export default {
 	"pages.folder.rename-file-dialog.validation.invalid-characters": "Ім'я файлу містить недопустимі символи.",
 	"pages.folder.fab.upload-file": "Завантажити файл",
 	"pages.folder.fab.create-document": "Створити документ",
-	"pages.folder.add-collabora-file-dialog.title": "Створити документ",
-	"pages.folder.add-collabora-file-dialog.doc-types": "Тип документа",
-	"pages.folder.add-collabora-file-dialog.untitled-file": "Без назви документ",
-	"pages.folder.add-collabora-file-dialog.option.text": ".docx (Документ)",
-	"pages.folder.add-collabora-file-dialog.option.spreadsheet": ".xlsx (Таблиця)",
-	"pages.folder.add-collabora-file-dialog.option.presentation": ".pptx (Презентація)",
 };

src/modules/data/board/Card.store.ts

@@ -15,8 +15,10 @@ import {
 import { useCardRestApi } from "./cardActions/cardRestApi.composable";
 import { useCardSocketApi } from "./cardActions/cardSocketApi.composable";
 import { CardResponse, ContentElementType, PreferredToolResponse, ToolContextType } from "@/serverApi/v3";
+import { FileRecordParent } from "@/types/file/File";
 import { notifyInfo } from "@data-app";
 import { useEnvConfig } from "@data-env";
+import { CollaboraFileType, useFileStorageApi } from "@data-file";
 import { useSharedEditMode, useSharedLastCreatedElement } from "@util-board";
 import { defineStore } from "pinia";
 import { nextTick, Ref, ref } from "vue";
@@ -35,6 +37,7 @@ export const useCardStore = defineStore("cardStore", () => {
 
 	const { setFocus, forceFocus } = useBoardFocusHandler();
 	const { setEditModeId, editModeId } = useSharedEditMode();
+	const { uploadCollaboraFile } = useFileStorageApi();
 
 	const fetchCardRequest = socketOrRest.fetchCardRequest;
 
@@ -109,6 +112,25 @@ export const useCardStore = defineStore("cardStore", () => {
 
 	const createElementRequest = socketOrRest.createElementRequest;
 
+	const createFileElementWithCollabora = async (type: CollaboraFileType, fileName: string) => {
+		if (!editModeId.value) {
+			return;
+		}
+
+		const element = await createElementRequest({
+			type: ContentElementType.File,
+			cardId: editModeId.value,
+		});
+		if (!element) {
+			return;
+		}
+
+		const uploadedCollaboraFile = await uploadCollaboraFile(type, element.id, FileRecordParent.BOARDNODES, fileName);
+		if (!uploadedCollaboraFile) {
+			await deleteElementRequest({ elementId: element.id, cardId: editModeId.value });
+		}
+	};
+
 	const createPreferredElement = (payload: CreateElementRequestPayload, tool: PreferredToolResponse) => {
 		restApi.createPreferredElement(payload, tool);
 	};
@@ -265,5 +287,6 @@ export const useCardStore = defineStore("cardStore", () => {
 		preferredTools,
 		isPreferredToolsLoading,
 		disconnectSocketRequest,
+		createFileElementWithCollabora,
 	};
 });

src/modules/data/board/Card.store.unit.ts

@@ -19,9 +19,11 @@ import { cardResponseFactory } from "@@/tests/test-utils/factory/cardResponseFac
 import { drawingElementResponseFactory } from "@@/tests/test-utils/factory/drawingElementResponseFactory";
 import { useNotificationStore } from "@data-app";
 import { CreateElementRequestPayload, useCardStore, useSocketConnection } from "@data-board";
+import { CollaboraFileType, useFileStorageApi } from "@data-file";
 import { createMock, DeepMocked } from "@golevelup/ts-vitest";
 import { createTestingPinia } from "@pinia/testing";
 import { useSharedEditMode, useSharedLastCreatedElement } from "@util-board";
+import { flushPromises } from "@vue/test-utils";
 import { cloneDeep } from "lodash-es";
 import { createPinia, setActivePinia } from "pinia";
 import type { Mock } from "vitest";
@@ -49,6 +51,9 @@ const mockedUseSocketConnection = vi.mocked(useSocketConnection);
 vi.mock("./BoardFocusHandler.composable");
 const mockedBoardFocusHandler = vi.mocked(useBoardFocusHandler);
 
+vi.mock("@data-file");
+const mockedFileStorageApi = vi.mocked(useFileStorageApi);
+
 describe("CardStore", () => {
 	let mockedBoardApiCalls: DeepMocked<ReturnType<typeof useBoardApi>>;
 	let mockedErrorHandlerCalls: DeepMocked<ReturnType<typeof useErrorHandler>>;
@@ -59,6 +64,7 @@ describe("CardStore", () => {
 	let setEditModeId: Mock;
 	let editModeId: Ref<string | undefined>;
 	let mockedBoardFocusCalls: DeepMocked<ReturnType<typeof useBoardFocusHandler>>;
+	let mockedFileStorageActions: DeepMocked<ReturnType<typeof useFileStorageApi>>;
 
 	beforeEach(() => {
 		setActivePinia(createPinia());
@@ -110,6 +116,11 @@ describe("CardStore", () => {
 		mockedBoardFocusCalls = createMock<ReturnType<typeof useBoardFocusHandler>>();
 		mockedBoardFocusHandler.mockReturnValue(mockedBoardFocusCalls);
 
+		mockedFileStorageActions = createMock<ReturnType<typeof useFileStorageApi>>({
+			uploadCollaboraFile: vi.fn(),
+		});
+		mockedFileStorageApi.mockReturnValue(mockedFileStorageActions);
+
 		setEditModeId = vi.fn();
 		editModeId = ref(undefined);
 		mockedSharedEditMode.mockReturnValue({
@@ -970,4 +981,99 @@ describe("CardStore", () => {
 			});
 		});
 	});
+
+	describe("createFileElementWithCollabora", () => {
+		describe("when a card is in edit mode", () => {
+			it("should call createElementRequest", () => {
+				const { cardStore } = setup(false);
+
+				editModeId.value = "cardId";
+				mockedCardRestApiActions.createElementRequest.mockReturnValueOnce(
+					Promise.resolve({
+						id: "elementId",
+						type: ContentElementType.File,
+						content: {},
+					})
+				);
+				mockedFileStorageActions.uploadCollaboraFile.mockReturnValueOnce(Promise.resolve({ id: "fileId" }));
+				cardStore.createFileElementWithCollabora(CollaboraFileType.Text, "fileName.docx");
+
+				expect(mockedCardRestApiActions.createElementRequest).toHaveBeenCalled();
+			});
+
+			it("should call uploadCollaboraFile", async () => {
+				const { cardStore } = setup(false);
+
+				editModeId.value = "cardId";
+				mockedCardRestApiActions.createElementRequest.mockReturnValueOnce(
+					Promise.resolve({
+						id: "elementId",
+						type: ContentElementType.File,
+						content: {},
+					})
+				);
+				mockedFileStorageActions.uploadCollaboraFile.mockReturnValueOnce(Promise.resolve({ id: "fileId" }));
+				await cardStore.createFileElementWithCollabora(CollaboraFileType.Text, "fileName.docx");
+
+				expect(mockedFileStorageActions.uploadCollaboraFile).toHaveBeenCalled();
+			});
+
+			describe("when element creation fails", () => {
+				it("should not call uploadCollaboraFile", async () => {
+					const { cardStore } = setup(false);
+
+					editModeId.value = "cardId";
+					mockedCardRestApiActions.createElementRequest.mockReturnValueOnce(undefined);
+					await cardStore.createFileElementWithCollabora(CollaboraFileType.Text, "fileName.docx");
+
+					expect(mockedFileStorageActions.uploadCollaboraFile).not.toHaveBeenCalled();
+				});
+			});
+
+			describe("when uploading collabora file fails", () => {
+				it("should delete created element", async () => {
+					const { cardStore } = setup(false);
+
+					editModeId.value = "cardId";
+					mockedCardRestApiActions.createElementRequest.mockReturnValueOnce(
+						Promise.resolve({
+							id: "elementId",
+							type: ContentElementType.File,
+							content: {},
+						})
+					);
+					mockedFileStorageActions.uploadCollaboraFile.mockReturnValueOnce(Promise.resolve(undefined));
+					await cardStore.createFileElementWithCollabora(CollaboraFileType.Text, "fileName.docx");
+					await flushPromises();
+
+					expect(mockedCardRestApiActions.deleteElementRequest).toHaveBeenCalled();
+				});
+			});
+		});
+
+		describe("when no card is in edit mode", () => {
+			it("should not call createElementRequest", () => {
+				const { cardStore } = setup(false);
+
+				cardStore.createFileElementWithCollabora(CollaboraFileType.Text, "fileName.docx");
+
+				expect(mockedCardRestApiActions.createElementRequest).not.toHaveBeenCalled();
+			});
+
+			it("should not call uploadCollaboraFile", async () => {
+				const { cardStore } = setup(false);
+
+				mockedCardRestApiActions.createElementRequest.mockReturnValueOnce(
+					Promise.resolve({
+						id: "elementId",
+						type: ContentElementType.File,
+						content: {},
+					})
+				);
+				await cardStore.createFileElementWithCollabora(CollaboraFileType.Text, "fileName.docx");
+
+				expect(mockedFileStorageActions.uploadCollaboraFile).not.toHaveBeenCalled();
+			});
+		});
+	});
 });