BC-7008 - Implement element socket actions

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

@@ -5,8 +5,6 @@ import { useBoardRestApi } from "./boardActions/boardRestApi.composable";
 import { useBoardSocketApi } from "./boardActions/boardSocketApi.composable";
 import { useBoardFocusHandler } from "./BoardFocusHandler.composable";
 import { useSharedEditMode } from "./EditMode.composable";
-import { CardMove } from "@/types/board/DragAndDrop";
-import { ColumnResponse } from "@/serverApi/v3";
 import { envConfigModule } from "@/store";
 import {
 	CreateCardRequestPayload,
@@ -18,7 +16,6 @@ import {
 	DisconnectSocketRequestPayload,
 	FetchBoardRequestPayload,
 	FetchBoardSuccessPayload,
-	MoveCardRequestPayload,
 	MoveCardSuccessPayload,
 	MoveColumnRequestPayload,
 	MoveColumnSuccessPayload,
@@ -43,6 +40,8 @@ export const useBoardStore = defineStore("boardStore", () => {
 
 	const { setEditModeId } = useSharedEditMode();
 
+	const getLastColumnIndex = () => board.value!.columns.length - 1;
+
 	const getColumnIndex = (columnId: string | undefined): number => {
 		if (columnId === undefined) return -1;
 		if (board.value === undefined) return -1;
@@ -52,8 +51,8 @@ export const useBoardStore = defineStore("boardStore", () => {
 	};
 
 	const getColumnId = (columnIndex: number): string | undefined => {
-		if (board.value === undefined) return;
-		if (columnIndex === undefined) return;
+		if (board.value === undefined) return; // shouldn't happen because board presence is checked by callers
+		if (columnIndex === undefined) return; // shouldn't happen because columnIndex is always set by type definition
 		if (columnIndex < 0) return;
 		if (columnIndex > board.value.columns.length - 1) return;
 
@@ -62,6 +61,20 @@ export const useBoardStore = defineStore("boardStore", () => {
 		return board.value.columns[columnIndex].id;
 	};
 
+	const getCardLocation = (cardId: string) => {
+		if (!board.value) return;
+
+		const columnIndex = board.value.columns.findIndex(
+			(column) => column.cards.find((c) => c.cardId === cardId) !== undefined
+		);
+		if (columnIndex === -1) return undefined;
+
+		const column = board.value.columns[columnIndex];
+		const columnId = column.id;
+		const cardIndex = column.cards.findIndex((c) => c.cardId === cardId);
+		return { columnIndex, columnId, cardIndex };
+	};
+
 	const setBoard = (newBoard: Board | undefined) => {
 		board.value = newBoard;
 	};
@@ -70,7 +83,10 @@ export const useBoardStore = defineStore("boardStore", () => {
 		isLoading.value = loading;
 	};
 
+	let allowToSwitchEditMode = false;
+
 	const createCardRequest = (payload: CreateCardRequestPayload) => {
+		allowToSwitchEditMode = true;
 		socketOrRest.createCardRequest(payload);
 	};
 
@@ -88,7 +104,9 @@ export const useBoardStore = defineStore("boardStore", () => {
 			cardId: newCard.id,
 			height: 120,
 		});
+		if (allowToSwitchEditMode === false) return;
 		setEditModeId(newCard.id);
+		allowToSwitchEditMode = false;
 	};
 
 	const createColumnRequest = async (payload: CreateColumnRequestPayload) => {
@@ -122,10 +140,9 @@ export const useBoardStore = defineStore("boardStore", () => {
 		if (!board.value) return;
 		const columnId = payload.columnId;
 		const columnIndex = getColumnIndex(columnId);
-		if (columnIndex < 0) {
-			return;
+		if (columnIndex !== -1) {
+			board.value.columns.splice(columnIndex, 1);
 		}
-		board.value.columns.splice(columnIndex, 1);
 	};
 
 	const updateBoardTitleRequest = async (
@@ -152,7 +169,7 @@ export const useBoardStore = defineStore("boardStore", () => {
 		if (!board.value) return;
 		const { columnId, newTitle } = payload;
 		const columnIndex = getColumnIndex(columnId);
-		if (columnIndex > -1) {
+		if (columnIndex !== -1) {
 			board.value.columns[columnIndex].title = newTitle;
 		}
 	};
@@ -196,77 +213,38 @@ export const useBoardStore = defineStore("boardStore", () => {
 		board.value.columns.splice(addedIndex, 0, column);
 	};
 
-	const getColumnIndices = (
-		fromColumnId: string | undefined,
-		toColumnId: string | undefined,
-		columnDelta: number | undefined
-	) => {
-		const fromColumnIndex = getColumnIndex(fromColumnId);
-		const newColumnId: string | undefined =
-			columnDelta === undefined
-				? toColumnId
-				: getColumnId(fromColumnIndex + columnDelta);
-
-		return { fromColumnIndex, toColumnIndex: getColumnIndex(newColumnId) };
-	};
+	const moveCardToNewColumn = async (cardId: string) => {
+		const cardLocation = getCardLocation(cardId);
+		if (cardLocation === undefined) return;
 
-	const isMoveValid = (
-		payload: CardMove,
-		columns: Array<ColumnResponse>,
-		targetColumnIndex: number,
-		fromColumnIndex: number
-	) => {
-		const { cardId, newIndex, oldIndex } = payload;
-		if (cardId === undefined || targetColumnIndex === undefined) return false; // ensure values are set
-
-		const movedInsideColumn = fromColumnIndex === targetColumnIndex;
-		if (movedInsideColumn) {
-			if (
-				(newIndex === oldIndex && fromColumnIndex === targetColumnIndex) || // same position
-				newIndex < 0 || // first card - can't move up
-				newIndex > columns[fromColumnIndex].cards.length - 1 // last card - can't move down
-			)
-				return false;
-		}
+		const {
+			columnIndex: fromColumnIndex,
+			columnId: fromColumnId,
+			cardIndex: oldIndex,
+		} = cardLocation;
 
-		return true;
+		await socketOrRest.moveCardRequest({
+			cardId,
+			fromColumnId,
+			fromColumnIndex,
+			oldIndex,
+			newIndex: 0,
+		});
 	};
 
-	const moveCardRequest = async (payload: MoveCardRequestPayload) => {
-		await socketOrRest.moveCardRequest(payload);
-	};
+	const moveCardRequest = socketOrRest.moveCardRequest;
 
 	const moveCardSuccess = async (payload: MoveCardSuccessPayload) => {
 		if (!board.value) return;
 
 		const {
 			newIndex,
 			oldIndex,
-			toColumnId,
-			fromColumnId,
-			columnDelta,
 			forceNextTick,
+			fromColumnIndex,
+			toColumnIndex,
 		} = payload;
 
-		const { fromColumnIndex, toColumnIndex } = getColumnIndices(
-			fromColumnId,
-			toColumnId,
-			columnDelta
-		);
-
-		const targetColumnIndex = toColumnIndex ?? board.value.columns.length - 1;
-
-		if (
-			!isMoveValid(
-				payload,
-				board.value.columns,
-				targetColumnIndex,
-				fromColumnIndex
-			)
-		) {
-			return;
-		}
-
 		const item = board.value.columns[fromColumnIndex].cards.splice(
 			oldIndex,
 			1
@@ -280,9 +258,12 @@ export const useBoardStore = defineStore("boardStore", () => {
 			await nextTick();
 		}
 
-		board.value.columns[targetColumnIndex].cards =
-			board.value.columns[targetColumnIndex].cards ?? [];
-		board.value.columns[targetColumnIndex].cards.splice(newIndex, 0, item);
+		const toColumn = board.value.columns[toColumnIndex];
+		if (!toColumn.cards) {
+			toColumn.cards = [];
+		}
+
+		toColumn.cards.splice(newIndex, 0, item);
 	};
 
 	const disconnectSocketRequest = (payload: DisconnectSocketRequestPayload) => {
@@ -306,6 +287,9 @@ export const useBoardStore = defineStore("boardStore", () => {
 	return {
 		board,
 		isLoading,
+		getColumnIndex,
+		getColumnId,
+		getLastColumnIndex,
 		setBoard,
 		setLoading,
 		createCardRequest,
@@ -316,6 +300,7 @@ export const useBoardStore = defineStore("boardStore", () => {
 		deleteColumnRequest,
 		deleteColumnSuccess,
 		disconnectSocketRequest,
+		moveCardToNewColumn,
 		moveCardRequest,
 		moveCardSuccess,
 		moveColumnRequest,