@flusys/ng-task-manager 9.1.2 → 9.2.1

package/fesm2022/flusys-ng-task-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { Component, DestroyRef, Service, computed, effect, inject, input, model, output, signal } from "@angular/core";
+import { Component, DestroyRef, Service, computed, effect, inject, input, model, output, signal, untracked } from "@angular/core";
 import { ApiResourceService, SHARED_MESSAGES, TranslatePipe, resolveTranslationModule } from "@flusys/ng-shared";
 import { Subject, firstValueFrom } from "rxjs";
 import { io } from "socket.io-client";
@@ -177,35 +177,51 @@ var TaskBoardSocketService = class TaskBoardSocketService {
 	isConnected = this._isConnected.asReadonly();
 	boardEvent$ = new Subject();
 	onBoardEvent = this.boardEvent$.asObservable();
+	joinedBoardIds = /* @__PURE__ */ new Set();
 	connect(accessToken) {
 		if (this.socket?.connected) return;
+		this.teardown();
 		const baseUrl = this.getBaseUrl();
-		this.socket = io(`${baseUrl}/task-boards`, {
+		const socket = io(`${baseUrl}/task-boards`, {
 			auth: { token: accessToken },
 			transports: ["websocket", "polling"],
 			reconnection: true,
 			reconnectionAttempts: 5,
 			reconnectionDelay: 1e3
 		});
-		this.socket.on("connect", () => this._isConnected.set(true));
-		this.socket.on("disconnect", (reason) => {
+		this.socket = socket;
+		socket.on("connect", () => {
+			this._isConnected.set(true);
+			this.joinedBoardIds.forEach((boardId) => socket.emit("board:join", { boardId }));
+		});
+		socket.on("disconnect", (reason) => {
 			this._isConnected.set(false);
-			if (reason === "io server disconnect") this.socket?.connect();
+			if (reason === "io server disconnect") socket.connect();
+		});
+		socket.on("connect_error", () => this._isConnected.set(false));
+		socket.on("board:event", (event) => {
+			if (event && typeof event.type === "string" && typeof event.boardId === "string") this.boardEvent$.next(event);
 		});
-		this.socket.on("connect_error", () => this._isConnected.set(false));
-		this.socket.on("board:event", (event) => this.boardEvent$.next(event));
 	}
 	joinBoard(boardId) {
-		this.socket?.emit("board:join", { boardId });
+		this.joinedBoardIds.add(boardId);
+		if (this.socket?.connected) this.socket.emit("board:join", { boardId });
 	}
 	leaveBoard(boardId) {
-		this.socket?.emit("board:leave", { boardId });
+		this.joinedBoardIds.delete(boardId);
+		if (this.socket?.connected) this.socket.emit("board:leave", { boardId });
 	}
 	disconnect() {
-		this.socket?.disconnect();
-		this.socket = null;
+		this.teardown();
+		this.joinedBoardIds.clear();
 		this._isConnected.set(false);
 	}
+	teardown() {
+		if (!this.socket) return;
+		this.socket.removeAllListeners();
+		this.socket.disconnect();
+		this.socket = null;
+	}
 	getBaseUrl() {
 		return this.appConfig.services?.["taskManager"]?.socketUrl ?? this.appConfig.apiBaseUrl;
 	}
@@ -247,6 +263,7 @@ var TaskBoardStateService = class TaskBoardStateService {
 	_selectedTask = signal(null, ...ngDevMode ? [{ debugName: "_selectedTask" }] : /* istanbul ignore next */ []);
 	_isLoading = signal(false, ...ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []);
 	_isBoardLoading = signal(false, ...ngDevMode ? [{ debugName: "_isBoardLoading" }] : /* istanbul ignore next */ []);
+	openRequestId = 0;
 	boards = this._boards.asReadonly();
 	activeBoard = this._activeBoard.asReadonly();
 	lists = this._lists.asReadonly();
@@ -284,10 +301,11 @@ var TaskBoardStateService = class TaskBoardStateService {
 		}
 	}
 	async openBoard(boardId) {
+		const request = ++this.openRequestId;
 		this._isBoardLoading.set(true);
 		try {
 			const prevBoard = this._activeBoard();
-			if (prevBoard) this.socketService.leaveBoard(prevBoard.id);
+			if (prevBoard && prevBoard.id !== boardId) this.socketService.leaveBoard(prevBoard.id);
 			const [boardRes, listsRes, tasksRes, labelsRes, membersRes] = await Promise.all([
 				this.boardApi.findById(boardId),
 				this.listApi.getAll({
@@ -304,19 +322,28 @@ var TaskBoardStateService = class TaskBoardStateService {
 				this.labelApi.getAll({ filter: { boardId } }),
 				this.boardApi.getMembers(boardId)
 			]);
+			if (request !== this.openRequestId) return;
 			this._activeBoard.set(boardRes.data ?? null);
 			this._lists.set(listsRes.data ?? []);
 			this._tasks.set(tasksRes.data ?? []);
 			this._labels.set(labelsRes.data ?? []);
 			this._members.set(membersRes.data ?? []);
 			this.socketService.joinBoard(boardId);
+		} catch (error) {
+			if (request === this.openRequestId) this.resetBoardState();
+			throw error;
 		} finally {
-			this._isBoardLoading.set(false);
+			if (request === this.openRequestId) this._isBoardLoading.set(false);
 		}
 	}
 	closeBoard() {
+		this.openRequestId++;
 		const board = this._activeBoard();
 		if (board) this.socketService.leaveBoard(board.id);
+		this.resetBoardState();
+		this._isBoardLoading.set(false);
+	}
+	resetBoardState() {
 		this._activeBoard.set(null);
 		this._lists.set([]);
 		this._tasks.set([]);
@@ -356,15 +383,49 @@ var TaskBoardStateService = class TaskBoardStateService {
 		this._members.update((list) => list.filter((m) => m.userId !== userId));
 	}
 	async reorderLists(boardId, orderedIds) {
-		const posMap = new Map(orderedIds.map((id, i) => [id, i * 100]));
-		this._lists.update((list) => list.map((l) => posMap.has(l.id) ? {
-			...l,
-			position: posMap.get(l.id)
-		} : l).sort((a, b) => a.position - b.position));
-		await this.listApi.reorderLists({
-			boardId,
-			orderedIds
-		});
+		const previousPositions = new Map(this._lists().map((l) => [l.id, l.position]));
+		this.applyListOrder(orderedIds);
+		try {
+			await this.listApi.reorderLists({
+				boardId,
+				orderedIds
+			});
+		} catch (error) {
+			this._lists.update((list) => list.map((l) => previousPositions.has(l.id) ? {
+				...l,
+				position: previousPositions.get(l.id)
+			} : l).sort((a, b) => a.position - b.position));
+			throw error;
+		}
+	}
+	async moveTask(taskId, targetListId, targetIndex) {
+		const task = this._tasks().find((t) => t.id === taskId);
+		if (!task) return;
+		const siblings = this._tasks().filter((t) => t.listId === targetListId && t.id !== taskId).sort((a, b) => a.position - b.position);
+		const index = Math.min(Math.max(Math.trunc(targetIndex) || 0, 0), siblings.length);
+		const position = positionBetween(siblings[index - 1]?.position, siblings[index]?.position);
+		const original = {
+			listId: task.listId,
+			position: task.position
+		};
+		this._tasks.update((list) => list.map((t) => t.id === taskId ? {
+			...t,
+			listId: targetListId,
+			position
+		} : t));
+		try {
+			await this.taskApi.moveTask({
+				taskId,
+				targetListId,
+				position
+			});
+		} catch (error) {
+			this._tasks.update((list) => list.map((t) => t.id === taskId ? {
+				...t,
+				...original
+			} : t));
+			throw error;
+		}
 	}
 	async renameList(listId, name) {
 		await this.listApi.updateList({
@@ -406,7 +467,22 @@ var TaskBoardStateService = class TaskBoardStateService {
 		this._tasks.update((list) => list.filter((t) => t.id !== taskId));
 		if (this._selectedTask()?.id === taskId) this._selectedTask.set(null);
 	}
+	applyListOrder(orderedIds) {
+		const posMap = new Map(orderedIds.map((id, i) => [id, i * 100]));
+		this._lists.update((list) => list.map((l) => posMap.has(l.id) ? {
+			...l,
+			position: posMap.get(l.id)
+		} : l).sort((a, b) => a.position - b.position));
+	}
 	handleBoardEvent(event) {
+		const activeBoardId = this._activeBoard()?.id;
+		if (!activeBoardId || event.boardId !== activeBoardId) return;
+		if (event.type === "list:reordered") {
+			const orderedIds = event.payload?.orderedIds;
+			if (Array.isArray(orderedIds)) this.applyListOrder(orderedIds.filter((id) => typeof id === "string"));
+			return;
+		}
+		if (!hasId(event.payload)) return;
 		switch (event.type) {
 			case "task:created": {
 				const created = event.payload;
@@ -435,9 +511,11 @@ var TaskBoardStateService = class TaskBoardStateService {
 				if (this._selectedTask()?.id === deleted.id) this._selectedTask.set(null);
 				break;
 			}
-			case "list:created":
-				this._lists.update((list) => [...list, event.payload]);
+			case "list:created": {
+				const created = event.payload;
+				this._lists.update((list) => list.some((l) => l.id === created.id) ? list : [...list, created]);
 				break;
+			}
 			case "list:updated": {
 				const updatedList = event.payload;
 				this._lists.update((list) => list.map((l) => l.id === updatedList.id ? {
@@ -451,15 +529,6 @@ var TaskBoardStateService = class TaskBoardStateService {
 				this._lists.update((list) => list.filter((l) => l.id !== deletedList.id));
 				break;
 			}
-			case "list:reordered": {
-				const { orderedIds } = event.payload;
-				const posMap = new Map(orderedIds.map((id, i) => [id, i * 100]));
-				this._lists.update((list) => list.map((l) => posMap.has(l.id) ? {
-					...l,
-					position: posMap.get(l.id)
-				} : l).sort((a, b) => a.position - b.position));
-				break;
-			}
 		}
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -485,6 +554,16 @@ i0.ɵɵngDeclareClassMetadata({
 	decorators: [{ type: Service }],
 	ctorParameters: () => []
 });
+const MAX_POSITION = 2147483647;
+function positionBetween(before, after) {
+	if (before === void 0 && after === void 0) return 0;
+	if (before === void 0) return Math.max(0, Math.floor(after / 2));
+	if (after === void 0) return Math.min(MAX_POSITION, before + 100);
+	return Math.floor((before + after) / 2);
+}
+function hasId(payload) {
+	return typeof payload === "object" && payload !== null && typeof payload.id === "string";
+}
 const MEMBER_COLOR_PALETTE = [
 	"#6366f1",
 	"#8b5cf6",
@@ -510,8 +589,20 @@ function memberInitials(name) {
 	if (!name) return "?";
 	return name.split(" ").slice(0, 2).map((n) => n[0]?.toUpperCase() ?? "").join("");
 }
+const DATE_ONLY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})/;
+function toDateOnlyString(date) {
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+	return `${date.getFullYear()}-${month}-${day}`;
+}
+function parseDateOnly(value) {
+	const match = value ? DATE_ONLY_PATTERN.exec(value) : null;
+	if (!match) return null;
+	return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]), 12, 0, 0);
+}
 function isTaskOverdue(dueDate) {
-	return new Date(dueDate) < /* @__PURE__ */ new Date();
+	if (!dueDate || !DATE_ONLY_PATTERN.test(dueDate)) return false;
+	return dueDate.slice(0, 10) < toDateOnlyString(/* @__PURE__ */ new Date());
 }
 function memberColorFromId(userId) {
 	let hash = 0;
@@ -599,7 +690,7 @@ var TaskCardComponent = class TaskCardComponent {
 
       <div class="flex items-center justify-between gap-2 mt-auto pt-2">
         <f-tag
-          [value]="task().priority"
+          [value]="('task.priority.' + task().priority) | translate"
           [severity]="prioritySeverity(task().priority)"
           class="text-xs"
         />
@@ -775,7 +866,7 @@ i0.ɵɵngDeclareClassMetadata({
 
       <div class="flex items-center justify-between gap-2 mt-auto pt-2">
         <f-tag
-          [value]="task().priority"
+          [value]="('task.priority.' + task().priority) | translate"
           [severity]="prioritySeverity(task().priority)"
           class="text-xs"
         />
@@ -888,7 +979,7 @@ var TaskFormDialogComponent = class TaskFormDialogComponent {
 					description: t.description ?? "",
 					priority: t.priority
 				});
-				this.dueDate.set(t.dueDate ? new Date(t.dueDate) : null);
+				this.dueDate.set(parseDateOnly(t.dueDate));
 				this.selectedAssigneeIds.set(t.assignees?.map((a) => a.userId) ?? []);
 				this.selectedLabelIds.set(t.labelIds ?? []);
 			} else this.reset();
@@ -900,7 +991,7 @@ var TaskFormDialogComponent = class TaskFormDialogComponent {
 		this.isSaving.set(true);
 		try {
 			const dueDate = this.dueDate();
-			const dueDateStr = dueDate ? dueDate.toISOString().slice(0, 10) : void 0;
+			const dueDateStr = dueDate ? toDateOnlyString(dueDate) : null;
 			const existing = this.task();
 			const assigneeIds = this.selectedAssigneeIds();
 			const labelIds = this.selectedLabelIds();
@@ -923,7 +1014,7 @@ var TaskFormDialogComponent = class TaskFormDialogComponent {
 					title,
 					description: description || void 0,
 					priority,
-					dueDate: dueDateStr,
+					dueDate: dueDateStr ?? void 0,
 					assigneeIds,
 					labelIds
 				};
@@ -1629,14 +1720,15 @@ var TaskDetailPanelComponent = class TaskDetailPanelComponent {
 	repliesFor(parentId) {
 		return this.comments().filter((c) => c.parentCommentId === parentId);
 	}
+	taskId = computed(() => this.task()?.id ?? null, ...ngDevMode ? [{ debugName: "taskId" }] : /* istanbul ignore next */ []);
 	constructor() {
 		effect(() => {
-			const t = this.task();
-			if (t) this.loadComments(t.id);
-			else {
+			const id = this.taskId();
+			untracked(() => {
 				this.comments.set([]);
-				this.replyingToId.set(null);
-			}
+				this.cancelReply();
+				if (id) this.loadComments(id);
+			});
 		});
 	}
 	toggleReply(commentId) {
@@ -1662,8 +1754,13 @@ var TaskDetailPanelComponent = class TaskDetailPanelComponent {
 	prioritySeverity = taskPrioritySeverity;
 	initials = memberInitials;
 	async loadComments(taskId) {
-		const res = await this.commentApi.getAll({ filter: { taskId } });
-		this.comments.set(res.data ?? []);
+		let comments = [];
+		try {
+			comments = (await this.commentApi.getAll({ filter: { taskId } })).data ?? [];
+		} catch {
+			comments = [];
+		}
+		if (this.task()?.id === taskId) this.comments.set(comments);
 	}
 	async addComment(taskId) {
 		if (!this.newComment().trim()) return;
@@ -1762,7 +1859,7 @@ var TaskDetailPanelComponent = class TaskDetailPanelComponent {
 
           <div class="flex items-center gap-3">
             <f-tag
-              [value]="t.priority"
+              [value]="('task.priority.' + t.priority) | translate"
               [severity]="prioritySeverity(t.priority)"
             />
             @if (t.dueDate) {
@@ -2153,7 +2250,7 @@ i0.ɵɵngDeclareClassMetadata({
 
           <div class="flex items-center gap-3">
             <f-tag
-              [value]="t.priority"
+              [value]="('task.priority.' + t.priority) | translate"
               [severity]="prioritySeverity(t.priority)"
             />
             @if (t.dueDate) {
@@ -2479,7 +2576,7 @@ const TASK_MANAGER_ROUTES = [{
 			...SHARED_MESSAGES
 		}
 	}) },
-	loadComponent: () => import("./flusys-ng-task-manager-board-list-page.component-Dmay3IyF.mjs").then((m) => m.BoardListPageComponent)
+	loadComponent: () => import("./flusys-ng-task-manager-board-list-page.component-BAkiTEpy.mjs").then((m) => m.BoardListPageComponent)
 }, {
 	path: "board/:boardId",
 	resolve: { translations: resolveTranslationModule({
@@ -2489,8 +2586,8 @@ const TASK_MANAGER_ROUTES = [{
 			...SHARED_MESSAGES
 		}
 	}) },
-	loadComponent: () => import("./flusys-ng-task-manager-board-view-page.component-CkC8-UKF.mjs").then((m) => m.BoardViewPageComponent)
+	loadComponent: () => import("./flusys-ng-task-manager-board-view-page.component-9ZrU7hON.mjs").then((m) => m.BoardViewPageComponent)
 }];
-export { BOARD_COLOR_PALETTE, MEMBER_COLOR_PALETTE, TASK_MANAGER_MESSAGES, TASK_MANAGER_ROUTES, TaskApiService, TaskBoardApiService, TaskBoardSocketService, TaskBoardStateService, TaskCardComponent, TaskCommentApiService, TaskDetailPanelComponent, TaskFormDialogComponent, TaskLabelApiService, TaskListApiService, isTaskOverdue, memberColorFromId, memberInitials, taskPrioritySeverity };
+export { BOARD_COLOR_PALETTE, MEMBER_COLOR_PALETTE, TASK_MANAGER_MESSAGES, TASK_MANAGER_ROUTES, TaskApiService, TaskBoardApiService, TaskBoardSocketService, TaskBoardStateService, TaskCardComponent, TaskCommentApiService, TaskDetailPanelComponent, TaskFormDialogComponent, TaskLabelApiService, TaskListApiService, isTaskOverdue, memberColorFromId, memberInitials, parseDateOnly, taskPrioritySeverity, toDateOnlyString };
 
 //# sourceMappingURL=flusys-ng-task-manager.mjs.map