BC-7625 Do not hide add card (#3984)

* Remove the edit-share logic from the MediaBoard

* Revert "Remove the edit-share logic from the MediaBoard"

This reverts commit 222679e.

* Remove the logic for edit mode from the Card.store, Board, and BoardAddCardButton components.

* Remove shared edit mode logic from Board and Card REST APIs

* Remove edit mode logic from Card.store and update Board.vue to reflect changes

* Remove edit mode logic from Board and Card REST APIs

* Restrict list item detection to exclude title elements in InlineEditInteractionHandler

* Update InlineEditInteractionHandler to enable capture option and refine list item detection

* stop displaying add button when a card of the boardcolumn is currently in editmode

* Add tests to verify the visibility of the add card button while editing cards.

* Refactor BoardColumn tests to streamline setup and improve add card button visibility checks during edit mode

* Implement edit mode handling for add card button visibility in BoardColumn tests

---------

Co-authored-by: virgilchiriac <[email protected]>
Co-authored-by: Johannes Lueder <[email protected]>

Author: 3 people

src/modules/feature/board/board/BoardAddCardButton.vue

@@ -1,7 +1,6 @@
 <template>
 	<div ref="sticky" class="d-flex justify-center button-background pb-4 pt-2 sticky">
 		<VBtn
-			v-if="!isEditMode"
 			elevation="6"
 			class="bg-white"
 			icon
@@ -18,10 +17,7 @@
 </template>
 
 <script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useSharedEditMode } from "@/modules/util/board/editMode.composable"; // FIX_CIRCULAR_DEPENDENCY
 import { mdiPlus } from "@icons/material";
-import { computed } from "vue";
 
 defineProps({
 	dataTestid: {
@@ -32,10 +28,7 @@ defineProps({
 
 const emit = defineEmits(["add-card"]);
 
-const { editModeId } = useSharedEditMode();
 const onAddCard = () => emit("add-card");
-
-const isEditMode = computed(() => editModeId.value !== undefined);
 </script>
 
 <style scoped>

src/modules/feature/board/board/BoardColumn.unit.ts

@@ -7,7 +7,7 @@ import setupStores from "@@/tests/test-utils/setupStores";
 import { useBoardPermissions, useBoardStore, useForceRender } from "@data-board";
 import { createMock } from "@golevelup/ts-vitest";
 import { createTestingPinia } from "@pinia/testing";
-import { useDragAndDrop, useSharedLastCreatedElement } from "@util-board";
+import { useDragAndDrop, useSharedEditMode, useSharedLastCreatedElement } from "@util-board";
 import { setActivePinia } from "pinia";
 import { computed, nextTick, ref } from "vue";
 
@@ -46,6 +46,7 @@ describe("BoardColumn", () => {
 		const column = columnResponseFactory.build({
 			cards,
 		});
+		const { setEditModeId } = useSharedEditMode();
 		document.body.setAttribute("data-app", "true");
 		mockedUserPermissions.mockReturnValue({
 			...defaultPermissions,
@@ -66,7 +67,7 @@ describe("BoardColumn", () => {
 
 		const store = mockedPiniaStoreTyping(useBoardStore);
 
-		return { wrapper, store, cards, column };
+		return { wrapper, store, cards, column, setEditModeId };
 	};
 
 	describe("when component is mounted", () => {
@@ -335,4 +336,46 @@ describe("BoardColumn", () => {
 			});
 		});
 	});
+
+	describe("when editing a card", () => {
+		it("should not show addCardButton in the same column", async () => {
+			const { wrapper, setEditModeId, cards } = setup();
+			const cardId = cards[0].cardId;
+			setEditModeId(cardId);
+			await nextTick();
+
+			const addCardButtons = wrapper.findAllComponents({
+				name: "BoardAddCardButton",
+			});
+			expect(addCardButtons).toHaveLength(0);
+		});
+
+		it("should show addCardButton in any other column", async () => {
+			const { setEditModeId: originalSetEditModeId, wrapper: originalWrapper } = setup();
+			const { cards: siblingCards } = setup();
+
+			originalSetEditModeId(siblingCards[0].cardId);
+			await nextTick();
+
+			const addCardButtons = originalWrapper.findAllComponents({
+				name: "BoardAddCardButton",
+			});
+			expect(addCardButtons).toHaveLength(1);
+		});
+		it("should show addCardButton in same column if edit mode is stopped", async () => {
+			const { wrapper, setEditModeId, cards } = setup();
+
+			const cardId = cards[0].cardId;
+			setEditModeId(cardId);
+			await nextTick();
+
+			setEditModeId(undefined);
+			await nextTick();
+
+			const addCardButtons = wrapper.findAllComponents({
+				name: "BoardAddCardButton",
+			});
+			expect(addCardButtons).toHaveLength(1);
+		});
+	});
 });

src/modules/feature/board/board/BoardColumn.vue

@@ -77,7 +77,7 @@ import BoardColumnHeader from "./BoardColumnHeader.vue";
 import { useBoardStore } from "@/modules/data/board/Board.store"; // FIX_CIRCULAR_DEPENDENCY
 import { BoardColumn } from "@/types/board/Board";
 import { useBoardPermissions, useForceRender } from "@data-board";
-import { extractDataAttribute, useDragAndDrop } from "@util-board";
+import { extractDataAttribute, useDragAndDrop, useSharedEditMode } from "@util-board";
 import { useDebounceFn } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
 import { Sortable } from "sortablejs-vue3";
@@ -106,7 +106,7 @@ const emit = defineEmits<{
 
 const boardStore = useBoardStore();
 const reactiveIndex = toRef(props, "index");
-
+const { editModeId } = useSharedEditMode();
 const { hasEditPermission, hasMovePermission, hasCreateColumnPermission } = useBoardPermissions();
 
 const columnClasses = computed(() => {
@@ -120,7 +120,14 @@ const columnClasses = computed(() => {
 });
 
 const { isDragging, dragStart, dragEnd } = useDragAndDrop();
-const showAddButton = computed(() => hasCreateColumnPermission.value && isDragging.value === false);
+
+const isCardOfColumnInEditMode = computed(
+	() => props.column.cards.find((c) => c.cardId === editModeId.value) !== undefined
+);
+
+const showAddButton = computed(
+	() => hasCreateColumnPermission.value && isDragging.value === false && !isCardOfColumnInEditMode.value
+);
 
 const isNotFirstColumn = computed(() => props.index !== 0);
 const isNotLastColumn = computed(() => props.index !== props.columnCount - 1);