BC-6781 - Add Etherpad in Board in API (BE)

src/assets/img/index.d.ts

@@ -6,3 +6,8 @@ declare module "@/assets/img/image-not-available.svg" {
 	const value: string;
 	export default value;
 }
+
+declare module "@/assets/img/collaborativeEditor.svg" {
+	const value: string;
+	export default value;
+}

src/locales/de.ts

@@ -313,6 +313,7 @@ export default {
 	"components.cardElement.deleteElement": "löschen",
 	"components.cardElement.dragElement": "verschieben",
 	"components.cardElement.drawingElement": "Whiteboard",
+	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
 	"components.cardElement.fileElement.altDescription":
 		"Eine kurze Beschreibung hilft Personen, die das Bild nicht sehen können.",
 	"components.cardElement.fileElement.alternativeText": "Alternativtext",
@@ -367,6 +368,8 @@ export default {
 	"components.elementTypeSelection.elements.externalToolElement.subtitle":
 		"Externe Tools",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "Datei",
+	"components.elementTypeSelection.elements.collaborativeTextEditor.subtitle":
+		"Texteditor",
 	"components.elementTypeSelection.elements.linkElement.subtitle": "Link",
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Abgabe",

src/locales/en.ts

@@ -310,6 +310,7 @@ export default {
 	"components.cardElement.deleteElement": "Delete element",
 	"components.cardElement.dragElement": "Move element",
 	"components.cardElement.drawingElement": "Whiteboard",
+	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
 	"components.cardElement.fileElement.altDescription":
 		"A short description helps people who cannot see the picture.",
 	"components.cardElement.fileElement.alternativeText": "Alternative Text",
@@ -363,6 +364,8 @@ export default {
 	"components.elementTypeSelection.elements.externalToolElement.subtitle":
 		"External tools",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "File",
+	"components.elementTypeSelection.elements.collaborativeTextEditor.subtitle":
+		"Texteditor",
 	"components.elementTypeSelection.elements.linkElement.subtitle": "Link",
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Submission",

src/locales/es.ts

@@ -316,6 +316,7 @@ export default {
 	"components.cardElement.deleteElement": "Suprimir elemento",
 	"components.cardElement.dragElement": "Mover elemento",
 	"components.cardElement.drawingElement": "Pizarra",
+	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
 	"components.cardElement.fileElement.altDescription":
 		"Una breve descripción ayuda a las personas que no pueden ver la imagen.",
 	"components.cardElement.fileElement.alternativeText": "Texto alternativo",
@@ -369,7 +370,10 @@ export default {
 	"components.elementTypeSelection.dialog.title": "Añadir elemento",
 	"components.elementTypeSelection.elements.externalToolElement.subtitle":
 		"Herramientas externas",
-	"components.elementTypeSelection.elements.fileElement.subtitle": "Archivo",
+	"components.elementTypeSelection.elements.fileElement.subtitle":
+		"Editor de texto",
+	"components.elementTypeSelection.elements.collaborativeTextEditor.subtitle":
+		"Text Editor",
 	"components.elementTypeSelection.elements.linkElement.subtitle": "Enlace",
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Envíos",

src/locales/uk.ts

@@ -317,6 +317,7 @@ export default {
 	"components.cardElement.deleteElement": "Видалити елемент",
 	"components.cardElement.dragElement": "Перемістити елемент",
 	"components.cardElement.drawingElement": "Дошка",
+	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
 	"components.cardElement.fileElement.altDescription":
 		"Короткий опис допомагає людям, які не бачать зображення.",
 	"components.cardElement.fileElement.alternativeText": "альтернативний текст",
@@ -370,6 +371,8 @@ export default {
 	"components.elementTypeSelection.elements.externalToolElement.subtitle":
 		"Зовнішні інструменти",
 	"components.elementTypeSelection.elements.fileElement.subtitle": "Файл",
+	"components.elementTypeSelection.elements.collaborativeTextEditor.subtitle":
+		"Текстовий редактор",
 	"components.elementTypeSelection.elements.linkElement.subtitle": "Посилання",
 	"components.elementTypeSelection.elements.submissionElement.subtitle":
 		"Подання",

src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.unit.ts

@@ -0,0 +1,217 @@
+import { CollaborativeTextEditorParentType } from "@/serverApi/v3";
+import NotifierModule from "@/store/notifier";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import { createModuleMocks } from "@/utils/mock-store-module";
+import { collaborativeTextEditorElementResponseFactory } from "@@/tests/test-utils";
+import {
+	createTestingI18n,
+	createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { CollaborativeTextEditorElement } from "@feature-board-collaborative-text-editor-element";
+import { createMock } from "@golevelup/ts-jest";
+import { ContentElementBar } from "@ui-board";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import CollaborativeTextEditorElementMenu from "./components/CollaborativeTextEditorElementMenu.vue";
+import { setupCollaborativeTextEditorApiMock } from "./test-utils/collaborativeTextEditorApiMock";
+
+// Mocks
+jest.mock("@data-board", () => ({
+	useBoardFocusHandler: jest.fn(),
+	useContentElementState: jest.fn(() => ({ modelValue: {} })),
+	useDeleteConfirmationDialog: jest.fn(),
+}));
+jest.mock("@feature-board");
+jest.mock("./composables/CollaborativeTextEditorApi.composable");
+
+describe("CollaborativeTextEditorElement", () => {
+	const notifierModule = createModuleMocks(NotifierModule);
+
+	const setup = (props: { isEditMode: boolean; getUrlHasError?: boolean }) => {
+		document.body.setAttribute("data-app", "true");
+
+		const element = collaborativeTextEditorElementResponseFactory.build();
+
+		const resolvedValue = props.getUrlHasError
+			? undefined
+			: `${CollaborativeTextEditorParentType.ContentElement}/${element.id}`;
+		const getUrlMock = jest.fn().mockResolvedValueOnce(resolvedValue);
+
+		const { getUrl } = setupCollaborativeTextEditorApiMock({
+			getUrlMock,
+		});
+
+		const wrapper = mount(CollaborativeTextEditorElement, {
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+				provide: {
+					[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+				},
+			},
+			propsData: { ...props, element: element },
+		});
+
+		const windowMock = createMock<Window>();
+		jest.spyOn(window, "open").mockImplementation(() => windowMock);
+
+		return {
+			wrapper,
+			isEditMode: true,
+			element: element,
+			getUrl,
+			windowMock,
+		};
+	};
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	describe("when component is not in edit-mode", () => {
+		it("should render the element corrrectly", () => {
+			const { wrapper } = setup({
+				isEditMode: false,
+			});
+			expect(
+				wrapper.findComponent(CollaborativeTextEditorElement).isVisible()
+			).toBe(true);
+		});
+
+		it("should render the ContentElementBar", () => {
+			const { wrapper } = setup({
+				isEditMode: false,
+			});
+			expect(wrapper.findComponent(ContentElementBar).exists()).toBe(true);
+		});
+
+		it("should not render the BoardMenu", () => {
+			const { wrapper } = setup({
+				isEditMode: false,
+			});
+
+			const boardMenu = wrapper.findComponent(
+				CollaborativeTextEditorElementMenu
+			);
+
+			expect(boardMenu.exists()).toBe(false);
+		});
+
+		describe("when element is clicked", () => {
+			describe("when getUrl returns successful", () => {
+				it("should call getUrl", async () => {
+					const { wrapper, element, getUrl } = setup({
+						isEditMode: false,
+					});
+
+					const card = wrapper.findComponent({
+						ref: "collaborativetextEditorElement",
+					});
+
+					await card.trigger("click");
+
+					expect(getUrl).toHaveBeenCalledTimes(1);
+					expect(getUrl).toHaveBeenCalledWith(
+						element.id,
+						CollaborativeTextEditorParentType.ContentElement
+					);
+				});
+
+				it("should open collaborative text editor in new tab", async () => {
+					const { wrapper, element, windowMock } = setup({
+						isEditMode: false,
+					});
+
+					const card = wrapper.findComponent({
+						ref: "collaborativetextEditorElement",
+					});
+
+					await card.trigger("click");
+
+					expect(window.open).toHaveBeenCalledTimes(1);
+					expect(windowMock.location).toBe(
+						`${CollaborativeTextEditorParentType.ContentElement}/${element.id}`
+					);
+				});
+			});
+
+			describe("when getUrl returns undefined", () => {
+				it("should not open new tab", async () => {
+					const { wrapper, windowMock, element } = setup({
+						isEditMode: false,
+						getUrlHasError: true,
+					});
+
+					const card = wrapper.findComponent({
+						ref: "collaborativetextEditorElement",
+					});
+
+					await card.trigger("click");
+
+					expect(window.open).toHaveBeenCalledTimes(1);
+					expect(windowMock.location).not.toBe(
+						`${CollaborativeTextEditorParentType.ContentElement}/${element.id}`
+					);
+				});
+			});
+		});
+	});
+
+	describe("when component is in edit-mode", () => {
+		it("should render BoardMenu element", async () => {
+			const { wrapper } = setup({
+				isEditMode: true,
+			});
+
+			const boardMenu = wrapper.findComponent(
+				CollaborativeTextEditorElementMenu
+			);
+			expect(boardMenu.exists()).toBe(true);
+		});
+
+		describe("when move down is emitted by CollaborativeTextEditorElementMenu", () => {
+			it('should emit "move-down:edit" collaborative text editor', async () => {
+				const { wrapper } = setup({
+					isEditMode: true,
+				});
+
+				const boardMenu = wrapper.findComponent(
+					CollaborativeTextEditorElementMenu
+				);
+				boardMenu.vm.$emit("move-down:element");
+
+				expect(wrapper.emitted("move-down:edit")).toBeTruthy();
+			});
+		});
+
+		describe("when move up is clicked", () => {
+			it('should emit "move-up" collaborative text editor', async () => {
+				const { wrapper } = setup({
+					isEditMode: true,
+				});
+
+				const boardMenu = wrapper.findComponent(
+					CollaborativeTextEditorElementMenu
+				);
+				boardMenu.vm.$emit("move-up:element");
+
+				expect(wrapper.emitted("move-up:edit")).toBeTruthy();
+			});
+		});
+
+		describe("when delete is clicked", () => {
+			it('should emit "delete" collaborative text editor', async () => {
+				const { wrapper } = setup({
+					isEditMode: true,
+				});
+
+				const boardMenu = wrapper.findComponent(
+					CollaborativeTextEditorElementMenu
+				);
+				boardMenu.vm.$emit("delete:element", Promise.resolve(true));
+				await nextTick();
+
+				expect(wrapper.emitted("delete:element")).toBeTruthy();
+			});
+		});
+	});
+});

src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue

@@ -0,0 +1,100 @@
+<template>
+	<v-card
+		class="mb-4"
+		data-testid="collaborative-text-editor-element"
+		variant="outlined"
+		ref="collaborativetextEditorElement"
+		:ripple="false"
+		tabindex="0"
+		elevation="0"
+		@keydown.up.down="onKeydownArrow"
+		role="button"
+		@click="redirectToEditorUrl"
+	>
+		<ContentElementBar :hasGreyBackground="true" :icon="mdiTextBoxEditOutline">
+			<template #display>
+				<v-img
+					:src="image"
+					:alt="$t('components.cardElement.collaborativeTextEditorElement')"
+					cover
+					class="rounded-t"
+				/>
+			</template>
+			<template #title>
+				{{ $t("components.cardElement.collaborativeTextEditorElement") }}
+			</template>
+			<template #menu>
+				<CollaborativeTextEditorElementMenu
+					v-if="isEditMode"
+					@move-down:element="onMoveDown"
+					@move-up:element="onMoveUp"
+					@delete:element="onDelete"
+				/>
+			</template>
+		</ContentElementBar>
+	</v-card>
+</template>
+
+<script setup lang="ts">
+import image from "@/assets/img/collaborativeEditor.svg";
+import {
+	CollaborativeTextEditorElementResponse,
+	CollaborativeTextEditorParentType,
+} from "@/serverApi/v3";
+import { useBoardFocusHandler } from "@data-board";
+import { mdiTextBoxEditOutline } from "@mdi/js";
+import { ContentElementBar } from "@ui-board";
+import { PropType, ref, toRef } from "vue";
+import CollaborativeTextEditorElementMenu from "./components/CollaborativeTextEditorElementMenu.vue";
+import { useCollaborativeTextEditorApi } from "./composables/CollaborativeTextEditorApi.composable";
+
+const props = defineProps({
+	element: {
+		type: Object as PropType<CollaborativeTextEditorElementResponse>,
+		required: true,
+	},
+	isEditMode: { type: Boolean, required: true },
+});
+
+const emit = defineEmits([
+	"delete:element",
+	"move-down:edit",
+	"move-up:edit",
+	"move-keyboard:edit",
+]);
+
+const collaborativeTextEditorElement = ref<HTMLElement | null>(null);
+const element = toRef(props, "element");
+useBoardFocusHandler(element.value.id, collaborativeTextEditorElement);
+
+const { getUrl } = useCollaborativeTextEditorApi();
+
+const redirectToEditorUrl = async () => {
+	const windowReference = window.open();
+
+	getUrl(
+		element.value.id,
+		CollaborativeTextEditorParentType.ContentElement
+	).then((url) => {
+		if (url && windowReference) {
+			windowReference.location = url;
+		}
+	});
+};
+
+const onKeydownArrow = (event: KeyboardEvent) => {
+	if (props.isEditMode) {
+		event.preventDefault();
+		emit("move-keyboard:edit", event);
+	}
+};
+const onDelete = async (confirmation: Promise<boolean>) => {
+	const shouldDelete = await confirmation;
+	if (shouldDelete) {
+		emit("delete:element", props.element.id);
+	}
+};
+
+const onMoveUp = () => emit("move-up:edit");
+const onMoveDown = () => emit("move-down:edit");
+</script>